/* ============================================================================= ASVARIS · DUZ TEMA ----------------------------------------------------------------------------- `tema-pixel.css` ile AYNI sinif listesini karsilar. Ikisi de yalnizca kendi kapsaminda yazar; `index.html` her ikisini de yukler, `` hangisinin uygulanacagini belirler. docs/ARAYUZ-SOZLESMESI.md §3 (sinif adlari) ve §5 (anlamsal token katmani). NEDEN AYRI DOSYA: Modul CSS'i tema bilmez. Tema farki YALNIZCA bu iki dosyada yasar. Bir modul kendi CSS'inde tema kosulu yaziyorsa tasarim bozulmus demektir. Palet tokenlari (--asv-cyan gibi) burada DOGRUDAN kullanilmaz; anlamsal katman (--asv-vurgu-renk) kullanilir. Tek istisna: bu dosyanin kendisi anlamsal degerleri :root'ta tanimlamaz - onlar tokenlar.css'te. ============================================================================= */ /* ---- Govde ve tipografi ------------------------------------------------- */ [data-tema="duz"] body { font-family: var(--asv-font-govde); background: var(--asv-zemin); color: var(--asv-metin-renk); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } [data-tema="duz"] h1 { font-size: var(--asv-text-2xl); letter-spacing: 0.02em; margin: 0 0 var(--asv-space-md); } [data-tema="duz"] :where(h2, h3) { font-size: var(--asv-text-xl); letter-spacing: 0.01em; margin: 0 0 var(--asv-space-sm); } [data-tema="duz"] :where(h4, h5, h6) { font-size: var(--asv-text-lg); margin: 0 0 var(--asv-space-sm); } [data-tema="duz"] :where(h1, h2, h3, h4, h5, h6, button, [role="button"], label, legend, summary, nav) { font-family: var(--asv-font-govde); } [data-tema="duz"] ::selection { background: var(--asv-vurgu-renk); color: var(--asv-zemin); } [data-tema="duz"] :focus-visible { outline: var(--asv-focus-width) solid var(--asv-focus-color); outline-offset: 2px; } /* Duz temada gorseller yumusak olcekler - pixel temada `pixelated`. */ [data-tema="duz"] :where(img, canvas, svg) { image-rendering: auto; } /* ---- Kabuk · uygulama cercevesi ----------------------------------------- */ /* Duzeni temel.css kurar (mobile-first izgara). Burasi yalnizca GORUNUM. */ [data-tema="duz"] .asv-kabuk { background: var(--asv-zemin); color: var(--asv-metin-renk); } [data-tema="duz"] .asv-kenar { background: var(--asv-yuzey); border-right: var(--asv-border) solid var(--asv-kenar-renk); } [data-tema="duz"] .asv-icerik { background: var(--asv-zemin); } [data-tema="duz"] .asv-panel { background: var(--asv-yuzey); border-left: var(--asv-border) solid var(--asv-kenar-renk); } [data-tema="duz"] .asv-alt-sekme { background: var(--asv-yuzey); border-top: var(--asv-border) solid var(--asv-kenar-renk); } [data-tema="duz"] .asv-alt-sekme a { color: var(--asv-metin-soluk); text-decoration: none; } [data-tema="duz"] .asv-alt-sekme a:hover, [data-tema="duz"] .asv-alt-sekme a.asv-aktif { color: var(--asv-vurgu-renk); } [data-tema="duz"] .asv-atla { background: var(--asv-vurgu-renk); color: var(--asv-zemin); border-radius: var(--asv-kose); font-weight: 600; } [data-tema="duz"] .asv-acilis-hatasi { background: var(--asv-yuzey-yuksek); color: var(--asv-hata-renk); border: var(--asv-border) solid var(--asv-hata-renk); border-radius: var(--asv-kose); padding: var(--asv-space-md); margin: var(--asv-space-md); white-space: pre-wrap; } [data-tema="duz"] .asv-giris-kok { background: var(--asv-zemin); min-height: 100dvh; display: grid; place-items: center; padding: var(--asv-space-md); } /* ---- Ust cubuk ve gezinme ------------------------------------------------ */ [data-tema="duz"] .asv-ust-cubuk { display: flex; align-items: center; gap: var(--asv-space-md); padding: var(--asv-space-sm) var(--asv-space-md); background: var(--asv-yuzey); border-bottom: var(--asv-border) solid var(--asv-kenar-renk); } [data-tema="duz"] .asv-marka { font-size: var(--asv-text-lg); letter-spacing: 0.28em; color: var(--asv-metin-renk); } [data-tema="duz"] .asv-arama-kutusu { flex: 1 1 auto; min-width: 0; } [data-tema="duz"] .asv-kullanici { display: flex; align-items: center; gap: var(--asv-space-sm); color: var(--asv-metin-renk); } [data-tema="duz"] .asv-gezinme { list-style: none; margin: 0; padding: var(--asv-space-sm) 0; } [data-tema="duz"] .asv-gezinme-oge { display: flex; align-items: center; gap: var(--asv-space-sm); min-height: var(--asv-target-desktop); padding: var(--asv-space-sm) var(--asv-space-md); color: var(--asv-metin-soluk); border-left: 3px solid transparent; border-radius: 0 var(--asv-kose) var(--asv-kose) 0; text-decoration: none; transition: background 0.15s ease, color 0.15s ease; } [data-tema="duz"] .asv-gezinme-oge:hover { background: var(--asv-yuzey-yuksek); color: var(--asv-metin-renk); } [data-tema="duz"] .asv-gezinme-aktif { background: var(--asv-yuzey-yuksek); color: var(--asv-vurgu-renk); border-left-color: var(--asv-vurgu-renk); } [data-tema="duz"] .asv-gezinme-rozet { margin-left: auto; min-width: 20px; padding: 0 6px; border-radius: 10px; background: var(--asv-vurgu-renk); color: var(--asv-zemin); font-size: var(--asv-text-xs); text-align: center; } [data-tema="duz"] .asv-sirket-karti { margin: var(--asv-space-md); padding: var(--asv-space-md); background: var(--asv-yuzey-yuksek); border: var(--asv-border) solid var(--asv-kenar-renk); border-radius: var(--asv-kose); color: var(--asv-metin-soluk); } [data-tema="duz"] .asv-durum-cubugu { display: flex; align-items: center; justify-content: space-between; gap: var(--asv-space-md); padding: var(--asv-space-xs) var(--asv-space-md); background: var(--asv-zemin-derin); border-top: var(--asv-border) solid var(--asv-kenar-renk); color: var(--asv-basari-renk); font-size: var(--asv-text-xs); } /* ---- Kart ---------------------------------------------------------------- */ [data-tema="duz"] .asv-kart { position: relative; background: var(--asv-yuzey); border: var(--asv-border) solid var(--asv-kenar-renk); border-radius: var(--asv-kose); box-shadow: var(--asv-kart-golge); padding: var(--asv-space-md); transition: border-color 0.15s ease, box-shadow 0.15s ease; } [data-tema="duz"] .asv-kart-baslik { font-size: var(--asv-text-lg); color: var(--asv-metin-renk); margin: 0 0 var(--asv-space-sm); } [data-tema="duz"] .asv-kart-govde { color: var(--asv-metin-soluk); } /* ---- Liste --------------------------------------------------------------- */ [data-tema="duz"] .asv-liste { list-style: none; margin: 0; padding: 0; border: var(--asv-border) solid var(--asv-kenar-renk); border-radius: var(--asv-kose); overflow: hidden; } [data-tema="duz"] .asv-liste-oge { display: flex; align-items: center; gap: var(--asv-space-sm); min-height: var(--asv-target-desktop); padding: var(--asv-space-sm) var(--asv-space-md); border-bottom: var(--asv-border) solid var(--asv-kenar-renk); color: var(--asv-metin-renk); transition: background 0.15s ease; } [data-tema="duz"] .asv-liste-oge:last-child { border-bottom: none; } [data-tema="duz"] .asv-liste-oge:hover, [data-tema="duz"] .asv-liste-oge:focus-within { background: var(--asv-yuzey-yuksek); } /* ---- Tablo --------------------------------------------------------------- */ [data-tema="duz"] .asv-tablo { width: 100%; border-collapse: collapse; border: var(--asv-border) solid var(--asv-kenar-renk); border-radius: var(--asv-kose); overflow: hidden; } [data-tema="duz"] .asv-tablo-baslik { background: var(--asv-yuzey-yuksek); color: var(--asv-metin-soluk); text-align: left; } [data-tema="duz"] .asv-tablo-satir { border-top: var(--asv-border) solid var(--asv-kenar-renk); transition: background 0.15s ease; } [data-tema="duz"] .asv-tablo-satir:nth-child(even) { background: rgb(255 255 255 / 0.02); } [data-tema="duz"] .asv-tablo-satir:hover, [data-tema="duz"] .asv-tablo-satir:focus-within { background: var(--asv-yuzey-yuksek); } [data-tema="duz"] :where(.asv-tablo-baslik, .asv-tablo-satir) > * { padding: var(--asv-space-sm) var(--asv-space-md); } /* ---- Rozet --------------------------------------------------------------- */ [data-tema="duz"] .asv-rozet { display: inline-flex; align-items: center; gap: var(--asv-space-xs); padding: 2px var(--asv-space-sm); border: var(--asv-border) solid currentColor; border-radius: 999px; font-size: var(--asv-text-xs); line-height: 1.4; } /* Renk TEK BASINA anlam tasimaz - metin de degisir (WCAG 1.4.1). */ [data-tema="duz"] .asv-rozet-yuksek { color: var(--asv-hata-renk); } [data-tema="duz"] .asv-rozet-orta { color: var(--asv-dikkat-renk); } [data-tema="duz"] .asv-rozet-dusuk { color: var(--asv-metin-soluk); } /* ---- Ilerleme ------------------------------------------------------------ */ [data-tema="duz"] .asv-ilerleme { height: 8px; background: var(--asv-yuzey-yuksek); border: var(--asv-border) solid var(--asv-kenar-renk); border-radius: 999px; overflow: hidden; } [data-tema="duz"] .asv-ilerleme-dolgu { height: 100%; background: var(--asv-vurgu-renk); transition: width 0.3s ease; } /* ---- Form alanlari ------------------------------------------------------- */ [data-tema="duz"] .asv-alan { display: flex; flex-direction: column; gap: var(--asv-space-xs); margin-bottom: var(--asv-space-md); } [data-tema="duz"] .asv-alan-etiket { color: var(--asv-metin-soluk); font-size: var(--asv-text-sm); } [data-tema="duz"] :where(input, select, textarea), [data-tema="duz"] .asv-alan-girdi { min-height: var(--asv-target-desktop); padding: var(--asv-space-sm); background: var(--asv-zemin-derin); color: var(--asv-metin-renk); border: var(--asv-border) solid var(--asv-kenar-renk); border-radius: var(--asv-kose); font-family: var(--asv-font-govde); font-size: var(--asv-text-base); transition: border-color 0.15s ease; } [data-tema="duz"] .asv-alan-girdi::placeholder { color: var(--asv-metin-cok-soluk); } [data-tema="duz"] .asv-alan-girdi:hover { border-color: var(--asv-kenar-parlak); } [data-tema="duz"] textarea { min-height: calc(var(--asv-target-desktop) * 3); resize: vertical; } /* Hata metni renkle DEGIL, isaretle de anlatilir. */ [data-tema="duz"] .asv-alan-hata { color: var(--asv-hata-renk); font-size: var(--asv-text-sm); } [data-tema="duz"] .asv-alan-hata::before { content: "! "; font-weight: 700; } /* ---- Dugmeler ------------------------------------------------------------ */ [data-tema="duz"] :where(button, [role="button"], summary) { min-height: var(--asv-target-desktop); min-width: var(--asv-target-min); padding: var(--asv-space-sm) var(--asv-space-md); background: var(--asv-yuzey-yuksek); color: var(--asv-metin-renk); border: var(--asv-border) solid var(--asv-kenar-parlak); border-radius: var(--asv-kose); font-family: var(--asv-font-govde); font-size: var(--asv-text-sm); cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease; } [data-tema="duz"] :where(button, [role="button"], summary):hover, [data-tema="duz"] :where(button, [role="button"], summary):active { background: var(--asv-yuzey); border-color: var(--asv-vurgu-renk); } [data-tema="duz"] :where(button, [role="button"], input, select, textarea, summary):disabled { opacity: 0.4; cursor: not-allowed; } /* asv-buton Shadow DOM kullanir - disaridan yalnizca ::part ile girilir. Sozlesme §4. Ozel ozellikler de miras gecer ama part daha acik. */ [data-tema="duz"] asv-buton::part(buton) { font-family: var(--asv-font-govde); border-radius: var(--asv-kose); transition: background 0.15s ease, border-color 0.15s ease; } [data-tema="duz"] asv-buton[tur="tehlike"]::part(buton) { /* Yikici islem: kazara dokunma en pahali hata. Buyuk ve ayrik. */ min-height: var(--asv-target-danger); min-width: var(--asv-target-danger); margin-inline-start: var(--asv-space-md); } [data-tema="duz"] .asv-modal-ayak :where(button, [role="button"], asv-buton) { margin-left: var(--asv-space-sm); } /* ---- Sekme --------------------------------------------------------------- */ [data-tema="duz"] .asv-sekme { min-height: var(--asv-target-desktop); padding: var(--asv-space-sm) var(--asv-space-md); background: transparent; color: var(--asv-metin-soluk); border: none; border-bottom: 2px solid transparent; border-radius: 0; cursor: pointer; } [data-tema="duz"] .asv-sekme:hover { color: var(--asv-metin-renk); } [data-tema="duz"] .asv-sekme-aktif { color: var(--asv-vurgu-renk); border-bottom-color: var(--asv-vurgu-renk); } /* ---- Sutun (kanban) ------------------------------------------------------ */ [data-tema="duz"] .asv-sutun { display: flex; flex-direction: column; gap: var(--asv-space-sm); padding: var(--asv-space-sm); background: var(--asv-yuzey); border: var(--asv-border) solid var(--asv-kenar-renk); border-radius: var(--asv-kose); min-width: 0; } [data-tema="duz"] .asv-sutun-baslik { display: flex; align-items: center; justify-content: space-between; gap: var(--asv-space-sm); padding-bottom: var(--asv-space-sm); border-bottom: var(--asv-border) solid var(--asv-kenar-renk); color: var(--asv-metin-soluk); font-size: var(--asv-text-sm); } /* ---- Modal --------------------------------------------------------------- */ [data-tema="duz"] .asv-modal { background: var(--asv-yuzey); color: var(--asv-metin-renk); border: var(--asv-border) solid var(--asv-kenar-parlak); border-radius: var(--asv-kose); box-shadow: 0 8px 32px rgb(0 0 0 / 0.5); padding: 0; max-width: min(90vw, 640px); } [data-tema="duz"] .asv-modal::backdrop { background: rgb(0 0 0 / 0.6); } [data-tema="duz"] .asv-modal-baslik { padding: var(--asv-space-md); border-bottom: var(--asv-border) solid var(--asv-kenar-renk); font-size: var(--asv-text-lg); } [data-tema="duz"] .asv-modal-govde { padding: var(--asv-space-md); } [data-tema="duz"] .asv-modal-ayak { display: flex; justify-content: flex-end; padding: var(--asv-space-md); border-top: var(--asv-border) solid var(--asv-kenar-renk); } /* ---- Uc durum: yukleniyor · bos · hata ----------------------------------- */ /* Modul JS ucunu de cizer. Biri bicimlendirilmezse tema yarim gorunur. */ [data-tema="duz"] .asv-yukleniyor { display: flex; align-items: center; justify-content: center; gap: var(--asv-space-sm); min-height: 120px; color: var(--asv-metin-soluk); } [data-tema="duz"] .asv-yukleniyor::before { content: ""; width: 16px; height: 16px; border: 2px solid var(--asv-kenar-parlak); border-top-color: var(--asv-vurgu-renk); border-radius: 50%; animation: asv-duz-dondur 0.8s linear infinite; } @keyframes asv-duz-dondur { to { transform: rotate(360deg); } } [data-tema="duz"] .asv-bos-durum { display: grid; place-items: center; gap: var(--asv-space-sm); min-height: 160px; padding: var(--asv-space-lg); color: var(--asv-metin-soluk); text-align: center; border: 1px dashed var(--asv-kenar-renk); border-radius: var(--asv-kose); } [data-tema="duz"] .asv-hata-durumu { display: grid; gap: var(--asv-space-sm); padding: var(--asv-space-md); color: var(--asv-hata-renk); background: var(--asv-yuzey-yuksek); border: var(--asv-border) solid var(--asv-hata-renk); border-radius: var(--asv-kose); } /* Renk tek basina anlam tasimaz - metinsel isaret de var. */ [data-tema="duz"] .asv-hata-durumu::before { content: "Hata"; font-weight: 700; font-size: var(--asv-text-sm); letter-spacing: 0.08em; text-transform: uppercase; } /* ---- Durum siniflari ----------------------------------------------------- */ [data-tema="duz"] .asv-aktif { color: var(--asv-vurgu-renk); } [data-tema="duz"] .asv-secili { background: var(--asv-yuzey-yuksek); } [data-tema="duz"] .asv-vurgulu { border-color: var(--asv-vurgu-renk); } [data-tema="duz"] .asv-devredisi { opacity: 0.4; pointer-events: none; } /* ---- Bilesenler ---------------------------------------------------------- */ [data-tema="duz"] asv-ikon { display: inline-flex; color: currentColor; vertical-align: middle; } [data-tema="duz"] asv-grafik { display: block; max-width: 100%; } /* ---- Isaretleyici cihazlar ----------------------------------------------- */ @media (hover: hover) { [data-tema="duz"] .asv-kart:hover { border-color: var(--asv-kenar-parlak); box-shadow: 0 4px 16px rgb(0 0 0 / 0.45); } } /* Dokunmatikte tum hedefler 44px'e cikar · WCAG 2.5.8 */ @media (pointer: coarse) { [data-tema="duz"] :where(button, [role="button"], summary), [data-tema="duz"] :where(input, select, textarea), [data-tema="duz"] .asv-liste-oge, [data-tema="duz"] .asv-sekme, [data-tema="duz"] .asv-gezinme-oge { min-height: var(--asv-target-touch); } [data-tema="duz"] asv-buton::part(buton) { min-height: var(--asv-target-touch); } } /* ---- Telefon ------------------------------------------------------------- */ @media (max-width: 767px) { [data-tema="duz"] .asv-tablo, [data-tema="duz"] .asv-tablo-baslik, [data-tema="duz"] .asv-tablo-satir, [data-tema="duz"] :where(.asv-tablo-baslik, .asv-tablo-satir) > * { display: block; width: 100%; } [data-tema="duz"] .asv-tablo-baslik { /* Basliklar gizlenir; her hucre kendi etiketini tasir. */ position: absolute; left: -9999px; } [data-tema="duz"] .asv-tablo-satir { margin-bottom: var(--asv-space-sm); border: var(--asv-border) solid var(--asv-kenar-renk); border-radius: var(--asv-kose); } [data-tema="duz"] .asv-ust-cubuk { flex-wrap: wrap; } } /* ---- Hareket hassasiyeti · WCAG 2.3.3 ------------------------------------ */ @media (prefers-reduced-motion: reduce) { [data-tema="duz"] .asv-yukleniyor::before { animation: none; border-top-color: var(--asv-kenar-parlak); } }