/* ============================================================================
   SÜRDÜRÜLEBİLİRLİK (.co-sur) — v347 mockup'ı birebir, site şablonuna uyarlandı.
   Kaynak: surdurulebilirlik_v347.html
   Tüm kurallar .co-sur kapsayıcısı altındadır; site genelini etkilemez.
   ========================================================================== */
.co-sur {
    --bg:         #F7F4ED;
    --surface:    #FFFFFF;
    --text:       #14201E;
    --muted:      #5D6966;
    --line:       #E7DFD3;
    --dark:       #14201E;
    --accent:     #C8A35D;
    --green-soft: #E7EBE3;
    --font:       Futura, "Futura PT", "Avenir Next", Avenir, "Century Gothic", "Tw Cen MT", Arial, sans-serif;
    /* Ortak sol/sağ hiza: geniş ekranda 1440px kolon, darda 5vw pay */
    --kolon:      max(5vw, calc((100% - 1440px) / 2));

    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
}
.co-sur * { box-sizing: border-box; }
.co-sur a { color: inherit; text-decoration: none; }
.co-sur a:hover { color: inherit; text-decoration: none; }
.co-sur img { display: block; max-width: 100%; }
/* theme.css'teki global `p{color:#77838f}` bölüm renklerini eziyordu; kapsam içinde miras esas alınır */
.co-sur p { color: inherit; }

