/* ══════════════════════════════════════════════════════════════════ Engine Ops / 24 — tanıtım sayfası stilleri landing.html (TR) ve landing-en.html (EN) BU DOSYAYI PAYLAŞIR. İkisinde ayrı ayrı tutulsa biri güncellenip diğeri unutulurdu. public/ altında olduğu için Vite dokunmadan kopyalıyor. ══════════════════════════════════════════════════════════════════ */ :root { --bg: #0B0B0B; --surface: #121211; --surface-2: #1A1917; --ink: #F2EFEA; --muted: #918A81; --line: #242220; --accent: #FF4D00; --accent-dim: #C93A00; --font: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } /* Sticky üst bar 68px; çapaya gidince başlık barın ALTINDA kalmasın */ section[id], div[id] { scroll-margin-top: 92px; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased; /* overflow-x: hidden DEĞİL. Safari'de body'ye yatay overflow vermek body'yi kaydırma kabına çeviriyor ve position: sticky BOZULUYOR — sahne kaydırma sırasında yerinde kalmıyordu. Yatay taşmanın tek kaynağı kahraman süslemeleri; onlar kendi kabında kırpılıyor. */ } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } .wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; } /* ── Yüklenme animasyonları ───────────────────────────────────────── Sayfa açılırken bir kez çalışır, GÖRÜNÜR durumda biter. Kaydırmaya bağlı değil — gerekçesi yukarıdaki yorumda. */ @keyframes eoRise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes eoGlow { 0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: .55; } 50% { transform: translate(-50%, -50%) scale(1.18); opacity: .8; } } @keyframes eoSpinSlow { to { transform: rotate(360deg); } } /* html.js ŞARTI KRİTİK: "both" dolgusuyla animasyon çalışmazsa öğe başlangıç durumunda (opacity: 0) KİLİTLİ kalıyor. Animasyonları çalıştırmayan bir bot ya da tarayıcı h1'i görünmez okuyabilirdi — yani Google'a en çok anlatması gereken başlık kaybolabilirdi. Kural artık JS'in canlı olmasına bağlı; JS yoksa hiçbir şey gizlenmiyor. */ html.js .eo-rise { animation: eoRise .75s cubic-bezier(.22,.61,.36,1) both; } .d1 { animation-delay: .06s; } .d2 { animation-delay: .12s; } .d3 { animation-delay: .18s; } .d4 { animation-delay: .24s; } .d5 { animation-delay: .30s; } .d6 { animation-delay: .36s; } /* ── Kaydırma açılışları ──────────────────────────────────────────── SADECE SÜSLEME. Temel durum GÖRÜNÜR: aşağıdaki kural yalnızca varken devreye giriyor ve o sınıfı sayfanın en altındaki script koyuyor. JS çalışmazsa (bot, eski tarayıcı, hata) hiçbir şey gizlenmiyor — içerik olduğu gibi okunuyor. Bu sıralama şart: "base opacity:0 + görünürse aç" kalıbı kaydırma yapmayan bir botta sayfayı boş bırakır ve Google OAuth doğrulamasının reddettiği duruma geri dönerdik. */ html.js .eo-reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1); } html.js .eo-reveal.in { opacity: 1; transform: none; } html.js .eo-reveal.s1 { transition-delay: .07s; } html.js .eo-reveal.s2 { transition-delay: .14s; } html.js .eo-reveal.s3 { transition-delay: .21s; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } html.js .eo-rise { animation: none; } .eo-glow { animation: none; } .eo-ring { animation: none; } html.js .eo-reveal { opacity: 1; transform: none; transition: none; } } /* ── Üst çubuk ──────────────────────────────────────────────────────── */ /* Üst bar: eskiden yarı saydam zemin + blur + alt çizgi vardı ve kahraman bölümündeki ışımayı keskin bir çizgiyle KESİYORDU. Artık yumuşak bir gradyanla soluyor, sert kenar yok. */ header.eo-top { position: sticky; top: 0; z-index: 20; background: linear-gradient(to bottom, #0B0B0B 0%, rgba(11,11,11,.92) 62%, rgba(11,11,11,0) 100%); } .eo-top .wrap { display: flex; align-items: center; gap: 20px; height: 68px; } .eo-top .eo-btn { flex-shrink: 0; } /* min-width:0 + nowrap: dar ekranda "ENGINE OPS / 24" iki satıra kırılıyor ve üst bar 68px'e sığmayıp taşıyordu. */ .eo-brand { display: flex; align-items: center; gap: 11px; margin-right: auto; min-width: 0; } .eo-brand img { width: 32px; height: 32px; display: block; } /* DİKKAT — text-transform: uppercase BU MARKA METİNLERİNDE KULLANILMAZ. Sayfa lang="tr" ve tarayıcı Türkçe kuralıyla "i" → "İ" çeviriyor: "Engine Ops" → "ENGİNE OPS", "Systems Operations" → "SYSTEMS OPERATİONS". İngilizce metinler HTML'e doğrudan büyük harfle yazılıyor. */ .eo-brand span { font-weight: 900; font-size: 15px; letter-spacing: -.3px; color: var(--ink); white-space: nowrap; } .eo-navlinks { display: flex; gap: 26px; } .eo-navlinks a { color: var(--muted); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 1.3px; transition: color .2s ease; } .eo-navlinks a:hover { color: var(--ink); text-decoration: none; } /* Dil anahtarı — sayfanın sağında, giriş butonunun yanında. Ayrı bir HTML dosyasına giden düz bağlantı; JS ile gizle/göster yapılmıyor çünkü Google'ın iki dili AYRI AYRI okuması gerekiyor (hreflang ile eşleşiyorlar). */ /* flex-shrink:0 ŞART. Satır sığmayınca esnek düzen bu kutuyu eziyordu; içerik 27px taşıyor, `overflow:hidden` de "EN"in N'sini kesiyordu. */ .eo-lang { display: inline-flex; align-items: center; gap: 2px; flex-shrink: 0; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; } .eo-lang a, .eo-lang span { font-size: 10px; font-weight: 900; letter-spacing: 1.4px; padding: 8px 11px; color: var(--muted); transition: color .2s ease, background .2s ease; } .eo-lang a:hover { color: var(--ink); background: var(--surface-2); text-decoration: none; } .eo-lang .on { background: var(--surface-2); color: var(--ink); } .eo-btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; font-weight: 900; font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; padding: 13px 22px; border-radius: 10px; border: 1px solid transparent; white-space: nowrap; transition: transform .18s ease, background .18s ease, border-color .18s ease; } .eo-btn:hover { text-decoration: none; transform: translateY(-2px); } .eo-btn-primary { background: var(--accent); color: #0B0B0B; } .eo-btn-primary:hover { background: #ff6320; } .eo-btn-ghost { border-color: var(--line); color: var(--ink); background: transparent; } .eo-btn-ghost:hover { border-color: var(--accent); } /* ── Kahraman bölüm ─────────────────────────────────────────────────── */ .eo-hero { position: relative; padding: 92px 0 96px; overflow: hidden; } /* Süslemeleri BARIN ALTINDAN başlayan bir kaba aldık. Önceden ışıma ve dönen halka kahraman bölümünün %34'üne göre konumlanıyordu ve üst kenarları eksiye taşıyordu (ölçüldü: halka -64px, ışıma -204px), yani sticky barın arkasına giriyor ve barın kenarında KESİLİYORDU. Bu kap 76px'ten başladığı ve overflow:hidden olduğu için hiçbir süsleme barın altına taşamıyor — kahraman bölümünün yüksekliği ne olursa olsun. */ /* overflow KIRPMIYOR — bilinçli. Kırpmak kesme çizgisini yok etmiyor, sadece aşağı taşıyor (denendi: çizgi 144px'e indi). Çözüm geometri: DÖNEN HALKA sert 1px kenarı olduğu için barın altına girmemeli, üst kenarı 98px'e çekildi (bar 68px'te bitiyor). IŞIMA ise dışa doğru şeffaflaşan bir radyal gradyan; barın hizasına gelen kısmı neredeyse tamamen saydam olduğu için görünür bir kenar üretmiyor. */ .eo-hero-deco { position: absolute; inset: 0; /* clip, hidden DEĞİL: clip kaydırma kabı OLUŞTURMUYOR, dolayısıyla sticky'yi etkilemiyor. Yalnızca yatay eksende kırpıyoruz ki ışıma ve halka dar ekranda yatay kaydırma açmasın; dikeyde kırpma yok, yoksa üst kenarda görünür bir kesme çizgisi oluşuyordu. */ overflow-x: clip; overflow-y: visible; pointer-events: none; } /* DİKKAT — bu blok temel kuralların ARDINDA durmalı. Önce yukarıya koymuştum ve hiç uygulanmıyordu: aynı özgüllükte sonraki kural kazanıyor, `.eo-brand span { font-size: 15px }` medya sorgusunu eziyordu. Yeni kural eklerken sırayı bozma. */ /* ── Dar ekran: satır 375px'e sığsın ────────────────────────────────── Hiçbir öğe ezilmiyor (yukarıdaki flex-shrink:0), o yüzden yer kazancı ölçülerden geliyor. Marka adı KISALTILMIYOR: ürünün adı ilk görülen şey. */ @media (max-width: 560px) { .eo-top .wrap { gap: 10px; padding: 0 14px; height: 60px; } .eo-brand { gap: 8px; } .eo-brand img { width: 26px; height: 26px; } .eo-brand span { font-size: 13px; } .eo-lang a, .eo-lang span { font-size: 9px; padding: 7px 8px; letter-spacing: 1px; } .eo-top .eo-btn { font-size: 10px; letter-spacing: 1px; padding: 10px 14px; } } /* 375px'te üç öğe TAM 347px tutuyordu, yani nefes payı sıfırdı: marka adının "24"ü dil seçicisine bitişiyordu. Bu eşikte biraz daha kısıyoruz. */ @media (max-width: 400px) { .eo-brand img { width: 24px; height: 24px; } .eo-brand span { font-size: 12px; } .eo-lang a, .eo-lang span { padding: 7px 7px; } .eo-top .eo-btn { padding: 10px 12px; } } .eo-glow { position: absolute; top: 42%; left: 50%; width: 820px; height: 820px; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(255,77,0,.20) 0%, rgba(255,77,0,.05) 42%, transparent 68%); animation: eoGlow 9s ease-in-out infinite; } .eo-ring { position: absolute; top: 42%; left: 50%; width: 560px; height: 560px; margin: -280px 0 0 -280px; border-radius: 50%; border: 1px dashed rgba(255,77,0,.14); pointer-events: none; animation: eoSpinSlow 70s linear infinite; } .eo-hero .wrap { position: relative; z-index: 1; text-align: center; } /* Giriş sayfasındaki oranla aynı: orada logo 128px (mobil) / 176px (masaüstü) ve h1'in yanında dengeli duruyor. Tanıtım sayfasındaki h1 daha da iri (76px'e kadar), o yüzden 112px küçük kalıyordu. */ .eo-hero img.eo-mark { width: clamp(128px, 13vw, 176px); height: auto; aspect-ratio: 1; margin: 0 auto 24px; display: block; } .eo-eyebrow { font-size: 10px; font-weight: 900; letter-spacing: 3.4px; text-transform: uppercase; color: var(--accent); margin: 0 0 20px; } h1 { font-size: clamp(38px, 7.4vw, 76px); font-weight: 900; line-height: .95; letter-spacing: -.035em; text-wrap: balance; margin: 0 0 22px; } h1 .slash { color: var(--accent); } /* 20px'e kadar çıkıyordu ve başlığın altında fazla iri duruyordu. */ .eo-lede { font-size: clamp(15px, 1.5vw, 17px); color: var(--muted); max-width: 58ch; margin: 0 auto 34px; text-wrap: pretty; line-height: 1.7; } .eo-cta { display: flex; flex-wrap: wrap; gap: 13px; justify-content: center; } .eo-hero-note { margin: 22px 0 0; font-size: 13px; color: #6E675F; } /* ── Çapa varış vurgusu ───────────────────────────────────────────── Menüden bir bölüme gidildiğinde başlık kısa bir an belirginleşiyor ki ziyaretçi nereye geldiğini fark etsin. Tek seferlik ve kısa — sayfayı animasyona boğmamak için başka bir efekt eklenmedi. */ @keyframes eoArrive { 0% { opacity: 0; transform: translateY(14px); } 100% { opacity: 1; transform: none; } } html.js .eo-arrive > .wrap > .eo-kicker, html.js .eo-arrive > .wrap > h2 { animation: eoArrive .55s cubic-bezier(.22,.61,.36,1) both; } html.js .eo-arrive > .wrap > h2 { animation-delay: .07s; } @media (prefers-reduced-motion: reduce) { html.js .eo-arrive > .wrap > .eo-kicker, html.js .eo-arrive > .wrap > h2 { animation: none; } } /* ── Bölüm başlıkları ───────────────────────────────────────────────── */ section.eo-sec { padding: 80px 0; border-top: 1px solid var(--line); } .eo-kicker { font-size: 10px; font-weight: 900; letter-spacing: 2.4px; text-transform: uppercase; color: var(--accent); margin: 0 0 14px; } h2 { font-size: clamp(26px, 3.6vw, 40px); font-weight: 900; line-height: 1.05; letter-spacing: -.028em; text-transform: uppercase; text-wrap: balance; margin: 0 0 18px; } .eo-sec-lede { color: var(--muted); max-width: 68ch; margin: 0 0 44px; font-size: 17px; } /* ── Önce/Sonra ─────────────────────────────────────────────────────── */ .eo-split { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .eo-panel { border: 1px solid var(--line); border-radius: 14px; padding: 28px; background: var(--surface); } .eo-panel.bad { border-left: 3px solid #6E675F; } .eo-panel.good { border-left: 3px solid var(--accent); } .eo-panel h3 { font-size: 12px; font-weight: 900; letter-spacing: 1.6px; text-transform: uppercase; margin: 0 0 16px; color: var(--muted); } .eo-panel.good h3 { color: var(--accent); } .eo-panel ul { margin: 0; padding-left: 20px; } .eo-panel li { margin-bottom: 11px; color: var(--ink); } .eo-panel.bad li { color: var(--muted); } /* ── Özellik kartları ───────────────────────────────────────────────── */ .eo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .eo-card { border: 1px solid var(--line); border-radius: 14px; padding: 28px; background: var(--surface); transition: border-color .22s ease, transform .22s ease, background .22s ease; } .eo-card:hover { border-color: rgba(255,77,0,.45); transform: translateY(-4px); background: var(--surface-2); } .eo-card svg { width: 26px; height: 26px; color: var(--accent); margin-bottom: 16px; display: block; } .eo-card h3 { font-size: 17px; font-weight: 800; letter-spacing: -.2px; margin: 0 0 10px; } .eo-card p { margin: 0; color: var(--muted); font-size: 15px; } /* ══ ÇİVİLENMİŞ SAHNE ═══════════════════════════════════════════════ Sayfanın tek "an"ı. İş kartı ekrana sabitlenir (position: sticky) ve ziyaretçi kaydırdıkça üç perdede dönüşür: talep açılır → usta atanır → onaylanıp sahaya gider. Ürünün gerçek akışı (satış → yönetici → usta) anlatılmak yerine GÖSTERİLİYOR. TARANABİLİRLİK: üç perdenin METNİ her zaman DOM'da ve görünür. Sadece kartın küçük parçaları (usta çipi, tarih) perdeye göre açılıp kapanıyor ve o bilgiler yandaki düz metinde de geçiyor. Yani bot hiçbir şey kaybetmiyor. JS yoksa .eo-stage kilitlenmez: html.js olmadan tüm perdeler ve kartın tüm parçaları açık gelir. Mobilde çivileme YOK — küçük ekranda sticky sahne dar geliyor, 860px altında normal akışa düşüyor. */ .eo-stage-wrap { position: relative; } html.js .eo-stage-wrap { height: 320vh; } /* EMNİYET KANCASI: sahne sürücüsü çalışmazsa script 'e "no-stage" ekliyor ve sahne tümden bırakılıp normal akışa dönülüyor. Önceki emniyet "her şeyi aç" diyordu, ama perdeler üst üste yığılı olduğu için görüntü bozuk kalıyordu. Burada perdeler alt alta okunur, kart altta durur. */ html.no-stage .eo-stage-wrap { height: auto !important; } html.no-stage .eo-stage { position: static !important; height: auto !important; padding: 0 !important; grid-template-columns: 1fr !important; gap: 34px; } html.no-stage .eo-beats { min-height: 0 !important; } html.no-stage .eo-beat { position: static !important; opacity: 1 !important; transform: none !important; pointer-events: auto !important; } html.no-stage .eo-beat + .eo-beat { margin-top: 34px !important; } html.no-stage .st-part { opacity: 1 !important; transform: none !important; } html.no-stage .eo-progress { display: none; } html.no-stage .eo-stage > .ui { max-width: 420px; margin: 0 auto; } /* Perde işaretçileri — görünmez, yer kaplamaz, yalnızca gözlemciye hedef */ /* .eo-sentinel — DİKKAT, eskiden .eo-mark idi ve kahraman bölümündeki logonun sınıfı da .eo-mark'tı. Bu kuraldaki position:absolute; left:0 logoya da uyguluyordu ve logo sayfanın soluna yapışıyordu. Sınıf adlarını benzersiz tut. */ .eo-sentinel { position: absolute; left: 0; width: 1px; height: 1px; pointer-events: none; } .eo-stage { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,420px); gap: 56px; align-items: center; } html.js .eo-stage { position: sticky; top: 0; height: 100vh; /* dvh: Safari'de araç çubuğu görünüp kaybolurken vh değişiyor ve sahne zıplıyordu. dvh gerçek görünür alanı takip ediyor. */ height: 100dvh; padding: 80px 0 40px; } /* Perde metinleri: JS varken üst üste yığılır, biri görünür */ .eo-beats { position: relative; } html.js .eo-beats { min-height: 300px; } .eo-beat { } html.js .eo-beat { position: absolute; inset: 0 auto auto 0; width: 100%; opacity: 0; transform: translateY(22px); transition: opacity .5s ease, transform .5s ease; pointer-events: none; } html.js .eo-beat.on { opacity: 1; transform: none; pointer-events: auto; } .eo-beat + .eo-beat { margin-top: 34px; } html.js .eo-beat + .eo-beat { margin-top: 0; } .eo-beat-no { font-size: 10px; font-weight: 900; letter-spacing: 2.6px; text-transform: uppercase; color: var(--accent); margin: 0 0 14px; font-variant-numeric: tabular-nums; } .eo-beat h3 { font-size: clamp(28px, 4.6vw, 46px); font-weight: 900; line-height: 1.04; letter-spacing: -.035em; margin: 0 0 16px; text-wrap: balance; } .eo-beat p { color: var(--muted); font-size: 16.5px; margin: 0; max-width: 44ch; } /* Kartın perdeye göre açılan parçaları */ .eo-card-stage { transition: border-color .5s ease, box-shadow .5s ease; } .st-part { transition: opacity .45s ease, transform .45s ease; } html.js .st-part { opacity: 0; transform: translateY(-8px); } html.js .st-part.on { opacity: 1; transform: none; } /* ── Kartın SON durumu ────────────────────────────────────────────── "Ustaya gönderildi" etiketi ve onay satırı VARSAYILAN OLARAK KAPALI (display:none) ve yalnızca çivilenmiş sahne son perdeye ulaşınca açılıyor. Neden display:none: hareket azaltma açıkken ya da JS yokken sahne çalışmıyor, o durumda kartta hem "onay bekliyor" hem "gönderildi" yazması ÇELİŞKİ üretiyordu. Bilgi kaybı yok — perde 3'ün düz metni "onaylandığı anda iş ustanın panelinde çıkar ve bildirimi gider" diyor, yani bot da ziyaretçi de aynı şeyi okuyor. */ .st-final { display: none; } html.js .eo-card-stage.done .st-final { display: flex; } html.js .eo-card-stage.done .pill-wait { display: none; } .ui-sent { margin: 11px 0 0; font-size: 9.5px; font-weight: 900; letter-spacing: 1.2px; text-transform: uppercase; color: #3ADE86; align-items: center; gap: 7px; } .eo-card-stage { border-left-color: var(--accent); } .eo-card-stage.done { border-left-color: #3ADE86; } /* İlerleme çubuğu — kaç perdede olduğunu gösterir */ .eo-progress { display: flex; gap: 7px; margin-top: 30px; } .eo-progress i { width: 30px; height: 3px; border-radius: 2px; background: var(--line); transition: background .4s ease; } .eo-progress i.on { background: var(--accent); } html:not(.js) .eo-progress { display: none; } @media (max-width: 860px) { html.js .eo-stage-wrap { height: auto; } html.js .eo-stage { position: static; height: auto; padding: 0; } .eo-stage { grid-template-columns: 1fr; gap: 28px; } html.js .eo-beats { min-height: 0; } html.js .eo-beat { position: static; opacity: 1; transform: none; pointer-events: auto; } html.js .eo-beat + .eo-beat { margin-top: 34px; } html.js .st-part { opacity: 1; transform: none; } .eo-progress { display: none; } .eo-stage > .ui { max-width: 420px; margin: 0 auto; } } /* ── Hareket azaltma: SAHNE KALIR, uçuşma gider ───────────────────── "prefers-reduced-motion: reduce" hareketi AZALT demek, içeriği kaldır demek değil. Rahatsız eden şey öğelerin ekranda uçması ve durmadan dönen döngüsel animasyonlar; sahnenin kendisi değil. O yüzden: · çivileme ve perde geçişleri KALIYOR — ürünü anlatan şey o · translateY hareketleri kalkıyor, her şey yalnızca SOLARAK geliyor · nefes alan ışıma ve dönen halka kapalı KALIYOR (yukarıdaki blok), çünkü onlar sonsuz döngü ve asıl rahatsız edenler onlar Önceki hali sahneyi tamamen kapatıyordu: kullanıcı animasyonu hiç göremiyordu ve yedek düzen dağınık duruyordu. */ @media (prefers-reduced-motion: reduce) { html.js .eo-beat { transform: none; transition: opacity .5s ease; } html.js .eo-beat.on { transform: none; } html.js .st-part { transform: none; transition: opacity .4s ease; } html.js .st-part.on { transform: none; } html.js .eo-reveal { transform: none; transition: opacity .55s ease; } html.js .eo-reveal.in { transform: none; } } /* ── Arayüz hücreleri ─────────────────────────────────────────────── Uygulamanın gerçek bileşenleri HTML olarak yeniden kuruldu; ekran görüntüsü DEĞİL. Gerekçe: PNG dört ayrı dosya (~700 KB) demekti, küçük ekranda okunmuyordu, arayüz değişince bayatlıyordu ve içindeki yazı Google için görünmezdi (resim). Buradaki metin gerçek metin. Görsel dil emülatörden alınan gerçek ekranlara göre eşlendi — uydurma bir arayüz göstermiyoruz. */ .eo-show { display: grid; gap: 26px; } .eo-show-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: center; padding: 34px 0; border-top: 1px solid var(--line); } .eo-show-row:first-child { border-top: 0; padding-top: 8px; } .eo-show-row.flip .eo-show-text { order: -1; } .eo-show-text h3 { font-size: clamp(20px, 2.6vw, 27px); font-weight: 900; letter-spacing: -.025em; line-height: 1.15; margin: 0 0 12px; text-wrap: balance; } .eo-show-text p { color: var(--muted); margin: 0 0 12px; font-size: 15.5px; } .eo-show-text .eo-tag { display: inline-block; font-size: 9px; font-weight: 900; letter-spacing: 2px; text-transform: uppercase; color: var(--accent); margin: 0 0 12px; } /* Uygulamanın kart yüzeyi — gerçek arayüzdeki .eo-card diline yakın */ .ui { background: #131211; border: 1px solid #242220; border-radius: 14px; padding: 18px; color: #F2EFEA; font-size: 13px; line-height: 1.5; box-shadow: 0 24px 60px -30px rgba(0,0,0,.9); } .ui-accent { border-left: 3px solid var(--accent); } .ui-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 13px; } .pill { font-size: 8.5px; font-weight: 900; letter-spacing: 1.2px; text-transform: uppercase; padding: 4px 9px; border-radius: 999px; white-space: nowrap; } .pill-wait { background: var(--accent); color: #0B0B0B; } .pill-ok { border: 1px solid #2E8B57; color: #3ADE86; } .pill-late { background: #3A1310; color: #FF8072; } .ui-title { font-size: 15px; font-weight: 900; letter-spacing: -.01em; text-transform: uppercase; margin: 0 0 3px; } .ui-sub { font-size: 9.5px; font-weight: 800; letter-spacing: 1.3px; text-transform: uppercase; color: #918A81; margin: 0; } .ui-inset { border: 1px solid #242220; border-radius: 9px; padding: 10px 12px; font-size: 9.5px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; color: #918A81; margin: 13px 0; } .ui-label { font-size: 8.5px; font-weight: 900; letter-spacing: 1.6px; text-transform: uppercase; color: #918A81; margin: 13px 0 7px; } .ui-chip { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,77,0,.12); border: 1px solid rgba(255,77,0,.5); color: var(--accent); border-radius: 999px; padding: 5px 11px 5px 5px; font-size: 10px; font-weight: 900; letter-spacing: 1.2px; text-transform: uppercase; } .ui-avatar { width: 21px; height: 21px; border-radius: 50%; background: var(--accent); color: #0B0B0B; display: grid; place-items: center; font-size: 8.5px; font-weight: 900; letter-spacing: 0; } .ui-field { border: 1px solid #242220; border-radius: 9px; padding: 10px 12px; display: flex; align-items: center; justify-content: space-between; font-size: 10px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; color: #918A81; } .ui-field .free { color: #3ADE86; } .ui-cta { margin-top: 14px; background: #F2EFEA; color: #0B0B0B; border-radius: 9px; padding: 12px; text-align: center; font-size: 10px; font-weight: 900; letter-spacing: 1.6px; text-transform: uppercase; } /* Stok tablosu */ .ui-tbl { width: 100%; border-collapse: collapse; margin-top: 10px; } .ui-tbl th { font-size: 8px; font-weight: 900; letter-spacing: 1.3px; text-transform: uppercase; color: #918A81; text-align: right; padding: 0 0 7px; background: none; border: 0; white-space: nowrap; } .ui-tbl th:first-child { text-align: left; } .ui-tbl td { font-size: 11px; font-weight: 800; text-align: right; padding: 6px 0; border: 0; border-top: 1px solid #1E1C1A; font-variant-numeric: tabular-nums; } .ui-tbl td:first-child { text-align: left; font-size: 9.5px; letter-spacing: 1.2px; text-transform: uppercase; color: #F2EFEA; } .ui-tbl .u { color: var(--accent); } .ui-tbl .v { color: #3ADE86; } .ui-total { display: flex; align-items: baseline; justify-content: space-between; margin-top: 11px; padding-top: 11px; border-top: 1px solid #242220; } .ui-total span { font-size: 8.5px; font-weight: 900; letter-spacing: 1.6px; text-transform: uppercase; color: #918A81; } .ui-total b { font-size: 19px; font-weight: 900; color: #3ADE86; font-variant-numeric: tabular-nums; } /* Filtre çipleri */ /* 3'lü ızgara → 3+3. Önce 4'lü denendi ama o düzen "Teklifsiz" ve "Bitmiş"i ikinci satıra düşürüyordu; istenen, altı çipin dengeli dağılması. */ .ui-chips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-top: 13px; } .ui-chips span { text-align: center; } .ui-chips span { font-size: 8.5px; font-weight: 900; letter-spacing: 1.2px; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; border: 1px solid #242220; color: #918A81; } .ui-chips span.on { background: var(--accent); border-color: var(--accent); color: #0B0B0B; } .ui-chips span.warn { color: #FF8072; } .ui-chips span.good { color: #3ADE86; } /* ── Harita şeması ────────────────────────────────────────────────── Uygulamadaki FacilityMap (Leaflet, 552 satır) tesisleri kalıcı renk indeksiyle işaretliyor ve ustaların konumunu gösteriyor. Burada gerçek harita motoru YÜKLENMİYOR — tanıtım sayfasına Leaflet + karo indirmek anlamsız ağırlık. Bu bir ŞEMA: aynı fikri (renkli tesis işaretleri, sahadaki usta, tıklanınca açılan bilgi kartı) temsil ediyor. Ekran görüntüsü gibi sunulmuyor, yanındaki metin ne olduğunu söylüyor. */ .ui-map { position: relative; height: 300px; border-radius: 12px; overflow: hidden; background: radial-gradient(120% 90% at 20% 15%, #1A1917 0%, #101010 55%, #0C0C0B 100%); border: 1px solid #242220; } .ui-map::before { content: ""; position: absolute; inset: 0; opacity: .5; z-index: 0; background-image: linear-gradient(to right, #1C1A18 1px, transparent 1px), linear-gradient(to bottom, #1C1A18 1px, transparent 1px); background-size: 46px 46px; } /* Kıyı/yol izlenimi veren iki eğik şerit */ /* z-index: 0 ŞART. Bu sözde-öğe position:absolute olduğu için, DOM'da son çocuk sayıldığından işaretlerin ve açılır pencerenin ÜSTÜNDE çiziliyordu: eğik şeritler harflerin üzerinden geçiyor ve o harfler farklı koyulukta görünüyordu. Etiketlere opak zemin vermek çözmedi, çünkü şerit zeminin de üstündeydi. İşaretler z-index: 2'de. */ .ui-map::after { content: ""; position: absolute; inset: 0; opacity: .55; z-index: 0; background: linear-gradient(72deg, transparent 38%, #211E1B 38.4%, #211E1B 40%, transparent 40.4%), linear-gradient(-24deg, transparent 62%, #1E1C1A 62.3%, #1E1C1A 63.4%, transparent 63.7%); } /* display:block + line-height:0 ŞART: span satır içiyken line-height kutuya fazladan yükseklik ekliyor ve ::before halkası noktanın merkezine oturmuyordu (halka aşağı-sola kaçıyordu). */ .mp { position: absolute; z-index: 2; transform: translate(-50%, -50%); display: block; width: 14px; height: 14px; line-height: 0; } .mp i { display: block; width: 14px; height: 14px; border-radius: 50%; border: 2px solid #0B0B0B; box-shadow: 0 0 0 1px rgba(255,255,255,.16); } .mp b { position: absolute; left: 21px; top: 50%; transform: translateY(-50%); white-space: nowrap; font-size: 8.5px; font-weight: 900; letter-spacing: 1.1px; text-transform: uppercase; color: #C6BFB6; /* OPAK ZEMİN. Arkadaki ızgara ve eğik şeritler harflerin altından geçtiği için bazı harfler farklı koyulukta/kalınlıkta görünüyordu. Metin gölgesi denendi, YETMEDİ — gölge zemini değiştirmiyor, sadece bulanıklaştırıyordu. Katı bir zemin şeridi değişkenliği kökten bitiriyor. */ background: #0E0E0D; padding: 3px 6px; border-radius: 4px; border: 1px solid #1E1C1A; } /* Sahadaki usta — halka atarak belli oluyor */ .mp.tech i { background: var(--accent); } /* Halka GERÇEK bir öğe (::before değil) ve inset ile konumlanıyor. Neden: sözde-öğeyle left/top/width/height hesaplamak ölçüm hatasına açıktı — hesap doğru görünüyor ama ekranda merkez kaçıyordu. inset, dört kenardan eşit taşma demek; kutu ne boyutta olursa olsun halka matematiksel olarak tam ortada. */ .mp .ring { position: absolute; inset: -10px; border-radius: 50%; transform: none; /* .mp b gibi komşu kurallar sızarsa diye açıkça */ border: 1.5px solid rgba(255,77,0,.6); pointer-events: none; animation: mpPing 2.4s ease-out infinite; } @keyframes mpPing { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(1.5); opacity: 0; } } /* Tesise tıklanınca açılan bilgi kartı */ .mp-pop { position: absolute; z-index: 3; left: 50%; bottom: 16px; transform: translateX(-50%); /* Tam opak: %96'da arkadaki eğik şerit hafifçe sızıyor ve metnin kontrastını yer yer bozuyordu. */ background: #141312; border: 1px solid #2C2926; border-radius: 10px; padding: 11px 13px; min-width: 208px; } .mp-pop p { margin: 0; } .mp-pop .n { font-size: 11px; font-weight: 900; letter-spacing: -.01em; text-transform: uppercase; color: #F2EFEA; } .mp-pop .m { font-size: 8.5px; font-weight: 800; letter-spacing: 1.1px; text-transform: uppercase; color: #918A81; margin-top: 3px; } .mp-pop .r { display: flex; gap: 14px; margin-top: 9px; } .mp-pop .r span { font-size: 8.5px; font-weight: 900; letter-spacing: 1.1px; text-transform: uppercase; color: #918A81; } .mp-pop .r span b { color: var(--accent); font-size: 11px; } .mp-pop .r span.g b { color: #3ADE86; } /* ── Puantaj özeti ────────────────────────────────────────────────── ShiftPanel'deki gerçek toplam satırı: saat / fazla / harcırah. */ .ui-sum { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: #242220; border-radius: 10px; overflow: hidden; } .ui-sum div { background: #141312; padding: 14px 12px; text-align: center; } .ui-sum span { display: block; font-size: 8px; font-weight: 900; letter-spacing: 1.5px; text-transform: uppercase; color: #918A81; margin-bottom: 6px; } .ui-sum b { font-size: 19px; font-weight: 900; font-variant-numeric: tabular-nums; } .ui-sum .a b { color: var(--accent); } .ui-sum .g b { color: #3ADE86; } .ui-rows { margin-top: 13px; } /* GRID, flex değil: kolonlar sabit genişlikte olduğu için harcırah etiketi olmayan günde saat yerinden OYNAMIYOR. Eski flex düzeninde saat sağa kayıyordu ve satırlar birbirini tutmuyordu. */ .ui-row { display: grid; grid-template-columns: 52px 1fr 66px 62px; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid #1E1C1A; font-size: 10px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; } .ui-row:first-child { border-top: 0; } .ui-row .d { color: #918A81; font-variant-numeric: tabular-nums; } .ui-row .p { color: #F2EFEA; flex: 1; } .ui-row .h { color: var(--accent); font-variant-numeric: tabular-nums; text-align: right; } .ui-row .hr { font-size: 8px; padding: 3px 7px; border-radius: 999px; background: #07260F; color: #3ADE86; letter-spacing: 1px; text-align: center; justify-self: start; } @media (prefers-reduced-motion: reduce) { .mp.tech::before { animation: none; opacity: .5; } } /* ── Teklif formu (modal) ──────────────────────────────────────────── kullanılıyor: odak tuzağı, Esc ile kapanma ve arka plan karartması tarayıcıdan geliyor, elle yazmaya gerek yok. */ .eo-modal { border: 1px solid var(--line); border-radius: 16px; padding: 0; background: var(--surface); color: var(--ink); max-width: 460px; width: calc(100% - 32px); box-shadow: 0 40px 90px -30px rgba(0,0,0,.9); } .eo-modal::backdrop { background: rgba(6,6,6,.72); } .eo-modal-in { padding: 28px 26px 26px; } .eo-modal h3 { font-size: 21px; font-weight: 900; letter-spacing: -.02em; margin: 0 0 6px; text-wrap: balance; } .eo-modal .sub { color: var(--muted); font-size: 14px; margin: 0 0 20px; } .eo-field { display: block; margin-bottom: 13px; } .eo-field span { display: block; font-size: 9px; font-weight: 900; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; } .eo-field input, .eo-field textarea { width: 100%; background: var(--bg); color: var(--ink); border: 1px solid var(--line); border-radius: 9px; padding: 11px 12px; font: inherit; font-size: 14px; } .eo-field textarea { resize: vertical; min-height: 68px; } .eo-field input:focus, .eo-field textarea:focus { outline: none; border-color: var(--accent); } .eo-field.bad input { border-color: var(--danger, #FF8072); } .eo-row { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; } /* Bot tuzağı: ekran dışında, ekran okuyucudan da gizli. Gerçek kullanıcı göremez; botlar her alanı doldurduğu için yakalanıyorlar. */ .eo-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .eo-modal-foot { display: flex; gap: 10px; margin-top: 18px; } .eo-modal-foot .eo-btn { flex: 1; } .eo-msg { font-size: 13px; margin: 14px 0 0; } .eo-msg.err { color: #FF8072; } .eo-ok { text-align: center; padding: 12px 0 4px; } .eo-ok .tick { width: 44px; height: 44px; border-radius: 50%; margin: 0 auto 14px; display: grid; place-items: center; background: rgba(58,222,134,.12); border: 1px solid #2E8B57; color: #3ADE86; font-size: 20px; font-weight: 900; } .eo-ok h3 { margin-bottom: 8px; } .eo-ok p { color: var(--muted); font-size: 14px; margin: 0 0 18px; } @media (max-width: 460px) { .eo-row { grid-template-columns: 1fr; } } /* ── Roller ─────────────────────────────────────────────────────────── */ .eo-roles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; } .eo-role { border: 1px solid var(--line); border-radius: 14px; padding: 24px; background: var(--surface); position: relative; overflow: hidden; } .eo-role::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--accent); } .eo-role h3 { font-size: 13px; font-weight: 900; letter-spacing: 1.4px; text-transform: uppercase; margin: 0 0 12px; color: var(--accent); } .eo-role p { margin: 0; font-size: 14px; color: var(--muted); } /* ── Platform / güvenlik ────────────────────────────────────────────── */ /* .eo-two KALDIRILDI: Platform ve Güvenlik aynı bölümün iki kolonuydu, bu yüzden üst menüdeki iki tuş da aynı yere gidiyordu. İkisi ayrı bölüm oldu; her biri kendi başlığıyla tam genişlikte. */ .eo-one { display: block; } .eo-one .eo-list { max-width: 62ch; } .eo-list { margin: 0; padding: 0; list-style: none; } .eo-list li { padding: 16px 0; border-bottom: 1px solid var(--line); display: flex; gap: 14px; align-items: flex-start; } .eo-list li:last-child { border-bottom: 0; } .eo-list svg { width: 19px; height: 19px; color: var(--accent); flex: 0 0 auto; margin-top: 3px; } .eo-list b { display: block; margin-bottom: 3px; } .eo-list span { color: var(--muted); font-size: 15px; } /* ── İngilizce bölüm ────────────────────────────────────────────────── */ .eo-en { background: var(--surface); border-radius: 16px; padding: 40px; border: 1px solid var(--line); } .eo-en h2 { font-size: clamp(22px, 2.8vw, 30px); } .eo-en p { color: var(--muted); max-width: 70ch; } .eo-en ul { color: var(--muted); padding-left: 20px; } .eo-en li { margin-bottom: 9px; } .eo-en b { color: var(--ink); } /* ── Kapanış ────────────────────────────────────────────────────────── */ .eo-final { text-align: center; } .eo-final .eo-cta { margin-top: 30px; } footer.eo-foot { border-top: 1px solid var(--line); padding: 46px 0 64px; color: #6E675F; font-size: 14px; } .eo-foot .wrap { display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: center; } .eo-foot .eo-foot-links { display: flex; flex-wrap: wrap; gap: 20px; margin-left: auto; } @media (max-width: 860px) { .eo-show-row, .eo-show-row.flip { grid-template-columns: 1fr; gap: 24px; } /* Mobilde her zaman kart üstte, açıklama altta — flip'in order'ı iptal */ .eo-show-row.flip .eo-show-text { order: 0; } } /* Footer imzası */ .eo-by { display: inline-block; margin-top: 6px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; font-size: 11px; color: var(--muted); } @media (max-width: 900px) { .eo-grid { grid-template-columns: repeat(2, 1fr); } .eo-roles { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 660px) { .eo-navlinks { display: none; } .eo-split { grid-template-columns: 1fr; } .eo-grid { grid-template-columns: 1fr; } .eo-roles { grid-template-columns: 1fr; } .eo-en { padding: 26px; } section.eo-sec { padding: 60px 0; } .eo-hero { padding: 60px 0 68px; } .eo-foot .eo-foot-links { margin-left: 0; } }