:root { color-scheme: dark; --bg: #0b0a17; --bg-card: rgba(255,255,255,.06); --border: rgba(255,255,255,.12); --text: #f1eefc; --text-dim: #d3d2de; --accent: #a78bfa; --accent2: #60a5fa; --yesil: #34d399; --kirmizi: #ff6b81; --bg-card-hi: rgba(255,255,255,.10); --border-hi: rgba(255,255,255,.2); --text-faint: #aaa9b6; --altin: #f5c04f; --font-display: "Archivo Black", "Arial Black", "Helvetica Neue", Arial, sans-serif; --font-data: ui-monospace, "SF Mono", "Cascadia Code", "Consolas", monospace; /* 2026-08-14 (2. tur): Muzaffer'e 7 farklı gorsel yon sunuldu (tasarim-secenekleri/), "Yumusak Fintech - Koyu" secildi ve "butun sisteme entegre et" denildi. Onceki turkuaz+gok mavisi paleti bu mor-lacivert CAM sistemiyle DEGISTIRILDI - kullanicinin ELINE ALIP onayladigi somut bir tasarimdan geldigi icin, sabah soylenen "mor istemiyorum" tercihinin YERINE gecti (daha canlı/parlak bir leylak tonu, o zamanki donuk gri-mordan FARKLI). --card-glass/--border-glass mockup'taki AYNI rgba degerleri; --accent-deep gradyan companion'i icin YENI. --blur, .panel/.kontrol- kart/.kp-modal gibi ana kapsayicilarin backdrop-filter degeri. */ --accent-deep: #7c6df2; --blur: 20px; /* GERCEK BUG (2026-08-14, Muzaffer'in "soldaki menudeki yazilar okunmuyor" geri bildirimi): --text-dim/--text-faint'in ILK degerleri, CAM panelin GERCEK (backdrop-filter sonrasi, ekrandan piksel ornekleyerek olculen ~rgb(56,52,77)) zeminine karsi sadece 3.65:1 ve 2.25:1 kontrast veriyordu - WCAG AA (4.5:1) esiginin ALTINDA. ILK duzeltme (#c2bce8/#a39cc4) kontrasti matematiksel olarak duzeltti (6.6:1) ama HALA leylak/mor tonundaydi - Muzaffer'in AYRI bir geri bildirimi: "renk degistir demedim, BEYAZ yap dedim, hepsi mor". Bu YENI degerler NOTR (dogal, hemen hemen tonsuz) acik/koyu gri - RGB kanallari birbirine cok yakin, "mor" olarak algilanmiyor - ayni zemine karsi kontrast DAHA da yuksek (7.95:1 / 5.13:1, Playwright ile olculdu). */ /* Bazi ozel bilesenlerde (gradyan-metin, SVG vurgu noktasi, hover/iz zeminleri) dogrudan #fff/rgba(255,255,255,x) yazilmisti - koyu temada doguru ama acik temada GORUNMEZ olur. Bu 3 degisken o siteleri tema-farkinda hale getirir; koyu varsayilanlari eski hardcode degerlerle BIREBIR ayni (gorsel fark yok), acik tema karsiligi asagida. */ --parlak: #fff; --govde-hover: rgba(255,255,255,.03); --iz-arka: rgba(255,255,255,.08); } /* 2026-08-17: Acik tema secenegi ("temi aktif et" istegi). ile aktif olur (bkz. tema.js). Koyu "Yumusak Fintech" kimligiyle AYNI mor-lacivert aksan ailesi korundu, sadece zemin/metin ters cevrildi; metin/aksan renkleri beyaz zeminde WCAG AA (4.5:1+) tutturacak sekilde koyulastirildi (yukaridaki koyu-tema kontrast gecmisiyle ayni disiplin). */ :root[data-theme="light"] { color-scheme: light; --bg: #f6f4fb; --bg-card: rgba(23,15,55,.045); --border: rgba(23,15,55,.12); --text: #1a1526; --text-dim: #4c445c; --accent: #6d28d9; --accent2: #1d4ed8; --yesil: #047857; --kirmizi: #be123c; --bg-card-hi: rgba(23,15,55,.08); --border-hi: rgba(23,15,55,.22); --text-faint: #6b6478; --altin: #b45309; --accent-deep: #5b21b6; --blur: 20px; --parlak: var(--text); --govde-hover: rgba(23,15,55,.035); --iz-arka: rgba(23,15,55,.10); } * { box-sizing: border-box; } html, body { height: 100%; margin: 0; } body { background: radial-gradient(circle at 12% -5%, rgba(167,139,250,.24) 0%, transparent 42%), radial-gradient(circle at 100% 20%, rgba(96,165,250,.18) 0%, transparent 42%), radial-gradient(circle at 30% 100%, rgba(167,139,250,.1) 0%, transparent 40%), var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; display: flex; flex-direction: column; height: 100vh; overflow: hidden; } /* 2026-08-10, Muzaffer'in "buyuk monitorde kucuk bir ekran goruyorum" sikayeti sonrasi KALDIRILDI: bir onceki surum body'yi sabit 1920x1080 bir "referans kanvas" yapip transform:scale ile pencereye sigdiriyordu - 1920x1080'den BUYUK monitorlerde (Muzaffer'in is yerindeki gibi) olcek 1'de tavan yapiyor (Math.min(1, ...)), yani sayfa hicbir zaman BUYUMUYOR, sadece kucuk bir "ada" gibi ekranin sol-ustunde sabit kalip geri kalan TUM alan bos/siyah kaliyordu - "nereden acarsam ayni gormeliyim" istegini yanlis yontemle (sabit-boyut+kucultme) cozmeye calismisti. Sayfa zaten akici (flex/grid, 1fr sutunlar, 100vh) tasarlanmisti - bu blok kaldirilinca dogal haline donuyor: HER ekranda mevcut genisligi/yuksekligi GERCEKTEN doldurur, JS tabanli hicbir zoom/olcek hilesi yok. */ /* 2026-08-09, Muzaffer'in acik istegi: "üstteki bar çok çirkin... sadece böyle tıklanabilir şeyler çok çirkin, gerçekten güzel bir panel yap". GERCEK BUG: eskiden .ust-nav a.aktif/:hover'in background'u (var(--bg-card)) BARIN KENDI arka planiyla (o da var(--bg-card)) AYNIYDI - aktif/hover sekmenin GORSEL OLARAK NEREDEYSE HIC FARKI yoktu, sadece metin rengi degisiyordu. Bu tum "cok cirkin" hissinin kok nedeniydi. Simdi: marka rozeti (::before ile, HTML degismeden), sekmeler gercek bir "pill grubu" icinde, aktif sekme dolu-renk pill. */ /* 2026-08-09 (2. tur): Muzaffer'in acik istegi: "Bu ust bar KESINLIKLE hicbir yerde degismez". GERCEK BUG: .ust-bar flex+space-between kullaniyordu ve 3. eleman (.portfoy-ozet, sag taraftaki Toplam Deger/ K-Z kutulari) SADECE bazi sayfalarda vardi (orn. hedge.html'de hic yok). space-between'de ortadaki eleman (nav) konumu, 1. ve 3. elemanin genisligine gore hesaplandigindan, ozet kutusu olmayan sayfalarda nav sona yapisiyor, olan sayfalarda ortada kaliyordu - yani menu sayfadan sayfaya YER DEGISTIRIYORDU. Simdi: sabit genislikte grid sutunlari (baslik | menu | ozet) - ozet kutusu olsun/olmasin nav'in baslangic noktasi ASLA degismez. */ .ust-bar { display: grid; grid-template-columns: 260px 1fr minmax(0, auto); align-items: center; column-gap: 1rem; row-gap: .5rem; padding: .65rem 1.4rem; border-bottom: 1px solid var(--border); background: linear-gradient(180deg, var(--bg-card-hi), var(--bg-card)); position: relative; z-index: 5; box-shadow: 0 6px 18px -10px rgba(0,0,0,.7); } .ust-bar h1 { font-size: 1rem; margin: 0; font-weight: 800; letter-spacing: -.01em; display: flex; align-items: center; gap: .55rem; overflow: hidden; } .ust-bar h1 span.ust-bar-alt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ust-bar h1::before { content: "U"; width: 26px; height: 26px; border-radius: 7px; flex-shrink: 0; background: linear-gradient(135deg, var(--accent), var(--accent2)); color: #05050a; font-family: var(--font-display); font-size: .78rem; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 14px -3px var(--accent); } .ust-bar-alt { color: var(--text-dim); font-weight: 500; font-size: .88rem; } .ust-bar-logo { color: inherit; text-decoration: none; border-radius: 8px; padding: .1rem .35rem; margin: -.1rem -.35rem; transition: background .15s ease; } .ust-bar-logo:hover { background: var(--bg-card-hi); } /* 2026-08-10 (3. tur), Muzaffer'in onayladigi yeni ust menu: tek bir "Menu" dugmesi ARDINDA HERSEYI gizlemek yerine (eski deneme, yukarida tarihce olarak kalan yorumlar) artik yatay bir "hap" (pill) sirasinda TUM sayfalar ayri dugme; sadece Portfoy ve Tarama grubu kendi ici acilir alt menuye sahip - orn.html'e gore statik degil, TAMAMI ust-nav.js tarafindan /api/ben cevabina (rol/izinli_paneller) gore JS'ten uretiliyor (bkz. NAV_TANIMI) - 16 sayfada ayri ayri linki elle tutmak yerine TEK kaynak. */ .ust-nav-alani { position: relative; min-width: 0; display: flex; } .nav-satir { display: flex; align-items: center; gap: .3rem; flex-wrap: wrap; background: linear-gradient(165deg, var(--bg-card) 0%, var(--bg-card-hi) 130%); border: 1px solid var(--border-hi); border-radius: 13px; padding: .3rem; } .nav-btn { display: inline-flex; align-items: center; gap: .35rem; color: var(--text-dim); text-decoration: none; font-size: .78rem; font-weight: 600; padding: .5rem .7rem; border-radius: 9px; white-space: nowrap; background: none; border: none; font-family: inherit; cursor: pointer; transition: background .15s ease, color .15s ease; } .nav-btn:hover { background: var(--bg-card-hi); color: var(--text); } .nav-btn.aktif { background: var(--accent); color: #001018; } .nav-btn.cikis { color: var(--kirmizi); } .nav-btn.cikis:hover { background: color-mix(in srgb, var(--kirmizi) 16%, transparent); color: var(--kirmizi); } .nav-btn.admin { color: var(--accent2); } .nav-btn.admin:hover { background: color-mix(in srgb, var(--accent2) 16%, transparent); color: var(--accent2); } .nav-ok { width: .7em; height: .7em; flex-shrink: 0; transition: transform .15s ease; } .nav-ayrac { width: 1px; align-self: stretch; margin: .3rem .15rem; background: var(--border-hi); } .acilir { position: relative; } .acilir-panel { display: none; flex-direction: column; gap: .05rem; position: absolute; top: calc(100% + .5rem); left: 0; width: 190px; background: linear-gradient(165deg, var(--bg-card) 0%, var(--bg-card-hi) 130%); border: 1px solid var(--border-hi); border-radius: 13px; padding: .4rem; box-shadow: 0 20px 45px -14px rgba(0,0,0,.65); z-index: 60; } .acilir.acik .acilir-panel { display: flex; animation: navAcilirGir .16s ease; } .acilir.acik .nav-btn { background: var(--bg-card-hi); color: var(--text); } .acilir.acik .nav-btn.aktif { background: var(--accent); color: #001018; } .acilir.acik .nav-ok { transform: rotate(180deg); color: var(--accent); } .acilir-panel a { color: var(--text-dim); text-decoration: none; font-size: .8rem; font-weight: 600; padding: .55rem .7rem; border-radius: 8px; transition: background .15s ease, color .15s ease; } .acilir-panel a:hover { background: var(--bg-card-hi); color: var(--text); } .acilir-panel a.aktif { background: var(--accent); color: #001018; } @keyframes navAcilirGir { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .acilir.acik .acilir-panel { animation: none; } .nav-ok { transition: none; } } #tarama-tetikle-btn { background: var(--accent); color: #001018; border: none; border-radius: 6px; padding: .4rem .9rem; font-size: .8rem; font-weight: 600; cursor: pointer; } #tarama-tetikle-btn:disabled { opacity: .6; cursor: not-allowed; } .tarama-rayil { width: 380px; flex-shrink: 0; padding: 1rem; padding-bottom: 6.5rem; border-right: 1px solid var(--border); overflow-y: auto; background: linear-gradient(180deg, var(--bg-card) 0%, var(--bg) 55%); box-shadow: 6px 0 20px -12px rgba(0,0,0,.6); position: relative; } .tarama-liste { display: flex; flex-direction: column; gap: .8rem; } .tarama-bos { color: var(--text-dim); text-align: center; padding: 3rem 1rem; } .tarama-karti { background: var(--bg-card); backdrop-filter: blur(var(--blur)); -webkit-backdrop-filter: blur(var(--blur)); border: 1px solid var(--border); border-radius: 18px; padding: 1rem 1.2rem; cursor: pointer; box-shadow: 0 16px 34px -24px rgba(124,109,242,.3); transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease; } .tarama-karti:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 20px 40px -22px rgba(124,109,242,.4); } .tarama-karti.secili { border-color: var(--accent); } .tarama-karti-ust { display: flex; align-items: center; gap: .8rem; margin-bottom: .5rem; flex-wrap: wrap; } .tarama-ticker { font-size: 1.1rem; font-weight: 700; } .tarama-sinyal { color: var(--text-dim); font-size: .8rem; } .tarama-yon-rozet { font-size: .75rem; font-weight: 700; padding: .15rem .5rem; border-radius: 10px; } .tarama-yon-rozet.yukselis { background: rgba(62, 207, 142, .15); color: #3ecf8e; } .tarama-yon-rozet.dusus { background: rgba(255, 92, 122, .15); color: #ff5c7a; } .tam-rapor-btn { background: none; border: 1px solid var(--border); color: var(--accent); border-radius: 6px; padding: .3rem .7rem; font-size: .75rem; cursor: pointer; margin-top: .4rem; } .tam-rapor-btn:hover { border-color: var(--accent); } .russell-analiz-btn { background: var(--bg-card); border: 1px solid var(--border); color: var(--accent); border-radius: 10px; padding: .3rem .7rem; font-size: .75rem; cursor: pointer; margin-top: .4rem; } .russell-analiz-btn:hover { border-color: var(--accent); } .russell-analiz-btn:disabled { opacity: .5; cursor: default; } .russell-analiz-durum { display: block; margin-top: .3rem; } .tam-rapor-alani { margin-top: .6rem; } .canli-grafik-linki { display: inline-block; margin-top: .6rem; font-size: .78rem; color: var(--accent); text-decoration: none; } .canli-grafik-linki:hover { text-decoration: underline; } .tarama-al-form { display: flex; align-items: center; gap: .5rem; margin-top: .8rem; padding-top: .8rem; border-top: 1px solid var(--border); flex-wrap: wrap; } .al-baslik { font-size: .8rem; color: var(--text-dim); } .tarama-al-form input { background: var(--bg); border: 1px solid var(--border); color: var(--text); padding: .35rem .5rem; border-radius: 6px; font-size: .8rem; width: 110px; } .tarama-al-form button { background: var(--yesil); color: #001a0a; border: none; border-radius: 6px; padding: .35rem .8rem; font-size: .8rem; font-weight: 600; cursor: pointer; } .kademe-onizleme { display: flex; align-items: center; gap: .5rem; margin-top: .8rem; padding-top: .8rem; border-top: 1px solid var(--border); flex-wrap: wrap; } .kademe-onizleme-butce { background: var(--bg); border: 1px solid var(--border); color: var(--text); padding: .35rem .5rem; border-radius: 6px; font-size: .8rem; width: 150px; } .kademe-onizleme-btn { background: var(--accent); color: #001018; border: none; border-radius: 6px; padding: .35rem .8rem; font-size: .8rem; font-weight: 600; cursor: pointer; } .kademe-onizleme-sonuc { width: 100%; margin-top: .5rem; } .kademe-onizleme-sonuc .kademe-tablosu { width: 100%; font-size: .78rem; } .form-basari { color: var(--yesil); font-size: .8rem; } /* 2026-08-09, Muzaffer'in acik istegi: "portföy, trportfoy, ETF portföyü... normal yazıymış gibi durmuyor" - AYNI DOM/JS'e (ozet-parca/b.pozitif/ b.negatif siniflari HIC degismedi) dokunmadan, sadece GORSEL katmani duz metinden kucuk "chip" kartlarina cevrildi. Geri alma: bu blok silinirse eski duz-metin gorunume doner (JS/HTML degismedigi icin herhangi bir islevsellik kaybi olmaz). */ .portfoy-ozet { display: flex; gap: .6rem; font-size: .9rem; color: var(--text-dim); align-items: center; flex-wrap: wrap; } .ozet-parca { display: flex; flex-direction: column; gap: .1rem; background: var(--bg); border: 1px solid var(--border); border-radius: 9px; padding: .35rem .7rem; font-size: .68rem; letter-spacing: .02em; text-transform: uppercase; color: var(--text-faint); font-weight: 600; } .ozet-parca b { color: var(--text); font-family: var(--font-data); font-size: .95rem; font-weight: 700; text-transform: none; letter-spacing: 0; font-variant-numeric: tabular-nums; } .ozet-parca b.pozitif { color: var(--yesil); } .ozet-parca b.negatif { color: var(--kirmizi); } /* 2026-08-10, Muzaffer'in "her portfoyun toplam deger/maliyetini ayri gormeliyiz, ust bar'a bir acilir pencere koyalim" istegi - TL/ETF/US/ Opsiyon/Toplam secici. ILK SURUM native / yigininiydi - native