/* gazioglumobilya.com — sadakat sayfası + Hesabım › Puan ve avantajlar (Claude 2026-10-26). site.css jetonları (Işık / Gece altını). */
.sd-kahraman { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 22px; padding: 28px; border-radius: 28px; margin-top: 14px; position: relative; overflow: hidden; animation: sd-gir .6s var(--ap-yay) both; }
.sd-kahraman::after { content: ""; position: absolute; right: -80px; top: -90px; width: 300px; height: 300px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--brand) 40%, transparent), transparent 66%); pointer-events: none; }
.sd-kahraman h1 { margin: 2px 0 6px; font: 800 clamp(28px, 4vw, 40px)/1.1 var(--font-display, inherit); letter-spacing: -.02em; }
.sd-kahraman-ik { width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center; font-size: 28px; color: #fff; background: var(--hero-grad); box-shadow: 0 12px 28px color-mix(in srgb, var(--accent) 40%, transparent); }
.sd-ust { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.sd-ornek { position: relative; z-index: 1; text-align: center; padding: 14px 18px; border-radius: 20px; background: var(--surface); box-shadow: var(--e1); }
.sd-ornek b { display: block; font: 800 34px/1 var(--font-display, inherit); color: var(--accent); }
.sd-ornek span { font-weight: 700; } .sd-ornek small { display: block; color: var(--label-2); margin-top: 4px; font-size: 12.5px; }
.sd-madde { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 10px; line-height: 1.55; }
.sd-madde li { animation: sd-gir .5s var(--ap-yay) both; animation-delay: calc(var(--i) * 45ms); }
.sd-madde li::marker { color: var(--brand); font-weight: 800; }
.sd-seviye-satir { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-top: 18px; }
.sd-seviye-kart { padding: 16px; border-radius: 20px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--sep); display: flex; flex-direction: column; gap: 3px; animation: sd-gir .5s var(--ap-yay) both; animation-delay: calc(var(--i) * 80ms); }
.sd-seviye-kart.ust { background: var(--hero-grad); color: #fff; box-shadow: 0 12px 28px color-mix(in srgb, var(--accent) 35%, transparent); }
.sd-seviye-kart.ust small, .sd-seviye-kart.ust p { color: rgba(255, 255, 255, .85); }
.sd-seviye-kart small { color: var(--label-2); } .sd-seviye-kart em { font-style: normal; font-weight: 700; color: var(--accent); }
.sd-seviye-kart.ust em { color: #FFE6B8; } .sd-seviye-kart p { margin: 6px 0 0; font-size: 13.5px; }
.sd-madalya { color: var(--brand); font-size: 20px; } .sd-seviye-kart.ust .sd-madalya { color: #FFE6B8; }
.sd-puan { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: center; padding: 24px; border-radius: 26px; position: relative; overflow: hidden; animation: sd-gir .55s var(--ap-yay) both; }
.sd-puan::before { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, color-mix(in srgb, var(--brand) 22%, transparent) 50%, transparent 70%); transform: translateX(-100%); animation: sd-sheen 5s 1s ease-in-out infinite; pointer-events: none; }
@keyframes sd-sheen { 0%, 60% { transform: translateX(-100%); } 90%, 100% { transform: translateX(100%); } }
.sd-puan-sol { display: flex; flex-direction: column; gap: 4px; }
.sd-puan-sol small, .sd-puan-sag small { color: var(--label-2); }
.sd-puan-sayi { font: 800 52px/1 var(--font-display, inherit); letter-spacing: -.03em; color: var(--accent); font-variant-numeric: tabular-nums; }
.sd-puan-sag { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.sd-rozet { padding: 8px 14px; border-radius: 999px; color: #fff; font-weight: 800; background: var(--hero-grad); box-shadow: 0 8px 20px color-mix(in srgb, var(--accent) 35%, transparent); }
.sd-ilerleme { width: 100%; height: 10px; border-radius: 5px; background: var(--fill-2); overflow: hidden; }
.sd-ilerleme i { display: block; height: 100%; width: var(--y); border-radius: inherit; background: var(--hero-grad); animation: sd-dol 1.1s .2s var(--ap-yay) both; }
@keyframes sd-dol { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.sd-avantaj { font-weight: 600; color: var(--accent) !important; }
.sd-kuponlar { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.sd-kupon { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 20px; background: var(--surface); box-shadow: var(--e1), inset 0 0 0 1px var(--sep); animation: sd-gir .5s var(--ap-yay) both; animation-delay: calc(var(--i) * 60ms); }
.sd-kupon::before, .sd-kupon::after { content: ""; position: absolute; left: 88px; width: 16px; height: 16px; border-radius: 50%; background: var(--bg); }
.sd-kupon::before { top: -8px; } .sd-kupon::after { bottom: -8px; }
.sd-kupon-deger { width: 72px; text-align: center; padding-right: 12px; border-right: 2px dashed var(--sep-strong); }
.sd-kupon-deger b { display: block; font: 800 20px/1.1 var(--font-display, inherit); color: var(--accent); } .sd-kupon-deger small { font-size: 11px; color: var(--label-2); }
.sd-kupon-bilgi { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .sd-kupon-bilgi small { color: var(--label-2); font-size: 12.5px; }
.sd-kod { font-weight: 800; letter-spacing: .04em; }
.sd-kupon:not(.gecerli) { opacity: .55; }
.dug.kucuk { min-height: 34px; padding: 0 12px; font-size: 13px; }
.sd-dogum-alan { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.sd-dogum-alan .alan { width: auto; min-width: 110px; }
.sd-bakim { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.sd-bakim-kart { display: flex; flex-direction: column; gap: 6px; padding: 16px; border-radius: 20px; background: var(--surface); box-shadow: var(--e1), inset 0 0 0 1px var(--sep); animation: sd-gir .5s var(--ap-yay) both; animation-delay: calc(var(--i) * 50ms); transition: opacity .4s; }
.sd-bakim-kart.zamani { box-shadow: var(--e1), inset 0 0 0 1.5px color-mix(in srgb, var(--brand) 70%, transparent); }
.sd-bakim-kart p { margin: 0; font-size: 14px; line-height: 1.5; }
.sd-bakim-kart.yapildi { opacity: .6; }
.sd-bakim-ust { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.sd-bakim-alt { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.sd-bakim-alt small { color: var(--label-2); }
.hap.turuncu { color: #fff; background: var(--accent-fill); } .hap.altin { color: var(--accent); background: var(--accent-tint); } .hap.gri { color: var(--label-2); background: var(--fill-3); }
.sd-gecmis .eksi { color: var(--negative); } .sd-gecmis .arti { color: var(--positive); }
@keyframes sd-gir { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (max-width: 720px) {
  .sd-kahraman { grid-template-columns: auto 1fr; padding: 20px; } .sd-ornek { grid-column: 1 / -1; }
  .sd-puan { grid-template-columns: 1fr; padding: 20px; } .sd-puan-sayi { font-size: 44px; }
  .sd-kupon { grid-template-columns: auto 1fr; } .sd-kupon > .dug { grid-column: 1 / -1; justify-self: start; }
}
@media (prefers-reduced-motion: reduce) { .sd-kahraman, .sd-madde li, .sd-seviye-kart, .sd-puan, .sd-puan::before, .sd-ilerleme i, .sd-kupon, .sd-bakim-kart { animation: none !important; } }