/* ============================================================ odoapp — projeye ozel duzeltmeler odo-arayuz.css'ten SONRA yuklenir. Tasarim sistemi dosyasi DEGISTIRILMEZ: o dosya design/design-admin/ kaynagindan kopya, duzenlenirse sonraki senkronda kaybolur. ============================================================ */ /* ---------- 1. DIKEY RITIM ---------- .card'in margin'i yok; .grid/.stats/.cols kendi gap'ini tasiyor ama arka arkaya gelen bloklar birbirine yapisiyordu. .wrap'i dikey akis kabina cevirmek hepsini tek kuralla cozuyor. */ .wrap{ display:flex; flex-direction:column; gap:1.5rem; } /* .stats kendi margin-bottom'unu tasiyordu — gap ile toplanip 3.25rem'e cikiyordu. Sifirlanir, bosluk artik gap'ten gelir. */ .wrap > .stats{margin-bottom:0} /* Kart icindeki ilk baslik ustten bosluk yapmasin */ .card > h3:first-child, .card > h2:first-child{margin-top:0} /* Kart ici bolumler arasi nefes payi */ .card > .tbl, .card > .chips, .card > .sekme-govde{margin-top:.9rem} .card > p + .tbl{margin-top:.6rem} /* ---------- 2. TEMA GECISI ---------- Sorun tutarsizlikti: body arka planini 200 ms'de yumusatiyor, .stat ve .grid .card "all 200ms" tasiyor, duz .card ise HIC gecis tasimiyordu. Tema degisince bir kismi yumusak gecip bir kismi aninda ziplayinca yamali/bozuk gorunuyordu. Cozum: renk degistiren tum yuzeylere AYNI gecis verilir. */ .card, .stat, .kutu, .tbl, .tbl th, .tbl td, .tbl tbody tr, .badge, .chip, .sekme, .sekmeler, .empty, .alert, .ust-cubuk, .giris-kart, .ilerleme, .ilerleme > i, input, select, textarea, code, .kv{ transition:background-color var(--transition), border-color var(--transition), color var(--transition); } /* Ilk boyamada gecis CALISMAZ — yoksa sayfa her acilista yumusakca "renk aliyormus" gibi gorunur. Betik 'de temayi uygulayip bu sinifi kaldirir. */ html.tema-hazir-degil *, html.tema-hazir-degil *::before, html.tema-hazir-degil *::after{ transition:none !important; } /* Sekme govdesi: hidden'in flex/grid tarafindan ezilmemesi icin */ .sekme-govde[hidden]{display:none !important} /* ---------- 3. TEMA DUGMESI KONUMU ---------- Tasarim sistemindeki .tema-btn GIRIS SAYFASI icin tasarlanmis: position:fixed; top:1.1rem; right:1.1rem; background:rgba(255,255,255,.09); color:#e9dff0; Orada dogru — koyu gradyan uzerinde yuzen bir dugme. Ama uygulama kabugunun ust cubuguna konunca: · position:fixed akistan cikariyor -> .ust-sag icindeki yerini yok sayip viewport'un sag ust kosesine yapisiyor, sayfa kaydirilinca da orada kalip icerigin ustune biniyor · yari saydam beyaz renkler acik zeminli ust cubukta okunmuyor Kapsam .ust-cubuk ile sinirli: giris sayfasindaki sabit konum BOZULMAZ. Olculer .mobil-btn ile ayni (34px) — ust cubuktaki iki dugme ayni boyda dursun. */ .ust-cubuk .tema-btn{ position:static; width:34px; height:34px; border-radius:9px; background:var(--surface-100); border:1px solid var(--ink-300); color:var(--ink-700); place-items:center; } .ust-cubuk .tema-btn:hover{ background:var(--ink-200); color:var(--ink-900); border-color:var(--ink-400); } .ust-cubuk .tema-btn:focus-visible{ outline:2px solid var(--brand-primary); outline-offset:2px; } /* ---------- 4. ARAMA FORMU ---------- .filter-row son ogesindeki margin-bottom, .wrap'in gap'i ile toplanip bloklar arasi bosluğu 37-42px'e cikariyordu (olculdu). Form icindeki son satirda margin gereksiz. */ .ara-form .filter-row:last-child{margin-bottom:0} /* Arama terimi: form icinde tam genislik, filtrelerin ustunde */ .ara-form .ara-terim{ display:flex; flex-direction:column; margin-bottom:1rem; } .ara-form .ara-terim input{font-size:1.05rem} /* Alan etiketleri — select'lerin hic etiketi yoktu */ .alan-etiket{ font-size:.76rem; font-weight:500; color:var(--ink-600); letter-spacing:.01em; } /* Sonuc ozeti satiri: kendi p margin'i .wrap gap'ine ekleniyordu */ .wrap > p.small{margin:0} /* Dugmeler .filter-row'da etiketli alanlarla ayni hizada dursun (etiket satiri select'i asagi ittigi icin kayiyorlardi) */ .filter-row .btn-ghost{ height:42px; display:inline-flex; align-items:center; flex:0 0 auto; } /* ---------- 5. GAP ile MARGIN CAKISMASI ---------- Tasarim sistemindeki bazi bilesenler kendi dikey margin'ini tasiyor (.sayfalama margin-top:1.1rem, .empty margin:1rem 0, .filter-row margin-bottom:1.1rem). .wrap artik flex+gap oldugu icin ikisi TOPLANIYOR ve bosluklar 24px yerine 37-42px cikiyordu. Olculdu: [24, 24, 42]. Bilesenler baska yerlerde de kullanildigi icin margin'leri genel olarak silinmez — yalniz .wrap'in DOGRUDAN cocuguyken sifirlanir, bosluk tek kaynaktan (gap) gelsin. */ .wrap > .sayfalama, .wrap > .empty, .wrap > .filter-row, .wrap > .alert, .wrap > .sec, .wrap > h2, .wrap > h3, .wrap > p{ margin-top:0; margin-bottom:0; } /* ---------- 6. ANALIZ RAPORU ---------- */ .rapor h2{font-size:1.15rem;margin:1.4rem 0 .6rem} .rapor h3{font-size:1rem;margin:1.2rem 0 .5rem} .rapor h2:first-child,.rapor h3:first-child{margin-top:0} .rapor p{margin:.5rem 0;line-height:1.65} .rapor ul{margin:.5rem 0 .9rem;padding-left:1.2rem} .rapor li{margin:.3rem 0;line-height:1.6} .rapor .tbl{font-size:.82rem} .rapor .tbl td,.rapor .tbl th{white-space:nowrap} /* Matris tablosu genis — yatay kaydirma kartin disina tasmasin */ .rapor .scroll-x{max-width:100%;overflow-x:auto;margin:.6rem 0 1rem} /* ---------- 7. KARSILASTIRMA MATRISI ---------- Matris 13 sutun / 2185px olabiliyor, kap 1234px — yana kaydiriliyor. Kaydirirken uygulama adi ekrandan cikinca hangi satirda oldugunu kaybediyorsun; karsilastirma tablosunda bu isi kullanilmaz kiliyor. Ilk sutun sabitlenir. */ .rapor .scroll-x{position:relative} .rapor .tbl th:first-child, .rapor .tbl td:first-child{ position:sticky; left:0; z-index:2; background:var(--yuzey); box-shadow:1px 0 0 var(--ink-200); max-width:16rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .rapor .tbl thead th:first-child{z-index:3} /* Kaydirilabilir oldugu belli olsun — sag kenarda soluk gecis. CSS kaydirilabilirligi tespit EDEMEZ; sinif betikle ekleniyor, yoksa dar tabloda da gecis gorunup yaniltiyordu. */ .rapor .scroll-x.kaydirilabilir::after{ content:""; position:absolute; top:0; right:0; bottom:0; width:2.5rem; pointer-events:none; background:linear-gradient(to right, transparent, var(--yuzey)); opacity:.9; } /* Isaret hucreleri ortalanip okunur kalsin */ .rapor .scroll-x.sonda::after{opacity:0;transition:opacity var(--transition)} /* Isaret hucreleri ortalanip okunur kalsin */ .rapor .tbl td:not(:first-child){text-align:center} /* ---------- 8. KAZINAN ACIKLAMA HTML'I ---------- Ucuncu taraf icerik: inline stiller sanitize sirasinda ATILDI (clickjacking riski). Yerlesimi burasi toparlar. */ .aciklama-html{ line-height:1.7; overflow-wrap:anywhere; } .aciklama-html img{ max-width:100%; height:auto; display:block; margin:1rem auto; border-radius:var(--radius-sm); border:1px solid var(--ink-200); background:var(--surface-100); } .aciklama-html h1,.aciklama-html h2{font-size:1.2rem;margin:1.6rem 0 .6rem} .aciklama-html h3,.aciklama-html h4{font-size:1.02rem;margin:1.3rem 0 .5rem} .aciklama-html p{margin:.7rem 0} .aciklama-html ul,.aciklama-html ol{margin:.7rem 0;padding-left:1.4rem} .aciklama-html li{margin:.3rem 0} .aciklama-html table{ border-collapse:collapse;width:100%;margin:1rem 0;font-size:.86rem; display:block;overflow-x:auto; } .aciklama-html th,.aciklama-html td{ border:1px solid var(--ink-200);padding:.45rem .6rem;text-align:left; } .aciklama-html th{background:var(--surface-100);font-weight:600} .aciklama-html a{color:var(--brand-primary);text-decoration:underline} /* Kazinan icerikte cok sayida bos sarmalayici kaliyor */ .aciklama-html div:empty,.aciklama-html p:empty,.aciklama-html span:empty{display:none}