body{background:var(--dark-bg,#0c0e14);color:var(--text,#f4f4f7);font-family:Poppins,system-ui,sans-serif}.ref-page{--ref-edge:color-mix(in srgb,var(--text,#fff) 12%,transparent);--ref-muted:var(--muted,#a4a7b6);--ref-accent:var(--accent-color,#ff9c50);max-width:1190px;margin:auto;padding:128px 26px 60px;font-size:13px}.ref-page *{box-sizing:border-box}.ref-page h1,.ref-page h2,.ref-page h3{font-weight:600}.ref-page h2{font-size:20px;letter-spacing:-.5px;margin:10px 0 18px}.ref-page p{color:var(--ref-muted);line-height:1.9}.ref-eyebrow{font-size:9px;font-weight:600;letter-spacing:2px;color:var(--ref-accent);display:flex;gap:10px;align-items:center}.ref-hero{display:grid;grid-template-columns:1.15fr 1fr;gap:55px;align-items:center;padding:48px 40px;border:1px solid var(--ref-edge);border-radius:26px;background:radial-gradient(ellipse at 100% 0,color-mix(in srgb,var(--ref-accent) 12%,transparent),transparent 65%),var(--card-bg,#141720);overflow:hidden}.ref-intro h1{font-size:clamp(29px,3.5vw,44px);line-height:1.3;letter-spacing:-1.5px;margin:22px 0 20px}.ref-intro h1 em{font-style:normal;color:var(--ref-accent)}.ref-intro p{max-width:420px;font-size:12px}.ref-link{color:var(--text,#fff);display:inline-flex;gap:12px;align-items:center;text-decoration:none;font-size:11px;margin-top:14px}.ref-link:hover{color:var(--ref-accent)}.ref-pass{position:relative;background:linear-gradient(135deg,color-mix(in srgb,var(--ref-accent) 13%,transparent),transparent 70%),var(--dark-bg,#0e1018);border:1px solid color-mix(in srgb,var(--ref-accent) 40%,transparent);border-radius:20px;padding:26px;box-shadow:0 20px 45px #0002;animation:ref-enter .6s ease both}.ref-pass-top{display:flex;justify-content:space-between;align-items:center;font-size:9px;letter-spacing:1.2px;color:var(--ref-muted)}.ref-pass-top i{font-size:30px;color:var(--ref-accent)}.ref-id{font-size:clamp(20px,2.4vw,30px);font-weight:600;letter-spacing:-.8px;overflow-wrap:anywhere;margin:26px 0 6px}.ref-pass p{font-size:10px;margin-bottom:20px}.ref-button{border:1px solid transparent;border-radius:10px;background:var(--ref-accent);color:#101014;padding:12px 18px;min-height:44px;display:inline-flex;gap:12px;align-items:center;justify-content:center;font-size:11px;font-weight:600;cursor:pointer;transition:transform .2s,filter .2s;text-decoration:none}.ref-button:hover{filter:brightness(1.1);transform:translateY(-2px);color:#101014}.ref-pass .ref-button{width:100%}.ref-copy-status{display:block;font-size:10px;min-height:16px;margin-top:6px;color:var(--ref-muted)}.ref-pass-bottom{display:flex;justify-content:space-between;align-items:center;border-top:1px dashed var(--ref-edge);padding-top:16px;margin-top:12px}.ref-pass-bottom>span{font-size:8px;letter-spacing:1.1px;color:var(--ref-muted)}.ref-pass-bottom i{font-size:5px;margin-right:5px;color:var(--ref-accent)}.ref-pass-bottom strong{font-size:28px;letter-spacing:-1px;color:var(--ref-accent)}.ref-pass-bottom small{font-size:9px;letter-spacing:1px}.ref-stats{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--ref-edge);border-radius:18px;margin:20px 0;background:var(--card-bg,#141720)}.ref-stats>div{padding:22px 28px}.ref-stats>div+div{border-left:1px solid var(--ref-edge)}.ref-stats span{display:block;font-size:10px;color:var(--ref-muted)}.ref-stats strong{font-size:30px;font-weight:600;display:block;margin-top:4px}.ref-stats small{font-size:11px;font-weight:400;color:var(--ref-muted);margin-left:10px}.ref-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:20px}.ref-panel{border:1px solid var(--ref-edge);border-radius:18px;background:var(--card-bg,#141720);padding:26px}.ref-panel p{font-size:11px}.ref-panel label{display:block;font-size:10px;color:var(--ref-muted);margin:24px 0 9px}.ref-input-row{display:flex;gap:8px}.ref-input-row input{width:0;min-width:0;flex:1;border:1px solid var(--ref-edge);border-radius:10px;background:var(--dark-bg,#0c0e14);color:var(--text,#fff);font:inherit;font-size:12px;padding:12px}.ref-hint{display:block;font-size:9px;color:var(--ref-muted);margin-top:14px}.ref-hint i{margin-right:6px}.ref-how ol{list-style:none;margin:0;padding:0;display:grid;gap:18px}.ref-how li{display:flex;gap:14px}.ref-how li>span{display:grid;place-items:center;flex-shrink:0;width:32px;height:32px;border:1px solid var(--ref-edge);border-radius:10px;color:var(--ref-accent);font-size:10px}.ref-how strong{font-size:11px;font-weight:500}.ref-how p{font-size:10px;margin:4px 0 0}.ref-person{display:flex;align-items:center;gap:12px;margin:18px 0}.ref-person>div{flex:1;min-width:0}.ref-person strong{display:block;overflow-wrap:anywhere}.ref-person small{display:block;font-size:10px;margin-top:5px;color:var(--ref-muted)}.ref-person>i{color:var(--ref-accent)}.ref-panel form>.ref-link{margin-left:16px}.ref-avatar{display:grid;place-items:center;flex-shrink:0;width:42px;height:42px;border-radius:13px;background:color-mix(in srgb,var(--ref-accent) 9%,transparent);color:var(--ref-accent);border:1px solid var(--ref-edge)}.ref-members{margin-top:20px}.ref-section-title{display:flex;justify-content:space-between;align-items:center;gap:14px}.ref-count{padding:6px 10px;border:1px solid var(--ref-edge);border-radius:8px;font-size:10px;color:var(--ref-muted);white-space:nowrap}.ref-empty{text-align:center;padding:35px 16px 28px}.ref-empty>i{font-size:25px;color:var(--ref-accent);opacity:.8}.ref-empty h3{font-size:14px;margin:16px 0 8px}.ref-empty p{font-size:11px;margin:0}.ref-member{display:flex;align-items:center;gap:14px;padding:17px 0;border-top:1px solid var(--ref-edge)}.ref-member-name{flex:1;min-width:0}.ref-member-name strong{display:block;font-size:12px;font-weight:500;overflow-wrap:anywhere}.ref-member-name small{display:block;font-size:9px;margin-top:5px;color:var(--ref-muted)}.ref-earned{font-size:23px;font-weight:600;color:var(--ref-accent);text-align:right;white-space:nowrap}.ref-earned small{display:block;font-size:8px;color:var(--ref-muted);font-weight:400}.ref-rules{margin-top:20px;padding:0}.ref-rules summary{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:19px 24px;list-style:none;cursor:pointer;font-size:11px}.ref-rules summary::-webkit-details-marker{display:none}.ref-rules p{padding:0 24px 22px;margin:0}.ref-rules[open] summary i{transform:rotate(45deg)}.ref-pagination{display:flex;justify-content:center;gap:22px;padding-top:20px;font-size:11px}.ref-pagination a{color:var(--ref-accent)}.ref-notice{padding:16px 20px;border:1px solid var(--ref-accent);border-radius:12px;margin-bottom:20px;background:var(--card-bg,#141720)}.ref-page :is(button,a,input,summary):focus-visible{outline:2px solid var(--ref-accent);outline-offset:4px}@keyframes ref-enter{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@media(max-width:800px){.ref-page{padding:110px 16px 40px}.ref-hero{grid-template-columns:1fr;gap:28px;padding:28px}.ref-grid{grid-template-columns:1fr}.ref-intro h1{font-size:34px}.ref-stats>div{padding:18px}.ref-stats strong{font-size:26px}.ref-stats small{display:block;margin:0;font-size:9px}.ref-panel{padding:22px}.ref-pass{max-width:500px;width:100%}}@media(max-width:420px){.ref-page{padding-inline:12px}.ref-hero{padding:24px 20px}.ref-intro h1{font-size:29px}.ref-stats span{font-size:8px}.ref-stats>div{padding:16px 12px}.ref-input-row{flex-direction:column}.ref-input-row input{width:100%}.ref-member{gap:10px}.ref-member-name small{font-size:8px}.ref-earned{font-size:20px}}@media(prefers-reduced-motion:reduce){.ref-page *:not(.ref-demo,.ref-demo *){animation:none!important;transition:none!important;scroll-behavior:auto!important}}
/* ===== Referans kullanım animasyonu ===== */
.ref-demo{margin:20px 0 0;border:1px solid var(--ref-edge);border-radius:22px;background:var(--card-bg,#141720);padding:26px}
.ref-demo-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;margin-bottom:20px}
.ref-demo-head h2{margin:10px 0 0}
.ref-demo-toggle{width:38px;height:38px;border:1px solid var(--ref-edge);border-radius:10px;background:transparent;color:var(--ref-muted);cursor:pointer;display:grid;place-items:center;transition:color .2s,border-color .2s}
.ref-demo-toggle:hover{color:var(--ref-accent);border-color:var(--ref-accent)}
.ref-demo-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.ref-demo-step{position:relative;border:1px solid var(--ref-edge);border-radius:16px;padding:18px;background:var(--dark-bg,#0e1018);opacity:.5;transition:opacity .4s,border-color .4s;overflow:hidden}
.ref-demo-step.is-active{opacity:1;border-color:color-mix(in srgb,var(--ref-accent) 45%,transparent)}
.ref-demo-step::after{content:"";position:absolute;left:0;top:0;height:2px;width:0;background:var(--ref-accent)}
.ref-demo-step.is-active::after{animation:rd-bar 4.8s linear both}
.rd-step-btn{display:flex;gap:12px;align-items:flex-start;width:100%;background:none;border:0;padding:0;color:inherit;font:inherit;text-align:left;cursor:pointer}
.rd-num{display:grid;place-items:center;flex-shrink:0;width:32px;height:32px;border:1px solid var(--ref-edge);border-radius:10px;color:var(--ref-accent);font-size:10px;transition:background .4s}
.is-active .rd-num{background:color-mix(in srgb,var(--ref-accent) 14%,transparent)}
.rd-step-btn strong{display:block;font-size:12px;font-weight:600}
.rd-step-btn small{display:block;font-size:10px;line-height:1.7;margin-top:3px;color:var(--ref-muted)}
.ref-demo :is(button):focus-visible{outline:2px solid var(--ref-accent);outline-offset:4px}
.rd-scene{position:relative;height:150px;margin-top:16px;border-radius:12px;border:1px dashed var(--ref-edge);background:color-mix(in srgb,var(--ref-accent) 5%,transparent);overflow:hidden}
.rd-scene small{font-size:7px;letter-spacing:1.2px;color:var(--ref-muted)}
/* 1 · kopyala */
.rd-copy{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px}
.rd-card{padding:9px 16px;border:1px solid var(--ref-edge);border-radius:10px;background:var(--card-bg,#141720);text-align:center;max-width:86%}
.rd-card small{display:block;margin-bottom:2px}
.rd-card strong{font-size:14px;font-weight:600;overflow-wrap:anywhere}
.rd-btn{display:inline-grid;justify-items:center;align-items:center;padding:8px 14px;border-radius:9px;background:var(--ref-accent);color:#101014;font-size:10px;font-weight:600}
.rd-btn>span{grid-area:1/1;display:inline-flex;gap:7px;align-items:center;white-space:nowrap}
.rd-b{opacity:0}
.rd-cursor{position:absolute;left:calc(50% + 16px);top:106px;font-size:16px;color:var(--text,#fff);filter:drop-shadow(0 2px 3px #0008);opacity:0}
.is-active .rd-cursor{animation:rd-cursor 4.8s ease both}
.is-active .rd-btn{animation:rd-press 4.8s ease both,rd-ok 4.8s linear both}
.is-active .rd-a{animation:rd-out 4.8s linear both}
.is-active .rd-b{animation:rd-in 4.8s linear both}
/* 2 · paylaş */
.rd-share{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 14px}
.rd-who{display:grid;justify-items:center;gap:6px}
.rd-chip{position:absolute;top:34px;left:18%;padding:5px 10px;border-radius:99px;background:var(--ref-accent);color:#101014;font-size:9px;font-weight:600;max-width:90px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;opacity:0}
.is-active .rd-chip{animation:rd-fly 4.8s ease both}
.rd-friend{flex:0 0 58%;min-width:0;padding:10px;border:1px solid var(--ref-edge);border-radius:10px;background:var(--card-bg,#141720)}
.rd-field{margin:6px 0;padding:7px 8px;border:1px solid var(--ref-edge);border-radius:7px;background:var(--dark-bg,#0c0e14);min-height:28px}
.rd-type{display:block;width:0;max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:10px;color:var(--text,#fff)}
.is-active .rd-type{animation:rd-typing 1.4s steps(var(--n)) 1.9s forwards}
.rd-linked{display:block;font-size:9px;font-weight:600;color:#3ecf8e;opacity:0}
.is-active .rd-linked{animation:rd-pop .5s ease 3.5s forwards}
/* 3 · kazan */
.rd-earn{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 14px}
.rd-friends{list-style:none;margin:0;padding:0;display:grid;gap:6px;flex:1;min-width:0}
.rd-friends li{display:flex;align-items:center;gap:8px;padding:6px 9px;border:1px solid var(--ref-edge);border-radius:9px;background:var(--card-bg,#141720);font-size:9px;color:var(--ref-muted);opacity:0}
.rd-friends b{margin-left:auto;color:var(--ref-accent);font-size:11px}
.is-active .rd-friends li{animation:rd-row .5s ease forwards}
.is-active .rd-friends li:nth-child(1){animation-delay:.4s}
.is-active .rd-friends li:nth-child(2){animation-delay:1.1s}
.is-active .rd-friends li:nth-child(3){animation-delay:1.8s}
.rd-total{flex:0 0 36%;text-align:center}
.rd-total small{display:block}
.rd-total strong{display:inline-block;margin-top:4px;font-size:30px;font-weight:600;color:var(--ref-accent);line-height:1}
.rd-total em{display:block;font-style:normal;font-size:9px;font-weight:400;color:var(--ref-muted);margin-top:4px}
.is-active .rd-total strong{animation:rd-pulse 4.8s ease both}
@keyframes rd-bar{from{width:0}to{width:100%}}
@keyframes rd-cursor{0%{opacity:0;transform:translate(70px,46px)}10%{opacity:1}36%{opacity:1;transform:translate(0,0) scale(1)}41%{transform:translate(0,0) scale(.8)}47%{transform:translate(0,0) scale(1)}85%{opacity:1}100%{opacity:0;transform:translate(0,0)}}
@keyframes rd-press{0%,40%{transform:scale(1)}43%{transform:scale(.92)}47%,100%{transform:scale(1)}}
@keyframes rd-ok{0%,43%{background:var(--ref-accent)}45%,100%{background:#3ecf8e}}
@keyframes rd-out{0%,43%{opacity:1}45%,100%{opacity:0}}
@keyframes rd-in{0%,43%{opacity:0}45%,100%{opacity:1}}
@keyframes rd-fly{0%{left:18%;opacity:0;transform:scale(.8)}8%{opacity:1;transform:scale(1)}30%{left:42%;opacity:1}36%,100%{left:48%;opacity:0;transform:scale(.7)}}
@keyframes rd-typing{to{width:calc(var(--n)*1ch)}}
@keyframes rd-pop{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@keyframes rd-row{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none}}
@keyframes rd-pulse{0%,17%{transform:scale(1)}19%{transform:scale(1.18)}23%,31%{transform:scale(1)}33%{transform:scale(1.18)}37%,46%{transform:scale(1)}48%{transform:scale(1.18)}53%,100%{transform:scale(1)}}
.ref-demo.is-paused *,.ref-demo.is-paused *::after{animation-play-state:paused!important}
.ref-demo.is-static .ref-demo-step{opacity:1}
.ref-demo.is-static .ref-demo-step::after,.ref-demo.is-static .ref-demo-toggle{display:none}
@media(max-width:900px){.ref-demo-steps{grid-template-columns:1fr}.ref-demo{padding:22px}.rd-scene{height:140px}}
@media(max-width:420px){.ref-demo{padding:18px 14px}.ref-demo-step{padding:14px}}
@media(prefers-reduced-motion:reduce){.ref-page .ref-demo *,.ref-page .ref-demo *::after{animation-duration:.001ms!important;animation-delay:0s!important;animation-iteration-count:1!important}}

/* ===== Animasyon renk iyileştirmesi: her adımın kendi rengi var ===== */
.ref-demo{background:radial-gradient(ellipse at 0 0,color-mix(in srgb,var(--ref-accent) 7%,transparent),transparent 55%),radial-gradient(ellipse at 100% 100%,color-mix(in srgb,#3ecf8e 6%,transparent),transparent 55%),var(--card-bg,#141720)}
.ref-demo-step{--rd-c:var(--ref-accent);transition:opacity .4s,border-color .4s,filter .4s,box-shadow .4s;filter:saturate(.35)}
.ref-demo-step:nth-child(2){--rd-c:#7c9cff}
.ref-demo-step:nth-child(3){--rd-c:#3ecf8e}
.ref-demo-step.is-active{filter:none;border-color:color-mix(in srgb,var(--rd-c) 55%,transparent);box-shadow:0 12px 34px -16px color-mix(in srgb,var(--rd-c) 55%,transparent)}
.ref-demo-step::after{height:3px;background:linear-gradient(90deg,var(--rd-c),color-mix(in srgb,var(--rd-c) 40%,#fff))}
.rd-num{color:var(--rd-c)}
.is-active .rd-num{background:color-mix(in srgb,var(--rd-c) 18%,transparent);border-color:color-mix(in srgb,var(--rd-c) 50%,transparent)}
.rd-scene{border:1px solid color-mix(in srgb,var(--rd-c) 22%,transparent);background:radial-gradient(circle at 50% 0,color-mix(in srgb,var(--rd-c) 18%,transparent),transparent 72%),color-mix(in srgb,var(--dark-bg,#0c0e14) 70%,transparent)}
.rd-card,.rd-friend,.rd-friends li{border-color:color-mix(in srgb,var(--rd-c) 24%,transparent)}
.rd-card strong{color:var(--rd-c)}
.rd-btn{background:var(--rd-c)}
.rd-share .ref-avatar{color:var(--rd-c);background:color-mix(in srgb,var(--rd-c) 14%,transparent);border-color:color-mix(in srgb,var(--rd-c) 40%,transparent)}
.rd-chip{background:var(--rd-c);box-shadow:0 4px 14px -4px var(--rd-c)}
.rd-type{color:color-mix(in srgb,var(--rd-c) 35%,var(--text,#fff))}
.is-active .rd-field{animation:rd-focus 4.8s ease both}
.rd-linked{color:#3ecf8e}
.rd-friends li i{color:var(--rd-c)}
.rd-friends b{color:var(--rd-c);background:color-mix(in srgb,var(--rd-c) 14%,transparent);padding:2px 7px;border-radius:6px}
.rd-total strong{color:var(--rd-c);text-shadow:0 0 22px color-mix(in srgb,var(--rd-c) 55%,transparent)}
@keyframes rd-focus{0%,38%{border-color:var(--ref-edge);box-shadow:none}40%,100%{border-color:color-mix(in srgb,var(--rd-c) 75%,transparent);box-shadow:0 0 0 3px color-mix(in srgb,var(--rd-c) 18%,transparent)}}
.ref-demo.is-static .ref-demo-step{filter:none}

/* ===== Sayfa geneli renk paleti =====
   Vurgu (tema rengi) = eylem · Mavi = kişiler/bağlantı · Yeşil = puan/başarı */
.ref-page{--ref-blue:#7c9cff;--ref-green:#3ecf8e;--ref-red:#ff6b7a}
.ref-hero{background:radial-gradient(ellipse at 100% 0,color-mix(in srgb,var(--ref-accent) 16%,transparent),transparent 62%),radial-gradient(ellipse at 0 100%,color-mix(in srgb,var(--ref-blue) 11%,transparent),transparent 58%),var(--card-bg,#141720)}
.ref-intro h1 em{background:linear-gradient(90deg,var(--ref-accent),color-mix(in srgb,var(--ref-accent) 45%,#ffd58a));-webkit-background-clip:text;background-clip:text;color:transparent}
.ref-intro p strong{color:var(--ref-green);font-weight:600}
/* Referans kimliği kartı */
.ref-pass{background:linear-gradient(135deg,color-mix(in srgb,var(--ref-accent) 16%,transparent),transparent 60%),radial-gradient(circle at 100% 100%,color-mix(in srgb,var(--ref-green) 10%,transparent),transparent 55%),var(--dark-bg,#0e1018);border-color:color-mix(in srgb,var(--ref-accent) 45%,transparent);box-shadow:0 22px 50px -18px color-mix(in srgb,var(--ref-accent) 40%,transparent)}
.ref-pass-top i{color:var(--ref-accent);filter:drop-shadow(0 0 10px color-mix(in srgb,var(--ref-accent) 55%,transparent))}
.ref-pass-bottom strong,.ref-pass-bottom i{color:var(--ref-green)}
.ref-pass-bottom strong{text-shadow:0 0 22px color-mix(in srgb,var(--ref-green) 45%,transparent)}
.ref-copy-status{color:var(--ref-green)}
/* Butonlar ve girişler */
.ref-button{background:linear-gradient(135deg,var(--ref-accent),color-mix(in srgb,var(--ref-accent) 70%,#ffd58a));box-shadow:0 8px 22px -10px var(--ref-accent)}
.ref-input-row input{transition:border-color .2s,box-shadow .2s}
.ref-input-row input:focus{outline:none;border-color:var(--ref-blue);box-shadow:0 0 0 3px color-mix(in srgb,var(--ref-blue) 22%,transparent)}
/* İstatistikler: her sütunun kendi rengi */
.ref-stats{overflow:hidden}
.ref-stats>div{position:relative}
.ref-stats>div::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--ref-accent)}
.ref-stats>div:nth-child(1)::before{background:var(--ref-blue)}
.ref-stats>div:nth-child(2)::before{background:var(--ref-green)}
.ref-stats>div:nth-child(1) strong{color:var(--ref-blue)}
.ref-stats>div:nth-child(2) strong{color:var(--ref-green)}
.ref-stats>div:nth-child(3) strong{color:var(--ref-accent)}
.ref-stats small{color:var(--ref-muted)}
/* Referans seçme paneli (kişi/bağlantı = mavi) */
.ref-grid>.ref-panel:first-child{background:radial-gradient(ellipse at 0 0,color-mix(in srgb,var(--ref-blue) 9%,transparent),transparent 60%),var(--card-bg,#141720)}
.ref-grid>.ref-panel:first-child .ref-eyebrow,.ref-members .ref-eyebrow{color:var(--ref-blue)}
.ref-avatar{color:var(--ref-blue);background:color-mix(in srgb,var(--ref-blue) 13%,transparent);border-color:color-mix(in srgb,var(--ref-blue) 35%,transparent)}
.ref-person>i{color:var(--ref-green)}
.ref-hint i{color:var(--ref-green)}
.ref-panel form>.ref-link:hover{color:var(--ref-red)}
/* Nasıl çalışır: animasyonla aynı 3 renk */
.ref-how li>span{background:color-mix(in srgb,var(--c,var(--ref-accent)) 12%,transparent);border-color:color-mix(in srgb,var(--c,var(--ref-accent)) 40%,transparent);color:var(--c,var(--ref-accent))}
.ref-how li:nth-child(1){--c:var(--ref-accent)}
.ref-how li:nth-child(2){--c:var(--ref-blue)}
.ref-how li:nth-child(3){--c:var(--ref-green)}
/* Üyeler listesi */
.ref-count{color:var(--ref-blue);border-color:color-mix(in srgb,var(--ref-blue) 35%,transparent);background:color-mix(in srgb,var(--ref-blue) 8%,transparent)}
.ref-empty>i{color:var(--ref-blue)}
.ref-earned{color:var(--ref-green)}
.ref-member{transition:background .2s}
.ref-member:hover{background:color-mix(in srgb,var(--ref-blue) 5%,transparent)}
/* Kurallar ve sayfalama */
.ref-rules summary i{color:var(--ref-accent)}
.ref-rules[open]{border-color:color-mix(in srgb,var(--ref-accent) 35%,transparent)}
.ref-pagination a{color:var(--ref-blue)}
/* Bildirimler: başarı yeşil, hata kırmızı */
.ref-notice{background:color-mix(in srgb,var(--ref-accent) 8%,var(--card-bg,#141720));border-color:var(--ref-accent)}
.ref-notice[role=status]{border-color:color-mix(in srgb,var(--ref-green) 60%,transparent);background:color-mix(in srgb,var(--ref-green) 10%,var(--card-bg,#141720))}
.ref-notice[role=alert]{border-color:color-mix(in srgb,var(--ref-red) 60%,transparent);background:color-mix(in srgb,var(--ref-red) 10%,var(--card-bg,#141720))}
/* Animasyondaki mavi/yeşil artık sayfa değişkenlerinden geliyor */
.ref-demo-step:nth-child(2){--rd-c:var(--ref-blue)}
.ref-demo-step:nth-child(3){--rd-c:var(--ref-green)}