/* ========================================================================== Umut Çemberi Derneği — umutcemberi.org Ana stil dosyası ========================================================================== */ /* Poppins fontu içindeki ile yüklenir (daha hızlı) */ /* -------------------------------------------------------------------------- 1. Değişkenler -------------------------------------------------------------------------- */ :root { /* Marka renkleri (logodan alındı) */ --navy: #003160; --navy-700: #002a53; --navy-dark: #002243; --navy-800: #002a53; --navy-light: #0a4d8c; --navy-50: #f2f6fa; --navy-100: #e2ebf4; --orange: #f9931f; --orange-dark: #e07d0a; --orange-light:#ffb257; --orange-50: #fff8ef; --orange-100: #ffeed8; --ink: #12233a; --body: #55677d; --muted: #8494a8; --line: #e6ecf3; --white: #ffffff; --off: #f7f9fc; --radius-sm: 10px; --radius: 16px; --radius-lg: 24px; --radius-xl: 32px; --radius-pill: 999px; --shadow-xs: 0 1px 2px rgba(0,49,96,.05); --shadow-sm: 0 2px 10px rgba(0,49,96,.06); --shadow: 0 10px 30px rgba(0,49,96,.08); --shadow-lg: 0 24px 60px rgba(0,49,96,.12); --shadow-orange: 0 12px 30px rgba(249,147,31,.32); --shadow-navy: 0 12px 30px rgba(0,49,96,.24); --container: 1200px; --gutter: 24px; --t-fast: .18s cubic-bezier(.4,0,.2,1); --t: .3s cubic-bezier(.4,0,.2,1); --t-slow: .55s cubic-bezier(.22,1,.36,1); --header-h: 88px; } /* -------------------------------------------------------------------------- 2. Sıfırlama & temel -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 20px); -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 16px; font-weight: 400; line-height: 1.75; color: var(--body); background: var(--white); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } img, svg, video { max-width: 100%; height: auto; display: block; } a { color: var(--navy); text-decoration: none; transition: color var(--t-fast); } a:hover { color: var(--orange); } h1, h2, h3, h4, h5, h6 { margin: 0 0 .6em; font-weight: 700; line-height: 1.22; color: var(--navy); letter-spacing: -.02em; } h1 { font-size: clamp(2.1rem, 1.35rem + 3.2vw, 3.9rem); font-weight: 800; letter-spacing: -.035em; } h2 { font-size: clamp(1.7rem, 1.15rem + 2.3vw, 2.9rem); font-weight: 800; letter-spacing: -.03em; } h3 { font-size: clamp(1.2rem, 1.02rem + .7vw, 1.55rem); } h4 { font-size: 1.125rem; } p { margin: 0 0 1.15em; } p:last-child { margin-bottom: 0; } ul, ol { margin: 0 0 1.15em; padding-left: 1.3em; } li { margin-bottom: .45em; } strong, b { font-weight: 600; color: var(--ink); } ::selection { background: var(--orange); color: #fff; } :focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; border-radius: 4px; } /* -------------------------------------------------------------------------- 3. Yardımcılar -------------------------------------------------------------------------- */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); } .container--narrow { max-width: 880px; } .container--wide { max-width: 1340px; } .section { padding: clamp(64px, 8vw, 116px) 0; position: relative; overflow-x: clip; /* dekoratif öğeler yatay kaydırma oluşturmasın */ } .section--tight { padding: clamp(48px, 5.5vw, 76px) 0; } .section--off { background: var(--off); } .section--navy { background: var(--navy); color: rgba(255,255,255,.82); } .section--navy h1, .section--navy h2, .section--navy h3, .section--navy h4 { color: #fff; } .text-center { text-align: center; } .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; } .skip-link { position: absolute; top: -60px; left: 20px; z-index: 2000; background: var(--navy); color: #fff; padding: 12px 22px; border-radius: 0 0 var(--radius-sm) var(--radius-sm); font-weight: 600; transition: top var(--t); } .skip-link:focus { top: 0; color: #fff; } /* Bölüm başlığı */ .eyebrow { display: inline-flex; align-items: center; gap: 9px; font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--orange); background: var(--orange-50); border: 1px solid var(--orange-100); padding: 7px 16px 7px 13px; border-radius: var(--radius-pill); margin-bottom: 20px; } .eyebrow::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--orange); flex: none; } .eyebrow svg { width: 16px; height: 16px; flex: none; } /* Başlık ve metin içindeki satır içi ikonlar */ h1 > svg, h2 > svg, h3 > svg, h4 > svg { width: 1.05em; height: 1.05em; display: inline-block; vertical-align: -.14em; margin-right: .3em; } p > svg, li > svg { width: 1.1em; height: 1.1em; } /* Faaliyet alanı görsel bloğu */ .feature-art { background: var(--navy-50); border-radius: var(--radius-xl); padding: clamp(36px, 4.5vw, 64px) clamp(24px, 3vw, 40px); display: grid; place-items: center; text-align: center; } .feature-art__chip { width: clamp(104px, 13vw, 148px); aspect-ratio: 1; border-radius: 34px; background: #fff; display: grid; place-items: center; color: var(--orange); box-shadow: var(--shadow); margin-bottom: 22px; } .feature-art__chip svg { width: 52%; height: 52%; stroke-width: 1.5; } .feature-art__emoji { font-size: clamp(2rem, 3vw, 2.6rem); line-height: 1; } .feature-art__label { margin: 14px 0 0; font-weight: 600; color: var(--navy); font-size: 1.06rem; line-height: 1.35; } .section--navy .eyebrow { color: var(--orange-light); background: rgba(249,147,31,.12); border-color: rgba(249,147,31,.28); } .section-head { max-width: 720px; margin-bottom: clamp(40px, 5vw, 64px); } .section-head.text-center { margin-inline: auto; } .section-head p { font-size: 1.06rem; margin-bottom: 0; } .section-head h2 { margin-bottom: .5em; } /* Süsler */ /* Dekoratif yumuşak lekeler — filter:blur() yerine radial-gradient (kompozisyon katmanı oluşturmaz, mobilde çok daha performanslı) */ .blob { position: absolute; pointer-events: none; z-index: 0; } .blob--orange { background: radial-gradient(circle closest-side, rgba(249,147,31,.18), rgba(249,147,31,0) 70%); } .blob--navy { background: radial-gradient(circle closest-side, rgba(0,49,96,.13), rgba(0,49,96,0) 70%); } .section > .container { position: relative; z-index: 1; } /* -------------------------------------------------------------------------- 4. Butonlar -------------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-family: inherit; font-size: .97rem; font-weight: 600; line-height: 1; padding: 16px 30px; border-radius: var(--radius-pill); border: 2px solid transparent; cursor: pointer; transition: transform var(--t-fast), box-shadow var(--t), background var(--t), color var(--t), border-color var(--t); white-space: nowrap; text-align: center; } .btn svg { width: 19px; height: 19px; flex: none; } .btn:hover { transform: translateY(-2px); } .btn:active { transform: translateY(0); } .btn--primary { background: var(--orange); color: #fff; box-shadow: var(--shadow-orange); } .btn--primary:hover { background: var(--orange-dark); color: #fff; box-shadow: 0 16px 38px rgba(249,147,31,.42); } .btn--navy { background: var(--navy); color: #fff; box-shadow: var(--shadow-navy); } .btn--navy:hover { background: var(--navy-dark); color: #fff; box-shadow: 0 16px 38px rgba(0,49,96,.3); } .btn--outline { border-color: var(--navy-100); color: var(--navy); background: #fff; } .btn--outline:hover { border-color: var(--navy); background: var(--navy); color: #fff; } .btn--ghost-light { border-color: rgba(255,255,255,.34); color: #fff; background: transparent; } .btn--ghost-light:hover { background: #fff; color: var(--navy); border-color: #fff; } .btn--white { background: #fff; color: var(--navy); box-shadow: var(--shadow); } .btn--white:hover { background: var(--orange); color: #fff; } .btn--wa { background: #25D366; color: #fff; box-shadow: 0 12px 30px rgba(37,211,102,.3); } .btn--wa:hover { background: #1da851; color: #fff; } .btn--sm { padding: 12px 22px; font-size: .88rem; } .btn--lg { padding: 19px 38px; font-size: 1.03rem; } .btn--block { width: 100%; } .btn-row { display: flex; flex-wrap: wrap; gap: 14px; } .btn-row.text-center, .text-center .btn-row { justify-content: center; } /* Metin bağlantı oku */ .link-arrow { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: .95rem; color: var(--navy); } .link-arrow svg { width: 17px; height: 17px; transition: transform var(--t); } .link-arrow:hover svg { transform: translateX(4px); } /* -------------------------------------------------------------------------- 5. Header -------------------------------------------------------------------------- */ .topbar { background: var(--navy); color: rgba(255,255,255,.78); font-size: .84rem; } .topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 42px; flex-wrap: wrap; } .topbar__list { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; } .topbar a { color: rgba(255,255,255,.82); display: inline-flex; align-items: center; gap: 8px; } .topbar a:hover { color: var(--orange-light); } .topbar svg { width: 15px; height: 15px; color: var(--orange); flex: none; } .topbar__tag { display: inline-flex; align-items: center; gap: 8px; } .topbar__tag svg { color: var(--orange); } .header { position: sticky; top: 0; z-index: 900; background: rgba(255,255,255,.94); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid var(--line); transition: box-shadow var(--t), background var(--t); } .header.is-stuck { box-shadow: 0 6px 26px rgba(0,49,96,.09); background: rgba(255,255,255,.98); } .header__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: var(--header-h); } .brand { display: flex; align-items: center; flex: none; } .brand img { height: 54px; width: auto; transition: height var(--t); } .header.is-stuck .brand img { height: 46px; } .nav { display: flex; align-items: center; gap: 2px; margin-left: auto; } .nav > .btn { display: none; } /* mobil menüde görünür */ .nav__link { position: relative; display: block; white-space: nowrap; padding: 10px 13px; border-radius: var(--radius-sm); font-size: .94rem; font-weight: 500; color: var(--ink); } .nav__link::after { content: ''; position: absolute; left: 13px; right: 13px; bottom: 4px; height: 2px; border-radius: 2px; background: var(--orange); transform: scaleX(0); transform-origin: left; transition: transform var(--t); } .nav__link:hover { color: var(--navy); } .nav__link:hover::after, .nav__link.is-active::after { transform: scaleX(1); } .nav__link.is-active { color: var(--navy); font-weight: 600; } .header__cta { display: flex; align-items: center; gap: 12px; flex: none; } .nav-toggle { display: none; width: 46px; height: 46px; flex: none; border: 1px solid var(--line); background: #fff; border-radius: 12px; cursor: pointer; padding: 0; place-items: center; color: var(--navy); } .nav-toggle span { display: block; width: 20px; height: 2px; border-radius: 2px; background: currentColor; position: relative; transition: var(--t); } .nav-toggle span::before, .nav-toggle span::after { content: ''; position: absolute; left: 0; width: 20px; height: 2px; border-radius: 2px; background: currentColor; transition: var(--t); } .nav-toggle span::before { top: -6px; } .nav-toggle span::after { top: 6px; } .nav-toggle[aria-expanded="true"] span { background: transparent; } .nav-toggle[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); } .nav-toggle[aria-expanded="true"] span::after { top: 0; transform: rotate(-45deg); } @media (max-width: 1023px) { :root { --header-h: 76px; } .nav-toggle { display: grid; } .header__cta .btn { display: none; } .nav { position: fixed; inset: var(--header-h) 0 auto 0; flex-direction: column; align-items: stretch; gap: 0; background: #fff; border-bottom: 1px solid var(--line); padding: 12px var(--gutter) 24px; box-shadow: 0 24px 40px rgba(0,49,96,.12); max-height: calc(100dvh - var(--header-h)); overflow-y: auto; transform: translateY(-14px); opacity: 0; visibility: hidden; transition: var(--t); } .nav.is-open { transform: translateY(0); opacity: 1; visibility: visible; } .nav > .btn { display: inline-flex; } .nav__link { padding: 14px 6px; font-size: 1.02rem; border-bottom: 1px solid var(--line); border-radius: 0; } .nav__link::after { display: none; } .nav__link.is-active { color: var(--orange); } .nav .btn { margin-top: 18px; } .brand img { height: 44px; } .header.is-stuck .brand img { height: 42px; } .topbar__inner { justify-content: center; min-height: 38px; font-size: .78rem; } .topbar__list { gap: 16px; justify-content: center; } .topbar__tag { display: none; } } /* -------------------------------------------------------------------------- 6. Hero -------------------------------------------------------------------------- */ .hero { position: relative; overflow: hidden; background: linear-gradient(168deg, #fbfcfe 0%, #f2f7fc 46%, #fff7ec 100%); padding: clamp(56px, 7vw, 96px) 0 clamp(64px, 8vw, 112px); } .hero::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(0,49,96,.07) 1.4px, transparent 1.5px); background-size: 26px 26px; opacity: .8; -webkit-mask-image: radial-gradient(ellipse 70% 60% at 70% 30%, #000, transparent); mask-image: radial-gradient(ellipse 70% 60% at 70% 30%, #000, transparent); } .hero__grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.06fr .94fr; gap: clamp(32px, 5vw, 68px); align-items: center; } .hero h1 { margin-bottom: .38em; } .hero h1 .accent { color: var(--orange); position: relative; white-space: nowrap; } .hero h1 .accent::after { content: ''; position: absolute; left: 0; right: 0; bottom: .04em; height: .16em; background: var(--orange-100); border-radius: 4px; z-index: -1; } .hero__lead { font-size: clamp(1.02rem, .96rem + .3vw, 1.18rem); max-width: 54ch; margin-bottom: 32px; } .hero .btn-row { margin-bottom: 34px; } .hero__trust { display: flex; flex-wrap: wrap; gap: 12px 26px; } .hero__trust-item { display: inline-flex; align-items: center; gap: 9px; font-size: .9rem; font-weight: 500; color: var(--navy); } .hero__trust-item svg { width: 20px; height: 20px; color: var(--orange); flex: none; } .hero__art { position: relative; } .hero__art svg { width: 100%; height: auto; filter: drop-shadow(0 26px 50px rgba(0,49,96,.12)); } .hero__badge { position: absolute; display: flex; align-items: center; gap: 12px; background: #fff; border-radius: var(--radius); padding: 13px 18px; box-shadow: var(--shadow); border: 1px solid var(--line); animation: float 5.5s ease-in-out infinite; } .hero__badge-icon { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--orange-50); color: var(--orange); flex: none; } .hero__badge-icon svg { width: 21px; height: 21px; } .hero__badge b { display: block; font-size: 1.02rem; font-weight: 700; color: var(--navy); line-height: 1.2; } .hero__badge span { font-size: .78rem; color: var(--muted); } .hero__badge--a { top: 6%; left: -4%; } .hero__badge--b { bottom: 8%; right: -2%; animation-delay: -2.6s; } @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-11px); } } @media (max-width: 991px) { .hero__grid { grid-template-columns: 1fr; text-align: center; } .hero__lead { margin-inline: auto; } .hero .btn-row, .hero__trust { justify-content: center; } .hero__art { max-width: 520px; margin-inline: auto; order: -1; } .hero__badge--a { left: 0; } .hero__badge--b { right: 0; } } @media (max-width: 575px) { .hero__badge { padding: 10px 14px; gap: 9px; } .hero__badge-icon { width: 34px; height: 34px; } .hero__badge b { font-size: .9rem; } .hero__badge span { font-size: .7rem; } } /* Alt sayfa hero */ .page-hero { position: relative; overflow: hidden; background: var(--navy); padding: clamp(56px, 7vw, 92px) 0 clamp(60px, 7vw, 96px); text-align: center; color: rgba(255,255,255,.8); } .page-hero::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(255,255,255,.09) 1.4px, transparent 1.5px); background-size: 24px 24px; -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000, transparent); mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000, transparent); } .page-hero::after { content: ''; position: absolute; width: 460px; height: 460px; border-radius: 50%; background: rgba(249,147,31,.16); filter: blur(90px); right: -120px; top: -160px; } .page-hero .container { position: relative; z-index: 1; } .page-hero h1 { color: #fff; margin-bottom: .35em; } .page-hero p { max-width: 62ch; margin-inline: auto; font-size: 1.05rem; } .page-hero .eyebrow { color: var(--orange-light); background: rgba(249,147,31,.13); border-color: rgba(249,147,31,.3); } .breadcrumb { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; font-size: .86rem; margin-top: 26px; padding: 0; list-style: none; } .breadcrumb li { display: flex; align-items: center; gap: 10px; margin: 0; color: rgba(255,255,255,.55); } .breadcrumb li + li::before { content: '/'; color: rgba(255,255,255,.3); } .breadcrumb a { color: rgba(255,255,255,.78); } .breadcrumb a:hover { color: var(--orange-light); } /* -------------------------------------------------------------------------- 7. İstatistik sayaçları -------------------------------------------------------------------------- */ .stats { background: var(--navy); position: relative; overflow: hidden; padding: clamp(48px, 6vw, 76px) 0; } .stats::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(255,255,255,.07) 1.3px, transparent 1.4px); background-size: 22px 22px; } .stats__grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .stat { text-align: center; padding: 12px; position: relative; } .stat + .stat::before { content: ''; position: absolute; left: -10px; top: 22%; bottom: 22%; width: 1px; background: rgba(255,255,255,.16); } .stat__icon { width: 54px; height: 54px; margin: 0 auto 14px; border-radius: 16px; display: grid; place-items: center; background: rgba(249,147,31,.15); color: var(--orange-light); } .stat__icon svg { width: 27px; height: 27px; } .stat__num { font-size: clamp(1.9rem, 1.3rem + 2vw, 2.9rem); font-weight: 800; color: #fff; line-height: 1.05; letter-spacing: -.03em; display: flex; align-items: baseline; justify-content: center; gap: 2px; } .stat__num .suffix { color: var(--orange); } .stat__label { font-size: .93rem; color: rgba(255,255,255,.72); margin-top: 6px; font-weight: 400; } @media (max-width: 767px) { .stats__grid { grid-template-columns: repeat(2, 1fr); gap: 28px 12px; } .stat + .stat::before { display: none; } } /* -------------------------------------------------------------------------- 8. Kartlar -------------------------------------------------------------------------- */ .grid { display: grid; gap: 26px; } .grid--2 { grid-template-columns: repeat(2, 1fr); } .grid--3 { grid-template-columns: repeat(3, 1fr); } .grid--4 { grid-template-columns: repeat(4, 1fr); } .grid--5 { grid-template-columns: repeat(5, 1fr); } @media (max-width: 1099px) { .grid--5 { grid-template-columns: repeat(3, 1fr); } .grid--4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 991px) { .grid--3 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 767px) { .grid--2, .grid--3, .grid--4, .grid--5 { grid-template-columns: 1fr; } .grid { gap: 18px; } } /* Faaliyet kartı */ .card { position: relative; overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 32px 28px; transition: transform var(--t), box-shadow var(--t), border-color var(--t); display: flex; flex-direction: column; height: 100%; } .card::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, var(--orange), var(--orange-light)); transform: scaleX(0); transform-origin: left; transition: transform var(--t); } .card:hover { transform: translateY(-7px); box-shadow: var(--shadow-lg); border-color: transparent; } .card:hover::after { transform: scaleX(1); } .card__icon { width: 66px; height: 66px; border-radius: 20px; margin-bottom: 22px; display: grid; place-items: center; flex: none; background: var(--navy-50); color: var(--navy); transition: background var(--t), color var(--t), transform var(--t); } .card__icon svg { width: 34px; height: 34px; } .card:hover .card__icon { background: var(--orange); color: #fff; transform: rotate(-6deg) scale(1.05); } .card h3 { margin-bottom: .5em; font-size: 1.2rem; } .card p { font-size: .96rem; margin-bottom: 0; } .card__foot { margin-top: 20px; padding-top: 0; } /* 5'li grid için daha derli toplu kart */ .grid--5 .card { padding: 26px 22px; border-radius: var(--radius); } .grid--5 .card__icon { width: 56px; height: 56px; border-radius: 17px; margin-bottom: 18px; } .grid--5 .card__icon svg { width: 28px; height: 28px; } .grid--5 .card h3 { font-size: 1.06rem; } .grid--5 .card p { font-size: .89rem; line-height: 1.65; } .grid--5 .card .card__foot { margin-top: auto; padding-top: 18px; font-size: .85rem; } /* Sıralı numara kartı */ .card--num .card__num { position: absolute; right: 22px; top: 18px; font-size: 3.4rem; font-weight: 800; line-height: 1; color: var(--navy-50); letter-spacing: -.04em; transition: color var(--t); } .card--num:hover .card__num { color: var(--orange-50); } /* Bölge kartı */ .region { position: relative; overflow: hidden; border-radius: var(--radius-lg); background: var(--navy); color: rgba(255,255,255,.78); padding: 36px 30px; min-height: 300px; display: flex; flex-direction: column; justify-content: flex-end; transition: transform var(--t), box-shadow var(--t); } .region:hover { transform: translateY(-7px); box-shadow: var(--shadow-lg); } .region__bg { position: absolute; inset: 0; z-index: 0; opacity: .9; } .region__bg svg { width: 100%; height: 100%; object-fit: cover; } .region::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(0,34,67,.15) 0%, rgba(0,34,67,.82) 62%, rgba(0,34,67,.96) 100%); } .region > * { position: relative; z-index: 2; } .region__flag { font-size: 2.1rem; line-height: 1; margin-bottom: 12px; } .region h3 { color: #fff; margin-bottom: .4em; } .region p { font-size: .94rem; margin-bottom: 0; } .region__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; } .region__tag { font-size: .76rem; font-weight: 500; padding: 5px 12px; border-radius: var(--radius-pill); background: rgba(255,255,255,.14); color: #fff; border: 1px solid rgba(255,255,255,.16); } /* Değer kutusu */ .value { display: flex; gap: 18px; align-items: flex-start; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 24px; height: 100%; transition: box-shadow var(--t), transform var(--t); } .value:hover { box-shadow: var(--shadow); transform: translateY(-4px); } .value__icon { width: 50px; height: 50px; border-radius: 14px; flex: none; display: grid; place-items: center; background: var(--orange-50); color: var(--orange); } .value__icon svg { width: 25px; height: 25px; } .value h4 { margin-bottom: .35em; color: var(--navy); } .value p { font-size: .93rem; margin-bottom: 0; } /* Basit özellik listesi */ .checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: 13px; } .checklist li { display: flex; align-items: flex-start; gap: 12px; margin: 0; font-size: .97rem; } .checklist li::before { content: ''; flex: none; width: 22px; height: 22px; border-radius: 50%; margin-top: 3px; background: var(--orange-50) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f9931f' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/13px no-repeat; } .section--navy .checklist li::before { background-color: rgba(249,147,31,.16); } /* -------------------------------------------------------------------------- 9. Bölünmüş içerik (metin + görsel) -------------------------------------------------------------------------- */ .split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; } .split--reverse .split__media { order: -1; } .split__media { position: relative; } .split__media svg { width: 100%; height: auto; } @media (max-width: 900px) { .split { grid-template-columns: 1fr; } .split--reverse .split__media { order: 0; } .split__media { max-width: 520px; margin-inline: auto; } } /* -------------------------------------------------------------------------- 10. Bağış / IBAN -------------------------------------------------------------------------- */ .donate-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-xl); padding: clamp(28px, 4vw, 44px); box-shadow: var(--shadow); position: relative; overflow: hidden; } .donate-card::before { content: ''; position: absolute; right: -70px; top: -70px; width: 220px; height: 220px; border-radius: 50%; background: var(--orange-50); } .donate-card > * { position: relative; z-index: 1; } .bank-row { display: flex; align-items: center; gap: 16px; padding: 16px 0; border-bottom: 1px dashed var(--line); flex-wrap: wrap; } .bank-row:last-of-type { border-bottom: 0; } .bank-row__label { font-size: .8rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); min-width: 150px; flex: none; } .bank-row__value { font-size: 1.02rem; font-weight: 600; color: var(--navy); word-break: break-word; flex: 1 1 220px; } .bank-row__value.iban { font-family: 'Poppins', monospace; letter-spacing: .04em; font-size: clamp(.95rem, .84rem + .5vw, 1.24rem); font-weight: 700; } .copy-btn { display: inline-flex; align-items: center; gap: 8px; flex: none; font-family: inherit; font-size: .85rem; font-weight: 600; padding: 10px 18px; border-radius: var(--radius-pill); cursor: pointer; border: 2px solid var(--navy-100); background: var(--navy-50); color: var(--navy); transition: var(--t-fast); } .copy-btn svg { width: 16px; height: 16px; } .copy-btn:hover { background: var(--navy); color: #fff; border-color: var(--navy); } .copy-btn.is-copied { background: #14a05a; border-color: #14a05a; color: #fff; } .donate-note { margin-top: 26px; padding: 18px 22px; border-radius: var(--radius); background: var(--orange-50); border: 1px solid var(--orange-100); font-size: .93rem; color: var(--ink); display: flex; gap: 14px; align-items: flex-start; } .donate-note svg { width: 22px; height: 22px; color: var(--orange); flex: none; margin-top: 2px; } /* Bağış tutarı önerileri */ .amounts { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; } .amount { border: 2px solid var(--line); border-radius: var(--radius); padding: 22px 20px; text-align: center; background: #fff; transition: var(--t); } .amount:hover { border-color: var(--orange); transform: translateY(-4px); box-shadow: var(--shadow); } .amount__val { font-size: 1.6rem; font-weight: 800; color: var(--navy); letter-spacing: -.02em; } .amount__desc { font-size: .88rem; color: var(--body); margin-top: 4px; } /* -------------------------------------------------------------------------- 11. CTA şeridi -------------------------------------------------------------------------- */ .cta { position: relative; overflow: hidden; background: linear-gradient(135deg, var(--navy) 0%, #01498c 100%); color: rgba(255,255,255,.85); text-align: center; padding: clamp(56px, 7vw, 92px) 0; } .cta::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(255,255,255,.08) 1.4px, transparent 1.5px); background-size: 24px 24px; } .cta::after { content: ''; position: absolute; width: 420px; height: 420px; border-radius: 50%; background: rgba(249,147,31,.2); filter: blur(90px); left: -110px; bottom: -180px; } .cta .container { position: relative; z-index: 1; } .cta h2 { color: #fff; } .cta p { max-width: 58ch; margin-inline: auto; font-size: 1.06rem; margin-bottom: 32px; } /* -------------------------------------------------------------------------- 12. Formlar -------------------------------------------------------------------------- */ .form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; } .form-grid .field--full { grid-column: 1 / -1; } @media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } } .field { display: flex; flex-direction: column; gap: 8px; } .field label { font-size: .88rem; font-weight: 600; color: var(--navy); } .field label .req { color: var(--orange); } .field input, .field select, .field textarea { font-family: inherit; font-size: .97rem; color: var(--ink); padding: 14px 17px; border: 2px solid var(--line); border-radius: var(--radius-sm); background: #fff; transition: var(--t-fast); width: 100%; } .field textarea { resize: vertical; min-height: 140px; line-height: 1.6; } .field select { appearance: none; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2355677d' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 15px center; background-size: 18px; padding-right: 44px; } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 4px var(--orange-50); } .field input::placeholder, .field textarea::placeholder { color: var(--muted); } .form-consent { display: flex; gap: 11px; align-items: flex-start; font-size: .87rem; } .form-consent input { width: 19px; height: 19px; flex: none; margin-top: 2px; accent-color: var(--orange); } .form-status { margin-top: 16px; padding: 14px 18px; border-radius: var(--radius-sm); font-size: .92rem; font-weight: 500; display: none; } .form-status.is-ok { display: block; background: #e8f7ee; color: #11713f; border: 1px solid #b9e5cc; } .form-status.is-err { display: block; background: #fdecec; color: #a52121; border: 1px solid #f6c6c6; } /* İletişim bilgi kartı */ .contact-card { display: flex; gap: 18px; align-items: flex-start; padding: 24px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; height: 100%; transition: var(--t); } .contact-card:hover { box-shadow: var(--shadow); transform: translateY(-4px); } .contact-card__icon { width: 50px; height: 50px; border-radius: 14px; flex: none; display: grid; place-items: center; background: var(--navy-50); color: var(--navy); } .contact-card__icon svg { width: 24px; height: 24px; } .contact-card h4 { margin-bottom: .3em; font-size: 1.02rem; } .contact-card p, .contact-card a { font-size: .95rem; margin: 0; color: var(--body); } .contact-card a:hover { color: var(--orange); } .map-wrap { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow-sm); line-height: 0; } .map-wrap iframe { width: 100%; height: 420px; border: 0; display: block; } @media (max-width: 640px) { .map-wrap iframe { height: 320px; } } /* -------------------------------------------------------------------------- 13. SSS / Akordiyon -------------------------------------------------------------------------- */ .accordion { display: grid; gap: 14px; } .acc-item { border: 1px solid var(--line); border-radius: var(--radius); background: #fff; overflow: hidden; transition: border-color var(--t), box-shadow var(--t); } .acc-item.is-open { border-color: var(--orange-100); box-shadow: var(--shadow-sm); } .acc-btn { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 20px 24px; background: none; border: 0; cursor: pointer; font-family: inherit; font-size: 1.02rem; font-weight: 600; color: var(--navy); text-align: left; line-height: 1.5; } .acc-btn .chev { width: 30px; height: 30px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--navy-50); color: var(--navy); transition: var(--t); } .acc-btn .chev svg { width: 16px; height: 16px; } .acc-item.is-open .acc-btn .chev { background: var(--orange); color: #fff; transform: rotate(180deg); } .acc-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--t); } .acc-item.is-open .acc-panel { grid-template-rows: 1fr; } .acc-panel > div { overflow: hidden; } .acc-panel p { padding: 0 24px 22px; font-size: .96rem; margin: 0; } /* -------------------------------------------------------------------------- 14. Footer -------------------------------------------------------------------------- */ .footer { background: var(--navy-dark); color: rgba(255,255,255,.68); padding: clamp(52px, 6vw, 78px) 0 0; font-size: .94rem; } .footer a { color: rgba(255,255,255,.68); } .footer a:hover { color: var(--orange-light); } .footer h4 { color: #fff; font-size: 1.02rem; margin-bottom: 22px; font-weight: 600; position: relative; padding-bottom: 12px; } .footer h4::after { content: ''; position: absolute; left: 0; bottom: 0; width: 34px; height: 3px; border-radius: 3px; background: var(--orange); } .footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.35fr; gap: 40px 32px; padding-bottom: 52px; } @media (max-width: 991px) { .footer__grid { grid-template-columns: 1fr 1fr; gap: 36px 28px; } } @media (max-width: 575px) { .footer__grid { grid-template-columns: 1fr; } } .footer__brand { display: inline-flex; background: #fff; border-radius: var(--radius); padding: 14px 18px; margin-bottom: 20px; } .footer__brand img { height: 52px; width: auto; } .footer__list { list-style: none; padding: 0; margin: 0; display: grid; gap: 11px; } .footer__list li { margin: 0; } .footer__contact { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; } .footer__contact li { display: flex; gap: 13px; align-items: flex-start; margin: 0; } .footer__contact svg { width: 19px; height: 19px; color: var(--orange); flex: none; margin-top: 3px; } .footer__reach { margin-top: 22px; padding: 16px 18px; border-radius: var(--radius-sm); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); } .footer__reach span { display: block; font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.5); margin-bottom: 5px; } .footer__reach b { color: #fff; font-size: .95rem; letter-spacing: .03em; word-break: break-word; } .socials { display: flex; gap: 11px; margin-top: 22px; } .socials a { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: rgba(255,255,255,.08); color: #fff; transition: var(--t); } .socials a svg { width: 19px; height: 19px; } .socials a:hover { background: var(--orange); color: #fff; transform: translateY(-3px); } .footer__bottom { border-top: 1px solid rgba(255,255,255,.1); padding: 24px 0; display: flex; flex-wrap: wrap; gap: 12px 26px; align-items: center; justify-content: space-between; font-size: .87rem; color: rgba(255,255,255,.52); } .footer__bottom p { margin: 0; } .footer__bottom nav { display: flex; gap: 22px; flex-wrap: wrap; } /* WhatsApp yüzen buton */ .wa-float { position: fixed; right: 20px; bottom: 20px; z-index: 800; width: 58px; height: 58px; border-radius: 50%; background: #25D366; color: #fff; display: grid; place-items: center; box-shadow: 0 10px 30px rgba(37,211,102,.42); transition: transform var(--t), box-shadow var(--t); } .wa-float svg { width: 30px; height: 30px; } .wa-float:hover { transform: scale(1.08); color: #fff; box-shadow: 0 14px 38px rgba(37,211,102,.55); } .wa-float::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 2px solid #25D366; animation: pulse 2.4s ease-out infinite; } @keyframes pulse { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(1.55); opacity: 0; } } @media (max-width: 575px) { .wa-float { width: 52px; height: 52px; right: 16px; bottom: 16px; } .wa-float svg { width: 26px; height: 26px; } } /* -------------------------------------------------------------------------- 15. Kaydırma animasyonları -------------------------------------------------------------------------- */ [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity var(--t-slow), transform var(--t-slow); } [data-reveal].is-visible { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } [data-reveal] { opacity: 1; transform: none; } } /* -------------------------------------------------------------------------- 16. İçerik tipografisi (metin ağırlıklı sayfalar) -------------------------------------------------------------------------- */ .prose h2 { margin-top: 1.8em; } .prose h3 { margin-top: 1.6em; } .prose h2:first-child, .prose h3:first-child { margin-top: 0; } .prose ul li::marker { color: var(--orange); } .lead { font-size: 1.12rem; color: var(--ink); font-weight: 400; line-height: 1.7; } /* Alıntı */ .quote { border-left: 4px solid var(--orange); padding: 6px 0 6px 26px; font-size: 1.15rem; font-style: italic; color: var(--navy); font-weight: 500; margin: 32px 0; } /* Basit ayırıcı */ .divider { height: 1px; background: var(--line); border: 0; margin: 0; } /* Yazdırma */ @media print { .header, .topbar, .footer, .wa-float, .cta, .btn { display: none !important; } body { color: #000; } } /* -------------------------------------------------------------------------- 17. Bölge bayrakları (emoji bayraklar Windows'ta görünmediği için SVG kullanıldı) -------------------------------------------------------------------------- */ .flag { width: 30px; height: 20px; flex: none; display: inline-block; border-radius: 3.4px; vertical-align: -.3em; box-shadow: 0 1px 3px rgba(0,49,96,.18); } .eyebrow .flag { width: 26px; height: 17.3px; margin-right: 2px; } .region__flag { line-height: 0; margin-bottom: 14px; } .region__flag .flag { width: 54px; height: 36px; border-radius: 5px; box-shadow: 0 4px 14px rgba(0,0,0,.35); } .flag--round { width: 21px; height: 21px; border-radius: 50%; vertical-align: -.34em; } .eyebrow .flag--round { width: 19px; height: 19px; } .region__flag .flag--round { width: 38px; height: 38px; border-radius: 50%; } /* -------------------------------------------------------------------------- 18. Saha fotoğrafları -------------------------------------------------------------------------- */ .photo { position: relative; margin: 0; border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-lg); background: var(--navy-50); } .photo img { width: 100%; height: 100%; object-fit: cover; display: block; } .photo figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 42px 24px 20px; color: #fff; font-size: .89rem; line-height: 1.5; background: linear-gradient(180deg, rgba(0,34,67,0) 0%, rgba(0,34,67,.88) 72%); } .split__media .photo { aspect-ratio: 4 / 3.35; } @media (max-width: 900px) { .split__media .photo { aspect-ratio: 4 / 3; } } /* Hero fotoğraf kolajı */ .hero__photos { position: relative; display: grid; grid-template-columns: 1.55fr 1fr; grid-template-rows: 1fr 1fr; gap: 16px; aspect-ratio: 1 / .92; } .hero__photo { margin: 0; overflow: hidden; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); background: var(--navy-50); border: 5px solid #fff; } .hero__photo img { width: 100%; height: 100%; object-fit: cover; display: block; } .hero__photo--main { grid-row: 1 / 3; border-radius: var(--radius-xl); } .hero__photo--t { align-self: end; } .hero__photo--b { align-self: start; } .hero__ring { position: absolute; inset: -26px -20px -26px -22px; z-index: -1; border-radius: 50%; pointer-events: none; background: radial-gradient(circle closest-side, rgba(249,147,31,.16), rgba(249,147,31,0) 72%); } @media (max-width: 991px) { .hero__photos { aspect-ratio: 1 / .8; gap: 12px; } } @media (max-width: 575px) { .hero__photo { border-width: 4px; border-radius: var(--radius); } .hero__photo--main { border-radius: var(--radius-lg); } } /* Bölge kartı fotoğraf arka planı */ .region__bg img { width: 100%; height: 100%; object-fit: cover; } .region::before { background: linear-gradient(180deg, rgba(0,34,67,.28) 0%, rgba(0,34,67,.72) 48%, rgba(0,34,67,.95) 100%); } .region { min-height: 360px; } /* -------------------------------------------------------------------------- 19. Galeri + lightbox -------------------------------------------------------------------------- */ .gal { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; } @media (max-width: 1099px) { .gal { grid-template-columns: repeat(4, 1fr); } } @media (max-width: 767px) { .gal { grid-template-columns: repeat(3, 1fr); gap: 10px; } } @media (max-width: 479px) { .gal { grid-template-columns: repeat(2, 1fr); } } .gal__item { position: relative; padding: 0; border: 0; cursor: zoom-in; border-radius: var(--radius); overflow: hidden; background: var(--navy-50); aspect-ratio: 3 / 4; box-shadow: var(--shadow-sm); transition: transform var(--t), box-shadow var(--t); } .gal__item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--t-slow); } .gal__item::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,49,96,0) 55%, rgba(0,49,96,.45) 100%); opacity: 0; transition: opacity var(--t); } .gal__item:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); } .gal__item:hover img { transform: scale(1.07); } .gal__item:hover::after { opacity: 1; } .lb { position: fixed; inset: 0; z-index: 1200; display: none; background: rgba(0,20,40,.94); padding: 24px; align-items: center; justify-content: center; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .lb.is-open { display: flex; } .lb__img { max-width: min(94vw, 900px); max-height: 78vh; width: auto; height: auto; border-radius: var(--radius); box-shadow: 0 30px 80px rgba(0,0,0,.5); object-fit: contain; } .lb__cap { position: absolute; left: 0; right: 0; bottom: 26px; text-align: center; color: rgba(255,255,255,.9); font-size: .95rem; padding: 0 70px; } .lb__btn { position: absolute; width: 50px; height: 50px; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center; background: rgba(255,255,255,.14); color: #fff; transition: var(--t); } .lb__btn:hover { background: var(--orange); } .lb__btn svg { width: 22px; height: 22px; } .lb__close { top: 22px; right: 22px; } .lb__prev { left: 22px; top: 50%; transform: translateY(-50%); } .lb__next { right: 22px; top: 50%; transform: translateY(-50%); } @media (max-width: 575px) { .lb { padding: 12px; } .lb__btn { width: 42px; height: 42px; } .lb__prev { left: 10px; } .lb__next { right: 10px; } .lb__cap { padding: 0 20px; bottom: 16px; font-size: .85rem; } } /* .region > * kuralını ez: arka plan fotoğrafı kartı tam kaplasın */ .region .region__bg { position: absolute; inset: 0; z-index: 0; opacity: 1; } .region .region__bg img { width: 100%; height: 100%; object-fit: cover; } /* Fotoğraflı bölge kartı: üstte foto, altta okunaklı metin alanı */ .region { min-height: 460px; padding-top: 150px; } .region::before { background: linear-gradient(180deg, rgba(0,34,67,.30) 0%, rgba(0,34,67,.42) 30%, rgba(0,34,67,.88) 62%, rgba(0,34,67,.97) 100%); } @media (max-width: 767px) { .region { min-height: 420px; padding-top: 130px; } } /* -------------------------------------------------------------------------- 20. Banka bilgileri — simetrik satırlar -------------------------------------------------------------------------- */ .bank-list { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .bank-row { display: grid; grid-template-columns: 104px minmax(0, 1fr) 128px; align-items: center; gap: 14px; min-height: 74px; padding: 12px 0; border-bottom: 1px dashed var(--line); } .bank-list .bank-row:last-child { border-bottom: 0; } .bank-row__label { font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); min-width: 0; flex: none; } .bank-row__value { font-size: 1rem; font-weight: 600; color: var(--navy); line-height: 1.45; min-width: 0; overflow-wrap: anywhere; } .bank-row__value.iban { font-size: 1.02rem; font-weight: 700; letter-spacing: .02em; font-variant-numeric: tabular-nums; } .bank-row .copy-btn { width: 100%; justify-content: center; padding: 11px 12px; } @media (max-width: 620px) { .bank-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label label" "value btn"; min-height: 0; gap: 6px 12px; padding: 16px 0; } .bank-row__label { grid-area: label; } .bank-row__value { grid-area: value; } .bank-row .copy-btn { grid-area: btn; width: auto; } } /* Bağış sayfasında IBAN kartına biraz daha yer ver */ .split--donate { grid-template-columns: 1.12fr .88fr; } @media (max-width: 900px) { .split--donate { grid-template-columns: 1fr; } } /* IBAN tek satıra sığsın diye kolonları biraz daralt */ .bank-row { grid-template-columns: 92px minmax(0, 1fr) 118px; gap: 12px; } .bank-row .copy-btn { padding: 11px 8px; font-size: .82rem; } .bank-row__value.iban { font-size: clamp(.9rem, .8rem + .38vw, 1.04rem); } @media (max-width: 620px) { .bank-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label label" "value btn"; } } /* IBAN tek satırda kalsın (ölçülerek belirlendi) */ .bank-row__value.iban { font-size: clamp(.88rem, .78rem + .32vw, .97rem); letter-spacing: .01em; white-space: nowrap; } @media (max-width: 620px) { .bank-row__value.iban { white-space: normal; font-size: 1rem; } } /* Bağış kartı tablette tam genişliğe geçsin (IBAN sığsın) */ @media (max-width: 1100px) { .split--donate { grid-template-columns: 1fr; } } /* Destek kartındaki bilgi satırları — adres çok satırlı olabilir */ .donate-card .bank-row { min-height: 0; align-items: start; padding: 16px 0; } .donate-card .bank-row__label { padding-top: 3px; }