/* ========================================================================== Konya Açık Veri Portalı — Yön D "Modern Turkuaz" 1) TOKEN KATMANI: renk değişkenleri, iki tema, tipografi, temel sıfırlama. Kaynak: design_handoff_konya_acik_veri/README.md §Tasarım tokenları. Prototipteki inline stiller burada CSS değişkenlerine çevrilmiştir; tüm ölçüler README tablolarından birebir alınmıştır. Tema seçimi ile yapılır (base.html içindeki boot script'i sayfa boyanmadan önce yazar → FOUC yok). JS çalışmazsa `prefers-color-scheme` devreye girer; bu yüzden koyu tema kuralları HEM [data-theme="dark"] HEM de medya sorgusu altında tanımlıdır. ========================================================================== */ /* --- Yazı tipi: Plus Jakarta Sans (kendi sunucumuzdan) -------------------- Google Fonts'a doğrudan bağlanmıyoruz: dış istek KVKK açısından ziyaretçi IP'sini üçüncü tarafa taşır ve tek hata noktası ekler. Dosyalar değişken font (variable) olduğu için 400–800 aralığının tamamı iki dosyadan gelir. */ @font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('/konya/fonts/plus-jakarta-sans-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('/konya/fonts/plus-jakarta-sans-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* --- Renk: açık tema (varsayılan) ---------------------------------------- */ :root { --t: #20b2a6; /* ana marka turkuazı */ --t-d: #0e7d75; /* bağlantı / vurgulu sayı */ --t-l: #eaf7f6; /* turkuaz açık dolgu */ --ink: #12222e; /* ana metin */ --muted: #5c7080; /* ikincil metin */ --line: #e4ecec; /* kenarlık ve ayırıcı */ --soft: #f6fbfb; /* nötr açık yüzey */ --bg: #ffffff; /* sayfa zemini */ --card: #ffffff; /* kart yüzeyi */ --header: rgba(255, 255, 255, .92); --deep: #12222e; /* koyu panel zemini */ --deep2: #183542; /* koyu panel gradyan bitişi */ --foot: #0f1c26; /* footer zemini */ --onDeep: #a9bdc7; /* koyu panel üstü ikincil */ --pur: #4c3f8c; /* ikincil vurgu */ --pur-l: #eeecf8; /* mor açık dolgu (etiket çipi) */ /* Koyu panel içinde SABİT kalan yardımcı renkler (tema ile değişmezler: panelin kendi zemini her iki temada da koyudur). */ --on-deep-accent: #4fd6c8; --on-deep-series1: #2f9b93; --on-deep-series2: #a08cf0; --on-deep-series3: #5b6f7c; --on-deep-code: #dbe8ee; --on-deep-line: rgba(255, 255, 255, .09); --on-deep-fill: rgba(255, 255, 255, .06); --on-deep-muted: #9fb6c1; --on-deep-faint: #7f97a3; --on-deep-body: #8ba3ae; --foot-text: #c6d5dd; --foot-line: #1d2f3b; --foot-input: #172a36; /* Gölge — README §Gölge. Koyu temada görsel olarak kaybolurlar; ayırma işini --line yapar (kabul edilmiş davranış). */ --sh-card: 0 6px 18px rgba(18, 34, 46, .04); --sh-card-hover: 0 18px 40px rgba(18, 34, 46, .10); --sh-card-strong: 0 22px 44px rgba(18, 34, 46, .12); --sh-tile-hover: 0 16px 36px rgba(18, 34, 46, .10); --sh-raise: 0 10px 30px rgba(18, 34, 46, .06); --sh-raise-lg: 0 26px 60px rgba(18, 34, 46, .13); --sh-deep: 0 30px 70px rgba(18, 34, 46, .22); --sh-deep-card: 0 26px 60px rgba(18, 34, 46, .20); --sh-btn: 0 10px 26px rgba(32, 178, 166, .30); --sh-btn-sm: 0 6px 18px rgba(32, 178, 166, .32); --sh-search: 0 12px 32px rgba(18, 34, 46, .08); --sh-search-hero: 0 14px 40px rgba(18, 34, 46, .09); --sh-badge: 0 4px 14px rgba(18, 34, 46, .05); --sh-tab-active: 0 3px 10px rgba(18, 34, 46, .07); --sh-avatar: 0 14px 34px rgba(32, 178, 166, .30); --sh-float: 0 18px 40px rgba(32, 178, 166, .32); --sh-logo: 0 10px 30px rgba(18, 34, 46, .07); --sh-soft-btn: 0 8px 22px rgba(18, 34, 46, .08); /* Ölçü — README §Boşluk ve ölçü */ --kv-max: 1240px; --kv-pad: 32px; --kv-stick: 120px; /* sticky yan panel üst boşluğu */ /* Köşe yarıçapı — README §Köşe yarıçapı */ --r-pill: 999px; --r-panel: 28px; --r-card: 22px; --r-tile: 20px; --r-field: 14px; --r-chip: 12px; --r-icon: 16px; --ease: cubic-bezier(.2, .7, .3, 1); color-scheme: light; } /* --- Renk: koyu tema ----------------------------------------------------- */ :root[data-theme="dark"] { --t: #2ec4b6; --t-d: #6fe3d6; --t-l: #123430; --ink: #e9f2f5; --muted: #93a8b4; --line: #25343f; --soft: #14222d; --bg: #0b141d; --card: #111f29; --header: rgba(11, 20, 29, .92); --deep: #0d1a23; --deep2: #122b33; --foot: #08121a; --onDeep: #9db2bd; --pur: #9b8bf0; --pur-l: #241f45; color-scheme: dark; } /* JS kapalıyken sistem tercihine uy. `:not([data-theme="light"])` koruması, kullanıcının açık temayı BİLEREK seçmiş olduğu durumu bozmaz. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --t: #2ec4b6; --t-d: #6fe3d6; --t-l: #123430; --ink: #e9f2f5; --muted: #93a8b4; --line: #25343f; --soft: #14222d; --bg: #0b141d; --card: #111f29; --header: rgba(11, 20, 29, .92); --deep: #0d1a23; --deep2: #122b33; --foot: #08121a; --onDeep: #9db2bd; --pur: #9b8bf0; --pur-l: #241f45; color-scheme: dark; } } /* -------------------------------------------------------------------------- ERİŞİLEBİLİR KONTRAST VARYANTI — ÖLÇÜLDÜ (WCAG 2.1 kontrast oranı, göreli parlaklıkla hesaplandı): #ffffff üzerinde #20b2a6 (--t) .......... 2.63:1 ✗ AA (4.5 gerekir) #ffffff üzerinde #0e7d75 (--t-d) ........ 5.01:1 ✓ AA #12222e üzerinde #5c7080 (--muted) ...... 5.08:1 ✓ AA koyu temada #93a8b4 / #0b141d ........... 7.52:1 ✓ AAA Yani tek sorun BEYAZ METNİN TURKUAZ DOLGU ÜZERİNDE kullanıldığı yerlerdir (birincil düğme, aktif çip, TR/EN kapsülü, arama düğmesi, numara kareleri). Tasarım paketinde bu renk "nihai" olarak veriliyor; bu yüzden VARSAYILAN DAVRANIŞ DEĞİŞTİRİLMEZ — dolgu README'deki gibi `--t` kalır. Portalın kendi Erişilebilirlik Beyanı WCAG 2.1 AA'ya "kısmen uyumlu" olduğunu söylüyor ve "yeterli renk karşıtlığı gözetilmiştir" diyor. Kurum bu ifadeyi tam karşılamak isterse `ckan.ini` içinde: ckanext.konya.accessible_contrast = true Bu, dolguyu `--t-d`ye (5.01:1), hover'ı `--t`ye çevirir. Palet yine README'nin kendi iki turkuazından oluşur; yeni renk EKLENMEZ. -------------------------------------------------------------------------- */ /* Varsayılan: README'deki hâli. */ :root { --t-fill: var(--t); --t-fill-hover: var(--t-d); --on-t: #fff; } /* AÇIK tema + AA: dolgu koyulaşır, metin beyaz kalır (5.01:1). */ :root[data-contrast="aa"] { --t-fill: var(--t-d); --t-fill-hover: var(--t); --on-t: #fff; } /* KOYU tema + AA: koyu temada `--t-d` AÇIK bir turkuazdır, dolgu olarak kullanılamaz. Bunun yerine dolgu `--t` (#2ec4b6) kalır ve ÜZERİNDEKİ METİN koyulaştırılır: #2ec4b6 üzerinde #0d1a23 = 8.08:1 ✓ */ :root[data-theme="dark"][data-contrast="aa"] { --t-fill: var(--t); --t-fill-hover: var(--t-d); --on-t: #0d1a23; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"])[data-contrast="aa"] { --t-fill: var(--t); --t-fill-hover: var(--t-d); --on-t: #0d1a23; } } /* --- Temel ---------------------------------------------------------------- */ html, body { margin: 0; padding: 0; background: var(--bg); color: var(--ink); font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-size: 15px; line-height: 1.6; -webkit-font-smoothing: antialiased; } body { transition: background .35s ease, color .35s ease; } /* Sayfa zemini gövde sarmalayıcısında taşınır (README §Etkileşim: "Sayfa zemini"). CKAN'de bu, page.html içindeki .kv-surface öğesidir. */ .kv-surface { background: var(--bg); color: var(--ink); min-height: 100vh; transition: background .35s ease, color .35s ease; display: flex; flex-direction: column; } .kv-surface > .kv-main { flex: 1 0 auto; } *, *::before, *::after { box-sizing: border-box; } a { color: var(--t-d); text-decoration: none; } a:hover { color: var(--t); } /* WCAG 1.4.1 (Use of Color): akış metninin İÇİNDEKİ bağlantılar yalnız renkle ayırt edilemez — altı çizili olmalılar. Düğme/çip/kart gibi kendi yüzeyi olan bağlantılar bu kuraldan muaftır (onlar zaten şekil olarak ayrışıyor). axe `link-in-text-block` ihlali buradan kapanır. */ /* DİKKAT: `li > a` GİBİ GENİŞ BİR SEÇİCİ KULLANILMAZ — başlık menüsü, footer bağlantıları ve dil kapsülü de `
  • ` yapısındadır ve altları çizilirse tasarım bozulur (ölçüldü). Yalnız akış metni bağlamları. */ p > a, .kv-prose a, .kv-body a, .kv-body-sm a, .kv-meta a, .kv-help a, .kv-post__body a, .kv-alert a, .kv-note a, .kv-tip a { text-decoration: underline; text-underline-offset: 2px; } .kv-crumbs a, .kv-footer__links a, .kv-side__list a, .kv-docnav a, p > a.kv-btn, p > a.kv-chip, p > a.kv-link-more { text-decoration: none; } h1, h2, h3, h4, h5, h6 { margin: 0; letter-spacing: -.03em; font-weight: 800; line-height: 1.15; } p { margin: 0 0 1em; } p:last-child { margin-bottom: 0; } img { max-width: 100%; } /* CKAN çekirdeği TÜM etiketlere `label:after { content: ":" }` basıyor (main.css:10693). Yön D'de etiketlerde iki nokta yok — mockuplarda "İstek başlığı *" biçiminde. Kural global olarak kapatılır; yoksa yalnız bizim formlarımızda değil, onam kutucuklarının sonunda bile " :" görünüyordu (ölçüldü: /datarequest/new, /ckan-admin/config). */ label::after { content: none; } hr { border: 0; border-top: 1px solid var(--line); margin: 28px 0; } ::selection { background: var(--t-l); color: var(--t-d); } /* --- Tipografi ölçeği — README §Tipografi -------------------------------- */ .kv-h-hero { font-size: 62px; line-height: 1.06; font-weight: 800; text-wrap: balance; } .kv-h-page { font-size: 44px; line-height: 1.1; font-weight: 800; } .kv-h-page-sm { font-size: 42px; line-height: 1.1; font-weight: 800; } .kv-h-section { font-size: 36px; line-height: 1.15; font-weight: 800; } .kv-h-section-lg { font-size: 40px; line-height: 1.15; font-weight: 800; } .kv-h-sub { font-size: 26px; line-height: 1.25; font-weight: 800; } .kv-h-sub-sm { font-size: 22px; line-height: 1.3; font-weight: 800; } .kv-h-card { font-size: 19.5px; line-height: 1.3; font-weight: 700; letter-spacing: -.03em; } .kv-lead { font-size: 17.5px; line-height: 1.7; color: var(--muted); } .kv-lead-sm { font-size: 16.5px; line-height: 1.7; color: var(--muted); } .kv-body { font-size: 15.5px; line-height: 1.7; color: var(--muted); } .kv-body-sm { font-size: 14px; line-height: 1.6; color: var(--muted); } .kv-meta { font-size: 12.5px; line-height: 1.6; color: var(--muted); } /* Kicker (üst etiket) */ .kv-kicker { font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--t); } .kv-kicker-sm { font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); } .kv-kicker-xs { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--t-d); } /* --- Erişilebilirlik ------------------------------------------------------ README §Bileşen kuralları/Erişilebilirlik: prototipte inline stil sınırı nedeniyle yazılamadı, üretimde ZORUNLU. Her etkileşimli öğeye uygulanır. */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible, [role="button"]:focus-visible, [role="tab"]:focus-visible { outline: 2px solid var(--t); outline-offset: 2px; border-radius: 4px; } /* Koyu panel içindeki odak halkası, koyu zeminde de görünsün. */ .kv-deep a:focus-visible, .kv-deep button:focus-visible, .kv-footer a:focus-visible, .kv-footer button:focus-visible, .kv-footer input:focus-visible { outline-color: var(--on-deep-accent); } /* Yalnız ekran okuyucu */ .kv-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* İçeriğe atla — odaklanınca görünür */ .kv-skip { position: absolute; left: -9999px; top: 0; z-index: 100; } .kv-skip:focus { left: 16px; top: 16px; background: var(--card); border: 1px solid var(--t); color: var(--ink); padding: 12px 20px; border-radius: var(--r-field); font-weight: 700; box-shadow: var(--sh-raise); } /* --- Hareket azaltma ------------------------------------------------------ README §Etkileşim: tüm belirme, sayaç ve dekoratif animasyonlar kapanır. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } .kv-reveal { opacity: 1 !important; transform: none !important; } } /* --- Animasyonlar — README §Etkileşim ------------------------------------ */ @keyframes kvFloat { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(-18px, 22px, 0) scale(1.06); } } @keyframes kvPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(1.6); } } /* Bölüm belirme. Başlangıç değeri JS ile atanır (README: JS hata verirse içerik gizli kalmamalı) — burada yalnız geçiş tanımlıdır. */ .kv-reveal { transition: opacity .7s var(--ease), transform .7s var(--ease); } /* Tema anahtarı ikon/etiket takası */ .kv-moon { display: none; } :root[data-theme="dark"] .kv-sun { display: none; } :root[data-theme="dark"] .kv-moon { display: block; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .kv-sun { display: none; } :root:not([data-theme="light"]) .kv-moon { display: block; } } /* ========================================================================== 2) BİLEŞEN KATMANI — düğme, çip, kart, arama kutusu, sekme, facet, tablo, form alanı, koyu panel, sayfalama, rozet, kod bloğu, ilerleme çubuğu. Ölçüler: README §Bileşen kuralları (birebir). ========================================================================== */ /* -------------------------------------------------------------------------- Düğme -------------------------------------------------------------------------- */ .kv-btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; border: 0; border-radius: var(--r-pill); padding: 14px 26px; font-family: inherit; font-size: 14.5px; font-weight: 700; line-height: 1.2; white-space: nowrap; cursor: pointer; text-align: center; transition: background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease; } /* Dokunma hedefi en az 44px (README §Erişilebilirlik). */ .kv-btn { min-height: 44px; } .kv-btn--primary { background: var(--t-fill); color: var(--on-t); box-shadow: var(--sh-btn); } .kv-btn--primary:hover, .kv-btn--primary:focus { background: var(--t-fill-hover); color: var(--on-t); } .kv-btn--secondary { background: var(--card); border: 1px solid var(--line); color: var(--ink); padding: 13px 24px; } .kv-btn--secondary:hover, .kv-btn--secondary:focus { border-color: var(--t); color: var(--t-d); } /* Bölüm sonu "tamamını gör" düğmesi — ikincil + hafif gölge */ .kv-btn--ghost { background: var(--card); border: 1px solid var(--line); color: var(--ink); padding: 14px 28px; box-shadow: 0 6px 18px rgba(18, 34, 46, .05); } .kv-btn--ghost:hover { border-color: var(--t); color: var(--t-d); } /* Turkuaz zeminli panel üstünde beyaz düğme */ .kv-btn--on-accent { background: var(--card); color: var(--t-d); padding: 12px 22px; font-size: 14px; } .kv-btn--on-soft { background: var(--card); color: var(--t-d); padding: 13px 24px; box-shadow: var(--sh-soft-btn); } /* Çerçeveli, dolgusuz — kayıt kartındaki "Hesap oluştur" */ .kv-btn--outline { background: transparent; border: 1px solid var(--ink); color: var(--ink); padding: 13px 26px; font-size: 15px; } .kv-btn--outline:hover { border-color: var(--t); color: var(--t-d); } .kv-btn--sm { font-size: 13px; padding: 9px 16px; min-height: 36px; gap: 7px; } .kv-btn--block { width: 100%; } .kv-btn--danger { background: #b93a3a; color: #fff; box-shadow: 0 10px 26px rgba(185, 58, 58, .28); } .kv-btn--danger:hover { background: #a02f2f; color: #fff; } .kv-btn[disabled], .kv-btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; box-shadow: none; } /* Metin bağlantısı biçiminde "devam" eylemi */ /* ⚠️ `min-height: 24px` — dokunma hedefi. Ölçüldü: bu bağlantılar 20-23px yüksekliğindeydi. WCAG 2.2 SC 2.5.8 tek başına duran hedefler için 24x24px ister (cümle içindeki bağlantılar muaf, bunlar değil). Portalın beyan ettiği hedef 2.1 AA olduğu için uygunluk hatası değildi; yine de dokunmatik ekranda ıskalanan bir hedef. Yükseklik satır yüksekliğinden değil `min-height`ten geliyor, böylece hizalama ve satır aralığı değişmiyor. */ .kv-link-more { display: inline-flex; align-items: center; min-height: 24px; gap: 8px; font-size: 14.5px; font-weight: 700; white-space: nowrap; } /* ⚠️ Odak halkası KAPTA, alandaki `outline: none`u dengeler. "Kutu içinde kutu" düzeltmesinde iç alanın çerçevesiyle birlikte `outline`ı da kapatılmıştı; sonuç: klavyeyle gezerken ana arama alanı ve sıralama açılır listesi ODAK HALKASI GÖSTERMİYORDU (sekme testiyle ölçüldü). Halkayı iç alana geri koymak hapı yeniden kutu içinde kutu yapardı; bu yüzden halka, tek parça görünen kabın kendisine veriliyor. `:focus-within` seçildi — `:has()`in desteklenmediği tarayıcıda da çalışır; fare tıklamasında da görünmesi arama kutusu için beklenen davranış. */ .kv-search:focus-within, .kv-control:focus-within { outline: 2px solid var(--t); outline-offset: 2px; } .kv-deep .kv-search:focus-within, .kv-footer .kv-search:focus-within { outline-color: var(--on-deep-accent); } /* Daire ok — kart köşesindeki yönlendirme göstergesi */ .kv-arrow { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: center; color: var(--t-d); flex: none; transition: border-color .3s var(--ease), background .3s var(--ease); } .kv-arrow--sm { width: 30px; height: 30px; } .kv-arrow--lg { width: 36px; height: 36px; } .kv-card:hover .kv-arrow, .kv-row-card:hover .kv-arrow { border-color: var(--t); } /* -------------------------------------------------------------------------- Çip / etiket — üç varyant (README §Çip) -------------------------------------------------------------------------- */ .kv-chip { display: inline-flex; align-items: center; gap: 7px; border-radius: var(--r-pill); padding: 5px 11px; font-size: 11px; font-weight: 700; line-height: 1.5; white-space: nowrap; } .kv-chip--t { background: var(--t-l); color: var(--t-d); } .kv-chip--n { background: var(--soft); color: var(--muted); font-weight: 600; } /* Etiket çipi — format çipi (`--t`, turkuaz) ile aynı görsel dilde ama mor. Müşteri geri bildirimi: katalog kartlarında etiketler tek gri kutuda "·" ile birleştiriliyordu; tek tek ve renkli olmaları istendi. Üç çip ailesi artık birbirinden ayırt edilebilir: turkuaz = dosya formatı, mor = etiket, nötr = kaynak sayısı/durum. */ .kv-chip--tag { background: var(--pur-l); color: var(--pur); font-weight: 700; } a.kv-chip--tag:hover, button.kv-chip--tag:hover { background: var(--pur); color: #fff; } .kv-chip--on { background: var(--t-fill); color: var(--on-t); } .kv-chip--ink { background: var(--ink); color: var(--bg); } /* Kenarlıklı nötr çip — lisans/rozet satırı */ .kv-chip--outline { background: var(--card); border: 1px solid var(--line); color: var(--muted); font-size: 11.5px; padding: 6px 13px; } .kv-chip--lg { font-size: 12px; padding: 6px 12px; } .kv-chip--xl { font-size: 13px; padding: 9px 17px; } /* Tıklanabilir çip (facet, kısayol) */ a.kv-chip, button.kv-chip { cursor: pointer; border: 0; font-family: inherit; transition: background .2s ease, color .2s ease, border-color .2s ease; } a.kv-chip--n:hover, button.kv-chip--n:hover { background: var(--t-l); color: var(--t-d); } a.kv-chip--outline:hover { border-color: var(--t); color: var(--t-d); } /* Seçili filtre çipi — sonunda ✕ */ .kv-chip--active { background: var(--t-fill); color: var(--on-t); font-size: 12px; padding: 6px 12px; } .kv-chip--active:hover { background: var(--t-fill-hover); color: var(--on-t); } .kv-chip__x { font-size: 12px; line-height: 1; opacity: .85; } .kv-chip-row { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; } /* Çip süzgeçli ızgara (ana sayfa "Popüler veri setleri"). Havuz 24 karttır ama ekranda 6 durur. JS KAPALIYKEN de öyle olsun diye sınır CSS'te; JS açılınca `is-filterable` sınıfı gelir ve görünürlüğü `hidden` niteliği üzerinden JS yönetir. */ [data-kv-filter-target] > :nth-child(n+7) { display: none; } [data-kv-filter-target].is-filterable > :nth-child(n+7) { display: revert; } [data-kv-filter-target].is-filterable > [hidden] { display: none; } .kv-chip-row--lg { gap: 9px; } /* Kısayol çipi (hero "Popüler:") */ .kv-shortcut { font-size: 13px; font-weight: 600; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 7px 14px; color: var(--ink); transition: border-color .2s ease, color .2s ease; } .kv-shortcut:hover { border-color: var(--t); color: var(--t-d); } /* -------------------------------------------------------------------------- Kart -------------------------------------------------------------------------- */ .kv-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--sh-card); color: var(--ink); display: block; } .kv-card--soft { background: var(--soft); box-shadow: none; } .kv-card--pad { padding: 24px 26px; } .kv-card--pad-s { padding: 22px 24px; } .kv-card--pad-l { padding: 32px 34px; } /* Havalanan kart — README §Kart. Ana sayfada -6px, alt sayfalarda -4px. */ .kv-lift { transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease); } .kv-lift:hover { transform: translateY(-4px); box-shadow: var(--sh-card-hover); border-color: var(--t); } .kv-lift--home:hover { transform: translateY(-6px); } .kv-lift--strong:hover { box-shadow: var(--sh-card-strong); } .kv-lift--tile:hover { box-shadow: var(--sh-tile-hover); } /* Kart içi alt bilgi şeridi (üstünde ayırıcı çizgi) */ .kv-card__foot { display: flex; align-items: center; gap: 10px; border-top: 1px solid var(--line); padding-top: 13px; } /* Sayı + birim ("70 veri seti") */ .kv-count { display: flex; align-items: baseline; gap: 6px; border-top: 1px solid var(--line); padding-top: 12px; } /* Ortalanmış kutularda sayı satırı da ortalanır ve ayırıcı çizgi kartın tam genişliğini kaplar. */ .kv-tile .kv-count, .kv-org-tile .kv-count { width: 100%; justify-content: center; } .kv-count__n { font-size: 22px; font-weight: 800; color: var(--t-d); line-height: 1; letter-spacing: -.02em; } .kv-count__l { font-size: 12.5px; color: var(--muted); font-weight: 600; } /* İkon kutusu — kategori/organizasyon kartı */ .kv-icobox { border-radius: var(--r-icon); background: var(--t-l); display: flex; align-items: center; justify-content: center; flex: none; } .kv-icobox img, .kv-icobox svg { max-width: 100%; max-height: 100%; object-fit: contain; } .kv-icobox--58 { width: 58px; height: 58px; padding: 12px; } /* KULLANICI KARARI (README'den sapma): kategori ve organizasyon kutularında ikon, turkuaz kutunun içinde 34px'e sıkışıyordu (ölçüldü: 221px'lik kartta 58px kutu, 34x31px ikon). Kutu kaldırıldı, ikon büyütüldü. Prototipteki 58px'lik turkuaz kutu diğer kullanımlarda (fikir kartları, iletişim satırları, aktivite akışı) AYNEN duruyor. */ .kv-icobox--plain { width: 88px; height: 88px; padding: 0; background: transparent; border-radius: 0; } .kv-icobox--plain img, .kv-icobox--plain svg { width: 100%; height: 100%; } .kv-icobox--82 { width: 82px; height: 82px; padding: 14px; border-radius: 20px; } .kv-icobox--46 { width: 46px; height: 46px; border-radius: var(--r-field); } .kv-icobox--36 { width: 36px; height: 36px; border-radius: var(--r-chip); } .kv-icobox--32 { width: 32px; height: 32px; border-radius: 10px; } .kv-icobox--t { color: var(--t-d); } /* Baş harf rozeti */ .kv-initials { border-radius: 9px; background: var(--t-l); color: var(--t-d); font-weight: 800; display: flex; align-items: center; justify-content: center; flex: none; width: 26px; height: 26px; font-size: 10.5px; text-transform: uppercase; } .kv-initials--38 { width: 38px; height: 38px; border-radius: 50%; font-size: 13px; } .kv-initials--96 { width: 96px; height: 96px; border-radius: 28px; background: var(--t-fill); color: var(--on-t); font-size: 32px; box-shadow: var(--sh-avatar); } .kv-initials--org { background: var(--t-fill); color: var(--on-t); font-size: 12px; } /* Format rozeti (kaynak satırı) */ .kv-fmt { border-radius: var(--r-field); background: var(--t-l); color: var(--t-d); font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex: none; width: 46px; height: 46px; text-transform: uppercase; overflow: hidden; padding: 0 3px; text-align: center; line-height: 1.1; } .kv-fmt--44 { width: 44px; height: 44px; } /* Numara karesi (adım kutusu) */ .kv-step-n { width: 38px; height: 38px; border-radius: var(--r-chip); background: var(--t-fill); color: var(--on-t); display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 800; flex: none; } /* -------------------------------------------------------------------------- Arama kutusu (kapsül) -------------------------------------------------------------------------- */ /* Arama kapsülü. TASARIM KARARI (kullanıcı): kapsülün İÇİNDEKİ input'un kendi çerçevesi YOKTUR — çerçeve yalnız kapsülündür. Büyüteç ikonu SAĞDA, "Ara" düğmesinin içindedir; solda ayrı bir ikon kalmaz (prototipte solda ayrı bir büyüteç vardı, kapsül + ikon + çerçeveli input üst üste binerek "kutu içinde kutu" görüntüsü veriyordu). */ .kv-search { display: flex; align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 6px 6px 6px 22px; box-shadow: var(--sh-search); min-width: 0; } /* `.kv-search__input` sınıfı ZORUNLU: köprü katmanı `kv-` sınıfı olmayan input'lara kendi çerçevesini veriyor (bkz. kv-bridge.css notu). */ .kv-search .kv-search__input { flex: 1; border: 0; outline: none; font-family: inherit; font-size: 15px; padding: 12px 12px 12px 0; color: var(--ink); background: transparent; min-width: 0; min-height: 0; border-radius: 0; box-shadow: none; } .kv-search .kv-search__input::placeholder { color: var(--muted); } .kv-search .kv-search__btn { display: inline-flex; align-items: center; gap: 8px; border: 0; background: var(--t-fill); color: var(--on-t); font-family: inherit; font-size: 14px; font-weight: 700; padding: 12px 24px; border-radius: var(--r-pill); cursor: pointer; white-space: nowrap; min-height: 0; box-shadow: none; transition: background .2s ease; } .kv-search .kv-search__btn:hover { background: var(--t-fill-hover); } /* Düğmesi olmayan varyantta (tablo içi arama) büyüteç sağ uçta durur. */ .kv-search__icon { flex: none; color: var(--muted); display: flex; margin-left: 8px; } /* Hero varyantı — README §Ana sayfa/Hero */ .kv-search--hero { padding: 7px 7px 7px 22px; box-shadow: var(--sh-search-hero); /* Tek kolonlu ortalı hero'da (Tasarım h) kutu sayfanın ana öğesi hâline geldi; 600px ortada yalnız kalıyordu. `width:100%` + üst sınır, dar ekranda da sütuna oturmasını sağlar. */ width: 100%; max-width: 680px; } .kv-search--hero .kv-search__input { font-size: 15.5px; padding: 14px 14px 14px 0; } .kv-search--hero .kv-search__btn { font-size: 15px; padding: 14px 28px; } /* Küçük varyant — kategori sayfası, tablo içi arama */ .kv-search--sm { padding: 6px 6px 6px 18px; } .kv-search--sm .kv-search__input { font-size: 14.5px; padding: 11px 12px 11px 0; } .kv-search--sm .kv-search__btn { font-size: 13.5px; padding: 11px 20px; } /* Bir kartın İÇİNDE duran arama (tablo içi arama). Kartın kendi çerçevesi zaten var; buraya ikinci bir çerçeve koymak "kutu içinde kutu" üretiyor. Çerçeve yerine yumuşak dolgu kullanılır — alan hissi korunur, çizgi ikilenmez. */ .kv-search--inline { background: var(--soft); border-color: transparent; box-shadow: none; padding: 4px 14px; } .kv-search--inline:focus-within { border-color: var(--t); background: var(--bg); } .kv-search--inline .kv-search__input { font-size: 13.5px; padding: 8px 0; } /* Yalnız input (organizasyon ara) */ .kv-input-pill { border: 1px solid var(--line); background: var(--card); border-radius: var(--r-pill); font-family: inherit; font-size: 14px; padding: 12px 20px; outline: none; color: var(--ink); min-height: 44px; } /* -------------------------------------------------------------------------- Sekme rayı -------------------------------------------------------------------------- */ .kv-tabs { display: flex; gap: 6px; background: var(--soft); border-radius: var(--r-pill); padding: 5px; width: fit-content; max-width: 100%; flex-wrap: wrap; list-style: none; margin: 0; } .kv-tabs a, .kv-tabs button, .kv-tabs > li > a { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--muted); padding: 9px 18px; border-radius: var(--r-pill); border: 0; background: transparent; font-family: inherit; cursor: pointer; white-space: nowrap; transition: background .2s ease, color .2s ease, box-shadow .2s ease; } .kv-tabs a:hover, .kv-tabs button:hover { color: var(--ink); } .kv-tabs .active > a, .kv-tabs a.active, .kv-tabs button.active, .kv-tabs [aria-selected="true"] { background: var(--card); color: var(--ink); font-weight: 700; box-shadow: var(--sh-tab-active); } .kv-tabs__count { font-size: 11.5px; font-weight: 700; color: var(--muted); } /* Görünüm anahtarı — daha küçük */ .kv-tabs--sm a, .kv-tabs--sm button { font-size: 13px; padding: 8px 16px; } /* Sıralama kontrolü kapsülü */ .kv-control { display: inline-flex; align-items: center; gap: 8px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 9px 15px; font-size: 13.5px; font-weight: 700; color: var(--ink); min-height: 44px; } /* `.kv-control__select` sınıfı ZORUNLU — bkz. `.kv-search__input` notu. Kapsül zaten çerçeveli; içteki select çerçevesiz ve dolgusuz olmalı. */ .kv-control .kv-control__select { border: 0; /* ⚠️ `transparent` DEĞİL. Chrome, `appearance:none` verilmiş bir select'in AÇILIR LİSTESİNİ select'in kendi `background-color` değeriyle çizer. Şeffaf bırakılınca liste beyaz zeminde açılıyor, metin rengi ise select'ten miras alınan `--ink` oluyordu: koyu temada --ink AÇIK bir renk, yani BEYAZ ÜSTÜNE BEYAZ — seçenekler okunamıyordu. `var(--card)` kapsülün zemini ile aynı; görünüm değişmez, açılır liste ise temaya uyar. `option` kuralı da tarayıcı farkına karşı açıkça yazılır (Firefox listeyi option'dan boyar). */ background-color: var(--card); background-image: none; font-family: inherit; font-size: 13.5px; font-weight: 700; color: var(--ink); outline: none; cursor: pointer; /* ⚠️ Ok simgesi select'in KARDEŞİ olan ayrı bir . Eskiden select okun altına uzanmadığı için oka tıklamak listeyi AÇMIYORDU; yalnızca yazıya tıklayınca açılıyordu ("sıralama menüsü bazen açılmıyor"). Sağ dolgu, aradaki 8px boşluk + 13px ok kadar büyütülür; aynı miktarda negatif dış boşlukla kapsülün genişliği DEĞİŞMEZ. Böylece select'in tıklama alanı okun altını da kaplar. */ padding: 0 25px 0 0; margin-right: -21px; min-height: 0; border-radius: 0; box-shadow: none; appearance: none; -webkit-appearance: none; max-width: 220px; } .kv-control .kv-control__select option { background-color: var(--card); color: var(--ink); } /* Ok yalnızca göstergedir; tıklama altındaki select'e geçmelidir. */ .kv-control > svg { pointer-events: none; flex: none; position: relative; } .kv-control__label { font-size: 13px; color: var(--muted); font-weight: 400; } .kv-control-wrap { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; } /* -------------------------------------------------------------------------- Facet paneli -------------------------------------------------------------------------- */ .kv-facets { display: flex; flex-direction: column; gap: 16px; } .kv-facet { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); padding: 22px 24px; } .kv-facet--active { background: var(--soft); } .kv-facet__title { font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; } .kv-facet__list { display: flex; flex-direction: column; } .kv-facet__item { display: flex; align-items: center; gap: 10px; padding: 7px 0; font-size: 13.5px; cursor: pointer; border-bottom: 1px solid var(--line); color: var(--ink); min-height: 40px; } .kv-facet__item:last-child { border-bottom: 0; } .kv-facet__item:hover { color: var(--t-d); } /* Kutucuk yalnızca GÖSTERGEDİR; gerçek eylem sarmalayan ``dadır (CKAN facet'leri URL parametresiyle çalışır). Tıklamanın kutucukta yutulmaması için olayları geçirir — aksi hâlde kutucuğun tam üstüne tıklayan kullanıcı için filtre çalışmıyordu. */ .kv-facet__item input[type="checkbox"] { accent-color: var(--t); width: 15px; height: 15px; flex: none; margin: 0; pointer-events: none; } /* Etiket tek satırda kesilmez: ayırt edici ek (örn. lisans sürümü) tam da sonda oluyor ve kesilince iki seçenek aynı görünüyordu. En fazla iki satıra sarar, taşarsa oradan kırpılır; tam metin `title`da. */ .kv-facet__name { flex: 1; font-weight: 600; min-width: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.35; overflow: hidden; } .kv-facet__count { color: var(--muted); font-size: 12px; flex: none; } .kv-facet__more { font-size: 12.5px; font-weight: 700; display: inline-flex; align-items: center; min-height: 24px; /* dokunma hedefi — bkz. .kv-link-more notu */ margin-top: 12px; } /* Facet kartı başlığı (başlık + "Temizle") */ .kv-facet__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .kv-facet__head h2 { font-size: 15px; font-weight: 800; margin: 0; } .kv-facet__clear { font-size: 12.5px; font-weight: 700; display: inline-flex; align-items: center; min-height: 24px; /* dokunma hedefi — bkz. .kv-link-more notu */ flex: none; } /* -------------------------------------------------------------------------- Tablo -------------------------------------------------------------------------- */ .kv-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; /* Kaydırma çubuğu GÖRÜNÜR tutulur: tablo kutunun sağında kesildiğinde kullanıcının kaydırabileceğini anlamasının tek işareti budur. (macOS'ta çubuk varsayılan olarak gizlidir.) */ scrollbar-width: thin; scrollbar-color: var(--line) transparent; } .kv-table-wrap::-webkit-scrollbar { height: 10px; } .kv-table-wrap::-webkit-scrollbar-track { background: var(--soft); } .kv-table-wrap::-webkit-scrollbar-thumb { background: var(--line); border-radius: var(--r-pill); border: 2px solid var(--soft); } .kv-table-wrap:hover::-webkit-scrollbar-thumb { background: var(--muted); } .kv-table-wrap:hover { scrollbar-color: var(--muted) transparent; } .kv-table { width: 100%; border-collapse: collapse; font-size: 13.5px; } .kv-table thead tr { background: var(--soft); text-align: left; } .kv-table th { padding: 13px 18px; font-weight: 800; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); white-space: nowrap; text-align: left; } .kv-table td { padding: 13px 18px; color: var(--muted); vertical-align: top; } .kv-table tbody tr { border-top: 1px solid var(--line); } .kv-table tbody td:first-child { font-weight: 600; color: var(--ink); } .kv-table--dense td { padding: 12px 18px; } /* VERİ ÖNİZLEME TABLOSU — kullanıcının yüklediği ham veriyi gösterir. Hücre içeriği ne olursa olsun SATIRI TEK SATIRDA tutar: gerçek veride geometri/WKT sütunları binlerce karakterlik tek bir metin olabiliyor ve sarılmasına izin verilirse satır yüksekliği 400px'e çıkıp tablo okunmaz hâle geliyor (ölçüldü: otopark-bilgileri kaynağı). Uzun değer kırpılır, tamamı `title` ile üzerine gelince görünür; tablo kendi `overflow-x: auto` sarmalayıcısında yatay kayar. API parametre tabloları ve veri sözlüğü bu sınıfı ALMAZ — orada açıklamaların sarılması istenir. */ .kv-table--data td, .kv-table--data th { max-width: 280px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Tanım tablosu — "Ek Bilgi" (iki kolon ızgara) */ .kv-dl { display: grid; grid-template-columns: 1fr 1.4fr; font-size: 14px; } .kv-dl > dt, .kv-dl > .kv-dl__k { padding: 15px 20px; border-bottom: 1px solid var(--line); background: var(--soft); font-weight: 700; color: var(--ink); margin: 0; } .kv-dl > dd, .kv-dl > .kv-dl__v { padding: 15px 20px; border-bottom: 1px solid var(--line); color: var(--muted); margin: 0; min-width: 0; overflow-wrap: anywhere; } .kv-dl > :nth-last-child(1), .kv-dl > :nth-last-child(2) { border-bottom: 0; } /* Yan panel tanım listesi (satır satır) */ .kv-kv { display: flex; justify-content: space-between; gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; } .kv-kv:last-child { border-bottom: 0; } .kv-kv__k { color: var(--muted); flex: none; } .kv-kv__v { font-weight: 700; text-align: right; min-width: 0; overflow-wrap: anywhere; } /* -------------------------------------------------------------------------- Form alanı -------------------------------------------------------------------------- */ .kv-field { display: block; } .kv-field + .kv-field { margin-top: 22px; } .kv-label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 8px; color: var(--ink); } .kv-req { color: var(--t-d); } .kv-input, .kv-select, .kv-textarea { width: 100%; box-sizing: border-box; border: 1px solid var(--line); border-radius: var(--r-field); background: var(--bg); color: var(--ink); font-family: inherit; font-size: 15px; padding: 13px 16px; outline: none; transition: border-color .2s ease, box-shadow .2s ease; } .kv-input:hover, .kv-select:hover, .kv-textarea:hover { border-color: var(--muted); } .kv-input:focus, .kv-select:focus, .kv-textarea:focus { border-color: var(--t); } .kv-textarea { min-height: 130px; resize: vertical; } .kv-textarea--sm { min-height: 100px; } .kv-textarea--lg { min-height: 140px; } .kv-select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235c7080' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; padding-right: 42px; } :root[data-theme="dark"] .kv-select { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2393a8b4' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); } .kv-help { font-size: 12px; color: var(--muted); margin-top: 7px; } .kv-error { font-size: 12.5px; color: #c0392b; margin-top: 7px; font-weight: 600; } .kv-input--invalid, .kv-select--invalid, .kv-textarea--invalid { border-color: #c0392b; } /* Onay kutusu satırı */ .kv-check { display: flex; align-items: flex-start; gap: 11px; font-size: 13.5px; line-height: 1.6; color: var(--muted); cursor: pointer; } .kv-check input[type="checkbox"], .kv-check input[type="radio"] { accent-color: var(--t); width: 16px; height: 16px; margin-top: 2px; flex: none; cursor: pointer; } .kv-check--inline { align-items: center; gap: 9px; } .kv-check--inline input { margin-top: 0; width: 15px; height: 15px; } /* Form kartı ve eylem şeridi */ .kv-form-card { background: var(--card); border: 1px solid var(--line); border-radius: 26px; padding: 32px 34px; box-shadow: var(--sh-raise); display: flex; flex-direction: column; gap: 22px; } /* `gap` kullanan sarmalayıcılarda kardeş kuralının (`.kv-field + .kv-field`) payı çift boşluk üretir. Izgarada ise yalnız İKİNCİ hücreye uygulandığı için kolonlar hizasından kayar: kayıt formunda "Adı Soyadı" alanı "Kullanıcı Adı" alanına göre 22px aşağıda duruyordu (müşteri geri bildirimi). Boşluğu tek kaynaktan — kapsayıcının `gap` değerinden — yönetmek için gap'li tüm sarmalayıcılarda payı sıfırla. */ .kv-form-card .kv-field + .kv-field, .kv-form-grid > .kv-field + .kv-field, .kv-auth__fields > .kv-field + .kv-field { margin-top: 0; } .kv-form-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 22px; } .kv-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } /* Parola gücü göstergesi (üç parça) */ .kv-strength { display: flex; gap: 5px; margin-top: 9px; } .kv-strength span { flex: 1; height: 4px; border-radius: var(--r-pill); background: var(--line); transition: background .25s ease; } .kv-strength[data-level="1"] span:nth-child(1), .kv-strength[data-level="2"] span:nth-child(-n+2), .kv-strength[data-level="3"] span { background: var(--t); } /* -------------------------------------------------------------------------- Koyu panel -------------------------------------------------------------------------- */ .kv-deep { background: linear-gradient(160deg, var(--deep) 0%, var(--deep2) 100%); border-radius: var(--r-card); color: #fff; padding: 24px; } .kv-deep--flat { background: var(--deep); } .kv-deep--panel { border-radius: 30px; padding: 40px; box-shadow: var(--sh-deep); } .kv-deep--card { border-radius: var(--r-panel); padding: 44px 44px 40px; box-shadow: var(--sh-deep-card); } .kv-deep a { color: var(--on-deep-accent); } .kv-deep a:hover { color: #fff; } .kv-deep__kicker { font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--on-deep-accent); margin-bottom: 12px; } .kv-deep__body { font-size: 13.5px; line-height: 1.65; color: var(--onDeep); margin: 0; } .kv-deep__title { font-size: 16.5px; font-weight: 700; line-height: 1.35; margin-bottom: 10px; } /* Koyu panel içi KPI kutusu */ .kv-kpi { background: var(--on-deep-fill); border: 1px solid var(--on-deep-line); border-radius: 18px; padding: 20px 22px; } .kv-kpi__l { font-size: 12.5px; color: var(--on-deep-muted); font-weight: 600; } .kv-kpi__n { font-size: 30px; font-weight: 800; line-height: 1.25; white-space: nowrap; letter-spacing: -.02em; } .kv-kpi__d { font-size: 12px; font-weight: 700; color: var(--on-deep-accent); } .kv-kpi__d--pur { color: var(--on-deep-series2); } /* Açık zeminli KPI kartı (organizasyon / profil üst bandı) */ .kv-stat { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 18px 20px; } .kv-stat__l { font-size: 12px; color: var(--muted); font-weight: 600; } .kv-stat__n { font-size: 26px; font-weight: 800; line-height: 1.2; letter-spacing: -.02em; } /* Kod / komut kutusu */ .kv-code { display: block; background: var(--on-deep-fill); border-radius: var(--r-chip); padding: 12px 14px; font-size: 11.5px; line-height: 1.6; word-break: break-all; color: var(--on-deep-code); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } .kv-pre { background: var(--deep); color: var(--on-deep-code); font-size: 12.5px; line-height: 1.7; padding: 22px; border-radius: 18px; margin: 0; overflow-x: auto; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } /* -------------------------------------------------------------------------- Sayfalama — README §Sayfalama -------------------------------------------------------------------------- */ .kv-pager, .pagination { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; list-style: none; padding: 0; margin: 0; } .kv-pager a, .kv-pager span, .pagination li > a, .pagination li > span { min-width: 38px; height: 38px; padding: 0 10px; border-radius: var(--r-chip); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; font-size: 13.5px; font-weight: 700; color: var(--ink); background: var(--card); transition: border-color .2s ease, color .2s ease; } .kv-pager a:hover, .pagination li > a:hover { border-color: var(--t); color: var(--t-d); } .kv-pager .active, .kv-pager [aria-current="page"], .pagination li.active > a, .pagination li.active > span { background: var(--t-fill); color: var(--on-t); border-color: var(--t); font-weight: 800; } .kv-pager .kv-pager__gap, .pagination li.disabled > span, .pagination .pager_dotdot { border: 0; background: transparent; color: var(--muted); min-width: auto; padding: 0 8px; } /* CKAN'in kendi pager çıktısı: .pagination-wrapper > ul.pagination > li.page-item > a.page-link. Aynı görünümü alsın. */ .pagination-wrapper { display: flex; justify-content: flex-start; } .pagination .page-item > .page-link { min-width: 38px; height: 38px; padding: 0 10px; border-radius: var(--r-chip); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; font-size: 13.5px; font-weight: 700; color: var(--ink); background: var(--card); transition: border-color .2s ease, color .2s ease; } .pagination .page-item > .page-link:hover { border-color: var(--t); color: var(--t-d); } .pagination .page-item.active > .page-link, .pagination .page-item.active > span { background: var(--t-fill); color: var(--on-t); border-color: var(--t); font-weight: 800; } .pagination .pager_dotdot { border: 0; background: transparent; color: var(--muted); padding: 0 8px; display: flex; align-items: center; } .kv-pager-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 32px; flex-wrap: wrap; } /* -------------------------------------------------------------------------- İlerleme çubuğu -------------------------------------------------------------------------- */ .kv-bar { flex: 1; height: 8px; border-radius: var(--r-pill); background: var(--t-l); display: block; overflow: hidden; } .kv-bar > span { display: block; height: 100%; border-radius: var(--r-pill); background: var(--t); } .kv-bar--pur > span { background: var(--pur); } /* Koyu panel içi ince çubuk */ .kv-bar--deep { height: 6px; background: var(--on-deep-line); } .kv-bar--deep > span { background: var(--on-deep-accent); } .kv-bar--deep.is-s2 > span { background: var(--on-deep-series2); } .kv-bar--deep.is-s3 > span { background: var(--on-deep-series3); } /* -------------------------------------------------------------------------- Bilgi şeridi / uyarı -------------------------------------------------------------------------- */ .kv-note { background: var(--soft); border: 1px solid var(--line); border-radius: var(--r-card); padding: 20px 26px; display: flex; align-items: center; gap: 14px; font-size: 14px; line-height: 1.6; color: var(--muted); } .kv-note--dashed { border: 1px dashed var(--t); } .kv-note__i { width: 34px; height: 34px; border-radius: 50%; background: var(--t-l); color: var(--t-d); display: flex; align-items: center; justify-content: center; flex: none; font-weight: 800; } /* İpucu bloğu — solunda 3px turkuaz çubuk */ .kv-tip { background: var(--soft); border-left: 3px solid var(--t); border-radius: 0 16px 16px 0; padding: 18px 22px; font-size: 14.5px; line-height: 1.7; color: var(--ink); } /* Canlı nokta rozeti */ .kv-live { display: inline-flex; align-items: center; gap: 8px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 7px 16px; font-size: 13px; font-weight: 600; color: var(--t-d); box-shadow: var(--sh-badge); } .kv-live__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--t); display: block; animation: kvPulse 2.4s ease-in-out infinite; } .kv-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--line); display: block; flex: none; } /* -------------------------------------------------------------------------- Kırıntı navigasyonu -------------------------------------------------------------------------- */ .kv-crumbs { font-size: 12.5px; color: var(--muted); margin-bottom: 18px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; list-style: none; padding: 0; } .kv-crumbs li { display: flex; align-items: center; gap: 6px; } .kv-crumbs li + li::before { content: "/"; opacity: .5; } .kv-crumbs a { color: var(--t-d); } .kv-crumbs [aria-current="page"] { color: var(--muted); } /* -------------------------------------------------------------------------- Bölüm başlığı (kicker + H2 + sağda bağlantı) -------------------------------------------------------------------------- */ .kv-sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: 32px; flex-wrap: wrap; } .kv-sec-head .kv-kicker { margin-bottom: 12px; display: block; } /* -------------------------------------------------------------------------- Boş durum -------------------------------------------------------------------------- */ .kv-empty { background: var(--soft); border: 1px solid var(--line); border-radius: var(--r-card); padding: 48px 40px; text-align: center; } .kv-empty__t { font-size: 19px; font-weight: 700; margin-bottom: 8px; color: var(--ink); } .kv-empty__b { font-size: 14.5px; line-height: 1.7; color: var(--muted); margin: 0 auto 20px; max-width: 52ch; } /* -------------------------------------------------------------------------- Flash mesajları — mockupta yok, mockup diline uyarlandı -------------------------------------------------------------------------- */ .kv-flash { display: flex; flex-direction: column; gap: 12px; } .kv-flash:not(:empty) { margin-bottom: 24px; } .kv-alert { border-radius: var(--r-tile); padding: 16px 22px; font-size: 14.5px; line-height: 1.6; border: 1px solid var(--line); background: var(--soft); color: var(--ink); display: flex; gap: 12px; align-items: flex-start; } .kv-alert::before { content: ""; width: 4px; align-self: stretch; border-radius: var(--r-pill); background: var(--muted); flex: none; } .kv-alert--success { background: var(--t-l); border-color: transparent; } .kv-alert--success::before { background: var(--t); } .kv-alert--error::before, .kv-alert--danger::before { background: #c0392b; } .kv-alert--warning::before { background: #d4922a; } .kv-alert--info::before { background: var(--pur); } /* -------------------------------------------------------------------------- Paydaş logosu şeridi (ana sayfa, istatistik bandının altı) Müşteri geri bildirimi — Tasarım e. JS YOK: kayma saf CSS animasyonu. Şablon listeyi İKİ KEZ basar; şerit kendi genişliğinin yarısı kadar kaydırılınca ikinci kopya birincinin yerine oturur ve döngü dikişsiz görünür. ERİŞİLEBİLİRLİK: `prefers-reduced-motion: reduce` seçili kullanıcıda animasyon TAMAMEN durur ve şerit parmakla/klavyeyle kaydırılabilir normal bir listeye döner — hareket duyarlılığı olan kullanıcı için dönen bir şerit rahatsız edicidir. Fareyle üzerine gelince de durur ki logoya tıklamak isteyen kişi hareketli hedefi kovalamasın. -------------------------------------------------------------------------- */ .kv-logos { margin-top: 20px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-panel); padding: 22px 0 24px; } .kv-logos__head { font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); text-align: center; margin-bottom: 18px; padding: 0 24px; } .kv-logos__viewport { overflow: hidden; /* Kenarlarda yumuşak geçiş: logolar panelin içinden çıkıp giriyormuş gibi görünür, sert kesim olmaz. */ -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .kv-logos__track { display: flex; width: max-content; animation: kv-logo-kay 42s linear infinite; } .kv-logos:hover .kv-logos__track, .kv-logos:focus-within .kv-logos__track { animation-play-state: paused; } .kv-logos__set { display: flex; align-items: center; gap: 46px; margin: 0; padding: 0 23px; list-style: none; } .kv-logos__set li { flex: none; } .kv-logos__set a { display: flex; align-items: center; justify-content: center; height: 64px; padding: 6px 10px; border-radius: var(--r-card); } .kv-logos__set img { max-height: 52px; max-width: 140px; width: auto; object-fit: contain; /* Logolar çok farklı zeminlerden geliyor (beyaz PNG, JPG, renkli). Hafif soluklaştırma şeridi tek bir görsel dile sokar; üzerine gelince tam renge döner. */ opacity: .62; filter: grayscale(100%); transition: opacity .2s ease, filter .2s ease; } .kv-logos__set a:hover img, .kv-logos__set a:focus-visible img { opacity: 1; filter: none; } @keyframes kv-logo-kay { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .kv-logos__viewport { overflow-x: auto; -webkit-mask-image: none; mask-image: none; } .kv-logos__track { animation: none; } /* Animasyon yokken ikinci kopya yalnızca gereksiz kaydırma alanı üretir; gizlenir. */ .kv-logos__set[aria-hidden="true"] { display: none; } } /* -------------------------------------------------------------------------- Sabit "Veri isteğinde bulun" düğmesi Müşteri geri bildirimi — WEB k (akillisehir.konya.bel.tr'deki "fikrim var" düğmesine benzer, sayfada gezinirken sabit kalır). -------------------------------------------------------------------------- */ .kv-fab { position: fixed; right: 22px; bottom: 22px; z-index: 60; display: inline-flex; align-items: center; gap: 9px; padding: 13px 20px; border-radius: var(--r-pill); background: var(--t-fill); color: var(--on-t); font-size: 14px; font-weight: 700; text-decoration: none; box-shadow: 0 10px 28px rgba(18, 34, 46, .28); border: 0; transition: background .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease); } .kv-fab:hover, .kv-fab:focus-visible { background: var(--t-fill-hover); color: var(--on-t); text-decoration: none; transform: translateY(-2px); box-shadow: 0 16px 34px rgba(18, 34, 46, .34); } /* Basılırken geri otursun — dokunmatikte "bastım" geri bildirimi. */ .kv-fab:active { transform: translateY(0); } .kv-fab svg { flex: none; } /* -------------------------------------------------------------------------- FAB — dikkat çekme (müşteri isteği: sürekli titreyen ikon) İKİ PARÇA: (1) sayfa açılınca kısa bir GELİŞ, (2) ikonun aralıklı ama SÜRESİZ titremesi. Halka nabzı vardı, kaldırıldı — müşteri sürekli hareketi yeterli buldu, ikisi birlikte gürültü oluyordu. NEDEN BUTON DEĞİL İKON OYNUYOR: hapın kendisi kıpırdarsa göz çevresindeki metne göre bir "sarsıntı" olarak okur ve sayfa titriyormuş hissi verir; ayrıca gölge de birlikte oynadığı için hareket olduğundan iri görünür. İkonun tek başına eğilmesi (zil/bildirim jesti) aynı dikkati çok daha az gürültüyle çekiyor, düğmenin dış hatları sabit kalıyor. DURDURMA YOLU: hareket süresiz olduğu için durdurulabilmesi gerekir (WCAG 2.2.2). İki yol var, ikisi de kurulu: imleç düğmeye geldiğinde ya da klavye odağı düştüğünde sınıf JS'ten kaldırılıyor ve titreşim o sayfada biter; `prefers-reduced-motion: reduce` seçili kullanıcıda ise hiç başlamıyor, yerine kalıcı bir halka geçiyor (aşağıdaki medya sorgusu). Sınıflar CSS'ten DEĞİL JS'ten veriliyor (bkz. kv-ui.js §10). Bu dosyanın reveal kuralındaki mantığın aynısı: JS çalışmazsa düğme animasyonsuz ama TAM GÖRÜNÜR kalır; başlangıç durumunu CSS'e yazmak, JS hata verdiğinde düğmeyi kalıcı görünmez bırakırdı. */ .kv-fab--gir { animation: kv-fab-gir .38s var(--ease) .7s backwards; } @keyframes kv-fab-gir { from { opacity: 0; transform: translateY(14px) scale(.94); } to { opacity: 1; transform: translateY(0) scale(1); } } /* Aralıklı ama süresiz titreşim. NEDEN TEK ANİMASYON, JS ZAMANLAYICI YOK: 7.5 saniyelik döngünün yalnız ilk %10.7'sinde (~0.8 sn) hareket var, kalan ~6.7 sn kare sabit. Yani "aralıklı" davranış tek bir keyframe'den çıkıyor; setInterval yok, sekme arkaplandayken iş yapan bir zamanlayıcı da yok (tarayıcı gizli sekmede CSS animasyonunu zaten çizmez). RİTİM (müşteri kararı, birebir): sayfa açıldıktan 0.4 sn sonra ilk hareket; her hareket 0.8 sn sürer; iki hareket arasında 0.6 sn duruş. CSS'te tek bir `animation` var, "hareket + duruş" ikilisi ONUN İÇİNE yazılıyor. Dolayısıyla: periyot = 0.8 (hareket) + 0.6 (duruş) = 1.4 sn hareketin payı = 0.8 / 1.4 = %57.1 -> keyframe'ler burada biter duruşun payı = 0.6 / 1.4 = %42.9 -> %57.1'den %100'e kadar sabit kare Yani `animation-duration` DEĞİL hareketin süresi; hareket süresini keyframe yüzdeleri belirler. İkisini birlikte değiştirmek gerekir: hareket süresi değişecekse -> hem periyot hem yüzdeler, yalnız duruş değişecekse -> periyot ve yüzdeler (hareket sn'si sabit kalsın diye yüzde yeniden hesaplanmalı). Önceki turlar (kayıt olsun diye): 8/11 -> ilk hareket 7.9. sn'de, görülmüyordu; 2.5/7.5 ve 1.2/3 -> "belli olmuyor"; 0.4/0.8 -> hareket 0.23 sn'ye sıkışıyordu, istenen bu değildi. */ .kv-fab--titre svg { transform-origin: 50% 55%; animation: kv-fab-titre 1.4s var(--ease) .4s infinite; } /* Genlik: ikon 17px olduğu için salt dönüş çok az piksel eder. ±11° (~2px) ve ±16° (~4px) sürümleri "belli olmuyor" diye geri geldi; şimdiki ±20° + %12 ölçek ~5px. YÜZDELER 1.4 SANİYELİK DÖNGÜYE GÖRE: hareket beş eşit adımda %57.1'de biter (5 x 0.16 sn = 0.8 sn), oradan %100'e kadar kare sabittir (0.6 sn duruş). Adımlar 0.16 sn olduğu için jest sarsıntı değil yumuşak bir salınımdır. Daha sakin isteniyorsa ilk kareyi -14deg / scale(1.06) yapmak yeterli; yüzdelere dokunmak süreleri bozar. */ @keyframes kv-fab-titre { 0% { transform: rotate(0deg) translateY(0) scale(1); } 11.4% { transform: rotate(-20deg) translateY(-1px) scale(1.12); } 22.9% { transform: rotate(16deg) translateY(0) scale(1.06); } 34.3% { transform: rotate(-11deg) translateY(0) scale(1.03); } 45.7% { transform: rotate(6deg) translateY(0) scale(1); } 57.1% { transform: rotate(0deg) translateY(0) scale(1); } 100% { transform: rotate(0deg) translateY(0) scale(1); } } @media (prefers-reduced-motion: reduce) { /* kv-ui.js bu sınıfları zaten eklemiyor; burada da kapatmak, sınıf elle verilirse diye ikinci emniyet. Hareketin YERİNE kalıcı ince bir halka konuyor — istek "daha belli olsun"du, bu hareketsiz de karşılanıyor. */ .kv-fab { transition: none; } .kv-fab--gir { animation: none; } .kv-fab--titre svg { animation: none; } .kv-fab { box-shadow: 0 10px 28px rgba(18, 34, 46, .28), 0 0 0 3px rgba(46, 196, 182, .28); } } @media (max-width: 640px) { /* Dar ekranda metin düşer, düğme yuvarlak ikona iner — içeriğin üstünü kapatmasın. Erişilebilir ad `aria-label`dan gelir. */ .kv-fab { right: 14px; bottom: 14px; padding: 0; width: 52px; height: 52px; justify-content: center; } .kv-fab__t { display: none; } } /* ========================================================================== 3) DÜZEN KATMANI — üst şerit, yapışkan başlık, sayfa kabukları, ızgaralar, yan paneller, footer. İçerik genişliği 1240px, yatay dolgu 32px (README §Boşluk ve ölçü). ========================================================================== */ .kv-wrap { max-width: var(--kv-max); margin: 0 auto; padding-left: var(--kv-pad); padding-right: var(--kv-pad); width: 100%; } /* -------------------------------------------------------------------------- Üst hizmet şeridi -------------------------------------------------------------------------- */ .kv-topbar { border-bottom: 1px solid var(--line); background: var(--card); } .kv-topbar__in { display: flex; align-items: center; gap: 20px; padding-top: 9px; padding-bottom: 9px; font-size: 12.5px; color: var(--muted); flex-wrap: wrap; } .kv-topbar__right { margin-left: auto; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .kv-topbar a { color: var(--muted); display: inline-flex; align-items: center; min-height: 24px; /* dokunma hedefi — bkz. .kv-link-more notu */ } .kv-topbar a:hover { color: var(--t-d); } /* Tema düğmesi */ .kv-theme-btn { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); background: var(--card); color: var(--ink); font-family: inherit; font-size: 12px; font-weight: 700; padding: 6px 13px; border-radius: var(--r-pill); cursor: pointer; min-height: 32px; transition: border-color .2s ease, color .2s ease; } .kv-theme-btn:hover { border-color: var(--t); color: var(--t-d); } /* Dil anahtarı (TR/EN kapsül) */ .kv-lang { display: flex; background: var(--t-l); border-radius: var(--r-pill); padding: 3px; font-weight: 600; font-size: 11.5px; list-style: none; margin: 0; gap: 0; } .kv-lang a, .kv-lang > li > a { display: block; padding: 4px 10px; color: var(--t-d); border-radius: var(--r-pill); min-height: 26px; line-height: 18px; } .kv-lang .active > a, .kv-lang a.active { background: var(--t-fill); color: var(--on-t); } /* -------------------------------------------------------------------------- Yapışkan başlık -------------------------------------------------------------------------- */ .kv-header { position: sticky; top: 0; z-index: 40; background: var(--header); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); } .kv-header__in { display: flex; align-items: center; gap: 24px; padding-top: 14px; padding-bottom: 14px; flex-wrap: wrap; } .kv-logo { display: flex; align-items: center; flex: none; } .kv-logo img { /* Mockuptaki 42px gerçek logoda küçük kalıyordu: markanın kendi tipografisi (394x188'lik damga) 42px yükseklikte okunmuyor. 52px'te başlık çubuğu 73px'ten 83px'e çıkıyor, menü hizası bozulmuyor. */ height: 52px; width: auto; display: block; } /* ⚠️ Başlık logosu SAYDAM sürümdür (`acik-veri-portali-logo-saydam.png`). Özgün dosya turkuaz çizimi OPAK BEYAZ zemin üzerinde taşıyordu; yapışkan başlık yarı saydam (`backdrop-filter: blur`) olduğu için sayfa kaydırılıp arkasına renkli bir bölüm geldiğinde logonun beyaz dikdörtgeni ortaya çıkıyordu — koyu temada ise sürekli görünüyordu. Saydam sürüm ÖLÇÜMLE üretildi: çizimin tamamı tek renk (#43BBB6) ve beyaz arasında bir karışım (16.465 pikselin doğrudan sapması en fazla 2/255), bu yüzden alfa = (255 - min kanal) / (255 - 67) formülüyle birebir geri kuruluyor. Beyaz zemine bindirildiğinde özgün dosyayla farkı sıfırdır; kenarlarda beyaz saçak YOKTUR. Üretim betiği: `tools/logo_saydamlastir.py`. Eski dosya `acik-veri-portali-logo.png` yerinde duruyor (referans). */ .kv-nav { display: flex; gap: 20px; row-gap: 10px; font-size: 14.5px; font-weight: 600; flex-wrap: wrap; flex: 1 1 380px; min-width: 0; list-style: none; margin: 0; padding: 0; align-items: center; } .kv-nav a { color: var(--ink); white-space: nowrap; padding: 4px 0; border-bottom: 2px solid transparent; } .kv-nav a:hover { color: var(--t-d); } .kv-nav .active > a, .kv-nav a.active { color: var(--t-d); border-bottom-color: var(--t); } .kv-nav__badge { display: inline-block; margin-left: 6px; background: var(--t-l); color: var(--t-d); border-radius: var(--r-pill); font-size: 11px; font-weight: 700; padding: 1px 8px; vertical-align: middle; } .kv-header__account { margin-left: auto; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .kv-header__account .kv-acc-link { font-size: 14px; font-weight: 600; color: var(--ink); padding: 10px 14px; white-space: nowrap; display: inline-flex; align-items: center; gap: 7px; border-radius: var(--r-pill); } .kv-header__account .kv-acc-link:hover { color: var(--t-d); background: var(--soft); } .kv-header__account .kv-acc-cta { font-size: 14px; font-weight: 700; color: var(--on-t); background: var(--t-fill); padding: 11px 22px; border-radius: var(--r-pill); white-space: nowrap; box-shadow: var(--sh-btn-sm); transition: background .2s ease; } .kv-header__account .kv-acc-cta:hover { background: var(--t-fill-hover); color: var(--on-t); } /* Çıkış formu — düğme bağlantı gibi görünür */ .kv-logout-form { display: inline; margin: 0; } .kv-logout-form button { border: 0; background: transparent; font-family: inherit; cursor: pointer; } /* Hamburger (yalnız <900px'te görünür — kv-responsive.css) */ .kv-burger { display: none; border: 1px solid var(--line); background: var(--card); color: var(--ink); border-radius: var(--r-chip); width: 44px; height: 44px; align-items: center; justify-content: center; cursor: pointer; flex: none; } /* -------------------------------------------------------------------------- Sayfa üst bandı (hero gradyanı) -------------------------------------------------------------------------- */ .kv-pagehead { background: linear-gradient(180deg, var(--t-l) 0%, var(--bg) 100%); border-bottom: 1px solid var(--line); } .kv-pagehead__in { padding-top: 36px; padding-bottom: 40px; } .kv-pagehead--tall .kv-pagehead__in { padding-bottom: 44px; } /* Tamamen koyu üst bant (API sayfası) */ .kv-pagehead--deep { background: var(--deep); color: #fff; border-bottom: 0; } .kv-pagehead--deep .kv-crumbs, .kv-pagehead--deep .kv-crumbs [aria-current="page"] { color: var(--onDeep); } .kv-pagehead--deep .kv-crumbs a { color: var(--on-deep-accent); } .kv-pagehead--deep .kv-pagehead__in { padding-top: 44px; padding-bottom: 48px; } /* Başlık + sağda eylemler */ .kv-pagehead__row { display: grid; grid-template-columns: 1fr auto; gap: 44px; /* ⚠️ `align-items: center` — mockup'ta `flex-end` yazıyor, BİLEREK sapıldı. Mockup metinleri tek satırlık örneklerdi: 96px logo ile ~80px'lik başlık bloğu benzer yükseklikte olduğundan alta hizalamak hizalı görünüyordu. Gerçek veride açıklamalar üç satıra çıkıyor (ölçüldü: kategori detayında orta blok 135px), alta hizalama logoyu 38px aşağı, arama kutusunu 38px yukarı kaydırıyor ve bant dağılmış görünüyor. Ortaya hizalama kısa içerikte mockup'la aynı görünür, uzun içerikte bozulmaz. */ align-items: center; } /* Başlık bloğu + sağda özet/eylem (API dokümantasyonu gibi koyu bantlar). Hizalama gerekçesi için yukarıdaki `.kv-pagehead__row` notuna bakın. */ .kv-pagehead__split { display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap; } .kv-pagehead__actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; } /* Üst banttaki geniş arama kutusu. README ekran 2: "sağda geniş arama kutusu (min 420px)". `min-width: 420px` sabit yazılırsa 390px'lik ekranda kutu kabına sığmaz ve SAYFA yatay kayar (ölçüldü: /dataset 390px'te scrollWidth 436). `min()` ile üst sınır kabın kendi genişliği olur. */ .kv-head-search { flex: 1; min-width: min(420px, 100%); max-width: 560px; } .kv-head-search--sm { min-width: min(300px, 100%); max-width: 460px; } /* ⚠️ Çapa hedefleri yapışkan başlığın ALTINDA kalmamalı. Üst başlık `position: sticky; top: 0` ve 73px yüksekliğinde. `#onizleme` gibi bir çapaya atlandığında tarayıcı hedefi `top: 0`a getiriyordu; yani kullanıcının atladığı başlık tam da başlık çubuğunun ARKASINDA kalıyordu (ölçüldü: hedef top 0, başlık altı 73). `scroll-margin-top` tarayıcıya hedefin üstünde bu kadar boşluk bırakmasını söyler. Her `id`ye verilir: çapa hedefleri şablonlarda serbestçe tanımlanıyor. */ [id] { scroll-margin-top: 96px; } /* `
    ` atlama bağlantısı için odaklanabilir; ama tüm sayfayı saran dev bir halka çizilmesin — odak yine de oraya taşınır. */ .kv-main:focus { outline: none; } /* Logo + başlık + eylem (organizasyon/kategori detayı) */ .kv-pagehead__ident { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; } .kv-idbox { width: 104px; height: 104px; border-radius: 26px; background: #fff; border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; padding: 14px; flex: none; box-shadow: var(--sh-logo); } .kv-idbox--cat { width: 96px; height: 96px; background: var(--card); padding: 20px; } .kv-idbox img { max-width: 100%; max-height: 100%; object-fit: contain; } /* -------------------------------------------------------------------------- Ana içerik kabukları -------------------------------------------------------------------------- */ .kv-main { display: block; } .kv-body-wrap { padding-top: 32px; padding-bottom: 88px; } .kv-body-wrap--tall { padding-top: 44px; } .kv-body-wrap--flat { padding-top: 36px; } /* Yan panelli düzenler */ .kv-cols { display: grid; gap: 40px; align-items: start; } .kv-cols--facet { grid-template-columns: 280px 1fr; } .kv-cols--facet-s { grid-template-columns: 260px 1fr; } .kv-cols--aside { grid-template-columns: 1fr 320px; } .kv-cols--aside-s { grid-template-columns: 1fr 300px; } .kv-cols--doc { grid-template-columns: 240px 1fr; gap: 48px; } .kv-cols--api { grid-template-columns: 220px 1fr 320px; gap: 36px; } .kv-cols--split { grid-template-columns: 1.2fr 1fr; gap: 48px; } .kv-cols--split-a { grid-template-columns: 1.1fr 1fr; gap: 48px; } .kv-cols--half { grid-template-columns: 1fr 1fr; gap: 24px; } /* ⚠️ TAŞMA KORUMASI — kaldırılmamalı. Izgara ve esnek kutu çocuklarının varsayılan `min-width` değeri `auto`dur: öğe, içeriğinin min-content genişliğinden DAHA DAR olamaz. Geniş bir veri tablosu (ör. 12 sütunlu bir kaynak önizlemesi) bu yüzden `1fr` kolonu şişirip yan paneli sayfanın dışına itiyordu. ÖLÇÜLDÜ (/dataset/otopark-bilgileri/resource/707d3cb9…, 1440px): .kv-cols genişliği 1176px, ilk çocuğu 1300px belge scrollWidth 1772px → sayfa yatay kayıyor, yan panel dışarıda `min-width: 0` ile kolon küçülebilir hâle gelir ve tablo, kendi `overflow-x: auto` sarmalayıcısının (`.kv-table-wrap`) içinde kayar — tasarım paketinin "geniş içerik kendi kutusunda kaysın, sayfa gövdesi ASLA yatay kaymasın" kuralı budur. */ .kv-cols > *, .kv-grid > *, .kv-list > *, .kv-idea-list > *, .kv-howto__grid > *, .kv-dash__grid > *, .kv-auth > *, .kv-ideas > * { min-width: 0; } .kv-side { position: sticky; top: var(--kv-stick); display: flex; flex-direction: column; gap: 16px; align-self: start; } .kv-side--static { position: static; } /* Belge içeriği genişliği */ .kv-prose { max-width: 74ch; } .kv-prose--narrow { max-width: 72ch; } .kv-prose--wide { max-width: 80ch; } .kv-prose h2 { font-size: 26px; font-weight: 800; margin: 36px 0 14px; } .kv-prose h2:first-child { margin-top: 0; } .kv-prose h3 { font-size: 20px; font-weight: 700; margin: 28px 0 12px; } .kv-prose p, .kv-prose li { font-size: 15.5px; line-height: 1.8; color: var(--muted); } .kv-prose p { margin: 0 0 22px; } .kv-prose ul, .kv-prose ol { margin: 0 0 22px; padding-left: 22px; } .kv-prose li { margin-bottom: 8px; } .kv-prose a { font-weight: 600; } .kv-prose img { border-radius: var(--r-tile); } .kv-prose table { width: 100%; border-collapse: collapse; font-size: 14px; margin: 0 0 22px; } .kv-prose th, .kv-prose td { border: 1px solid var(--line); padding: 10px 14px; text-align: left; } .kv-prose th { background: var(--soft); font-weight: 700; } .kv-prose blockquote { margin: 0 0 22px; padding: 18px 22px; background: var(--soft); border-left: 3px solid var(--t); border-radius: 0 16px 16px 0; color: var(--ink); } .kv-prose code { background: var(--soft); border-radius: 6px; padding: 2px 6px; font-size: .9em; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } /* `.kv-prose code` (0,1,1) `.kv-pre` (0,1,0)'dan daha spesifik olduğu için içerik metnindeki koyu kod bloklarını açık zemine çeviriyordu (ölçüldü: /user-guide'daki API örneği ve atıf bloğu okunmuyordu). */ .kv-prose code.kv-pre, .kv-prose pre.kv-pre { background: var(--deep); color: var(--on-deep-code); padding: 22px; border-radius: 18px; font-size: 13px; line-height: 1.7; display: block; overflow-x: auto; } /* Kendi yüzeyi olan bağlantılar (düğme, çip, kart, "devamı") akış metni sayılmaz — WCAG 1.4.1 alt çizgi kuralı onlara uygulanmaz, uygulanırsa tasarım bozulur. `.kv-prose a` ile aynı spesifiklikte ama SONRA geldiği için kazanır; iç içe geçmiş hâlleri ayrıca yazıldı. */ a.kv-btn, a.kv-chip, a.kv-link-more, a.kv-card, a.kv-shortcut, a.kv-facet__item, .kv-prose a.kv-btn, .kv-prose a.kv-chip, .kv-prose a.kv-link-more { text-decoration: none; } /* Belge içi yan navigasyon */ .kv-docnav { position: sticky; top: var(--kv-stick); display: flex; flex-direction: column; gap: 2px; font-size: 14px; align-self: start; } .kv-docnav a { font-weight: 600; color: var(--ink); padding: 10px 14px; border-radius: var(--r-chip); transition: background .2s ease, color .2s ease; } .kv-docnav a:hover { background: var(--soft); } .kv-docnav a.active, .kv-docnav a[aria-current="true"] { font-weight: 700; color: var(--t-d); background: var(--t-l); } .kv-docnav__group { font-size: 11.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 20px 0 12px; } .kv-docnav__group:first-child { margin-top: 0; } /* -------------------------------------------------------------------------- Bölüm ritmi ve ızgaralar -------------------------------------------------------------------------- */ .kv-section { max-width: var(--kv-max); margin: 0 auto; padding: 84px var(--kv-pad) 0; } .kv-section--88 { padding-top: 88px; } .kv-section--72 { padding-top: 72px; } .kv-grid { display: grid; gap: 18px; } .kv-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kv-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; } .kv-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .kv-grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } .kv-list { display: flex; flex-direction: column; gap: 14px; } .kv-list--tight { gap: 12px; } .kv-list--cards { gap: 16px; } /* -------------------------------------------------------------------------- Footer -------------------------------------------------------------------------- */ .kv-footer { background: var(--foot); color: var(--foot-text); margin-top: 88px; } .kv-footer__in { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 44px; padding-top: 56px; padding-bottom: 36px; } /* ⚠️ Beyaz çerçeve YOK. Logo dosyası zaten kendi zeminini taşıyor: "BENİM ŞEHRİM" bloğu opak beyaz, amblem bloğu opak sarı (ölçüldü: ilgili piksellerde alfa 255). Koyu alt bilgide ayrıca beyaz bir kutuya almak, logonun kendi çerçevesinin dışına ikinci bir çerçeve çiziyordu. */ .kv-footer__logo { display: inline-block; margin-bottom: 20px; } .kv-footer__logo img { height: 64px; width: auto; display: block; } .kv-footer__desc { font-size: 14px; line-height: 1.7; margin: 0 0 16px; color: var(--on-deep-body); max-width: 34ch; } .kv-footer__title { font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #fff; margin-bottom: 16px; } .kv-footer__links { display: flex; flex-direction: column; gap: 11px; font-size: 14px; list-style: none; margin: 0; padding: 0; } .kv-footer a { color: var(--foot-text); } .kv-footer a:hover { color: #fff; text-decoration: underline; } .kv-footer__bottom { border-top: 1px solid var(--foot-line); } .kv-footer__bottom-in { display: flex; justify-content: space-between; gap: 20px; padding-top: 20px; padding-bottom: 20px; font-size: 12.5px; color: #7d95a1; flex-wrap: wrap; align-items: center; } /* Sosyal bağlantılar — mockup footer'ında yok, mevcut portalda var. Mockup diliyle: 36px yuvarlatılmış kutular. */ .kv-social { display: flex; gap: 10px; list-style: none; margin: 0; padding: 0; } .kv-social a { width: 38px; height: 38px; border-radius: var(--r-chip); background: var(--foot-input); color: var(--foot-text); display: flex; align-items: center; justify-content: center; transition: background .2s ease, color .2s ease; } .kv-social a:hover { background: var(--t-fill); color: var(--on-t); } /* Footer bülten kutusu (yalnız etkinse render edilir) */ .kv-footer__news { display: flex; background: var(--foot-input); border-radius: var(--r-pill); padding: 5px 5px 5px 18px; } .kv-footer__news input { flex: 1; border: 0; outline: none; background: transparent; font-family: inherit; font-size: 14px; color: #fff; padding: 10px 0; min-width: 0; } .kv-footer__news button { border: 0; background: var(--t-fill); color: var(--on-t); font-family: inherit; font-size: 13.5px; font-weight: 700; padding: 10px 20px; border-radius: var(--r-pill); cursor: pointer; white-space: nowrap; } .kv-footer__marks { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; } /* Koyu footer üzerinde logolar tek renk (beyaz) durur. CC logosu zaten beyaz PNG; CKAN logosu koyu SVG olduğu için filtreyle beyazlatılır. */ .kv-footer__marks img { height: 28px; width: auto; opacity: .8; filter: brightness(0) invert(1); } .kv-footer__marks a:hover img { opacity: 1; } /* -------------------------------------------------------------------------- Mobil menü çekmecesi (yalnız <900px) -------------------------------------------------------------------------- */ .kv-drawer { display: none; position: fixed; inset: 0; z-index: 60; } .kv-drawer[hidden] { display: none !important; } .kv-drawer.is-open { display: block; } .kv-drawer__scrim { position: absolute; inset: 0; background: rgba(18, 34, 46, .48); } .kv-drawer__panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(360px, 88vw); background: var(--bg); border-left: 1px solid var(--line); padding: 20px 24px 32px; overflow-y: auto; display: flex; flex-direction: column; gap: 18px; } .kv-drawer__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; } .kv-drawer__close { border: 1px solid var(--line); background: var(--card); color: var(--ink); border-radius: var(--r-chip); width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; cursor: pointer; flex: none; } .kv-drawer__nav { display: flex; flex-direction: column; gap: 2px; list-style: none; margin: 0; padding: 0; } .kv-drawer__nav a { display: block; padding: 13px 14px; border-radius: var(--r-chip); font-size: 15.5px; font-weight: 600; color: var(--ink); } .kv-drawer__nav a:hover, .kv-drawer__nav .active > a { background: var(--t-l); color: var(--t-d); } .kv-drawer__actions { display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--line); padding-top: 18px; } body.kv-no-scroll { overflow: hidden; } /* Facet çekmecesi tetikleyicisi — yalnız <900px */ .kv-facet-toggle { display: none; } /* Yetki hatalarında çekirdeğin teknik gerekçesi — ana açıklamanın altında, küçük ve soluk. Ana mesaj `.kv-error__b`dir. */ .kv-error__detay { font-size: 13.5px; color: var(--muted); margin: 10px 0 0; }/* ========================================================================== 4) SAYFA KATMANI — ana sayfa bölümleri ve sayfaya özel bloklar. Ölçüler README §Ekranlar bölümünden birebir alınmıştır. ========================================================================== */ /* ========================================================================== ANA SAYFA — Hero ========================================================================== */ .kv-hero { position: relative; overflow: hidden; background: linear-gradient(180deg, var(--t-l) 0%, var(--bg) 100%); /* Siluet sahnesi hero genişliğinin 1/2.48'i kadar yükseklik ister (1415.3 / 570.6 = 2.48). Hero'nun içerikten gelen doğal yüksekliği 772px; 1916px'e kadar sahne zaten sığıyor, bu satır yalnızca daha geniş ekranlarda devreye girer. Yoksa `overflow: hidden` sahnenin ÜSTÜNÜ kırpar ve minarenin alemi giderdi. Bölen 2.48 DEĞİL 2.47: birkaç piksellik bilinçli pay. Tam oranda yuvarlama, `contain`i yükseklikle sınırlı hale getirip solda yarım piksellik bir boşluk bırakıyordu. Fazla pay sahneyi kırpmaz, yalnızca kutunun ÜSTÜNDE kullanılmayan birkaç piksel bırakır. */ min-height: calc(100vw / 2.47); /* Siluetin karışım kipi (aşağıya bkz.) hero'nun DIŞINA taşmasın: `isolate` karışımı hero'nun kendi zemini + içeriğiyle sınırlar. */ isolation: isolate; } /* TEK KOLON, ORTALI — müşteri geri bildirimi Tasarım h (2026-08-24). ÖNCESİ: iki kolonlu ızgara (1.08fr .92fr); sağ kolonda "Portal kullanım paneli" duruyordu. Müşteri kaldırılmasını istedi çünkü aynı istatistikler sayfanın aşağısındaki Veri Kullanım Panosunda zaten var. Yan not: panel kaldırılmadan önce ekranda "İndirme: 0" yazıyordu (son 30 günde kaynak indirmesi yok). Portalın en üstünde duran ilk sayı olarak portalı ölü gösteriyordu — kaldırmak için ayrıca iyi bir sebep. */ .kv-hero__in { max-width: var(--kv-max); margin: 0 auto; padding: 96px var(--kv-pad) 104px; position: relative; } /* İçerik sütunu: ortalanır ve okunabilir bir genişlikte tutulur. `align-items: center` sayesinde h1 ve lead kendi `max-width`leriyle ortada kalır; ayrıca `margin: 0 auto` yazmaya gerek kalmaz. */ .kv-hero__col { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; text-align: center; } /* Yumuşak ışık lekeleri — dekoratif, ekran okuyucudan gizli */ .kv-hero__blob { position: absolute; border-radius: 50%; pointer-events: none; } .kv-hero__blob--a { top: -160px; right: -120px; width: 520px; height: 520px; background: radial-gradient(circle at 30% 30%, rgba(32, 178, 166, .28), rgba(76, 63, 140, .06) 70%); filter: blur(10px); animation: kvFloat 16s ease-in-out infinite; } .kv-hero__blob--b { bottom: -140px; left: -90px; width: 360px; height: 360px; background: radial-gradient(circle at 60% 40%, rgba(76, 63, 140, .16), rgba(32, 178, 166, .02) 70%); filter: blur(14px); animation: kvFloat 22s ease-in-out infinite reverse; } /* Konya silueti — hero'nun alt kenarına oturan kontur çizimi. NEDEN `object-fit: contain` + `right bottom`: Sahne 2.48 oranında ve ASLA kırpılmamalı — üstte minarenin alemi için yalnız 2 birim pay var, altta hiç yok. `contain` iki ucu da garanti eder: hero yeterince yüksekken çizim kenardan kenara yayılır ve zemin çizgisi hero'nun alt kenarına oturur; hero oranın gerektirdiğinden alçak kalırsa (min-height'ın yetişemediği aşırı geniş ekranlar) çizim kırpılmak yerine küçülüp sağa yaslanır. `bottom` sabit olduğu için zemin çizgisi her iki durumda da alt kenarda kalır. Örtme dolguları: SVG'deki kapalı şekiller dolgulu — öndeki yapılar arkadakileri böyle gizliyor (kubbeler kuleyi, köprü kemerleri birbirini). Bu dolguların zemine iz bırakmaması karışım kipiyle çözülüyor; ayrıntı aşağıdaki KARIŞIM KİPİ notunda. */ .kv-hero__siluet { position: absolute; inset: 0; pointer-events: none; } .kv-hero__siluet-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: right bottom; /* OKUNURLUK PERDESİ — çizimi YALNIZ metin bloğunun altında yarıya indirir. SORUN: hero metninin bir kısmı (alt başlık ve katalog sayıları) çizimin en yoğun yerinin — kubbe telkafeslerinin — tam üstüne düşüyor. Ölçüm (harflerin ALTINDAKİ zemine göre, en kötü piksel): perdesiz siluet `.kv-hero__stat-l`i açık temada 5.04:1'den 4.13:1'e, koyu temada 7.22:1'den 4.49:1'e düşürüyor; 14px normal metin için eşik 4.5:1. Açık temanın payı zaten dar: `--muted` (#5c7080) beyaz üstünde 5.04:1. NEDEN İKİ KATMAN: tek bir dikey bant maskesi metnin OLMADIĞI yerleri de söndürüyordu — zemin çizgisi, kubbe altları, kenarlar. İki doğrusal gradyan (yatay + dikey) varsayılan `add` ile birleştiğinde perde yalnız ikisinin KESİŞİMİNDE, yani metin dikdörtgeninde oluşur; dışarıda maske 1.0 kalır. Kesişimdeki perde 2K-K²'dir, K=.293 -> .5 (yarım güç). ÖLÇÜLER metin kutularından alındı, tahmin değil: metin bloğu y=305..675 (alt başlığın üstünden sayıların altına), genişlik `.kv-hero__col`un 760px kadarı, yani merkez ±380. Rampalar (±480 / 250..730) geçişi yumuşatır. İçerik yüksekliği üç kırılma noktasında da aynı olduğu için dikey ölçüler px; yatayda merkeze göre px kullanılıyor ki sütunu her genişlikte izlesin. Perde .5'te açık temanın alt başlığı 4.85 -> 4.40'a iniyor; aynı metin siluet HİÇ yokken de 1280px'de 4.30 (tasarımın kendi tabanı). Geri kalan her öğe AA eşiğinin üstünde. Daha güçlü çizim istenirse .65'e çıkılabilir, bedeli üç sayı etiketinin 4.44'e inmesidir. */ --kv-perde-k: .293; /* kesişimde 2K-K² = .5 */ --kv-perde-x: linear-gradient(90deg, #000 0, #000 calc(50% - 480px), rgba(0, 0, 0, var(--kv-perde-k)) calc(50% - 380px), rgba(0, 0, 0, var(--kv-perde-k)) calc(50% + 380px), #000 calc(50% + 480px), #000 100%); --kv-perde-y: linear-gradient(180deg, #000 0, #000 250px, rgba(0, 0, 0, var(--kv-perde-k)) 305px, rgba(0, 0, 0, var(--kv-perde-k)) 675px, #000 730px, #000 100%); -webkit-mask-image: var(--kv-perde-x), var(--kv-perde-y); mask-image: var(--kv-perde-x), var(--kv-perde-y); } /* TEMA BAŞINA AYRI DOSYA: çizgi rengi ve kalınlığı SVG kökünde (`stroke` / `stroke-width`) duruyor ve `
    ` ile gömülü SVG'ye CSS işlemiyor. Bu yüzden iki dosya var, takas burada `display` ile yapılıyor; renk/kalınlık değişecekse dosyaların kök niteliği düzenlenmeli. KARIŞIM KİPİ — örtme dolgularının leke bırakmaması için. Hero'nun zemini düz değil, `--t-l`den `--bg`ye giden bir gradyan. Dolgular zemin rengine boyanıp düz opaklıkla çizilseydi yalnız en ALT kenarda görünmez olur, yukarısında açık/koyu leke bırakırdı. Karışım kipi bunu zeminin rengine hiç bakmadan çözer — her kipin bir NÖTR elemanı var: * `multiply`: beyaz nötrdür -> açık sürümün `#ffffff` dolguları iz bırakmaz, yalnız koyu teal çizgiler zemini koyultur. * `screen`: siyah nötrdür -> koyu sürümün `#000000` dolguları iz bırakmaz, yalnız açık teal çizgiler zemini aydınlatır. Koyu sürümün dolguları bu yüzden `#0b141d` DEĞİL saf siyah: `#0b141d` ölçümde koyu zeminde 4-6/255'lik görünür bir aydınlanma bırakıyordu, saf siyahla sızıntı 0'a indi. Hero'nun zemini/gradyanı değişse bile bu kurgu bozulmaz; kipler kaldırılırsa dolgular zemin rengine geri boyanmalı. */ .kv-hero__siluet-img--light { opacity: .15; mix-blend-mode: multiply; } .kv-hero__siluet-img--dark { opacity: .18; mix-blend-mode: screen; display: none; } :root[data-theme="dark"] .kv-hero__siluet-img--light { display: none; } :root[data-theme="dark"] .kv-hero__siluet-img--dark { display: block; } /* JS kapalıyken sistem tercihine uy — kv-tokens.css'teki tema kalıbının aynısı; `:not([data-theme="light"])` koruması bilinçli açık tema seçimini bozmaz. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .kv-hero__siluet-img--light { display: none; } :root:not([data-theme="light"]) .kv-hero__siluet-img--dark { display: block; } } .kv-hero__badge { margin-bottom: 26px; } .kv-hero h1 { font-size: 62px; line-height: 1.06; font-weight: 800; margin-bottom: 22px; /* Ortalı düzende 15ch fazla dar kalıp başlığı üç satıra bölüyordu. */ max-width: 18ch; text-wrap: balance; } .kv-hero__lead { font-size: 17.5px; line-height: 1.7; color: var(--muted); margin: 0 0 34px; max-width: 58ch; } .kv-hero__pop { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; align-items: center; justify-content: center; } .kv-hero__pop-l { font-size: 13px; color: var(--muted); } /* ========================================================================== HERO — katalog sayıları ========================================================================== Eski istatistik bandı (hero'nun altında ayrı bir bölüm) 2026-08-24'te kaldırıldı; sayılar hero'nun içine taşındı. Gerekçe şablonda: bant ile Veri Kullanım Panosu yan yana gelince 233 / 20 / 10 tek ekranda iki kez görünüyordu. Ayrım artık anlama göre — hero KİMLİK, pano KULLANIM. Tasarım kararları: * Kutu/çerçeve YOK — sayılar hero'nun gradyanı üstünde durur. Çerçeveli bir kart, Tasarım h ile kurtulduğumuz "kutu içinde kutu" hissini geri getiriyordu. * Sayı 38px. Bant 46px kullanıyordu ama orada kendi bölümündeydi; burada `h1` (62px) hemen üstünde. Hiyerarşi: başlık > arama kutusu > sayılar. * Üstte saç teli ayraç: "burası ayrı bir bilgi" der ama yeni bölüm açmaz. ========================================================================== */ .kv-hero__stats { width: 100%; max-width: 620px; margin-top: 40px; padding-top: 30px; border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } .kv-hero__stat-n { font-size: 38px; font-weight: 800; line-height: 1; letter-spacing: -.03em; color: var(--t-d); } .kv-hero__stat-n--pur { color: var(--pur); } .kv-hero__stat-n--ink { color: var(--ink); } .kv-hero__stat-l { font-size: 13.5px; font-weight: 600; color: var(--muted); margin-top: 8px; } /* Turkuaz→mor gradyan şerit */ .kv-ribbon { margin-top: 20px; background: linear-gradient(135deg, var(--t) 0%, var(--pur) 140%); border-radius: var(--r-card); padding: 26px 34px; display: flex; align-items: center; gap: 28px; flex-wrap: wrap; color: #fff; } .kv-ribbon__body { flex: 1; min-width: 280px; } .kv-ribbon__k { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; opacity: .85; margin-bottom: 6px; } .kv-ribbon__t { font-size: 19px; font-weight: 700; line-height: 1.4; } /* ========================================================================== ANA SAYFA — "Neler Yapabilirsin?" ========================================================================== */ /* KULLANICI KARARI (README'den sapma): prototipte `1.02fr 1fr` yazıyor ve öne çıkan kart sağ kolondan bir tık geniş duruyordu. İki kolon EŞİT genişlikte istendi. */ .kv-ideas { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: stretch; } .kv-idea-feat { position: relative; overflow: hidden; background: linear-gradient(155deg, var(--deep) 0%, var(--deep2) 60%, #1e4b48 100%); border-radius: var(--r-panel); padding: 44px 44px 40px; color: #fff; display: flex; flex-direction: column; /* KULLANICI KARARI: kart sağ kolonun yüksekliğine uzadığı için içerik üstte toplanıp altta boşluk kalıyordu; dikeyde ORTALANIR. */ justify-content: center; box-shadow: var(--sh-deep-card); } .kv-idea-feat__blob { position: absolute; top: -90px; right: -70px; width: 300px; height: 300px; border-radius: 50%; background: radial-gradient(circle, rgba(79, 214, 200, .28), transparent 70%); animation: kvFloat 18s ease-in-out infinite; pointer-events: none; } /* Işık lekesi HARİÇ tutulmalı: `.kv-idea-feat > *` ile aynı spesifiklikte olduğu ve SONRA geldiği için `.kv-idea-feat__blob`un `position: absolute` değerini eziyordu. Sonuç: dekoratif leke akışa girip kartın üstüne 315px boş alan ekliyordu (ölçüldü: kart 918px, olması gereken ~603px). */ .kv-idea-feat > *:not(.kv-idea-feat__blob) { position: relative; } .kv-idea-feat__k { display: flex; align-items: center; gap: 10px; font-size: 11.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--on-deep-accent); margin-bottom: 22px; } .kv-idea-feat__k::before { content: ""; width: 26px; height: 1px; background: var(--on-deep-accent); display: block; } .kv-idea-feat__img { background: var(--on-deep-fill); border: 1px solid var(--on-deep-line); border-radius: var(--r-card); padding: 26px; display: flex; align-items: center; justify-content: center; margin-bottom: 28px; min-height: 210px; } .kv-idea-feat__img img { max-width: 78%; max-height: 190px; object-fit: contain; } .kv-idea-feat h3 { font-size: 30px; font-weight: 800; line-height: 1.2; margin-bottom: 12px; } .kv-idea-feat p { font-size: 15.5px; line-height: 1.7; color: var(--onDeep); margin: 0 0 26px; max-width: 46ch; } .kv-idea-feat__foot { /* `margin-top: auto` KALDIRILDI — kartın içeriği artık dikeyde ortalanıyor, alt şeridi zorla en dibe itmek ortalamayı bozardı. */ display: flex; align-items: center; gap: 20px; flex-wrap: wrap; border-top: 1px solid rgba(255, 255, 255, .12); padding-top: 22px; } .kv-idea-feat__meta { font-size: 13px; color: var(--on-deep-body); } .kv-idea-list { display: flex; flex-direction: column; gap: 22px; } /* İki kolon eşit yüksekliğe uzadığına göre sağdaki üç kart da kolonu DOLDURUR; aksi hâlde sol kart 618px iken kart yığını 505px'te bitip sağ altta boşluk bırakıyordu. Kart içeriği zaten dikeyde ortalı (`.kv-idea { align-items: center }`), bu yüzden uzayan kartlarda metin ortada kalır. Tek kolona düşen dar ekranlarda kolonun sabit yüksekliği olmadığı için kural etkisizdir. */ .kv-idea-list > a { flex: 1 1 auto; } .kv-idea { display: flex; gap: 20px; align-items: center; padding: 24px 26px; } .kv-idea__body { flex: 1; min-width: 0; } .kv-idea__n { font-size: 11.5px; font-weight: 800; letter-spacing: .14em; color: var(--t); margin-bottom: 6px; } .kv-idea__t { font-size: 17.5px; font-weight: 700; line-height: 1.3; margin-bottom: 6px; letter-spacing: -.03em; } .kv-idea__d { font-size: 13.5px; line-height: 1.6; color: var(--muted); margin: 0; } /* ========================================================================== Kategori / organizasyon kutusu ========================================================================== */ /* KULLANICI KARARI: kutu içeriği yatayda ORTALANIR (prototipte sola dayalıydı) ve ikon arka plansız/büyüktür. */ .kv-tile { padding: 26px 20px 20px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; border-radius: var(--r-tile); } .kv-tile__t { font-size: 15.5px; font-weight: 700; line-height: 1.3; flex: 1; letter-spacing: -.03em; display: flex; align-items: center; } .kv-org-tile { padding: 26px 22px 20px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; } .kv-org-tile__logo { height: 72px; width: auto; max-width: 80%; object-fit: contain; align-self: center; } .kv-org-tile__t { font-size: 16px; font-weight: 700; line-height: 1.35; flex: 1; letter-spacing: -.03em; display: flex; align-items: center; } /* ========================================================================== Veri seti kartı (3'lü ızgara — ana sayfa / kart görünümü) ========================================================================== */ .kv-ds-card { padding: 24px 26px 22px; display: flex; flex-direction: column; gap: 13px; } .kv-ds-card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .kv-ds-card__cat { font-size: 11px; font-weight: 700; color: var(--muted); letter-spacing: .1em; text-transform: uppercase; } .kv-ds-card__t { font-size: 19.5px; font-weight: 700; line-height: 1.3; letter-spacing: -.03em; } .kv-ds-card__d { font-size: 14px; line-height: 1.6; color: var(--muted); margin: 0; flex: 1; } /* Mini trend paneli */ .kv-spark { background: var(--soft); border-radius: var(--r-field); padding: 12px 14px 10px; } .kv-spark__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; gap: 10px; } .kv-spark__l { font-size: 11.5px; font-weight: 600; color: var(--muted); } .kv-spark__d { font-size: 12.5px; font-weight: 800; color: var(--t-d); } /* Sayı ile eğilim rozeti yan yana; sayı birincil, rozet ikincil. */ .kv-spark__v { display: inline-flex; align-items: baseline; gap: 7px; } /* Dönem etiketleri — müşteri geri bildirimi 2026-09-04, madde 2. Büyük rakam tüm zamanların toplamı, altındaki grafik son 6 ay; ikisi de artık YAZIYOR. Etiket ölçüden bir tık soluk kalır ki kartın hiyerarşisi bozulmasın. */ .kv-spark__p { font-weight: 500; opacity: .75; } .kv-spark__foot { margin-top: 3px; font-size: 11px; font-weight: 600; color: var(--muted); text-align: right; } .kv-spark__t { font-size: 11.5px; font-weight: 700; color: var(--t-d); } /* ⚠️ Düşüş rengi MOR DEĞİL. Mockup'ta mor (`--pur`) bir kartta DEKORATİF çeşitlilik için kullanılmıştı, "düşüş" anlamı taşımıyordu; gerçek veride düşen kartları mora boyamak paletin dışında, uydurma bir kod üretiyordu. İndirmenin azalması bir hata değil, o yüzden kırmızı da kullanılmıyor: rozet ve çizgi sessiz griye çekiliyor. */ .kv-spark__t--dusus { color: var(--muted); } .kv-spark svg { width: 100%; height: 30px; display: block; } .kv-spark polyline { fill: none; stroke: var(--t); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } .kv-spark--dusus polyline { stroke: var(--muted); } .kv-ds-card__org { font-size: 12.5px; font-weight: 600; color: var(--muted); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .kv-ds-card__date { font-size: 12px; color: var(--muted); white-space: nowrap; } /* Kompakt kart (kategori sayfası, 2'li ızgara) */ .kv-ds-mini { padding: 22px 24px; display: flex; flex-direction: column; gap: 10px; border-radius: var(--r-tile); } .kv-ds-mini__t { font-size: 17.5px; font-weight: 700; line-height: 1.3; letter-spacing: -.03em; } .kv-ds-mini__d { font-size: 13.5px; line-height: 1.6; color: var(--muted); margin: 0; flex: 1; } .kv-ds-mini__foot { display: flex; gap: 7px; align-items: center; border-top: 1px solid var(--line); padding-top: 12px; } .kv-ds-mini__foot .kv-ds-card__date { margin-left: auto; } /* ========================================================================== Sonuç satırı (liste görünümü) ========================================================================== */ .kv-row-card { padding: 24px 26px; display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; } .kv-row-card__main { min-width: 0; } .kv-row-card__meta { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; flex-wrap: wrap; } .kv-row-card__org { font-size: 12px; color: var(--muted); font-weight: 600; } .kv-row-card__t { font-size: 20px; font-weight: 700; line-height: 1.3; margin-bottom: 8px; letter-spacing: -.03em; } .kv-row-card__d { font-size: 14px; line-height: 1.6; color: var(--muted); margin: 0 0 12px; } .kv-row-card__side { text-align: right; white-space: nowrap; } .kv-row-card__date { font-size: 12px; color: var(--muted); margin-bottom: 10px; } .kv-row-card__date strong { color: var(--ink); font-weight: 700; } /* Basit satır (organizasyon detayı) */ .kv-row-simple { padding: 22px 26px; display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: center; border-radius: var(--r-tile); } .kv-row-simple__t { font-size: 18px; font-weight: 700; margin-bottom: 6px; letter-spacing: -.03em; } .kv-row-simple__d { font-size: 13.5px; color: var(--muted); margin: 0; } /* ========================================================================== Veri seti detayı ========================================================================== */ .kv-detail-head h1 { font-size: 42px; font-weight: 800; line-height: 1.1; margin-bottom: 14px; max-width: 24ch; } .kv-detail-head__d { font-size: 16px; line-height: 1.7; color: var(--muted); margin: 0; max-width: 66ch; } .kv-detail-head__chips { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; } .kv-chip--cat { font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; background: var(--t-fill); color: var(--on-t); padding: 6px 13px; } /* Kaynak satırı */ .kv-res { padding: 20px 24px; display: flex; align-items: center; gap: 18px; border-radius: var(--r-tile); } .kv-res__body { flex: 1; min-width: 0; } .kv-res__t { font-size: 15.5px; font-weight: 700; overflow-wrap: anywhere; } .kv-res__s { font-size: 12.5px; color: var(--muted); margin-top: 3px; } .kv-res__actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; } /* Kart içinde tablo bloğu */ .kv-tablecard { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-tile); overflow: hidden; box-shadow: var(--sh-card); } .kv-tablecard__head { padding: 16px 20px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .kv-tablecard__foot { border-top: 1px solid var(--line); padding: 14px 18px; display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; color: var(--muted); flex-wrap: wrap; gap: 10px; } .kv-sec-title { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; margin-bottom: 16px; flex-wrap: wrap; } .kv-sec-title h2 { font-size: 22px; font-weight: 800; } /* Yan panel kartı başlığı */ .kv-side__k { font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; } .kv-side__t { font-size: 17px; font-weight: 800; line-height: 1.3; margin-bottom: 8px; } .kv-side__b { font-size: 13.5px; line-height: 1.6; color: var(--muted); margin: 0 0 14px; } .kv-side__list { display: flex; flex-direction: column; gap: 11px; font-size: 14px; font-weight: 600; } .kv-side__list a { color: var(--ink); display: inline-flex; align-items: center; min-height: 24px; /* dokunma hedefi — bkz. .kv-link-more notu */ } .kv-side__list a:hover { color: var(--t-d); } .kv-side__logo { height: 56px; width: auto; max-width: 100%; object-fit: contain; margin-bottom: 14px; } /* ========================================================================== Kaynak önizleme sayfası ========================================================================== */ .kv-res-head { display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; margin-bottom: 28px; } .kv-res-head h1 { font-size: 36px; font-weight: 800; line-height: 1.15; margin-bottom: 10px; overflow-wrap: anywhere; } .kv-res-head__d { font-size: 15px; line-height: 1.7; color: var(--muted); margin: 0; max-width: 62ch; } .kv-res-head__id { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; } .kv-res-head__id span.kv-meta { font-size: 12.5px; } /* Gömülü görünüm (datatables, harita, pdf…) */ .kv-embed { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; box-shadow: var(--sh-card); } .kv-embed iframe { display: block; width: 100%; min-height: 560px; border: 0; } /* ========================================================================== Ana sayfa — Nasıl kullanılır paneli ========================================================================== */ .kv-howto { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-panel); padding: 52px 48px; box-shadow: 0 10px 30px rgba(18, 34, 46, .05); } .kv-howto__grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 56px; /* KULLANICI KARARI: sol kolon (başlık + açıklama + bağlantı) sağdaki üç adım kutusuna göre dikeyde ORTALANIR; prototipte `start` idi. */ align-items: center; } .kv-howto__steps { display: flex; flex-direction: column; gap: 18px; } .kv-step { display: flex; gap: 20px; align-items: flex-start; background: var(--soft); border-radius: var(--r-tile); padding: 22px 24px; } .kv-step__t { font-size: 16.5px; font-weight: 700; margin-bottom: 5px; } .kv-step__d { font-size: 14px; line-height: 1.65; color: var(--muted); margin: 0; } /* Adım kartı (kılavuz sayfası, 3'lü) */ .kv-step-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); padding: 26px 24px; box-shadow: var(--sh-card); } .kv-step-card .kv-step-n { margin-bottom: 16px; } .kv-step-card__t { font-size: 17px; font-weight: 700; margin-bottom: 8px; } .kv-step-card__d { font-size: 14px; line-height: 1.65; color: var(--muted); margin: 0; } /* ========================================================================== Başarı örneği kartı ========================================================================== */ .kv-show-card { border-radius: var(--r-card); overflow: hidden; display: block; } .kv-show-card__img { height: 180px; background: var(--t-l); display: flex; align-items: center; justify-content: center; font-size: 12.5px; font-weight: 600; color: var(--t-d); overflow: hidden; } .kv-show-card__img img { width: 100%; height: 100%; object-fit: cover; } .kv-show-card__img--sm { height: 170px; } /* Görseli olmayan başarı örneği: metin yerine markaya uygun dekoratif dolgu. */ .kv-show-card__img--bos { background: linear-gradient(135deg, var(--t-l) 0%, var(--soft) 100%); color: var(--t-d); } .kv-show-card__img--bos svg { opacity: .38; } .kv-show-card__body { padding: 24px 26px 26px; } .kv-show-card__t { font-size: 19px; font-weight: 700; line-height: 1.3; margin: 12px 0 8px; letter-spacing: -.03em; } .kv-show-card__d { font-size: 14px; line-height: 1.6; color: var(--muted); margin: 0 0 14px; } .kv-show-card__foot { border-top: 1px solid var(--line); padding-top: 13px; font-size: 12.5px; color: var(--muted); } /* ========================================================================== İki CTA kartı ========================================================================== */ .kv-cta { border-radius: var(--r-panel); padding: 44px 44px 40px; } .kv-cta--deep { background: linear-gradient(140deg, var(--deep) 0%, var(--deep2) 100%); color: #fff; } .kv-cta--soft { background: var(--t-l); } .kv-cta img { height: 120px; width: auto; margin-bottom: 22px; } .kv-cta h3 { font-size: 26px; font-weight: 800; line-height: 1.25; margin-bottom: 12px; } .kv-cta p { font-size: 15px; line-height: 1.7; margin: 0 0 26px; max-width: 44ch; } .kv-cta--deep p { color: var(--onDeep); } .kv-cta--soft p { color: var(--muted); } /* ========================================================================== Veri Kullanım Panosu ========================================================================== */ .kv-dash__kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-bottom: 34px; } /* Katalog sayıları hero'ya taşındıktan sonra pano üç KULLANIM kutusu gösteriyor (bkz. şablon). Üçlü, hero'daki üç sayıyla da hizalanıyor. */ .kv-dash__kpis--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } /* "En çok görüntülenen konu" kutusunda değer bir SAYI değil bir AD ("Hareketlilik"). Rakam puntosu uzun adlarda taşıyor. */ .kv-kpi__n--metin { font-size: 22px; line-height: 1.25; letter-spacing: -.01em; } .kv-dash__grid { display: grid; grid-template-columns: 1.35fr .85fr .8fr; gap: 32px; align-items: start; } .kv-dash__t { font-size: 14px; font-weight: 700; margin-bottom: 4px; } .kv-dash__s { font-size: 12.5px; color: var(--on-deep-muted); margin-bottom: 20px; } /* Dikey çubuk grafik */ .kv-bars { display: flex; align-items: flex-end; gap: 8px; height: 170px; } .kv-bars > span { flex: 1; background: rgba(79, 214, 200, .35); border-radius: 8px 8px 0 0; min-height: 2px; display: block; } .kv-bars > span.is-mid { background: rgba(79, 214, 200, .55); } .kv-bars > span.is-high { background: rgba(79, 214, 200, .7); } .kv-bars > span.is-top { background: var(--on-deep-accent); } .kv-bars-axis { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--on-deep-faint); margin-top: 10px; border-top: 1px solid var(--on-deep-line); padding-top: 10px; } /* Halka grafik + lejant */ .kv-donut-row { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; } .kv-donut { flex: none; } .kv-legend { display: flex; flex-direction: column; gap: 11px; font-size: 13px; min-width: 120px; flex: 1; } .kv-legend span { display: flex; align-items: center; gap: 9px; } .kv-legend i { width: 10px; height: 10px; border-radius: 3px; display: block; flex: none; } .kv-legend b { color: var(--on-deep-muted); margin-left: auto; font-weight: 400; } .kv-rank { display: flex; flex-direction: column; gap: 14px; } .kv-rank__row { display: flex; justify-content: space-between; font-size: 13px; font-weight: 600; margin-bottom: 7px; gap: 12px; } .kv-rank__row span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .kv-rank__row span:last-child { color: var(--on-deep-muted); flex: none; } /* ========================================================================== Veri istekleri ========================================================================== */ .kv-req-card { padding: 24px 26px; display: block; } .kv-req-card__meta { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; } .kv-req-card__t { font-size: 19px; font-weight: 700; line-height: 1.3; margin-bottom: 8px; letter-spacing: -.03em; } .kv-req-card__d { font-size: 14px; line-height: 1.65; color: var(--muted); margin: 0; } .kv-chip--open { background: var(--t-l); color: var(--t-d); } .kv-chip--closed { background: var(--soft); color: var(--muted); } /* Onay bekleyen veri isteği. Yeni bir renk uydurmak yerine etiket çipinin moru kullanılıyor: her iki temada tanımlı ve açık/kapalıdan ayırt edilir. */ .kv-chip--pending { background: var(--pur-l); color: var(--pur); } /* Veri Kullanım Panosu — KPI satırının altındaki dönem açıklaması. Koyu panel içinde durduğu için tema ile değişmeyen `--on-deep-*` değişkenleri kullanılır (bkz. kv-tokens.css notu). */ .kv-dash__period { margin: -6px 0 26px; font-size: 12.5px; line-height: 1.5; color: var(--on-deep-faint); } .kv-chip--status { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: 5px 12px; } /* İstek detayı */ .kv-req-detail h1 { font-size: 34px; font-weight: 800; line-height: 1.2; margin-bottom: 24px; max-width: 34ch; } .kv-post { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); padding: 28px 30px; box-shadow: var(--sh-card); margin-bottom: 28px; } .kv-post--soft { background: var(--soft); box-shadow: none; padding: 26px 28px; margin-bottom: 18px; } .kv-post__head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; } .kv-post__who { font-size: 14.5px; font-weight: 700; } .kv-post__when { font-size: 12.5px; color: var(--muted); } .kv-post__tag { margin-left: auto; } .kv-post__body { font-size: 15.5px; line-height: 1.75; color: var(--ink); margin: 0; } .kv-post__body p:last-child { margin-bottom: 0; } /* Adımlı "nasıl işler" listesi */ .kv-steps-deep { display: flex; flex-direction: column; gap: 16px; font-size: 13.5px; line-height: 1.6; color: var(--onDeep); } .kv-steps-deep > div { display: flex; gap: 12px; } .kv-steps-deep i { width: 26px; height: 26px; border-radius: 9px; background: rgba(255, 255, 255, .08); color: var(--on-deep-accent); font-weight: 800; font-size: 12px; display: flex; align-items: center; justify-content: center; flex: none; font-style: normal; } /* ========================================================================== Kimlik doğrulama ========================================================================== */ .kv-auth { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: stretch; } .kv-auth__card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-panel); padding: 40px 42px; box-shadow: var(--sh-raise); } .kv-auth__card--alt { background: var(--soft); box-shadow: none; } .kv-auth__card--alt .kv-input, .kv-auth__card--alt .kv-select, .kv-auth__card--alt .kv-textarea { background: var(--card); } .kv-auth__card h1, .kv-auth__card h2 { font-size: 32px; font-weight: 800; line-height: 1.15; margin-bottom: 10px; } .kv-auth__lead { font-size: 14.5px; line-height: 1.7; color: var(--muted); margin: 0 0 28px; } .kv-auth__fields { display: flex; flex-direction: column; gap: 18px; } .kv-auth__row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } /* Onay imli kazanım listesi (giriş sayfasındaki "Kayıt Ol" paneli) */ .kv-check-list { list-style: none; padding: 0; margin: 0 0 26px; display: flex; flex-direction: column; gap: 11px; font-size: 14px; font-weight: 600; } .kv-check-list li { display: flex; align-items: center; gap: 10px; } .kv-check-list svg { color: var(--t); flex: none; } /* ========================================================================== Kullanıcı profili ========================================================================== */ .kv-profile__head { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; } .kv-profile__head h1 { font-size: 36px; font-weight: 800; line-height: 1.15; margin-bottom: 8px; } .kv-profile__id { flex: 1; min-width: 260px; } .kv-profile__sub { font-size: 14.5px; color: var(--muted); margin: 0; } .kv-activity { display: flex; flex-direction: column; } .kv-activity__item { display: flex; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--line); } .kv-activity__item:last-child { border-bottom: 0; } .kv-activity__body { flex: 1; min-width: 0; } .kv-activity__t { font-size: 15px; font-weight: 600; line-height: 1.5; } .kv-activity__w { font-size: 12.5px; color: var(--muted); margin-top: 4px; } /* ========================================================================== API dokümantasyonu ========================================================================== */ .kv-api__stats { display: flex; gap: 22px; flex-wrap: wrap; } .kv-api__stat-n { font-size: 26px; font-weight: 800; letter-spacing: -.02em; } .kv-api__stat-l { font-size: 12.5px; color: var(--onDeep); } .kv-api__ep { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; } .kv-api__verb { font-size: 11px; font-weight: 800; background: var(--t-fill); color: var(--on-t); padding: 6px 12px; border-radius: var(--r-pill); letter-spacing: .04em; } .kv-api__path { font-size: 15px; font-weight: 700; color: var(--ink); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; overflow-wrap: anywhere; } .kv-api__lead { font-size: 15px; line-height: 1.75; color: var(--muted); margin: 0 0 26px; max-width: 68ch; } .kv-api__label { font-size: 11.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; } .kv-api__errors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } .kv-api__err { background: var(--soft); border: 1px solid var(--line); border-radius: var(--r-icon); padding: 18px; } .kv-api__err-n { font-size: 15px; font-weight: 800; margin-bottom: 5px; } .kv-api__err-d { font-size: 13px; line-height: 1.6; color: var(--muted); margin: 0; } .kv-api__section { margin-bottom: 44px; } .kv-api__section:last-child { margin-bottom: 0; } .kv-tryit__out { margin-top: 14px; max-height: 320px; overflow: auto; font-size: 11.5px; } /* ========================================================================== SSS akordeonu ========================================================================== */ .kv-acc { display: flex; flex-direction: column; gap: 14px; } .kv-acc__item { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-tile); box-shadow: var(--sh-card); overflow: hidden; } .kv-acc__btn { display: flex; align-items: center; gap: 16px; width: 100%; text-align: left; border: 0; background: transparent; font-family: inherit; color: var(--ink); padding: 24px 28px; cursor: pointer; } .kv-acc__q { font-size: 17.5px; font-weight: 700; flex: 1; line-height: 1.4; } .kv-acc__i { color: var(--muted); font-size: 20px; font-weight: 700; flex: none; line-height: 1; } .kv-acc__btn[aria-expanded="true"] .kv-acc__i { color: var(--t-d); } .kv-acc__panel { padding: 0 28px 24px; font-size: 15px; line-height: 1.75; color: var(--muted); } .kv-acc__panel[hidden] { display: none; } /* ========================================================================== İletişim ========================================================================== */ .kv-contact__rows { display: flex; flex-direction: column; gap: 12px; font-size: 14.5px; } .kv-contact__row { display: flex; gap: 11px; align-items: center; } .kv-contact__row--top { align-items: flex-start; } .kv-contact__row span:last-child { font-weight: 600; line-height: 1.5; } /* dokunma hedefi — bkz. .kv-link-more notu */ .kv-contact__row a, .kv-auth__row a { display: inline-flex; align-items: center; min-height: 24px; } .kv-map { height: 200px; background: var(--t-l); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; color: var(--t-d); } /* ========================================================================== Hakkında — platform özeti ========================================================================== */ .kv-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; } .kv-summary__n { font-size: 30px; font-weight: 800; line-height: 1.1; letter-spacing: -.02em; } .kv-summary__l { font-size: 12.5px; color: var(--onDeep); margin-top: 4px; } /* ========================================================================== Şehir Panosu gömmesi Kaynak sayfasında (`.kv-embed` içinde) ve veri seti sayfasında (tek başına) AYNI snippet kullanılıyor; iki bağlamda da doğru görünmesi gerekiyor. ========================================================================== */ .kv-panosu { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; box-shadow: var(--sh-card); margin: 0 0 22px; } /* `.kv-embed` zaten bir karttır (kv-pages.css:810). İçine düşen pano ikinci bir çerçeve çizmesin — aynı düzeltme çekirdeğin `.resource-view`i için kv-bridge.css:939'da yapılmıştı. */ .kv-embed .kv-panosu { background: none; border: 0; border-radius: 0; box-shadow: none; margin: 0; } .kv-panosu__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 18px 20px; border-bottom: 1px solid var(--line); } .kv-panosu__t { font-size: 16px; font-weight: 700; } .kv-panosu__d { margin: 4px 0 0; font-size: 14px; color: var(--muted); } .kv-panosu__ac { flex: none; } /* Yükseklik şablonda satır içi veriliyor (editörün girdiği değer). Buradaki `min-height` YALNIZCA yedek: `.kv-embed iframe` kuralının 560px'lik min-height'ı satır içi stille eziliyor, bu kural da pano bir şekilde yüksekliksiz basılırsa devreye giriyor. */ .kv-panosu__frame { display: block; width: 100%; border: 0; min-height: 320px; background: var(--bg-soft, transparent); } .kv-panosu__foot { padding: 12px 20px; border-top: 1px solid var(--line); font-size: 14px; } /* Tam ekran pano sayfası — `/dataset/x/resource/y/view/z`. Müşteri geri bildirimi 2026-09-04, madde 10: çekirdeğin "Tam Ekran" düğmesi bu adresi açıyor, sayfada başlık/altbilgi yok ve pano 600px'e çivilenmiş kalıyordu; ekranın geri kalanı boştu. Yükseklik burada veriliyor çünkü şablon tam ekranda satır içi `height` BASMIYOR (bkz. panosu_embed.html) — bu sayede `!important` gerekmiyor. `100dvh`, mobil tarayıcıların kaybolan adres çubuğunu da hesaba katar; desteklemeyen tarayıcı bir önceki `100vh` kuralında kalır. */ .kv-panosu--tam { margin: 0; border: 0; border-radius: 0; box-shadow: none; display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; } .kv-panosu--tam .kv-panosu__frame { flex: 1 1 auto; min-height: 0; } .kv-panosu--tam .kv-panosu__foot { flex: 0 0 auto; } .kv-panosu-blok { margin-bottom: 36px; } @media (max-width: 640px) { .kv-panosu__head { flex-direction: column; } .kv-panosu__ac { align-self: flex-start; } } /* -------------------------------------------------------------------------- Profil > Takip Ettiklerim (müşteri geri bildirimi 2026-09-04, madde 5) -------------------------------------------------------------------------- */ .kv-follow-blok { margin-bottom: 30px; } .kv-follow-blok__h { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; } .kv-follow-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .kv-follow-item { display: flex; align-items: center; gap: 14px; padding: 14px 18px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); color: inherit; text-decoration: none; } .kv-follow-item:hover { border-color: var(--brand); color: inherit; } /* Metin bloğu daralabilsin ki uzun açıklama kartı taşırmasın — flex çocuğunun varsayılan `min-width: auto` değeri buna izin vermez. */ .kv-follow-item__m { flex: 1 1 auto; min-width: 0; } .kv-follow-item__t { display: block; font-weight: 700; font-size: 15px; } .kv-follow-item__d { display: block; margin-top: 3px; font-size: 13.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ========================================================================== 5) KÖPRÜ KATMANI — mockupta karşılığı OLMAYAN CKAN ekranları. Bu ekranlar (veri seti/kaynak formları, organizasyon-kategori yönetimi, kullanıcı ayarları, panel, sysadmin, istatistik/rapor, hata sayfaları, onay diyalogları, aktivite akışları, gömülü görünüm eklentileri) CKAN'in kendi Bootstrap 5 işaretlemesiyle gelir. Şablonlarını yeniden yazmak yerine, çekirdek sınıflarını Yön D tasarım diline BAĞLIYORUZ: aynı tokenlar, aynı yarıçaplar, aynı düğme/çip/kart/tablo/form davranışı. Böylece portalın hiçbir köşesi eski görünümde kalmaz ve CKAN yükseltmesi şablon çakışması üretmez. ========================================================================== */ /* -------------------------------------------------------------------------- Bootstrap 5 kök değişkenleri -------------------------------------------------------------------------- */ :root { --bs-body-font-family: 'Plus Jakarta Sans', system-ui, sans-serif; --bs-body-color: var(--ink); --bs-body-bg: var(--bg); --bs-border-color: var(--line); --bs-link-color: var(--t-d); --bs-link-hover-color: var(--t); --bs-primary: var(--t); --bs-secondary: var(--muted); --bs-border-radius: var(--r-field); --bs-emphasis-color: var(--ink); --bs-secondary-color: var(--muted); --bs-secondary-bg: var(--soft); --bs-tertiary-bg: var(--soft); --bs-heading-color: var(--ink); } /* CKAN çekirdeğinin sayfa kabuğu — bizimkiyle çakışan yerleri sıfırlanır. */ .kv-main .container, .kv-main .container-fluid { max-width: var(--kv-max); padding-left: 0; padding-right: 0; width: 100%; } /* -------------------------------------------------------------------------- Modül / kart -------------------------------------------------------------------------- */ .kv-main .module, .kv-main .card, .kv-main .module-narrow { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--sh-card); color: var(--ink); margin-bottom: 24px; } .kv-main .module-content, .kv-main .card-body { padding: 24px 26px; } .kv-main .module-heading, .kv-main .card-header { background: transparent; border-bottom: 1px solid var(--line); padding: 18px 26px; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); border-radius: var(--r-card) var(--r-card) 0 0; } .kv-main .module h1, .kv-main .module h2 { letter-spacing: -.03em; } /* `:not(.module-heading)`: modül başlığı zaten yukarıda 12px/uppercase olarak tanımlı; `.kv-main .module h2` ondan DAHA SPESİFİK olduğu için dışlanmazsa onu ezip yan panel başlıklarını 22px yapıyordu (ölçüldü: /ckan-admin/config). */ .kv-main .module h1:not(.module-heading) { font-size: 32px; margin-bottom: 14px; } .kv-main .module h2:not(.module-heading) { font-size: 22px; margin-bottom: 12px; } .kv-main .module h3:not(.module-heading) { font-size: 18px; margin-bottom: 10px; font-weight: 700; } /* CKAN'in "page-header" sekme şeridi → kv sekme rayı */ .kv-main .page-header, .kv-main .module .page-header { border: 0; padding: 0; margin: 0 0 24px; background: transparent; } .kv-main .nav-tabs { border: 0; display: flex; gap: 6px; background: var(--soft); border-radius: var(--r-pill); padding: 5px; width: fit-content; max-width: 100%; flex-wrap: wrap; } .kv-main .nav-tabs .nav-link, .kv-main .nav-tabs > li > a { border: 0; border-radius: var(--r-pill); font-size: 13.5px; font-weight: 600; color: var(--muted); padding: 9px 18px; background: transparent; } .kv-main .nav-tabs .nav-link:hover { color: var(--ink); background: transparent; } .kv-main .nav-tabs .nav-link.active, .kv-main .nav-tabs > li.active > a { background: var(--card); color: var(--ink); font-weight: 700; box-shadow: var(--sh-tab-active); border: 0; } /* İçerik eylemi (sağ üst düğmeler) */ .kv-main .content_action, .kv-main .page_primary_action { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 20px; } /* -------------------------------------------------------------------------- Düğmeler -------------------------------------------------------------------------- */ .kv-main .btn:not([class*="kv-"]), .kv-main button.btn:not([class*="kv-"]), .kv-main a.btn:not([class*="kv-"]), .kv-main input[type="submit"]:not([class*="kv-"]), .kv-main input[type="button"]:not([class*="kv-"]) { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--line); background: var(--card); color: var(--ink); border-radius: var(--r-pill); padding: 12px 22px; font-family: inherit; font-size: 14px; font-weight: 700; line-height: 1.2; min-height: 44px; text-shadow: none; box-shadow: none; transition: background .2s ease, color .2s ease, border-color .2s ease; } .kv-main .btn:hover { border-color: var(--t); color: var(--t-d); background: var(--card); } .kv-main .btn-primary, .kv-main .btn-success, .kv-main input[type="submit"].btn-primary { background: var(--t-fill); border-color: var(--t-fill); color: var(--on-t); box-shadow: var(--sh-btn); } .kv-main .btn-primary:hover, .kv-main .btn-success:hover { background: var(--t-fill-hover); border-color: var(--t-fill-hover); color: var(--on-t); } .kv-main .btn-danger { background: #b93a3a; border-color: #b93a3a; color: #fff; } .kv-main .btn-danger:hover { background: #a02f2f; border-color: #a02f2f; color: #fff; } .kv-main .btn-sm, .kv-main .btn-xs { font-size: 13px; padding: 8px 16px; min-height: 36px; } .kv-main .btn-lg { font-size: 15px; padding: 14px 28px; } .kv-main .btn-link { border-color: transparent; background: transparent; color: var(--t-d); box-shadow: none; padding: 8px 10px; min-height: 0; } .kv-main .btn-link:hover { background: transparent; color: var(--t); text-decoration: underline; } .kv-main .btn-group { display: inline-flex; gap: 8px; flex-wrap: wrap; } .kv-main .btn-group > .btn { border-radius: var(--r-pill) !important; } /* -------------------------------------------------------------------------- Formlar -------------------------------------------------------------------------- */ /* ⚠️ `:not([class*="kv-"])` KALDIRILMAMALI. Bu katman YALNIZCA çekirdeğin kendi ekranları içindir. Seçiciler `.kv-main input[type="text"]` gibi yazıldığında spesifiklikleri (0,2,1) olur ve bizim `.kv-search input` (0,1,1) kuralımızı EZER: arama kapsülünün içindeki input kendi çerçevesini alır ve "kutu içinde kutu" görüntüsü çıkar (ölçüldü: input 1px solid #e4ecec + 14px yarıçap). `kv-` sınıfı taşıyan her kontrol bizim katmanımıza bırakılır. */ .kv-main .form-control:not([class*="kv-"]), .kv-main .form-select:not([class*="kv-"]), .kv-main input[type="text"]:not([class*="kv-"]), .kv-main input[type="email"]:not([class*="kv-"]), .kv-main input[type="password"]:not([class*="kv-"]), .kv-main input[type="url"]:not([class*="kv-"]), .kv-main input[type="search"]:not([class*="kv-"]), .kv-main input[type="number"]:not([class*="kv-"]), .kv-main input[type="tel"]:not([class*="kv-"]), .kv-main input[type="date"]:not([class*="kv-"]), .kv-main select:not([class*="kv-"]), .kv-main textarea:not([class*="kv-"]) { width: 100%; box-sizing: border-box; border: 1px solid var(--line); border-radius: var(--r-field); background: var(--bg); color: var(--ink); font-family: inherit; font-size: 15px; padding: 13px 16px; outline: none; box-shadow: none; transition: border-color .2s ease; min-height: 46px; } .kv-main .form-control:not([class*="kv-"]):focus, .kv-main select:not([class*="kv-"]):focus, .kv-main textarea:not([class*="kv-"]):focus { border-color: var(--t); box-shadow: none; } .kv-main textarea:not([class*="kv-"]) { min-height: 130px; resize: vertical; } /* Açılır listelerde tasarımın kendi oku (yerli ok tarayıcıya göre değişiyor ve turkuaz dille bağdaşmıyor). `select2` ile sarılanlar hariç tutulur. */ .kv-main select.form-control:not([class*="kv-"]), .kv-main select.form-select:not([class*="kv-"]), .kv-main select:not([multiple]):not([data-module]):not([class*="kv-"]) { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235c7080' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; padding-right: 42px; } :root[data-theme="dark"] .kv-main select.form-control:not([class*="kv-"]), :root[data-theme="dark"] .kv-main select.form-select:not([class*="kv-"]), :root[data-theme="dark"] .kv-main select:not([multiple]):not([data-module]):not([class*="kv-"]) { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2393a8b4' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); } .kv-main label, .kv-main .control-label, .kv-main .form-label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 8px; color: var(--ink); } .kv-main .form-group, .kv-main .control-group, .kv-main .mb-3 { margin-bottom: 22px; } .kv-main .form-text, .kv-main .info-block, .kv-main .help-block, .kv-main .form-group .info-block { font-size: 12.5px; line-height: 1.6; color: var(--muted); margin-top: 7px; background: transparent; border: 0; padding: 0; } .kv-main .form-actions, .kv-main .form-group.form-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; border-top: 1px solid var(--line); padding: 22px 0 0; margin-top: 28px; background: transparent; } .kv-main .form-actions .action-info { font-size: 13px; color: var(--muted); margin: 0; flex: 1; min-width: 200px; } .kv-main input[type="checkbox"], .kv-main input[type="radio"] { accent-color: var(--t); width: 16px; height: 16px; min-height: 0; padding: 0; margin-right: 8px; } .kv-main .checkbox, .kv-main .radio, .kv-main .form-check { display: flex; align-items: center; gap: 9px; font-size: 14px; color: var(--muted); } .kv-main .form-check-label { margin-bottom: 0; font-weight: 500; } .kv-main .error-block, .kv-main .error-inline, .kv-main .invalid-feedback { font-size: 12.5px; color: #c0392b; font-weight: 600; margin-top: 7px; background: transparent; padding: 0; border: 0; } .kv-main .error-explanation, .kv-main .alert-error { background: #fdeceb; border: 1px solid #f2c4c0; color: #922; border-radius: var(--r-tile); padding: 16px 22px; font-size: 14px; } :root[data-theme="dark"] .kv-main .error-explanation, :root[data-theme="dark"] .kv-main .alert-error { background: #2a1618; border-color: #4a2a2c; color: #f3b5b1; } .kv-main .control-group.error .form-control, .kv-main .form-control.is-invalid { border-color: #c0392b; } /* Input grubu (URL öneki, arama) */ .kv-main .input-group { display: flex; align-items: stretch; } .kv-main .input-group-text, .kv-main .input-group-addon { background: var(--soft); border: 1px solid var(--line); color: var(--muted); font-size: 13.5px; padding: 0 14px; display: flex; align-items: center; border-radius: var(--r-field) 0 0 var(--r-field); border-right: 0; } .kv-main .input-group > .form-control:not(:first-child) { border-radius: 0 var(--r-field) var(--r-field) 0; } .kv-main .input-group > .form-control:not(:last-child) { border-radius: var(--r-field) 0 0 var(--r-field); } /* select2 / autocomplete (etiket, organizasyon seçici) */ .kv-main .select2-container .select2-choices, .kv-main .select2-container .select2-choice, .kv-main .select2-container--default .select2-selection { border: 1px solid var(--line) !important; border-radius: var(--r-field) !important; background: var(--bg) !important; color: var(--ink) !important; min-height: 46px; padding: 6px 10px; box-shadow: none !important; } .kv-main .select2-container .select2-choices li.select2-search-choice, .kv-main .select2-selection__choice { background: var(--t-l) !important; border: 0 !important; color: var(--t-d) !important; border-radius: var(--r-pill) !important; font-size: 12px; font-weight: 700; padding: 4px 11px !important; box-shadow: none !important; } .select2-drop, .select2-dropdown { background: var(--card) !important; border: 1px solid var(--line) !important; border-radius: var(--r-field) !important; color: var(--ink) !important; box-shadow: var(--sh-raise) !important; } .select2-results .select2-highlighted, .select2-results__option--highlighted { background: var(--t-l) !important; color: var(--t-d) !important; } /* Dosya yükleme alanı */ .kv-main .image-upload .controls { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; } .kv-main .image-upload .btn { flex: none; } /* Aşama göstergesi (veri seti sihirbazı). ÇEKİRDEK İŞARETLEMESİ: `
    1. …
      2. …`. CKAN'in kendi main.css'i buna mutlak konumlu ok/üçgen sözde öğeleri ve negatif margin'ler uyguluyor; sekme rayına benzetirken onları da SIFIRLAMAK gerekiyor, yoksa yeşil üçgen metnin üstüne biniyor. */ .kv-main .stages { display: flex; gap: 6px; list-style: none; margin: 0 0 28px; flex-wrap: wrap; background: var(--soft); border-radius: var(--r-pill); padding: 5px; width: fit-content; max-width: 100%; counter-reset: none; } .kv-main .stages li, .kv-main .stages li.first, .kv-main .stages li.last, .kv-main .stages li.active, .kv-main .stages li.complete, .kv-main .stages li.uncomplete { display: block; position: static; margin: 0; padding: 0; background: transparent; border: 0; box-shadow: none; width: auto; float: none; text-indent: 0; color: inherit; } .kv-main .stages li::before, .kv-main .stages li::after, .kv-main .stages li .highlight::before, .kv-main .stages li .highlight::after { content: none !important; display: none !important; } .kv-main .stages li .highlight { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--muted); padding: 9px 18px; border-radius: var(--r-pill); background: transparent; border: 0; font-family: inherit; cursor: pointer; white-space: nowrap; position: static; box-shadow: none; text-shadow: none; min-height: 0; width: auto; margin: 0; } .kv-main .stages li.active .highlight, .kv-main .stages li.complete .highlight { background: var(--card); color: var(--ink); font-weight: 700; box-shadow: var(--sh-tab-active); } .kv-main .stages li.complete .highlight { color: var(--t-d); } /* -------------------------------------------------------------------------- Tablolar -------------------------------------------------------------------------- */ .kv-main .table, .kv-main table.table { width: 100%; border-collapse: collapse; font-size: 13.5px; background: transparent; color: var(--ink); margin-bottom: 0; } .kv-main .table > thead > tr, .kv-main .table thead tr { background: var(--soft); } .kv-main .table th { padding: 13px 18px; font-weight: 800; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); border: 0; text-align: left; vertical-align: middle; } .kv-main .table td { padding: 13px 18px; border: 0; border-top: 1px solid var(--line); color: var(--muted); vertical-align: middle; } .kv-main .table tbody td:first-child { font-weight: 600; color: var(--ink); } .kv-main .table-striped > tbody > tr:nth-of-type(odd) > * { background: transparent; --bs-table-accent-bg: transparent; } .kv-main .table-bordered, .kv-main .table-bordered > :not(caption) > * > * { border: 0; } .kv-main .table-responsive { overflow-x: auto; } /* -------------------------------------------------------------------------- Uyarı / bildirim -------------------------------------------------------------------------- */ .kv-main .alert { border-radius: var(--r-tile); padding: 16px 22px; font-size: 14.5px; line-height: 1.6; border: 1px solid var(--line); background: var(--soft); color: var(--ink); box-shadow: none; } .kv-main .alert-success { background: var(--t-l); border-color: transparent; color: var(--ink); } .kv-main .alert-danger, .kv-main .alert-error { background: #fdeceb; border-color: #f2c4c0; color: #922; } .kv-main .alert-warning { background: #fdf5e6; border-color: #f0dfba; color: #7a5a12; } .kv-main .alert-info { background: var(--soft); border-color: var(--line); color: var(--ink); } :root[data-theme="dark"] .kv-main .alert-danger, :root[data-theme="dark"] .kv-main .alert-error { background: #2a1618; border-color: #4a2a2c; color: #f3b5b1; } :root[data-theme="dark"] .kv-main .alert-warning { background: #2a2416; border-color: #4a412a; color: #f0d9a8; } .kv-main .alert .btn-close, .kv-main .alert .close { opacity: .5; } /* -------------------------------------------------------------------------- Rozet / etiket -------------------------------------------------------------------------- */ .kv-main .badge, .kv-main .label { background: var(--soft); color: var(--muted); border-radius: var(--r-pill); font-size: 11px; font-weight: 700; padding: 5px 11px; letter-spacing: 0; } .kv-main .badge-primary, .kv-main .bg-primary { background: var(--t-fill) !important; color: var(--on-t) !important; } .kv-main .label-success, .kv-main .badge-success { background: var(--t-l); color: var(--t-d); } /* Etiket listesi */ .kv-main .tag-list, .kv-main .tags { display: flex; gap: 7px; flex-wrap: wrap; list-style: none; padding: 0; margin: 0; } .kv-main .tag, .kv-main .tag-list .tag, .kv-main .tags a { display: inline-flex; align-items: center; background: var(--t-l); color: var(--t-d); border: 0; border-radius: var(--r-pill); font-size: 12px; font-weight: 600; padding: 5px 12px; text-shadow: none; box-shadow: none; } .kv-main .tag:hover { background: var(--t-fill); color: var(--on-t); } /* -------------------------------------------------------------------------- Açılır menü -------------------------------------------------------------------------- */ .dropdown-menu { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-field); box-shadow: var(--sh-raise); padding: 8px; --bs-dropdown-link-color: var(--ink); --bs-dropdown-link-hover-bg: var(--t-l); --bs-dropdown-link-hover-color: var(--t-d); --bs-dropdown-bg: var(--card); } .dropdown-item { border-radius: var(--r-chip); padding: 9px 14px; font-size: 14px; color: var(--ink); } .dropdown-item:hover, .dropdown-item:focus { background: var(--t-l); color: var(--t-d); } /* -------------------------------------------------------------------------- Diyalog / onay -------------------------------------------------------------------------- */ .modal-content { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-panel); color: var(--ink); box-shadow: var(--sh-raise-lg); } .modal-header, .modal-footer { border-color: var(--line); padding: 20px 26px; } .modal-body { padding: 24px 26px; font-size: 15px; line-height: 1.7; } .modal-title { font-size: 22px; font-weight: 800; letter-spacing: -.03em; } /* -------------------------------------------------------------------------- Medya ızgarası (organizasyon/kategori listeleri — override edilmemiş yerler) -------------------------------------------------------------------------- */ .kv-main .media-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; background: transparent; border: 0; padding: 0; margin: 0; box-shadow: none; list-style: none; } .kv-main .media-item { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--sh-card); padding: 26px 24px; margin: 0; width: auto; float: none; position: relative; transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); } .kv-main .media-item:hover { transform: translateY(-4px); box-shadow: var(--sh-card-hover); border-color: var(--t); } .kv-main .media-heading { font-size: 16px; font-weight: 700; letter-spacing: -.03em; line-height: 1.35; } .kv-main .media-image { margin-bottom: 14px; } .kv-main .media-image img { height: 52px; width: auto; object-fit: contain; } /* Veri seti listesi (override edilmemiş yerler) */ .kv-main .dataset-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; } .kv-main .dataset-item { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--sh-card); padding: 24px 26px; margin: 0; transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); } .kv-main .dataset-item:hover { transform: translateY(-4px); box-shadow: var(--sh-card-hover); border-color: var(--t); } .kv-main .dataset-heading { font-size: 20px; font-weight: 700; letter-spacing: -.03em; line-height: 1.3; } .kv-main .dataset-heading a { color: var(--ink); } .kv-main .dataset-heading a:hover { color: var(--t-d); } .kv-main .dataset-item .notes { font-size: 14px; line-height: 1.6; color: var(--muted); margin: 8px 0 12px; } .kv-main .dataset-resources { display: flex; gap: 7px; flex-wrap: wrap; list-style: none; padding: 0; margin: 0; } .kv-main .dataset-resources .label, .kv-main .dataset-resources a { background: var(--t-l); color: var(--t-d); border-radius: var(--r-pill); font-size: 11px; font-weight: 700; padding: 5px 11px; } /* Kaynak listesi öğesi */ .kv-main .resource-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; } .kv-main .resource-item { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-tile); box-shadow: var(--sh-card); padding: 20px 24px; margin: 0; } .kv-main .resource-item .heading { font-size: 15.5px; font-weight: 700; color: var(--ink); } .kv-main .resource-item .description { font-size: 12.5px; color: var(--muted); margin-top: 3px; } .kv-main .format-label, .kv-main .resource-item .format-label { background: var(--t-l); color: var(--t-d); border-radius: var(--r-pill); font-size: 11px; font-weight: 800; padding: 4px 10px; text-indent: 0; width: auto; height: auto; position: static; text-transform: uppercase; } /* -------------------------------------------------------------------------- Aktivite akışı -------------------------------------------------------------------------- */ .kv-main .activity { list-style: none; padding: 0; margin: 0; border: 0; } .kv-main .activity .item { display: flex; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--line); margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink); position: relative; } .kv-main .activity .item::before, .kv-main .activity .item::after { display: none; } .kv-main .activity .item .date, .kv-main .activity .date { font-size: 12.5px; color: var(--muted); display: block; margin-top: 4px; } .kv-main .activity .item .icon, .kv-main .activity .item > i { width: 36px; height: 36px; border-radius: var(--r-chip); background: var(--t-l); color: var(--t-d); display: flex; align-items: center; justify-content: center; flex: none; position: static; } /* -------------------------------------------------------------------------- Yan panel bağlantı listeleri (.nav-simple / .nav-facet) İstatistik menüsü, facet listeleri, "bu sayfada" navigasyonları. Çekirdek bunlara koyu gri bir aktif şerit + üçgen ok basıyor; tasarımın pill dili uygulanır. -------------------------------------------------------------------------- */ .kv-main .nav-simple, .kv-main .nav-facet, .kv-main ul.nav.nav-simple { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 2px; border: 0; } .kv-main .nav-simple .nav-item, .kv-main .nav-facet .nav-item { border: 0; background: transparent; margin: 0; position: static; } .kv-main .nav-simple .nav-item > a, .kv-main .nav-facet .nav-item > a { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: var(--r-chip); font-size: 14px; font-weight: 600; color: var(--ink); background: transparent; border: 0; text-shadow: none; box-shadow: none; } .kv-main .nav-simple .nav-item > a:hover, .kv-main .nav-facet .nav-item > a:hover { background: var(--soft); color: var(--t-d); } .kv-main .nav-simple .nav-item.active > a, .kv-main .nav-facet .nav-item.active > a { background: var(--t-l); color: var(--t-d); font-weight: 700; } .kv-main .nav-simple .nav-item::after, .kv-main .nav-simple .nav-item > a::after, .kv-main .nav-facet .nav-item::after, .kv-main .nav-facet .nav-item > a::after { content: none !important; display: none !important; } .kv-main .nav-facet .item-count, .kv-main .nav-simple .item-count { margin-left: auto; background: var(--soft); color: var(--muted); border-radius: var(--r-pill); font-size: 11.5px; font-weight: 700; padding: 3px 9px; } /* -------------------------------------------------------------------------- Sysadmin / yapılandırma -------------------------------------------------------------------------- */ .kv-main .admin-form, .kv-main .simple-input { max-width: 74ch; } /* -------------------------------------------------------------------------- Gömülü görünüm eklentileri (datatables, pdf, harita, resim) -------------------------------------------------------------------------- */ .kv-main .resource-view, .kv-main .ckanext-datapreview { border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; background: var(--card); box-shadow: var(--sh-card); } /* `.kv-embed` ZATEN bir karttır. Çekirdeğin `.resource-view` ve `.ckanext-datapreview` sarmalayıcıları onun içine girince üç kat iç içe çerçeve oluşuyordu (ölçüldü: kv-embed > resource-view > ckanext-datapreview). İçtekiler çerçevesizleştirilir; tek kart dıştaki kalır. */ .kv-embed .resource-view, .kv-embed .ckanext-datapreview, .kv-embed .resource-view .ckanext-datapreview { border: 0; border-radius: 0; background: transparent; box-shadow: none; margin: 0; } /* Çekirdeğin "Tam Ekran / Yerleştir" düğmeleri `.resource-view .actions` içinde MUTLAK konumlu (`right: 0`). `.resource-view` konumlandırılmış olmadığı için düğmeler en yakın konumlandırılmış ataya —yani sayfanın tepesine— yapışıp üst şeridin üstüne biniyordu. Kart konumlandırılır. */ .kv-embed { position: relative; } .kv-embed .resource-view > .actions { position: absolute; top: 14px; right: 14px; left: auto; z-index: 2; display: flex; gap: 8px; } .kv-embed .resource-view > .desc:empty { display: none; } .kv-embed .resource-view > .desc { padding: 16px 20px 0; margin: 0; } .kv-embed .ckanext-datapreview { padding: 0; } .kv-main .resource-view iframe, .kv-main .ckanext-datapreview iframe { display: block; width: 100%; border: 0; min-height: 560px; } /* -------------------------------------------------------------------------- ckanext-report / ckanext-stats -------------------------------------------------------------------------- */ .kv-main .report-header, .kv-main .report-body { margin-bottom: 24px; } .kv-main .report-table { font-size: 13.5px; } /* -------------------------------------------------------------------------- Hata sayfası -------------------------------------------------------------------------- */ .kv-error { max-width: 640px; margin: 0 auto; text-align: center; padding: 72px 0 96px; } .kv-error__code { font-size: 96px; font-weight: 800; line-height: 1; letter-spacing: -.04em; color: var(--t-d); margin-bottom: 18px; } .kv-error__t { font-size: 32px; font-weight: 800; margin-bottom: 14px; } .kv-error__b { font-size: 16px; line-height: 1.7; color: var(--muted); margin: 0 auto 28px; max-width: 52ch; } .kv-error__actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } /* -------------------------------------------------------------------------- Yardımcılar -------------------------------------------------------------------------- */ .kv-main .wrapper, .kv-main .row, .kv-main .primary, .kv-main .secondary { background: transparent; border: 0; box-shadow: none; padding-left: 0; padding-right: 0; } .kv-main .toolbar { margin: 0; padding: 0; } /* Aynı taşma koruması, override etmediğimiz çekirdek ekranlar için (Bootstrap ızgarası). `.col-*` öğeleri de min-width:auto ile geliyor; geniş bir tablo satırı sayfayı yatay kaydırıyordu. */ .kv-main .row > [class*="col"], .kv-main .primary, .kv-main .secondary, .kv-main .module, .kv-main .module-content { min-width: 0; } .kv-main .table-responsive, .kv-main .table-wrapper { overflow-x: auto; } /* Uzun URL/kod hücreleri satırı zorlamasın — YALNIZ çekirdeğin üstveri tablolarında. Kendi veri önizleme tablomuz (`.kv-table`) hariç tutulur: orada sarma, geometri sütunları yüzünden satırları 400px'e çıkarıyordu. */ .kv-main table:not(.kv-table) td, .kv-main table:not(.kv-table) th { overflow-wrap: anywhere; } .kv-main .breadcrumb { background: transparent; padding: 0; margin: 0 0 18px; font-size: 12.5px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; --bs-breadcrumb-divider: '/'; } .kv-main .breadcrumb a { color: var(--t-d); } .kv-main .breadcrumb .active { color: var(--muted); } .kv-main .hide-heading, .kv-main .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); } /* =========================================================================== * kvkk.css — KVKK aydınlatma metni modalı (kayıt ve veri talebi formları). * * Yön D geçişinde YENİDEN YAZILDI. Önceki sürüm eski tasarımın (Open Sans * Condensed, tomato başlık, #f70000 düğme, 2px/1px yarıçap) parçasıydı ve * yeni tasarım diliyle bağdaşmıyordu. Davranış ve JS sözleşmesi AYNEN * korundu — kvkk.js şu seçicilere bağlıdır ve hiçbiri değişmedi: * #custom-modal-kvkk · .close-modal-kvkk · #modal-trigger-kvkk * #kvkkCheckBox · [data-kvkk-accept] * * Modal `style.display` ile açılıp kapandığı için kapsayıcının varsayılanı * `display:none` OLMAK ZORUNDA (eski sürümde bu kural Bootstrap 3'ün * `.modal` bileşeninden geliyordu; sınıf yeniden adlandırılınca kaybolmuş * ve metin sürekli açık kalmıştı — o hata burada da tekrarlanmamalı). * ========================================================================= */ .kvkk-modal { display: none; position: fixed; inset: 0; z-index: 1000; overflow: auto; width: 100%; height: 100%; background-color: rgba(18, 34, 46, .55); padding: 24px 16px; } .kvkk-modal-content { position: relative; background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: var(--r-panel); box-shadow: var(--sh-raise-lg); margin: 0 auto; padding: 32px 34px; width: 100%; max-width: 1080px; } .kvkk-modal-content h4 { font-size: 22px; font-weight: 800; letter-spacing: -.03em; margin: 0 0 12px; color: var(--ink); } .kvkk-modal-content h5 { font-size: 16px; font-weight: 700; margin: 18px 0 8px; color: var(--ink); } .kvkk-modal .content-group { overflow: hidden; font-size: 15px; line-height: 1.7; color: var(--muted); } .kvkk-modal .content-group p { font-size: 14.5px; } .kvkk-modal .content-group embed, .kvkk-modal .content-group iframe { border: 1px solid var(--line); border-radius: var(--r-tile); background: var(--bg); display: block; margin-bottom: 14px; } .kvkk-modal .content-group ol, .kvkk-modal .content-group ul { padding-left: 22px; } /* Kapatma düğmesi — mockup dilinde yuvarlatılmış kare */ .close-modal-kvkk { position: absolute; top: 18px; right: 18px; width: 40px; height: 40px; border: 1px solid var(--line); background: var(--card); color: var(--ink); border-radius: var(--r-chip); display: flex; align-items: center; justify-content: center; font-size: 24px; line-height: 1; cursor: pointer; transition: border-color .2s ease, color .2s ease; } .close-modal-kvkk:hover, .close-modal-kvkk:focus { border-color: var(--t); color: var(--t-d); } .close-modal-kvkk:focus-visible { outline: 2px solid var(--t); outline-offset: 2px; } /* Kabul / ret düğmeleri */ .kvkk-modal .button-group { display: flex; gap: 12px; justify-content: flex-end; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 22px; margin-top: 22px; } .kvkk-modal .button-group .btn { display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-pill); font-family: inherit; font-size: 14.5px; font-weight: 700; padding: 13px 24px; min-height: 44px; border: 1px solid var(--line); background: var(--card); color: var(--ink); box-shadow: none; text-decoration: none; } .kvkk-modal .button-group .btn-warning { background: var(--card); border-color: var(--line); color: var(--ink); } .kvkk-modal .button-group .btn-warning:hover { border-color: var(--t); color: var(--t-d); } .kvkk-modal .button-group .btn-success { background: var(--t-fill); border-color: var(--t-fill); color: var(--on-t); box-shadow: var(--sh-btn); } .kvkk-modal .button-group .btn-success:hover { background: var(--t-fill-hover); border-color: var(--t-fill-hover); color: var(--on-t); } /* Onam kutusu satırı — "Kişisel Verilerin Korunması Hakkında" */ .kvkk-consent { display: flex; align-items: flex-start; gap: 11px; font-size: 13.5px; line-height: 1.6; color: var(--muted); cursor: pointer; margin: 0; } .kvkk-consent input[type="checkbox"] { accent-color: var(--t); width: 16px; height: 16px; margin: 2px 0 0; flex: none; cursor: pointer; position: static; } .kvkk-consent__link { color: var(--t-d); font-weight: 700; text-decoration: underline; } /* Eski kurulumda geçersiz yazılmış (ve bu yüzden HİÇ uygulanmamış) iki medya sorgusu vardı: `@media screen (max-width: …)` — `and` eksikti. Yön D'de düzeltilerek etkinleştirildi. */ @media screen and (max-width: 1199px) { .kvkk-modal .content-group { font-size: 14.5px; } .kvkk-modal-content { padding: 28px 24px; } } @media screen and (max-width: 767px) { .kvkk-modal { padding: 12px 10px; } .kvkk-modal .content-group { font-size: 14px; } .kvkk-modal-content { padding: 22px 18px; border-radius: var(--r-card); } .close-modal-kvkk { top: 12px; right: 12px; width: 36px; height: 36px; } .kvkk-modal .content-group embed { height: 420px !important; } .kvkk-modal .button-group .btn { flex: 1; } } /* ========================================================================== 6) RESPONSIVE — README §Etkileşim/Responsive'te verilen kırılma noktaları. ≥1200px tam düzen (prototiplerin ölçülendiği genişlik) 900–1199px çok kolonlu ızgaralar 2 kolona, hero tek kolona <900px tek kolon; facet paneli çekmeceye, yan paneller içeriğin altına, dört kolonlu KPI ızgaraları 2×2'ye; menü hamburger ========================================================================== */ /* -------------------------------------------------------------------------- 1200px altı — dolgu ve tipografi kademeli küçülür -------------------------------------------------------------------------- */ @media (max-width: 1199.98px) { :root { --kv-pad: 24px; } /* Hero tek kolon oldu (Tasarım h) — ızgarayı tek kolona indiren kural ve kaldırılan kullanım paneline ait kurallar düştü. */ .kv-hero__in { padding: 64px var(--kv-pad) 72px; } .kv-hero h1 { font-size: 48px; max-width: 20ch; } .kv-hero__lead { font-size: 16.5px; } .kv-h-hero { font-size: 48px; } .kv-h-page { font-size: 36px; } .kv-h-page-sm { font-size: 34px; } .kv-h-section, .kv-h-section-lg { font-size: 30px; } .kv-detail-head h1 { font-size: 34px; } .kv-res-head h1 { font-size: 30px; } .kv-profile__head h1 { font-size: 30px; } .kv-req-detail h1 { font-size: 28px; } .kv-section { padding-top: 64px; } .kv-section--88, .kv-section--72 { padding-top: 64px; } /* Çok kolonlu ızgaralar → 2 kolon */ .kv-grid--5, .kv-grid--4, .kv-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kv-main .media-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kv-ideas { grid-template-columns: 1fr; } .kv-howto__grid { grid-template-columns: 1fr; gap: 36px; } .kv-howto { padding: 40px 32px; } .kv-idea-feat { padding: 36px 32px 32px; } .kv-cta { padding: 36px 32px 32px; } .kv-dash__grid { grid-template-columns: 1fr; gap: 36px; } .kv-dash__kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kv-deep--panel { padding: 32px 28px; border-radius: var(--r-panel); } .kv-cols--api { grid-template-columns: 200px 1fr; } .kv-cols--api > .kv-side { grid-column: 1 / -1; position: static; flex-direction: row; flex-wrap: wrap; } .kv-cols--api > .kv-side > * { flex: 1 1 260px; } .kv-cols--split, .kv-cols--split-a { grid-template-columns: 1fr; gap: 36px; } .kv-auth { grid-template-columns: 1fr; } .kv-auth__card { padding: 32px 28px; } .kv-cols { gap: 32px; } .kv-cols--facet { grid-template-columns: 250px 1fr; } .kv-cols--aside { grid-template-columns: 1fr 300px; } .kv-footer__in { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px; } } /* -------------------------------------------------------------------------- 900px altı — tek kolon -------------------------------------------------------------------------- */ @media (max-width: 899.98px) { :root { --kv-pad: 20px; --kv-stick: 92px; } /* Menü hamburgere döner */ .kv-nav, .kv-header__account { display: none; } .kv-burger { display: inline-flex; } .kv-header__in { justify-content: space-between; gap: 12px; flex-wrap: nowrap; } .kv-logo img { height: 42px; } /* <900px: masaüstündeki 52px'in dar ekran karşılığı */ .kv-topbar__in { font-size: 12px; gap: 12px; } .kv-topbar__right { gap: 10px; } /* Hero */ .kv-hero__in { padding: 44px var(--kv-pad) 52px; } .kv-hero h1 { font-size: 36px; max-width: none; } .kv-hero__lead { font-size: 15.5px; margin-bottom: 26px; } .kv-search--hero { max-width: none; padding: 6px 6px 6px 16px; } .kv-search--hero input { font-size: 15px; padding: 12px 10px; } .kv-search--hero button { padding: 12px 20px; font-size: 14px; } .kv-search { padding: 6px 6px 6px 16px; min-width: 0 !important; } /* Başlıklar */ .kv-h-hero { font-size: 36px; } .kv-h-page, .kv-h-page-sm { font-size: 30px; } .kv-h-section, .kv-h-section-lg { font-size: 26px; } .kv-h-sub { font-size: 22px; } .kv-detail-head h1 { font-size: 28px; max-width: none; } .kv-res-head h1 { font-size: 24px; } .kv-profile__head h1 { font-size: 26px; } .kv-req-detail h1 { font-size: 24px; max-width: none; } .kv-auth__card h1, .kv-auth__card h2 { font-size: 26px; } .kv-idea-feat h3 { font-size: 24px; } .kv-cta h3 { font-size: 22px; } .kv-prose h2 { font-size: 22px; } .kv-section { padding-top: 52px; } .kv-section--88, .kv-section--72 { padding-top: 52px; } .kv-body-wrap { padding-top: 24px; padding-bottom: 56px; } .kv-pagehead__in { padding-top: 24px; padding-bottom: 28px; } /* Tüm ızgaralar tek kolona */ .kv-grid--2, .kv-grid--3, .kv-grid--4, .kv-grid--5 { grid-template-columns: 1fr; } .kv-main .media-grid { grid-template-columns: 1fr; } .kv-cols, .kv-cols--facet, .kv-cols--facet-s, .kv-cols--aside, .kv-cols--aside-s, .kv-cols--doc, .kv-cols--api, .kv-cols--half { grid-template-columns: 1fr; gap: 28px; } /* Yan paneller içeriğin ALTINA düşer ve yapışkanlığı bırakır */ .kv-side, .kv-docnav { position: static; order: 2; } .kv-cols > .kv-side { order: 2; } .kv-cols > div:not(.kv-side) { order: 1; } /* Facet paneli açılır çekmeceye döner */ .kv-facet-toggle { display: inline-flex; align-items: center; gap: 9px; border: 1px solid var(--line); background: var(--card); color: var(--ink); border-radius: var(--r-pill); padding: 12px 22px; font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer; min-height: 44px; margin-bottom: 18px; width: 100%; justify-content: space-between; } .kv-facets { display: none; order: 0; } .kv-facets.is-open { display: flex; } .kv-cols--facet > .kv-facets, .kv-cols--facet-s > .kv-facets { position: static; } /* KPI ızgaraları 2×2 */ .kv-dash__kpis, .kv-stat-grid, /* Hero sayıları dar ekranda da ÜÇ kolon kalır — üç kısa sayı yan yana sığar, alt alta dizmek hero'yu gereksiz uzatırdı. Yalnız punto iner. */ .kv-hero__stats { margin-top: 30px; padding-top: 24px; gap: 10px; } .kv-hero__stat-n { font-size: 26px; } .kv-hero__stat-l { font-size: 12px; margin-top: 5px; } .kv-deep--panel { padding: 26px 22px; } .kv-deep--card { padding: 28px 24px 26px; } .kv-idea-feat { padding: 28px 24px 26px; } .kv-idea-feat__img { min-height: 150px; padding: 20px; } .kv-cta { padding: 28px 24px 26px; } .kv-cta img { height: 90px; } .kv-howto { padding: 28px 22px; border-radius: var(--r-card); } .kv-form-card { padding: 24px 20px; border-radius: var(--r-card); } .kv-form-grid { grid-template-columns: 1fr; } .kv-summary { grid-template-columns: 1fr 1fr; } /* Kart içi düzenler */ .kv-row-card { grid-template-columns: 1fr; gap: 16px; } .kv-row-card__side { text-align: left; display: flex; align-items: center; gap: 14px; } .kv-row-card__date { margin-bottom: 0; } .kv-row-simple { grid-template-columns: 1fr; gap: 10px; } .kv-res { flex-wrap: wrap; } .kv-res__actions { width: 100%; justify-content: flex-start; } .kv-idea { flex-wrap: wrap; } .kv-idea .kv-arrow { display: none; } .kv-pagehead__row, .kv-pagehead__ident { grid-template-columns: 1fr; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; } .kv-pagehead__actions { justify-content: flex-start; } .kv-idbox, .kv-idbox--cat { width: 76px; height: 76px; border-radius: var(--r-tile); padding: 12px; } .kv-detail-head__d, .kv-res-head__d, .kv-hero__lead { max-width: none; } .kv-dl { grid-template-columns: 1fr; } .kv-dl > dt, .kv-dl > .kv-dl__k { padding-bottom: 6px; border-bottom: 0; } .kv-dl > dd, .kv-dl > .kv-dl__v { padding-top: 6px; } .kv-prose, .kv-prose--narrow, .kv-prose--wide { max-width: none; } .kv-tabs { width: 100%; overflow-x: auto; flex-wrap: nowrap; } .kv-tabs a, .kv-tabs button { white-space: nowrap; } .kv-main .nav-tabs { width: 100%; overflow-x: auto; flex-wrap: nowrap; } /* Footer */ .kv-footer { margin-top: 56px; } .kv-footer__in { grid-template-columns: 1fr; gap: 28px; padding-top: 40px; padding-bottom: 28px; } .kv-footer__bottom-in { flex-direction: column; align-items: flex-start; gap: 12px; } .kv-error { padding: 48px 0 64px; } .kv-error__code { font-size: 68px; } .kv-error__t { font-size: 24px; } } /* -------------------------------------------------------------------------- 560px altı — en dar cihazlar -------------------------------------------------------------------------- */ @media (max-width: 559.98px) { :root { --kv-pad: 16px; } .kv-hero h1 { font-size: 30px; } .kv-h-page, .kv-h-page-sm { font-size: 26px; } .kv-h-section, .kv-h-section-lg { font-size: 22px; } .kv-detail-head h1 { font-size: 24px; } .kv-dash__kpis, .kv-stat-grid, .kv-summary, .kv-api__errors { grid-template-columns: 1fr; } .kv-search { flex-wrap: wrap; border-radius: var(--r-card); padding: 10px 12px; } .kv-search__icon { display: none; } .kv-search input { flex: 1 1 100%; padding: 10px 0; } .kv-search button { width: 100%; margin-top: 8px; } .kv-card--pad, .kv-card--pad-s { padding: 20px 18px; } .kv-ds-card, .kv-row-card, .kv-req-card { padding: 20px 18px; } .kv-facet { padding: 18px 18px; } .kv-acc__btn { padding: 18px 20px; } .kv-acc__panel { padding: 0 20px 18px; } .kv-acc__q { font-size: 16px; } .kv-post { padding: 22px 20px; } .kv-legend { min-width: 0; } .kv-btn { padding: 12px 20px; font-size: 14px; } } /* -------------------------------------------------------------------------- Yazdırma -------------------------------------------------------------------------- */ @media print { .kv-topbar, .kv-header, .kv-footer, .kv-side, .kv-facets, .kv-drawer, .kv-hero__blob, .kv-hero__siluet, .kv-pagehead__actions { display: none !important; } .kv-surface { background: #fff; color: #000; } .kv-cols { display: block; } a[href]::after { content: ""; } }