@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Instrument+Serif:ital@1&display=swap");
:root { --green:#078f4f; --green-2:#28b85a; --green-dark:#075237; --ink:#15221b; --muted:#66736c; --cream:#f7f8f2; --mint:#e8f4ec; --line:#dce5de; }
* { box-sizing:border-box; }
[hidden] { display:none!important; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--cream)!important; color:var(--ink)!important; font-family:"DM Sans",Arial,sans-serif; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
a { color:inherit; text-decoration:none; }
img { display:block; max-width:100%; }
.hero,.about,.goals,.process,.volunteers,.support,.closing { scroll-margin-top:86px; }
.hero-copy,.hero-visual,.about>*,.process>*,.volunteer-inner>*,.support-card,.uyuma-card>* { min-width:0; }
p,a,span { overflow-wrap:break-word; }
h1,h2,h3 { overflow-wrap:normal; word-break:normal; hyphens:none; }
.section { width:min(1120px,calc(100% - 48px)); margin-inline:auto; }

.site-header { position:sticky; top:0; z-index:50; width:100%; height:86px; padding:0 max(24px,calc((100% - 1240px)/2)); display:grid; grid-template-columns:minmax(190px,230px) minmax(0,1fr) auto; align-items:center; gap:clamp(18px,2.5vw,36px); background:rgba(247,248,242,.88); border-bottom:1px solid rgba(8,82,55,.1); backdrop-filter:blur(18px); }
.brand { width:218px; display:flex; align-items:center; }
.brand img { display:block; width:100%; height:auto; }
nav { min-width:0; justify-self:center; display:flex; gap:clamp(14px,2vw,30px); font-size:13px; font-weight:700; }
nav a { transition:color .2s; }
nav a:hover { color:var(--green); }
.button { display:inline-flex; align-items:center; justify-content:center; gap:9px; padding:0 21px; min-height:46px; border-radius:999px; font-size:14px; font-weight:700; transition:transform .2s,box-shadow .2s,background .2s; }
.button:hover,.support-button:hover,.store-links a:hover { transform:translateY(-2px); }
.button-dark { background:var(--ink); color:white; }
.button-green { background:linear-gradient(135deg,var(--green),var(--green-2)); color:white; box-shadow:0 12px 28px rgba(7,143,79,.18); }

.hero { width:min(1280px,calc(100% - 28px)); min-height:720px; margin:14px auto 0; padding:clamp(64px,7vw,90px) clamp(44px,6vw,84px); display:grid; grid-template-columns:minmax(430px,1.08fr) minmax(360px,.92fr); align-items:center; justify-content:center; gap:clamp(46px,5vw,72px); overflow:hidden; position:relative; border-radius:34px; background:linear-gradient(135deg,#eef8f1 0%,#fff 47%,#e2f0e7 100%); border:1px solid #dbe9df; }
.hero::before { content:""; position:absolute; width:560px; height:560px; right:-160px; top:-180px; border-radius:50%; background:radial-gradient(circle,rgba(40,184,90,.18),transparent 68%); }
.hero-copy { position:relative; z-index:2; width:100%; max-width:620px; justify-self:end; }
.eyebrow { margin:0 0 21px; display:flex; align-items:center; gap:8px; color:var(--green); font-size:12px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.eyebrow.light { color:#95e3b0; }
h1,h2,h3,p { margin-top:0; }
h1 { margin-bottom:0; font-size:clamp(58px,6vw,86px); line-height:.94; letter-spacing:-.065em; font-weight:700; white-space:nowrap; }
h1 em,.closing h2 em { font-family:"Instrument Serif",Georgia,serif; font-weight:400; color:var(--green); }
.hero-lede { max-width:650px; margin:30px 0 0; color:var(--muted); font-size:18px; line-height:1.75; }
.hero-actions { display:flex; align-items:center; gap:28px; margin-top:36px; }
.discover { display:flex; align-items:center; gap:8px; font-size:14px; font-weight:700; }
.trust-list { display:flex; flex-wrap:wrap; gap:22px; margin-top:49px; color:#687970; font-size:12px; }
.trust-list span { display:flex; align-items:center; gap:7px; }
.trust-list svg { color:var(--green); }

.hero-visual { position:relative; min-height:520px; display:grid; place-items:center; overflow:visible; }
.orbit { position:absolute; border:1px solid rgba(7,143,79,.18); border-radius:50%; }
.orbit-one { width:410px; height:410px; }
.orbit-two { width:300px; height:300px; border-style:dashed; }
.change-mark { width:290px; height:290px; position:relative; display:flex; align-items:center; justify-content:center; gap:18px; border-radius:50%; background:rgba(255,255,255,.72); box-shadow:0 34px 80px rgba(7,82,55,.12),inset 0 0 0 1px rgba(7,143,79,.12); backdrop-filter:blur(12px); }
.change-mark i { width:48px; height:48px; border-radius:50%; background:#454446; }
.change-mark i:nth-child(2){background:#0b7b43}.change-mark i:nth-child(3){background:#35bb4c}
.change-mark span { position:absolute; width:190px; height:190px; right:18px; border:14px solid var(--green); border-left-color:transparent; border-radius:50%; }
.floating-note { position:absolute; min-width:160px; padding:15px 18px; display:flex; flex-direction:column; border:1px solid rgba(7,143,79,.13); border-radius:16px; background:rgba(255,255,255,.88); box-shadow:0 16px 45px rgba(7,82,55,.1); }
.floating-note b { font-size:13px; }.floating-note small { margin-top:4px; color:var(--muted); }
.note-one { left:3%; top:19%; }.note-two { right:0; bottom:17%; }

.about { padding:140px 0; display:grid; grid-template-columns:.95fr 1.05fr; gap:120px; }
.section-heading h2,.support-heading h2,.process h2,.goals h2,.volunteers h2 { margin:0; font-size:clamp(42px,5vw,68px); line-height:1.05; letter-spacing:-.055em; }
.about-content .lead { color:var(--ink); font-size:21px; line-height:1.65; }
.about-content>p:not(.lead) { color:var(--muted); font-size:16px; line-height:1.75; }
.about-points { display:grid; gap:14px; margin-top:32px; }
.about-points span { display:flex; align-items:center; gap:10px; font-weight:700; }
.about-points svg { color:var(--green); }

.goals { padding:120px 0; background:var(--ink); color:white; }
.goals-heading { max-width:1120px; }
.goals-heading h2 { max-width:780px; }
.goal-grid { margin-top:66px; display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.goal-card { min-height:300px; padding:28px; border:1px solid rgba(255,255,255,.1); border-radius:20px; background:linear-gradient(145deg,rgba(255,255,255,.06),rgba(255,255,255,.02)); }
.goal-top { display:flex; align-items:flex-start; justify-content:space-between; color:#91dcae; }
.goal-icon { width:58px; height:58px; display:grid; place-items:center; border:1px solid rgba(145,220,174,.28); border-radius:16px; color:#a6ebbd; background:linear-gradient(145deg,rgba(145,220,174,.16),rgba(145,220,174,.04)); box-shadow:inset 0 1px 0 rgba(255,255,255,.08); }
.goal-icon img { width:34px; height:34px; object-fit:contain; }
.goal-number { padding-top:5px; color:rgba(255,255,255,.38); font-size:11px; letter-spacing:.14em; }
.goal-card h3 { margin:58px 0 12px; font-size:23px; }
.goal-card p { margin:0; color:rgba(255,255,255,.58); line-height:1.7; font-size:14px; }

.process { padding:140px 0; display:grid; grid-template-columns:.8fr 1.2fr; gap:120px; align-items:start; }
.process-intro>p:last-child { max-width:470px; margin-top:28px; color:var(--muted); line-height:1.75; }
.step-list { display:grid; }
.step { padding:27px 0; display:grid; grid-template-columns:64px 1fr; gap:20px; border-bottom:1px solid var(--line); }
.step>span { width:44px; height:44px; display:grid; place-items:center; border-radius:50%; background:var(--mint); color:var(--green); font-size:12px; font-weight:800; }
.step h3 { margin:0 0 8px; font-size:22px; }.step p { margin:0; color:var(--muted); line-height:1.65; }

.volunteers { padding:110px 0; color:white; background:linear-gradient(120deg,#087143,#0b9250 58%,#2ebd62); }
.volunteer-inner { display:grid; grid-template-columns:90px .9fr 1.1fr; align-items:center; gap:54px; }
.volunteer-icon { width:84px; height:84px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.3); border-radius:50%; }
.volunteer-inner h2 { font-size:clamp(38px,4.5vw,60px); }
.volunteer-inner>p { margin:0; color:rgba(255,255,255,.78); font-size:17px; line-height:1.75; }

.support { padding:140px 0; }
.support-heading { max-width:720px; }
.support-heading>p:last-child { margin:27px 0 0; color:var(--muted); font-size:18px; line-height:1.7; }
.support-grid { margin-top:58px; display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.support-card { min-width:0; min-height:470px; padding:30px; display:flex; flex-direction:column; border:1px solid var(--line); border-radius:24px; background:white; box-shadow:0 18px 50px rgba(15,64,38,.05); overflow:hidden; }
.support-card>img { width:100%; height:150px; margin:29px 0 12px; object-fit:contain; object-position:left center; }
.support-card>p { color:var(--muted); line-height:1.7; }
.tag { align-self:flex-start; padding:8px 11px; border-radius:999px; color:#bd2840; background:#fee9ec; font-size:10px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.tag.green { color:var(--green-dark); background:var(--mint); }.tag.blue { color:#176884; background:#e5f4f7; }
.support-button { margin-top:auto; min-height:50px; display:flex; align-items:center; justify-content:center; gap:9px; border-radius:13px; background:var(--green); color:white; font-weight:800; transition:transform .2s; }
.support-button.red { background:#ca2a40; }
.uyuma-card { grid-column:1/-1; min-height:auto; display:grid; grid-template-columns:minmax(260px,.75fr) minmax(0,1.25fr); column-gap:clamp(28px,4vw,48px); align-items:center; }
.uyuma-card .tag { grid-column:1/-1; }
.uyuma-card>img { grid-column:1; height:170px; margin:20px 0 0; }
.uyuma-card>p { grid-column:2; grid-row:2; margin-bottom:95px; font-size:16px; }
.store-links { grid-column:2; grid-row:2; align-self:end; display:flex; flex-wrap:wrap; gap:11px; }
.store-links a { width:min(190px,calc(50% - 6px)); flex:0 1 190px; display:block; transition:transform .2s; }
.store-links img { display:block; width:100%; }
.emergency { margin-top:22px; padding:18px 20px; display:flex; align-items:center; justify-content:center; gap:9px; border:1px solid #e1e7e2; border-radius:14px; background:#fff; color:var(--muted); font-size:13px; }
.emergency svg { color:var(--green); }.emergency a { color:var(--ink); font-weight:800; text-decoration:underline; }

.closing { padding:115px max(24px,calc((100% - 1120px)/2)); display:flex; align-items:end; justify-content:space-between; gap:40px; color:white; background:var(--green-dark); }
.closing h2 { margin:0; font-size:clamp(52px,7vw,90px); line-height:.98; letter-spacing:-.055em; }
.closing h2 em { color:#99e4b5; }
.button-white { flex:none; background:white; color:var(--green-dark); }
footer { width:min(1120px,calc(100% - 48px)); min-height:170px; margin:auto; display:grid; grid-template-columns:minmax(190px,230px) minmax(0,1fr) auto; align-items:center; gap:clamp(22px,4vw,48px); }
footer>img { width:220px; }
footer p { max-width:430px; margin:0; color:var(--muted); font-size:13px; line-height:1.6; }
footer div { display:flex; gap:22px; color:var(--green); font-size:13px; font-weight:800; }

.install-app-button { display:none; position:relative; z-index:2; min-width:235px; padding:9px 13px 9px 9px; align-items:center; gap:11px; border:1px solid rgba(7,82,55,.15); border-radius:18px; color:white; background:linear-gradient(135deg,#075237,#078f4f); box-shadow:0 14px 34px rgba(7,82,55,.2); font:inherit; text-align:left; cursor:pointer; }
.install-button-mark { width:43px; height:43px; flex:none; display:block; object-fit:cover; border-radius:12px; background:#000; }
.mark-gray { fill:#454446; }.mark-green { fill:#0b7b43; }.mark-light { fill:#35bb4c; }
.install-app-button span { display:flex; flex:1; flex-direction:column; font-size:13px; font-weight:800; line-height:1.2; }
.install-app-button small { margin-bottom:3px; color:rgba(255,255,255,.7); font-size:9px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.install-overlay { position:fixed; inset:0; z-index:110; display:flex; align-items:flex-end; justify-content:center; padding:18px; background:rgba(9,20,14,.5); backdrop-filter:blur(8px); }
.install-sheet { position:relative; width:min(100%,430px); padding:28px 24px calc(24px + env(safe-area-inset-bottom)); border-radius:26px 26px 20px 20px; background:white; box-shadow:0 30px 80px rgba(0,0,0,.25); text-align:center; }
.install-close { position:absolute; top:14px; right:14px; width:38px; height:38px; display:grid; place-items:center; border:0; border-radius:50%; color:var(--muted); background:var(--cream); cursor:pointer; }
.install-logo { width:76px; height:76px; margin:0 auto 17px; display:grid; place-items:center; overflow:hidden; border-radius:22px; background:#000; box-shadow:0 10px 28px rgba(7,82,55,.14); }
.install-logo img { width:100%; height:100%; display:block; object-fit:cover; }
.install-sheet h2 { margin:0 auto 10px; max-width:320px; font-size:26px; line-height:1.08; letter-spacing:-.035em; }
.install-sheet p { margin:0 auto 18px; max-width:340px; color:var(--muted); font-size:14px; line-height:1.6; }
.install-tip { margin:0 auto 17px; padding:13px 15px; display:flex; align-items:center; justify-content:center; gap:9px; border-radius:13px; color:var(--green-dark); background:var(--mint); font-size:13px; font-weight:800; }
.install-done { width:100%; min-height:48px; border:0; border-radius:13px; color:white; background:var(--green); font:700 14px "DM Sans",Arial,sans-serif; cursor:pointer; }

@media(max-width:980px){
  .site-header{grid-template-columns:minmax(0,1fr) auto;gap:14px}.brand{width:min(200px,100%)}nav{display:none}
  .hero{grid-template-columns:1fr;padding-top:80px}.hero-copy{max-width:680px;justify-self:center}.hero-visual{min-height:440px}.about,.process{grid-template-columns:1fr;gap:44px}.goal-grid{grid-template-columns:1fr 1fr}.volunteer-inner{grid-template-columns:90px 1fr}.volunteer-inner>p{grid-column:2}.closing{align-items:flex-start;flex-direction:column}.uyuma-card{grid-template-columns:1fr}.uyuma-card .tag,.uyuma-card>img,.uyuma-card>p,.store-links{grid-column:1;grid-row:auto}.uyuma-card>p{margin-bottom:10px}
  footer{grid-template-columns:200px minmax(0,1fr)}footer div{grid-column:1/-1;justify-content:flex-end}
}
@media(max-width:680px){
  .section{width:calc(100% - 36px)}.site-header{height:74px;padding:0 16px;grid-template-columns:minmax(0,1fr) auto}.brand{width:min(175px,100%)}.button-dark{padding:0 15px;min-height:42px}.button-dark svg{display:none}
  .hero,.about,.goals,.process,.volunteers,.support,.closing{scroll-margin-top:74px}.hero{width:calc(100% - 14px);min-height:auto;margin-top:7px;padding:52px 20px 32px;border-radius:23px;gap:24px}.hero h1{font-size:clamp(40px,12.5vw,50px);line-height:.98}.hero-lede{margin-top:24px;font-size:16px;line-height:1.65}.hero-actions{width:100%;align-items:stretch;flex-direction:column;gap:14px;margin-top:28px}.hero-actions>.button{width:100%}.discover{min-height:42px;justify-content:center}.install-app-button{display:flex;width:100%;min-width:0}.trust-list{flex-direction:column;gap:12px;margin-top:30px}.hero-visual{width:100%;min-height:300px;overflow:visible;margin:0}.orbit-one{width:min(280px,78vw);height:min(280px,78vw)}.orbit-two{width:min(210px,59vw);height:min(210px,59vw)}.change-mark{width:min(198px,55vw);height:min(198px,55vw)}.change-mark i{width:clamp(27px,9vw,34px);height:clamp(27px,9vw,34px)}.change-mark span{width:min(132px,37vw);height:min(132px,37vw);border-width:10px}.floating-note{min-width:118px;max-width:43%;padding:10px 12px}.floating-note b{font-size:12px}.floating-note small{font-size:10px}.note-one{left:0;top:12%}.note-two{right:0;bottom:10%}
  .about,.process,.support{padding:90px 0}.about{gap:38px}.section-heading h2,.support-heading h2,.process h2,.goals h2,.volunteers h2{font-size:clamp(36px,11vw,44px)}.about-content .lead{font-size:18px}
  .goals{padding:85px 0}.goal-grid{grid-template-columns:1fr;margin-top:45px}.goal-card{min-height:250px}.goal-card h3{margin-top:56px}.step{grid-template-columns:52px minmax(0,1fr)}.volunteers{padding:80px 0}.volunteer-inner{grid-template-columns:1fr;gap:25px}.volunteer-inner>p{grid-column:auto}.support-grid{grid-template-columns:minmax(0,1fr)}.uyuma-card{grid-column:auto}.support-card{min-height:430px;padding:23px}.store-links{width:100%}.store-links a{width:calc(50% - 6px);min-width:125px;flex:1 1 140px}.emergency{text-align:left;align-items:flex-start}.closing{padding:82px 20px}.closing h2{font-size:clamp(44px,14vw,55px)}footer{grid-template-columns:1fr;padding:35px 0;gap:12px}footer>img{width:190px}footer div{grid-column:auto;justify-content:flex-start;flex-wrap:wrap;margin-top:12px}
}
@media(max-width:390px){.site-header{padding-inline:12px}.brand{width:148px}.button-dark{padding-inline:13px;font-size:12px}.hero{padding-inline:17px}.hero h1{font-size:40px}.floating-note{display:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

/* Üst header sosyal bağlantıları — v11 */
.site-header { grid-template-columns:minmax(190px,218px) minmax(0,1fr) auto auto; gap:clamp(12px,1.4vw,20px); }
.site-header>nav { gap:clamp(12px,1.4vw,22px); font-size:12px; }
.header-social { display:flex; align-items:center; justify-content:center; gap:5px; min-width:0; }
.header-social a { display:grid; place-items:center; flex:none; width:38px; height:38px; border:1px solid #d6e6da; border-radius:50%; background:#eef5ed; transition:background .2s,border-color .2s; }
.header-social a:hover { background:#dceede; border-color:#9fc5ac; }
.header-social img { display:block; width:20px; height:20px; object-fit:contain; }
.header-social a:focus-visible { outline:3px solid #078f4f; outline-offset:2px; }
@media(min-width:981px) and (max-width:1179px) {
 .site-header { height:122px; grid-template-columns:minmax(190px,1fr) auto auto; grid-template-rows:66px 42px; row-gap:0; padding-bottom:14px; }
 .site-header>.brand { grid-column:1; grid-row:1; }
 .site-header>.header-social { grid-column:2; grid-row:1; }
 .site-header>.button { grid-column:3; grid-row:1; }
 .site-header>nav { grid-column:1/-1; grid-row:2; gap:28px; font-size:13px; }
 .hero,.about,.goals,.process,.volunteers,.support,.closing { scroll-margin-top:132px; }
}
@media(min-width:681px) and (max-width:980px) {
 .site-header { grid-template-columns:minmax(180px,1fr) auto auto; gap:16px; }
}
@media(max-width:680px) {
 .site-header { height:118px; grid-template-columns:minmax(0,1fr) auto; grid-template-rows:64px 44px; gap:0 12px; padding-bottom:10px; }
 .site-header>.brand { grid-column:1; grid-row:1; }
 .site-header>.button { grid-column:2; grid-row:1; }
 .site-header>.header-social { grid-column:1/-1; grid-row:2; justify-self:center; gap:12px; }
 .header-social a { width:40px; height:40px; }
 .hero,.about,.goals,.process,.volunteers,.support,.closing { scroll-margin-top:128px; }
}
