/* * MARKA TASARIM KATMANI * --------------------- * Bu dosya PairDrop'un kendi stillerinin ÜZERİNE yüklenir. * Tüm markaya özel görsel düzenlemeler burada durur; böylece * `git pull` ile gelen güncellemeler tasarımı bozmaz. * * Renk değişkenleri (--primary-color vb.) styles-main.css içindeki * token bloğunda tanımlıdır. Buradaki kurallar o tokenleri kullanır, * sabit renk kodu yazmaz. * * DİKKAT: styles-deferred.css scripts/main.js tarafından sayfa açıldıktan * SONRA 'e ekleniyor, yani bu dosyadan daha geç yükleniyor. * O dosyada da tanımlı olan selektörleri ezebilmek için burada başlarına * `body` ekliyoruz — bu önceliği yükseltir ve yükleme sırasından bağımsız * olarak marka stilinin kazanmasını garantiler. */ /* --------------------------------------------------------------- 1. Zemin — derinlik veren yumuşak ışık havuzları --------------------------------------------------------------- */ body { background-image: radial-gradient(ellipse 55% 45% at 18% 12%, color-mix(in srgb, var(--primary-color) 30%, transparent) 0%, transparent 68%), radial-gradient(ellipse 50% 45% at 84% 22%, color-mix(in srgb, var(--primary-color-strong) 26%, transparent) 0%, transparent 68%), radial-gradient(ellipse 70% 50% at 50% 108%, color-mix(in srgb, var(--paired-device-color) 14%, transparent) 0%, transparent 70%); background-attachment: fixed; background-repeat: no-repeat; } /* İnce nokta ızgarası — zemine doku ve derinlik katar. position:fixed + z-index:0 ile en arkada kalır; konumlandırılmış içerik (üst çubuk z-20, alt bilgi z-2, x-peers z-2) hep üstünde çizilir. */ body::before { content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; background-image: radial-gradient(circle at 1px 1px, color-mix(in srgb, rgb(var(--text-color)) 13%, transparent) 1px, transparent 0); background-size: 32px 32px; /* Kenarlara doğru silinsin, ortada belirgin olsun */ mask-image: radial-gradient(ellipse 70% 60% at 50% 42%, #000 20%, transparent 78%); -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 42%, #000 20%, transparent 78%); } /* Açık temada aynı ışık çok daha hafif olmalı, yoksa kirli görünür */ body.light-theme, body.light-theme::before { --zemin-yogunluk: 11%; } body.light-theme { background-image: radial-gradient(ellipse 55% 45% at 18% 12%, color-mix(in srgb, var(--primary-color) 12%, transparent) 0%, transparent 68%), radial-gradient(ellipse 50% 45% at 84% 22%, color-mix(in srgb, var(--primary-color-strong) 10%, transparent) 0%, transparent 68%), radial-gradient(ellipse 70% 50% at 50% 108%, color-mix(in srgb, var(--paired-device-color) 7%, transparent) 0%, transparent 70%); } @media (prefers-color-scheme: light) { body:not(.dark-theme) { background-image: radial-gradient(ellipse 55% 45% at 18% 12%, color-mix(in srgb, var(--primary-color) 12%, transparent) 0%, transparent 68%), radial-gradient(ellipse 50% 45% at 84% 22%, color-mix(in srgb, var(--primary-color-strong) 10%, transparent) 0%, transparent 68%), radial-gradient(ellipse 70% 50% at 50% 108%, color-mix(in srgb, var(--paired-device-color) 7%, transparent) 0%, transparent 70%); } } /* --------------------------------------------------------------- 2. Cihaz daireleri — ürünün kalbi, en çok bakılan öğe --------------------------------------------------------------- */ body x-peer .icon-wrapper { /* Daha zengin gradyan: köşeden köşeye, üstte açık */ background-image: linear-gradient(140deg, color-mix(in srgb, var(--accent-color) 88%, black) 0%, var(--accent-color) 45%, color-mix(in srgb, var(--accent-color) 65%, white) 100%); /* Renkli gölge — dairenin zeminden "kalkmış" hissetmesini sağlar */ box-shadow: 0 6px 18px -6px color-mix(in srgb, var(--accent-color) 60%, transparent), 0 0 0 1px color-mix(in srgb, var(--accent-color) 30%, transparent) inset; transition: box-shadow 220ms ease; } body x-peer:not([status]) label:hover .icon-wrapper, body x-peer:not([status]) label:focus-within .icon-wrapper { box-shadow: 0 10px 28px -6px color-mix(in srgb, var(--accent-color) 75%, transparent), 0 0 0 1px color-mix(in srgb, var(--accent-color) 45%, transparent) inset; } /* Dosya sürüklerken daire belirginleşsin */ body x-peer[drop] .icon-wrapper { box-shadow: 0 12px 34px -4px color-mix(in srgb, var(--accent-color) 85%, transparent), 0 0 0 2px color-mix(in srgb, var(--accent-color) 60%, transparent) inset; } /* Hover'da büyüme hareketi biraz daha yumuşak olsun */ body x-peer x-icon { transition: transform 220ms cubic-bezier(0.34, 1.3, 0.64, 1); } /* Cihaz adı — daha okunur, daha az soluk */ body .device-name, body .status { opacity: 0.82; letter-spacing: 0.01em; } /* --------------------------------------------------------------- 3. Düğmeler --------------------------------------------------------------- */ .btn { border-radius: 10px; letter-spacing: 0.08em; transition: color 180ms ease, transform 120ms ease; } .btn:not([disabled]):active { transform: translateY(1px); } .icon-button { border-radius: 10px; } /* Hover dolgusu şu an %30 opaklıkla sert duruyor — yumuşatıyoruz */ .btn:not([disabled]):hover:before, .icon-button:hover:before { opacity: 0.14; } .btn:focus:before, .icon-button:focus:before { opacity: 0.2; } /* Klavye ile gezenler için görünür odak halkası (erişilebilirlik) */ .btn:focus-visible, .icon-button:focus-visible, x-peer label:focus-visible, input:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 2px; border-radius: 10px; } /* --------------------------------------------------------------- 4. Diyaloglar — yükseltilmiş yüzey --------------------------------------------------------------- */ body x-dialog x-background { background: color-mix(in srgb, rgb(var(--bg-color)) 72%, transparent); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); } body x-dialog x-paper { border-radius: 20px; border: 1px solid var(--border-color); box-shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.5), 0 0 0 1px color-mix(in srgb, var(--accent-color) 12%, transparent); overflow: hidden; } /* Diyalog başlık çubuğu — düz renk yerine gradyan */ body x-paper > .row:first-of-type { background-image: linear-gradient(135deg, var(--accent-color) 0%, color-mix(in srgb, var(--accent-color) 72%, white) 100%); margin-bottom: 12px; } x-paper .dialog-title { letter-spacing: 0.01em; font-weight: 600; } /* --------------------------------------------------------------- 5. Paneller ve rozetler --------------------------------------------------------------- */ .panel { background-color: color-mix(in srgb, var(--bg-color-secondary) 70%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .border { border: 1px solid var(--border-color); } .badge { border-radius: 0.5rem; padding: 0 0.45em; font-weight: 600; letter-spacing: 0.01em; } /* --------------------------------------------------------------- 6. Başlık ve alt bilgi --------------------------------------------------------------- */ /* Üst çubuk: içerik altından kayarken cam etkisiyle ayrışsın */ body header { position: sticky; background: color-mix(in srgb, rgb(var(--bg-color)) 62%, transparent); backdrop-filter: blur(16px) saturate(150%); -webkit-backdrop-filter: blur(16px) saturate(150%); border-bottom: 1px solid color-mix(in srgb, var(--border-color) 55%, transparent); align-items: center; padding-inline: 18px; } /* Marka üst çubukta, sola yaslı. DİKKAT: Konumlandırma mutlak (absolute). Sebep: ui-main.js'teki taşma algılaması üst çubuğun tüm doğrudan çocuklarını gezip offsetLeft karşılaştırıyor. Marka normal akışta kalsaydı dar ekranda "ikinci satıra taşan ilk öğe" sanılıp gizlenebilirdi. Akış dışına alınca hem sarmalamayı hem o algılamayı hiç etkilemiyor; yerini padding ile ayırıyoruz. */ body header .header-brand { position: absolute; left: 18px; top: 0; height: 56px; display: flex; flex-direction: row; align-items: center; gap: 9px; margin: 0; user-select: none; pointer-events: none; } body header { padding-left: 148px; } .header-brand-mark { --icon-size: 27px; flex: 0 0 auto; /* Logo currentColor kullanıyor — rengi buradan veriliyor */ color: var(--primary-color); } body header .brand-wordmark { font-size: 19px; } /* Dar ekranda kelime işareti gider, yalnız işaret kalır */ @media (max-width: 560px) { body header { padding-left: 56px; padding-inline-end: 10px; } body header .header-brand { left: 14px; } body header .brand-wordmark { display: none; } body footer { margin-bottom: 14px; } body x-no-peers { padding-top: 132px; } } /* --------------------------------------------------------------- Üst çubuk menü alanları Eskiden ikonlar çıplak duruyor, üzerine gelince yalnızca saydamlık değişiyordu. Artık her biri 40x40 yuvarlak kare bir dokunma alanı; hover'da yüzey doluyor — bugünün uygulama başlıklarındaki davranış. --------------------------------------------------------------- */ body header .icon-button { width: 40px; height: 40px; border-radius: 12px; opacity: 0.72; transition: opacity 180ms ease, transform 160ms ease; } body header .icon-button:hover, body header .icon-button.selected { opacity: 1; } body header .icon-button:active { transform: scale(0.94); } /* Hover dolgusu: vurgu rengi yerine nötr yüzey — daha sakin durur */ body header .icon-button::before { border-radius: 12px; background-color: rgb(var(--text-color)); } body header .icon-button:hover::before { opacity: 0.09; } body header .icon-button:focus-visible::before { opacity: 0.14; } /* Çizgi ikonlar 24px'te fazla iri duruyor; 21px daha dengeli */ body header .icon { --icon-size: 21px; } /* İkonlar arası boşluk sıkılaştı */ body header > * { margin-left: 1px; margin-right: 1px; } /* Tema seçici: açılan sütunun arka planı da yüzey rengine döndü */ body #theme-wrapper:hover::before { border-radius: 14px; background: rgb(var(--text-color)); opacity: 0.07; width: 40px; } body #theme-wrapper .icon-button { border-radius: 12px; } /* --------------------------------------------------------------- Alt bilgi: kimlik kartı Eskiden alt bilgi devasa bir logo + serbest satırlardı. Artık tek bir toplu "kimlik kartı": kim olduğun ve kimlerin seni gördüğü. --------------------------------------------------------------- */ body footer { margin: 0 auto 22px; padding-inline: 16px; width: 100%; max-width: 480px; box-sizing: border-box; } .identity-card { width: 100%; box-sizing: border-box; padding: 18px 20px 16px; border-radius: 20px; border: 1px solid color-mix(in srgb, var(--border-color) 65%, transparent); background: color-mix(in srgb, var(--bg-color-secondary) 62%, transparent); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); box-shadow: 0 18px 44px -20px rgba(0, 0, 0, 0.6); gap: 12px; align-items: center; } /* Kart içindeki keşif satırı artık kendi çerçevesine ihtiyaç duymuyor */ body .identity-card .discovery-wrapper { margin: 0; border: none; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; padding: 0; gap: 6px; flex-wrap: wrap; justify-content: center; } body .identity-card .known-as-wrapper { font-size: 15px; opacity: 0.9; } /* Kelime işareti — marka gradyanıyla boyanmış metin */ .brand-wordmark { font-size: 25px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; background: var(--brand-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; margin: 0; } /* Logonun çok hafif nefes alması — sayfa "canlı" hissettirir */ @keyframes synqo-nefes { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.045); } } /* "Bir Web Danışmanı kuruluşudur" satırı */ .publisher-line { margin-top: 12px; font-size: 12px; letter-spacing: 0.02em; opacity: 0.55; transition: opacity 200ms ease; } .publisher-line:hover { opacity: 0.9; } .publisher-line a { color: rgb(var(--text-color)); font-weight: 600; text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--primary-color) 55%, transparent); padding-bottom: 1px; transition: color 180ms ease, border-color 180ms ease; } .publisher-line a:hover { color: var(--primary-color); border-bottom-color: var(--primary-color); } /* --------------------------------------------------------------- 7. Metin seçimi ve kaydırma çubuğu --------------------------------------------------------------- */ ::selection { background: color-mix(in srgb, var(--primary-color) 40%, transparent); color: rgb(var(--text-color)); } * { scrollbar-width: thin; scrollbar-color: var(--border-color) transparent; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background-color: var(--border-color); border-radius: 8px; border: 3px solid transparent; background-clip: content-box; } ::-webkit-scrollbar-thumb:hover { background-color: var(--badge-color); } /* --------------------------------------------------------------- 8. Tipografi — sistem yazı tipi ailesi Open Sans yerine işletim sisteminin kendi modern yazı tipini kullanıyoruz: Windows'ta Segoe UI Variable, macOS'ta SF Pro, Android'de Roboto. Hem daha modern durur hem 130 KB indirme gider. --------------------------------------------------------------- */ body, body .btn, body input, body textarea, body button, body h1, body h2, body h3 { font-family: system-ui, -apple-system, "Segoe UI Variable Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } body { letter-spacing: -0.011em; } body h1, body h2, body h3, .brand-wordmark { letter-spacing: -0.022em; font-weight: 650; } /* --------------------------------------------------------------- 9. Boş durum — "henüz cihaz yok" ekranı Ürünün ilk açılışta gösterdiği ekran bu. Statik bir yazı yerine çevreyi tarayan bir radar hissi veriyoruz. --------------------------------------------------------------- */ /* Boş durum artık tek parça bir "kahraman kartı". Önemli: x-no-peers'ın `grow` sınıfı vardı, dikeyde esneyip radar ile metnin arasını açıyordu. flex:none ile esnemeyi kapatıyoruz. */ /* Seçici #center içeriyor: .grow / .grow-5 sınıflarının flex-grow'unu ezebilmek için sınıftan yüksek öncelik gerekiyor (id > class). */ body #center x-no-peers { position: relative; flex: none; height: auto; box-sizing: border-box; justify-content: center; align-items: center; gap: 4px; width: min(93vw, 468px); padding: 34px 30px 28px; border-radius: 28px; border: 1px solid color-mix(in srgb, var(--border-color) 60%, transparent); background: radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--primary-color) 16%, transparent) 0%, transparent 62%), color-mix(in srgb, var(--bg-color-secondary) 55%, transparent); backdrop-filter: blur(22px) saturate(150%); -webkit-backdrop-filter: blur(22px) saturate(150%); box-shadow: 0 30px 70px -28px rgba(0, 0, 0, 0.75), inset 0 1px 0 color-mix(in srgb, #fff 8%, transparent); } /* --- Radar --- */ .radar { position: relative; width: 164px; height: 164px; margin-bottom: 18px; display: flex; align-items: center; justify-content: center; flex: none; } /* Sabit yörünge halkaları */ .radar-orbit { position: absolute; top: 50%; left: 50%; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--primary-color) 26%, transparent); transform: translate(-50%, -50%); } .radar-orbit-1 { width: 164px; height: 164px; } .radar-orbit-2 { width: 118px; height: 118px; border-color: color-mix(in srgb, var(--primary-color) 34%, transparent); } .radar-orbit-3 { width: 76px; height: 76px; border-color: color-mix(in srgb, var(--primary-color) 42%, transparent); } /* Genişleyip sönen nabız halkaları */ .radar-pulse { position: absolute; top: 50%; left: 50%; width: 164px; height: 164px; margin: -82px 0 0 -82px; border-radius: 50%; border: 1.5px solid color-mix(in srgb, var(--primary-color-strong) 65%, transparent); animation: synqo-radar 3.6s cubic-bezier(0.2, 0.6, 0.35, 1) infinite; } .radar-pulse-delayed { animation-delay: 1.8s; } /* Yörüngede dönen cihaz noktaları */ .radar-sat-track { position: absolute; top: 50%; left: 50%; border-radius: 50%; transform: translate(-50%, -50%); animation: synqo-yorunge 18s linear infinite; } .radar-sat-track-a { width: 164px; height: 164px; } .radar-sat-track-b { width: 118px; height: 118px; animation-duration: 13s; animation-direction: reverse; } .radar-sat-track-c { width: 164px; height: 164px; animation-duration: 22s; animation-delay: -9s; } .radar-sat { position: absolute; top: -4px; left: 50%; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: var(--primary-color-strong); box-shadow: 0 0 12px 2px color-mix(in srgb, var(--primary-color-strong) 70%, transparent); } .radar-sat-track-b .radar-sat { background: var(--paired-device-color); box-shadow: 0 0 12px 2px color-mix(in srgb, var(--paired-device-color) 70%, transparent); } @keyframes synqo-yorunge { to { transform: translate(-50%, -50%) rotate(360deg); } } /* Merkezdeki marka diski */ .radar-core { position: relative; width: 64px; height: 64px; border-radius: 50%; background: var(--brand-gradient); box-shadow: 0 10px 34px -6px color-mix(in srgb, var(--primary-color) 85%, transparent), inset 0 1px 0 color-mix(in srgb, #fff 35%, transparent); display: flex; align-items: center; justify-content: center; animation: synqo-nefes 4s ease-in-out infinite; } .radar-core svg { width: 30px; height: 30px; fill: #fff; } @keyframes synqo-radar { 0% { transform: scale(0.3); opacity: 0; } 30% { opacity: 0.7; } 100% { transform: scale(1.3); opacity: 0; } } body #center x-no-peers h2 { font-size: 21px; line-height: 1.35; margin: 0 0 8px; max-width: 22ch; /* Başlık düz mavi yerine marka gradyanı */ background: var(--brand-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; } body #center x-no-peers > div[data-i18n-key] { font-size: 14px; line-height: 1.55; max-width: 34ch; opacity: 0.62; } /* --- Canlı tarama durumu --- */ .tarama-durumu { display: flex; align-items: center; gap: 8px; margin-top: 18px; padding: 6px 14px 6px 11px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--paired-device-color) 30%, transparent); background: color-mix(in srgb, var(--paired-device-color) 11%, transparent); font-size: 12.5px; letter-spacing: 0.01em; opacity: 0.9; } .tarama-nokta { position: relative; width: 7px; height: 7px; border-radius: 50%; background: var(--paired-device-color); flex: none; } /* Noktanın etrafından yayılan halka */ .tarama-nokta::after { content: ''; position: absolute; inset: -3px; border-radius: 50%; border: 1.5px solid var(--paired-device-color); animation: synqo-radar 2s ease-out infinite; } /* --- Hızlı eylem düğmeleri --- */ .hizli-eylemler { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 22px; width: 100%; } .hizli-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex: 1 1 0; min-width: 138px; padding: 11px 16px; border-radius: 13px; border: 1px solid color-mix(in srgb, var(--border-color) 80%, transparent); background: color-mix(in srgb, var(--bg-color-secondary) 70%, transparent); color: rgb(var(--text-color)); font-size: 13.5px; font-weight: 600; letter-spacing: -0.005em; cursor: pointer; transition: transform 160ms ease, border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease; } .hizli-btn svg { width: 17px; height: 17px; fill: currentColor; flex: none; opacity: 0.85; } .hizli-btn:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--primary-color) 55%, transparent); background: color-mix(in srgb, var(--primary-color) 12%, transparent); } .hizli-btn:active { transform: translateY(0); } /* Birincil eylem — marka gradyanıyla dolu */ .hizli-btn-birincil { border-color: transparent; background: var(--brand-gradient); color: #fff; box-shadow: 0 8px 22px -8px color-mix(in srgb, var(--primary-color) 85%, transparent); } .hizli-btn-birincil svg { opacity: 1; } .hizli-btn-birincil:hover { border-color: transparent; background: var(--brand-gradient); filter: brightness(1.1); box-shadow: 0 12px 28px -8px color-mix(in srgb, var(--primary-color) 95%, transparent); } /* --- Ayıraç ve güven şeridi --- */ .kart-ayirac { width: 100%; height: 1px; margin: 24px 0 18px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--border-color) 90%, transparent) 22%, color-mix(in srgb, var(--border-color) 90%, transparent) 78%, transparent); } .guven-seridi { display: flex; justify-content: space-between; align-items: stretch; gap: 6px; width: 100%; margin: 0; padding: 0; list-style: none; } .guven-seridi li { display: flex; flex-direction: column; align-items: center; gap: 1px; flex: 1; font-size: 11.5px; line-height: 1.35; text-align: center; } .guven-seridi strong { font-weight: 650; font-size: 12px; background: var(--brand-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; } .guven-seridi span { opacity: 0.5; } /* Şerit öğelerini ayıran ince çizgiler */ .guven-seridi li + li { border-left: 1px solid color-mix(in srgb, var(--border-color) 55%, transparent); } /* --------------------------------------------------------------- 10. Hakkında ekranı --------------------------------------------------------------- */ .about-logo { --icon-size: 76px; filter: drop-shadow(0 8px 26px color-mix(in srgb, var(--primary-color) 45%, transparent)); } x-about .title-wrapper { margin: 14px 0 4px; } x-about .brand-wordmark { font-size: 38px; } x-about .font-subheading { opacity: 0.5; font-size: 13px; letter-spacing: 0.02em; } .about-claim { margin: 14px 0 4px; font-size: 15px; line-height: 1.6; text-align: center; opacity: 0.8; max-width: 42ch; } .about-features { display: flex; flex-direction: column; gap: 10px; margin: 22px 0 6px; text-align: start; max-width: 40ch; } .about-feature { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.45; opacity: 0.85; } .about-feature-dot { flex: 0 0 auto; width: 7px; height: 7px; margin-top: 7px; border-radius: 50%; background: var(--brand-gradient); box-shadow: 0 0 10px color-mix(in srgb, var(--primary-color) 70%, transparent); } .about-publisher { margin-top: 26px; padding: 10px 18px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--border-color) 70%, transparent); background: color-mix(in srgb, var(--bg-color-secondary) 55%, transparent); font-size: 13px; display: flex; align-items: center; gap: 5px; } .about-publisher-label { opacity: 0.6; } .about-publisher-link { color: rgb(var(--text-color)); font-weight: 650; text-decoration: none; transition: color 180ms ease; } .about-publisher-link:hover { color: var(--primary-color); } .about-actions { margin-top: 10px; } .about-actions:empty { display: none; } .about-legal { margin-top: 20px; font-size: 11px; letter-spacing: 0.02em; opacity: 0.35; text-align: center; } /* --------------------------------------------------------------- 11. Bildirim balonu (toast) --------------------------------------------------------------- */ body x-toast { border-radius: 14px; border: 1px solid var(--border-color); box-shadow: 0 16px 40px -12px rgba(0, 0, 0, 0.55); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } /* --------------------------------------------------------------- 12. Giriş animasyonu — öğeler tek tek belirsin --------------------------------------------------------------- */ @keyframes synqo-yukari-belir { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } body footer:not(.opacity-0) .identity-card { animation: synqo-yukari-belir 560ms cubic-bezier(0.22, 1, 0.36, 1) both; } body header:not(.opacity-0) .header-brand { animation: synqo-yukari-belir 520ms cubic-bezier(0.22, 1, 0.36, 1) both; } /* Cihaz kutucukları sırayla belirsin (ilk 8 tanesi) */ body x-peer:nth-child(1) x-icon { animation-delay: 0ms; } body x-peer:nth-child(2) x-icon { animation-delay: 60ms; } body x-peer:nth-child(3) x-icon { animation-delay: 120ms; } body x-peer:nth-child(4) x-icon { animation-delay: 180ms; } body x-peer:nth-child(5) x-icon { animation-delay: 240ms; } body x-peer:nth-child(6) x-icon { animation-delay: 300ms; } /* --------------------------------------------------------------- 12b. Ana alan düzeni Eskiden içerik dikeyde dağılıp devasa boşluklar bırakıyordu. Artık ortalanmış, nefes payı ölçülü bir sütun. --------------------------------------------------------------- */ body #center { justify-content: center; gap: 20px; padding: 24px 16px 12px; box-sizing: border-box; } /* x-instructions ve x-peers'ın `grow` sınıfları dikeyde esneyip içeriği ekranın iki ucuna savuruyordu. Esnemeyi kapatıyoruz ki her şey ortada toplu dursun. */ body #center > x-instructions { flex: none; } body #center x-peers { flex: none; justify-content: center; } /* Alt bilgi içeriğe yaklaşsın, ekranın dibine yapışmasın */ body footer { margin-top: 4px; } /* Cihaz kutucukları — düz daireler yerine dokunulabilir kartlar */ body x-peer label { padding: 14px 10px 12px; border-radius: 18px; border: 1px solid transparent; box-sizing: border-box; transition: background-color 200ms ease, border-color 200ms ease, transform 200ms ease; } body x-peer:not([status]) label:hover, body x-peer:not([status]) label:focus-within { background: color-mix(in srgb, var(--bg-color-secondary) 70%, transparent); border-color: color-mix(in srgb, var(--accent-color) 35%, transparent); transform: translateY(-3px); } body x-peer[drop] label { background: color-mix(in srgb, var(--accent-color) 14%, transparent); border-color: color-mix(in srgb, var(--accent-color) 55%, transparent); } body x-peer .icon-wrapper { --icon-size: 46px; } body x-peer .device-name { font-size: 13.5px; font-weight: 550; opacity: 0.95; } /* Eski canvas kaldırıldı; geri gelirse diye güvenlik kilidi */ canvas.circles { display: none !important; } /* =============================================================== 14. KURUMSAL AYAR Yukarıdaki katman canlı, "tüketici uygulaması" tonundaydı: gökkuşağı gradyanlar, renkli parlamalar, yuvarlak hatlar, nefes alan öğeler. Bu blok o tonu kurumsal bir çizgiye çeker: - Gradyanlı metin yerine düz renk (gradyan yazı startup işaretidir) - Yarıçaplar küçülür, hatlar keskinleşir - Renkli parlama/gölge yerine nötr, kısık gölge - Hareket yavaşlar; süs amaçlı animasyonlar kalkar Dosyanın sonunda durur, böylece üsttekileri ezer. =============================================================== */ /* --- Gradyanlı metinler düz renge döner --- */ .brand-wordmark, body #center x-no-peers h2, .guven-seridi strong { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: rgb(var(--text-color)); } body header .brand-wordmark { font-weight: 600; letter-spacing: -0.01em; } body #center x-no-peers h2 { font-weight: 600; } /* Güven şeridi: küçük, aralıklı, büyük harf — kurumsal etiket dili */ .guven-seridi strong { font-size: 10.5px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: rgb(var(--text-color)); opacity: 0.75; } .guven-seridi span { font-size: 11px; opacity: 0.45; } /* --- Yarıçaplar: yumuşak baloncuklardan ölçülü kartlara --- */ body #center x-no-peers { border-radius: 14px; } .identity-card { border-radius: 12px; } body x-dialog x-paper { border-radius: 12px; } body x-peer label { border-radius: 10px; } .hizli-btn { border-radius: 8px; } body header .icon-button, body #theme-wrapper .icon-button { border-radius: 8px; } body #theme-wrapper:hover::before { border-radius: 10px; } body x-toast { border-radius: 10px; } /* Hap biçimli rozetler dikdörtgen etikete döner */ .tarama-durumu { border-radius: 6px; } .about-publisher { border-radius: 8px; } /* --- Parlamalar sönüyor: renkli gölge yerine nötr derinlik --- */ .header-brand-mark { filter: none; } .about-logo { filter: none; } .radar-core { background: var(--primary-color); box-shadow: none; /* Süs amaçlı nefes alma hareketi kaldırıldı */ animation: none; } .radar-sat { width: 6px; height: 6px; margin-left: -3px; top: -3px; box-shadow: none; } .radar-sat-track-b .radar-sat { box-shadow: none; } .about-feature-dot { background: var(--primary-color); box-shadow: none; width: 5px; height: 5px; margin-top: 8px; } /* Cihaz daireleri: üç duraklı gradyan yerine düz kurumsal renk */ body x-peer .icon-wrapper { background-image: none; background-color: var(--accent-color); box-shadow: none; } body x-peer:not([status]) label:hover .icon-wrapper, body x-peer:not([status]) label:focus-within .icon-wrapper { box-shadow: none; } body x-peer[drop] .icon-wrapper { box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-color) 45%, transparent) inset; } /* Birincil düğme: gradyan yerine düz kurumsal mavi */ .hizli-btn-birincil { background: var(--primary-color); box-shadow: none; } .hizli-btn-birincil:hover { background: var(--primary-color); filter: brightness(1.08); box-shadow: none; } .hizli-btn:hover { transform: none; background: color-mix(in srgb, var(--primary-color) 9%, transparent); } /* Kartların gölgesi renkten arınıp yalnızca derinlik verir */ body #center x-no-peers { box-shadow: 0 12px 32px -18px rgba(0, 0, 0, 0.65); background: color-mix(in srgb, var(--bg-color-secondary) 62%, transparent); } .identity-card { box-shadow: 0 8px 24px -16px rgba(0, 0, 0, 0.55); } body x-dialog x-paper { box-shadow: 0 18px 44px -16px rgba(0, 0, 0, 0.5); } /* Diyalog başlığı da düz renk */ body x-paper > .row:first-of-type { background-image: none; background-color: var(--accent-color); } /* --- Hareket sakinleşiyor --- */ /* Yörünge noktaları belirgin biçimde yavaşlar */ .radar-sat-track-a { animation-duration: 34s; } .radar-sat-track-b { animation-duration: 27s; } /* Üçüncü nokta fazlaydı — kaldırıldı */ .radar-sat-track-c { display: none; } /* Nabız halkaları daha seyrek ve daha silik */ .radar-pulse { animation-duration: 4.6s; border-color: color-mix(in srgb, var(--primary-color) 45%, transparent); } .radar-pulse-delayed { animation-delay: 2.3s; } /* Giriş animasyonları kısalır, mesafe azalır */ @keyframes synqo-yukari-belir { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } } /* --- Zemin sakinleşiyor --- */ body { background-image: radial-gradient(ellipse 60% 50% at 20% 8%, color-mix(in srgb, var(--primary-color) 15%, transparent) 0%, transparent 66%), radial-gradient(ellipse 55% 45% at 85% 18%, color-mix(in srgb, var(--primary-color-strong) 10%, transparent) 0%, transparent 66%); } body.light-theme { background-image: radial-gradient(ellipse 60% 50% at 20% 8%, color-mix(in srgb, var(--primary-color) 7%, transparent) 0%, transparent 66%), radial-gradient(ellipse 55% 45% at 85% 18%, color-mix(in srgb, var(--primary-color-strong) 5%, transparent) 0%, transparent 66%); } @media (prefers-color-scheme: light) { body:not(.dark-theme) { background-image: radial-gradient(ellipse 60% 50% at 20% 8%, color-mix(in srgb, var(--primary-color) 7%, transparent) 0%, transparent 66%), radial-gradient(ellipse 55% 45% at 85% 18%, color-mix(in srgb, var(--primary-color-strong) 5%, transparent) 0%, transparent 66%); } } /* Nokta ızgarası iyice geri çekilir */ body::before { background-image: radial-gradient(circle at 1px 1px, color-mix(in srgb, rgb(var(--text-color)) 8%, transparent) 1px, transparent 0); background-size: 40px 40px; } /* --- Üst çubuk: ince bir kurumsal vurgu çizgisi --- */ body header::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--primary-color); opacity: 0.5; pointer-events: none; } /* =============================================================== 16. "HAKKINDA" EKRANI Zemini üst çubuktaki bilgi düğmesinden açılan dev bir daire ve rengi marka mavisi. Bu yüzden burada beyaz üzerine çalışıyoruz. =============================================================== */ /* Zemin: düz mavi-siyah yerine derinlikli kurumsal gradyan */ body #about x-background { background-image: radial-gradient(circle at calc(50% - 36px) 34%, color-mix(in srgb, var(--primary-color-strong) 92%, white) 0%, var(--primary-color) 34%, #0B1220 88%); } body #about { text-align: center; } /* Logo kutucuğu — cam yüzey, marka işareti beyaz */ .about-logo-kutu { width: 88px; height: 88px; border-radius: 22px; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.22); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 16px 40px -16px rgba(0, 0, 0, 0.6); margin-bottom: 4px; } body #about .about-logo { --icon-size: 50px; /* Mavi zemin üzerinde beyaz logo. currentColor sayesinde tek satır yeter. */ color: #fff; } body #about .brand-wordmark { color: #fff; font-size: 34px; } body #about .font-subheading { color: #fff; opacity: 0.45; } .about-claim { color: #fff; opacity: 0.72; font-size: 14.5px; max-width: 38ch; } /* Özellik listesi: noktalar yerine onay kutucukları */ .about-features { gap: 12px; margin: 26px 0 4px; } .about-feature { align-items: center; gap: 12px; color: #fff; opacity: 0.92; font-size: 13.5px; text-align: start; } .about-feature-ikon { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 8px; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.16); border: 1px solid rgba(255, 255, 255, 0.2); } .about-feature-ikon svg { width: 13px; height: 13px; stroke: #fff; fill: none; } /* Kuruluş rozeti */ .about-publisher { margin-top: 30px; background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.22); color: #fff; padding: 11px 20px; } .about-publisher-label { opacity: 0.65; } .about-publisher-link { color: #fff; border-bottom: 1px solid rgba(255, 255, 255, 0.45); padding-bottom: 1px; } .about-publisher-link:hover { color: #fff; border-bottom-color: #fff; } /* Kapatma düğmesi beyaz zeminli daireye otursun */ body #about header .icon-button { color: #fff; opacity: 0.8; } body #about header .icon-button:hover { opacity: 1; } body #about header .icon-button::before { background-color: #fff; } /* --------------------------------------------------------------- 17. Hareket azaltma tercihi (erişilebilirlik) --------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }