/* ============================================================================ TEMA: kizil — "OCAK" (ELLE YAZILMISTIR) ---------------------------------------------------------------------------- Bu dosya hicbir uretilmis/derlenmis CSS'ten turetilmemistir ve hicbir baska siteden sinif adi, kural ya da yerlesim kopyalanmamistir. Dekoratif varliklar tools/gen-kizil-assets.py tarafindan uretilir (SVG, currentColor). TEZ (her karar buna bakar): Sayfa, duvara percinlenmis mat dokme demir levhalardan kurulu bir demirhane panosudur. Ates SOL ALTTAN gelir. Kirmizi bir BOYA degil bir DURUM'dur: bir sey canliysa, birincil eylemse, odaktaysa, tehlikeliyse ya da imlec altindaysa metal orada kizarir; geri kalan her sey demir grisidir. KIRMIZI BUTCESI: bir gorunumun en fazla ~%5'i kirmizi olabilir ve kirmizi yalniz su bes anlamda gorunur: (1) canli/isi durumu, (2) gorunumdeki TEK birincil eylem, (3) odak halkasi, (4) tehlike/uyari, (5) imlec altindaki levhanin 1px sicak kenari. KAPSAM: her secici [data-theme="kizil"] altindadir. data-theme uzerine lib/theme.tsx tarafindan yazilir, yani [data-theme="kizil"] = . Denetleyici: python tools/check-kizil-scope.py ("kapsanmamis secici = 0") ONEK: sinif adlari `kz-`, degiskenler `--kz-*`, animasyonlar `kz-*`. OLCUM NOTU (tahmin degil, PIL ile piksel piksel olculdu): Murekkep iki katmandir. Dikey PERDE yalniz ust bandi (nav okunurlugu) ve alt gecisi koyultur, ortada HAFIFTIR (%10-12) — yoksa safti ile carpilip gorseli oldururdu. Kontrasti tasiyan katman SAFT'tir: masaustu -> yatay sutun (kenarlarda 0, cekirdekte %90): karakterlerin ustune binmez, metnin oturdugu orta sutunu koyultur. mobil -> DIKEY bant (%18-%78 arasi %90): mobil kirpmada karakter yok, metin bloguna denk gelen serit koyulur, ustte/altta gorsel yasar. Metin bolgesindeki EN PARLAK piksel (ortalama DEGIL — piksel piksel arandi, uc katman + %5 doku uygulandiktan sonra) #3E3C3B (1920), #413934 (1280), #2B2926 (mobil) olur. O zeminlerde: tebesir 8.77 / 9.00 / 11.61 (slogan, ikincil dugme etiketi, AA) akkor 8.20 / 8.41 / 10.85 (sayac degeri, AA) kul-parlak 5.44 / 5.58 / 7.20 (sayac etiketi, AA) kul 4.02 / 4.13 / 5.32 (AA ALTI — bu yuzden bandda kul-parlak var) kenar 2.17 / 2.22 / 2.87 (AA ALTI — bu yuzden bandda ikincil dugme kendi zeminini alir: %72 zift uzerinde ayni cizgi 3.49 / 3.50 / 3.66 eder) Birincil dugme kendi kizil dolgusunu tasidigi icin gorselden bagimsizdir: beyaz / kizil = 5.65 (her yerde). Bant ortalamasi: karakter seritlerinin parlakligi ham gorselin ~%35'i olarak korunur (onceki tasarimda ~%27 idi ve mobilde gorsel tamamen sonmustu). ============================================================================ */ @import url("https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600&family=Big+Shoulders+Display:wght@600;800&family=IBM+Plex+Mono:wght@400;500&display=swap"); /* ============================================================================ 1) TOKENLAR ============================================================================ */ [data-theme="kizil"] { /* — zeminler (sicak notr; saf siyah ve mavi-siyah YASAK) — */ --kz-zift: #0b0b0c; /* sayfa zemini, modal ortusu */ --kz-dokme: #141416; /* levha/panel yuzeyi */ --kz-celik: #1c1d20; /* kabartma yuzey: ust bant, tablo basligi, aktif sekme */ --kz-oyuk: #08080a; /* ice gomulu kuyu: form alani, tablo govdesi, liste */ --kz-cizik: #2e3034; /* sac teli ayrac (dekoratif, metin tasimaz) */ --kz-kenar: #6b6f76; /* TUM kontrol kenarlari — dort zeminde de >= 3:1 */ /* — metin (dort zeminde de AA) — */ --kz-tebesir: #e8e6e2; /* govde, baslik, tablo hucresi */ --kz-kul: #9a9da3; /* ikincil: etiket, meta, tablo basligi */ --kz-toz: #8a8d93; /* EN SOLUK: tarih, telif, yardim satiri. Daha soluk ton YOK. */ /* `kul`un FOTOGRAF uzerindeki esdegeri. Levhada kul yeter (6.77) ama kahraman bandinda zemin bir JPEG'dir: olculdu, saft %90'a cikarildiktan SONRA bile en parlak piksel #3E3C3B ve orada kul yalniz 4.02 eder — 11px versal etiket icin AA'nin altidir. Bu ton ayni yerde 5.44 eder. YALNIZ gorsel uzerindeki ikincil metinde kullanilir; levhada kul kalir (hiyerarsi bozulmasin). */ --kz-kul-parlak: #b4b7bd; /* — isi olcegi (kirmizinin tamami) — */ --kz-tav: #6e1712; /* YALNIZ dolgu/vinyet/ocak parilti. Metin OLAMAZ. */ --kz-kizil: #c42b21; /* birincil dolgu, tehlike dolgusu. Metin OLAMAZ. */ --kz-kor: #ff5a36; /* METIN-GUVENLI kirmizi: bag, odak, yanan kenar, hata */ --kz-akkor: #ffd9a8; /* altinin yerine gecen renk: vurgu, 1. sira, pah isigi */ --kz-beyaz: #ffffff; /* YALNIZ kizil dolgu uzerindeki dugme etiketi */ /* — krallik (yalniz 1-2px sol isaret + 14px glif + 12px cip) — */ --kz-shinsoo: #ff7a4d; --kz-chunjo: #d8c97f; --kz-jinno: #6fb6e6; /* — durum (renge EK OLARAK form tasir: tam/yarim/kirik amblem) — */ --kz-basari: #7bd9a0; --kz-uyari: #f0b429; --kz-hata: #ff5a36; /* — isik ve geometri — */ --kz-isik-x: 18%; --kz-isik-y: 110%; --kz-pah-anit: 22px; /* centik derinligi RUTBE bildirir */ --kz-pah-levha: 12px; --kz-pah-kucuk: 6px; --kz-isit: 70ms cubic-bezier(0.2, 0, 0, 1); /* isinma hizli */ --kz-sogut: 520ms cubic-bezier(0.22, 1, 0.36, 1); /* soguma yavas */ --kz-cekic: 0.05; /* cekic izi + gren katmaninin gucu */ /* — olcu — */ --kz-kap: 1280px; --kz-yan: 16px; --kz-ray-sol: 208px; --kz-ray-sag: 300px; --kz-b1: 4px; --kz-b2: 8px; --kz-b3: 12px; --kz-b4: 16px; --kz-b5: 24px; --kz-b6: 32px; --kz-b7: 48px; --kz-b8: 64px; --kz-b9: 96px; --kz-bolum: 48px; /* — yazi tipleri — Big Shoulders Display latin-ext kapsamasi dogrulandi (Google Fonts API unicode-range: U+0100-02BA -> Ğ ğ Ş ş İ; latin dilimi U+0131 -> ı; Ç Ö Ü zaten U+0000-00FF icinde). Kapsama bozulursa zincirdeki Barlow Condensed ayni olcek ve kurallarla devralir, tema zarar gormez. */ --kz-baslik: "Big Shoulders Display", "Barlow Condensed", "Arial Narrow", system-ui, sans-serif; --kz-govde: "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --kz-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, monospace; /* — gorsel islem: kullanicinin kendi sanatina VARSAYILAN OLARAK dokunulmaz — */ --kz-hero-islem: none; /* — gren dokusu: dosya degil, gomulu feTurbulence. Yakin-siyah gradyanlarin bantlanmasini oldurur; sus degil, teknik zorunluluk. feColorMatrix SART: feTurbulence dort kanali da (ALFA dahil) rastgele uretir. Ham cikti `mix-blend-mode: overlay` ile bindirildiginde sayfayi gorunur bicimde KARARTIYORDU (gercek cihazda yakalandi: mobil kahraman bandi tamamen sondu). Matris RGB'yi parlakliga indirger ve alfayi 1'e sabitler -> gren artik %50 gri cevresinde salinan NOTR bir doku olur, overlay ortalamada zemini degistirmez. — */ --kz-gren-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0.33 0.33 0.33 0 0 0.33 0.33 0.33 0 0 0.33 0.33 0.33 0 0 0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E"); /* — pah cokgeni: sol-ust ve sag-alt kesilir, digerleri dik (kirilmis levha) — */ --kz-pah: polygon(var(--kz-p) 0, 100% 0, 100% calc(100% - var(--kz-p)), calc(100% - var(--kz-p)) 100%, 0 100%, 0 var(--kz-p)); --kz-p: var(--kz-pah-levha); background-color: var(--kz-zift); color: var(--kz-tebesir); font-family: var(--kz-govde); font-size: 15px; line-height: 1.65; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } @media (min-width: 768.02px) { [data-theme="kizil"] { --kz-yan: 24px; --kz-bolum: 64px; } } @media (min-width: 1200px) { [data-theme="kizil"] { --kz-yan: 32px; /* 96px genis ekranda "bolum ritmi" olarak tasarlanmisti; orta sutunda az bolum oldugunda (ozellikle haber/etkinlik yokken) bosluk gibi okunuyor — 64px'te ritim korunuyor, bosluk hissi gidiyor. */ --kz-bolum: 64px; } } /* Mobilde doku biraz daha hafif (kucuk ekranda gren daha baskin gorunur). */ @media (max-width: 768px) { [data-theme="kizil"] { --kz-cekic: 0.04; } } /* ============================================================================ 2) TABAN ============================================================================ */ [data-theme="kizil"] .kz-kok { position: relative; z-index: 0; isolation: isolate; /* ocak parilti ve gren katmanlari bu baglamda kalir */ display: flex; min-height: 100vh; flex-direction: column; overflow-x: clip; } /* OCAK PARILTISI — ates sol alttan yukselir. `background-attachment: fixed` KULLANILMAZ (mobil/Safari sorunlu); sabit konumlu kendi katmani vardir. Bu katman SAF gradyandir: karisim (blend) TASIMAZ. Sayfa genisliginde `mix-blend-mode: overlay` tasiyan sabit bir gren katmani DENENDI ve BIRAKILDI — gercek tarayicida tum icerigi gorunur bicimde karartiyordu (kahraman bandi sonuyor, govde metni gri kaliyordu). Bantlanma zaten yalniz genis yakin-siyah gradyanin ustunde FOTOGRAF oldugunda goze carpar; gren bu yuzden yalnizca kahraman bandinin kendi doku katmanina konur (bkz. .kz-hero-doku). */ [data-theme="kizil"] .kz-kok::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(120% 90% at var(--kz-isik-x) var(--kz-isik-y), var(--kz-tav) 0%, transparent 60%); opacity: 0.5; } [data-theme="kizil"] .kz-ana { position: relative; z-index: 1; flex: 1 1 auto; } /* ATLAMA BAGLANTISI (WCAG 2.4.1) — sekmeyle sayfanin ILK duragidir; odak almadan ekran disinda durur. GIZLEME `transform` ILE YAPILMAZ, `top` ile yapilir: transform tabanli gizleme, herhangi bir kural (or. bir azaltilmis hareket bloguu) transform'u sifirladigi anda baglantiyi kalici gorunur birakirdi. `top` boyle bir kurala carpmaz. z-index 100: yapiskan ust bandin (60) ve cekmecenin (71) uzerinde kalir. */ [data-theme="kizil"] .kz-atla { position: fixed; top: -80px; left: var(--kz-b3); z-index: 100; padding: 12px 20px; background: var(--kz-kizil); color: var(--kz-beyaz); font-family: var(--kz-mono); font-weight: 500; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; box-shadow: inset 0 0 0 1px var(--kz-kor); } [data-theme="kizil"] .kz-atla:focus, [data-theme="kizil"] .kz-atla:focus-visible { top: var(--kz-b3); color: var(--kz-beyaz); } /* Atlama hedefi odak alinca halka cizmez — icerigin kendisi zaten gorunur olur. */ [data-theme="kizil"] .kz-ana:focus { outline: none; } /* Odak halkasi — gecis suresi 0, ANINDA belirir; asla kaldirilmaz. Dis halka (--kz-zift) hem gorsel hem metal uzerinde ayrismasini saglar. */ [data-theme="kizil"] a:focus-visible, [data-theme="kizil"] button:focus-visible, [data-theme="kizil"] input:focus-visible, [data-theme="kizil"] select:focus-visible, [data-theme="kizil"] textarea:focus-visible, [data-theme="kizil"] summary:focus-visible, [data-theme="kizil"] [tabindex]:focus-visible { outline: 2px solid var(--kz-kor); outline-offset: 2px; box-shadow: 0 0 0 4px var(--kz-zift); transition: none; } [data-theme="kizil"] ::selection { background: var(--kz-kizil); color: var(--kz-beyaz); } [data-theme="kizil"] ::-webkit-scrollbar { width: 10px; height: 10px; } [data-theme="kizil"] ::-webkit-scrollbar-track { background: var(--kz-oyuk); } [data-theme="kizil"] ::-webkit-scrollbar-thumb { background: var(--kz-cizik); border: 2px solid var(--kz-oyuk); } [data-theme="kizil"] ::-webkit-scrollbar-thumb:hover { background: var(--kz-kenar); } [data-theme="kizil"] img { max-width: 100%; height: auto; } [data-theme="kizil"] hr { border: 0; border-top: 1px solid var(--kz-cizik); margin: var(--kz-b5) 0; } /* ============================================================================ 3) YAZI ============================================================================ */ [data-theme="kizil"] h1, [data-theme="kizil"] h2, [data-theme="kizil"] h3, [data-theme="kizil"] h4, [data-theme="kizil"] h5, [data-theme="kizil"] h6, [data-theme="kizil"] .kz-h1, [data-theme="kizil"] .kz-h2, [data-theme="kizil"] .kz-h3 { font-family: var(--kz-baslik); font-weight: 700; /* Sikisik versalde aralik ACILMAZ. */ letter-spacing: -0.01em; color: var(--kz-tebesir); text-wrap: balance; } [data-theme="kizil"] h1, [data-theme="kizil"] .kz-h1 { font-size: clamp(2.25rem, 1.4rem + 3.6vw, 4.25rem); font-weight: 800; line-height: 0.92; } [data-theme="kizil"] h2, [data-theme="kizil"] .kz-h2 { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem); line-height: 1.05; } [data-theme="kizil"] h3, [data-theme="kizil"] h4, [data-theme="kizil"] .kz-h3 { font-size: 1.25rem; font-weight: 600; line-height: 1.02; } [data-theme="kizil"] h5, [data-theme="kizil"] h6 { font-size: 1.0625rem; font-weight: 600; line-height: 1.15; } [data-theme="kizil"] p { margin: 0 0 var(--kz-b3); } [data-theme="kizil"] p:last-child { margin-bottom: 0; } [data-theme="kizil"] small, [data-theme="kizil"] .kz-kucuk { font-size: 13px; line-height: 1.55; color: var(--kz-toz); } [data-theme="kizil"] strong, [data-theme="kizil"] b { font-weight: 600; color: var(--kz-tebesir); } /* Bolum etiketi — mono, versal, genis aralik. Yalniz >= 13px etiket/baslikta. */ [data-theme="kizil"] .kz-etiket { display: block; font-family: var(--kz-mono); font-weight: 500; font-size: 12px; line-height: 1.4; letter-spacing: 0.18em; text-transform: uppercase; color: var(--kz-kul); } /* Etiket bir BAGLANTI oldugunda (ör. levha başlığındaki "Tümü") tiklama hedefi olur: WCAG 2.5.8 asgari 24x24. Duz metin etiketler etkilenmez. */ [data-theme="kizil"] a.kz-etiket { display: inline-flex; min-height: 24px; align-items: center; } [data-theme="kizil"] .kz-mono { font-family: var(--kz-mono); font-variant-numeric: tabular-nums; } [data-theme="kizil"] .kz-vurgu { color: var(--kz-akkor); } /* Oyma golgesi — YALNIZ >= 20px metinde. Kucuk metinde olculen kontrasti dusurdugu icin kesin yasak. */ [data-theme="kizil"] .kz-oyma { text-shadow: 0 1px 0 rgba(0, 0, 0, 0.85), 0 -1px 0 rgba(232, 230, 226, 0.07); } [data-theme="kizil"] a { color: var(--kz-kor); text-decoration: none; transition: color var(--kz-sogut); } [data-theme="kizil"] a:hover { color: var(--kz-akkor); transition: color var(--kz-isit); } /* ============================================================================ 4) KAPSAYICI VE KABUK IZGARASI ============================================================================ */ [data-theme="kizil"] .kz-kap { width: 100%; max-width: var(--kz-kap); margin-inline: auto; padding-inline: var(--kz-yan); } [data-theme="kizil"] .kz-kabuk { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--kz-b5); padding-block: var(--kz-b6) var(--kz-bolum); align-items: start; } [data-theme="kizil"] .kz-ray { display: flex; flex-direction: column; gap: var(--kz-b4); min-width: 0; } [data-theme="kizil"] .kz-icerik { display: flex; min-width: 0; flex-direction: column; gap: 0; } /* Bolumler arasi ritim `gap` yerine kardes marjiyle kurulur, cunku TEK bir istisna var: sunucu durumu seridi ile hemen ardindaki bolum (Sefer Defteri) BITISIK durur; ikisi tek bir pano gibi okunur. Diger bolumler normal araligi korur. */ [data-theme="kizil"] .kz-icerik > * + * { margin-top: var(--kz-bolum); } [data-theme="kizil"] .kz-icerik > .kz-serit + * { margin-top: var(--kz-b3); } /* <992px: tek sutun. Sol ray hamburger cekmeceye tasinir (Header cizer), sag ray icerigin ALTINA duser. */ [data-theme="kizil"] .kz-ray--sol { display: none; } @media (min-width: 992px) { [data-theme="kizil"] .kz-kabuk { grid-template-columns: var(--kz-ray-sol) minmax(0, 1fr); } [data-theme="kizil"] .kz-ray--sol { display: flex; position: sticky; top: var(--kz-b4); } [data-theme="kizil"] .kz-ray--sag { grid-column: 1 / -1; } } @media (min-width: 1200px) { [data-theme="kizil"] .kz-kabuk { grid-template-columns: var(--kz-ray-sol) minmax(0, 1fr) var(--kz-ray-sag); } [data-theme="kizil"] .kz-ray--sag { grid-column: auto; position: sticky; top: var(--kz-b4); } } /* ============================================================================ 5) YUZEY SOZLUGU — plaka / oyuk / kesik ---------------------------------------------------------------------------- EN KRITIK UYGULAMA KURALI: `clip-path` ASIL ELEMANA UYGULANMAZ. Zemini boyayan ::before katmanina uygulanir; asil eleman kirpilmamis kalir ki odak halkasi (outline) ve dis golge kesilmesin. tools/check-kizil-scope.py bunu denetler. ============================================================================ */ [data-theme="kizil"] .kz-plaka { position: relative; z-index: 0; display: block; padding: var(--kz-b5); color: var(--kz-tebesir); --kz-p: var(--kz-pah-levha); } [data-theme="kizil"] .kz-plaka::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--kz-dokme); clip-path: var(--kz-pah); /* Levha fizigi: ustte ak kor sizintisi, altta siyah, disarida derinlik. */ box-shadow: inset 0 1px 0 rgba(255, 217, 168, 0.1), inset 0 -1px 0 rgba(0, 0, 0, 0.6), inset 0 0 0 1px rgba(46, 48, 52, 0.9); filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.55)); transition: box-shadow var(--kz-sogut); } /* TEK ISIK KURALI: her levhanin YALNIZ isiga donuk ust kenari parlar. Dort kenardan esit parilti YASAK. */ [data-theme="kizil"] .kz-plaka::after { content: ""; position: absolute; left: var(--kz-p); right: 0; top: 0; height: 1px; z-index: -1; pointer-events: none; background: linear-gradient(90deg, transparent 0%, var(--kz-akkor) var(--kz-isik-x), transparent 74%); opacity: 0.3; } [data-theme="kizil"] .kz-plaka--anit { --kz-p: var(--kz-pah-anit); padding: var(--kz-b6); } [data-theme="kizil"] .kz-plaka--sik { padding: var(--kz-b4); } /* Imlec altindaki levha: isiga donuk pahda 1px sicak kenar yanar. */ [data-theme="kizil"] a.kz-plaka:hover::before, [data-theme="kizil"] .kz-plaka--etkilesim:hover::before { box-shadow: inset 0 0 0 1px var(--kz-kor), inset 0 1px 0 rgba(255, 217, 168, 0.16), inset 0 -1px 0 rgba(0, 0, 0, 0.6); transition: box-shadow var(--kz-isit); } /* Levha basligi: ust bant + mono versal etiket + altinda sac teli. */ [data-theme="kizil"] .kz-plaka-baslik { position: relative; margin: calc(-1 * var(--kz-b5)) calc(-1 * var(--kz-b5)) var(--kz-b4); padding: var(--kz-b3) var(--kz-b5); background: var(--kz-celik); border-bottom: 1px solid var(--kz-cizik); font-family: var(--kz-mono); font-weight: 500; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--kz-kul); display: flex; align-items: center; justify-content: space-between; gap: var(--kz-b3); } [data-theme="kizil"] .kz-plaka--sik > .kz-plaka-baslik { margin: calc(-1 * var(--kz-b4)) calc(-1 * var(--kz-b4)) var(--kz-b3); padding-inline: var(--kz-b4); } /* OYUK — ice gomulu kuyu. */ [data-theme="kizil"] .kz-oyuk { position: relative; background: var(--kz-oyuk); border: 1px solid var(--kz-cizik); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.7); } /* KESIK — tam genislik 1px isik bandi; bolum ayraci (catlak ucla). */ [data-theme="kizil"] .kz-kesik { display: block; width: 100%; height: 10px; border: 0; margin: 0; color: var(--kz-cizik); background: currentColor; -webkit-mask: url("/themes/kizil/catlak-1.svg") center / 100% 100% no-repeat; mask: url("/themes/kizil/catlak-1.svg") center / 100% 100% no-repeat; } [data-theme="kizil"] .kz-kesik--2 { -webkit-mask-image: url("/themes/kizil/catlak-2.svg"); mask-image: url("/themes/kizil/catlak-2.svg"); } [data-theme="kizil"] .kz-kesik--3 { -webkit-mask-image: url("/themes/kizil/catlak-3.svg"); mask-image: url("/themes/kizil/catlak-3.svg"); } /* PERCIN — temanin tek susu. YALNIZ kahraman levhasi ve bolum basliklarinda. */ [data-theme="kizil"] .kz-percin { background-image: radial-gradient(circle at 50% 40%, rgba(255, 217, 168, 0.55) 0 1.2px, rgba(0, 0, 0, 0.75) 2.2px, transparent 3px), radial-gradient(circle at 50% 40%, rgba(255, 217, 168, 0.55) 0 1.2px, rgba(0, 0, 0, 0.75) 2.2px, transparent 3px), radial-gradient(circle at 50% 40%, rgba(255, 217, 168, 0.55) 0 1.2px, rgba(0, 0, 0, 0.75) 2.2px, transparent 3px), radial-gradient(circle at 50% 40%, rgba(255, 217, 168, 0.55) 0 1.2px, rgba(0, 0, 0, 0.75) 2.2px, transparent 3px); background-repeat: no-repeat; background-size: 6px 6px; background-position: 12px 12px, calc(100% - 12px) 12px, 12px calc(100% - 12px), calc(100% - 12px) calc(100% - 12px); } /* CEKIC DOKUSU — yalniz kahraman + bolum basligi bantlarinda. Her panele DEGIL. */ [data-theme="kizil"] .kz-doku { position: relative; } [data-theme="kizil"] .kz-doku::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: var(--kz-cekic); background-image: var(--kz-gren-url), url("/themes/kizil/doku-cekic.svg"); background-size: 160px 160px, 256px 256px; background-blend-mode: soft-light, normal; } /* ============================================================================ 6) DUGME ============================================================================ */ [data-theme="kizil"] .kz-btn { position: relative; z-index: 0; display: inline-flex; align-items: center; justify-content: center; gap: var(--kz-b2); min-height: 44px; padding: 0 20px; border: 0; background: none; cursor: pointer; font-family: var(--kz-mono); font-weight: 500; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; color: var(--kz-tebesir); --kz-p: var(--kz-pah-kucuk); transition: color var(--kz-sogut), transform var(--kz-sogut); } [data-theme="kizil"] .kz-btn::before { content: ""; position: absolute; inset: 0; z-index: -1; clip-path: var(--kz-pah); box-shadow: inset 0 0 0 1px var(--kz-kenar); transition: box-shadow var(--kz-sogut), background-color var(--kz-sogut); } /* birincil — gorunum basina 1 adet. Kizil DOLGU, beyaz etiket (5.65 AA). 1px kor ic halka: dolgu/zemin siniri her zaman >= 3:1 (WCAG 1.4.11). */ [data-theme="kizil"] .kz-btn--birincil { color: var(--kz-beyaz); } [data-theme="kizil"] .kz-btn--birincil::before { background: var(--kz-kizil); box-shadow: inset 0 0 0 1px var(--kz-kor), inset 0 2px 0 -1px rgba(255, 217, 168, 0.45); } /* ikincil — saydam + kenar. */ [data-theme="kizil"] .kz-btn--ikincil::before { background: transparent; } /* hayalet — yalniz metin + soldan buyuyen alt cizgi. */ [data-theme="kizil"] .kz-btn--hayalet { min-height: 36px; padding-inline: 2px; color: var(--kz-kul); } [data-theme="kizil"] .kz-btn--hayalet::before { box-shadow: none; background: none; inset: auto 0 0 0; height: 1px; clip-path: none; background-color: var(--kz-kor); transform: scaleX(0); transform-origin: left center; transition: transform var(--kz-sogut); } [data-theme="kizil"] .kz-btn--hayalet:hover { color: var(--kz-tebesir); } [data-theme="kizil"] .kz-btn--hayalet:hover::before { transform: scaleX(1); transition: transform var(--kz-isit); } /* tehlike — kenar kizil, etiket kor. Dolgusu yalniz onay modalinde. */ [data-theme="kizil"] .kz-btn--tehlike { color: var(--kz-kor); } [data-theme="kizil"] .kz-btn--tehlike::before { box-shadow: inset 0 0 0 1px var(--kz-kizil); } /* isinma hizli */ [data-theme="kizil"] .kz-btn:hover { color: var(--kz-tebesir); transition: color var(--kz-isit); } [data-theme="kizil"] .kz-btn--birincil:hover { color: var(--kz-beyaz); } [data-theme="kizil"] .kz-btn:hover::before { box-shadow: inset 0 0 0 1px var(--kz-kor), inset 0 2px 0 -1px rgba(255, 217, 168, 0.45); transition: box-shadow var(--kz-isit); } [data-theme="kizil"] .kz-btn--hayalet:hover::before { box-shadow: none; } /* cekic darbesi */ [data-theme="kizil"] .kz-btn:active { transform: translateY(1px); } [data-theme="kizil"] .kz-btn[disabled], [data-theme="kizil"] .kz-btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; transform: none; } [data-theme="kizil"] .kz-btn[disabled]::before { background: var(--kz-celik); box-shadow: inset 0 0 0 1px var(--kz-cizik); } [data-theme="kizil"] .kz-btn--blok { display: flex; width: 100%; } [data-theme="kizil"] .kz-btn--kucuk { min-height: 34px; padding-inline: 12px; font-size: 12px; } /* Kahraman bandinda dugmeler BIR olcek yukaridadir. Gerekce (olculdu): logo orada 315px yuksekliginde duruyor; yanindaki 44px'lik govde olcusu ve 111px genislik cuce kaliyordu (kullanicinin ilk izlenimi). Olcu SADECE bandda buyur — sayfa govdesindeki 44px govde olcusu degismez, yani kirmizi/ agirlik butcesi bozulmaz. */ [data-theme="kizil"] .kz-hero-eylem .kz-btn { min-height: 52px; padding-inline: 30px; font-size: 14px; letter-spacing: 0.1em; } /* KIMLIK YIGININDAKI IKINCIL DUGME KENDI ZEMININI ALIR (WCAG 1.4.11). Sayfa govdesinde ikincil dugme SAYDAMDIR ve levhanin uzerinde 1px `kenar` cizgisiyle taninir — orada zemin BILINEN bir renktir (dokme uzerinde 3.65). `.kz-hero-eylem` ise iki yerde de bir FOTOGRAFIN uzerinde durur ve dugmenin sinirini gosteren TEK sey o 1px cizgidir. Olculdu (en parlak piksel, tum katmanlar uygulandiktan sonra): bandin icinde (kahraman JPEG, saft %90) -> zemin #3E3C3B, kenar 2.17 AA ALTI bandin altinda (sayfa zemini JPEG) -> zemin #371C18, kenar 3.10 kil payi Cozum kenari parlatmak DEGIL — o zaman ikincil dugme birincil kadar bagirirdi — dugmeye kendi zeminini vermektir. %72 zift uzerinde ayni `kenar` cizgisi her iki konumda da 3.49 / 3.72 eder, etiket 14.1 / 14.3. Kural `.kz-hero-eylem`e baglidir, yani dugme yigini banttan asagi tasinsa da (ki tasindi) korumasi birlikte gelir; sayfa govdesindeki ikincil dugmeler saydam kalir, dil bozulmaz. */ [data-theme="kizil"] .kz-hero-eylem .kz-btn--ikincil::before { background: rgba(11, 11, 12, 0.72); } /* Kare demir dugme (sosyal baglantilar) */ [data-theme="kizil"] .kz-kare { position: relative; z-index: 0; display: inline-flex; width: 38px; height: 38px; align-items: center; justify-content: center; color: var(--kz-kul); font-size: 15px; --kz-p: var(--kz-pah-kucuk); transition: color var(--kz-sogut); } [data-theme="kizil"] .kz-kare::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--kz-celik); clip-path: var(--kz-pah); box-shadow: inset 0 0 0 1px var(--kz-cizik); transition: box-shadow var(--kz-sogut); } [data-theme="kizil"] .kz-kare:hover { color: var(--kz-tebesir); transition: color var(--kz-isit); } [data-theme="kizil"] .kz-kare:hover::before { box-shadow: inset 0 0 0 1px var(--kz-kor); transition: box-shadow var(--kz-isit); } /* ============================================================================ 7) FORM ALANI ============================================================================ */ [data-theme="kizil"] .kz-grup { display: flex; flex-direction: column; gap: var(--kz-b2); } [data-theme="kizil"] .kz-alan-etiket { font-family: var(--kz-mono); font-weight: 500; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--kz-kul); } [data-theme="kizil"] .kz-alan { position: relative; display: block; width: 100%; height: 44px; padding: 0 14px; border: 1px solid var(--kz-kenar); border-radius: 0; background: var(--kz-oyuk); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.7); color: var(--kz-tebesir); font-family: var(--kz-govde); font-size: 15px; line-height: 1.4; outline: none; transition: border-color var(--kz-sogut), box-shadow var(--kz-sogut); } [data-theme="kizil"] textarea.kz-alan { height: auto; min-height: 120px; padding: 12px 14px; resize: vertical; } [data-theme="kizil"] .kz-alan::placeholder { color: var(--kz-toz); opacity: 1; } /* Odaklanan alanin SOL kenari 2px kor bara doner (70ms). */ [data-theme="kizil"] .kz-alan:focus, [data-theme="kizil"] .kz-alan:focus-visible { border-color: var(--kz-kenar); box-shadow: inset 2px 0 0 0 var(--kz-kor), inset 0 1px 2px rgba(0, 0, 0, 0.7); transition: box-shadow var(--kz-isit); } [data-theme="kizil"] .kz-alan[aria-invalid="true"], [data-theme="kizil"] .kz-alan--hata { border-color: var(--kz-kor); } [data-theme="kizil"] .kz-yardim { font-size: 13px; line-height: 1.55; color: var(--kz-toz); } [data-theme="kizil"] .kz-alan-hata { display: flex; align-items: center; gap: var(--kz-b2); font-size: 13px; color: var(--kz-kor); } /* Durum amblemi — renge EK OLARAK form. */ [data-theme="kizil"] .kz-amblem { display: inline-block; width: 1em; height: 1em; flex: 0 0 auto; background-color: currentColor; -webkit-mask: url("/themes/kizil/amblem-tam.svg") center / contain no-repeat; mask: url("/themes/kizil/amblem-tam.svg") center / contain no-repeat; } [data-theme="kizil"] .kz-amblem--yarim { -webkit-mask-image: url("/themes/kizil/amblem-yarim.svg"); mask-image: url("/themes/kizil/amblem-yarim.svg"); } [data-theme="kizil"] .kz-amblem--kirik { -webkit-mask-image: url("/themes/kizil/amblem-kirik.svg"); mask-image: url("/themes/kizil/amblem-kirik.svg"); } /* ============================================================================ 8) UYARI KUTUSU ============================================================================ */ [data-theme="kizil"] .kz-uyari-kutu { display: flex; align-items: flex-start; gap: var(--kz-b3); padding: var(--kz-b3) var(--kz-b4); background: var(--kz-celik); border-left: 3px solid var(--kz-kenar); color: var(--kz-tebesir); font-size: 14px; } [data-theme="kizil"] .kz-uyari-kutu .kz-amblem { margin-top: 2px; font-size: 16px; } [data-theme="kizil"] .kz-uyari-kutu--basari { border-left-color: var(--kz-basari); color: var(--kz-basari); } [data-theme="kizil"] .kz-uyari-kutu--uyari { border-left-color: var(--kz-uyari); color: var(--kz-uyari); } [data-theme="kizil"] .kz-uyari-kutu--hata { border-left-color: var(--kz-hata); color: var(--kz-hata); } [data-theme="kizil"] .kz-uyari-kutu--bilgi { border-left-color: var(--kz-jinno); color: var(--kz-jinno); } [data-theme="kizil"] .kz-uyari-kutu > div { color: var(--kz-tebesir); } [data-theme="kizil"] .kz-uyari-baslik { font-family: var(--kz-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: inherit; } /* ============================================================================ 9) SEKME ============================================================================ */ [data-theme="kizil"] .kz-sekmeler { display: flex; gap: var(--kz-b1); border-bottom: 1px solid var(--kz-cizik); overflow-x: auto; scrollbar-width: thin; } [data-theme="kizil"] .kz-sekme { position: relative; flex: 0 0 auto; padding: 10px 14px; border: 0; background: none; cursor: pointer; font-family: var(--kz-mono); font-weight: 500; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--kz-kul); transition: color var(--kz-sogut), background-color var(--kz-sogut); } [data-theme="kizil"] .kz-sekme::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--kz-kor); /* yamuk centik — hap YOK */ clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%); transform: scaleX(0); transform-origin: center bottom; transition: transform 120ms cubic-bezier(0.2, 0, 0, 1); } [data-theme="kizil"] .kz-sekme:hover { color: var(--kz-tebesir); transition: color var(--kz-isit); } [data-theme="kizil"] .kz-sekme[aria-selected="true"], [data-theme="kizil"] .kz-sekme.kz-etkin { color: var(--kz-tebesir); background: var(--kz-celik); } [data-theme="kizil"] .kz-sekme[aria-selected="true"]::after, [data-theme="kizil"] .kz-sekme.kz-etkin::after { transform: scaleX(1); } /* ============================================================================ 10) TABLO (siralama) ============================================================================ */ [data-theme="kizil"] .kz-tablo-kap { position: relative; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; background: var(--kz-oyuk); border: 1px solid var(--kz-cizik); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.7); } /* Sag kenarda maskeli soluma ipucu: "burada devam ediyor". */ [data-theme="kizil"] .kz-tablo-kap::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 28px; pointer-events: none; background: linear-gradient(90deg, transparent, var(--kz-oyuk)); } [data-theme="kizil"] .kz-tablo { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 14px; } [data-theme="kizil"] .kz-tablo thead th { position: sticky; top: 0; z-index: 1; padding: 10px 14px; background: var(--kz-celik); border-bottom: 1px solid var(--kz-cizik); text-align: left; font-family: var(--kz-mono); font-weight: 500; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--kz-kul); white-space: nowrap; } [data-theme="kizil"] .kz-tablo tbody td { padding: 11px 14px; border-bottom: 1px solid var(--kz-cizik); color: var(--kz-tebesir); vertical-align: middle; } /* Zebra YOK; satir ayraci tek sac teli. */ [data-theme="kizil"] .kz-tablo tbody tr:last-child td { border-bottom: 0; } [data-theme="kizil"] .kz-tablo tbody tr { transition: background-color var(--kz-sogut); } [data-theme="kizil"] .kz-tablo tbody tr:hover { background: rgba(28, 29, 32, 0.75); transition: background-color var(--kz-isit); } [data-theme="kizil"] .kz-sira { font-family: var(--kz-mono); font-variant-numeric: tabular-nums; color: var(--kz-kul); width: 1%; white-space: nowrap; } /* MADALYA YOK, ISI VAR. Ilk uc sirada sol kenar sogur; renge FORM eslik eder. */ [data-theme="kizil"] .kz-tablo tbody tr.kz-rutbe-1 td:first-child { box-shadow: inset 2px 0 0 0 var(--kz-akkor); } [data-theme="kizil"] .kz-tablo tbody tr.kz-rutbe-2 td:first-child { box-shadow: inset 2px 0 0 0 var(--kz-kor); } [data-theme="kizil"] .kz-tablo tbody tr.kz-rutbe-3 td:first-child { box-shadow: inset 2px 0 0 0 var(--kz-tav); } [data-theme="kizil"] .kz-rutbe-1 .kz-sira { color: var(--kz-akkor); } [data-theme="kizil"] .kz-rutbe-2 .kz-sira { color: var(--kz-kor); } [data-theme="kizil"] .kz-cevron { display: inline-block; width: 12px; height: 12px; margin-right: 6px; vertical-align: -1px; background-color: currentColor; -webkit-mask: url("/themes/kizil/rutbe-1.svg") center / contain no-repeat; mask: url("/themes/kizil/rutbe-1.svg") center / contain no-repeat; } [data-theme="kizil"] .kz-cevron--2 { -webkit-mask-image: url("/themes/kizil/rutbe-2.svg"); mask-image: url("/themes/kizil/rutbe-2.svg"); } [data-theme="kizil"] .kz-cevron--3 { -webkit-mask-image: url("/themes/kizil/rutbe-3.svg"); mask-image: url("/themes/kizil/rutbe-3.svg"); } /* Krallik: ORIJINAL oyun bayragi (/images/empire/N.png, diger temalarla ortak; 10.09.2026 kullanici karari — markasiz glif "Metin2 gibi durmuyor"). 22x14, ince koyu cerceve + 1px cizik hale; bayrak temanin tek "yuzey dolgulu" isaretidir, cunku oyunun kendi simgesidir. */ [data-theme="kizil"] .kz-krallik { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; line-height: 0; white-space: nowrap; } [data-theme="kizil"] .kz-krallik--1 { color: var(--kz-shinsoo); } [data-theme="kizil"] .kz-krallik--2 { color: var(--kz-chunjo); } [data-theme="kizil"] .kz-krallik--3 { color: var(--kz-jinno); } [data-theme="kizil"] .kz-bayrak { display: block; width: 22px; height: 14px; object-fit: cover; border: 1px solid rgba(0, 0, 0, 0.6); box-shadow: 0 0 0 1px var(--kz-cizik); } [data-theme="kizil"] .kz-krallik-ad { font-family: var(--kz-mono); font-size: 12px; line-height: 1; letter-spacing: 0.06em; } /* <=600px: ad sutunu yapiskan, sutun sayisi 5 -> 3 (sira, ad, seviye). */ @media (max-width: 600px) { [data-theme="kizil"] .kz-tablo { min-width: 0; } [data-theme="kizil"] .kz-tablo .kz-gizle-dar { display: none; } [data-theme="kizil"] .kz-tablo .kz-ad { position: sticky; left: 0; background: var(--kz-oyuk); } } /* ============================================================================ 11) ROZET / CIP ============================================================================ */ [data-theme="kizil"] .kz-cip { position: relative; z-index: 0; display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; font-family: var(--kz-mono); font-weight: 500; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--kz-kul); --kz-p: var(--kz-pah-kucuk); } [data-theme="kizil"] .kz-cip::before { content: ""; position: absolute; inset: 0; z-index: -1; clip-path: var(--kz-pah); box-shadow: inset 0 0 0 1px currentColor; opacity: 0.55; } [data-theme="kizil"] .kz-cip--update { color: var(--kz-jinno); } [data-theme="kizil"] .kz-cip--event { color: var(--kz-akkor); } [data-theme="kizil"] .kz-cip--maintenance { color: var(--kz-uyari); } [data-theme="kizil"] .kz-cip--announcement { color: var(--kz-kor); } /* pill — TEK yuvarlak istisna; yalniz durum. */ [data-theme="kizil"] .kz-pill { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border: 1px solid currentColor; border-radius: 999px; font-family: var(--kz-mono); font-size: 12px; color: var(--kz-kul); } /* Canli gostergesi — sayfadaki TEK dongusel animasyon. */ [data-theme="kizil"] .kz-canli { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--kz-kor); animation: kz-nabiz 2.4s ease-in-out infinite; } /* Canli blogu: etiket ustte, DEGER altta. Deger onceden yalniz `kz-gizli` icindeydi; goren kullanici sunucunun ayakta oldugunu okuyamiyordu. */ [data-theme="kizil"] .kz-canli-blok { display: flex; min-width: 0; flex-direction: column; gap: var(--kz-b1); } [data-theme="kizil"] .kz-canli-deger { display: flex; align-items: center; gap: var(--kz-b2); font-family: var(--kz-mono); font-size: 15px; line-height: 1.3; color: var(--kz-akkor); } @keyframes kz-nabiz { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } } /* ============================================================================ 12) SAYFALAYICI ============================================================================ */ [data-theme="kizil"] .kz-sayfalayici { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--kz-b1); list-style: none; padding: 0; margin: 0; } [data-theme="kizil"] .kz-sayfa { position: relative; z-index: 0; display: inline-flex; min-width: 40px; height: 40px; align-items: center; justify-content: center; padding: 0 8px; border: 0; background: none; cursor: pointer; font-family: var(--kz-mono); font-variant-numeric: tabular-nums; font-size: 13px; color: var(--kz-kul); --kz-p: var(--kz-pah-kucuk); } [data-theme="kizil"] .kz-sayfa::before { content: ""; position: absolute; inset: 0; z-index: -1; clip-path: var(--kz-pah); box-shadow: inset 0 0 0 1px var(--kz-kenar); } [data-theme="kizil"] .kz-sayfa[aria-current="page"] { color: var(--kz-beyaz); } [data-theme="kizil"] .kz-sayfa[aria-current="page"]::before { background: var(--kz-kizil); box-shadow: inset 0 0 0 1px var(--kz-kor); } /* ============================================================================ 13) YUVA / ISKELET / BOS DURUM / MODAL ============================================================================ */ /* Yabanci icerik cercevesi (Turnstile, YouTube): iframe'e clip-path/filter YOK. */ [data-theme="kizil"] .kz-yuva { position: relative; padding: var(--kz-b3); background: var(--kz-dokme); box-shadow: inset 0 0 0 1px var(--kz-cizik); } [data-theme="kizil"] .kz-yuva-ic { background: var(--kz-oyuk); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.7); } [data-theme="kizil"] .kz-yuva--oran { padding: 0; } [data-theme="kizil"] .kz-yuva--oran .kz-yuva-ic { aspect-ratio: 16 / 9; } [data-theme="kizil"] .kz-yuva--oran iframe { display: block; width: 100%; height: 100%; border: 0; } /* Parilti supurmesi YOK (AI refleksi). Sabit oyuk blok. */ [data-theme="kizil"] .kz-iskelet { display: block; width: 100%; height: 1em; background: var(--kz-oyuk); box-shadow: inset 0 0 0 1px var(--kz-cizik); } [data-theme="kizil"] .kz-bos { display: flex; flex-direction: column; align-items: center; gap: var(--kz-b3); padding: var(--kz-b6) var(--kz-b4); text-align: center; color: var(--kz-toz); } [data-theme="kizil"] .kz-bos-glif { width: 120px; height: 10px; background-color: var(--kz-cizik); -webkit-mask: url("/themes/kizil/catlak-2.svg") center / 100% 100% no-repeat; mask: url("/themes/kizil/catlak-2.svg") center / 100% 100% no-repeat; } /* Baslik / metin / ipucu TEK blokta durur: aralarindaki bosluk 4px'tir, yoksa `.kz-bos`un 12px'lik gap'i uc satiri birbirinden kopuk uc paragraf gosterirdi. `max-width` olcusu okunabilirlik icin: 46ch'ten uzun satir bos durumda yorar. */ [data-theme="kizil"] .kz-bos-metin { display: flex; max-width: 46ch; flex-direction: column; gap: var(--kz-b1); } /* Genel `p` kurali 12px alt bosluk verir; burada bosluk `gap`ten gelir. */ [data-theme="kizil"] .kz-bos-metin p { margin: 0; } [data-theme="kizil"] .kz-bos-baslik { font-family: var(--kz-baslik); font-size: 18px; font-weight: 600; /* Sikisik versalde aralik ACILMAZ (baslik kuralinin aynisi). */ letter-spacing: -0.01em; line-height: 1.15; color: var(--kz-tebesir); } [data-theme="kizil"] .kz-bos-ipucu { font-size: 13px; line-height: 1.55; color: var(--kz-kul); } /* Dar raylardaki (300px) bos durum: glif kucultulur, dikey dolgu yariya iner. */ [data-theme="kizil"] .kz-bos--ince { padding: var(--kz-b4) 0; gap: var(--kz-b2); } [data-theme="kizil"] .kz-bos--ince .kz-bos-glif { width: 84px; height: 8px; } /* BOS LEVHA — bir bolumun TAMAMI bos oldugunda kullanilir (or. haber yokken anasayfanin orta sutunu). Cipla­k `.kz-bos` orada sutunu "eksik" gosteriyordu (kullanicinin ilk izlenimi); cerceve boslugu KASITLI kilar: bos ama dovulmus bir levha. ASGARI YUKSEKLIK (208px) KALDIRILDI: kutu artik icerigiyle orantili buyur. Tek satirlik bir bos durum icin yarim ekran bosluk birakmak, "yeni acilmis" degil "yuklenememis" hissi veriyordu. */ [data-theme="kizil"] .kz-bos--levha { position: relative; z-index: 0; justify-content: center; padding: var(--kz-b6) var(--kz-b5); --kz-p: var(--kz-pah-levha); } [data-theme="kizil"] .kz-bos--levha::before { content: ""; position: absolute; inset: 0; z-index: -1; clip-path: var(--kz-pah); background: var(--kz-oyuk); box-shadow: inset 0 0 0 1px var(--kz-cizik); } [data-theme="kizil"] .kz-bos--levha .kz-bos-glif { width: 168px; } [data-theme="kizil"] .kz-modal-ortu { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; padding: var(--kz-b4); /* blur YOK */ background: rgba(11, 11, 12, 0.92); } [data-theme="kizil"] .kz-modal { width: 100%; max-width: 520px; --kz-p: var(--kz-pah-anit); } /* ============================================================================ 14) UST BANT (Header) ============================================================================ */ [data-theme="kizil"] .kz-ust { position: sticky; top: 0; z-index: 60; background: rgba(11, 11, 12, 0.86); border-bottom: 1px solid var(--kz-cizik); backdrop-filter: saturate(140%) blur(6px); } [data-theme="kizil"] .kz-ust-ic { display: flex; min-height: 62px; align-items: center; gap: var(--kz-b4); } [data-theme="kizil"] .kz-ust-logo { display: inline-flex; align-items: center; flex: 0 0 auto; /* Gorsel 34px kalir; tiklama hedefi 44px olur (ust bant zaten daha yuksek). */ min-height: 44px; } [data-theme="kizil"] .kz-ust-logo img { display: block; width: auto; height: 34px; } /* KIRACININ LOGOSU YOKKEN — isaret + ad. Burada eskiden bir baska kiracinin logo PNG'si duruyordu. Yedek artik uretilmis ors isareti (maske; boyle boyanabilir, olsaydi currentColor calismaz ve isaret siyah cikardi) ve kiracinin KENDI adidir. Yukseklik 34px'te sabit kalir, yani logolu ve logosuz bantlarin olcusu ayni olur (yerlesim kaymasi yok). */ [data-theme="kizil"] .kz-ust-isaret { flex: 0 0 auto; width: 26px; height: 26px; background-color: var(--kz-kor); -webkit-mask: url("/themes/kizil/logo-isaret.svg") center / contain no-repeat; mask: url("/themes/kizil/logo-isaret.svg") center / contain no-repeat; } [data-theme="kizil"] .kz-ust-ad { margin-inline-start: 9px; max-width: 22ch; overflow: hidden; font-family: var(--kz-baslik); font-weight: 800; font-size: 19px; line-height: 34px; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; text-overflow: ellipsis; color: var(--kz-tebesir); } [data-theme="kizil"] .kz-nav { display: none; align-items: center; gap: 2px; margin-inline-start: auto; } [data-theme="kizil"] .kz-nav-bag { position: relative; padding: 8px 12px; font-family: var(--kz-mono); font-weight: 500; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--kz-kul); transition: color var(--kz-sogut); } [data-theme="kizil"] .kz-nav-bag::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 2px; height: 2px; background: var(--kz-kor); transform: scaleX(0); transform-origin: left center; transition: transform 120ms cubic-bezier(0.2, 0, 0, 1); } [data-theme="kizil"] .kz-nav-bag:hover { color: var(--kz-tebesir); transition: color var(--kz-isit); } [data-theme="kizil"] .kz-nav-bag[aria-current="page"] { color: var(--kz-tebesir); } [data-theme="kizil"] .kz-nav-bag[aria-current="page"]::after { transform: scaleX(1); } [data-theme="kizil"] .kz-ust-sag { display: flex; align-items: center; gap: var(--kz-b2); margin-inline-start: auto; } @media (min-width: 992px) { [data-theme="kizil"] .kz-nav { display: flex; } [data-theme="kizil"] .kz-ust-sag { margin-inline-start: var(--kz-b3); } [data-theme="kizil"] .kz-cekmece-ac { display: none; } } [data-theme="kizil"] .kz-dil { display: inline-flex; gap: 0; } [data-theme="kizil"] .kz-dil button { padding: 6px 8px; border: 0; background: none; cursor: pointer; font-family: var(--kz-mono); font-size: 12px; letter-spacing: 0.1em; color: var(--kz-toz); transition: color var(--kz-sogut); } [data-theme="kizil"] .kz-dil button[aria-pressed="true"] { color: var(--kz-akkor); } /* Mobil cekmece */ [data-theme="kizil"] .kz-cekmece-ortu { position: fixed; inset: 0; z-index: 70; background: rgba(11, 11, 12, 0.92); } [data-theme="kizil"] .kz-cekmece { position: fixed; inset: 0 auto 0 0; z-index: 71; width: min(300px, 86vw); padding: var(--kz-b5) var(--kz-b4); background: var(--kz-dokme); border-right: 1px solid var(--kz-cizik); overflow-y: auto; } [data-theme="kizil"] .kz-cekmece-liste { display: flex; flex-direction: column; gap: 2px; list-style: none; padding: 0; margin: var(--kz-b5) 0 0; } [data-theme="kizil"] .kz-cekmece-liste a { display: block; padding: 12px 10px; border-left: 2px solid transparent; font-family: var(--kz-mono); font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--kz-kul); } [data-theme="kizil"] .kz-cekmece-liste a:hover, [data-theme="kizil"] .kz-cekmece-liste a[aria-current="page"] { border-left-color: var(--kz-kor); color: var(--kz-tebesir); } /* ============================================================================ 15) KAHRAMAN BANDI ---------------------------------------------------------------------------- Katman sirasi: ocak (gorsel yoksa) -> gorsel -> dikey perde -> icerik safti -> cekic dokusu -> icerik. Olculen alfa degerleri asagida AYNEN kullanilir. ============================================================================ */ [data-theme="kizil"] .kz-hero { position: relative; z-index: 0; display: flex; /* Bant KISALTILDI (88vh -> 72vh): logo ust bantta, eylem+sayac etekte, ve asil sayfa (menu / sunucu durumu / haberler / giris) ilk ekranda gorunmeye baslar. Kullanici geri bildirimi: "logoyu yukari al, kayit/indir ve sayaclar assagi, asagidaki sayfa hemen logonun altinda dursun". */ min-height: 520px; height: min(72vh, 760px); align-items: stretch; overflow: hidden; background-color: var(--kz-zift); } /* 0-gorsel dayanagi: ocak.svg her zaman en altta durur. Kahraman gorseli yuklenemezse (ya da hic yoksa) bant yine dolu gorunur. */ [data-theme="kizil"] .kz-hero-ocak { position: absolute; inset: 0; z-index: 0; background-color: var(--kz-tav); -webkit-mask: url("/themes/kizil/ocak.svg") 50% 100% / cover no-repeat; mask: url("/themes/kizil/ocak.svg") 50% 100% / cover no-repeat; } /* KAHRAMAN GORSELI KIRACIYA AITTIR, TEMAYA DEGIL. Once burada `url("/themes/kizil/bg-hero-1920.jpg")` yaziyordu; o dosya BIR kiracinin (Lusifer2) sanatiydi. Tema cok kiracili oldugu icin, kizil'i secen ikinci musteri birincinin karakterlerini goruyordu. Gorsel `site_hero_image_url` ayarina tasindi; adres Shell.tsx tarafindan `.kz-kok` uzerine `--kz-hero-url` olarak satir ici yazilir (deger CSS'e girmeden once lib/branding.tsx icindeki cssUrl() suzgecinden gecer). Ayar bosken degisken TANIMSIZDIR ve var()'in yedegi devreye girer: tools/gen-kizil-assets.py ile URETILMIS, markasiz zemin-ocak.svg. Yani "0 gorselle bant tam ve bitmis gorunur" kabul kriteri korunur, ustelik artik hicbir kiracinin sanati sizmadan. */ [data-theme="kizil"] .kz-hero-gorsel { position: absolute; inset: 0; z-index: 1; background-image: var(--kz-hero-url, url("/themes/kizil/zemin-ocak.svg")); background-size: cover; background-position: 50% 30%; /* background-attachment: fixed KULLANILMAZ. */ filter: var(--kz-hero-islem); } /* Dikey perde — olculen duraklar. */ [data-theme="kizil"] .kz-hero-perde { position: absolute; inset: 0; z-index: 2; background: linear-gradient( 180deg, rgba(11, 11, 12, 0.78) 0%, rgba(11, 11, 12, 0.12) 26%, rgba(11, 11, 12, 0.1) 60%, rgba(11, 11, 12, 1) 100% ); } /* Icerik safti — metnin oturdugu golge sutunu. Karakterlerin uzerine binmez: kenarlari %22 ve %78'de sonumlenir, cekirdegi %34-%66 arasidir. */ [data-theme="kizil"] .kz-hero-saft { position: absolute; inset: 0; z-index: 3; background: linear-gradient( 90deg, rgba(11, 11, 12, 0) 0%, rgba(11, 11, 12, 0.58) 22%, rgba(11, 11, 12, 0.9) 34%, rgba(11, 11, 12, 0.9) 66%, rgba(11, 11, 12, 0.58) 78%, rgba(11, 11, 12, 0) 100% ); /* Cekirdek %86 -> %90 (kenarlar %55 -> %58). Gerekce olculdu: %86'da metin sutununun EN PARLAK pikseli #464341 kaliyordu ve orada `kul` yalniz 3.59 ediyordu. %90'da o piksel #3E3C3B olur. Karakter seritleri (%0-30 / %72-100) sonumleme duraklari degismedigi icin BU DEGISIKLIKTEN ETKILENMEZ. */ } [data-theme="kizil"] .kz-hero-doku { position: absolute; inset: 0; z-index: 4; pointer-events: none; /* Cekic izi + gren TEK elemanda; karisim `background-blend-mode` ile ELEMANIN KENDI katmanlari arasinda olur — sayfayi kapsayan bir karisim grubu kurulmaz. `mix-blend-mode` bilerek kullanilmaz: sabit/genis karisim katmanlari bu projede gercek tarayicida yanlis birlestiriliyordu. */ opacity: var(--kz-cekic); background-image: var(--kz-gren-url), url("/themes/kizil/doku-cekic.svg"); background-size: 160px 160px, 256px 256px; background-blend-mode: soft-light, normal; } [data-theme="kizil"] .kz-hero-ic { position: relative; z-index: 5; display: flex; width: 100%; flex-direction: column; align-items: center; justify-content: space-between; /* logo yukari, eylem+sayac etege */ gap: var(--kz-b5); padding-block: var(--kz-b6) var(--kz-b5); text-align: center; } /* Kutu kenarlari %30 ve %72 cizgilerini GECMEZ: 40vw genislik, ortalanmis. */ [data-theme="kizil"] .kz-hero-kutu { display: flex; width: clamp(320px, 40vw, 820px); max-width: 100%; flex-direction: column; align-items: center; justify-content: space-between; flex: 1 1 auto; gap: var(--kz-b5); } /* Kahraman basligi HER ZAMAN

'dir (bkz. Shell.tsx). Icinde ya logo gorseli ya da oyma metin durur; h1 yalniz TASIYICIDIR, kendi bir olcu dayatmaz — bu yuzden marji sifirlanir ve genislik tam birakilir, olcuyu icindeki oge verir. Metin yedegi h1'in font-family/weight/size/color degerlerini kalitim yoluyla alir. */ [data-theme="kizil"] .kz-hero-baslik { margin: 0; width: 100%; } [data-theme="kizil"] .kz-hero-logo { display: block; width: min(560px, 100%); height: auto; /* h1 artik tam genislikte oldugu icin ortalama bu blokta yapilir. */ margin-inline: auto; } /* YERLESIM KAYMASI (CLS) — kiraci logosu. Temanin kendi logosunda uzerinde width/height vardir, kiracinin yukledigi logoda YOKTUR: dogal olculer derleme zamaninda bilinmez. `height: auto` ile kutu goruntu inene kadar 0px yuksekliktedir, sonra 315px'e sicrar ve altindaki slogan + cagri seridi + sayaclar asagi kayar. Kutuyu 16/9'a sabitlemek kaymayi sifirlar: 16/9 bir logo birebir ayni cizilir, baska oranli bir logo da `contain` sayesinde ESNETILMEDEN kutunun icine ortalanir. */ [data-theme="kizil"] .kz-hero-logo--kiraci { aspect-ratio: 16 / 9; object-fit: contain; } [data-theme="kizil"] .kz-hero-slogan { margin: 0; max-width: 46ch; color: var(--kz-tebesir); font-size: 16px; line-height: 1.55; } [data-theme="kizil"] .kz-hero-eylem { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--kz-b3); } /* Ince sayac seridi — kahraman bandinin eteginde. */ [data-theme="kizil"] .kz-hero-sayac { display: flex; flex-wrap: wrap; justify-content: center; gap: 0; border-top: 1px solid rgba(46, 48, 52, 0.9); /* Sayac seridi bandin ETEGIDIR, kimlik yiginin bir satiri degil. Kutunun tek duze 24px ritmi onu logoya yapistiriyordu (kullanicinin ilk izlenimi): ustunde 24 + 24 = 48px sessizlik, cizginin altinda 16px nefes birakilir. */ margin-top: var(--kz-b5); padding-top: var(--kz-b4); width: 100%; } [data-theme="kizil"] .kz-sayac { display: flex; min-width: 0; flex: 1 1 0; flex-direction: column; align-items: center; gap: 2px; padding: 0 var(--kz-b3); border-left: 1px solid rgba(46, 48, 52, 0.9); } [data-theme="kizil"] .kz-sayac:first-child { border-left: 0; } [data-theme="kizil"] .kz-sayac-deger { font-family: var(--kz-mono); font-variant-numeric: tabular-nums; font-size: 20px; line-height: 1.1; color: var(--kz-akkor); } [data-theme="kizil"] .kz-sayac-etiket { font-family: var(--kz-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; /* 11px versal ikincil metin, bir FOTOGRAFIN uzerinde. Olculdu (en parlak piksel): kahraman bandinin icinde (saft %90) -> kul 4.02 AA ALTI, kul-parlak 5.44 bandin altindaki giris seridinde -> kul 5.76 gecer, kul-parlak 7.79 Yigin banttan asagi tasindi ama token DEGISMEZ: sayac seridi ikisinin arasinda gidip gelen bir ogedir ve her iki zeminde de AA tutmalidir. */ color: var(--kz-kul-parlak); white-space: nowrap; } /* Kisa bant (anasayfa disindaki sayfalar) */ [data-theme="kizil"] .kz-hero--kisa { min-height: 0; height: auto; } [data-theme="kizil"] .kz-hero--kisa .kz-hero-ic { padding-block: var(--kz-b7); } [data-theme="kizil"] .kz-hero--kisa .kz-hero-kutu { width: 100%; align-items: flex-start; text-align: left; } [data-theme="kizil"] .kz-hero--kisa .kz-hero-ic { align-items: flex-start; text-align: left; } /* 1280px ARA BASAMAGI KALDIRILDI — ve bu bilincli bir takas. Eski dosya bu genislikte ayni sahnenin kucuk kopyasini (206 KB / 429 KB yerine) indiriyordu; sahne AYNIYDI, yalniz bayt farkliydi. Kiraci artik gorseli panelden TEK dosya olarak yukluyor, sunucuda GD/Imagick yok (bkz. TenantMediaStore) ve bu yuzden ara boyut TURETILEMEZ. Gorunum degismez, yalniz <=1280px genisliklerde indirilen bayt artar. Mobil basamak ise KALIR: orada gorsel kucuk degil, DIKEY kirpimdir — yani gercekten baska bir gorunumdur, ayri bir ayarla saglanir. */ @media (max-width: 768px) { [data-theme="kizil"] .kz-hero { min-height: 520px; height: auto; } [data-theme="kizil"] .kz-hero-gorsel { /* Kiracinin dikey cesidi (site_hero_mobile_url) varsa o; yoksa genis ekran gorseli kirpilarak; o da yoksa temanin uretilmis zemini. Ic ice var() yedekleri bu sirayi TEK bildirimde kurar. */ background-image: var(--kz-hero-mobil-url, var(--kz-hero-url, url("/themes/kizil/zemin-ocak.svg"))); background-position: 50% 40%; } /* Karakterler kirpilmis; sutun tam genislige acilir. */ [data-theme="kizil"] .kz-hero-saft { background: linear-gradient( 180deg, rgba(11, 11, 12, 0) 0%, rgba(11, 11, 12, 0.9) 18%, rgba(11, 11, 12, 0.9) 78%, rgba(11, 11, 12, 0) 100% ); } [data-theme="kizil"] .kz-hero-kutu { width: 100%; } [data-theme="kizil"] .kz-hero-logo { width: min(280px, 78%); } /* Dar ekranda iki eylem sutunu PAYLASIR: 111+84px iki kucuk parca olarak duruyordu, artik esit iki dovulmus blok. Yukseklik 52px olarak kalir. */ [data-theme="kizil"] .kz-hero-eylem { width: 100%; gap: var(--kz-b2); } [data-theme="kizil"] .kz-hero-eylem .kz-btn { flex: 1 1 0; min-width: 130px; /* Ust sinir: 758px'lik tablette esit bolusum her dugmeyi 351px'e cikariyordu (olculdu) — dovulmus profil gerilmis gorunuyordu. */ max-width: 240px; padding-inline: 16px; } /* Sayaclar 2x2 izgara. */ [data-theme="kizil"] .kz-hero-sayac { display: grid; grid-template-columns: 1fr 1fr; gap: var(--kz-b3) 0; margin-top: var(--kz-b4); } [data-theme="kizil"] .kz-sayac:nth-child(odd) { border-left: 0; } } /* ============================================================================ 16) OCAK SERIDI — temanin imzasi Geri sayim + indirme dugmeleri TEK yatay dovulmus profilde; dort ayri kart DEGIL. ============================================================================ */ [data-theme="kizil"] .kz-serit { position: relative; z-index: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--kz-b4) 0; padding: var(--kz-b4) var(--kz-b5); --kz-p: var(--kz-pah-levha); } [data-theme="kizil"] .kz-serit::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, var(--kz-celik), var(--kz-dokme)); clip-path: var(--kz-pah); box-shadow: inset 0 1px 0 rgba(255, 217, 168, 0.12), inset 0 -1px 0 rgba(0, 0, 0, 0.6), inset 0 0 0 1px rgba(46, 48, 52, 0.9); filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.55)); } [data-theme="kizil"] .kz-serit-boi { display: flex; min-width: 0; flex: 1 1 auto; align-items: center; gap: var(--kz-b4); padding-inline: var(--kz-b4); border-left: 1px solid var(--kz-cizik); } [data-theme="kizil"] .kz-serit-boi:first-child { padding-inline-start: 0; border-left: 0; } [data-theme="kizil"] .kz-serit-boi--son { flex: 0 0 auto; } [data-theme="kizil"] .kz-geri-sayim { display: flex; align-items: baseline; gap: var(--kz-b2); font-family: var(--kz-mono); font-variant-numeric: tabular-nums; font-size: 22px; color: var(--kz-akkor); } [data-theme="kizil"] .kz-geri-sayim span { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--kz-kul); } @media (max-width: 768px) { [data-theme="kizil"] .kz-serit { flex-direction: column; align-items: stretch; } [data-theme="kizil"] .kz-serit-boi { padding-inline: 0; padding-block: var(--kz-b3); border-left: 0; border-top: 1px solid var(--kz-cizik); } [data-theme="kizil"] .kz-serit-boi:first-child { padding-top: 0; border-top: 0; } } /* ============================================================================ 17) SEFER DEFTERI — haberler (kart izgarasi DEGIL, kayit satirlari) ============================================================================ */ [data-theme="kizil"] .kz-bolum-basi { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--kz-b4); margin-bottom: var(--kz-b4); } [data-theme="kizil"] .kz-bolum-basi h2 { margin: 0; } [data-theme="kizil"] .kz-defter { display: flex; flex-direction: column; } [data-theme="kizil"] .kz-defter-satir { position: relative; display: grid; grid-template-columns: 96px 108px minmax(0, 1fr); align-items: center; gap: var(--kz-b4); padding: var(--kz-b3) var(--kz-b3) var(--kz-b3) 0; border-bottom: 1px solid var(--kz-cizik); color: var(--kz-tebesir); transition: background-color var(--kz-sogut); } [data-theme="kizil"] .kz-defter-satir::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--kz-kor); transform: scaleY(0); transform-origin: center top; transition: transform var(--kz-sogut); } [data-theme="kizil"] .kz-defter-satir:hover { background: rgba(28, 29, 32, 0.6); transition: background-color var(--kz-isit); } [data-theme="kizil"] .kz-defter-satir:hover::before { transform: scaleY(1); transition: transform var(--kz-isit); } [data-theme="kizil"] .kz-defter-kapak { position: relative; aspect-ratio: 1; width: 96px; background: var(--kz-oyuk); box-shadow: inset 0 0 0 1px var(--kz-cizik); overflow: hidden; } [data-theme="kizil"] .kz-defter-kapak img { display: block; width: 100%; height: 100%; object-fit: cover; /* Haber kapaklarina palet cekmesi ASLA uygulanmaz. */ filter: none; } /* cover_url null: bos kutu birakilmaz, kazinmis kategori glifi konur. */ [data-theme="kizil"] .kz-defter-kapak--bos { display: flex; align-items: center; justify-content: center; color: var(--kz-cizik); } [data-theme="kizil"] .kz-defter-kapak--bos .kz-amblem { font-size: 40px; } [data-theme="kizil"] .kz-defter-tarih { font-family: var(--kz-mono); font-variant-numeric: tabular-nums; font-size: 13px; color: var(--kz-toz); white-space: nowrap; } [data-theme="kizil"] .kz-defter-govde { display: flex; min-width: 0; flex-direction: column; gap: 6px; } [data-theme="kizil"] .kz-defter-baslik { margin: 0; font-size: 1.125rem; line-height: 1.1; } [data-theme="kizil"] .kz-defter-ozet { margin: 0; font-size: 14px; color: var(--kz-kul); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* 360px: satir iki kata iner, izgara KIRILMAZ. */ @media (max-width: 640px) { [data-theme="kizil"] .kz-defter-satir { grid-template-columns: 64px minmax(0, 1fr); gap: var(--kz-b3); } [data-theme="kizil"] .kz-defter-kapak { width: 64px; } [data-theme="kizil"] .kz-defter-tarih { grid-column: 2; grid-row: 1; font-size: 12px; } [data-theme="kizil"] .kz-defter-govde { grid-column: 2; grid-row: 2; } [data-theme="kizil"] .kz-defter-kapak { grid-row: 1 / span 2; } } /* ============================================================================ 18) RAY BLOKLARI (sol/sag sutun) ============================================================================ */ [data-theme="kizil"] .kz-ray-liste { display: flex; flex-direction: column; gap: 2px; list-style: none; padding: 0; margin: 0; } [data-theme="kizil"] .kz-ray-liste a { display: flex; align-items: center; justify-content: space-between; gap: var(--kz-b2); padding: 9px 10px; border-left: 2px solid transparent; font-family: var(--kz-mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--kz-kul); transition: color var(--kz-sogut), border-color var(--kz-sogut), background-color var(--kz-sogut); } [data-theme="kizil"] .kz-ray-liste a:hover, [data-theme="kizil"] .kz-ray-liste a[aria-current="page"] { border-left-color: var(--kz-kor); background: rgba(28, 29, 32, 0.7); color: var(--kz-tebesir); transition: color var(--kz-isit), border-color var(--kz-isit), background-color var(--kz-isit); } [data-theme="kizil"] .kz-sosyal { display: flex; flex-wrap: wrap; gap: var(--kz-b2); } [data-theme="kizil"] .kz-istatistik { display: flex; flex-direction: column; gap: var(--kz-b2); list-style: none; padding: 0; margin: 0; } [data-theme="kizil"] .kz-istatistik li { display: flex; align-items: baseline; justify-content: space-between; gap: var(--kz-b3); padding-bottom: var(--kz-b2); border-bottom: 1px solid var(--kz-cizik); } [data-theme="kizil"] .kz-istatistik li:last-child { border-bottom: 0; padding-bottom: 0; } [data-theme="kizil"] .kz-istatistik-etiket { font-family: var(--kz-mono); font-size: 11px; /* 0.12em -> 0.08em (10.09.2026): satir basi ikon eklenince "TOPLAM HESAP" 208px rayda ikiye kiriliyordu; harf araligi bir tik daralinca tek satirda kalir. En uzun etiket ("TOPLAM KARAKTER") olculdu: nowrap ile deger 18px tasiyor, o yuzden uzun etiket iki satira KIRILMAYA devam eder (once de oyleydi). */ letter-spacing: 0.08em; text-transform: uppercase; color: var(--kz-kul); } [data-theme="kizil"] .kz-istatistik-deger { font-family: var(--kz-mono); font-variant-numeric: tabular-nums; font-size: 15px; color: var(--kz-akkor); } /* Deger YOK (0) durumu: "0" bir olcumdur, "—" ise olcum yapilmadigini soyler. Akkor yerine kul tonu — bos deger goz cekmemeli. */ [data-theme="kizil"] .kz-istatistik-deger--bos { color: var(--kz-kul); } /* Butun sayaclar bosken listenin altina konan tek cumlelik aciklama. */ [data-theme="kizil"] .kz-istatistik-not { margin-top: var(--kz-b3); padding-top: var(--kz-b3); border-top: 1px solid var(--kz-cizik); } [data-theme="kizil"] .kz-top-liste { display: flex; flex-direction: column; list-style: none; padding: 0; margin: 0; } [data-theme="kizil"] .kz-top-liste li { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: var(--kz-b2); padding: 7px 0; border-bottom: 1px solid var(--kz-cizik); font-size: 13px; } [data-theme="kizil"] .kz-top-liste li:last-child { border-bottom: 0; } [data-theme="kizil"] .kz-top-ad { display: flex; align-items: center; gap: 8px; min-width: 0; } [data-theme="kizil"] .kz-top-ad-metin { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } [data-theme="kizil"] .kz-top-seviye { font-family: var(--kz-mono); font-variant-numeric: tabular-nums; font-size: 12px; color: var(--kz-toz); } [data-theme="kizil"] .kz-kullanici-hos { display: flex; flex-direction: column; gap: 2px; padding-bottom: var(--kz-b3); border-bottom: 1px solid var(--kz-cizik); margin-bottom: var(--kz-b3); } [data-theme="kizil"] .kz-kullanici-ad { font-family: var(--kz-baslik); font-size: 1.375rem; line-height: 1; color: var(--kz-akkor); } /* ============================================================================ 19) GIRIS SAYFASI — ortalanmis yuzen kart YOK; ekran ikiye bolunur ============================================================================ */ [data-theme="kizil"] .kz-giris { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; align-items: stretch; min-height: calc(100vh - 62px); } [data-theme="kizil"] .kz-giris-sol { display: flex; align-items: center; justify-content: center; padding: var(--kz-b7) var(--kz-yan); } [data-theme="kizil"] .kz-giris-levha { width: 100%; max-width: 420px; --kz-p: var(--kz-pah-anit); } [data-theme="kizil"] .kz-giris-ocak { position: relative; display: none; overflow: hidden; background-color: var(--kz-zift); } [data-theme="kizil"] .kz-giris-ocak::before { content: ""; position: absolute; inset: 0; background-color: var(--kz-tav); -webkit-mask: url("/themes/kizil/ocak.svg") 30% 100% / cover no-repeat; mask: url("/themes/kizil/ocak.svg") 30% 100% / cover no-repeat; } [data-theme="kizil"] .kz-giris-amblem { position: absolute; left: 50%; top: 50%; width: min(280px, 40%); aspect-ratio: 1; transform: translate(-50%, -50%); background-color: var(--kz-dokme); opacity: 0.85; -webkit-mask: url("/themes/kizil/amblem-tam.svg") center / contain no-repeat; mask: url("/themes/kizil/amblem-tam.svg") center / contain no-repeat; } @media (min-width: 901px) { [data-theme="kizil"] .kz-giris { grid-template-columns: minmax(420px, 42%) minmax(0, 1fr); } [data-theme="kizil"] .kz-giris-ocak { display: block; } } /* Yardim baglantilari: alt alta ORTALANMAZ — tek satirda sac teli ayraclarla. */ [data-theme="kizil"] .kz-yardim-satir { display: flex; flex-wrap: wrap; align-items: center; gap: var(--kz-b2); font-size: 13px; } /* Satirdaki baglantilar tiklama hedefidir: WCAG 2.5.8 asgari 24x24 (ham metin satiri 21px'ti; genislikler zaten 24'un ustunde). Dar ekranda 44px'e cikar. */ [data-theme="kizil"] .kz-yardim-satir > a { display: inline-flex; min-height: 24px; align-items: center; } [data-theme="kizil"] .kz-yardim-satir > * + *::before { content: "|"; margin-right: var(--kz-b2); color: var(--kz-cizik); } /* 2FA sayaci: sogudukca isi olceginde ASAGI yurur. */ [data-theme="kizil"] .kz-suresolcer { font-family: var(--kz-mono); font-variant-numeric: tabular-nums; font-size: 15px; color: var(--kz-kor); } [data-theme="kizil"] .kz-suresolcer--ilik { color: var(--kz-kul); } /* SON 30 SANIYE — nabiz METNE uygulanmaz. `kz-nabiz` opakligi 0.35'e indirir. Olculdu: `toz` levhada 5.53 eder ama nabzin dibinde 1.73'e duser, yani geri sayim her 1.2 saniyenin bir bolumunde okunamaz hale geliyordu (WCAG 1.4.3 ve ayrica 2.2.2: duran/yanip sonen icerik). 8px'lik `.kz-canli` noktasinda ayni nabiz sorunsuzdur — o METIN degildir. Aciliyet zaten ISI OLCEGINDE ASAGI YURUYEREK bildiriliyor (kor -> kul -> toz); ustune hareket eklemeye gerek yok. */ [data-theme="kizil"] .kz-suresolcer--soguk { color: var(--kz-toz); } /* ============================================================================ 20) ALTLIK ============================================================================ */ [data-theme="kizil"] .kz-altlik { position: relative; z-index: 1; margin-top: auto; padding-block: var(--kz-b7) var(--kz-b6); background: var(--kz-dokme); border-top: 1px solid var(--kz-cizik); } [data-theme="kizil"] .kz-altlik-izgara { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--kz-b6); } @media (min-width: 768.02px) { [data-theme="kizil"] .kz-altlik-izgara { grid-template-columns: 1.4fr 1fr 1fr; } } [data-theme="kizil"] .kz-altlik-baslik { margin-bottom: var(--kz-b3); } [data-theme="kizil"] .kz-altlik-liste { display: flex; flex-direction: column; gap: var(--kz-b2); list-style: none; padding: 0; margin: 0; font-size: 14px; } [data-theme="kizil"] .kz-altlik-liste a { /* WCAG 2.5.8 asgari 24x24: ham metin satiri 17px'ti. Dar ekranda bu 44px'e cikar (bkz. dosya sonundaki "DOKUNMA HEDEFLERI"). */ display: flex; min-height: 24px; align-items: center; color: var(--kz-kul); } [data-theme="kizil"] .kz-altlik-liste a:hover { color: var(--kz-tebesir); } [data-theme="kizil"] .kz-yasal { margin-top: var(--kz-b6); padding-top: var(--kz-b4); border-top: 1px solid var(--kz-cizik); font-family: var(--kz-mono); font-size: 12px; color: var(--kz-toz); } [data-theme="kizil"] .kz-altlik-amblem { width: 44px; height: 44px; margin-bottom: var(--kz-b3); background-color: var(--kz-cizik); -webkit-mask: url("/themes/kizil/amblem-tam.svg") center / contain no-repeat; mask: url("/themes/kizil/amblem-tam.svg") center / contain no-repeat; } /* ============================================================================ 21) PAYLASILAN ILKELLERIN GIYDIRILMESI ---------------------------------------------------------------------------- Bu turda yalniz anasayfa ve giris ustyazildi. Kalan 23 sayfa VARSAYILAN markup ile bizim kabugun icinde cizilir; giydirilmezse tema "yarim" gorunur. Asagisi o ilkelleri ayni dile cevirir — hepsi yine kapsam altindadir. Tailwind yardimci siniflarina YASLANILMAZ; tum giydirme bu dosyadadir. ============================================================================ */ [data-theme="kizil"] .card { position: relative; z-index: 0; margin-bottom: var(--kz-b5); background: var(--kz-dokme); box-shadow: inset 0 1px 0 rgba(255, 217, 168, 0.1), inset 0 -1px 0 rgba(0, 0, 0, 0.6), inset 0 0 0 1px rgba(46, 48, 52, 0.9); } [data-theme="kizil"] .card-header, [data-theme="kizil"] .content-header { padding: var(--kz-b3) var(--kz-b5); background: var(--kz-celik); border-bottom: 1px solid var(--kz-cizik); } [data-theme="kizil"] .card-header h4, [data-theme="kizil"] .card-header h5, [data-theme="kizil"] .content-header h4, [data-theme="kizil"] .content-header h5 { font-family: var(--kz-baslik); font-size: 1.25rem; color: var(--kz-tebesir); } [data-theme="kizil"] .card-body { padding: var(--kz-b5); } [data-theme="kizil"] .btn, [data-theme="kizil"] .btn-big, [data-theme="kizil"] input[type="submit"] { min-height: 44px; padding: 0 20px; border: 1px solid var(--kz-kenar); border-radius: 0; background: transparent; color: var(--kz-tebesir); font-family: var(--kz-mono); font-weight: 500; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; transition: border-color var(--kz-sogut), color var(--kz-sogut); } [data-theme="kizil"] .btn:hover, [data-theme="kizil"] .btn-big:hover, [data-theme="kizil"] input[type="submit"]:hover { border-color: var(--kz-kor); transition: border-color var(--kz-isit), color var(--kz-isit); } [data-theme="kizil"] .btn-primary, [data-theme="kizil"] .btn-big, [data-theme="kizil"] input[type="submit"] { background: var(--kz-kizil); border-color: var(--kz-kor); color: var(--kz-beyaz); } [data-theme="kizil"] .btn-danger { border-color: var(--kz-kizil); color: var(--kz-kor); background: transparent; } [data-theme="kizil"] .btn:disabled, [data-theme="kizil"] input[type="submit"]:disabled { opacity: 0.45; cursor: not-allowed; } [data-theme="kizil"] .form-label { font-family: var(--kz-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--kz-kul); } [data-theme="kizil"] .form-control, [data-theme="kizil"] input[type="text"], [data-theme="kizil"] input[type="email"], [data-theme="kizil"] input[type="password"], [data-theme="kizil"] input[type="number"], [data-theme="kizil"] input[type="search"], [data-theme="kizil"] input[type="url"], [data-theme="kizil"] input[type="date"], [data-theme="kizil"] select, [data-theme="kizil"] textarea { min-height: 44px; padding: 10px 14px; border: 1px solid var(--kz-kenar); border-radius: 0; background: var(--kz-oyuk); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.7); color: var(--kz-tebesir); font-family: var(--kz-govde); font-size: 15px; } [data-theme="kizil"] .form-control::placeholder, [data-theme="kizil"] input::placeholder, [data-theme="kizil"] textarea::placeholder { color: var(--kz-toz); opacity: 1; } [data-theme="kizil"] .form-control:focus, [data-theme="kizil"] input:focus, [data-theme="kizil"] select:focus, [data-theme="kizil"] textarea:focus { border-color: var(--kz-kenar); box-shadow: inset 2px 0 0 0 var(--kz-kor), inset 0 1px 2px rgba(0, 0, 0, 0.7); } [data-theme="kizil"] .table { width: 100%; border-collapse: collapse; font-size: 14px; } [data-theme="kizil"] .table th, [data-theme="kizil"] table th { padding: 10px 14px; background: var(--kz-celik); border-bottom: 1px solid var(--kz-cizik); text-align: left; font-family: var(--kz-mono); font-weight: 500; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--kz-kul); } [data-theme="kizil"] .table td, [data-theme="kizil"] table td { padding: 11px 14px; border-bottom: 1px solid var(--kz-cizik); color: var(--kz-tebesir); } [data-theme="kizil"] .table-responsive { overflow-x: auto; background: var(--kz-oyuk); border: 1px solid var(--kz-cizik); } [data-theme="kizil"] .pagination .page-link, [data-theme="kizil"] .page-link { min-width: 40px; height: 40px; border: 1px solid var(--kz-kenar); background: transparent; color: var(--kz-kul); font-family: var(--kz-mono); font-variant-numeric: tabular-nums; font-size: 13px; } [data-theme="kizil"] .pagination .active .page-link { background: var(--kz-kizil); border-color: var(--kz-kor); color: var(--kz-beyaz); } [data-theme="kizil"] .news-badge { padding: 3px 9px; border: 1px solid currentColor; border-radius: 0; background: transparent; font-family: var(--kz-mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--kz-kul); } [data-theme="kizil"] .news-badge-update { color: var(--kz-jinno); } [data-theme="kizil"] .news-badge-event { color: var(--kz-akkor); } [data-theme="kizil"] .news-badge-maintenance { color: var(--kz-uyari); } [data-theme="kizil"] .news-badge-announcement { color: var(--kz-kor); } [data-theme="kizil"] .modal-overlay { background: rgba(11, 11, 12, 0.92); backdrop-filter: none; } [data-theme="kizil"] .modal-box { background: var(--kz-dokme); box-shadow: inset 0 1px 0 rgba(255, 217, 168, 0.1), inset 0 0 0 1px rgba(46, 48, 52, 0.9); } [data-theme="kizil"] .modal-header { background: var(--kz-celik); border-bottom: 1px solid var(--kz-cizik); } [data-theme="kizil"] .modal-header h5 { font-family: var(--kz-baslik); color: var(--kz-tebesir); } [data-theme="kizil"] .modal-close { color: var(--kz-kul); } [data-theme="kizil"] .modal-timer-badge { border-radius: 0; background: var(--kz-celik); border: 1px solid var(--kz-cizik); color: var(--kz-tebesir); font-family: var(--kz-mono); font-variant-numeric: tabular-nums; font-weight: 500; } [data-theme="kizil"] .modal-timer-badge.warning { background: var(--kz-celik); border-color: var(--kz-uyari); color: var(--kz-uyari); } [data-theme="kizil"] .modal-timer-badge.danger { background: var(--kz-celik); border-color: var(--kz-kor); color: var(--kz-kor); } [data-theme="kizil"] .empty-state, [data-theme="kizil"] .empty-state2 { color: var(--kz-toz); } [data-theme="kizil"] .text-muted { color: var(--kz-toz); } [data-theme="kizil"] .text-light { color: var(--kz-tebesir); } [data-theme="kizil"] .text-gold { color: var(--kz-akkor); text-shadow: none; } /* ============================================================================ 22) HAREKET — ISINMA HIZLI, SOGUMA YAVAS ============================================================================ */ [data-theme="kizil"] .kz-yol { animation: kz-yukselis 180ms cubic-bezier(0.2, 0, 0, 1) both; } @keyframes kz-yukselis { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } [data-theme="kizil"] .kz-belir { opacity: 0; transform: translateY(6px); transition: opacity 320ms ease, transform 320ms cubic-bezier(0.22, 1, 0.36, 1); } [data-theme="kizil"] .kz-belir.kz-goruldu { opacity: 1; transform: none; } /* prefers-reduced-motion — TEK blok, istisnasiz. Bu modda sayfada hareket eden hicbir piksel kalmaz; odak halkasi ve durum renkleri aynen kalir. `transform: none !important` BURADA YOKTUR ve bir daha KONULMAMALIDIR. Konuldugu surumde olculdu: bu temada `transform` iki isi birden yapiyor — (a) gecis, (b) DURUM GOSTERGESI ve YERLESIM. Blanket kural ikincisini de siliyordu, yani azaltilmis hareket modunda: .kz-nav-bag::after scaleX(0) -> none = TUM menu ogeleri "acik sayfa" gorunuyordu (aria-current'in gorsel karsiligi yok oluyordu) .kz-sekme::after scaleX(0) -> none = TUM sekmeler secili gorunuyordu .kz-btn--hayalet::before scaleX(0) -> none = alt cizgi kalici yaniyordu .kz-defter-satir::before scaleY(0) -> none = her haber satirinda kor cubuk .kz-giris-amblem translate(-50%,-50%) -> none = amblem kayiyordu .kz-btn--hayalet/kucuk::after, .kz-yardim-satir > a::after translateY(-50%) -> none = 44px'lik DOKUNMA HEDEFI gorunur dugmenin 22px altina kayiyordu (hedef artik dugmenin uzerinde degil) .kz-zemin-gorsel scale(1.08) -> none = bulanik kenar cerceveye siziyordu Zaten gerek de yok: `transition-property` listesinde `transform` OLMADIGI icin her transform degisimi bu modda ANINDA uygulanir, yani hicbir sey "hareket etmez". Yalnizca gerceketen bir GIRIS hareketi olan iki yer asagida tek tek notrlenir. */ @media (prefers-reduced-motion: reduce) { [data-theme="kizil"] *, [data-theme="kizil"] *::before, [data-theme="kizil"] *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 150ms !important; transition-property: color, background-color, border-color, box-shadow, opacity !important; scroll-behavior: auto !important; } /* Giris hareketi tasiyan TEK iki oge: gorunume belirme ve cekic darbesi. */ [data-theme="kizil"] .kz-belir { opacity: 1; transform: none; } [data-theme="kizil"] .kz-btn:active { transform: none; } [data-theme="kizil"] .kz-canli, [data-theme="kizil"] .kz-suresolcer--soguk { animation: none !important; } [data-theme="kizil"] a:focus-visible, [data-theme="kizil"] button:focus-visible, [data-theme="kizil"] input:focus-visible, [data-theme="kizil"] select:focus-visible, [data-theme="kizil"] textarea:focus-visible { transition: none !important; } } /* ============================================================================ 23) YARDIMCILAR (yalniz bu temada) ============================================================================ */ [data-theme="kizil"] .kz-yigin { display: flex; flex-direction: column; gap: var(--kz-b4); } [data-theme="kizil"] .kz-satir { display: flex; flex-wrap: wrap; align-items: center; gap: var(--kz-b3); } [data-theme="kizil"] .kz-ara { margin-inline-start: auto; } [data-theme="kizil"] .kz-gizli { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; /* `position: absolute` bu elemani blok yapar, bu yuzden `overflow: hidden` 1px kutuda metni gercekten kirper — ayrica `clip-path` GEREKMEZ (ve tema degismezi geregi asil elemana clip-path konmaz: odak halkasini kirpardi). */ overflow: hidden; white-space: nowrap; border: 0; } /* ============================================================================ SAYFA ZEMINI — kullanicinin ikinci gorseli (arkaplan2: karaktersiz avlu) ---------------------------------------------------------------------------- Kahraman alaninin ALTINDA kalan her sey (uc sutunlu pano, giris/kayit, ic sayfalar) duz siyah yerine bu sahnenin uzerinde durur. Iki sabit katman: zemin -> gorsel, `position: fixed` bir katmanda (background-attachment: fixed DEGIL; o mobilde ve Safari'de titrer/kirilir) perde -> ustunde is; levhalarin arasindan doku gorunur ama metin okunurlugu levhanin kendi opakligindan gelir, zeminden degil. Kahraman kendi gorselini z-index'te bunlarin ustune serer. ============================================================================ */ [data-theme="kizil"] .kz-zemin-gorsel, [data-theme="kizil"] .kz-zemin-perde { position: fixed; inset: 0; pointer-events: none; } /* SAYFA ZEMINI DE KIRACIYA AITTIR (gerekce icin bkz. .kz-hero-gorsel). TEK SAHNE: zemin, kahraman gorseliyle AYNI dosyadir (`site_hero_image_url`); ayri bir "sayfa arka plani" ayari yoktur. Ayar bosken tools/gen-kizil-assets.py'nin urettigi markasiz zemin-sayfa.svg cizilir. Kisayol `background` DEGIL uzun yazim kullanilir: kisayol her seferinde background-image'i de sifirlar, oysa asagidaki mobil kural yalniz goruntuyu degistirip filtre/olcek katmanini olduğu gibi birakmali. */ [data-theme="kizil"] .kz-zemin-gorsel { z-index: -2; background-color: #060505; background-image: var(--kz-zemin-url, url("/themes/kizil/zemin-sayfa.svg")); background-position: center center; background-size: cover; background-repeat: no-repeat; /* SIS: sorun karartma miktari degil, sahnenin DETAYI levhalarla yarisiyordu. Bulaniklik detayi silip atmosferi birakir; doygunluk dususu kizil gurultuyu, parlaklik dususu agirligi alir. Olcek, bulanik kenarin cerceveye sizmasini onler. */ filter: blur(6px) saturate(0.82) brightness(0.8) contrast(0.95); transform: scale(1.08); transform-origin: center; will-change: transform; } @media (prefers-reduced-motion: reduce) { [data-theme="kizil"] .kz-zemin-gorsel { will-change: auto; } } [data-theme="kizil"] .kz-zemin-perde { z-index: -1; /* PERDE AGIRLIGI KONTRASTLA BELIRLENIR, GOZLE DEGIL. "Metin okunurlugu levhanin kendi opakligindan gelir" varsayimi YANLIS cikti: levhanin DISINDA da metin var — bolum basliklari, "Tumu" hayalet dugmesi, haber satirlari (`.kz-defter-satir`in zemini YOKTUR, yalniz imlec altinda boyanir) ve giydirilmis 23 varsayilan sayfanin kart disi `.text-muted` / `.empty-state` metinleri. Olculdu (uc varyantin ucu de, blur+saturate+brightness+contrast filtreleri UYGULANDIKTAN sonra, icerik bandinin EN PARLAK pikseli uzerinde): eski duraklar -> #4B241F : toz 3.98, kor 4.27 (ikisi de AA ALTI) bu duraklar -> #371C18 : toz 4.68, kor 5.02, kul 5.73, tebesir 12.50 Duraklari tek tek metne gore ayarlamak yerine perde topluca derinlestirildi: giydirilmis sayfalarin her birini tek tek denetleyemedigimiz icin guvenlik YAPISAL olmali — zemin, hangi token uzerine gelirse gelsin AA tasimali. Bedeli olculdu: bant ortalamasi 14.6 -> 11.8 (255 uzerinden). */ background: radial-gradient(120% 85% at 50% 12%, rgba(8, 7, 7, 0.32), rgba(8, 7, 7, 0.58) 58%, rgba(8, 7, 7, 0.8)), linear-gradient(180deg, rgba(8, 7, 7, 0.58) 0%, rgba(8, 7, 7, 0.4) 28%, rgba(8, 7, 7, 0.5) 72%, rgba(8, 7, 7, 0.72) 100%); } /* 900px basamagi da kalkti: kahramandaki 1280 basamagiyla ayni gerekce — ayni sahnenin iki boyu, sunucuda yeniden olceklendirme yok. Mobil basamak DIKEY kirpim oldugu icin kalir ve kahramanin mobil ayarindan (site_hero_mobile_url) gelir. */ @media (max-width: 768px) { [data-theme="kizil"] .kz-zemin-gorsel { background-image: var(--kz-zemin-mobil-url, var(--kz-zemin-url, url("/themes/kizil/zemin-sayfa.svg"))); } } /* ============================================================================ DOKUNMA HEDEFLERI (yalniz dar/ dokunmatik genislikler) Olculdu (360x740, anasayfa + giris): kz-kare 38x38, dil dugmeleri 33x27, .kz-sekme 35px, .kz-btn--hayalet 36px, .kz-btn--kucuk 34px -> hepsi 44px'in altinda. Gorsel olcu BUYUMEZ; yalnizca tiklanabilir alan ::after ile disari tasirilir (kutu yerlesimi ve ritim aynen kalir). ============================================================================ */ @media (max-width: 768px) { /* Mobilin iki ana kumandasi (Menu, Giris) gercekten 44px olur. */ [data-theme="kizil"] .kz-kare { width: 44px; height: 44px; } /* Sekme ve dil dugmesi: kutu yuksekligi 44'e cikar (ikisi de zaten dikeyde ortalanmis metin tasiyor, ritim degismez). .kz-sekme'nin ::after'i etkin sekme cizgisidir — ONA DOKUNULMAZ. */ [data-theme="kizil"] .kz-sekme, [data-theme="kizil"] .kz-dil button { min-height: 44px; } /* Ince dugmelerde gorsel olcu BUYUMEZ (serit/bolum basi hizasi bozulurdu); yalnizca gorunmez bir hedef katmani disari tasirilir. `.kz-btn` yalniz ::before kullanir, ::after bostur. */ [data-theme="kizil"] .kz-btn--hayalet::after, [data-theme="kizil"] .kz-btn--kucuk::after, [data-theme="kizil"] a.kz-etiket::after { content: ""; position: absolute; inset: 50% 0 auto; height: 44px; transform: translateY(-50%); } [data-theme="kizil"] a.kz-etiket { position: relative; } /* Kimlik sayfalarindaki yardim satiri ("Sifremi Unuttum | ... | Kayit Ol"): baglantilar 21px yuksekliginde. Dar ekranda satir sariyor, bu yuzden ONCE satir araligi 24px'e cikarilir (adim 21+24=45) SONRA 44px'lik hedef verilir; tersi sirada iki satirin hedefleri ust uste binerdi. Ayirac `::before` oldugu icin hedef katmani `::after`'a konur. */ [data-theme="kizil"] .kz-yardim-satir { /* Satir sarinca sac teli ayirac YENI SATIRIN BASINDA kaliyordu ("| Kayit Ol"): 360px'te olculdu. Dar ekranda ayirac kaldirilir ve ayrimi bosluk yapar; satirlarin dikey adimi (b5) zaten 44px'lik dokunma hedeflerinin ust uste binmesini engelleyecek kadar buyuk. */ gap: var(--kz-b5) var(--kz-b4); } [data-theme="kizil"] .kz-yardim-satir > * + *::before { content: none; } [data-theme="kizil"] .kz-yardim-satir > a { position: relative; } [data-theme="kizil"] .kz-yardim-satir > a::after { content: ""; position: absolute; inset: 50% 0 auto; height: 44px; transform: translateY(-50%); } /* Altlik menusu: 17px satirlar 8px araliklarla 25px'lik bir adimda diziliyordu. Aralik sifirlanip her baglantiya 44px verilir — gorsel ritim korunur, hedef buyur. */ [data-theme="kizil"] .kz-altlik-liste { gap: 0; } [data-theme="kizil"] .kz-altlik-liste a { display: flex; min-height: 44px; align-items: center; } } /* Plaka basliginda iki katli ad (ust etiket + bolum adi) — orta sutundaki "SEFER DEFTERI / Haberler" gibi bolumler yan raylarla ayni levha dilinde durur. */ [data-theme="kizil"] .kz-plaka-baslik-ic { display: flex; flex-direction: column; gap: 2px; min-width: 0; } [data-theme="kizil"] .kz-plaka-baslik-ad { font-family: var(--kz-yazi-baslik, inherit); font-size: 1.05rem; letter-spacing: 0.02em; color: var(--kz-tebesir); text-transform: none; } /* Giris seridi: kahraman bandinin ALTINDA, uc sutunlu panonun USTUNDE duran eylem + sayac seridi. Bant artik yalniz logoyu tasir; logo dogrudan sunucu durumu seridinin ustune ortalanir (kullanici karari). */ [data-theme="kizil"] .kz-giris-seridi { display: flex; flex-direction: column; align-items: center; gap: var(--kz-b4); padding-block: var(--kz-b5) 0; } [data-theme="kizil"] .kz-giris-seridi .kz-hero-sayac { width: 100%; max-width: 720px; } /* Bant artik yalniz logo tasidigi icin daha da kisalir; logo dikeyde ortalanir. */ [data-theme="kizil"] .kz-hero { height: min(56vh, 620px); min-height: 380px; align-items: center; } [data-theme="kizil"] .kz-hero-ic { justify-content: center; padding-block: var(--kz-b5); } [data-theme="kizil"] .kz-hero-kutu { flex: 0 1 auto; justify-content: center; } /* Giris sayfasi ocak alanindaki karakter gorseli (kiraci sanati). Amblemin onunde, alt kenara oturur; gorsel yoksa/gec gelirse alttaki amblem duzeni bozulmaz. */ [data-theme="kizil"] .kz-giris-karakter { position: absolute; right: 4%; bottom: 0; width: auto; max-width: 78%; height: min(88%, 900px); object-fit: contain; object-position: bottom right; filter: drop-shadow(0 24px 48px rgba(0, 0, 0, 0.75)) saturate(0.94); pointer-events: none; } @media (max-width: 1199.98px) { [data-theme="kizil"] .kz-giris-karakter { right: -6%; height: 76%; opacity: 0.85; } } /* Kahraman bandi: logo ust bosluga ceker, hemen ardindan sayfa (sunucu durumu) gelir. */ [data-theme="kizil"] .kz-hero { height: min(48vh, 520px); min-height: 320px; } [data-theme="kizil"] .kz-hero-ic { justify-content: flex-start; padding-block: var(--kz-b4) var(--kz-b5); } [data-theme="kizil"] .kz-hero-logo { width: min(520px, 92%); } /* ============================================================================ §22 BINDIRME — referans duzeni (kullanici karari): logo ust bantta kalir, uc sutunlu pano kahraman gorselinin USTUNE biner. Bant bitip sayfa baslamaz; paneller dogrudan logonun altindan, hala sahnenin uzerinde baslar. Bindirme YALNIZ >= 992px'te acilir: dar ekranda uc sutun zaten alt alta dizildigi icin pano gorselin uzerine binerse logo okunmaz hale gelir. ============================================================================ */ [data-theme="kizil"] { /* Panonun bandin icine ne kadar girdigi. Dar ekranda bindirme YOKTUR. */ --kz-bindirme: 0px; } [data-theme="kizil"] .kz-kabuk--bindirme { position: relative; z-index: 3; margin-top: calc(-1 * var(--kz-bindirme)); padding-block-start: 0; } @media (min-width: 992px) { [data-theme="kizil"] { --kz-bindirme: 300px; } /* Bant bindirme kadar daha uzundur ki gorselin alt kismi panellerin arkasinda kalsin; icerigini dikeyde ORTALAMAZ, ic yigin tepeden baslar. */ [data-theme="kizil"] .kz-hero { height: min(64vh, 640px); min-height: 480px; align-items: flex-start; } [data-theme="kizil"] .kz-hero-ic { justify-content: flex-start; padding-block: 12px 0; } [data-theme="kizil"] .kz-hero-kutu { flex: 0 0 auto; justify-content: flex-start; } [data-theme="kizil"] .kz-hero-baslik { margin: 0; } /* Logo bandin tepesine oturur (referans oran: logo ~%8-31, paneller ~%40). */ [data-theme="kizil"] .kz-hero-logo { width: min(420px, 32vw); } } /* ============================================================================ §24 ETKILESIM DURUMLARI ---------------------------------------------------------------------------- Yeni gorunum getirmez; var olan kontrollerin EKSIK durumlarini tamamlar: normal / uzerine gelince / basiliyken / odakta / devre disi — ve veri bekleyen her kontrolde ALTINCI durum: yukleniyor. BOLUM DOSYANIN SONUNDA DURMALI: buradaki kurallarin bir kismi yukarideki bir durumu (or. `.kz-btn[disabled]::before`) AYNI ozgullukte ezer, yani kaskad sirasi tasiyicidir. Yukari tasinirsa yukleniyor durumu sessizce devre disi gorunumune duser. ============================================================================ */ /* ── 1) DUGME: BASILI ───────────────────────────────────────────────────── §6'da yalniz `translateY(1px)` vardi; 1px'lik kayma dokunmatikte parmagin altinda kalir, yani basili oldugu HIC gorunmezdi. Asil sinyal ic golgedir. */ [data-theme="kizil"] .kz-btn:active::before { box-shadow: inset 0 0 0 1px var(--kz-kor), inset 0 3px 6px -2px rgba(0, 0, 0, 0.9); transition: box-shadow var(--kz-isit); } [data-theme="kizil"] .kz-btn--birincil:active::before { background: var(--kz-tav); /* kizil dolgu basiliyken bir tik sogur */ } /* Hayaletin ::before'i yuzey degil, alttaki 1px kor cizgidir. */ [data-theme="kizil"] .kz-btn--hayalet:active::before { box-shadow: none; } [data-theme="kizil"] .kz-kare:active::before { box-shadow: inset 0 0 0 1px var(--kz-kor), inset 0 3px 6px -2px rgba(0, 0, 0, 0.9); } /* Devre disi dugme basilamaz. `:not([aria-busy="true"])` SART: yukleniyor durumundaki dugme artik `aria-disabled` tasiyor (odagi kaybetmemek icin native `disabled` degil). Bu istisna olmasaydi, kullanici yuklenirken dugmenin uzerine basili tuttugunda birincil kirmizi dolgu bir anligina devre disi grisine duserdi. */ [data-theme="kizil"] .kz-btn[disabled]:active::before, [data-theme="kizil"] .kz-btn[aria-disabled="true"]:not([aria-busy="true"]):active::before { box-shadow: inset 0 0 0 1px var(--kz-cizik); } /* ── 2) DUGME: YUKLENIYOR ───────────────────────────────────────────────── Etiket DEGISMEZ, genislik ZIPLAMAZ (eski kalip "Giris Yap" -> "Giris yapiliyor..." yapiyordu: blok dugmede satir sariyor, erisilebilir AD degistigi icin ekran okuyucu butun kontrolu bastan duyuruyordu). Yukleniyor dugmesi ayni zamanda `disabled`dir — cift gonderimi yalniz o engeller — ama devre disi GORUNUMUNU almamali; yoksa "islem suruyor" ile "bu dugme kapali" ayni griye duser. Asagisi §6'yi bu durum icin ezer. */ [data-theme="kizil"] .kz-btn[aria-busy="true"] { opacity: 0.92; cursor: progress; } [data-theme="kizil"] .kz-btn[aria-busy="true"]::before { background: transparent; box-shadow: inset 0 0 0 1px var(--kz-kenar); } [data-theme="kizil"] .kz-btn--birincil[aria-busy="true"]::before { background: var(--kz-kizil); box-shadow: inset 0 0 0 1px var(--kz-kor), inset 0 2px 0 -1px rgba(255, 217, 168, 0.45); } [data-theme="kizil"] .kz-btn--tehlike[aria-busy="true"]::before { box-shadow: inset 0 0 0 1px var(--kz-kizil); } [data-theme="kizil"] .kz-btn--hayalet[aria-busy="true"]::before { background: none; background-color: var(--kz-kor); box-shadow: none; } /* Donen glif: yuvarlak DEGIL (yaricap 0 kurali) — iki komsu kenari yanan bir kare cerceve doner. Mutlak konumlu, yani genislige katkisi yok. */ @keyframes kz-don { to { transform: rotate(360deg); } } [data-theme="kizil"] .kz-donen { position: absolute; top: 50%; inset-inline-end: 8px; width: 13px; height: 13px; margin-top: -7px; border: 2px solid transparent; border-top-color: currentColor; border-inline-end-color: currentColor; animation: kz-don 700ms linear infinite; pointer-events: none; } [data-theme="kizil"] .kz-btn--blok .kz-donen { inset-inline-end: 14px; } /* ── 3) FORM ALANI: eksik durumlar ──────────────────────────────────────── §7'de yalniz normal/odak/hata vardi. Giris formu gonderim sirasinda tum alanlara `disabled` yaziyor ama alanlar BIREBIR ayni gorunuyordu. */ [data-theme="kizil"] .kz-alan[disabled] { background: var(--kz-celik); border-color: var(--kz-cizik); box-shadow: none; color: var(--kz-kul); /* iOS Safari devre disi metni kendi soldurur; tonu biz sabitleriz. */ -webkit-text-fill-color: var(--kz-kul); opacity: 1; cursor: not-allowed; } [data-theme="kizil"] .kz-alan[disabled]::placeholder { color: var(--kz-cizik); } /* `:has` desteklenmeyen tarayicida yalniz bu satir duser; alanin kendi gorunumu durumu zaten tasir. */ [data-theme="kizil"] .kz-grup:has(> .kz-alan[disabled]) > .kz-alan-etiket { color: var(--kz-toz); } /* Salt okunur devre disi DEGILDIR (secilir, odak alir, yazilmaz): ayrimi kuyu derinligi tasir — oyuk kalkar, yuzey duzlesir. */ [data-theme="kizil"] .kz-alan[readonly] { background: var(--kz-celik); box-shadow: inset 2px 0 0 0 var(--kz-cizik); color: var(--kz-kul); cursor: default; } [data-theme="kizil"] .kz-alan[readonly]:focus, [data-theme="kizil"] .kz-alan[readonly]:focus-visible { box-shadow: inset 2px 0 0 0 var(--kz-kenar); } /* Dogrulanmis alan — renge EK OLARAK tam amblem esligi eder. */ [data-theme="kizil"] .kz-alan--basari { border-color: var(--kz-basari); } [data-theme="kizil"] .kz-alan-tamam { display: flex; align-items: center; gap: var(--kz-b2); font-size: 13px; color: var(--kz-basari); } /* OTOMATIK DOLDURMA: Chrome/Edge kendi acik zeminini basar, `background` ile ezilemez — tek yol 100px'lik ic golge. `transition: background-color 9999s` de sart, yoksa tarayici zemini kendi gecisiyle geri boyar. SIRA onemli: golge listesinde ONDEKI ustte cizilir, bu yuzden kor bar dolgudan once yazilir; tersi olsa odak cizgisi dolgunun altinda kalirdi. */ [data-theme="kizil"] .kz-alan:-webkit-autofill, [data-theme="kizil"] .kz-alan:-webkit-autofill:hover { -webkit-text-fill-color: var(--kz-tebesir); caret-color: var(--kz-tebesir); -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.7), inset 0 0 0 100px var(--kz-oyuk); transition: background-color 9999s ease-out 0s; } [data-theme="kizil"] .kz-alan:-webkit-autofill:focus { -webkit-box-shadow: inset 2px 0 0 0 var(--kz-kor), inset 0 1px 2px rgba(0, 0, 0, 0.7), inset 0 0 0 100px var(--kz-oyuk); } /* ── 4) ZIYARET EDILMIS BAGLANTI ────────────────────────────────────────── Yalniz OKUNMUS KAYIT bildirir; gezinme baglantilarina uygulanmaz (orada gurultu olurdu). Renk tek gostergedir ama tasidigi sey islevsel degil (WCAG 1.4.1 islevsel ayrimi ister); `kul` levhada 6.77 eder. */ [data-theme="kizil"] .kz-defter-satir:visited .kz-defter-baslik, [data-theme="kizil"] p > a:visited { color: var(--kz-kul); } /* ── 5) SEKME / SAYFALAYICI: eksik durumlar ─────────────────────────────── §12'de sayfalayicinin NE imlec alti NE devre disi gorunumu vardi: ilk/son sayfada Onceki/Sonraki tiklanamaz ama tiklanabilir duruyordu. */ [data-theme="kizil"] .kz-sekme:active { transform: translateY(1px); } [data-theme="kizil"] .kz-sayfa { transition: color var(--kz-sogut); } [data-theme="kizil"] .kz-sayfa::before { transition: box-shadow var(--kz-sogut), background-color var(--kz-sogut); } [data-theme="kizil"] .kz-sayfa:hover { color: var(--kz-tebesir); transition: color var(--kz-isit); } [data-theme="kizil"] .kz-sayfa:hover::before { box-shadow: inset 0 0 0 1px var(--kz-kor); transition: box-shadow var(--kz-isit); } [data-theme="kizil"] .kz-sayfa[aria-current="page"]:hover::before { background: var(--kz-kizil); } [data-theme="kizil"] .kz-sayfa:active { transform: translateY(1px); } [data-theme="kizil"] .kz-sayfa[disabled] { opacity: 0.4; cursor: not-allowed; transform: none; } [data-theme="kizil"] .kz-sayfa[disabled]:hover { color: var(--kz-kul); } [data-theme="kizil"] .kz-sayfa[disabled]:hover::before { box-shadow: inset 0 0 0 1px var(--kz-kenar); } [data-theme="kizil"] .kz-kare[aria-disabled="true"], [data-theme="kizil"] .kz-kare[disabled] { opacity: 0.45; cursor: not-allowed; } [data-theme="kizil"] .kz-kare[aria-disabled="true"]:hover::before { box-shadow: inset 0 0 0 1px var(--kz-cizik); } /* ── 6) ISKELET -> VERI: yumusak cozulme ────────────────────────────────── Ani takas gozde "sayfa bir kez daha yuklendi" etkisi yapiyor. Gecis SAF OPAKLIKTIR: motor inmese de calisir, azaltilmis harekette sure 0.001ms'e dusup aninda biter. Mesafe YOK — iskeletin biraktigi yerde zaten duran icerigi kaydirmak yanlis olurdu. */ @keyframes kz-coz { from { opacity: 0; } to { opacity: 1; } } [data-theme="kizil"] .kz-coz { animation: kz-coz 260ms cubic-bezier(0.2, 0, 0, 1) both; } /* Deger iskeleti mono rakamla ayni yuksekligi kaplar: veri gelince satir yukselmez. */ [data-theme="kizil"] .kz-iskelet--deger { display: inline-block; width: 64px; height: 15px; vertical-align: middle; } /* ── 7) DOKUNMA HEDEFLERI (ek olcum) ────────────────────────────────────── Sayfalayici 40x40, ray listesi ~34px, cekmece listesi ~40px olculdu; ucu de 44'un altinda ve ilk "DOKUNMA HEDEFLERI" blogunda atlanmisti. */ @media (max-width: 768px) { [data-theme="kizil"] .kz-sayfa { min-width: 44px; height: 44px; } [data-theme="kizil"] .kz-ray-liste a, [data-theme="kizil"] .kz-cekmece-liste a { min-height: 44px; } [data-theme="kizil"] .kz-cekmece-liste a { display: flex; align-items: center; } } /* ── 8) AZALTILMIS HAREKET (bu bolum) ───────────────────────────────────── §22 blogu bu bolumden ONCE gelir ve donen glifi zaten dondurur; ama DONMUS bir kare hicbir sey soylemez. Glif duran bir cerceveye doner: hareket yok, gosterge var. */ @media (prefers-reduced-motion: reduce) { [data-theme="kizil"] .kz-donen { animation: none !important; border-color: currentColor; opacity: 0.6; } [data-theme="kizil"] .kz-sekme:active, [data-theme="kizil"] .kz-sayfa:active { transform: none; } } /* ============================================================================ 24) SLAYT BANDI (kz-slider) ---------------------------------------------------------------------------- Ocak seridi ile Sefer Defteri arasindaki tanitim bandi. Yapi kz-yuva dilidir: DISTA centikli dovme levha, ICINDE dikdortgen bir kuyu. Neden boyle: gorselin kendisine `clip-path` UYGULANAMAZ (tema degismezi: pah yalniz ::before/::after katmanindadir; asil elemanda odak halkasini kirpardi). Levhaya var(--kz-b3) ic bosluk verilir, centik levhanin kenarinda kalir, gorsel kuyunun icinde tam dikdortgen durur. ODAK COZUMU: kuyuda `overflow: hidden` vardir (slaytlar ustuste yigilir): - OKLAR kuyunun DISINDAKI .kz-slider-sahne ogesine baglidir -> kirpilmaz - BAGLANTI kuyunun icindedir ve halkasini ICE cizer -> negatif offset Noktalar akistadir, levhanin alt bosluguna oturur. KIRMIZI BUTCESI: bandda kirmizi yalniz uc yerdedir ve ucu de DURUM'dur: etkin nokta (nerede oldugun), imlec altindaki okun 1px kenari, tiklanabilir slaytin imlec altindaki 1px kenari. Gorselin kendisi kullanicinin sanatidir; uzerine renk BASILMAZ, yalniz yazi seridi koyultulur. OLCUM (yazi seridi): serit rgba(11,11,12,0.86). En kotu hal gorselin o bolgesinin BEYAZ olmasidir; karisim o zaman #2d2d2e olur ve orada tebesir (#e8e6e2) = 11.0 : 1 (baslik, AAA) Oklarin glifi gorselin uzerinde durdugu icin `kul` DEGIL `kul-parlak`tir: rgba(11,11,12,0.82) uzerinde beyaz gorselle kul 4.38, kul-parlak 5.93 eder. ============================================================================ */ [data-theme="kizil"] .kz-slider { position: relative; z-index: 0; padding: var(--kz-b3); --kz-p: var(--kz-pah-levha); } [data-theme="kizil"] .kz-slider::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--kz-dokme); clip-path: var(--kz-pah); box-shadow: inset 0 1px 0 rgba(255, 217, 168, 0.1), inset 0 -1px 0 rgba(0, 0, 0, 0.6), inset 0 0 0 1px rgba(46, 48, 52, 0.9); filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.55)); } /* TEK ISIK KURALI: yalniz isiga donuk ust kenar parlar (bkz. .kz-plaka::after). */ [data-theme="kizil"] .kz-slider::after { content: ""; position: absolute; left: var(--kz-p); right: 0; top: 0; height: 1px; z-index: -1; pointer-events: none; background: linear-gradient(90deg, transparent 0%, var(--kz-akkor) var(--kz-isik-x), transparent 74%); opacity: 0.3; } /* Sahne: oklarin konum atasi. `overflow` YOK -> ok odak halkasi kirpilmaz. */ [data-theme="kizil"] .kz-slider-sahne { position: relative; } /* Kuyu: slaytlar burada ustuste yigilir. `aspect-ratio` sabittir, bu yuzden gorsel inmeden once de yer kaplar (CLS yok). */ [data-theme="kizil"] .kz-slider-cerceve { position: relative; overflow: hidden; aspect-ratio: 1180 / 400; background: var(--kz-oyuk); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.7); touch-action: pan-y; } [data-theme="kizil"] .kz-slider-slayt { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity var(--kz-sogut); } [data-theme="kizil"] .kz-slider-slayt--etkin { z-index: 1; opacity: 1; pointer-events: auto; } [data-theme="kizil"] .kz-slider-bag { position: relative; display: block; width: 100%; height: 100%; } /* Tiklanabilir slaytin imlec altindaki 1px sicak kenari. Ayri bir katman, cunku kenar gorselin USTUNDE durmali ve fareyi yakalamamali. */ [data-theme="kizil"] .kz-slider-bag::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 1px transparent; transition: box-shadow var(--kz-sogut); } [data-theme="kizil"] a.kz-slider-bag:hover::after { box-shadow: inset 0 0 0 1px var(--kz-kor); transition: box-shadow var(--kz-isit); } [data-theme="kizil"] a.kz-slider-bag:hover .kz-slider-ad { color: var(--kz-akkor); transition: color var(--kz-isit); } /* Odak halkasi ICE cizilir: kuyudaki `overflow: hidden` disa cizileni keserdi. Once 4px zift seridi (ayrisma), hemen icinde 2px kor halka. */ [data-theme="kizil"] .kz-slider-bag:focus-visible { outline: 2px solid var(--kz-kor); outline-offset: -6px; box-shadow: inset 0 0 0 4px var(--kz-zift); transition: none; } [data-theme="kizil"] .kz-slider-gorsel { display: block; width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; } /* Yazi seridi: gorselin uzerine RENK basilmaz, yalniz koyulastirilir. ::before ustteki yumusak gecisi verir, seridin kendisi olculmus zemindir. */ [data-theme="kizil"] .kz-slider-yazi { position: absolute; right: 0; bottom: 0; left: 0; padding: var(--kz-b4) var(--kz-b5); background: rgba(11, 11, 12, 0.86); border-top: 1px solid var(--kz-cizik); } [data-theme="kizil"] .kz-slider-yazi::before { content: ""; position: absolute; right: 0; bottom: 100%; left: 0; height: 56px; pointer-events: none; background: linear-gradient(180deg, rgba(11, 11, 12, 0), rgba(11, 11, 12, 0.86)); } [data-theme="kizil"] .kz-slider-ad { display: block; font-family: var(--kz-baslik); font-weight: 800; font-size: clamp(18px, 2.4vw, 28px); line-height: 1.06; letter-spacing: 0.01em; text-transform: uppercase; color: var(--kz-tebesir); transition: color var(--kz-sogut); } /* Oklar: kz-kare ile ayni dovme dil, ama zemini gorselden bagimsiz olsun diye celik degil zift dolgu. */ [data-theme="kizil"] .kz-slider-ok { position: absolute; top: 50%; z-index: 2; display: inline-flex; width: 40px; height: 40px; align-items: center; justify-content: center; padding: 0; border: 0; background: none; color: var(--kz-kul-parlak); font-size: 15px; cursor: pointer; transform: translateY(-50%); --kz-p: var(--kz-pah-kucuk); transition: color var(--kz-sogut); } [data-theme="kizil"] .kz-slider-ok::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(11, 11, 12, 0.82); clip-path: var(--kz-pah); box-shadow: inset 0 0 0 1px var(--kz-cizik); transition: box-shadow var(--kz-sogut), background-color var(--kz-sogut); } [data-theme="kizil"] .kz-slider-ok:hover { color: var(--kz-tebesir); transition: color var(--kz-isit); } [data-theme="kizil"] .kz-slider-ok:hover::before { background: rgba(11, 11, 12, 0.92); box-shadow: inset 0 0 0 1px var(--kz-kor); transition: box-shadow var(--kz-isit); } [data-theme="kizil"] .kz-slider-ok--geri { inset-inline-start: var(--kz-b3); } [data-theme="kizil"] .kz-slider-ok--ileri { inset-inline-end: var(--kz-b3); } /* Noktalar: daire DEGIL, dovulmus kisa cubuk. Etkin olan uzar VE kizarir; durum yalniz renkle bildirilmez, FORM farki tasir. */ [data-theme="kizil"] .kz-slider-noktalar { display: flex; justify-content: center; gap: var(--kz-b2); padding-top: var(--kz-b3); } [data-theme="kizil"] .kz-slider-nokta { position: relative; display: inline-flex; width: 28px; height: 28px; align-items: center; justify-content: center; padding: 0; border: 0; background: none; cursor: pointer; } /* PAH YOK — ve bu bir istisna DEGIL, olcegin sonucudur. Temanin en kucuk pahi 6px'tir (--kz-pah-kucuk); 6px yuksekliginde bir cubukta 2px'lik centik bile yuksekligin ucte birini yiyip cubugu EGIK BIR CIZGIYE ceviriyordu (ekranda olculdu). Bu olcekte dilin tasiyicisi centik degil, yaricapin SIFIR olmasi ve olcu farkidir: etkin cubuk iki kat uzar. */ [data-theme="kizil"] .kz-slider-nokta::before { content: ""; width: 14px; height: 6px; background: var(--kz-kul); transition: width var(--kz-sogut), background-color var(--kz-sogut); } [data-theme="kizil"] .kz-slider-nokta:hover::before { background: var(--kz-tebesir); transition: width var(--kz-isit), background-color var(--kz-isit); } [data-theme="kizil"] .kz-slider-nokta--etkin::before { width: 28px; background: var(--kz-kor); } @media (max-width: 768px) { /* Mobil kirpmada 1180/400 bandi 90px'e dusup gorseli oldururdu. */ [data-theme="kizil"] .kz-slider-cerceve { aspect-ratio: 16 / 10; } [data-theme="kizil"] .kz-slider-yazi { padding: var(--kz-b3) var(--kz-b4); } /* DOKUNMA HEDEFLERI: ikisi de 44x44 olur (nokta gorseli 4px kalir). */ [data-theme="kizil"] .kz-slider-ok, [data-theme="kizil"] .kz-slider-nokta { width: 44px; height: 44px; } } /* Azaltilmis hareket: 22. bolum blogu opakligi 150ms'e indirir, ama burada istenen ANINDA degisimdir; capraz solma bir GECIS hareketidir, sus degil. */ @media (prefers-reduced-motion: reduce) { [data-theme="kizil"] .kz-slider-slayt { transition: none !important; } } /* ============================================================================ SLAYT BANDI — DUZELTME (kullanici: "ustteki slider cok boguk") ---------------------------------------------------------------------------- §24'teki yazi seridi gorselin alt ~%25'ini %86 opak bir bantla kapatiyor ve ustune 56px karartma gecisi biniyordu. Slaytlar TAMAMLANMIS afislerdir (kendi basligini, adresini ve magaza dugmelerini tasirlar) — o bant hem sanati orter hem basligi tekrar eder. Artik: bant YOK, baslik sol alta kucuk bir rozet. Erisilebilirlik korunur (baslik DOM'da ve okunur), yalniz gorsel agirligi duser. ============================================================================ */ [data-theme="kizil"] .kz-slider-yazi { right: auto; left: var(--kz-b3); bottom: var(--kz-b3); width: max-content; max-width: calc(100% - var(--kz-b5)); padding: 6px 12px; background: rgba(11, 11, 12, 0.62); border: 1px solid rgba(46, 48, 52, 0.9); border-top: 1px solid rgba(46, 48, 52, 0.9); backdrop-filter: blur(2px); } [data-theme="kizil"] .kz-slider-yazi::before { content: none; } [data-theme="kizil"] .kz-slider-ad { font-size: clamp(12px, 1.1vw, 15px); letter-spacing: 0.06em; color: var(--kz-beige, var(--kz-tebesir)); opacity: 0.92; } /* Haberler bolumu slaytin hemen altina yaklasir (kullanici istegi): serit -> slider -> haberler zinciri tek pano gibi okunur. */ [data-theme="kizil"] .kz-icerik > .kz-slider + * { margin-top: var(--kz-b4); } /* ============================================================================ TEK SAHNE (kullanici karari: "ustteki tek gorsel tum sayfayi kaplamali, altta ikinci bir resme gerek yok") ---------------------------------------------------------------------------- Sayfa zemini artik kahraman gorselinin AYNISIDIR (Shell.tsx --kz-zemin-url'u --kz-hero-url'e dusurur). Bu yuzden zemin katmanindaki BULANIKLIK KALKAR: bulanik hedef ikinci bir sahneyi susturmakti; ayni sahne iki kez cizilirken ustteki keskin, alttaki bulanik olursa bandin bittigi yerde ton kirilir. Okunurlugu artik yalniz perde tasir ve perde ASAGI DOGRU koyulasir: ust bantta sahne acik (karakterler gorunur), panolarin oldugu yerde koyu. ============================================================================ */ [data-theme="kizil"] .kz-zemin-gorsel { filter: none; transform: none; background-position: 50% 0; } [data-theme="kizil"] .kz-zemin-perde { background: linear-gradient( 180deg, rgba(8, 7, 7, 0.18) 0%, rgba(8, 7, 7, 0.34) 26%, rgba(8, 7, 7, 0.62) 52%, rgba(8, 7, 7, 0.8) 78%, rgba(8, 7, 7, 0.88) 100% ); } /* Bant kendi gorselini AYRICA cizmez: zemin zaten ayni sahneyi tasiyor. Bandin diger katmanlari (ocak/saft/doku) ve alt erimesi yerinde kalir. */ [data-theme="kizil"] .kz-hero-gorsel { display: none; } /* TEK SAHNE (devam): bant artik KENDI gorselini cizmedigi icin, bandin karartma katmanlari da paylasilan sahneyi bosuna koyultuyordu (kullanici: "karakterli resmi kaldirdin" — aslinda gorsel oradaydi, ustundeki opak ocak katmani onu orttugu icin gorunmuyordu). Bant artik yalniz UST BANT okunurlugu icin ince bir koyulastirma tasir; sahne kendi zemin katmanindan gelir. */ [data-theme="kizil"] .kz-hero-ocak, [data-theme="kizil"] .kz-hero-saft, [data-theme="kizil"] .kz-hero-doku { display: none; } [data-theme="kizil"] .kz-hero-perde { background: linear-gradient(180deg, rgba(11, 11, 12, 0.66) 0%, rgba(11, 11, 12, 0.12) 22%, rgba(11, 11, 12, 0) 46%); } [data-theme="kizil"] .kz-hero { -webkit-mask-image: none; mask-image: none; } /* Sahne ust bantta acik kalsin, panolarin oldugu yerde koyulasin. */ [data-theme="kizil"] .kz-zemin-perde { background: linear-gradient( 180deg, rgba(8, 7, 7, 0.06) 0%, rgba(8, 7, 7, 0.14) 30%, rgba(8, 7, 7, 0.52) 58%, rgba(8, 7, 7, 0.78) 82%, rgba(8, 7, 7, 0.88) 100% ); } /* TEK SAHNE (son kural): bandin OPAK zemini sahneyi orttugu icin kaldirilir. Bant artik yalniz ust okunurluk perdesini tasir; sahne sabit zemin katmanindan gelir ve sayfanin tamamini kaplar. (Daha once saydam yapilmisti; kiraci-notr duzenlemesi `background-color: var(--kz-zift)` ile geri getirdigi icin burada son sozu soyluyoruz — dosyanin sonundaki blok kaskadi kazanir.) */ [data-theme="kizil"] .kz-hero { background-color: transparent; } /* ═════════════════════════════════════════ §25 CANLI DESTEK BALONU ═════════ Markup ortak (.m2lc, components/live-chat/LiveChatWidget.tsx); burada yalnız temanin dili giydirilir: levha zemini, sac teli cizik, kor vurgu, mono meta. Ziyaretci baloncugu KIZIL DOLGU (sayfadaki tek kirmizi dolgu kurali: form disi, kucuk yuzey — metin beyaz, AA), personel baloncugu oyuk. */ [data-theme="kizil"] .m2lc { --m2lc-bg: var(--kz-levha, #141518); --m2lc-bg2: var(--kz-oyuk); --m2lc-fg: var(--kz-tebesir); --m2lc-muted: var(--kz-kul); --m2lc-line: var(--kz-cizik); --m2lc-accent: var(--kz-kizil); --m2lc-accent-fg: var(--kz-beyaz); --m2lc-me: var(--kz-kizil); --m2lc-me-fg: var(--kz-beyaz); --m2lc-staff: var(--kz-oyuk); --m2lc-online: var(--kz-basari); --m2lc-offline: var(--kz-toz); --m2lc-danger: var(--kz-hata); --m2lc-radius: var(--kz-pah-levha); } [data-theme="kizil"] .m2lc-fab { border-radius: var(--kz-pah-levha); box-shadow: 0 0 0 1px var(--kz-cizik), 0 8px 24px rgba(0, 0, 0, .5); } [data-theme="kizil"] .m2lc-panel { box-shadow: 0 0 0 1px var(--kz-cizik), 0 18px 48px rgba(0, 0, 0, .6); } [data-theme="kizil"] .m2lc-head strong { font-family: var(--kz-baslik); letter-spacing: 0.04em; text-transform: uppercase; font-weight: 400; } [data-theme="kizil"] .m2lc-online, [data-theme="kizil"] .m2lc-meta, [data-theme="kizil"] .m2lc-day, [data-theme="kizil"] .m2lc-system, [data-theme="kizil"] .m2lc-author, [data-theme="kizil"] .m2lc-field > span { font-family: var(--kz-mono); letter-spacing: 0.06em; text-transform: uppercase; font-size: 11px; } [data-theme="kizil"] .m2lc-bubble { border-radius: var(--kz-pah-kucuk); border: 1px solid var(--kz-cizik); } [data-theme="kizil"] .m2lc-row-me .m2lc-bubble { border-color: transparent; } [data-theme="kizil"] .m2lc-input, [data-theme="kizil"] .m2lc-field input, [data-theme="kizil"] .m2lc-field select, [data-theme="kizil"] .m2lc-field textarea, [data-theme="kizil"] .m2lc-rate input { border-radius: var(--kz-pah-kucuk); border-color: var(--kz-kenar); } [data-theme="kizil"] .m2lc-input:focus, [data-theme="kizil"] .m2lc-field input:focus, [data-theme="kizil"] .m2lc-field textarea:focus { outline: 2px solid var(--kz-kor); } [data-theme="kizil"] .m2lc-btn, [data-theme="kizil"] .m2lc-send { border-radius: var(--kz-pah-kucuk); font-family: var(--kz-mono); letter-spacing: 0.08em; text-transform: uppercase; } [data-theme="kizil"] .m2lc-btn-ghost { border-color: var(--kz-kenar); color: var(--kz-tebesir); } [data-theme="kizil"] .m2lc-stars button.is-on, [data-theme="kizil"] .m2lc-rated { color: var(--kz-akkor); } [data-theme="kizil"] .m2lc-notice a { color: var(--kz-kor); } /* ═════════════════════════════════════════ §25b TOPLULUK KARTLARI ═════════ Markup ortak (.m2cm, components/CommunityLinks.tsx; sol alt, canli destegin karsisi). Burada yalniz temanin dili: celik levha zemin, kenar teli, kor kancalar, akkor baslik (oyma yazi), mono alt satir. Ikon kutulari marka rengi kalir. */ [data-theme="kizil"] .m2cm { --m2cm-bg: rgba(20, 20, 22, 0.92); --m2cm-line: var(--kz-cizik); --m2cm-accent: var(--kz-kor); --m2cm-title: var(--kz-akkor); --m2cm-sub: var(--kz-kul); --m2cm-glow: rgba(255, 90, 54, 0.22); --m2cm-font: var(--kz-baslik); --m2cm-radius: 0; } [data-theme="kizil"] .m2cm-baslik { font-size: 19px; letter-spacing: 0.08em; } [data-theme="kizil"] .m2cm-alt { font-family: var(--kz-mono); letter-spacing: 0.12em; } [data-theme="kizil"] .m2cm-card:hover, [data-theme="kizil"] .m2cm-card:focus-visible { border-color: var(--kz-kenar); } /* ═════════════════════════════════════════ §26 ZEMIN VIDEOSU ═════════════ Kahraman gorselinin ustunde, AYNI kirpimla (cover, 50% 0) sabit