/* ====================================================================== on-yuz.css - ANASAYFA / GIRIS / KAYIT ====================================================================== AYRI DOSYA, stil.css DEGIL. Sebep: stil.css 102 KB ve panelin butun ekranlarini tasiyor; siteye ILK gelen kisiye bunu indirtmenin anlami yok. Bu dosya birkac KB ve sadece on yuzu kapsiyor. Renk ADLARI stil.css ile AYNI (--zemin/--vurgu/--iyi/--tehlike) - iki taraf arasinda gidip gelirken yesil hep "iyi", kirmizi hep "kotu" kalsin. Degerleri burada TEKRAR tanimliyoruz cunku stil.css yuklenmiyor; ikisi ayrisirsa on yuz ile panel farkli renkte olur. ====================================================================== */ :root { --zemin: #10141c; --kart: #171d28; --kenar: #2a3242; --yazi: #e6e9ef; --soluk: #8c97ab; --vurgu: #6fb2e8; --iyi: #4caf7d; --tehlike: #e07a7a; --kart-ic: #131924; /* ISARET RENKLERI - IKON DOSYALARIYLA BIREBIR (14.09.2026) ================================================================== Kullanici: "her yerde ayni olacak bu ya, logo icon sabit, her yerde farkli cikiyor". Hakliydi: SVG/PNG ikonlar #e4eaf2 + #4fa3e3 (sabit hex) CSS isaret var(--yazi) + var(--vurgu) = #e6e9ef + #6fb2e8 FARKLI Sebep: --vurgu bir ARAYUZ belirteci (sekme, rozet, etiket), isaret ise MARKA. Ikisi ayni degere baglanmisti ve zamanla ayristi. Artik isaretin kendi belirteci var. ACIK TEMADA DEGISKENE DUSUYOR (asagidaki blok): beyaz zeminde #e4eaf2 ucgen gorunmez olurdu. Ikonlar zaten HER ZAMAN koyu zeminli, yani orada eslesme sorusu yok. */ --logo-tepe: #e4eaf2; --logo-mavi: #4fa3e3; /* VURGU ZEMINI UZERINDEKI YAZI (29.08.2026) - stil.css ile ayni ad. BURADA TEK DEGER YETIYOR: asagidaki acik tema blogu --vurgu'yu EZMIYOR (stil.css ezer), yani anasayfada mavi iki temada da ayni acik mavi. Acik mavinin ustune her iki durumda da KOYU yazi gider. Anasayfanin rengine DOKUNMADIM - sadece eksik belirteci ekledim. */ --vurgu-yazi: #08131d; } :root[data-tema="acik"] { --zemin: #eef2f7; --kart: #ffffff; --kenar: #d5dde8; --yazi: #1a2230; --soluk: #5b6779; --kart-ic: #f4f7fb; /* Isaret acik temada degiskene doner - bkz. koyu tema blogundaki not. */ --logo-tepe: var(--yazi); --logo-mavi: var(--vurgu); } * { box-sizing: border-box; } body { margin: 0; min-height: 100vh; background: var(--zemin); color: var(--yazi); font: 14px/1.5 "Segoe UI", system-ui, -apple-system, sans-serif; display: flex; flex-direction: column; } /* ---------- ZEMIN GORSELI ---------- SVG, SATIR ICI ve SABIT: dis istek yok, lisans sorunu yok, her ekranda keskin. Stok fotograf yerine bunu sectik - fotograf hem yeni bir istek hem lisans demek, sitede CDN de yok. pointer-events:none - zemin hicbir tiklamayi yakalamaz. */ .zemin { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } .zemin svg { width: 100%; height: 100%; display: block; } /* METNIN ARKASI - yumusak perde. Mumlar dogrudan yazinin arkasina dusunce okumak zorlasiyordu; zemin renginden merkeze dogru bir elips koyuyoruz. Renk DEGISKENDEN geliyor, acik temada da calisir. Gorsel tamamen kaybolmuyor - kenarlarda duruyor. */ .zemin::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 62% 58% at 50% 46%, var(--zemin) 0%, transparent 76%); opacity: .85; } /* Icerik zeminin USTUNDE */ .kat { position: relative; z-index: 1; } /* ---------- UST SERIT ---------- */ .on-ust { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 24px; } /* BOSLUK 10px -> 5px (30.08.2026 kullanici istegi: "logolarin arasindaki boslugu 5px yapalim HEPSINDE"). Panel logosu (stil.css .logo) ile AYNI olcu - ayni marka iki sayfada farkli duruyordu. Bu kural BES sayfayi birden besliyor: anasayfa, giris, kayit, dogrula, odeme. */ .on-logo { display: flex; align-items: center; gap: 5px; text-decoration: none; color: inherit; } .on-logo-yazi { font-size: 19px; letter-spacing: .2px; } /* YAZIM RENGI (03.09.2026 - son hal) "Crypto" beyaz var(--yazi), "Deep" mavi var(--vurgu). DEGISKENDEN besleniyor, sabit hex DEGIL: acik tema --yazi ve --vurgu yu zaten koyulastiriyor, ayrica acik tema kurali yazmaya gerek kalmiyor. Bir ara arsivdeki tur4 secenek sayfasinin sabit hexleri (#7c8aa0 notr + beyaz) kullanildi ve o zaman acik tema icin AYRI dort kural gerekmisti. Olcut MOBIL ACILIS PERDESI (10/www/stil.css .marka): o bastan beri var(--vurgu) + miras kullaniyor ve dogru duruyordu. Diger yuzler ona uyduruldu. Denenen ve BIRAKILAN renk semalari arsivde: Arsiv/L1-logo-tasarimlari/altin-gumus/ Arsiv/L1-logo-tasarimlari/oneri-sayfalari/tur4-yazim-renkleri.html KALINLIK VURGUSU YOK (03.09.2026): "Deep" 700/800 ile kalinlasiyordu, kaldirildi - iki kelime AYNI agirlikta, fark sadece RENKTE. Olcut yine acilis perdesi: orada .marka her iki kelimeye ayni agirligi veriyor ve dogru duruyordu. Sinif adi ".logo-kalin" KALDI - alti HTML dosyasinda ve logo.js te gecen bir ad; sirf agirlik degisti diye 13 yeri yeniden adlandirmak yeni bir atlama riski uretirdi. */ .on-logo-ince { font-weight: 400; color: var(--yazi); } .on-logo-kalin { font-weight: 400; color: var(--vurgu); } /* YAZIM RENGI YOK - BILEREK. (03.09.2026) Kisa sure altin ("Crypto") + gumus ("Deep") metalik gradyan denendi, kullanici begenmedi ve geri alindi. Yazi rengini cevresinden MIRAS aliyor; vurgu sadece font-weight ile. Denenen hal ve geri getirme adimlari arsivde: Arsiv/L1-logo-tasarimlari/altin-gumus/ */ /* MARKA ISARETI - "Uc Kademe" (03.09.2026) Ust parca NOTR (gorunen kisim), kademeler VURGU renginde ve opaklikla soluyor. Eski isaret yesil/kirmizi tasiyordu; o ayrim ekranin her yerinde zaten var, logoda tekrar etmesi gereksizdi ve 16 pikselde iki renk birbirine giriyordu. Eski siniflar (.logo-arka/.logo-alis/.logo-satis) KALDIRILDI - arsivde: Arsiv/L1-logo-tasarimlari/ */ .logo-tepe { fill: var(--logo-tepe); } .logo-kat { fill: var(--logo-mavi); } /* ---------- ORTA ---------- */ .on-orta { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; padding: 40px 24px 64px; text-align: center; } .on-baslik { margin: 0; font-size: clamp(30px, 6vw, 52px); line-height: 1.1; font-weight: 800; letter-spacing: -.5px; } .on-baslik .vurgu { color: var(--vurgu); } .on-alt { margin: 0; max-width: 560px; font-size: clamp(14px, 2.2vw, 17px); color: var(--soluk); } /* ---------- DUGMELER ---------- */ .on-dugmeler { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; } .on-dugme { display: inline-flex; align-items: center; justify-content: center; min-width: 168px; padding: 13px 26px; border-radius: 10px; border: 1px solid var(--kenar); background: var(--kart); color: var(--yazi); font-size: 15px; font-weight: 600; text-decoration: none; cursor: pointer; transition: transform .12s ease, border-color .12s ease, background .12s ease; } .on-dugme:hover { transform: translateY(-1px); border-color: var(--vurgu); } .on-dugme.birincil { background: var(--vurgu); border-color: var(--vurgu); color: #0b1017; } .on-dugme.birincil:hover { background: #86c0ee; border-color: #86c0ee; } /* ---------- KART (giris / kayit) ---------- */ .on-kart { width: 100%; max-width: 420px; background: var(--kart); border: 1px solid var(--kenar); border-radius: 14px; padding: 26px 24px; box-shadow: 0 10px 40px rgba(0, 0, 0, .35); text-align: left; } .on-kart-baslik { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 20px; } .on-alan { margin-bottom: 14px; } .on-alan label { display: block; margin-bottom: 6px; font-size: 12px; font-weight: 600; color: var(--soluk); } .on-alan input { width: 100%; padding: 10px 12px; background: var(--kart-ic); color: var(--yazi); border: 1px solid var(--kenar); border-radius: 8px; font: inherit; } .on-alan input:focus { outline: none; border-color: var(--vurgu); box-shadow: 0 0 0 3px rgba(111, 178, 232, .18); } .on-ipucu { font-size: 11px; color: var(--soluk); margin-top: 4px; } /* ONAY KUTUSU (15.09.2026) -------------------------------------------------------------------- `.on-kutu` kayit ve odeme ekranlarinda KULLANILIYORDU ama hicbir yerde TANIMLI DEGILDI: label varsayilan olarak satir ici, o yuzden dort onay kutusu tek paragrafa akip ic ice gecmis gorunuyordu (kullanicinin ekran goruntusu). Tek kutu varken fark edilmemisti. flex + align-items:flex-start: metin iki satira tastiginda kutu ILK satirla hizali kalsin, ortalanip kaymasin. */ .on-kutu { display: flex; align-items: flex-start; gap: 9px; padding: 9px 11px; margin: 0; background: var(--kart-ic); border: 1px solid var(--kenar); border-radius: 8px; font-size: 13px; line-height: 1.5; cursor: pointer; } .on-kutu:hover { border-color: var(--vurgu); } /* Kutu kucuk kalmasin ve metinle birlikte kaymasin. */ .on-kutu input[type="checkbox"] { flex: 0 0 auto; width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--vurgu); cursor: pointer; } .on-kutu a { color: var(--vurgu); } /* Onay kutulari KAPSAYICISI - kutular alt alta ve aralikli. Kayit ekraninda #kOnaylar, odeme ekraninda #oOnaylar. */ #kOnaylar, #oOnaylar { display: flex; flex-direction: column; gap: 8px; margin: 14px 0 12px; } /* Kapsayicinin icindeki aciklama satiri kutulardan ayrilsin. */ #kOnaylar .on-ipucu, #oOnaylar .on-ipucu { margin-top: 2px; } .on-gonder { width: 100%; margin-top: 6px; padding: 12px; border: none; border-radius: 9px; background: var(--vurgu); color: #0b1017; font: inherit; font-weight: 700; font-size: 15px; cursor: pointer; } .on-gonder:hover { background: #86c0ee; } .on-gonder:disabled { opacity: .55; cursor: not-allowed; } /* Hata ve bilgi satirlari. Yer HER ZAMAN ayrilmiyor (min-height yok): bos mesaj kutusu formu gereksiz uzatiyordu. */ .on-hata { color: var(--tehlike); font-size: 13px; margin-top: 10px; } .on-bilgi { color: var(--iyi); font-size: 13px; margin-top: 10px; } .on-uyari { color: var(--uyari); font-size: 13px; margin-top: 10px; } .on-kart-alt { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--kenar); font-size: 13px; color: var(--soluk); text-align: center; } .on-kart-alt a { color: var(--vurgu); text-decoration: none; font-weight: 600; } .on-kart-alt a:hover { text-decoration: underline; } /* ---------- ALT SERIT ---------- */ /* VECIZE - kontenjan satiri ile altbilgi arasinda. Baslik kadar dikkat cekmemeli: sayfanin son sozu, bagirmasi gerekmiyor. Serif yazi tipi bilerek - sayfanin geri kalani sans-serif, vecize oradan AYRISSIN. italic + genis harf araligi kitabe hissi veriyor. */ .on-vecize { margin: 26px auto 0; max-width: 34ch; font-family: Georgia, 'Times New Roman', serif; font-style: italic; font-size: 15px; letter-spacing: .3px; color: var(--soluk); opacity: .85; } .on-alt-serit { padding: 16px 24px; text-align: center; font-size: 12px; color: var(--soluk); } /* ---------- MOBIL ---------- */ @media (max-width: 520px) { .on-ust { padding: 14px 16px; } .on-orta { padding: 24px 16px 40px; } .on-dugme { min-width: 100%; } .on-kart { padding: 22px 18px; } } /* ---------- KUTU + YAN DUGME (Sifre Uret) ---------- */ .on-satir { display: flex; gap: 8px; align-items: stretch; } .on-satir input { flex: 1 1 auto; min-width: 0; } .on-yan-dugme { flex: 0 0 auto; padding: 0 14px; background: var(--kart-ic); color: var(--yazi); border: 1px solid var(--kenar); border-radius: 8px; font: inherit; font-weight: 600; font-size: 13px; cursor: pointer; white-space: nowrap; } .on-yan-dugme:hover { border-color: var(--vurgu); color: var(--vurgu); } /* Kontenjan cagrisi - baslik ile dugmeler arasinda, dikkat ceksin ama basligi bastirmasin diye ondan kucuk. */ .on-kontenjan-baslik { margin: 0; font-size: clamp(15px, 2.4vw, 18px); font-weight: 700; color: var(--uyari); letter-spacing: .2px; } /* ================= UST SAG: DIL + GIRIS ================= */ .on-ust-sag { display: flex; align-items: center; gap: 8px; } /* BAYRAK DUGMESI Secili olan CERCEVELI ve tam opak; secili olmayan SOLUK. Iki bayragi da parlak birakmak "hangisi acik" sorusunu cevapsiz birakirdi - en sik yapilan dil secici hatasi. */ .on-bayrak { display: flex; align-items: center; justify-content: center; width: 34px; height: 26px; padding: 0; background: transparent; cursor: pointer; border: 1px solid transparent; border-radius: 6px; opacity: .45; transition: opacity .15s, border-color .15s; } .on-bayrak:hover { opacity: .8; } .on-bayrak.secili { opacity: 1; border-color: var(--vurgu); } .on-bayrak svg { display: block; border-radius: 2px; } /* DAR EKRAN: ust seritte marka + iki bayrak + iki dugme var. 375px de hepsi yan yana sigmiyor - dugmeler kuculuyor ve serit alt satira sariyor. Gizlemiyoruz: kullanici "anasayfada zaten bir sey yok, onunde de olsun" dedi, yani bu ikili gorunur kalmali. */ @media (max-width: 560px) { .on-ust { flex-wrap: wrap; gap: 10px; padding: 14px 16px; } .on-ust-sag { gap: 6px; } .on-ust-sag .on-dugme { padding: 8px 12px !important; font-size: 13px; } .on-bayrak { width: 30px; height: 23px; } }