/* İridaa · COP31 destek katmanı — 20 Kasım 2026'ya kadar yayında */

/* ---------- BANNER ---------- */
#cop31-bar{
  flex:none; --c1:#00E58A; --c2:#00F0FF; --c3:#8A2BE2;
  position:relative; display:block; margin:0; padding:0;
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  color:#eaf6f2; text-decoration:none; isolation:isolate;
  border-bottom:1px solid rgba(0,229,138,.22);
  background:linear-gradient(100deg,#04120d 0%,#041a18 40%,#0a0a18 100%);
  overflow:hidden;
}
#cop31-bar::before{
  content:""; position:absolute; inset:-60% -20%; z-index:0; pointer-events:none;
  background:conic-gradient(from 0deg,rgba(0,229,138,.28),rgba(0,240,255,.30),rgba(138,43,226,.26),rgba(0,229,138,.28));
  filter:blur(46px); opacity:.55;
  animation:cop31-aurora 18s linear infinite;
}
@keyframes cop31-aurora{to{transform:rotate(360deg)}}
#cop31-bar .cb-in{
  position:relative; z-index:1; max-width:1080px; margin:0 auto;
  display:flex; align-items:center; gap:11px; padding:9px 15px;
  font-size:12.5px; line-height:1.35;
}
#cop31-bar .cb-globe{
  flex:none; width:26px; height:26px; border-radius:50%; display:grid; place-items:center;
  color:#7cf6c8; background:radial-gradient(circle at 32% 28%,rgba(0,240,255,.42),rgba(0,229,138,.14) 60%,transparent 70%);
  box-shadow:0 0 0 1px rgba(0,229,138,.35),0 0 18px rgba(0,229,138,.35);
  animation:cop31-pulse 2.8s ease-in-out infinite;
}
#cop31-bar .cb-globe svg{width:76%; height:76%}
@keyframes cop31-pulse{0%,100%{transform:scale(1);box-shadow:0 0 0 1px rgba(0,229,138,.35),0 0 14px rgba(0,229,138,.28)}50%{transform:scale(1.07);box-shadow:0 0 0 1px rgba(0,240,255,.5),0 0 26px rgba(0,240,255,.42)}}
#cop31-bar .cb-txt{min-width:0; flex:1}
#cop31-bar .cb-txt b{
  font-weight:700; letter-spacing:.01em;
  background:linear-gradient(92deg,#00E58A,#00F0FF 45%,#b7ffdf 70%,#00E58A);
  background-size:220% 100%; -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:cop31-shine 5.5s linear infinite;
}
@keyframes cop31-shine{to{background-position:220% 0}}
#cop31-bar .cb-sub{display:block; font-size:11px; opacity:.62; margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
#cop31-bar .cb-cta{
  flex:none; display:inline-flex; align-items:center; gap:6px;
  font-size:11.5px; font-weight:600; padding:5px 11px; border-radius:999px;
  color:#03130d; background:linear-gradient(100deg,#00E58A,#00F0FF);
  box-shadow:0 6px 22px rgba(0,229,138,.28); transition:.18s; white-space:nowrap;
}
#cop31-bar:hover .cb-cta{transform:translateY(-1px); box-shadow:0 9px 28px rgba(0,240,255,.42)}
#cop31-bar .cb-x{
  flex:none; width:22px; height:22px; border-radius:50%; border:0; cursor:pointer;
  background:rgba(255,255,255,.06); color:#9fb6b0; font-size:11px; line-height:1;
  display:grid; place-items:center; font-family:inherit; transition:.15s;
}
#cop31-bar .cb-x:hover{background:rgba(255,255,255,.14); color:#fff}
#cop31-bar .cb-spark{
  position:absolute; width:3px; height:3px; border-radius:50%; background:#b7ffdf; opacity:0;
  animation:cop31-spark 7s linear infinite; pointer-events:none; z-index:0;
}
@keyframes cop31-spark{
  0%{opacity:0; transform:translateY(14px) scale(.6)}
  12%{opacity:.85}
  70%{opacity:.5}
  100%{opacity:0; transform:translateY(-26px) scale(1.15)}
}
@media (max-width:640px){
  #cop31-bar .cb-in{padding:8px 11px; gap:8px; font-size:11.5px}
  #cop31-bar .cb-sub{display:none}
  #cop31-bar .cb-cta{font-size:10.5px; padding:4px 9px}
  #cop31-bar .cb-globe{width:22px; height:22px}
  #cop31-bar .cb-globe svg{width:80%; height:80%}
}

