:root{
  --bg:#f5faf4;
  --bg-2:#eef7fb;
  --paper:#fffdf7;
  --paper-2:#ffffff;
  --ink:#263238;
  --muted:#617174;
  --green:#4caf72;
  --green-dark:#2f7d51;
  --blue:#4d97cf;
  --blue-soft:#dff1ff;
  --mint:#dff6e7;
  --yellow:#ffd166;
  --orange:#f28b66;
  --pink:#f7d7d0;
  --lav:#efe9ff;
  --line:#dbe8dc;
  --shadow:0 14px 30px rgba(40,77,58,.10);
  --radius:24px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Arial, Helvetica, sans-serif;
  color:var(--ink);
  background:
    radial-gradient(circle at 8% 10%, rgba(255,209,102,.22), transparent 22%),
    radial-gradient(circle at 86% 4%, rgba(77,151,207,.18), transparent 24%),
    linear-gradient(180deg,var(--bg),var(--bg-2));
  line-height:1.65;
}

img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
.container{width:min(1120px,92%); margin:auto}

.topbar{
  position:sticky; top:0; z-index:50;
  background:rgba(255,253,247,.88);
  border-bottom:1px solid rgba(219,232,220,.9);
  backdrop-filter:blur(10px);
}
.nav{display:flex; align-items:center; justify-content:space-between; min-height:74px; gap:16px; position:relative}
.logo{display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:.2px}
.logo-mark{width:42px; height:42px; border-radius:15px; display:grid; place-items:center; background:linear-gradient(135deg,var(--green),var(--blue)); color:white; box-shadow:var(--shadow)}
.logo span:last-child{font-size:1.03rem}
.nav-links{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.nav-links a{padding:10px 13px; border-radius:999px; color:#38505a; font-weight:700; font-size:.95rem}
.nav-links a:hover,.nav-links a.active{background:var(--mint); color:var(--green-dark)}
.menu-btn{display:none; border:0; background:var(--mint); border-radius:14px; padding:10px 13px; font-weight:800; cursor:pointer}

.hero{padding:66px 0 42px}
.hero-grid{display:grid; grid-template-columns:1.1fr .9fr; align-items:center; gap:36px}
.kicker{display:inline-flex; align-items:center; gap:8px; background:var(--paper); border:1px solid var(--line); padding:7px 12px; border-radius:999px; color:var(--green-dark); font-weight:800; box-shadow:0 8px 20px rgba(40,77,58,.06)}
h1{font-size:clamp(2.1rem,5vw,4.5rem); line-height:1.05; margin:18px 0 16px; letter-spacing:-1.2px}
h2{font-size:clamp(1.65rem,3.4vw,2.55rem); line-height:1.15; margin:0 0 14px}
h3{font-size:1.25rem; margin:0 0 8px}
p{margin:0 0 14px}.lead{font-size:1.12rem; color:#506468; max-width:740px}.muted{color:var(--muted)}
.hero-actions{display:flex; flex-wrap:wrap; gap:12px; margin-top:24px}.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; border-radius:17px; padding:12px 18px; font-weight:800; border:1px solid var(--line); background:var(--paper); cursor:pointer}.btn.primary{background:linear-gradient(135deg,var(--green),#75c98c); color:white; border:0}.btn.blue{background:var(--blue-soft); color:#276184}.btn:hover{transform:translateY(-1px)}
.hero-card{position:relative; background:rgba(255,255,255,.74); border:1px solid var(--line); border-radius:32px; padding:20px; box-shadow:var(--shadow)}
.hero-card img{border-radius:24px}.note{background:#fff8dc; border:1px dashed #e4ba4d; padding:14px 16px; border-radius:18px; font-weight:700; color:#6a5524}.floating-note{position:absolute; right:18px; bottom:18px; width:min(250px,72%)}

.section{padding:46px 0}.section.soft{background:rgba(255,255,255,.38); border-top:1px solid rgba(219,232,220,.55); border-bottom:1px solid rgba(219,232,220,.55)}
.section-head{display:flex; align-items:end; justify-content:space-between; gap:20px; margin-bottom:22px}.section-head p{max-width:720px}.center{text-align:center}.center p{margin-left:auto; margin-right:auto}
.grid{display:grid; gap:18px}.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.card{background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:22px; box-shadow:0 10px 25px rgba(40,77,58,.06)}
.card:hover{box-shadow:var(--shadow)}
.card img.icon-img{height:132px; width:100%; object-fit:contain; margin:4px auto 12px}.mini-icon{width:54px; height:54px; border-radius:17px; display:grid; place-items:center; background:var(--mint); font-size:1.7rem; margin-bottom:12px}
.tag-row{display:flex; flex-wrap:wrap; gap:8px; margin-top:12px}.tag{display:inline-flex; padding:6px 10px; border-radius:999px; background:var(--mint); color:var(--green-dark); font-weight:800; font-size:.85rem}.tag.blue{background:var(--blue-soft); color:#276184}.tag.yellow{background:#fff0c3; color:#7b5a00}.tag.pink{background:var(--pink); color:#944f41}.tag.lav{background:var(--lav); color:#6656aa}

.page-header{padding:58px 0 28px}.page-title-card{background:rgba(255,253,247,.82); border:1px solid var(--line); border-radius:34px; padding:32px; box-shadow:var(--shadow); display:grid; grid-template-columns:1.15fr .85fr; align-items:center; gap:28px}.page-title-card img{max-height:260px; margin:auto}
.breadcrumb{font-weight:800; color:var(--green-dark); margin-bottom:10px}

.info-band{display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px}.info-pill{background:var(--paper); border:1px solid var(--line); border-radius:22px; padding:18px; display:flex; gap:12px; align-items:flex-start}.info-pill strong{display:block; margin-bottom:3px}.dot{width:14px; height:14px; flex:0 0 14px; border-radius:50%; margin-top:7px; background:var(--green)}.dot.blue{background:var(--blue)}.dot.orange{background:var(--orange)}

.problem-card{display:grid; grid-template-columns:180px 1fr; gap:20px; align-items:center; padding:22px}.problem-card img{height:150px; object-fit:contain}.problem-card .columns{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:12px}.tiny-box{background:#f6fbf7; border:1px solid var(--line); border-radius:18px; padding:13px}.tiny-box b{display:block; color:var(--green-dark); margin-bottom:4px}

.split{display:grid; grid-template-columns:.95fr 1.05fr; gap:22px; align-items:center}.split img{max-height:330px; margin:auto}.list-clean{list-style:none; padding:0; margin:0; display:grid; gap:10px}.list-clean li{background:#f8fbf8; border:1px solid var(--line); border-radius:16px; padding:12px 14px}.list-clean li::before{content:'✓'; color:var(--green-dark); font-weight:900; margin-right:8px}
.list-dash{list-style:none; padding:0; margin:0; display:grid; gap:10px}.list-dash li{padding-left:18px; position:relative}.list-dash li::before{content:'•'; position:absolute; left:0; top:0; color:var(--blue); font-size:1.2rem}

.flow{display:flex; gap:10px; flex-wrap:wrap; align-items:center}.flow-step{background:var(--paper); border:1px solid var(--line); border-radius:18px; padding:13px 15px; font-weight:800}.arrow{font-weight:900; color:var(--green-dark)}

.recycle-grid{display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:12px}.bin{border-radius:22px; padding:18px 12px; background:var(--paper); border:1px solid var(--line); text-align:center}.bin .bin-icon{font-size:2rem; margin-bottom:6px}.bin strong{display:block}.bin small{color:var(--muted)}

.timeline{position:relative; display:grid; gap:14px}.timeline-item{display:grid; grid-template-columns:90px 1fr; gap:14px; align-items:start}.day{background:linear-gradient(135deg,var(--green),var(--blue)); color:white; border-radius:18px; text-align:center; padding:12px 8px; font-weight:900}.timeline-item .card{padding:17px}

.glossary{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px}.term{background:var(--paper); border:1px solid var(--line); border-radius:20px; padding:17px}.term b{color:var(--green-dark)}

.fact-box{background:linear-gradient(135deg,#e9f8ef,#e5f3ff); border:1px solid var(--line); border-radius:26px; padding:24px}.fact-box strong{color:var(--green-dark)}
.warning-box{background:#fff4e8; border:1px solid #f2c49b; border-radius:24px; padding:22px}.blue-box{background:#eaf6ff; border:1px solid #c9e7fb; border-radius:24px; padding:22px}.green-box{background:#eaf8ef; border:1px solid #c7ead3; border-radius:24px; padding:22px}.lav-box{background:#f3efff; border:1px solid #d9cffb; border-radius:24px; padding:22px}

.gallery-strip{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px}.photo-card{background:var(--paper); border:1px solid var(--line); border-radius:25px; overflow:hidden; box-shadow:0 10px 25px rgba(40,77,58,.06)}.photo-card img{height:190px; width:100%; object-fit:cover; background:#eef7fb}.photo-card div{padding:16px}

.stats-row{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin-top:22px}.stat-card{background:rgba(255,255,255,.7); border:1px solid var(--line); border-radius:24px; padding:18px; text-align:center}.stat-card b{display:block; font-size:1.7rem; color:var(--green-dark); margin-bottom:4px}.stat-card small{color:var(--muted); display:block}

.trend-card{display:flex; flex-direction:column; gap:8px}.trend-card .tag{width:max-content}.trend-card img{height:130px; object-fit:contain; background:#f2fbf3; border-radius:18px; padding:12px; border:1px dashed var(--line)}
.issue-list{display:grid; gap:12px}
.issue-point{display:grid; grid-template-columns:72px 1fr; gap:14px; align-items:center; padding:14px; border-radius:20px; background:var(--paper); border:1px solid var(--line)}
.issue-point img{width:72px; height:72px; object-fit:contain; background:#f7fbff; border-radius:18px; padding:10px}

.comparison-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px}
.comparison-card{background:var(--paper); border:1px solid var(--line); border-radius:26px; overflow:hidden; box-shadow:0 10px 25px rgba(40,77,58,.06)}
.comparison-card img{width:100%; height:250px; object-fit:cover; background:#eef7fb}
.compare-top{display:flex; justify-content:space-between; padding:14px 16px 0; gap:10px}
.badge{display:inline-flex; align-items:center; gap:8px; padding:7px 12px; border-radius:999px; font-weight:800; font-size:.85rem}
.badge.before{background:#ffe6df; color:#9a4c35}
.badge.after{background:#e2f8ea; color:#2f7d51}
.comparison-body{padding:16px}
.compare-columns{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:14px}
.compare-box{border-radius:18px; padding:14px; border:1px solid var(--line)}
.compare-box h4{margin:0 0 8px; font-size:1rem}
.compare-box.before{background:#fff6f1}
.compare-box.after{background:#f2fbf4}

.dual-panel{display:grid; grid-template-columns:1fr 1fr; gap:18px}
.panel{background:var(--paper); border:1px solid var(--line); border-radius:24px; padding:18px}
.panel img{height:180px; width:100%; object-fit:contain; margin-bottom:10px}
.panel.before{background:linear-gradient(180deg,#fff7f2,#fffdf7)}
.panel.after{background:linear-gradient(180deg,#effcf4,#fffdf7)}

.quote-card{padding:24px; border-radius:28px; background:linear-gradient(135deg,#e9f8ef,#fff8dc); border:1px solid var(--line)}

.footer{margin-top:46px; background:#263238; color:#eaf8ef; padding:32px 0}.footer-grid{display:grid; grid-template-columns:1fr auto; gap:20px; align-items:center}.footer a{color:#b9e7c7; font-weight:800}.small{font-size:.9rem;color:#b8c7ca}

.progress{position:fixed; left:0; top:0; height:4px; background:linear-gradient(90deg,var(--green),var(--blue),var(--yellow)); width:0; z-index:100}
.backtop{position:fixed; right:18px; bottom:18px; width:46px; height:46px; border:0; border-radius:16px; background:var(--green-dark); color:white; font-weight:900; cursor:pointer; display:none; box-shadow:var(--shadow)}.backtop.show{display:block}

@media (max-width:900px){
  .hero-grid,.page-title-card,.split{grid-template-columns:1fr}.page-title-card{padding:24px}.floating-note{position:static; margin-top:12px; width:100%}.grid-4,.grid-3,.stats-row{grid-template-columns:repeat(2,minmax(0,1fr))}.info-band,.comparison-grid,.dual-panel{grid-template-columns:1fr}.problem-card{grid-template-columns:1fr}.problem-card img{margin:auto}.problem-card .columns,.compare-columns{grid-template-columns:1fr}.recycle-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.gallery-strip{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr}.section-head{display:block}
}
@media (max-width:700px){
  .menu-btn{display:inline-flex}.nav-links{display:none; position:absolute; left:4%; right:4%; top:74px; background:var(--paper); border:1px solid var(--line); border-radius:22px; padding:12px; box-shadow:var(--shadow)}.nav-links.open{display:grid}.nav-links a{width:100%}.hero{padding-top:38px}.grid-2,.grid-3,.grid-4,.glossary,.stats-row{grid-template-columns:1fr}.recycle-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.timeline-item{grid-template-columns:1fr}.page-header{padding-top:34px} h1{font-size:2.45rem}.issue-point{grid-template-columns:1fr}
}


/* Gerçek fotoğraflı önce/sonra bölümü */
.photo-pair{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:14px 0 8px}
.compare-photo{position:relative;border-radius:18px;overflow:hidden;border:1px solid var(--line);background:#eef7fb}
.compare-photo img{width:100%;height:240px;object-fit:cover;display:block}
.compare-photo span{position:absolute;left:10px;top:10px;padding:6px 11px;border-radius:999px;font-size:.82rem;font-weight:800;background:rgba(255,255,255,.92);color:#31474c;box-shadow:0 5px 14px rgba(0,0,0,.08)}
.credit{font-size:.83rem;color:var(--muted);margin-top:10px;line-height:1.45}
.mini-note{background:#fffdf7;border:1px dashed var(--line);border-radius:18px;padding:14px 16px;color:#5a686b}
@media (max-width:700px){.photo-pair{grid-template-columns:1fr}.compare-photo img{height:220px}}