/* ==========================================================================
   sustainability.css — sustainability.html'e ozel stiller
   base.css ile birlikte yuklenir; nav/footer/btn/sec-* oradan gelir
   ========================================================================== */

/* === HERO === */
/* about.css'teki koyu hero ailesinin tek kolonlu, metin odakli hali */
.sus-hero{padding:11rem 4% 6rem;background:linear-gradient(168deg,var(--navy) 0%,#1d1430 55%,var(--plum-dark) 100%);position:relative;overflow:hidden}
.sus-hero::before{content:'';position:absolute;top:-25%;right:-10%;width:55%;height:80%;background:radial-gradient(circle,rgba(122,61,158,.22),transparent 66%);pointer-events:none}
.sus-hero::after{content:'';position:absolute;bottom:-30%;left:-10%;width:45%;height:75%;background:radial-gradient(circle,rgba(106,127,212,.12),transparent 66%);pointer-events:none}
.sus-hero-inner{max-width:var(--max);margin:0 auto;position:relative;z-index:1}
.sus-hero .sec-tag{color:var(--purple-soft)}
.sus-hero h1{font-family:var(--fd);font-size:clamp(2.4rem,5.2vw,4rem);font-weight:700;line-height:1.08;letter-spacing:-.01em;color:#fff;max-width:820px}
.sus-hero h1 em{font-style:italic;background:var(--accent-gradient);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.sus-lead{font-size:1.05rem;color:rgba(255,255,255,.6);line-height:1.8;margin-top:1.3rem;max-width:640px}
.sus-hero-btns{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2.2rem}
.sus-hero .btn-line{border-color:rgba(255,255,255,.28);color:#fff}
.sus-hero .btn-line:hover{border-color:transparent;color:#fff;background:linear-gradient(var(--navy-mid),var(--navy-mid)) padding-box,var(--accent-gradient) border-box;box-shadow:0 10px 30px rgba(94,37,99,.35)}

/* === DURUST BASLANGIC === */
.sus-intro{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:1.35fr 1fr;gap:4rem;align-items:start}
.sus-intro-body p{font-size:1rem;color:var(--text);line-height:1.85;margin-bottom:1.1rem}
.sus-intro-body p:last-child{margin-bottom:0}
.sus-intro-body strong{color:var(--navy);font-weight:600}
.sus-fact{background:var(--white);border:1px solid var(--border);border-left:3px solid var(--plum);border-radius:12px;padding:1.8rem 1.9rem}
.sus-fact-label{font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.14em;color:var(--plum);margin-bottom:.7rem}
.sus-fact p{font-family:var(--fd);font-size:1.25rem;font-style:italic;line-height:1.5;color:var(--navy)}

/* === DORT PRATIK === */
.sus-grid{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:repeat(2,1fr);gap:1.4rem}
.sus-card{background:var(--white);border:1px solid var(--border);border-radius:16px;padding:2.2rem 2rem;transition:all .4s var(--ease)}
.sus-card:hover{border-color:var(--purple-soft);transform:translateY(-4px);box-shadow:0 16px 44px rgba(58,18,64,.08)}
.sus-card-n{font-family:var(--fd);font-size:.95rem;font-weight:700;letter-spacing:.14em;background:var(--accent-gradient);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:1rem}
.sus-card h3{font-family:var(--fd);font-size:1.45rem;font-weight:700;line-height:1.25;margin-bottom:.7rem}
.sus-card p{font-size:.92rem;color:var(--text);line-height:1.78}

/* === SOYLEMEYECEKLERIMIZ === */
.sus-no-band{background:linear-gradient(168deg,var(--navy) 0%,#1d1430 60%,var(--plum-dark) 100%)}
.sus-no-list{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.sus-no-item{border-top:1px solid rgba(255,255,255,.14);padding-top:1.6rem}
.sus-no-item strong{display:block;font-family:var(--fd);font-size:1.35rem;font-weight:700;color:#fff;line-height:1.3;margin-bottom:.6rem;text-decoration:line-through;text-decoration-color:var(--purple-soft);text-decoration-thickness:2px}
.sus-no-item span{font-size:.88rem;color:rgba(255,255,255,.55);line-height:1.75}

/* === ALT CTA === */
.sus-cta{padding:7rem 4%;background:var(--cream);text-align:center}
.sus-cta-inner{max-width:760px;margin:0 auto}
.sus-cta h2{font-family:var(--fd);font-size:clamp(1.9rem,3.8vw,2.8rem);font-weight:700;line-height:1.15}
.sus-cta p{font-size:1rem;color:var(--text);line-height:1.8;margin-top:1rem}
.sus-cta-btns{display:flex;flex-wrap:wrap;gap:.9rem;justify-content:center;margin-top:2.2rem}

/* === RESPONSIVE === */
@media(max-width:1024px){
  .sus-intro{grid-template-columns:1fr;gap:2.5rem}
  .sus-no-list{grid-template-columns:1fr;gap:2rem}
}
@media(max-width:700px){
  .sus-hero{padding:9rem 4% 4.5rem}
  .sus-grid{grid-template-columns:1fr}
  .sec{padding:5rem 4%}
}