/* ========================================================================== Meydan Tüp Bebek — tasarım sistemi ========================================================================== Kavram: "Sabır ve Işık". Şanlıurfa'nın malzemesi kireç taşı ve ışıktır; palet oradan türer. Kurallar (ihlal etmeden önce iki kez düşünün): · Gölge yok. Derinlik tipografi ve ince çizgiyle kurulur. · Köşe yarıçapı en fazla 3px. · Altın yalnızca 1px saç çizgisidir; asla dolgu değildir. · Degrade yok. · Gövde metni serif dizilir — bu, siteyi şablon olmaktan çıkaran karardır. --------------------------------------------------------------------------- CSS MİMARİSİ — NEDEN YALNIZCA "reset" BİR @layer İÇİNDE? WordPress, theme.json'dan ürettiği global stilleri (#global-styles-inline-css) HİÇBİR katmana koymadan basar. CSS kaskad kuralına göre KATMANSIZ bir kural, özgüllüğü ne olursa olsun KATMANLI her kuralı yener. Yani tüm bileşenlerimizi @layer components içine koyarsak, theme.json'ın ürettiği `a:where(:not(.wp-element-button)) { color: ... }` kuralı bizim `.mh-btn { color: ... }` kuralımızı ezer ve düğme yazısı zeminle aynı renge düşerek görünmez olur. Bu yüzden: · Yalnızca "reset" katmanlıdır — kaybetmesi ZATEN istenen tek bölüm odur. · Geri kalan her şey katmansızdır ve özgüllükle yarışır: base (0,0,1 öğe) < components (0,1,0 sınıf) < utilities (sonda) · base.css, 'global-styles' bağımlılığıyla kuyruğa alınır (bkz. Assets.php), böylece eşit özgüllükte kaynak sırası her zaman bizden yana biter. ========================================================================== */ @layer reset; /* ========================================================================== 1 — Reset (tek katmanlı bölüm) ========================================================================== */ @layer reset { *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; /* Yapışkan başlık, çapa bağlantılarının hedefini örtmesin. */ scroll-padding-top: 7rem; } body { min-height: 100vh; min-height: 100svh; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } img, picture, svg, video, canvas { display: block; max-width: 100%; height: auto; } input, button, textarea, select { font: inherit; color: inherit; } button { background: none; border: 0; cursor: pointer; } p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; } ul[role="list"], ol[role="list"] { list-style: none; padding: 0; } :where(table) { border-collapse: collapse; width: 100%; } } /* * [hidden] HER ZAMAN gizler. * * Tarayıcının varsayılanı `[hidden] { display: none }` düşük özgüllüktedir ve * bileşene verilen herhangi bir `display` kuralı (grid, flex, inline-flex) onu * sessizce ezer. Sonuç: JavaScript `el.hidden = true` der, öğe ekranda kalır ve * hata "JS çalışmıyor" sanılır. Bu kural katmansız ve !important'tır çünkü * `hidden` bir stil tercihi değil, bir durum bildirimidir. */ [hidden] { display: none !important; } /* ========================================================================== 2 — Tokenlar ========================================================================== */ :root { /* ====================================================================== RENK — lacivert · beyaz · turkuaz ====================================================================== Palet, kurum mührünün KENDİ lacivertinden türetildi (#2B5B84). Önceki kireç taşı + adaçayı düzeni sıcak ve editoryaldi; bir yayına yakışıyordu, bir hastaneye değil. Lacivert güven ve kurumsallık, beyaz klinik netlik, turkuaz da ikisinin arasında tek nefes alma noktası olarak çalışır. Neden turkuaz KIRMIZI değil: turkuaz gezinme rengidir ve sayfada sık görünür. Kırmızı yalnızca ACİL için ayrıldı — bir hastanede kırmızının başka bir anlamı olmamalıdır. Bir bağlantıyı kırmızı yapmak, aciliyet sinyalini gün boyunca harcamak demektir. Tüm değerler ölçüldü; beyaz zemin ve lacivert zemin için ayrı ayrı. ====================================================================== */ /* --- Renk --- */ --mh-ink: #0E2340; /* beyaz üzerinde 15,75:1 */ --mh-ink-soft: #3A5570; /* 7,74:1 */ /* * DİKKAT: bu değeri açmayın. Üst veri metinleri (tarih, etiket, yardım * metni) bu renkle dizilir; beyaz üzerinde 5,16:1 verir ve AA eşiğinin * (4,5) hemen üstündedir. Bir tık açığı eşiğin altına düşer. */ --mh-ink-faint: #55708A; /* 5,16:1 */ --mh-surface: #FFFFFF; --mh-surface-raised: #FFFFFF; /* "Çok hafif turkuaz": zemin olarak, yazı olarak değil. Bantları ayırır. */ --mh-surface-warm: #EFF6F9; --mh-surface-deep: #0A1E33; /* * İKİ VURGU, İKİ ANLAM. * * Tek bir vurgu rengiyle hem "acil servis" hem "devamını oku" işaretlemek, * hastaya hiçbir şey söylemez. Bu yüzden vurgu ikiye ayrıldı ve her birine * bir görev verildi: * * accent (toprak/nar) → EYLEM ve ACİLİYET. Randevu düğmesi, acil şerit, * riskler bölümü. Sıcak, öne çıkan, seyrek. * guide (adaçayı) → GEZİNME ve BİLGİ. Bağlantılar, aktif menü, filtre. * Sakin, sık kullanılan. * * Adaçayı rastgele seçilmedi: kurum mührünün kendi rengidir (#76AAA5) ve * ton ailesi olarak mürekkebimize (168°) komşudur — arayüzü markaya bağlar. * Koyulaştırılmış sürüm kireç taşı zeminde AA kontrastı sağlar. */ --mh-accent: #B3261E; /* beyaz üzerinde 6,54:1 */ --mh-accent-strong: #9B211A; /* 8,00:1 */ --mh-guide: #0E7490; /* 5,36:1 */ --mh-guide-strong: #0B5F77; /* 7,20:1 */ /* * --mh-gold artık ALTIN DEĞİL, turkuaz çizgidir. Token adı korundu çünkü * on beş dosyada geçiyor ve adı değiştirmek renk kararıyla ilgisiz bir * yeniden adlandırma dalgası açardı. Yalnızca ÇİZGİ ve ODAK halkasında * kullanılır; yazı rengi olarak kullanılmaz (beyaz üzerinde 2,4:1). */ --mh-gold: #4FB3C9; --mh-line: #DCE6EE; --mh-line-strong: #B9CBD9; /* --- Marka renkleri (kurum mührunden ölçüldü) --- * * Mührün kendi renkleri. Arayüz artık BUNLARDAN türüyor: lacivert paletin * omurgası, adaçayı ise turkuaza taşındı. Yani logo ile sayfa aynı aileden. */ --mh-brand-navy: #2B5B84; --mh-brand-sage: #76AAA5; /* Koyu lacivert zeminde kullanılacak varyantlar (ölçüldü) */ --mh-on-deep: #EAF2F8; /* lacivert üzerinde 14,89:1 */ --mh-on-deep-soft: #A9C2D6; /* 9,13:1 */ --mh-line-on-deep: rgb(234 242 248 / 0.18); /* --- Tipografi --- */ --mh-font-display: Newsreader, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif; --mh-font-ui: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --mh-fs-meta: 0.8125rem; --mh-fs-small: 0.9375rem; --mh-fs-base: 1.0625rem; --mh-fs-lead: clamp(1.125rem, 1.05rem + 0.3vw, 1.3125rem); --mh-fs-h4: clamp(1.1875rem, 1.13rem + 0.28vw, 1.375rem); --mh-fs-h3: clamp(1.375rem, 1.28rem + 0.45vw, 1.75rem); --mh-fs-h2: clamp(1.75rem, 1.5rem + 1.05vw, 2.5rem); --mh-fs-h1: clamp(2.25rem, 1.85rem + 1.8vw, 3.5rem); --mh-fs-display: clamp(2.75rem, 1.95rem + 3.4vw, 5rem); --mh-measure: 68ch; /* --- Boşluk --- */ --mh-s1: 0.5rem; --mh-s2: 1rem; --mh-s3: 1.5rem; --mh-s4: 2rem; --mh-s5: 3rem; --mh-s6: 4rem; --mh-s7: clamp(4rem, 8vw, 6rem); --mh-s8: clamp(5rem, 11vw, 8rem); --mh-s9: clamp(6rem, 14vw, 10rem); /* --- Izgara --- */ --mh-content: 72rem; --mh-wide: 88rem; --mh-narrow: 46rem; --mh-gutter: clamp(1.25rem, 5vw, 3rem); --mh-rail: 11rem; /* --- Biçim --- */ --mh-radius: 3px; --mh-hair: 1px; /* --- Hareket --- */ --mh-ease: cubic-bezier(0.2, 0.6, 0.2, 1); --mh-dur-fast: 180ms; --mh-dur: 280ms; --mh-dur-slow: 420ms; --mh-header-h: 5rem; } /* Koyu bölümler için bağlam anahtarı. */ .is-deep { --mh-ink: var(--mh-on-deep); --mh-ink-soft: var(--mh-on-deep-soft); --mh-ink-faint: var(--mh-on-deep-soft); --mh-surface: var(--mh-surface-deep); --mh-surface-raised: #123152; --mh-line: var(--mh-line-on-deep); --mh-line-strong: rgb(234 242 248 / 0.30); /* * Koyu zeminde her iki vurgu da AÇILIR. Aksi hâlde turkuaz (#0E7490) derin * lacivertin üzerinde neredeyse görünmez; bağlantılar kaybolurdu. * Ölçüldü: mercan 8,29:1 · açık turkuaz 9,90:1. */ --mh-accent: #F2A199; --mh-guide: #7FD3E4; background: var(--mh-surface-deep); color: var(--mh-on-deep); } /* ========================================================================== 3 — Taban (öğe seçicileri — 0,0,1) ========================================================================== */ body { font-family: var(--mh-font-display); font-size: var(--mh-fs-base); font-weight: 380; line-height: 1.7; color: var(--mh-ink); background: var(--mh-surface); font-optical-sizing: auto; } h1, h2, h3, h4 { font-family: var(--mh-font-display); font-weight: 460; line-height: 1.14; letter-spacing: -0.014em; text-wrap: balance; color: var(--mh-ink); } h1 { font-size: var(--mh-fs-h1); } h2 { font-size: var(--mh-fs-h2); } h3 { font-size: var(--mh-fs-h3); } h4 { font-size: var(--mh-fs-h4); font-weight: 560; letter-spacing: 0; } p { text-wrap: pretty; } strong, b { font-weight: 620; } small { font-size: var(--mh-fs-meta); } ::selection { background: var(--mh-ink); color: var(--mh-surface-raised); } /* Görünmez odak, erişilebilirlik hatasıdır. Asla outline:none yazmayın. Katmansızdır: theme.json veya blok kütüphanesi bunu ezememelidir. */ :focus-visible { outline: 2px solid var(--mh-ink); outline-offset: 3px; border-radius: 2px; } .is-deep :focus-visible { outline-color: var(--mh-gold); } /* Ekran okuyucuya özel metin. */ .screen-reader-text, .mh-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* Klavye kullanıcısı için içeriğe atlama bağlantısı. */ .mh-skip { position: absolute; top: 0; left: 50%; transform: translate(-50%, -120%); z-index: 999; padding: 0.9rem 1.5rem; background: var(--mh-ink); color: var(--mh-surface-raised); font-family: var(--mh-font-ui); font-size: var(--mh-fs-small); border-radius: 0 0 var(--mh-radius) var(--mh-radius); transition: transform var(--mh-dur) var(--mh-ease); } .mh-skip:focus { transform: translate(-50%, 0); } /* ========================================================================== 4 — Düzen ========================================================================== */ .mh-shell { display: flex; flex-direction: column; min-height: 100svh; } .mh-main { flex: 1 0 auto; } .mh-wrap { width: 100%; max-width: var(--mh-content); margin-inline: auto; padding-inline: var(--mh-gutter); } .mh-wrap--wide { max-width: var(--mh-wide); } .mh-wrap--narrow { max-width: var(--mh-narrow); } .mh-section { padding-block: var(--mh-s8); } .mh-section--tight { padding-block: var(--mh-s6); } /* --- Sayfa içeriği: bloklar ile düz metnin bir arada yaşadığı ızgara ------- * * SORUN: Meydan blokları kendi kabını (.mh-wrap) getirir; Gutenberg'in çekirdek * blokları getirmez. Bu yüzden bir sayfada ikisi karışınca paragraf ve başlıklar * hiçbir sınırlaması olmadan ekranın iki kenarına dayanıyordu — 1440 piksellik * ekranda tek satır 200 karakteri buluyor, sayfa "kırılmış" görünüyordu. * * ÇÖZÜM: tam taşma (full-bleed) ızgarası. Varsayılan olarak her çocuk tam * genişlik alır — bileşenler zaten kendi kabını yönetir. Sınıf adında "mh-" * geçmeyen çocuklar, yani editörün yazdığı çekirdek bloklar, içerik sütununa * yerleşir. Sütun genişliği .mh-wrap ile aynıdır; böylece paragrafın sol kenarı * bloğun sol kenarıyla piksel piksel hizalanır. * * Metin ölçüsü ayrıca sınırlanır: hizalama sol kenardan, okunabilirlik satır * uzunluğundan gelir. İkisi farklı iştir. */ .mh-page-content { display: grid; /* * Çizgi adlarındaki "-start" / "-end" ekleri CSS'in kendi sözleşmesidir, * çeviri konusu değildir: `grid-column: tam`, tarayıcı tarafından * `tam-start / tam-end` olarak çözülür. Türkçe ek (-bas/-son) kullanınca * kısayol hiçbir şeye denk gelmiyor ve öğeler ızgaranın son sütununa * yığılıyordu — sayfa 320 piksellik bir şeride sıkışmıştı. */ grid-template-columns: [tam-start] minmax(var(--mh-gutter), 1fr) [icerik-start] min(100% - var(--mh-gutter) * 2, var(--mh-content) - var(--mh-gutter) * 2) [icerik-end] minmax(var(--mh-gutter), 1fr) [tam-end]; } .mh-page-content > * { grid-column: tam; } .mh-page-content > :not([class*="mh-"]) { grid-column: icerik; } /* Düz metnin dikey ritmi ve satır ölçüsü. */ .mh-page-content > :not([class*="mh-"]) { max-width: var(--mh-measure); margin-block-start: var(--mh-s3); } .mh-page-content > :is(h2, h3, h4):not([class*="mh-"]) { margin-block-start: var(--mh-s6); } .mh-page-content > :is(h2, h3, h4):not([class*="mh-"]) + * { margin-block-start: var(--mh-s2); } .mh-page-content > :is(ul, ol):not([class*="mh-"]) { padding-inline-start: 1.4rem; } .mh-page-content > :is(ul, ol):not([class*="mh-"]) li + li { margin-block-start: 0.4rem; } /* * Metin ile bileşen arasındaki sınır. * * Boşluk YALNIZCA bu sınırda verilir. İki bileşen art arda geldiğinde araya * boşluk konmaz: ana sayfada koyu bir bandın hemen ardından açık bir bölüm * gelir ve aradaki her boşluk, iki bandı birbirinden koparan açık bir şerit * olarak görünürdü. Bileşenler kendi iç dolgularını zaten taşır. * * Bu kural olmadan, kurumsal sayfalarda paragrafın son satırı koyu bandın üst * kenarına yapışıyordu. */ .mh-page-content > :not([class*="mh-"]) + [class*="mh-"], .mh-page-content > [class*="mh-"] + :not([class*="mh-"]) { margin-block-start: var(--mh-s5); } .mh-page-content > :first-child { margin-block-start: 0; } /* * Sayfa tam genişlikte koyu bir bantla bitiyorsa alttaki boşluk kalkar. * Aksi hâlde koyu bant ile koyu altbilgi arasında, hiçbir işi olmayan bir şerit * kalıyor ve sayfa yarım bırakılmış gibi görünüyordu. */ .mh-section:has(> .mh-page-content > .mh-cta:last-child) { padding-block-end: 0; } /* Hero ile başlayan sayfalarda üst boşluk yok: hero başlığa yaslanır. */ .mh-section--flush { padding-block-start: 0; } /* --- Editoryal ray ------------------------------------------------------ Bölüm etiketi ve numarası dar sol kolonda yaşar, içerik geniş kolonda. Bu tek yapısal karar, sayfayı "şablon" olmaktan çıkarıp dergi hissi verir. */ .mh-rail { display: grid; gap: var(--mh-s3) var(--mh-s5); grid-template-columns: 1fr; } @media (min-width: 62rem) { .mh-rail { grid-template-columns: var(--mh-rail) minmax(0, 1fr); } .mh-rail__aside { position: sticky; top: calc(var(--mh-header-h) + var(--mh-s3)); align-self: start; } } .mh-prose { max-width: var(--mh-measure); } /* * auto-fill, auto-fit DEĞİL. * * auto-fit boş sütun izlerini çökertir ve kalan öğeyi tüm satıra yayar. Tek * hekimi olan bir bölümde (ör. Üroloji) kart 830 piksele genişledi; 300 piksellik * portre dört katına büyütülünce yüz tanınmaz hâle geldi. auto-fill izleri * ayakta tutar: tek kart da üç kartla aynı genişlikte kalır, görsel kendi * çözünürlüğünün ötesine zorlanmaz. */ .mh-grid { display: grid; gap: var(--mh-s4); grid-template-columns: repeat(auto-fill, minmax(min(17rem, 100%), 1fr)); } .mh-grid--2 { grid-template-columns: repeat(auto-fill, minmax(min(22rem, 100%), 1fr)); } .mh-grid--4 { grid-template-columns: repeat(auto-fill, minmax(min(12rem, 100%), 1fr)); } .mh-stack > * + * { margin-block-start: var(--mh-s3); } .mh-stack--lg > * + * { margin-block-start: var(--mh-s5); } /* * Yazı akışı içindeki tipografi ritmi. * * SEÇİCİ KURALI — `:not([class])`: * * Bu kurallar EDİTÖRÜN yazdığı düz metne aittir. Yazı akışının içine bir bileşen * (blok) düştüğünde ona dokunmamalıdır. Aksi hâlde `.mh-article a` (0,1,1), * `.mh-btn` (0,1,0) kuralını özgüllükte yener ve bileşenin düğmesi yazı içi * bağlantıya dönüşür: acil kutusundaki düğme, yazısı zeminiyle aynı renk * (--mh-guide) olduğu için tamamen boş yeşil bir dikdörtgen olarak çizildi. * * Sınıfsızlık iyi bir ayraçtır: editörün yazdığı ,