.co-sur .sur-bolum{padding:72px var(--kolon)}
.co-sur .sur-ic{max-width:1440px;margin:0 auto}
.co-sur .sur-head{display:flex;justify-content:space-between;gap:30px;align-items:end;margin-bottom:30px}
.co-sur .sur-head h2{margin:0;font-family:inherit;font-size:clamp(28px,3.1vw,40px);line-height:1.05;letter-spacing:-.03em;font-weight:500;text-transform:none;max-width:760px;color:var(--text)}
.co-sur .sur-head > p{margin:0;max-width:560px;font-size:15px;color:var(--muted);line-height:1.7}
.co-sur .sur-kicker{display:block;color:#75613B;font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;margin-bottom:10px}

/* ---------- HERO ---------- */
.co-sur .sur-hero{position:relative;min-height:640px;overflow:hidden;background:#DDD;display:flex;align-items:flex-end}
.co-sur .sur-hero::before{content:"";position:absolute;inset:0;background-image:linear-gradient(90deg,rgba(20,32,30,.78) 0%,rgba(20,32,30,.55) 32%,rgba(20,32,30,.18) 62%,rgba(20,32,30,.06) 100%),var(--hero-gorsel);background-size:cover;background-position:center center}
.co-sur .sur-hero-ic{position:relative;z-index:1;width:100%;max-width:1440px;margin:0 auto;padding:84px var(--kolon) 70px}
.co-sur .sur-hero-copy{max-width:690px;color:#fff}
.co-sur .sur-etiket{display:inline-flex;padding:9px 15px;border-radius:999px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);color:#F3DFB1;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin-bottom:18px}
.co-sur .sur-hero h1{margin:0 0 16px;font-family:inherit;font-size:clamp(34px,4.6vw,58px);line-height:1.02;letter-spacing:-.032em;font-weight:500;text-transform:none;color:#fff}
.co-sur .sur-hero-copy p{margin:0 0 26px;color:#F0EBE3;font-size:17px;line-height:1.62;max-width:650px}
.co-sur .sur-aksiyon{display:flex;gap:12px;flex-wrap:wrap}
.co-sur .sur-btn{display:inline-flex;align-items:center;justify-content:center;padding:14px 22px;border-radius:999px;font-size:14px;font-weight:700;transition:.22s}
.co-sur .sur-btn--birincil{background:var(--accent);color:#171717}
.co-sur .sur-btn--birincil:hover{background:#D9B673;color:#171717;transform:translateY(-2px)}
.co-sur .sur-btn--ikincil{background:#fff;color:var(--dark)}
.co-sur .sur-btn--ikincil:hover{background:#F1ECE3;color:var(--dark);transform:translateY(-2px)}

/* ---------- İLKELER ---------- */
.co-sur .sur-ilke-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.co-sur .sur-ilke{background:#fff;border:1px solid var(--line);border-radius:28px;padding:28px;min-height:230px}
.co-sur .sur-ilke .sur-no{font-size:13px;font-weight:700;color:#8A7448;margin-bottom:24px;letter-spacing:.04em}
.co-sur .sur-ilke h3{margin:0 0 10px;font-family:inherit;font-size:23px;font-weight:500;line-height:1.15;text-transform:none;color:var(--text)}
.co-sur .sur-ilke p{margin:0;color:var(--muted);font-size:14px;line-height:1.65}

/* ---------- MALZEME KÜTÜPHANESİ ---------- */
.co-sur .sur-malzeme-bant{background:#EDE7DC}
.co-sur .sur-malzeme-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:15px}
.co-sur .sur-malzeme{background:#fff;border:1px solid var(--line);border-radius:26px;overflow:hidden;display:flex;flex-direction:column;min-height:420px}
.co-sur .sur-doku{height:175px;position:relative;overflow:hidden}
.co-sur .sur-doku::after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.22),rgba(0,0,0,.07));mix-blend-mode:soft-light}
.co-sur .sur-doku img{position:relative;z-index:1;width:100%;height:100%;object-fit:cover}
.co-sur .sur-doku--plastik{background:radial-gradient(circle at 20% 25%,#53605A 0 2px,transparent 3px),radial-gradient(circle at 75% 62%,#737E78 0 1px,transparent 2px),linear-gradient(135deg,#2D3431,#59625E);background-size:18px 18px,22px 22px,100% 100%}
.co-sur .sur-doku--lam{background:repeating-linear-gradient(92deg,#C8A978 0 3px,#D6BB8F 3px 7px,#B58E5C 7px 9px,#D7BD91 9px 14px)}
.co-sur .sur-doku--cam{background:linear-gradient(135deg,rgba(222,235,232,.88),rgba(155,178,174,.74));box-shadow:inset 0 0 0 1px rgba(255,255,255,.65)}
.co-sur .sur-doku--kumas{background:repeating-linear-gradient(45deg,#D8D2C8 0 2px,#C9C2B7 2px 4px),repeating-linear-gradient(-45deg,rgba(255,255,255,.2) 0 1px,transparent 1px 3px)}
.co-sur .sur-doku--kece{background:radial-gradient(circle at 25% 35%,rgba(255,255,255,.22) 0 1px,transparent 1.5px),linear-gradient(135deg,#8C9485,#ADB2A5);background-size:8px 8px,100% 100%}
.co-sur .sur-malzeme-govde{padding:22px;display:flex;flex-direction:column;flex:1}
.co-sur .sur-malzeme-etiket{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#7C6741;margin-bottom:10px}
.co-sur .sur-malzeme-govde h3{margin:0 0 10px;font-family:inherit;font-size:20px;font-weight:500;line-height:1.12;text-transform:none;color:var(--text)}
.co-sur .sur-malzeme-govde p{margin:0 0 16px;font-size:13px;color:var(--muted);line-height:1.65}
.co-sur .sur-metrik{margin-top:auto;border-top:1px solid var(--line);padding-top:16px}
.co-sur .sur-metrik strong{display:block;font-size:22px;line-height:1.05;color:#1C2926;margin-bottom:5px;font-weight:500}
.co-sur .sur-metrik span{display:block;font-size:12px;color:#78817E;line-height:1.45}
.co-sur .sur-not{margin-top:20px;background:#FFF8E9;border:1px solid #EAD9B5;border-radius:20px;padding:17px 20px;color:#685630;font-size:12px;line-height:1.6}

/* ---------- KARBON ---------- */
.co-sur .sur-karbon{background:#15211F;color:#fff}
.co-sur .sur-karbon .sur-head h2{color:#fff}
.co-sur .sur-karbon .sur-head > p{color:#CBD4D0}
.co-sur .sur-karbon .sur-kicker{color:#D5BA7A}
.co-sur .sur-karbon-duzen{display:grid;grid-template-columns:.92fr 1.08fr;gap:22px;align-items:stretch}
.co-sur .sur-karbon-intro{border-radius:32px;padding:36px;background:linear-gradient(145deg,#243633,#15211F);display:flex;flex-direction:column;justify-content:space-between;min-height:520px}
.co-sur .sur-co2{font-size:clamp(58px,6vw,88px);line-height:.9;font-weight:700;letter-spacing:-.06em;color:#D7BB7D;margin-bottom:28px}
.co-sur .sur-karbon-intro h3{margin:0 0 14px;font-family:inherit;font-size:clamp(26px,2.6vw,34px);line-height:1.08;font-weight:500;text-transform:none;color:#fff}
.co-sur .sur-karbon-intro p{margin:0;font-size:15px;line-height:1.7;color:#D1D9D6}
.co-sur .sur-karbon-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.co-sur .sur-karbon-kart{border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.055);border-radius:26px;padding:24px}
.co-sur .sur-karbon-kart > span{display:inline-flex;width:38px;height:38px;border-radius:50%;align-items:center;justify-content:center;background:#C8A35D;color:#111;font-weight:700;font-size:13px;margin-bottom:18px}
.co-sur .sur-karbon-kart h3{margin:0 0 8px;font-family:inherit;font-size:19px;font-weight:500;text-transform:none;color:#fff}
.co-sur .sur-karbon-kart p{margin:0;font-size:13px;line-height:1.65;color:#C7D1CE}

/* ---------- DÖNGÜSEL ÜRÜN YAŞAMI ---------- */
.co-sur .sur-dongu{background:#F4F0E8}
.co-sur .sur-dongu-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.co-sur .sur-dongu-kart{background:#fff;border:1px solid var(--line);border-radius:27px;padding:25px}
.co-sur .sur-dongu-kart > span{display:inline-flex;width:44px;height:44px;border-radius:50%;align-items:center;justify-content:center;background:var(--accent);font-weight:700;font-size:14px;color:#171717;margin-bottom:16px}
.co-sur .sur-dongu-kart h3{margin:0 0 8px;font-family:inherit;font-size:19px;font-weight:500;text-transform:none;color:var(--text)}
.co-sur .sur-dongu-kart p{margin:0;font-size:14px;color:var(--muted);line-height:1.6}

/* ---------- VERİ VE ŞEFFAFLIK ---------- */
.co-sur .sur-seffaf-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:22px}
.co-sur .sur-seffaf{background:#fff;border:1px solid var(--line);border-radius:30px;padding:32px}
.co-sur .sur-seffaf h2{margin:0 0 14px;font-family:inherit;font-size:clamp(26px,2.9vw,38px);line-height:1.08;font-weight:500;letter-spacing:-.02em;text-transform:none;color:var(--text)}
.co-sur .sur-seffaf > p{margin:0 0 22px;font-size:15px;color:var(--muted);line-height:1.7}
.co-sur .sur-kontrol{display:grid;gap:12px}
.co-sur .sur-kontrol div{display:flex;align-items:flex-start;gap:12px;padding:13px 0;border-top:1px solid var(--line)}
.co-sur .sur-kontrol div:first-child{border-top:0}
.co-sur .sur-kontrol b{display:inline-flex;width:28px;height:28px;border-radius:50%;background:var(--green-soft);align-items:center;justify-content:center;color:#4F5C4B;flex:0 0 28px;font-size:13px}
.co-sur .sur-kontrol span{font-size:14px;color:#3F4A47;line-height:1.55}
.co-sur .sur-yol{background:#DFDFD6;border-radius:30px;padding:32px;display:flex;flex-direction:column;justify-content:space-between}
.co-sur .sur-yol-yil{font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#6D715E}
.co-sur .sur-yol h3{margin:14px 0 12px;font-family:inherit;font-size:clamp(22px,2.3vw,30px);line-height:1.08;font-weight:500;text-transform:none;color:var(--text)}
.co-sur .sur-yol p{margin:0 0 18px;font-size:14px;color:#56605D;line-height:1.65}
.co-sur .sur-yol-liste{display:grid;gap:10px}
.co-sur .sur-yol-liste span{background:rgba(255,255,255,.62);border:1px solid rgba(255,255,255,.65);padding:14px 16px;border-radius:18px;font-size:13px;color:#3E4946;font-weight:600}

/* ---------- KAPANIŞ ---------- */
.co-sur .sur-cta{border-radius:34px;overflow:hidden;position:relative;min-height:350px;background-image:linear-gradient(90deg,rgba(20,32,30,.92),rgba(20,32,30,.66)),var(--cta-gorsel);background-size:cover;background-position:center;color:#fff;padding:42px;display:flex;align-items:flex-end}
.co-sur .sur-cta h2{margin:0 0 12px;font-family:inherit;font-size:clamp(28px,3.1vw,40px);line-height:1.05;font-weight:500;letter-spacing:-.02em;text-transform:none;color:#fff;max-width:760px}
.co-sur .sur-cta p{margin:0 0 20px;max-width:620px;color:#EBE5DC;font-size:16px;line-height:1.65}

/* ---------- DUYARLI ---------- */
@media(max-width:1180px){
    .co-sur .sur-malzeme-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
    .co-sur .sur-karbon-duzen,.co-sur .sur-seffaf-grid{grid-template-columns:minmax(0,1fr)}
    .co-sur .sur-ilke-grid,.co-sur .sur-dongu-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:760px){
    .co-sur .sur-bolum{padding:56px 20px}
    .co-sur .sur-hero{min-height:560px}
    .co-sur .sur-hero-ic{padding:70px 20px 54px}
    .co-sur .sur-head{display:block}
    .co-sur .sur-head h2{margin-bottom:10px}
    .co-sur .sur-ilke-grid,.co-sur .sur-malzeme-grid,.co-sur .sur-dongu-grid,.co-sur .sur-karbon-grid{grid-template-columns:minmax(0,1fr)}
    .co-sur .sur-malzeme{min-height:auto}
    .co-sur .sur-karbon-intro{min-height:auto}
    .co-sur .sur-seffaf,.co-sur .sur-yol{padding:24px;border-radius:24px}
    .co-sur .sur-cta{padding:28px;border-radius:24px}
}
@media(prefers-reduced-motion:reduce){
    .co-sur .sur-btn{transition:none}
    .co-sur .sur-btn:hover{transform:none}
}