/* ---------- SAYFA ---------- */
body.cop31-page{
  margin:0; background:#040608; color:#eaf3f1; overflow-x:hidden;
  font-family:'Inter',system-ui,-apple-system,sans-serif; -webkit-font-smoothing:antialiased;
}
body.cop31-page *{box-sizing:border-box}
.c31-mono{font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace}
.c31-wrap{max-width:1060px; margin:0 auto; padding:0 20px}

.c31-nav{position:sticky; top:0; z-index:50; backdrop-filter:blur(14px); background:rgba(4,8,10,.72); border-bottom:1px solid rgba(255,255,255,.06)}
.c31-nav .in{max-width:1060px; margin:0 auto; padding:11px 20px; display:flex; align-items:center; gap:14px}
.c31-nav img{height:26px; width:auto}
.c31-nav .sp{flex:1}
.c31-nav a.l{font-size:12px; color:#93a8a3; text-decoration:none; padding:6px 10px; border-radius:9px; transition:.15s}
.c31-nav a.l:hover{color:#eaf3f1; background:rgba(255,255,255,.06)}
.c31-nav a.l.on{color:#00E58A}

.c31-hero{position:relative; padding:64px 0 52px; overflow:hidden; text-align:center}
.c31-hero::before{
  content:""; position:absolute; left:50%; top:-320px; width:900px; height:900px; transform:translateX(-50%);
  background:radial-gradient(circle,rgba(0,229,138,.20),rgba(0,240,255,.10) 38%,transparent 64%);
  filter:blur(12px); animation:c31-breathe 9s ease-in-out infinite; pointer-events:none;
}
@keyframes c31-breathe{0%,100%{opacity:.75; transform:translateX(-50%) scale(1)}50%{opacity:1; transform:translateX(-50%) scale(1.08)}}

.c31-orb{position:relative; width:184px; height:184px; margin:0 auto 26px}
.c31-orb .ring{position:absolute; inset:0; border-radius:50%; border:1px solid rgba(0,229,138,.22)}
.c31-orb .ring.r2{inset:-17px; border-color:rgba(0,240,255,.14); border-style:dashed; animation:c31-spin 34s linear infinite}
.c31-orb .ring.r3{inset:-36px; border-color:rgba(138,43,226,.16); animation:c31-spin 52s linear infinite reverse}
@keyframes c31-spin{to{transform:rotate(360deg)}}
.c31-orb .core{
  position:absolute; inset:14px; border-radius:50%; display:grid; place-items:center; color:#7cf6c8;
  background:radial-gradient(circle at 34% 26%,rgba(0,240,255,.30),rgba(0,229,138,.12) 55%,rgba(4,8,10,.9) 72%);
  box-shadow:inset 0 0 44px rgba(0,229,138,.35),0 0 70px rgba(0,240,255,.22);
  animation:c31-float 6s ease-in-out infinite;
}
.c31-orb .core svg{width:58%; height:58%; filter:drop-shadow(0 0 12px rgba(0,240,255,.55)); animation:c31-globe 24s linear infinite}
@keyframes c31-globe{to{transform:rotate(360deg)}}
@keyframes c31-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.c31-orb .sat{position:absolute; width:7px; height:7px; border-radius:50%; background:#00F0FF; box-shadow:0 0 12px #00F0FF; top:-3px; left:calc(50% - 3px); transform-origin:3px 95px}
.c31-orb .sat.s1{animation:c31-orbit 7s linear infinite}
.c31-orb .sat.s2{background:#00E58A; box-shadow:0 0 12px #00E58A; animation:c31-orbit 11s linear infinite reverse; transform-origin:3px 112px}
@keyframes c31-orbit{to{transform:rotate(360deg)}}

.c31-tag{display:inline-flex; align-items:center; gap:7px; font-size:10.5px; letter-spacing:.22em; text-transform:uppercase; color:#00E58A; border:1px solid rgba(0,229,138,.32); background:rgba(0,229,138,.07); padding:5px 12px; border-radius:999px; margin-bottom:16px}
.c31-tag i{width:6px; height:6px; border-radius:50%; background:#00E58A; animation:c31-live 1.6s ease-in-out infinite}
@keyframes c31-live{0%,100%{opacity:1; transform:scale(1)}50%{opacity:.35; transform:scale(.72)}}

.c31-h1{font-size:clamp(30px,6.2vw,54px); line-height:1.05; font-weight:800; letter-spacing:-.035em; margin:0 0 16px}
.c31-h1 span{background:linear-gradient(96deg,#00E58A,#00F0FF 52%,#c8ffe9); -webkit-background-clip:text; background-clip:text; color:transparent}
.c31-lead{font-size:15px; line-height:1.72; color:#a5bab5; max-width:620px; margin:0 auto 26px}

.c31-count{display:flex; justify-content:center; gap:9px; flex-wrap:wrap; margin-bottom:26px}
.c31-count .u{min-width:66px; padding:9px 12px; border-radius:13px; background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.08)}
.c31-count .u b{display:block; font-size:21px; font-weight:700; letter-spacing:-.02em; color:#fff; font-variant-numeric:tabular-nums}
.c31-count .u i{font-style:normal; font-size:9px; letter-spacing:.18em; text-transform:uppercase; color:#7d9691}

.c31-btns{display:flex; gap:10px; justify-content:center; flex-wrap:wrap}
.c31-btn{display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:600; padding:11px 20px; border-radius:12px; text-decoration:none; transition:.18s}
.c31-btn.p{background:linear-gradient(100deg,#00E58A,#00F0FF); color:#03130d; box-shadow:0 10px 32px rgba(0,229,138,.3)}
.c31-btn.p:hover{transform:translateY(-2px); box-shadow:0 14px 40px rgba(0,240,255,.42)}
.c31-btn.g{border:1px solid rgba(255,255,255,.12); color:#cfe2dd; background:rgba(255,255,255,.03)}
.c31-btn.g:hover{border-color:rgba(0,229,138,.45); color:#fff; background:rgba(0,229,138,.08)}

.c31-sec{padding:56px 0}
.c31-sec.hd{border-top:1px solid rgba(255,255,255,.06)}
.c31-k{font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:#00E58A; opacity:.9; margin-bottom:9px}
.c31-h2{font-size:clamp(21px,3.4vw,30px); font-weight:750; letter-spacing:-.025em; margin:0 0 12px; line-height:1.22}
.c31-p{font-size:13.5px; line-height:1.78; color:#9fb4af; margin:0 0 10px; max-width:760px}

.c31-grid{display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(248px,1fr)); margin-top:24px}
.c31-card{position:relative; padding:19px; border-radius:16px; background:linear-gradient(160deg,rgba(255,255,255,.045),rgba(255,255,255,.012)); border:1px solid rgba(255,255,255,.07); overflow:hidden; transition:.22s}
.c31-card:hover{border-color:rgba(0,229,138,.4); transform:translateY(-3px); box-shadow:0 18px 44px rgba(0,0,0,.45)}
.c31-card::after{content:""; position:absolute; left:0; top:0; width:100%; height:2px; background:linear-gradient(90deg,transparent,#00E58A,transparent); opacity:0; transition:.25s}
.c31-card:hover::after{opacity:.9}
.c31-card .ic{font-size:20px; margin-bottom:9px; display:block}
.c31-card h3{font-size:14px; font-weight:650; margin:0 0 7px; letter-spacing:-.01em}
.c31-card p{font-size:12px; line-height:1.68; color:#93a8a3; margin:0}
.c31-card .mt{display:inline-block; margin-top:10px; font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:#00E58A; border:1px solid rgba(0,229,138,.28); border-radius:5px; padding:2px 6px}

.c31-pledges{margin-top:22px; display:grid; gap:9px}
.c31-pledge{display:flex; gap:13px; padding:15px 16px; border-radius:14px; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.065); transition:.2s}
.c31-pledge:hover{background:rgba(0,229,138,.055); border-color:rgba(0,229,138,.28)}
.c31-pledge .n{flex:none; width:26px; height:26px; border-radius:8px; display:grid; place-items:center; font-size:11px; font-weight:700; color:#03130d; background:linear-gradient(120deg,#00E58A,#00F0FF)}
.c31-pledge b{display:block; font-size:13px; font-weight:640; margin-bottom:3px}
.c31-pledge span.t{font-size:12px; line-height:1.7; color:#93a8a3; display:block}

.c31-tl{margin-top:26px; position:relative; padding-left:22px}
.c31-tl::before{content:""; position:absolute; left:6px; top:6px; bottom:6px; width:1px; background:linear-gradient(180deg,#00E58A,rgba(0,240,255,.35),transparent)}
.c31-tl .it{position:relative; padding:0 0 20px 4px}
.c31-tl .it::before{content:""; position:absolute; left:-20px; top:5px; width:9px; height:9px; border-radius:50%; background:#040608; border:2px solid #00E58A}
.c31-tl .it.now::before{background:#00E58A; box-shadow:0 0 12px rgba(0,229,138,.9); animation:c31-live 2s ease-in-out infinite}
.c31-tl .yr{font-size:10px; letter-spacing:.18em; color:#00E58A; margin-bottom:4px}
.c31-tl .h{font-size:13px; font-weight:620; margin-bottom:3px}
.c31-tl .d{font-size:12px; line-height:1.65; color:#8fa5a0; max-width:620px}

.c31-quote{margin:44px 0 0; padding:24px 26px; border-radius:18px; border:1px solid rgba(0,229,138,.22); background:linear-gradient(140deg,rgba(0,229,138,.09),rgba(0,240,255,.03)); position:relative}
.c31-quote p{font-size:15px; line-height:1.8; color:#e2f4ee; margin:0 0 12px; font-weight:400}
.c31-quote .who{font-size:11.5px; color:#8fa5a0; letter-spacing:.04em}

.c31-foot{padding:34px 0 60px; border-top:1px solid rgba(255,255,255,.06); margin-top:40px}
.c31-foot .in{display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between; font-size:11.5px; color:#788d88}
.c31-foot a{color:#93a8a3; text-decoration:none}
.c31-foot a:hover{color:#00E58A}
.c31-exp{display:inline-flex; align-items:center; gap:6px; font-size:10.5px; color:#7d9691; border:1px dashed rgba(255,255,255,.14); padding:3px 9px; border-radius:999px}
@media (max-width:640px){
  .c31-hero{padding:40px 0 36px}
  .c31-orb{width:140px; height:140px}
  .c31-orb .core svg{width:56%; height:56%}
  .c31-orb .sat{transform-origin:3px 73px}
  .c31-orb .sat.s2{transform-origin:3px 88px}
  .c31-sec{padding:40px 0}
  .c31-wrap{padding:0 15px}
  .c31-nav .in{padding:9px 14px}
  .c31-nav a.l{padding:6px 7px; font-size:11.5px}
}