/** * HZ CERRAHİ — hz-base.css * Tasarım tokenları, reset, tipografi ve yardımcı sınıflar. * * Not: --hz-* değişkenleri hz-core eklentisi tarafından içine * basılır ve buradaki varsayılanları geçersiz kılar. */ /* ================================================================== 1. TOKENLAR ================================================================== */ :root { /* Zemin ve katmanlar */ --hz-bg-main: #071621; --hz-bg-card: #0e2a3a; --hz-bg-glass: rgba(15, 48, 67, 0.65); --hz-bg-elev-1: #0b1f2c; --hz-bg-elev-2: #10293a; --hz-bg-deep: #050f18; --hz-card-hover: #123449; --hz-line: #1a4159; /* Marka */ --hz-primary: #174a68; --hz-primary-soft: #24688f; --hz-accent: #00b4d8; --blade-gray: #949494; --wa-green: #25d366; --hz-accent-rgb: 0, 180, 216; --hz-primary-rgb: 23, 74, 104; --hz-bg-rgb: 7, 22, 33; --hz-card-rgb: 14, 42, 58; /* Aksan skalası (eklenti aktifken HSL ile üretilir) */ --hz-accent-50: #e6fbff; --hz-accent-100: #c2f2fd; --hz-accent-200: #8ae6fa; --hz-accent-300: #4fd6f4; --hz-accent-400: #1ec4e6; --hz-accent-500: #00b4d8; --hz-accent-600: #0092b0; --hz-accent-700: #007189; --hz-accent-800: #005064; --hz-accent-900: #003a4a; /* Metin */ --hz-text: #f2f8fc; --hz-text-soft: #b8d2e0; --hz-text-muted: #7fa3b8; --hz-text-faint: #5d8299; /* Tipografi */ --hz-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --hz-font-head: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --hz-font-mono: ui-monospace, "SFMono-Regular", "Cascadia Code", Consolas, monospace; /* Tip skalası — fluid clamp */ --hz-fs-xs: clamp(0.72rem, 0.7rem + 0.1vw, 0.78rem); --hz-fs-sm: clamp(0.82rem, 0.79rem + 0.14vw, 0.9rem); --hz-fs-base: clamp(0.95rem, 0.91rem + 0.18vw, 1.05rem); --hz-fs-lg: clamp(1.08rem, 1rem + 0.35vw, 1.25rem); --hz-fs-xl: clamp(1.3rem, 1.15rem + 0.7vw, 1.6rem); --hz-fs-2xl: clamp(1.6rem, 1.32rem + 1.3vw, 2.35rem); --hz-fs-3xl: clamp(2rem, 1.5rem + 2.3vw, 3.4rem); --hz-fs-4xl: clamp(2.4rem, 1.6rem + 3.6vw, 4.6rem); /* Boşluk */ --hz-sp-1: 0.25rem; --hz-sp-2: 0.5rem; --hz-sp-3: 0.75rem; --hz-sp-4: 1rem; --hz-sp-5: 1.5rem; --hz-sp-6: 2rem; --hz-sp-7: 3rem; --hz-sp-8: 4rem; --hz-sp-9: 6rem; /* Bölüm nefesliği — masaüstünde de minimal tutulur (eski tavan: 7.5rem). */ --hz-section: clamp(2.4rem, 1.5rem + 3.4vw, 4.75rem); /* Ölçü */ --hz-container: 1240px; --hz-gutter: clamp(1.1rem, 0.6rem + 2.2vw, 2.5rem); --hz-radius: 18px; --hz-radius-sm: 10px; --hz-radius-lg: 26px; --hz-radius-pill: 999px; /* Hareket */ --anim-speed: 320ms; --ease-sharp: cubic-bezier(0.2, 0.7, 0.3, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-spring: cubic-bezier(0.34, 1.4, 0.5, 1); /* Gölge */ --hz-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.28); --hz-shadow: 0 10px 30px rgba(0, 0, 0, 0.36); --hz-shadow-lg: 0 26px 70px rgba(0, 0, 0, 0.5); --hz-glow: 0 0 20px rgba(var(--hz-accent-rgb), 0.2); --hz-glow-strong: 0 0 34px rgba(var(--hz-accent-rgb), 0.45); /* Katman */ --hz-z-header: 900; --hz-z-progress: 910; --hz-z-mobilebar: 920; --hz-z-mega: 950; --hz-z-modal: 980; /* Ölçüler */ --hz-header-h: 76px; --hz-header-social-h: 0px; --hz-progress-h: 2px; --hz-mobilebar-h: 76px; } /* * Dar ekranda başlık iki katmanlıdır: üstte sosyal medya şeridi, * altında logo satırı. --hz-header-h ikisinin toplamıdır; sabit başlık * yüksekliğine bağlı tüm hesaplar (hero boşluğu, çapa kaydırması, * mega menü) bu değeri kullandığı için tek noktadan yönetilir. */ @media (max-width: 1024px) { :root { --hz-header-social-h: 40px; --hz-header-h: 112px; } } @media (max-width: 560px) { :root { --hz-header-social-h: 38px; --hz-header-h: 106px; } } /* ================================================================== 2. RESET ================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--hz-header-h) + 24px); /* Yerel bileşenleri (select açılır listesi, tarih seçici, kaydırma çubuğu) koyu temayla uyumlu hâle getirir. */ color-scheme: dark; } body { margin: 0; background-color: var(--hz-bg-main); color: var(--hz-text); font-family: var(--hz-font-body); font-size: var(--hz-fs-base); line-height: 1.72; font-weight: 400; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; text-rendering: optimizeLegibility; font-feature-settings: "kern" 1, "liga" 1; } /* Zemin dokusu — ince gradyan katmanlar */ body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(120% 80% at 85% -5%, rgba(var(--hz-accent-rgb), 0.09), transparent 55%), radial-gradient(90% 60% at 5% 100%, rgba(var(--hz-primary-rgb), 0.22), transparent 60%); } body.hz-grain-on::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 1; opacity: 0.035; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E"); mix-blend-mode: overlay; } .hz-site { position: relative; z-index: 2; } h1, h2, h3, h4, h5, h6 { margin: 0 0 var(--hz-sp-4); font-family: var(--hz-font-head); font-weight: 700; line-height: 1.16; letter-spacing: -0.022em; color: #fff; text-wrap: balance; } h1 { font-size: var(--hz-fs-3xl); } h2 { font-size: var(--hz-fs-2xl); } h3 { font-size: var(--hz-fs-xl); } h4 { font-size: var(--hz-fs-lg); } p { margin: 0 0 var(--hz-sp-4); text-wrap: pretty; } a { color: var(--hz-accent); text-decoration: none; transition: color var(--anim-speed) var(--ease-sharp); } a:hover { color: var(--hz-accent-300); } a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--hz-accent); outline-offset: 3px; border-radius: 4px; } img, svg, video, canvas, iframe { max-width: 100%; height: auto; display: block; } button { font: inherit; color: inherit; cursor: pointer; border: none; background: none; } ul, ol { padding-left: 1.3em; } li { margin-bottom: 0.4em; } blockquote { margin: var(--hz-sp-6) 0; padding: var(--hz-sp-5) var(--hz-sp-6); border-left: 3px solid var(--hz-accent); background: rgba(var(--hz-accent-rgb), 0.06); border-radius: 0 var(--hz-radius-sm) var(--hz-radius-sm) 0; font-size: var(--hz-fs-lg); color: var(--hz-text-soft); font-style: italic; } blockquote p:last-child { margin-bottom: 0; } code, pre { font-family: var(--hz-font-mono); font-size: 0.9em; } code { background: rgba(var(--hz-accent-rgb), 0.1); color: var(--hz-accent-200); padding: 0.15em 0.45em; border-radius: 5px; } pre { background: var(--hz-bg-deep); border: 1px solid var(--hz-line); border-radius: var(--hz-radius-sm); padding: var(--hz-sp-5); overflow-x: auto; } hr { border: none; height: 1px; background: linear-gradient(90deg, transparent, var(--hz-line), transparent); margin: var(--hz-sp-7) 0; } table { width: 100%; border-collapse: collapse; margin: var(--hz-sp-5) 0; font-size: var(--hz-fs-sm); } th, td { padding: 0.75rem 1rem; text-align: left; border-bottom: 1px solid var(--hz-line); } th { color: var(--hz-accent-200); font-weight: 700; font-size: var(--hz-fs-xs); text-transform: uppercase; letter-spacing: 0.07em; } ::selection { background: rgba(var(--hz-accent-rgb), 0.32); color: #fff; } /* Kaydırma çubuğu */ * { scrollbar-width: thin; scrollbar-color: var(--hz-primary) transparent; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: var(--hz-bg-deep); } ::-webkit-scrollbar-thumb { background: var(--hz-primary); border-radius: 6px; border: 2px solid var(--hz-bg-deep); } ::-webkit-scrollbar-thumb:hover { background: var(--hz-accent-700); } /* ================================================================== 3. YERLEŞİM YARDIMCILARI ================================================================== */ .hz-container { width: 100%; max-width: var(--hz-container); margin-inline: auto; padding-inline: var(--hz-gutter); } .hz-container-narrow { max-width: 860px; } .hz-container-wide { max-width: 1440px; } .hz-section { position: relative; padding-block: var(--hz-section); } .hz-section-tight { padding-block: calc(var(--hz-section) * 0.6); } .hz-grid { display: grid; gap: clamp(1rem, 0.5rem + 1.6vw, 1.85rem); } .hz-cols-2 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); } .hz-cols-3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 310px), 1fr)); } .hz-cols-4 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); } .hz-flex { display: flex; gap: var(--hz-sp-4); flex-wrap: wrap; align-items: center; } .hz-stack > * + * { margin-top: var(--hz-sp-4); } /* ================================================================== 4. TİPOGRAFİ YARDIMCILARI ================================================================== */ .hz-eyebrow { display: inline-flex; align-items: center; gap: 0.6em; font-family: var(--hz-font-head); font-size: var(--hz-fs-xs); font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--hz-accent); margin-bottom: var(--hz-sp-4); } .hz-eyebrow i { width: 26px; height: 1px; background: currentColor; display: block; flex: none; box-shadow: 0 0 8px currentColor; } .hz-sec-head { margin-bottom: var(--hz-sp-7); max-width: 68ch; } .hz-sec-head.hz-align-center { margin-inline: auto; text-align: center; } .hz-sec-head.hz-align-center .hz-eyebrow { justify-content: center; } .hz-sec-title { font-size: var(--hz-fs-2xl); margin-bottom: var(--hz-sp-4); } .hz-sec-title em { font-style: normal; color: var(--hz-accent); position: relative; } .hz-sec-desc { color: var(--hz-text-muted); font-size: var(--hz-fs-lg); margin-bottom: 0; line-height: 1.65; } .hz-lead { font-size: var(--hz-fs-lg); color: var(--hz-text-soft); line-height: 1.7; } .hz-muted { color: var(--hz-text-muted); } .hz-accent { color: var(--hz-accent); } .hz-center { text-align: center; } .hz-dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: 0.5; display: inline-block; flex: none; } /* ================================================================== 5. ERİŞİLEBİLİRLİK ================================================================== */ .screen-reader-text, .hz-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .hz-skip { position: absolute; top: -100px; left: 12px; z-index: 999; padding: 12px 20px; background: var(--hz-accent); color: #04121a; font-weight: 700; border-radius: 0 0 10px 10px; transition: top 200ms var(--ease-sharp); } .hz-skip:focus { top: 0; color: #04121a; } /* ================================================================== 6. İKONLAR ================================================================== */ .hz-icon { flex: none; vertical-align: middle; overflow: visible; } .hz-flip { transform: scaleX(-1); } /* ================================================================== 7. WORDPRESS BLOK UYUMU ================================================================== */ .alignwide { max-width: 1100px; margin-inline: auto; } .alignfull { max-width: 100%; } .aligncenter { margin-inline: auto; display: block; } .alignleft { float: left; margin: 0 var(--hz-sp-5) var(--hz-sp-4) 0; } .alignright { float: right; margin: 0 0 var(--hz-sp-4) var(--hz-sp-5); } .wp-caption { max-width: 100%; } .wp-caption-text, figcaption { font-size: var(--hz-fs-sm); color: var(--hz-text-muted); text-align: center; margin-top: var(--hz-sp-3); font-style: italic; } .wp-block-image img { border-radius: var(--hz-radius-sm); } .sticky, .bypostauthor { display: block; } /* ================================================================== 8. YATAY TAŞMA KORUMASI ================================================================== Mobilde sağa/sola kayma (horizontal scroll) oluşturabilecek tüm yaygın nedenleri tek noktadan kapatır. ================================================================== */ html { overflow-x: hidden; max-width: 100%; } body { max-width: 100%; /* Uzun kelime, e-posta ve URL'ler satırı taşırmasın. */ overflow-wrap: break-word; word-break: normal; } .hz-site { max-width: 100%; /* * Burada overflow KULLANILMAZ: `clip`/`hidden`, position:fixed * torunları (mobil menü, dock, modal) kırparak açılmalarını * engelliyordu. Yatay taşma koruması html/body üzerinde. */ } /* * Izgara ve esnek kutu çocukları varsayılan olarak `min-width: auto` * alır; içeriği geniş olan bir çocuk sütunu şişirip sayfayı taşırır. * Tüm yerleşim kaplarında bunu sıfırlıyoruz. */ .hz-grid > *, .hz-form-row > *, .hz-treat-grid > *, .hz-badge-grid > *, .hz-metastrip-grid > *, .hz-stats-grid > *, .hz-footer-top > *, .hz-about-grid > *, .hz-about-columns > *, .hz-about-hero > *, .hz-contact-grid > *, .hz-faq-grid > *, .hz-single-grid > *, .hz-article-grid > *, .hz-blog-grid > *, .hz-mega-grid > *, .hz-post-nav > *, .hz-hero-inner > *, .hz-cta-actions > *, .hz-flex > * { min-width: 0; } /* * Uzun başlıklar taşmasın — ancak heceleme kapalı. * Tarayıcıların Türkçe heceleme sözlüğü "belge-leri", "Onko-loji" gibi * hatalı bölmeler ürettiği için hyphens: auto kullanılmaz; kelime * yalnızca sığmadığında bölünür. */ h1, h2, h3, h4, h5, h6, .hz-card-title, .hz-tl-title, .hz-acc-trigger, .hz-hero-title, .hz-post-title { overflow-wrap: break-word; hyphens: none; -webkit-hyphens: none; } .hz-content a, .hz-footer a, .hz-contact-copy strong, .hz-float-action-copy em, code { overflow-wrap: anywhere; } /* Gömülü ortam ve medya */ img, svg, video, canvas, iframe, embed, object, figure { max-width: 100%; } /* İçerik tabloları kendi içinde yatay kaysın, sayfayı taşırmasın. */ .hz-content table, .entry-content table { display: block; width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } .hz-content pre, .entry-content pre { max-width: 100%; overflow-x: auto; } /* Dekoratif katmanlar hiçbir koşulda tıklama/taşma üretmez. */ .hz-orb, .hz-cursor-glow, .hz-card-scrim, .hz-hero-visual-scrim { pointer-events: none; } /* Sabit konumlu katmanlar ekran genişliğini aşmasın. */ .hz-float, .hz-mobilebar, .hz-progress, .hz-header { max-width: 100vw; } @media (max-width: 640px) { /* Dar ekranda nokta atışı güvenlik payları */ .hz-float-panel { width: calc(100vw - 28px); } .hz-modal-box { max-width: calc(100vw - 24px); } .hz-mega-inner { max-width: calc(100vw - 24px); } /* Uzun rozet ve çip dizileri satır atlasın */ .hz-card-badges, .hz-post-tags, .hz-treat-filters, .hz-interests, .hz-tts-controls { flex-wrap: wrap; } .hz-badge, .hz-chip, .hz-interest { white-space: normal; } /* Yatay kayan şerit ekran dışına çıkmasın */ .hz-marquee { max-width: 100%; } }