/* Etkimiz — Türkiye haritası ve toplamlar. Renkler styles.css'teki değişkenlerden gelir. */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---- Hero (Etkimiz) ---- */
.eh{padding:28px 0 0}
.eh-grid{display:grid;grid-template-columns:minmax(0,52fr) minmax(0,48fr);gap:12px;align-items:center}
.eh h1{font-size:var(--t-h1-sub);line-height:var(--t-h1-lh);letter-spacing:var(--t-h1-ls);font-weight:800;color:var(--green-d);max-width:none}
.eh h1 span,.eh h1 em{display:block}
.eh h1 em{font-style:normal;color:var(--orange)}
.eh-lead{margin:0;max-width:500px;font-size:var(--t-lead-sub);line-height:1.5;color:var(--ink-2)}
.eh-art{position:relative;margin-bottom:0}
.eh-art>img{display:block;width:100%;height:auto;object-fit:contain}

/* ---- Toplamlar ---- */
.eb{padding-top:4px;padding-bottom:20px}
.eb-box{position:relative;margin-top:20px;padding:22px 24px 24px;border-radius:16px;background:linear-gradient(90deg,#E8F2EA,#F3F6EA 70%,#F8F5EA);border:1px solid #DDEAE0}
.eb-tag{display:inline-block;padding:3px 12px;border-radius:999px;background:var(--green-d);color:#fff;font-size:var(--t-label);font-weight:800;letter-spacing:var(--t-label-ls);text-transform:uppercase}
.eb-box h2,.eb-box h3{margin:10px 0 16px;font-size:var(--t-h2-card);line-height:1.15;font-weight:800;color:var(--green-d)}
.eb-eq{margin-top:12px;padding-bottom:18px}
.eb-box+.eb-box{margin-top:12px}
.eb-eq h2{margin:0 0 4px}
.eq-lead{margin:0 0 14px;font-size:var(--t-small);color:var(--ink-2)}
.eq-lead b{color:var(--green-d);font-weight:800}
.eq-leaves{position:absolute;right:20px;top:10px;width:84px;height:auto;pointer-events:none}
.eq-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.eq{display:flex;align-items:center;gap:14px;padding:4px 16px}
.eq+.eq{border-left:1px solid rgba(15,85,51,.14)}
.eq:first-child{padding-left:0}
.eq-i{display:grid;place-items:center;flex:none;width:64px;height:64px;border-radius:999px;background:#FEF9ED}
.eq-i img{display:block;width:100%;height:100%}
.eq-i svg{width:36px;height:36px}
.eq b{display:block;font-size:clamp(22px,2.4vw,28px);line-height:1.1;font-weight:800;color:var(--green-d);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.eq div>span{display:block;margin-top:2px;color:var(--ink-2);font-size:14px;line-height:1.3}
.eq-note{margin:14px 0 0;font-size:12.5px;color:var(--muted)}
.totals{display:grid;gap:14px;grid-template-columns:repeat(4,minmax(0,1fr))}
.tile{display:flex;align-items:center;gap:14px;min-height:96px;padding:12px 16px;background:#FFFDF8;border:1px solid var(--line);border-radius:12px}
.tile-i{display:grid;place-items:center;flex:none;width:56px;height:56px;border-radius:999px;background:#DCEBE2;color:var(--green-d)}
.tile-i svg{width:30px;height:30px}
.tile-i.o{background:#FCE3C8;color:#B8742F}
.tile b{display:block;font-size:clamp(24px,2.4vw,30px);line-height:1.1;font-weight:800;color:var(--green-d);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.tile.co2 b{color:var(--green-d)}
.tile div>span{display:block;margin-top:4px;color:var(--ink-2);font-size:14px;line-height:1.3}
.stamp{margin:14px 0 0;color:var(--muted);font-size:14px}

/* ---- Harita ---- */
.mapwrap{position:relative;max-width:1000px;margin:0 auto}
.stage{position:relative}
.map{display:block;width:100%;height:auto;overflow:visible}
.il{fill:#E4D9C8;stroke:#FDF7EE;stroke-width:1.1;stroke-linejoin:round;opacity:0;cursor:default;transition:opacity .7s ease var(--d,0s),fill .25s ease}
.map.in .il{opacity:1}
.il.on{fill:var(--green);fill-opacity:var(--i,.7);cursor:pointer}
.il.on:hover,.il.on:focus-visible{fill-opacity:1;stroke:var(--orange);stroke-width:1.6;outline:none}
.il.sel{fill-opacity:1;stroke:var(--orange);stroke-width:1.8}
.map.in .il.on{animation:breathe 5s ease-in-out 1.2s infinite}
@keyframes breathe{50%{fill-opacity:calc(var(--i,.7) * .82)}}
.il.sel,.il.on:hover{animation:none!important}

.pin{position:absolute;left:0;top:0;width:0;height:0;pointer-events:none;z-index:2}
.pin:not(.placed){visibility:hidden}
.pin svg{max-width:none;position:absolute;left:-17px;top:-42px;width:34px;height:42px;overflow:visible;filter:drop-shadow(0 3px 3px rgba(20,24,28,.28))}
.pin.drop svg{animation:drop .75s cubic-bezier(.3,1.5,.5,1) both}
@keyframes drop{0%{transform:translateY(-70px);opacity:0}55%{opacity:1}100%{transform:none}}
.pin i{position:absolute;left:-14px;top:-7px;width:28px;height:14px;border-radius:50%;background:rgba(255,122,0,.38);opacity:0}
.pin.drop i{animation:ripple 1.6s ease-out .55s infinite}
@keyframes ripple{0%{transform:scale(.3);opacity:.9}100%{transform:scale(2.6);opacity:0}}

.pop{position:absolute;z-index:3;width:min(320px,calc(100% - 16px));background:#fff;border-radius:22px;padding:14px;box-shadow:0 18px 40px -12px rgba(20,24,28,.38),0 2px 8px rgba(20,24,28,.08);pointer-events:none;transform-origin:var(--ax,50%) 100%;opacity:0}
.pop.show{opacity:1;animation:popin .38s cubic-bezier(.2,1.3,.4,1) both}
@keyframes popin{from{transform:scale(.82) translateY(10px);opacity:0}to{transform:none;opacity:1}}
.pop::after{content:"";position:absolute;bottom:-9px;left:var(--ax,50%);width:18px;height:18px;margin-left:-9px;background:#fff;transform:rotate(45deg);border-radius:3px;box-shadow:3px 3px 6px rgba(20,24,28,.06)}
.pop.below::after{bottom:auto;top:-9px;box-shadow:-3px -3px 6px rgba(20,24,28,.05)}
.pop h3{margin:0 0 10px;font-size:15px;font-weight:800;color:var(--ink);letter-spacing:.01em}
.pop .g{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pop .c{background:var(--cream);border:1px solid var(--line);border-radius:14px;padding:10px 12px}
.pop .c b{display:block;font-size:22px;line-height:1.15;font-weight:800;color:var(--green);font-variant-numeric:tabular-nums}
.pop .c.o b{color:var(--orange-t)}
.pop .c span{display:block;margin-top:2px;color:var(--ink-2);font-size:12.5px;line-height:1.3}
.pop .c u{display:block;text-decoration:none;font-size:15px;font-weight:800;color:var(--green);line-height:1.35}

.empty{margin:0 auto;max-width:36em;text-align:center;color:var(--ink-2)}

/* ---- İllere göre ---- */
.rank{list-style:none;margin:0;padding:0;display:grid;gap:12px;max-width:46em}
.rank li{display:grid;grid-template-columns:7.5em 1fr auto;gap:12px;align-items:center}
.rank .meter{height:12px;border-radius:999px;background:var(--subtle);overflow:hidden}
.rank .meter i{display:block;height:100%;width:0;border-radius:999px;background:var(--green);transition:width 1.1s cubic-bezier(.2,.8,.2,1) var(--d,0s)}
.rank.in .meter i{width:var(--w,0%)}
.rank b{font-variant-numeric:tabular-nums;color:var(--ink)}
.rank button{all:unset;cursor:pointer;color:var(--ink);font-weight:700}
.rank button:focus-visible{outline:2px solid var(--orange);outline-offset:3px;border-radius:6px}

/* Telefonda harita küçük: kart haritanın üstünde süzülmez, altında yerini alır. */
@media (max-width:720px){
  .pop{position:relative!important;left:auto!important;top:auto!important;width:100%;margin-top:14px;pointer-events:auto;transform-origin:50% 0}
  .pop::after{display:none}
}
@media (max-width:980px){.totals{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:980px){.eq-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 0}.eq:nth-child(odd){border-left:0;padding-left:0}.eq:nth-child(3){padding-left:0}}
@media (max-width:860px){.eh-grid{grid-template-columns:minmax(0,1fr)}.eh-art{max-width:560px;margin:12px auto 0}}
@media (max-width:820px){.eq-leaves{width:60px;right:14px;top:12px}.eh-grid{grid-template-columns:minmax(0,1fr)}.eh-art{max-width:560px;margin:12px auto 0}}
@media (max-width:560px){.eq{gap:10px;padding:4px 10px}.eq-i{width:52px;height:52px}.eq-i svg{width:28px;height:28px}.eq div>span{font-size:13px}}
@media (max-width:420px){.rank li{grid-template-columns:6em 1fr auto}.tile{padding:10px 10px;gap:8px}.tile-i{width:40px;height:40px}.tile-i svg{width:22px;height:22px}.eb-box{padding:18px 14px}}
@media (prefers-reduced-motion:reduce){
  .il,.il.on{transition:none;animation:none!important;opacity:1}
  .pin.drop svg,.pin.drop i,.pop.show{animation:none}
  .pin i{display:none}
  .rank .meter i{transition:none}
}

/* Tippziel: der Provinzname in der Rangliste ist ein Knopf, mindestens 44 px hoch. */
.rank button{display:inline-flex;align-items:center;min-height:44px}

/* Erste Karte: gerettete Ware in allen drei Einheiten */
.tile-lines{list-style:none;margin:0;padding:0}
.tile-lines li{font-size:13.5px;line-height:1.25;color:var(--ink-2)}
.tile-lines b{display:inline;font-size:19px;font-weight:800;color:var(--green-d);font-variant-numeric:tabular-nums}
.tile-u div>span{margin-top:4px}

/* Abschnitts-Überschriften unter den Karten: gleiche Stufe wie die Karten-H2 */
#map-h,#rank-h,#nh-h{font-size:var(--t-h2-card)}