/* Mecidder Yardım Derneği — ziyaretçi sitesi teması */ :root { --hp-primary: #5b3cc4; --hp-primary-dark: #442b95; --hp-primary-light: #7c61dc; --hp-accent: #f59e0b; --hp-accent-light: #fbbf24; --hp-success: #22c55e; --hp-success-light: #86efac; --hp-dark: #0f172a; --hp-text: #4b5563; --hp-muted: #64748b; --hp-bg: #f7f7ff; --hp-white: #ffffff; --hp-shadow: 0 4px 6px -1px rgba(15, 23, 42, 0.08), 0 2px 4px -2px rgba(15, 23, 42, 0.06); --hp-shadow-lg: 0 20px 25px -5px rgba(15, 23, 42, 0.1), 0 8px 10px -6px rgba(15, 23, 42, 0.08); --hp-shadow-xl: 0 25px 50px -12px rgba(15, 23, 42, 0.15); --hp-radius: 16px; --hp-radius-sm: 12px; --font-heading: 'Outfit', 'Plus Jakarta Sans', sans-serif; --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1); --duration-s: 0.25s; --duration-m: 0.4s; --duration-l: 0.6s; --section-space: clamp(3.5rem, 7vw, 5.25rem); /* Tüm sayfalarda masaüstü içerik genişliği + kenardan nefes (viewport taşması yok) */ --hp-layout-max: 1140px; --hp-home-layout-max: 1060px; --hp-layout-gutter: clamp(1rem, 4vw, 2.25rem); /* Tipografi ölçeği (gövde + başlık — SEO okunabilirliği / tutarlı punto) */ --hp-text-xs: 0.8125rem; --hp-text-sm: 0.9375rem; --hp-text-base: clamp(1rem, 0.2vw + 0.95rem, 1.0625rem); --hp-text-md: 1.0625rem; --hp-text-lead: clamp(1.0625rem, 0.5vw + 1rem, 1.1875rem); --hp-leading-tight: 1.22; --hp-leading-snug: 1.32; --hp-leading-body: 1.65; --hp-leading-relaxed: 1.75; --hp-h1: clamp(1.85rem, 4vw, 2.35rem); --hp-h2: clamp(1.42rem, 2.8vw, 1.78rem); --hp-h3: clamp(1.2rem, 2.1vw, 1.45rem); --hp-h4: 1.2rem; --hp-h5: 1.05rem; --hp-h6: 1rem; --hp-prose: clamp(1rem, 0.35vw + 0.96rem, 1.1rem); } /* Tema varyantları: */ :root[data-theme-variant="soft"] { --hp-primary: #6b4fd1; --hp-primary-dark: #4e35aa; --hp-primary-light: #8f76e3; --hp-accent: #f7b733; --hp-accent-light: #fcd67d; --hp-success: #34d399; --hp-success-light: #a7f3d0; --hp-text: #556076; } :root[data-theme-variant="contrast"] { --hp-primary: #3f2b8f; --hp-primary-dark: #2f206f; --hp-primary-light: #5f45be; --hp-accent: #d97706; --hp-accent-light: #f59e0b; --hp-success: #16a34a; --hp-success-light: #4ade80; --hp-text: #4a4a4a; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } * { box-sizing: border-box; } /* --- Site geneli: header, footer, ana içerik — tutarlı max genişlik ve yatay boşluk --- */ @media (min-width: 576px) { .site-header .navbar > .container, .site-footer > .container:not(.container-fluid), main.site-main .container:not(.container-fluid) { width: 100%; max-width: min(var(--hp-layout-max), calc(100vw - 2 * var(--hp-layout-gutter))) !important; margin-left: auto !important; margin-right: auto !important; box-sizing: border-box; } /* CMS/HTML içine gömülü ikinci .container — üst şerit kuralını geri al (grid bozulmasın) */ main.site-main .blog-content .container, main.site-main .cms-page-body .container, main.site-main .cms-project-body .container { max-width: 100% !important; width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; } } /* Ana sayfa: referans görseldeki beyaz kenar boşluğuna yakın daha dar içerik bloğu */ @media (min-width: 992px) { main.site-main .container.home-container:not(.container-fluid) { max-width: min(var(--hp-home-layout-max), calc(100vw - 2 * clamp(2rem, 6vw, 4.75rem))) !important; } } /* Ana sayfa bağış kategorileri alanını normal container'dan daha geniş kullan */ main.site-main .home-categories-section .home-categories-container { width: min(100%, calc(100vw - 2 * clamp(6rem, 12vw, 10.5rem))); max-width: none !important; margin-left: auto; margin-right: auto; padding-left: clamp(3.75rem, 7.2vw, 6.75rem); padding-right: clamp(3.75rem, 7.2vw, 6.75rem); } @media (min-width: 992px) { .site-header .navbar-nav.main-nav { column-gap: 0.2rem; } .site-header .navbar-nav.main-nav > .nav-item > .nav-link { padding-left: 0.55rem !important; padding-right: 0.55rem !important; } .site-header .navbar-nav.main-nav > .nav-item > .dropdown-toggle { padding-left: 0.55rem !important; padding-right: 1.75rem !important; } } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overflow-x: clip; max-width: 100%; } body { font-family: var(--font-body); font-size: var(--hp-text-base); color: var(--hp-text); background: var(--hp-bg); margin: 0; min-height: 100vh; min-height: 100dvh; line-height: var(--hp-leading-body); text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; overflow-x: clip; max-width: 100%; } p { margin-bottom: 1rem; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: 700; color: var(--hp-dark); letter-spacing: -0.02em; text-wrap: balance; } h1 { font-size: var(--hp-h1); line-height: var(--hp-leading-tight); font-weight: 800; } h2 { font-size: var(--hp-h2); line-height: var(--hp-leading-snug); font-weight: 800; } h3 { font-size: var(--hp-h3); line-height: var(--hp-leading-snug); } h4 { font-size: var(--hp-h4); line-height: var(--hp-leading-snug); } h5 { font-size: var(--hp-h5); line-height: var(--hp-leading-snug); font-weight: 700; } h6 { font-size: var(--hp-h6); line-height: var(--hp-leading-snug); font-weight: 700; } .lead { font-size: var(--hp-text-lead); line-height: 1.55; font-weight: 500; max-width: 68ch; } small, .small { font-size: var(--hp-text-sm); line-height: var(--hp-leading-snug); } /* Sayfa değişiminde odak
’e taşınır (FocusOnNavigate); görünür çerçeve olmasın. tabindex=-1 ile Tab sırasında değil, yalnızca programatik odaklanır. */ main.site-main:focus { outline: none; box-shadow: none; } a { color: var(--hp-primary); text-decoration: none; transition: color 0.2s ease; } a:hover { color: var(--hp-primary-dark); } .btn-primary { background: var(--hp-accent); border: none; color: white; font-weight: 600; padding: 0.75rem 1.75rem; border-radius: 14px; box-shadow: 0 8px 20px rgba(245, 158, 11, 0.34); transition: transform 0.2s ease, box-shadow 0.2s ease; } .btn-primary:hover { color: white; transform: translateY(-1px); background: var(--hp-accent); box-shadow: 0 6px 20px rgba(245, 158, 11, 0.44); } .btn-outline-primary { border: 2px solid var(--hp-primary); color: var(--hp-primary); font-weight: 600; border-radius: 14px; transition: all 0.2s ease; } .btn-outline-primary:hover { background: var(--hp-primary); color: white; border-color: var(--hp-primary); } /* ——— Button premium effects: glow, ripple ——— */ .btn-primary, .btn-outline-primary, .btn-light { position: relative; overflow: hidden; touch-action: manipulation; transition: transform var(--duration-s) var(--ease-out-quart), box-shadow var(--duration-m) ease, color var(--duration-s) ease, background var(--duration-s) ease, border-color var(--duration-s) ease; } .btn-primary:hover, a.btn-primary:hover { box-shadow: 0 8px 28px rgba(245, 158, 11, 0.44), 0 0 0 1px rgba(255,255,255,0.1); } .btn-primary:active, .btn-outline-primary:active { transform: scale(0.98); } .btn-primary:focus-visible, .btn-outline-primary:focus-visible, .btn-light:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.42), 0 8px 22px rgba(15, 23, 42, 0.14); } .ripple { position: absolute; border-radius: 50%; background: rgba(255,255,255,0.35); transform: scale(0); pointer-events: none; transition: transform 0.5s var(--ease-out-expo); } .ripple.ripple-active { transform: scale(1); opacity: 0; } /* ========== HERO PARALLAX (Ana sayfa) ========== */ .hero { position: relative; min-height: 85vh; display: flex; align-items: flex-end; justify-content: center; color: white; overflow: hidden; } .hero::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: none; } .hero-bg { position: absolute; inset: 0; z-index: 0; background: #5b3cc4; } /* --hero-photo: inline / ayarlar; opacity: site ayarı (0–1) */ .hero-bg-image { position: absolute; inset: 0; z-index: 0; background-image: var(--hero-photo, url("/images/hero-africa.jpg")); background-position: center center; background-size: cover; background-repeat: no-repeat; filter: saturate(1.18) contrast(1.1) brightness(1.06); transform: scale(1.02); opacity: 0; animation: hero-bg-rotate 18s infinite; } .hero-bg-image--1 { animation-delay: 0s; } .hero-bg-image--2 { animation-delay: 6s; } .hero-bg-image--3 { animation-delay: 12s; } @keyframes hero-bg-rotate { 0% { opacity: 0; } 4% { opacity: var(--hero-visible-opacity, 1); } 30% { opacity: var(--hero-visible-opacity, 1); } 34% { opacity: 0; } 100% { opacity: 0; } } @media (prefers-reduced-motion: reduce) { .hero-bg-image { animation: none !important; opacity: 0; } .hero-bg-image--1 { opacity: var(--hero-visible-opacity, 1); } } .hero-bg-overlay { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: rgba(15, 23, 42, 0.45); } .hero-bg-parallax { position: absolute; inset: -20%; background-image: none; background-attachment: fixed; z-index: 0; } .hero-content { position: relative; z-index: 2; text-align: center; padding: 1.5rem 0 clamp(2.5rem, 6vh, 4.25rem); } .hero .hero-badge { display: inline-block; background: rgba(255,255,255,0.18); backdrop-filter: blur(10px); padding: 0.42rem 1.05rem; border-radius: 2rem; font-size: 0.85rem; font-weight: 600; margin-bottom: 1.25rem; letter-spacing: 0.05em; text-transform: uppercase; } .hero h1 { font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 800; color: white; margin-bottom: 1.25rem; text-shadow: 0 2px 20px rgba(0,0,0,0.15); line-height: 1.2; } .hero .hero-lead { font-size: clamp(1rem, 2vw, 1.25rem); opacity: 0.97; max-width: 560px; margin: 0 auto 2rem; line-height: 1.6; } .hero .btn { border-radius: var(--hp-radius-sm); padding: 0.85rem 2rem; font-weight: 600; transition: transform 0.2s ease, box-shadow 0.2s ease; } .hero .btn:hover { transform: translateY(-2px); } /* Afrikalı çocuklar için parallax ve hareket efektleri */ .hero-children { position: absolute; inset: 0; pointer-events: none; z-index: 0; } .hero-child { position: absolute; width: min(32vw, 320px); max-width: 45%; border-radius: 32px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45); object-fit: cover; filter: saturate(1.05) contrast(1.02); animation: heroFloat 10s ease-in-out infinite alternate; } .hero-child-left { left: 4%; bottom: 0; transform-origin: center bottom; } .hero-child-right { right: 4%; bottom: 8%; transform-origin: center bottom; animation-delay: 1.5s; } @keyframes heroFloat { 0% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(0, -10px, 0) scale(1.01); } 100% { transform: translate3d(0, -18px, 0) scale(1.015); } } /* ========== SAYFA HERO (İç sayfalar) ========== */ .page-hero { position: relative; padding: clamp(4rem, 8vw, 5.75rem) 0 clamp(3rem, 6vw, 4.25rem); color: white; overflow: hidden; } .page-hero-bg { position: absolute; inset: 0; background: linear-gradient(135deg, var(--hp-primary-dark) 0%, var(--hp-primary) 50%, #312173 100%); background-attachment: fixed; z-index: 0; } .page-hero-bg::after { content: ''; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.06'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); opacity: 0.8; } .page-hero .container { position: relative; z-index: 1; } .page-hero h1 { font-size: clamp(1.55rem, 4.5vw, 2.45rem); font-weight: 800; color: white; margin-bottom: 0.5rem; line-height: var(--hp-leading-tight); word-break: break-word; } .page-hero .page-hero-lead { font-size: clamp(0.95rem, 2.5vw, 1.1rem); opacity: 0.9; margin: 0; overflow-wrap: break-word; word-break: break-word; } /* ========== KARTLAR ========== */ .card { border: 1px solid rgba(148, 163, 184, 0.2); border-radius: var(--hp-radius); box-shadow: 0 10px 28px rgba(15, 23, 42, 0.07); transition: transform var(--duration-l) var(--ease-out-expo), box-shadow var(--duration-l) ease, border-color var(--duration-m) ease; overflow: hidden; will-change: transform; } @media (hover: hover) and (pointer: fine) { .card:hover { transform: translateY(-6px) scale(1.008); box-shadow: 0 18px 45px rgba(15, 23, 42, 0.13), 0 0 0 1px rgba(91, 60, 196, 0.12); border-color: rgba(91, 60, 196, 0.22); } .card:hover .card-img-top, .card:hover .campaign-card-img img, .card:hover .campaign-card-img-media { transform: scale(1.06); } } .card-img-top, .campaign-card-img img, .campaign-card-img-media { transition: transform 0.6s var(--ease-out-expo); will-change: transform; } .card-title { font-family: var(--font-heading); font-weight: 700; color: var(--hp-dark); font-size: 1.2rem; } .card-body { padding: 1.5rem; } /* Kampanya kartı görsel alanı */ .campaign-card-img { height: auto; min-height: 230px; aspect-ratio: 4 / 3; border-radius: var(--hp-radius) var(--hp-radius) 0 0; position: relative; overflow: hidden; background: #f8fafc; } .campaign-card-img-media, .campaign-card-img-placeholder { position: absolute; inset: 0; width: 100%; height: 100%; } .campaign-card-img-media { object-fit: cover; display: block; z-index: 1; -webkit-backface-visibility: hidden; backface-visibility: hidden; background: #f8fafc; } .campaign-card-img-placeholder { border-radius: inherit; } .campaign-card-img::after { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(to top, rgba(0,0,0,0.3) 0%, transparent 50%); } /* Ana sayfa haber/blog: görsel tıklanınca detay */ a.home-post-card-media { color: inherit; cursor: pointer; } a.home-post-card-media:focus-visible { outline: 2px solid var(--hp-primary); outline-offset: 2px; border-radius: var(--hp-radius) var(--hp-radius) 0 0; } /* ========== İÇERİK BÖLÜMLERİ ========== */ .content-section { padding: var(--section-space) 0; position: relative; } @media (max-width: 767.98px) { .content-section { padding: 3.15rem 0; } .content-wrap { padding: 2.25rem 0 3rem; } /* dvh: mobil adres çubuğu ile daha tutarlı; eski tarayıcılar için vh yedeği */ .hero { min-height: 78vh; min-height: min(82dvh, 36rem); } } .content-section-white { background: #fff; } .content-section-muted { background: var(--hp-bg); } .stats-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; margin-bottom: 3.5rem; max-width: 960px; margin-left: auto; margin-right: auto; } @media (min-width: 768px) { .stats-row { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .section-head { margin-bottom: clamp(1.8rem, 4.5vw, 2.8rem); } .section-head-center { text-align: center; } .section-head-center .section-title { display: block; } .section-head-center .section-title::after { left: 0; right: 0; margin: 0 auto; } .section-head-center .section-subtitle { margin-left: auto; margin-right: auto; } /* Ana sayfa kampanya başlığı: olası ezmelere karşı kesin ortalama */ .home-campaigns-section .section-head { text-align: center; } .home-campaigns-section .section-head .section-title { display: block; } .home-campaigns-section .section-head .section-title::after { left: 0; right: 0; margin: 0 auto; } .home-campaigns-section .section-head .section-subtitle { margin-left: auto; margin-right: auto; } .section-cta { text-align: center; margin-top: 2.5rem; } .campaign-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 1.75rem; } /* Ana sayfa kampanyalar: masaüstünde 4 kartı tek satıra sığdır */ @media (min-width: 1200px) { main.site-main .container.home-container:not(.container-fluid) { max-width: min(1280px, calc(100vw - 2 * clamp(1.5rem, 4vw, 3rem))) !important; } main.site-main .home-campaigns-section .campaign-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } main.site-main .home-campaigns-section .campaign-grid > .campaign-card-wrap:nth-child(-n+2) { grid-column: span 3; } main.site-main .home-campaigns-section .campaign-grid > .campaign-card-wrap:nth-child(n+3):nth-child(-n+5) { grid-column: span 2; } } .campaign-card-wrap { display: flex; } .campaign-card { display: flex; flex-direction: column; width: 100%; } .campaign-card .campaign-card-img { height: auto; min-height: 220px; flex-shrink: 0; } .campaign-card .card-body { flex: 1; display: flex; flex-direction: column; padding: 1.5rem; } .campaign-card .card-text { font-size: 0.9375rem; color: var(--hp-muted); margin-bottom: 1rem; flex: 1; } .campaign-card .progress-label { font-size: 0.8125rem; color: var(--hp-muted); margin-bottom: 1rem; } .empty-hint { text-align: center; color: var(--hp-muted); margin: 1rem 0; } /* ========== İSTATİSTİK KARTLARI ========== */ .stat-card { background: #fff; border-radius: var(--hp-radius); padding: 2rem 1.25rem; text-align: center; box-shadow: var(--hp-shadow); border: 1px solid rgba(15, 23, 42, 0.06); } .stat-number { font-family: var(--font-heading); font-size: 2.25rem; font-weight: 800; color: var(--hp-primary); line-height: 1.2; letter-spacing: -0.02em; } .stat-label { font-size: 0.9375rem; color: var(--hp-muted); margin-top: 0.25rem; font-weight: 500; } /* ========== BÖLÜM BAŞLIKLARI ========== */ .section-title { font-size: var(--hp-h2); font-weight: 800; color: var(--hp-dark); margin-bottom: 0.65rem; position: relative; display: inline-block; line-height: var(--hp-leading-snug); } .section-title::after { content: ''; position: absolute; left: 0; bottom: -6px; width: 48px; height: 4px; background: linear-gradient(90deg, var(--hp-primary), var(--hp-primary-light)); border-radius: 2px; } /* Sayfa başlığı (tek H1) — bölüm başlığı (.section-title) punto ölçeğinden ayrı */ h1.section-title { font-size: var(--hp-h1); line-height: var(--hp-leading-tight); } .section-subtitle { color: var(--hp-muted); margin-bottom: clamp(1.8rem, 4vw, 2.5rem); font-size: var(--hp-text-lead); line-height: var(--hp-leading-relaxed); max-width: 65ch; font-weight: 500; } /* ========== PARALLAX BÖLÜM (Alıntı / CTA) ========== */ .parallax-section { position: relative; padding: 5rem 0; color: white; overflow: hidden; } .parallax-section-bg { position: absolute; inset: 0; background: linear-gradient(135deg, var(--hp-primary-dark) 0%, var(--hp-primary) 100%); background-attachment: fixed; z-index: 0; } .parallax-section-bg::before { content: ''; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%23ffffff' fill-opacity='0.04' fill-rule='evenodd'/%3E%3C/svg%3E"); } .parallax-section .container { position: relative; z-index: 1; } .parallax-section h2, .parallax-section .section-title { color: white; } .parallax-section .section-title::after { background: rgba(255,255,255,0.6); } /* Nasıl katkıda bulunursunuz */ .how-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 1.75rem; max-width: 960px; margin: 0 auto; } .how-card { background: #fff; border-radius: var(--hp-radius); padding: 2rem; text-align: center; box-shadow: var(--hp-shadow); border: 1px solid rgba(15, 23, 42, 0.06); } .how-card .how-icon { width: 64px; height: 64px; margin: 0 auto 1.25rem; border-radius: 50%; background: rgba(91, 60, 196, 0.1); display: flex; align-items: center; justify-content: center; font-size: 1.75rem; } .how-card-title { font-size: 1.125rem; font-weight: 700; color: var(--hp-dark); margin-bottom: 0.5rem; } .how-card-text { font-size: 0.9375rem; color: var(--hp-muted); margin-bottom: 1.25rem; line-height: 1.5; } .how-card .btn { margin-top: 0; } /* CTA bölümü (Hikayeler ve Etki) */ .cta-section { position: relative; padding: 4.5rem 0; color: #fff; overflow: hidden; } .cta-section-bg { position: absolute; inset: 0; background: radial-gradient(circle at 14% 24%, rgba(255, 255, 255, 0.14), transparent 36%), radial-gradient(circle at 86% 20%, rgba(245, 158, 11, 0.18), transparent 38%), linear-gradient(140deg, #38257f 0%, #5b3cc4 52%, #2a1c61 100%); z-index: 0; } /* İsteğe bağlı fotoğraf: admin Home.Cta.BackgroundImageUrl */ .cta-section-bg--photo { background-image: linear-gradient(140deg, rgba(56, 37, 127, 0.9) 0%, rgba(91, 60, 196, 0.86) 55%, rgba(42, 28, 97, 0.92) 100%), var(--cta-photo); background-size: cover; background-position: center; background-repeat: no-repeat; } .cta-section .container { position: relative; z-index: 1; } .cta-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; max-width: 1000px; margin: 0 auto; } @media (max-width: 991px) { .cta-inner { grid-template-columns: 1fr; } } .cta-title { font-size: 1.5rem; font-weight: 800; color: #fff; margin-bottom: 0.75rem; } .cta-title::after { content: ''; display: block; width: 48px; height: 4px; background: rgba(255,255,255,0.6); border-radius: 2px; margin-top: 0.5rem; } .cta-text { opacity: 0.95; margin-bottom: 1.5rem; line-height: 1.6; } .cta-action-row { display: flex; flex-wrap: wrap; gap: 0.75rem; } /* Eski cache / stale render durumlarında gönüllülük CTA'sını kesin kaldır */ .cta-action-row a[href="/gonullu"], .cta-action-row a[href*="/gonullu"] { display: none !important; } .cta-quote { margin: 0; padding: 1.5rem 0 1.5rem 1.5rem; border-left: 4px solid rgba(255,255,255,0.5); } .cta-quote p { font-size: 1.125rem; font-style: italic; opacity: 0.95; margin-bottom: 0.5rem; } .cta-quote footer { font-size: 0.9375rem; opacity: 0.8; } .site-wrapper { display: flex; flex-direction: column; min-height: 100vh; overflow-x: clip; width: 100%; max-width: 100%; } .site-main { flex: 1; width: 100%; max-width: 100%; min-width: 0; } .content-wrap { padding: 3rem 0 4rem; } /* CMS / blog gövdesi: taşma ve sağda gri şerit oluşturan genişlik sorunları */ .blog-content, .cms-page-body, .cms-project-body { max-width: 100%; min-width: 0; overflow-wrap: break-word; word-break: break-word; } /* CMS içindeki Bootstrap grid: mobilde sütunlar tam genişlik, taşma yok */ .blog-content .row, .cms-page-body .row, .cms-project-body .row { flex-wrap: wrap !important; max-width: 100%; } .blog-content .row > [class*="col"], .cms-page-body .row > [class*="col"], .cms-project-body .row > [class*="col"] { min-width: 0; } @media (max-width: 991.98px) { .blog-content .row > [class*="col-lg"], .cms-page-body .row > [class*="col-lg"], .cms-project-body .row > [class*="col-lg"] { flex: 0 0 100% !important; width: 100% !important; max-width: 100% !important; } } @media (max-width: 767.98px) { .blog-content .row > [class*="col-md"], .cms-page-body .row > [class*="col-md"], .cms-project-body .row > [class*="col-md"] { flex: 0 0 100% !important; width: 100% !important; max-width: 100% !important; } } @media (max-width: 575.98px) { .blog-content .row > [class*="col-sm"], .cms-page-body .row > [class*="col-sm"], .cms-project-body .row > [class*="col-sm"] { flex: 0 0 100% !important; width: 100% !important; max-width: 100% !important; } /* xs ön eki olmayan ham sütunlar: mobilde dar iki sütun yerine tam genişlik */ .blog-content .row > .col-6, .blog-content .row > .col-4, .blog-content .row > .col-3, .cms-page-body .row > .col-6, .cms-page-body .row > .col-4, .cms-page-body .row > .col-3, .cms-project-body .row > .col-6, .cms-project-body .row > .col-4, .cms-project-body .row > .col-3 { flex: 0 0 100% !important; width: 100% !important; max-width: 100% !important; } } .blog-content .card, .cms-page-body .card, .cms-project-body .card { max-width: 100%; } .blog-content .table-responsive, .cms-page-body .table-responsive, .cms-project-body .table-responsive { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } /* Admin’den gelen .container-fluid — yatay taşmayı kes (iç içe yerleşimde) */ .blog-content .container-fluid, .cms-page-body .container-fluid, .cms-project-body .container-fluid { max-width: 100%; box-sizing: border-box; } /* ========== HEADER ========== */ .site-header { position: sticky; top: 0; z-index: 100; background: var(--hp-dark); transition: box-shadow 0.3s ease; /* Çentikli telefonlarda üst barın altında kalsın */ padding-top: env(safe-area-inset-top, 0px); } .site-header.scrolled { background: var(--hp-dark); box-shadow: 0 4px 20px rgba(0,0,0,0.1); } .site-header .navbar { padding: 0.92rem 0; } .site-header .navbar .container { min-width: 0; } .site-header .navbar-brand { font-family: var(--font-heading); font-weight: 700; font-size: clamp(1.12rem, 3.7vw, 1.48rem); flex-shrink: 1; min-width: 0; /* 100vw yatay kaydırma üretir; % ile üst flex genişliğine bağlanır */ max-width: calc(100% - 4.25rem); } /* Logo sabit; uzun site adı kalan alanda ellipsis (görsel alt metni boş — tekrar okuma yok). */ .site-header .navbar-brand .navbar-brand-title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .site-header .brand-icon { color: var(--hp-accent); margin-right: 0.25rem; flex-shrink: 0; } .site-header .navbar-logo { max-height: 48px; width: auto; object-fit: contain; flex-shrink: 0; display: block; } .site-header .nav-link { font-weight: 500; padding: 0.56rem 0.82rem !important; border-radius: 10px; transition: background 0.22s var(--ease-out-quart), color 0.22s ease, box-shadow 0.22s ease; position: relative; } .site-header .nav-link::after { content: ""; position: absolute; left: 0.75rem; right: 0.75rem; bottom: 0.32rem; height: 2px; border-radius: 2px; background: linear-gradient(90deg, rgba(124, 97, 220, 0), rgba(124, 97, 220, 0.95), rgba(124, 97, 220, 0)); transform: scaleX(0.15); opacity: 0; transition: transform 0.24s var(--ease-out-quart), opacity 0.2s ease; } .site-header .nav-link:hover::after, .site-header .nav-link.active::after { transform: scaleX(1); opacity: 1; } .site-header .nav-link:hover { background: rgba(255, 255, 255, 0.1); color: #fff !important; } .site-header .nav-link.active { color: #fff !important; background: rgba(124, 97, 220, 0.18); box-shadow: inset 0 0 0 1px rgba(124, 97, 220, 0.28); } .site-header .nav-link.active:hover { background: rgba(124, 97, 220, 0.24); } .site-header.nav-glass { background: var(--hp-dark); } .site-header.scrolled.nav-glass { background: var(--hp-dark); box-shadow: 0 4px 24px rgba(0,0,0,0.12); } .site-header .header-donate-btn { background: var(--hp-accent); border: 1px solid rgba(255, 255, 255, 0.18); color: #fff; font-weight: 700; box-shadow: 0 10px 24px rgba(245, 158, 11, 0.36); transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease; } .site-header .header-donate-btn:hover { color: #fff; transform: translateY(-1px); background: var(--hp-accent); filter: brightness(1.03); box-shadow: 0 12px 28px rgba(245, 158, 11, 0.44); } .site-header .header-donate-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.4), 0 10px 24px rgba(245, 158, 11, 0.36); } /* ========== FOOTER ========== */ .site-footer { background: var(--hp-dark); color: rgba(255,255,255,0.85); padding: 4rem 0 2rem; margin-top: 5rem; } .site-footer h5, .site-footer h6 { color: white; font-weight: 700; margin-bottom: 1rem; } .site-footer a { color: rgba(255,255,255,0.75); transition: color 0.2s ease; overflow-wrap: anywhere; } .site-footer a:hover { color: white; } /* ========== ANA SAYFA HIZLI BAĞIŞ BLOĞU ========== */ .home-quick-donate .quick-donate-combined { border-radius: var(--hp-radius); overflow: hidden; box-shadow: 0 22px 44px rgba(15, 23, 42, 0.16); border: 1px solid rgba(148, 163, 184, 0.22); background: #fff; } .home-quick-donate .quick-donate-inner { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.2fr); gap: 2.5rem; align-items: center; padding: 2.25rem 2rem; background: linear-gradient(135deg, rgba(15, 23, 42, 0.98), rgba(30, 41, 59, 0.92)); color: #fff; border-top: 1px solid rgba(148, 163, 184, 0.28); } @media (max-width: 991px) { .home-quick-donate .quick-donate-inner { grid-template-columns: 1fr; } } .home-quick-donate .section-title, .home-quick-donate .section-subtitle { color: #fff; } .home-quick-donate .section-title::after { background: rgba(255, 255, 255, 0.7); } .home-quick-donate .quick-trust-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; background: #fff; border-bottom: 1px solid rgba(148, 163, 184, 0.25); min-height: 124px; } .home-quick-donate .quick-trust-item { display: flex; align-items: center; gap: 1.15rem; padding: 1.55rem 1.25rem; border-right: 1px solid rgba(148, 163, 184, 0.25); } .home-quick-donate .quick-trust-item:last-child { border-right: none; } .home-quick-donate .quick-trust-icon { width: 62px; height: 62px; min-width: 62px; border-radius: 999px; background: rgba(22, 163, 74, 0.1); color: #0f8f45; display: inline-flex; align-items: center; justify-content: center; } .home-quick-donate .quick-trust-icon svg { width: 32px; height: 32px; fill: currentColor; } .home-quick-donate .quick-trust-content h3 { margin: 0 0 0.2rem; color: #0f172a; font-size: 0.98rem; line-height: 1.25; font-weight: 800; letter-spacing: 0.01em; } .home-quick-donate .quick-trust-content p { margin: 0; color: #475569; font-size: 0.92rem; line-height: 1.4; } .home-quick-donate .stats-row { margin: 0; max-width: none; padding: 1.1rem; gap: 0.85rem; } .home-quick-donate .stat-card { border-radius: 12px; box-shadow: none; border: 1px solid rgba(148, 163, 184, 0.22); padding: 1.25rem 0.9rem; background: #fff; } .home-quick-donate .stat-icon { width: 52px; height: 52px; margin: 0 auto 0.8rem; border-radius: 999px; background: rgba(22, 163, 74, 0.1); color: #0f8f45; display: inline-flex; align-items: center; justify-content: center; } .home-quick-donate .stat-icon svg { width: 25px; height: 25px; fill: currentColor; } .home-quick-donate .stat-label { font-weight: 800; color: #0f172a; font-size: 0.9rem; letter-spacing: 0.01em; } .home-quick-donate .stat-desc { margin: 0.45rem 0 0; color: #64748b; font-size: 0.82rem; line-height: 1.35; } .quick-donate-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; } .quick-tag { display: inline-flex; align-items: center; padding: 0.4rem 0.9rem; border-radius: 999px; border: 1px solid rgba(148, 163, 184, 0.6); font-size: 0.85rem; color: rgba(226, 232, 240, 0.95); background: rgba(15, 23, 42, 0.75); } .quick-tag:hover { color: #fff; border-color: rgba(248, 250, 252, 0.9); background: rgba(15, 23, 42, 0.95); } .quick-donate-right .quick-amount-row { display: flex; align-items: center; } @media (max-width: 575px) { .quick-donate-right .quick-amount-row { flex-direction: column; align-items: stretch; gap: 0.5rem; } } .quick-amount-pills { display: flex; flex-wrap: wrap; gap: 0.5rem; } /* ========== ANA SAYFA SON BAĞIŞLAR BLOĞU ========== */ .donation-list { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 0.75rem; } .donation-item { padding: 0.85rem 1rem; border-radius: 999px; background: #fff; box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08); border: 1px solid rgba(148, 163, 184, 0.3); display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; } @media (max-width: 575px) { .donation-item { border-radius: var(--hp-radius-sm); flex-direction: column; align-items: flex-start; } } .donation-main { display: flex; align-items: baseline; gap: 0.5rem; } .donation-amount { font-family: var(--font-heading); font-weight: 700; color: var(--hp-primary); } .donation-donor { font-size: 0.95rem; font-weight: 500; color: var(--hp-dark); } .donation-meta { display: flex; align-items: center; gap: 0.75rem; font-size: 0.8rem; color: var(--hp-muted); } .donation-type { padding: 0.2rem 0.6rem; border-radius: 999px; border: 1px solid rgba(148, 163, 184, 0.6); } /* ========== ANA SAYFA KATEGORİ KAROLARı ========== */ .category-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 1.1rem; align-items: stretch; } .category-tile { display: grid; justify-items: center; align-content: start; gap: 0.45rem; padding: 0.4rem 0.25rem; border-radius: 10px; color: #1f2f44; text-decoration: none; transition: transform var(--duration-s) ease, color var(--duration-s) ease; } .category-tile:hover { transform: translateY(-2px); color: #112f57; } .category-tile:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(91, 60, 196, 0.22); } .category-tile h3 { margin: 0; font-size: 1.06rem; font-weight: 700; line-height: 1.2; text-align: center; text-transform: uppercase; } .category-icon { width: 312px; height: 244px; position: relative; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 10px; } .category-icon-image { width: 204px; height: 204px; object-fit: contain; position: relative; z-index: 1; } .category-icon-fallback { width: 204px; height: 204px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.9rem; color: #304767; background: rgba(255, 255, 255, 0.85); border: 1px solid rgba(48, 71, 103, 0.18); position: relative; z-index: 1; } @media (max-width: 575.98px) { .category-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.8rem; } .category-tile h3 { font-size: 0.9rem; } .category-icon { width: 252px; height: 196px; } .category-icon-image, .category-icon-fallback { width: 156px; height: 156px; } } /* ========== ANA SAYFA YORUMLAR ========== */ .home-testimonials-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 1.2rem; } .home-testimonial-card { background: #fff; border: 1px solid rgba(148, 163, 184, 0.28); border-radius: 14px; box-shadow: var(--hp-shadow); padding: 1.35rem 1.2rem; display: flex; flex-direction: column; min-height: 190px; } .home-testimonial-text { margin: 0 0 1rem; color: #334155; line-height: 1.65; } .home-testimonial-author { margin-top: auto; font-weight: 700; color: #0f172a; } @media (max-width: 991.98px) { .home-testimonials-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); } } /* ========== PROGRESS BAR ========== */ .progress { height: 10px; border-radius: 5px; background: rgba(15, 23, 42, 0.08); overflow: hidden; } .progress-bar { background: linear-gradient(90deg, var(--hp-success) 0%, var(--hp-success-light) 100%); border-radius: 5px; transition: width 0.6s ease; } /* ========== BLOG İÇERİK ========== */ .blog-content { font-size: var(--hp-prose); line-height: var(--hp-leading-relaxed); } .blog-content > p, .cms-page-body > p, .cms-project-body > p { max-width: 72ch; } .blog-content p { margin-bottom: 1.25rem; } .blog-content img { width: 100% !important; max-width: min(100%, 960px); height: auto !important; border-radius: var(--hp-radius-sm); display: block; margin: 1rem auto; object-fit: contain; } .cms-page-body img, .cms-project-body img { width: 100% !important; max-width: min(100%, 960px); height: auto !important; display: block; margin: 1rem auto; object-fit: contain; } .blog-content video, .blog-content embed, .blog-content object, .cms-page-body video, .cms-page-body embed, .cms-page-body object, .cms-project-body video, .cms-project-body embed, .cms-project-body object { max-width: 100%; height: auto; } .blog-content table, .cms-page-body table, .cms-project-body table { display: block; width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } .blog-content pre, .cms-page-body pre, .cms-project-body pre { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } /* Uzun URL / token satırları yatay kaydırmayı zorunlu kılmasın */ .blog-content code, .cms-page-body code, .cms-project-body code { word-break: break-word; overflow-wrap: anywhere; } /* Gömülü video / Instagram (Quill hp-embed → iframe) */ .blog-content .hp-embed-wrap { position: relative; width: 100%; max-width: 100%; margin: 1.5rem 0; border-radius: var(--hp-radius-sm); overflow: hidden; background: rgba(15, 23, 42, 0.06); box-shadow: var(--hp-shadow); } .blog-content .hp-embed-youtube iframe, .blog-content .hp-embed-vimeo iframe { display: block; width: 100%; aspect-ratio: 16 / 9; height: auto; min-height: 200px; border: 0; } .blog-content .hp-embed-instagram iframe { display: block; width: 100%; min-height: 480px; border: 0; } @media (max-width: 575.98px) { .blog-content .hp-embed-instagram iframe { min-height: 360px; } } /* Bağlantı kartı (yönetim panelinden) */ .blog-content .hp-link-card { margin: 1.25rem 0; border-radius: var(--hp-radius-sm); border: 1px solid rgba(15, 23, 42, 0.12); background: #fff; box-shadow: var(--hp-shadow); overflow: hidden; transition: box-shadow 0.2s ease, border-color 0.2s ease; } .blog-content .hp-link-card:hover { border-color: rgba(14, 165, 164, 0.45); box-shadow: var(--hp-shadow-lg); } .blog-content .hp-link-card-link { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; padding: 1rem 1.15rem; text-decoration: none; color: var(--hp-text, #0f172a); } .blog-content .hp-link-card-link:hover { color: var(--hp-primary, #5b3cc4); } .blog-content .hp-link-card-icon { font-size: 1.25rem; line-height: 1; } .blog-content .hp-link-card-host { font-weight: 600; font-size: 1.05rem; } .blog-content .hp-link-card-hint { width: 100%; flex-basis: 100%; font-size: 0.85rem; color: var(--hp-muted, #64748b); font-weight: 400; } /* Detay sayfası ana görseli: daha uzun alan + kırpmasız gösterim */ .detail-hero-image { width: 100%; min-height: 520px; max-height: min(78vh, 760px); object-fit: contain; background: #f8fafc; } @media (max-width: 767.98px) { .detail-hero-image { min-height: 380px; max-height: 68vh; } } /* ========== BLOG SSS (FAQ) ========== */ .blog-faq-qmark { color: #dc3545; font-weight: 800; margin-right: 0.35rem; display: inline-block; font-size: 1.15em; line-height: 1; vertical-align: -0.05em; } .blog-faq-title { display: flex; align-items: center; flex-wrap: wrap; gap: 0.15rem; font-family: var(--font-heading, inherit); color: var(--hp-dark, #0f172a); } .blog-faq-list .blog-faq-item + .blog-faq-item { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid rgba(15, 23, 42, 0.08); } .blog-faq-question { font-weight: 600; font-size: 1rem; color: var(--hp-dark, #0f172a); margin-bottom: 0.35rem; } .blog-faq-answer { margin-left: 0; padding-left: 0; color: var(--hp-text, #334155); white-space: pre-wrap; font-size: 0.95rem; } /* ========== KAMPANYA LİSTE KARTI (tek satır) ========== */ .campaign-row-card { border: none; border-radius: var(--hp-radius); box-shadow: var(--hp-shadow); transition: all 0.3s ease; overflow: hidden; } .campaign-row-card:hover { box-shadow: var(--hp-shadow-lg); } /* ========== SVG WAVE SEPARATORS ========== */ .section-wave { position: absolute; left: 0; right: 0; width: 100%; height: 60px; pointer-events: none; line-height: 0; } .section-wave svg { width: 100%; height: 100%; } .section-wave.top { top: -1px; } .section-wave.bottom { bottom: -1px; transform: rotate(180deg); } .wave-fill { fill: var(--hp-bg); } .wave-fill-white { fill: #fff; } /* ========== IMAGE EFFECTS ========== */ .campaign-card-img img, .campaign-card-img-media, .card-img-top { border-radius: var(--hp-radius) var(--hp-radius) 0 0; width: 100%; height: 100%; object-fit: cover; background: #f8fafc; } /* ========== PROGRESS BAR ANIMATION ========== */ .progress .progress-bar { transition: width 1s var(--ease-out-expo); } /* ========== HOW-CARD MICRO INTERACTIONS ========== */ /* ========== DUYARLI (masaüstü / tablet / mobil) ========== */ @media (max-width: 991.98px) { .hero-bg-image { transform: translateZ(0) scale(1.02); -webkit-transform: translateZ(0) scale(1.02); } .hero-bg-parallax, .page-hero-bg, .parallax-section-bg { background-attachment: scroll; } /* * Mobil menü: position:fixed + Bootstrap collapse yükseklik animasyonu birçok tarayıcıda * menünün açılmamasına veya hamburgerin kapanmamasına yol açar. Akış içi + max-height güvenli. */ .site-header .navbar-collapse { margin-top: 0.5rem; padding: 0.35rem 0 0.75rem; border-radius: 12px; background: rgba(91, 60, 196, 0.94); border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.25); max-height: min(85dvh, 36rem); overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } .site-header .navbar-toggler { position: relative; z-index: 10; } .site-header .navbar-nav .dropdown-menu { position: static; float: none; width: 100%; margin-top: 0.35rem; margin-bottom: 0.15rem; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 12px; padding: 0.45rem 0.35rem; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06); /* Açık koyu zemin — Bootstrap’in koyu .dropdown-item rengi burada sönük kalıyordu */ background: rgba(68, 43, 149, 0.98); } .site-header .navbar-nav .dropdown-item { border-radius: 8px; padding: 0.55rem 1rem; color: rgba(248, 250, 252, 0.96) !important; font-weight: 500; opacity: 1; } .site-header .navbar-nav .dropdown-item:hover, .site-header .navbar-nav .dropdown-item:focus { background: rgba(255, 255, 255, 0.12); color: #fff !important; } .site-header .navbar-nav .dropdown-item.active, .site-header .navbar-nav .dropdown-item:active { background: rgba(124, 97, 220, 0.28); color: #fff !important; } .site-header .navbar-nav .nav-link.dropdown-toggle { color: rgba(255, 255, 255, 0.95) !important; opacity: 1; } .site-header .navbar-collapse .navbar-nav .nav-item.ms-lg-3 { margin-left: 0 !important; margin-top: 0.75rem; width: 100%; } .site-header .navbar-collapse .navbar-nav .nav-item.ms-lg-3 .btn { width: 100%; } } /* Menü altı iç sayfalar: tablet + dar masaüstü — konteyner taşması / gri boşluk azaltma */ @media (max-width: 991.98px) { .site-header .navbar > .container { padding-left: max(0.75rem, env(safe-area-inset-left, 0px)); padding-right: max(0.75rem, env(safe-area-inset-right, 0px)); } .site-main .container, .page-hero .container, .site-footer .container { width: 100%; max-width: 100%; padding-left: max(1.15rem, env(safe-area-inset-left, 0px)); padding-right: max(1.15rem, env(safe-area-inset-right, 0px)); } .page-hero { padding-top: clamp(3rem, 10vw, 4.5rem); padding-bottom: clamp(2.25rem, 6vw, 3.25rem); } } .quick-donate-category-select { width: 100%; max-width: 100%; } @media (min-width: 576px) { .quick-donate-category-select { max-width: 220px; } } .checkout-step-strip { flex-direction: column; align-items: stretch !important; gap: 0.85rem !important; } @media (min-width: 768px) { .checkout-step-strip { flex-direction: row; align-items: center !important; justify-content: space-between !important; } } @media (max-width: 767.98px) { .content-wrap.cms-page-body, .content-wrap .cms-project-body { background-color: #fff; padding-top: 2rem; padding-bottom: 2.5rem; } .hero .hero-content { padding-left: 1rem; padding-right: 1rem; } .hero .btn-lg { width: 100%; max-width: 22rem; margin-left: auto; margin-right: auto; } .parallax-section { padding: 3.25rem 0; } .cta-section { padding: 3.25rem 0; } .site-footer { padding: 2.75rem 0 max(1.75rem, env(safe-area-inset-bottom, 0px)); margin-top: 3rem; } .home-quick-donate .quick-donate-inner { padding: 1.5rem 1.15rem; } .home-quick-donate .stats-row { padding: 0.85rem; gap: 0.7rem; } .home-quick-donate .quick-trust-row { grid-template-columns: 1fr; } .home-quick-donate .quick-trust-item { border-right: none; border-bottom: 1px solid rgba(148, 163, 184, 0.2); } .home-quick-donate .quick-trust-item:last-child { border-bottom: none; } } @media (max-width: 575.98px) { .stats-row { gap: 0.85rem; } .stat-card { padding: 1.35rem 0.85rem; } .stat-number { font-size: 1.85rem; } .campaign-grid { gap: 1.15rem; } .display-6 { font-size: 2rem; } .hero-child { display: none; } } /* Form etiketleri — okunabilir punto (Bootstrap ile uyumlu) */ .form-label { font-size: var(--hp-text-sm); font-weight: 600; letter-spacing: 0.01em; } .campaign-detail-article, .project-article-body { min-width: 0; } /* ========== FLOATING WHATSAPP BUTTON ========== */ .whatsapp-fab { position: fixed; right: clamp(0.9rem, 2.2vw, 1.35rem); bottom: clamp(0.9rem, 2.6vw, 1.5rem); z-index: 1100; display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.72rem 0.95rem; border-radius: 999px; background: #25d366; color: #fff; box-shadow: 0 12px 30px rgba(7, 94, 84, 0.35); text-decoration: none; font-weight: 700; opacity: 0; transform: translateY(18px); pointer-events: none; transition: opacity 0.25s ease, transform 0.25s ease, box-shadow 0.2s ease; } .whatsapp-fab.whatsapp-fab-visible { opacity: 1; transform: translateY(0); pointer-events: auto; } .whatsapp-fab:hover { color: #fff; box-shadow: 0 15px 34px rgba(7, 94, 84, 0.42); } .whatsapp-fab-icon { width: 1.7rem; height: 1.7rem; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.2); font-size: 0.9rem; line-height: 1; } .whatsapp-fab-text { white-space: nowrap; font-size: 0.92rem; } @media (max-width: 575.98px) { .whatsapp-fab { padding: 0.68rem 0.8rem; } .whatsapp-fab-text { display: none; } } /* ========== BLAZOR ERROR ========== */ #blazor-error-ui { background: #b32121; color: white; bottom: 0; box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2); display: none; left: 0; /* top | sağ (kapat) | alt çentik | sol */ padding: 0.6rem max(2.75rem, env(safe-area-inset-right, 0px)) max(0.7rem, env(safe-area-inset-bottom, 0px)) max(1rem, env(safe-area-inset-left, 0px)); position: fixed; width: 100%; max-width: 100%; box-sizing: border-box; z-index: 1000; overflow-wrap: anywhere; word-break: break-word; } #blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; } .valid.modified:not([type=checkbox]) { outline: 1px solid #26b050; } .invalid { outline: 1px solid #e50000; } .validation-message { color: #e50000; }