@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');
:root{
  --bg:#f6f7fb; --text:#171a2b; --muted:#6b7192;
  --panel:#ffffff; --panel2:#ffffff; --line:#e7e8f2;
  --red:#f43f5e; --red2:#e11d48; --cyan:#0891b2; --cyan2:#0e7490; --violet:#fb5b78; --blue:#3b6bff;
  --ok:#16a34a; --okbg:#e9fbf1; --err:#e11d48; --errbg:#fdecef;
  --shadow:0 1px 2px rgba(20,20,60,.05), 0 18px 40px -22px rgba(80,60,160,.35);
  --topbar:rgba(255,255,255,.82); --card:#ffffff; --exambg:#ffffff; --heading:#171a2b;
  --bodybg:
    radial-gradient(900px 480px at 10% -6%, rgba(124,58,237,.10), transparent 60%),
    radial-gradient(820px 460px at 94% 2%, rgba(59,107,255,.10), transparent 55%),
    radial-gradient(700px 480px at 60% 112%, rgba(244,63,94,.08), transparent 55%),
    linear-gradient(180deg,#f8f9fd,#eef1fb);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:'Plus Jakarta Sans',system-ui,sans-serif;color:var(--text);min-height:100vh;
  background:var(--bodybg);
  background-attachment:fixed;}
h1,h2,h3,.brand,.hero h1,.section-title{font-family:'Outfit',sans-serif}
a{color:var(--blue);text-decoration:none;transition:.15s}a:hover{color:var(--violet)}
.wrap{max-width:1080px;margin:0 auto;padding:26px 18px 70px}

/* Top bar */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 24px;
  background:var(--topbar);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:40}
.brand{font-size:21px;font-weight:800;letter-spacing:1px;color:var(--red);display:flex;align-items:center;gap:9px}
.brand b{color:#171a2b}
.topbar{position:relative}
.topbar nav{display:flex;align-items:center;gap:4px;font-size:14px;flex-wrap:wrap;justify-content:flex-end}
.topbar nav.mainnav > a{display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-weight:600;padding:8px 12px;border-radius:10px;transition:color .15s,background .15s}
.topbar nav.mainnav > a.on{color:var(--violet);background:rgba(251,91,120,.10)}
.topbar nav.mainnav > a:hover{color:var(--violet);background:rgba(251,91,120,.07)}
.nav-ic{width:16px;height:16px;flex:0 0 auto;opacity:.85}
.nav-chev{width:14px;height:14px;opacity:.6;transition:transform .2s}
/* Grouped dropdown menus */
.navgrp{position:relative}
.navgrp-btn{display:inline-flex;align-items:center;gap:6px;background:none;border:0;font-family:inherit;font-size:14px;font-weight:600;color:var(--muted);cursor:pointer;padding:8px 12px;border-radius:10px;transition:color .15s,background .15s}
.navgrp.on > .navgrp-btn{color:var(--violet);background:rgba(251,91,120,.10)}
.navgrp:hover > .navgrp-btn,.navgrp:focus-within > .navgrp-btn{color:var(--violet);background:rgba(251,91,120,.08)}
.navgrp:hover > .navgrp-btn .nav-chev,.navgrp:focus-within > .navgrp-btn .nav-chev{transform:rotate(180deg)}
.navgrp::after{content:"";position:absolute;top:100%;left:0;right:0;height:10px}
.navgrp-pop{position:absolute;top:calc(100% + 8px);right:0;min-width:216px;background:var(--card);border:1px solid var(--line);border-radius:14px;
  box-shadow:0 12px 40px -12px rgba(80,60,160,.4);padding:8px;display:flex;flex-direction:column;gap:2px;z-index:60;
  opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .18s,transform .18s}
.navgrp:hover .navgrp-pop,.navgrp:focus-within .navgrp-pop{opacity:1;visibility:visible;transform:translateY(0)}
.navgrp-pop a{display:block;padding:10px 13px;border-radius:10px;color:var(--text);font-weight:600;font-size:14px;white-space:nowrap;transition:background .15s,color .15s}
.navgrp-pop a:hover{background:rgba(59,107,255,.09);color:var(--violet)}
.navgrp-pop a.on{background:linear-gradient(135deg,var(--violet),var(--blue));color:#fff}
.navgrp-user{padding:6px 13px 8px;font-size:13px;color:var(--muted);border-bottom:1px solid var(--line);margin-bottom:4px}
.navgrp-user b{color:var(--cyan)}
.nav-badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;font-size:11px;font-weight:800;line-height:1;color:#fff;background:var(--red2);border-radius:99px;box-shadow:0 0 0 2px var(--card);animation:badgePulse 1.8s ease-in-out infinite}
@keyframes badgePulse{0%{transform:scale(1);box-shadow:0 0 0 2px var(--card),0 0 0 0 rgba(244,63,94,.55)}70%{transform:scale(1.12);box-shadow:0 0 0 2px var(--card),0 0 0 7px rgba(244,63,94,0)}100%{transform:scale(1);box-shadow:0 0 0 2px var(--card),0 0 0 0 rgba(244,63,94,0)}}
@media (prefers-reduced-motion:reduce){.nav-badge{animation:none}}
.navgrp-btn .nav-badge{margin-left:1px;box-shadow:none}
.navgrp-pop a .nav-badge{float:right}
.navgrp-logout{color:var(--red2)!important;margin-top:4px;border-top:1px solid var(--line);border-radius:0 0 10px 10px}
/* Hamburger (mobil) */
.nav-burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:40px;margin-left:auto;background:none;border:1px solid var(--line);border-radius:10px;cursor:pointer;padding:0 11px}
.nav-burger span{display:block;height:2.5px;width:100%;background:var(--text);border-radius:2px;transition:transform .25s,opacity .2s}
.nav-burger.on span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.nav-burger.on span:nth-child(2){opacity:0}
.nav-burger.on span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
@media (max-width:1024px){
  .nav-burger{display:flex}
  .topbar nav.mainnav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;justify-content:flex-start;
    gap:2px;background:var(--card);border-top:1px solid var(--line);box-shadow:0 20px 40px -18px rgba(80,60,160,.5);padding:10px;z-index:70;max-height:80vh;overflow:auto}
  .topbar nav.mainnav.open{display:flex}
  .topbar nav.mainnav > a{width:100%}
  .navgrp{width:100%}
  .navgrp-btn{width:100%;justify-content:flex-start}
  .navgrp-btn .nav-chev{margin-left:auto}
  .navgrp::after{display:none}
  .navgrp-pop{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;border-radius:0;padding:2px 0 6px 22px;min-width:0;display:none}
  .navgrp:focus-within .navgrp-pop{display:flex}
  .bell-drop{right:6px}
}
.hello{color:var(--muted)}.hello b{color:var(--cyan)}
.badge-showcase{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:0 0 16px}
.bsc-card{position:relative;border-radius:16px;padding:18px 12px;text-align:center;color:#fff;overflow:hidden;box-shadow:0 14px 34px -16px rgba(80,60,160,.6);transition:transform .18s}
.bsc-card:hover{transform:translateY(-3px)}
.bsc-0{background:linear-gradient(135deg,#fbbf24,#d97706)}
.bsc-1{background:linear-gradient(135deg,#cbd5e1,#64748b)}
.bsc-2{background:linear-gradient(135deg,#d6a06a,#92400e)}
.bsc-rank{position:absolute;top:8px;left:10px;font-size:16px}
.bsc-ic{font-size:42px;line-height:1;filter:drop-shadow(0 3px 6px rgba(0,0,0,.28))}
.bsc-nm{font-weight:800;font-size:15px;margin-top:8px}
.bsc-ds{font-size:11px;opacity:.92;margin-top:3px;line-height:1.3}
@media(max-width:600px){.badge-showcase{grid-template-columns:1fr}}
.frame-gold .bsc-card{box-shadow:0 0 0 3px #fbbf24,0 14px 34px -16px rgba(180,120,10,.7)}
.frame-neon .bsc-card{box-shadow:0 0 0 2px #a855f7,0 0 18px 2px rgba(168,85,247,.6)}
.frame-fire .bsc-card{box-shadow:0 0 0 2px #f97316,0 0 20px 2px rgba(249,115,22,.55)}
.frame-ocean .bsc-card{box-shadow:0 0 0 2px #06b6d4,0 0 18px 2px rgba(6,182,212,.55)}
.frame-neon .bsc-card,.frame-fire .bsc-card,.frame-ocean .bsc-card{animation:frameGlow 2.4s ease-in-out infinite}
@keyframes frameGlow{0%,100%{filter:brightness(1)}50%{filter:brightness(1.12)}}
@media (prefers-reduced-motion:reduce){.frame-neon .bsc-card,.frame-fire .bsc-card,.frame-ocean .bsc-card{animation:none}}
.badge-showcase.frame-hunter{position:relative;padding:16px;border-radius:20px;background:linear-gradient(135deg,#fffbeb,#fef3c7);border:2px solid #f59e0b;box-shadow:0 0 0 4px rgba(253,230,138,.6),0 0 30px rgba(245,158,11,.45)}
.badge-showcase.frame-hunter::before{content:"🏹 HEDEF AVCISI";position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:linear-gradient(135deg,#b45309,#f59e0b);color:#fff;font-size:10px;font-weight:800;letter-spacing:1px;padding:3px 12px;border-radius:99px;box-shadow:0 3px 10px rgba(180,120,10,.5)}
.frame-hunter .bsc-card{animation:frameGlow 2.4s ease-in-out infinite}
.bsc-card.gh-silver{box-shadow:0 0 0 2px #cbd5e1,0 0 18px 2px rgba(148,163,184,.6);animation:ghGlowS 2.2s ease-in-out infinite}
.bsc-card.gh-gold{box-shadow:0 0 0 2px #fcd34d,0 0 20px 3px rgba(245,158,11,.7);animation:ghGlowG 2s ease-in-out infinite}
.bsc-card.gh-silver::after,.bsc-card.gh-gold::after{content:"✦";position:absolute;top:7px;left:9px;font-size:12px;opacity:.85}
@keyframes ghGlowS{0%,100%{box-shadow:0 0 0 2px #cbd5e1,0 0 8px rgba(148,163,184,.5)}50%{box-shadow:0 0 0 2px #e2e8f0,0 0 22px rgba(148,163,184,.95)}}
@keyframes ghGlowG{0%,100%{box-shadow:0 0 0 2px #fcd34d,0 0 10px rgba(245,158,11,.6)}50%{box-shadow:0 0 0 2px #fde68a,0 0 28px rgba(245,158,11,1)}}
@media (prefers-reduced-motion:reduce){.frame-hunter .bsc-card,.bsc-card.gh-silver,.bsc-card.gh-gold{animation:none}}

.vip-pill{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:800;letter-spacing:.4px;
  padding:6px 13px;border-radius:99px;text-decoration:none;color:#5b3d00;
  background:linear-gradient(135deg,#ffe27a,#ffcb3d 45%,#f4a825);border:1px solid #f0b429;
  box-shadow:0 6px 16px -6px rgba(240,180,41,.75),inset 0 1px 0 rgba(255,255,255,.6);
  text-shadow:0 1px 0 rgba(255,255,255,.35);position:relative;overflow:hidden;transition:transform .18s ease,box-shadow .18s ease}
.vip-pill:hover{transform:translateY(-1px) scale(1.04);box-shadow:0 10px 22px -8px rgba(240,180,41,.9)}
.vip-pill::after{content:"";position:absolute;top:0;left:-60%;width:45%;height:100%;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.85),transparent);
  transform:skewX(-20deg);animation:vipShine 3.2s ease-in-out infinite}
@keyframes vipShine{0%,60%{left:-60%}80%,100%{left:130%}}

/* Buttons */
.btn,.btn-ghost,.btn-red{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:14px;
  padding:12px 22px;font-size:15px;font-weight:700;cursor:pointer;border:1px solid transparent;transition:transform .12s,box-shadow .2s,filter .2s;font-family:'Outfit',sans-serif}
.btn{background:linear-gradient(135deg,var(--violet),var(--blue));color:#fff;box-shadow:0 12px 26px -12px rgba(91,90,255,.75)}
.btn:hover{transform:translateY(-2px);box-shadow:0 18px 34px -12px rgba(91,90,255,.9)}
.btn-red{background:linear-gradient(135deg,#ff5f7d,var(--red2));color:#fff;box-shadow:0 12px 26px -12px rgba(225,29,72,.7)}
.btn-red:hover{transform:translateY(-2px)}
.btn-ghost{background:#fff;border:1px solid var(--line);color:#171a2b;box-shadow:var(--shadow)}
.btn-ghost:hover{background:#f4f5fb;transform:translateY(-1px)}
.btn:disabled,.btn-ghost:disabled,.btn-red:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}

/* Cards */
.card{background:var(--panel);border:1px solid var(--line);border-radius:22px;padding:28px;box-shadow:var(--shadow)}
.flash{background:#eef0fe;border:1px solid var(--line);border-radius:14px;padding:13px 17px;margin-bottom:18px;animation:pop .4s ease}
.flash.ok{background:var(--okbg);border-color:#bbf3d3;color:#0f7a43}
.flash.err{background:var(--errbg);border-color:#f6c6cf;color:#b91c47}

/* Landing hero */
.hero{text-align:center;padding:56px 16px 20px;max-width:1000px;margin:0 auto}
.hero .logo{font-size:38px;font-weight:800;letter-spacing:2px;color:var(--red)}
.hero .logo b{color:#171a2b}
.hero .tag{color:var(--red2);letter-spacing:5px;font-size:12px;margin-top:8px;font-weight:800}
.hero-box{margin:30px auto;max-width:820px;border:1px solid var(--line);border-radius:26px;
  background:#fff;padding:44px 32px;box-shadow:0 30px 70px -34px rgba(90,60,180,.45);animation:rise .7s ease}
.hero h1{font-size:clamp(32px,6.5vw,64px);line-height:1.03;margin:0;font-weight:800;
  background:linear-gradient(120deg,#f43f5e,#fb7185 45%,#3b6bff);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p.lead{color:var(--muted);max-width:660px;margin:20px auto 0;font-size:16px;line-height:1.7}
.cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin:28px 0 6px}
.features{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:30px}
.feature{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:24px;text-align:left;
  transition:transform .2s,border-color .2s,box-shadow .2s;box-shadow:var(--shadow)}
.feature:hover{transform:translateY(-4px);border-color:rgba(124,58,237,.45)}
.feature h3{margin:0 0 8px;font-size:17px}.feature p{margin:0;color:var(--muted);font-size:14px;line-height:1.6}
.feature .ico{font-size:26px;margin-bottom:8px}

/* Forms */
.auth{max-width:460px;margin:36px auto}
.field{margin-bottom:16px}
.field label{display:block;font-size:13px;color:var(--muted);margin-bottom:7px;font-weight:600}
.field input,.field select,textarea{width:100%;padding:13px 15px;border-radius:13px;border:1px solid var(--line);
  background:var(--card);color:var(--text);font-size:15px;font-family:inherit;transition:.15s}
.field input:focus,textarea:focus,select:focus{outline:none;border-color:var(--violet);box-shadow:0 0 0 3px rgba(124,58,237,.15)}

/* Section + catalog */
.section-title{font-size:22px;font-weight:800;margin:30px 0 16px;display:flex;align-items:center;gap:10px}
.section-title::before{content:"";width:4px;height:22px;border-radius:4px;background:linear-gradient(var(--red),var(--violet))}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px}
.exam{background:var(--exambg);border:1px solid var(--line);border-radius:18px;padding:22px;display:flex;flex-direction:column;gap:9px;
  transition:transform .2s,border-color .2s,box-shadow .2s;position:relative;overflow:hidden;box-shadow:var(--shadow)}
.exam::after{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:linear-gradient(90deg,var(--red),var(--violet),var(--cyan))}
.exam:hover{transform:translateY(-5px);border-color:rgba(124,58,237,.5);box-shadow:0 24px 48px -26px rgba(120,60,200,.55)}
.exam .cat{font-size:11px;color:var(--cyan);letter-spacing:1.5px;text-transform:uppercase;font-weight:700}
.exam h3{margin:0;font-size:19px}.exam .desc{color:var(--muted);font-size:13.5px;flex:1;line-height:1.5}
.exam .meta{font-size:12.5px;color:var(--muted)}
.badge{display:inline-block;font-size:11px;padding:4px 11px;border-radius:99px;font-weight:700}
.badge.soon{background:#efeafe;color:#7c3aed}
.badge.live{background:#e6f9f0;color:#0f7a43;border:1px solid #bbf3d3}

/* Stats */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:16px;margin:16px 0}
.stat{background:#fff;border:1px solid var(--line);border-radius:18px;padding:20px;transition:.2s;box-shadow:var(--shadow)}
.stat:hover{transform:translateY(-3px)}
.stat .n{font-size:30px;font-weight:800;background:linear-gradient(120deg,var(--violet),var(--blue));-webkit-background-clip:text;background-clip:text;color:transparent}
.stat .l{color:var(--muted);font-size:13px;margin-top:2px}
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{text-align:left;padding:12px 10px;border-bottom:1px solid var(--line)}
th{color:var(--muted);font-weight:600}
tbody tr:hover,table tr:hover{background:#f7f8fd}

/* Exam taking */
.exam-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:8px;flex-wrap:wrap}
.timer{font-family:'Outfit';font-variant-numeric:tabular-nums;font-size:30px;font-weight:800;
  padding:6px 16px;border-radius:14px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow)}
.timer.warn{color:#d97706;border-color:#fcd9a6}.timer.crit{color:#e11d48;border-color:#f6c6cf;animation:pulse 1s infinite}
.progress{height:8px;border-radius:99px;background:#e9eaf5;overflow:hidden;margin:6px 0 18px}
.progress>i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--red),var(--violet),var(--cyan));transition:width .35s}
.exam-layout{display:grid;grid-template-columns:1fr 300px;gap:20px}
.qcard{background:#fff;border:1px solid var(--line);border-radius:22px;padding:30px;box-shadow:var(--shadow);animation:slide .35s ease}
.qmeta{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);margin-bottom:10px;align-items:center}
.qtext{font-size:19px;line-height:1.65;margin:2px 0 22px;font-weight:600}
.opt{display:flex;align-items:center;gap:12px;width:100%;text-align:left;border:1.5px solid var(--line);
  background:#fff;color:#171a2b;border-radius:15px;padding:15px 18px;margin-bottom:12px;font-size:15.5px;
  cursor:pointer;transition:transform .12s,border-color .15s,background .15s}
.opt:hover{transform:translateX(4px);border-color:var(--violet);background:#f7f5ff}
.opt .l{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;flex:0 0 30px;border-radius:50%;
  background:#efeafe;color:var(--violet);font-weight:800;font-family:'Outfit'}
.opt.sel{border-color:var(--blue);background:#eef2ff;box-shadow:0 0 0 3px rgba(59,107,255,.15)}
.opt.sel .l{background:var(--blue);color:#fff}
.opt.correct{border-color:var(--ok);background:var(--okbg)}.opt.correct .l{background:var(--ok);color:#fff}
.opt.wrong{border-color:var(--err);background:var(--errbg)}.opt.wrong .l{background:var(--err);color:#fff}
.navgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:9px}
.navgrid button{aspect-ratio:1;border-radius:11px;border:1px solid var(--line);background:#fff;color:var(--muted);font-weight:800;font-family:'Outfit';cursor:pointer;transition:.12s}
.navgrid button:hover{transform:scale(1.08);color:var(--violet)}
.navgrid button.ans{background:linear-gradient(135deg,var(--violet),var(--blue));color:#fff;border-color:transparent}
.navgrid button.cur{outline:2px solid var(--cyan);outline-offset:1px}
.sidebar{background:#fff;border:1px solid var(--line);border-radius:20px;padding:20px;position:sticky;top:88px;box-shadow:var(--shadow)}
.legend{display:flex;gap:14px;flex-wrap:wrap;margin-top:14px;font-size:12px;color:var(--muted)}
.legend i{display:inline-block;width:12px;height:12px;border-radius:4px;margin-right:5px;vertical-align:-1px}
.fb{margin-top:16px;border-radius:15px;padding:15px 18px;font-size:15px;animation:pop .3s ease}
.fb.good{background:var(--okbg);border:1px solid #bbf3d3;color:#0f7a43}
.fb.bad{background:var(--errbg);border:1px solid #f6c6cf;color:#b91c47}
.nav-btns{display:flex;justify-content:space-between;gap:10px;margin-top:22px}

/* Result */
.big-net{font-size:64px;font-weight:800;text-align:center;margin:8px 0;font-family:'Outfit';
  background:linear-gradient(120deg,#f43f5e,#3b6bff);-webkit-background-clip:text;background-clip:text;color:transparent}
.review{border:1px solid var(--line);border-radius:16px;padding:18px;margin-bottom:14px;background:#fff;box-shadow:var(--shadow)}
.pill{font-size:11px;padding:4px 10px;border-radius:99px;background:#efeafe;color:#7c3aed;font-weight:600}
.linkbtn{background:none;border:none;color:var(--red2);cursor:pointer;font:inherit;padding:0;font-weight:600}

/* Certificate */
.certificate{position:relative;text-align:center;padding:40px 34px 30px;overflow:hidden;
  background:radial-gradient(680px 340px at 50% -5%, #fff1f6, #ffffff);
  border:2px solid var(--red);border-radius:22px;box-shadow:0 30px 72px -30px rgba(244,63,94,.5)}
.certificate::before{content:"";position:absolute;inset:11px;border:2px dashed rgba(244,63,94,.4);border-radius:15px;pointer-events:none}
.cert-corner{position:absolute;width:44px;height:44px;border:3px solid var(--red);opacity:.55;pointer-events:none}
.cert-corner.tl{top:18px;left:18px;border-right:none;border-bottom:none;border-radius:10px 0 0 0}
.cert-corner.tr{top:18px;right:18px;border-left:none;border-bottom:none;border-radius:0 10px 0 0}
.cert-corner.bl{bottom:18px;left:18px;border-right:none;border-top:none;border-radius:0 0 0 10px}
.cert-corner.br{bottom:18px;right:18px;border-left:none;border-top:none;border-radius:0 0 10px 0}
.cert-badge{font-size:64px;line-height:1;filter:drop-shadow(0 8px 18px rgba(244,63,94,.4))}
.cert-title{letter-spacing:8px;color:var(--red2);font-weight:800;margin:10px 0 2px;font-family:'Outfit';font-size:15px}
.cert-sub{color:var(--muted);letter-spacing:3px;font-size:11px;text-transform:uppercase;margin:0}
.cert-name{font-size:38px;font-weight:800;margin:16px 0 0;font-family:'Outfit';
  background:linear-gradient(120deg,#e11d48,#f472b6);-webkit-background-clip:text;background-clip:text;color:transparent}
.cert-underline{width:190px;height:3px;margin:8px auto 0;border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--red),transparent)}
.cert-text{color:#4b4f6b;max-width:600px;margin:16px auto;line-height:1.75}
.cert-net{display:inline-block;font-family:'Outfit';font-weight:800;font-size:24px;color:var(--red2);
  background:#fff0f5;border:1px solid #f6c6cf;border-radius:12px;padding:6px 20px;margin:6px 0}
.cert-foot{display:flex;justify-content:space-between;align-items:flex-end;color:var(--muted);font-size:13px;
  margin-top:24px;padding-top:14px;border-top:1px dashed rgba(244,63,94,.4)}
.cert-seal{width:74px;height:74px;border-radius:50%;border:2px solid var(--red);color:var(--red2);
  display:flex;align-items:center;justify-content:center;font-family:'Outfit';font-weight:800;font-size:10px;
  text-align:center;line-height:1.15;transform:rotate(-8deg);background:#fff5f8;letter-spacing:.5px}

/* Footer */
.foot{text-align:center;color:#8a8fae;padding:34px 16px;border-top:1px solid var(--line);margin-top:20px}

/* Hearts + animations */
@keyframes float-heart{0%{opacity:1;transform:translateY(0) scale(.6)}100%{opacity:0;transform:translateY(-180px) scale(1.7)}}
.heart-particle{position:fixed;font-size:34px;pointer-events:none;z-index:60;animation:float-heart 1.7s ease-out forwards}
.finish-hero{text-align:center;padding:26px 0 14px}
.finish-quote{font-family:'Outfit';font-weight:800;font-size:clamp(20px,3.4vw,30px);margin:22px auto 0;max-width:640px;line-height:1.3;
  background:linear-gradient(120deg,#f43f5e,#3b6bff);-webkit-background-clip:text;background-clip:text;color:transparent}
.heart3d{width:180px;height:170px;margin:0 auto;background:url('heart.png') center/contain no-repeat;
  animation:beat .9s ease-in-out infinite;filter:drop-shadow(0 22px 36px rgba(244,63,94,.42))}
.heart3d.soft{filter:drop-shadow(0 22px 36px rgba(244,114,182,.4)) saturate(.82) brightness(1.06)}

/* Finish overlay (shown before results) */
.finish-overlay{position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:28px;background:
    radial-gradient(700px 460px at 50% 20%, rgba(244,63,94,.10), transparent 60%),
    linear-gradient(180deg,#fff5f8,#f4f0ff);animation:pop .45s ease}
.finish-overlay .msg{font-family:'Outfit',sans-serif;font-weight:800;font-size:clamp(21px,3.6vw,32px);color:#171a2b;
  max-width:640px;line-height:1.32;margin:30px auto 0;animation:rise .6s ease .1s both}
.finish-overlay .net{font-family:'Outfit',sans-serif;font-weight:800;font-size:clamp(18px,2.6vw,24px);margin-top:16px;
  color:var(--red2);animation:rise .6s ease .2s both}
.finish-overlay .prep{color:var(--muted);font-size:14px;margin-top:20px;letter-spacing:.5px;animation:pulse-fade 1.4s ease-in-out infinite}
@keyframes pulse-fade{0%,100%{opacity:.5}50%{opacity:1}}
@keyframes beat{0%,100%{transform:scale(1)}25%{transform:scale(1.16)}40%{transform:scale(1)}60%{transform:scale(1.08)}}
@keyframes pop{0%{opacity:0;transform:scale(.94)}100%{opacity:1;transform:scale(1)}}
@keyframes slide{0%{opacity:0;transform:translateX(14px)}100%{opacity:1;transform:translateX(0)}}
@keyframes rise{0%{opacity:0;transform:translateY(22px)}100%{opacity:1;transform:translateY(0)}}
@keyframes pulse{0%,100%{box-shadow:var(--shadow)}50%{box-shadow:0 0 0 4px rgba(225,29,72,.15)}}

@media(max-width:820px){.features{grid-template-columns:1fr}.exam-layout{grid-template-columns:1fr}.sidebar{position:static}}
@media print{
  body *{visibility:hidden!important}
  #cert, #cert *{visibility:visible!important}
  #cert{position:absolute;left:0;top:0;width:100%;margin:0;border-color:var(--red);box-shadow:none}
  .heart-particle{display:none!important}
}


/* ===== Admin panel (sol menü) ===== */
.admin-body{background:#f1f2f9}
.admin-wrap{display:grid;grid-template-columns:250px 1fr;min-height:100vh}
.admin-side{background:#fff;border-right:1px solid var(--line);padding:22px 16px;display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh}
.admin-side .brand2{display:flex;align-items:center;gap:10px;font-family:'Outfit';font-weight:700;color:var(--red);
  font-size:15px;letter-spacing:.5px;padding:6px 10px 20px;line-height:1.15}
.admin-side .brand2 .pin{font-size:20px}
.admin-side .brand2 b{color:#171a2b;font-weight:800}
.admin-nav{display:flex;flex-direction:column;gap:2px;flex:1}
.admin-side-foot{display:flex;flex-direction:column;gap:2px;border-top:1px solid var(--line);padding-top:10px;margin-top:10px}
.nav-tool-btn{flex:1;padding:6px 8px;font-size:11.5px;font-weight:700;color:var(--muted);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:8px;cursor:pointer;transition:background .15s,color .15s}
.nav-tool-btn:hover{background:rgba(255,255,255,.14);color:#fff}
.nav-group{border-radius:12px;overflow:hidden;margin-bottom:3px}
.nav-grp-toggle{width:100%;display:flex;align-items:center;gap:9px;padding:9px 12px;background:none;border:none;cursor:pointer;color:var(--muted);font-weight:800;font-size:11.5px;letter-spacing:.6px;text-transform:uppercase;transition:background .15s,color .15s}
.nav-grp-toggle:hover{background:rgba(148,120,255,.08);color:#171a2b}
.nav-grp-dot{width:9px;height:9px;border-radius:99px;background:var(--gc);box-shadow:0 0 0 3px color-mix(in srgb,var(--gc) 22%,transparent);flex:0 0 auto}
.nav-grp-title{flex:1;text-align:left}
.nav-grp-chev{transition:transform .2s;font-size:16px;opacity:.7}
.nav-group.open .nav-grp-chev{transform:rotate(90deg)}
.nav-grp-items{display:none;flex-direction:column;gap:2px;padding:2px 0 6px 8px;border-left:2px solid color-mix(in srgb,var(--gc) 55%,transparent);margin-left:16px}
.nav-group.open .nav-grp-items{display:flex}
.nav-group .nav-link.on{background:var(--gc);box-shadow:0 8px 20px -10px var(--gc)}
body[data-theme="dark"] .nav-grp-toggle:hover{color:#fff}
.nav-link{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:12px;color:var(--muted);
  font-weight:600;font-size:14.5px;transition:background .15s,color .15s;position:relative}
.nav-link i{width:19px;height:19px}
.nav-link:hover{background:#f4f5fb;color:#171a2b}
.nav-link.on{background:linear-gradient(135deg,var(--violet),var(--blue));color:#fff;box-shadow:0 10px 22px -12px rgba(91,90,255,.7)}
.nav-badge{margin-left:auto;background:var(--red);color:#fff;font-size:11px;font-weight:800;min-width:20px;height:20px;
  border-radius:99px;display:inline-flex;align-items:center;justify-content:center;padding:0 6px}
.admin-main{padding:28px 34px 70px;max-width:1100px}
.admin-top{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:22px;flex-wrap:wrap}
.admin-top h1{font-family:'Outfit'}
.adm-select{padding:12px 14px;border-radius:12px;border:1px solid var(--line);background:#fff;color:#171a2b;
  font-size:14.5px;font-family:inherit}
.adm-select:focus{outline:none;border-color:var(--violet);box-shadow:0 0 0 3px rgba(124,58,237,.15)}
@media(max-width:820px){
  .admin-wrap{grid-template-columns:1fr}
  .admin-side{position:static;height:auto;flex-direction:row;flex-wrap:wrap;align-items:center;overflow-x:auto}
  .admin-side .brand2{padding:6px 10px;width:100%}
  .admin-nav{flex-direction:row;flex-wrap:wrap;flex:1}
  .admin-side-foot{flex-direction:row;border-top:none;padding-top:0;margin-top:0}
  .nav-link span{display:none}
  .admin-main{padding:20px 16px 60px}
}

/* ===== Sıralama (Leaderboard) ===== */
.lb-head{margin:6px 0 18px}
.lb-tabs{display:inline-flex;gap:6px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:5px;margin-bottom:8px}
.lb-tab{border:none;background:transparent;padding:9px 20px;border-radius:999px;font-weight:700;color:var(--muted);cursor:pointer;font-family:inherit;font-size:14px;transition:background .15s,color .15s}
.lb-tab.on{background:linear-gradient(135deg,var(--red),var(--pink,#f472b6));color:#fff}
.lb-card{padding:8px}
.lb-row{display:grid;grid-template-columns:56px 1fr auto auto;align-items:center;gap:14px;padding:14px 16px;border-radius:14px;transition:background .15s}
.lb-row + .lb-row{border-top:1px solid var(--line)}
.lb-row:hover{background:#fff5f8}
.lb-row.top{background:linear-gradient(100deg,#fff0f5,#fff)}
.lb-row.me{background:#fdeaf1;box-shadow:inset 3px 0 0 var(--red)}
.lb-rank{text-align:center}
.lb-medal{font-size:26px}
.lb-num{font-family:'Outfit';font-weight:800;color:var(--muted);font-size:17px}
.lb-name{font-weight:700;color:#171a2b}
.lb-meta{color:var(--muted);font-size:13px;white-space:nowrap}
.lb-net{font-family:'Outfit';font-weight:800;font-size:20px;color:var(--red2);white-space:nowrap}
.lb-net small{font-size:12px;color:var(--muted);font-weight:600}
@media(max-width:560px){.lb-row{grid-template-columns:44px 1fr auto;gap:8px}.lb-meta{display:none}}


/* ===== Paywall (ücretsiz önizleme sonrası) ===== */
.finish-overlay.paywall{background:radial-gradient(700px 460px at 50% 15%, rgba(244,63,94,.10), transparent 60%),linear-gradient(180deg,#fff5f8,#f4f0ff);overflow-y:auto}
.pw-lock{font-size:60px;filter:drop-shadow(0 10px 22px rgba(244,63,94,.35));animation:rise .5s ease both}
.pw-sub{color:#4b4f6b;max-width:560px;margin:12px auto 0;line-height:1.6;font-size:15px}
.pw-cards{display:flex;gap:18px;flex-wrap:wrap;justify-content:center;margin-top:26px}
.pw-card{position:relative;background:#fff;border:1px solid #f0d3db;border-radius:18px;padding:22px 24px;width:250px;text-align:center;box-shadow:0 22px 50px -30px rgba(244,63,94,.45)}
.pw-card.master{border-color:var(--red);background:linear-gradient(160deg,#fff,#fff0f5)}
.pw-badge{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--red);color:#fff;font-size:11px;font-weight:800;padding:4px 12px;border-radius:999px;white-space:nowrap}
.pw-t{font-family:'Outfit';font-weight:800;font-size:18px;color:#171a2b}
.pw-d{color:var(--muted);font-size:13px;margin:6px 0 10px}
.pw-price{font-family:'Outfit';font-weight:800;font-size:30px;color:var(--red2);margin-bottom:14px}
.pw-back{display:inline-block;margin-top:22px;color:var(--muted);font-weight:600}

/* ===== Rozetler ===== */
.badge-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.badge-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px 14px;text-align:center;opacity:.55;filter:grayscale(.7);transition:transform .15s,box-shadow .15s}
.badge-card.got{opacity:1;filter:none;border-color:#f6c6cf;background:linear-gradient(160deg,#fff,#fff5f8);box-shadow:0 16px 36px -24px rgba(244,63,94,.5)}
.badge-card.got:hover{transform:translateY(-3px)}
.badge-ic{font-size:34px;line-height:1}
.badge-nm{font-family:'Outfit';font-weight:800;margin-top:8px;color:#171a2b;font-size:14px}
.badge-ds{color:var(--muted);font-size:12px;margin-top:3px}

/* ===== Admin soru kartları ===== */
.adm-q{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px 18px;margin-bottom:12px}
.adm-q .aq-top{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.adm-q .aq-q{font-weight:600;margin:6px 0 10px;color:#171a2b}
.adm-q .aq-opt{padding:5px 10px;border-radius:9px;margin:3px 0;color:#4b4f6b;font-size:14px}
.adm-q .aq-opt.correct{background:#e9fbf1;color:#0f9d58;font-weight:700;border:1px solid #b7ecc9}
.adm-q .aq-sol{color:var(--muted);font-size:13px;margin-top:8px;border-top:1px dashed var(--line);padding-top:8px}
.adm-q .aq-ans{background:var(--red);color:#fff;font-weight:800;border-radius:8px;padding:2px 10px;font-size:13px}


/* ===== Geniş sınav ekranı (take/practice) ===== */
.wrap:has(.exam-head){max-width:1320px}
.exam-layout{grid-template-columns:1fr 320px}
.qcard{padding:34px 38px}
.qcard .qtext{font-size:18px;line-height:1.55}
.qcard .opt{font-size:15.5px;padding:14px 16px}
@media(max-width:820px){
  .qcard{padding:20px 18px}
  .qcard .qtext{font-size:16px}
  .exam-head{gap:8px}
  .exam-head .timer{font-size:18px}
}

/* Otomatik geç anahtarı */
.auto-adv{display:inline-flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--line);
  border-radius:999px;padding:7px 14px;font-size:13.5px;font-weight:600;color:var(--muted);cursor:pointer;user-select:none}
.auto-adv input{width:16px;height:16px;accent-color:var(--red);margin:0}
.auto-adv:hover{border-color:var(--red);color:var(--red2)}

/* Zaman/motivasyon toast */
.moti-toast{position:fixed;top:18px;left:50%;transform:translateX(-50%) translateY(-24px);z-index:90;
  background:rgba(23,26,43,.94);color:#fff;padding:12px 22px;border-radius:999px;font-weight:600;font-size:14px;
  box-shadow:0 16px 40px -14px rgba(0,0,0,.5);opacity:0;transition:opacity .35s,transform .35s;max-width:90vw;text-align:center}
.moti-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* Sayfalama */
.pager{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin:14px 0}
.pg-btn{padding:8px 14px;border-radius:10px;border:1px solid var(--line);background:#fff;color:#171a2b;font-weight:700;font-size:14px}
.pg-btn:hover{border-color:var(--red);color:var(--red2)}
.pg-btn.on{background:linear-gradient(135deg,var(--red),#f472b6);color:#fff;border:none}
.pg-btn.dis{opacity:.4;pointer-events:none}

/* Modal (satın alma / ödeme) */
.modal-ov{position:fixed;inset:0;z-index:120;display:none;align-items:center;justify-content:center;padding:20px;
  background:rgba(23,18,34,.55);backdrop-filter:blur(4px);overflow-y:auto}
.modal-ov.show{display:flex;animation:pop .3s ease}
.modal-card{background:#fff;border-radius:22px;padding:28px;max-width:440px;width:100%;position:relative;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.5);border:1px solid #f0d3db}
.modal-x{position:absolute;top:14px;right:16px;background:none;border:none;font-size:20px;color:var(--muted);cursor:pointer;line-height:1}
.modal-x:hover{color:var(--red)}

/* Rozet kutlama popup + konfeti */
.badge-pop{position:fixed;inset:0;z-index:130;display:flex;align-items:center;justify-content:center;padding:20px;
  background:rgba(23,18,34,.6);backdrop-filter:blur(5px)}
.badge-pop-card{background:#fff;border-radius:24px;padding:32px 30px;max-width:480px;width:100%;text-align:center;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.5);border:2px solid var(--red);animation:pop .45s ease}
.bp-conf{font-size:52px;animation:beat 1s ease-in-out infinite}
.bp-badges{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.bp-badge{background:linear-gradient(160deg,#fff,#fff5f8);border:1px solid #f6c6cf;border-radius:16px;padding:16px;width:140px;box-shadow:0 16px 36px -24px rgba(244,63,94,.5)}
.bp-ic{font-size:40px}
.bp-nm{font-family:'Outfit';font-weight:800;margin-top:6px;font-size:14px}
.bp-ds{color:var(--muted);font-size:12px;margin-top:3px}
.confetti{position:fixed;top:-30px;font-size:22px;z-index:131;pointer-events:none;animation:confetti-fall 2.6s linear forwards}
@keyframes confetti-fall{0%{transform:translateY(-30px) rotate(0);opacity:1}100%{transform:translateY(100vh) rotate(540deg);opacity:.2}}

/* ===== Admin — profesyonel dokunuşlar ===== */
.admin-main .card{border-radius:16px;padding:22px 24px}
.admin-main h1{font-size:26px}
.admin-main .section-title{margin:26px 0 12px;font-size:13px;letter-spacing:.5px;text-transform:uppercase;color:var(--muted);font-weight:800}
.admin-main table{width:100%;border-collapse:collapse}
.admin-main table th{background:#faf9ff;color:var(--muted);font-weight:700;font-size:12.5px;text-transform:uppercase;letter-spacing:.4px;padding:12px 14px;text-align:left;border-bottom:1px solid var(--line)}
.admin-main table td{padding:12px 14px;border-bottom:1px solid #f1f2f9;font-size:14px}
.admin-main table tr:last-child td{border-bottom:none}
.admin-main table tbody tr:hover{background:#fbf7fb}
.admin-main .field label{font-size:12.5px;text-transform:uppercase;letter-spacing:.3px}
.admin-main .field input,.admin-main .field textarea,.admin-main .adm-select{border-radius:11px}
.admin-main .stat{transition:transform .15s,box-shadow .15s}
.admin-main .stat:hover{transform:translateY(-2px);box-shadow:0 18px 40px -26px rgba(91,90,255,.6)}
.exam-admin-row{border:1px solid var(--line);border-radius:16px;padding:18px 20px;margin-bottom:12px;background:#fff;transition:box-shadow .15s}
.exam-admin-row:hover{box-shadow:0 18px 44px -28px rgba(244,63,94,.4);border-color:#f6c6cf}


/* ===== Oyunlaştırılmış dashboard ===== */
.hero-game{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;
  background:linear-gradient(135deg,#fff5f8,#f3f0ff);border:1px solid #f0d9e4;border-radius:22px;padding:22px 26px;margin:8px 0 16px;
  box-shadow:0 24px 60px -34px rgba(244,63,94,.4)}
.hg-left{display:flex;align-items:center;gap:16px;min-width:280px;flex:1}
.hg-avatar{width:64px;height:64px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;
  font-family:'Outfit';font-weight:800;font-size:28px;color:#fff;background:linear-gradient(135deg,var(--red),#f472b6);
  box-shadow:0 12px 26px -12px rgba(244,63,94,.7)}
.hg-hello{font-size:15px;color:#4b4f6b}
.hg-level{font-family:'Outfit';font-weight:700;margin:2px 0 8px;font-size:16px}
.hg-lvic{font-size:20px}
.hg-xpbar{height:12px;border-radius:99px;background:#efe7ee;overflow:hidden;max-width:340px}
.hg-xpbar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--violet),var(--red))}
.hg-xptext{font-size:12.5px;color:var(--muted);margin-top:6px}
.hg-mini{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.hgm{background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px 16px;text-align:center;min-width:88px}
.hgm-n{font-family:'Outfit';font-weight:800;font-size:22px;color:var(--red2)}
.hgm-l{font-size:11.5px;color:var(--muted);margin-top:2px}
.alert-strip{background:#fff4e5;border:1px solid #ffd9a8;color:#9a5b00;border-radius:14px;padding:12px 16px;margin-bottom:14px;font-size:14px}
.dash-grid{display:grid;grid-template-columns:1fr 1.3fr;gap:16px;margin-bottom:6px}
.goal-card .goal-bar{height:14px;border-radius:99px;background:#efe7ee;overflow:hidden;margin-top:12px}
.goal-card .goal-bar i{display:block;height:100%;background:linear-gradient(90deg,#22c55e,#16a34a);border-radius:99px}
.rank-ctx .rc-row{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:12px;border-bottom:1px solid #f1f2f9}
.rank-ctx .rc-row:last-of-type{border-bottom:none}
.rank-ctx .rc-row.me{background:#fdeaf1;box-shadow:inset 3px 0 0 var(--red);border-radius:12px}
.rc-pos{font-family:'Outfit';font-weight:800;color:var(--muted);width:52px}
.rc-name{flex:1;font-weight:700}
.rc-xp{font-family:'Outfit';font-weight:800;color:var(--red2)}
.rc-goal{margin-top:12px;background:#f3f0ff;border:1px solid #ded8ff;color:#4a3ca8;border-radius:12px;padding:12px 14px;font-size:14px}
@media(max-width:820px){.dash-grid{grid-template-columns:1fr}.hg-mini{grid-template-columns:repeat(2,1fr)}}


/* Bildirim zili + satırları */
.bell{position:relative;font-size:20px;margin-right:6px;text-decoration:none}
.bell-badge{position:absolute;top:-6px;right:-8px;background:var(--red);color:#fff;font-size:10px;font-weight:800;border-radius:99px;padding:1px 5px;min-width:16px;text-align:center}
.hello{color:var(--muted);font-weight:600;font-size:14px;margin-right:4px}
.notif-row{display:flex;gap:14px;align-items:flex-start;padding:14px 6px;border-bottom:1px solid #f1f2f9}
.notif-row:last-child{border-bottom:none}
.notif-ic{font-size:26px;line-height:1;flex:none}
.notif-body{font-size:14.5px;color:#171a2b}
.notif-time{color:var(--muted);font-size:12px;margin-top:3px}

/* Bildirim zili açılır önizleme */
.bell-wrap{position:relative;display:inline-block}
.bell-drop{position:absolute;right:0;top:36px;width:320px;max-width:86vw;background:#fff;border:1px solid var(--line);
  border-radius:14px;box-shadow:0 24px 60px -20px rgba(0,0,0,.28);padding:8px;display:none;z-index:80}
.bell-drop.open{display:block;animation:pop .2s ease}
.bd-head{font-weight:800;font-family:'Outfit';padding:8px 10px 6px;font-size:14px}
.bd-empty{color:var(--muted);padding:14px 10px;font-size:13.5px}
.bd-item{display:flex;gap:10px;align-items:flex-start;padding:10px;border-top:1px solid #f1f2f9;font-size:13.5px}
.bd-item span{font-size:20px;flex:none}
.bd-time{color:var(--muted);font-size:11px;margin-top:2px}
.bd-all{display:block;text-align:center;padding:10px;color:var(--red2);font-weight:700;border-top:1px solid #f1f2f9;margin-top:4px}

/* ===== Meydan Okuma (Düello) ===== */
.duel-head{margin:6px 0 14px}
.duel-head h1{font-family:'Outfit';font-size:30px}
.duel-q .duel-opt{display:flex;align-items:flex-start;gap:8px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;margin-top:8px;cursor:pointer;transition:background-color .15s ease,border-color .15s ease}
.duel-q .duel-opt:hover{background:#fff5f8;border-color:#f6c6cf}
.duel-q .duel-opt input{margin-top:3px}
.duel-q .duel-opt:has(input:checked){background:#ffe9f0;border-color:var(--red)}

/* ===== Düello zaman çubuğu ===== */
.duel-timerbar{display:flex;align-items:center;gap:12px;margin:10px 0 16px}
.duel-time{font-family:'Outfit';font-weight:800;font-size:26px;min-width:52px;text-align:center;background:#fff;border:2px solid var(--red);color:var(--red);border-radius:12px;padding:4px 0}
.duel-bar{flex:1;height:10px;background:#f1d0d8;border-radius:99px;overflow:hidden}
.duel-bar span{display:block;height:100%;width:100%;background:linear-gradient(90deg,#fb7185,#e11d48);transition:width 1s linear}
.duel-qnum{color:var(--muted);font-size:14px;white-space:nowrap}
.duel-ans{display:block;width:100%;text-align:left;padding:12px 14px;border:1px solid var(--line);border-radius:12px;margin-top:8px;background:#fff;cursor:pointer;font-size:15px;transition:background-color .15s,border-color .15s,transform .08s}
.duel-ans:hover{background:#fff5f8;border-color:#f6c6cf}
.duel-ans:active{transform:scale(.99)}
.duel-ans.sel{background:#ffe9f0;border-color:var(--red);font-weight:600}
/* ===== Düello şampiyonları ===== */
.champ-list{display:flex;flex-direction:column;gap:6px}
.champ-row{display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:12px;background:#faf7fb}
.champ-row.me{background:#ffe9f0;outline:1px solid #f6c6cf}
.champ-rank{font-size:18px;min-width:34px;text-align:center;font-weight:800}
.champ-name{flex:1;font-weight:600}
.champ-wins{color:var(--muted);font-size:14px}
.champ-wins b{color:var(--red2)}
/* ===== Arkadaş aktivite akışı ===== */
.act-feed{display:flex;flex-direction:column}
.act-row{display:flex;align-items:center;gap:10px;padding:9px 2px;border-bottom:1px solid #f1f2f9}
.act-row:last-child{border-bottom:none}
.act-ic{font-size:18px;min-width:26px;text-align:center}
.act-tx{flex:1;font-size:14.5px}
.act-tm{color:var(--muted);font-size:12px;white-space:nowrap}

/* ===== Sınav Etkinlikleri ===== */
.ev-hero{margin:6px 0 14px}
.ev-hero h1{font-family:'Outfit';font-size:30px}
.ann-strip{display:flex;gap:12px;overflow-x:auto;padding-bottom:6px;margin-bottom:8px}
.ann-card{min-width:260px;max-width:300px;background:linear-gradient(135deg,#fff5f8,#ffe9f0);border:1px solid #f6c6cf;border-radius:16px;padding:14px;text-decoration:none;color:inherit;display:flex;flex-direction:column;gap:4px;transition:transform .12s,box-shadow .12s}
.ann-card:hover{transform:translateY(-3px);box-shadow:0 10px 30px rgba(225,29,72,.14)}
.ann-tag{font-size:11px;font-weight:800;color:#fff;background:var(--red);border-radius:99px;padding:2px 10px;align-self:flex-start}
.ann-body{color:var(--muted);font-size:13px}
.ann-date{color:var(--muted);font-size:11px}
.ev-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px}
.ev-card{background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:0 6px 24px rgba(20,14,40,.05);transition:transform .14s,box-shadow .14s}
.ev-card:hover{transform:translateY(-4px);box-shadow:0 16px 44px rgba(225,29,72,.14)}
.ev-card.featured{border-color:var(--red);box-shadow:0 10px 34px rgba(225,29,72,.16)}
.ev-cover{height:130px;background:linear-gradient(135deg,#fb7185,#e11d48);background-size:cover;background-position:center;position:relative;display:flex;align-items:center;justify-content:center}
.ev-cover-emoji{font-size:52px;filter:drop-shadow(0 4px 10px rgba(0,0,0,.2))}
.ev-phase{position:absolute;top:10px;left:10px;color:#fff;font-weight:800;font-size:12px;border-radius:99px;padding:3px 12px}
.ev-prem,.ev-free{position:absolute;top:10px;right:10px;font-size:11px;font-weight:800;border-radius:99px;padding:3px 10px;background:rgba(0,0,0,.35);color:#fff}
.ev-body{padding:16px}
.ev-body h3{margin:0 0 4px;font-family:'Outfit';font-size:19px}
.ev-exam{color:var(--red2);font-weight:700;font-size:13px;margin-bottom:10px}
.ev-meta{display:flex;flex-wrap:wrap;gap:8px 14px;color:var(--muted);font-size:13px;margin-bottom:10px}
.ev-prize{background:#fff5e6;border:1px solid #ffe0b2;border-radius:10px;padding:6px 10px;font-size:13px;margin:4px 0}
.ev-countdown{font-size:14px;margin:10px 0;color:var(--ink)}
.ev-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.ev-detail-cover{height:220px;border-radius:20px;overflow:hidden;background:linear-gradient(135deg,#fb7185,#e11d48);background-size:cover;background-position:center;position:relative;margin:12px 0 18px;display:flex;align-items:flex-end}
.ev-detail-overlay{width:100%;padding:24px;background:linear-gradient(0deg,rgba(0,0,0,.55),transparent);color:#fff}
.ev-detail-overlay h1{margin:6px 0 2px;font-family:'Outfit';font-size:30px}
.ev-detail-count{margin-top:8px;font-size:15px}
.ev-myrank{background:#fff5f8;border:1px solid #f6c6cf;border-radius:12px;padding:10px 12px;margin-top:12px;font-size:14px}
.ev-exam-head .pill{font-weight:700}
.ev-result-hero{text-align:center;padding:20px;background:linear-gradient(135deg,#fff5f8,#ffe9f0);border:1px solid #f6c6cf;border-radius:20px;margin:10px 0 18px}
.ev-result-emoji{font-size:56px}
.ev-result-hero h1{font-family:'Outfit';font-size:26px;margin:4px 0}
.ev-score-big{font-family:'Outfit';font-weight:800;font-size:46px;color:var(--red)}
.ev-score-big span{font-size:18px;color:var(--muted);font-weight:600}
.ev-result-rankline{color:var(--ink);font-size:16px}
/* admin etkinlik form */
.ev-form-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.admin-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
@media(max-width:720px){.admin-grid{grid-template-columns:1fr}}
.fld{display:flex;flex-direction:column;gap:4px}
.fld>span{font-size:13px;color:var(--muted);font-weight:600}
.fld input,.fld textarea,.fld select{padding:9px 10px;border:1px solid var(--line);border-radius:10px;font-size:14px;width:100%;background:#fff;color:var(--ink);font-family:inherit}
.fld.chk{flex-direction:row;align-items:center;gap:8px}
.fld.chk>input{width:auto}
.fld.chk>span{color:var(--ink)}
.lb-tabs{display:flex;gap:8px;flex-wrap:wrap}
.lb-tab{padding:7px 16px;border-radius:99px;border:1px solid var(--line);text-decoration:none;color:var(--ink);font-weight:600;font-size:14px}
.lb-tab.on{background:var(--red);color:#fff;border-color:var(--red)}
@media(max-width:720px){.ev-form-grid{grid-template-columns:1fr}}

/* ===== Panel üst düzen: kategoriler solda, grafikler sağda ===== */
.top-layout{display:grid;grid-template-columns:1fr 330px;gap:22px;align-items:start;margin-top:8px}
.top-main .grid{grid-template-columns:repeat(2,1fr);gap:16px}
.wrap:has(.top-layout){max-width:1220px}
.exam .ex-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.exam .ex-ic{width:48px;height:48px;flex:none;border-radius:14px;display:grid;place-items:center;font-size:23px;
  background:linear-gradient(135deg,#fff0f5,#f0e9ff);border:1px solid var(--line);box-shadow:inset 0 1px 0 #fff}
.exam .ex-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
.exam .ex-actions .btn,.exam .ex-actions .btn-ghost{padding:10px 16px;font-size:13.5px;border-radius:12px}
.top-side .rank-ctx .rc-xp{font-size:12px}
@media(max-width:960px){.top-layout{grid-template-columns:1fr}.top-side{order:-1}}
@media(max-width:600px){.top-main .grid{grid-template-columns:1fr}}

/* ===== Rozet Vitrini ===== */
.trophy-case{background:linear-gradient(160deg,#fff,#fff5f8);border:1px solid #f6c6cf;border-radius:18px;padding:18px;margin-bottom:8px}
.tc-stats{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.tc-stat{flex:1;min-width:110px;text-align:center;background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px}
.tc-n{font-family:'Outfit';font-weight:800;font-size:24px;color:var(--red)}
.tc-l{font-size:12px;color:var(--muted)}
.tc-shelf{display:flex;gap:14px;flex-wrap:wrap}
.tc-empty{color:var(--muted);padding:10px}
.tc-badge{width:110px;text-align:center;background:#fff;border:1px solid #f6c6cf;border-radius:16px;padding:14px 8px;box-shadow:0 6px 20px rgba(225,29,72,.1);transition:transform .15s}
.tc-badge:hover{transform:translateY(-4px) scale(1.03)}
.tc-ic{font-size:38px;filter:drop-shadow(0 3px 6px rgba(225,29,72,.25))}
.tc-nm{font-size:12px;font-weight:700;margin-top:6px}

/* ===== Etkinlik Takvimi ===== */
.evcal-head{font-family:'Outfit';font-weight:800;font-size:18px;margin-bottom:10px;text-align:center;color:var(--red2)}
.evcal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.evcal-dn{text-align:center;font-size:12px;color:var(--muted);font-weight:700;padding:4px 0}
.evcal-cell{min-height:64px;border:1px solid var(--line);border-radius:10px;padding:4px;background:#fff;font-size:12px}
.evcal-cell.empty{background:transparent;border:none}
.evcal-cell.today{border-color:var(--red);box-shadow:0 0 0 2px rgba(225,29,72,.15)}
.evcal-cell.has{background:#fff5f8}
.evcal-d{font-weight:700;color:var(--ink)}
.evcal-ev{display:block;margin-top:3px;background:var(--red);color:#fff;border-radius:6px;padding:2px 5px;text-decoration:none;font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:640px){.evcal-cell{min-height:48px}.evcal-ev{font-size:8px}}
/* auth 3D tema */
.auth-3d{position:relative;overflow:hidden}
.auth-3d:before,.auth-3d:after{content:"";position:absolute;border-radius:50%;filter:blur(70px);opacity:.4;z-index:0}
.auth-3d:before{width:340px;height:340px;background:#fb7185;top:-90px;left:-70px}
.auth-3d:after{width:300px;height:300px;background:#e11d48;bottom:-90px;right:-60px}

@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.15)}}

/* ===== Split-screen 3D Auth (login/register) ===== */
.auth3-wrap{position:relative;min-height:calc(100vh - 180px);display:flex;align-items:center;justify-content:center;padding:18px 0 40px}
.auth3-wrap .blob{position:absolute;border-radius:50%;filter:blur(90px);z-index:0;pointer-events:none}
.auth3-wrap .blob.b1{width:420px;height:420px;background:rgba(251,91,120,.35);top:-120px;left:-80px;animation:float3 9s ease-in-out infinite}
.auth3-wrap .blob.b2{width:380px;height:380px;background:rgba(59,107,255,.28);bottom:-120px;right:-70px;animation:float3 11s ease-in-out infinite reverse}
.auth3-wrap .blob.b3{width:260px;height:260px;background:rgba(8,145,178,.22);top:40%;left:44%;animation:float3 13s ease-in-out infinite}
.auth3-card{position:relative;z-index:5;display:grid;grid-template-columns:1.05fr .95fr;width:100%;max-width:1040px;
  border-radius:30px;overflow:hidden;background:rgba(255,255,255,.62);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  border:1px solid rgba(255,255,255,.85);box-shadow:0 40px 90px -40px rgba(120,40,90,.55),inset 0 0 0 1px rgba(255,255,255,.5);animation:rise .6s ease}
/* Sol görsel panel */
.auth3-visual{position:relative;padding:48px 44px;color:#fff;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;
  background:linear-gradient(150deg,#e11d48 0%,#fb5b78 45%,#7c3aed 115%)}
.auth3-visual::before{content:"";position:absolute;width:300px;height:300px;border-radius:50%;background:rgba(255,255,255,.14);top:-90px;right:-70px;animation:float3 8s ease-in-out infinite}
.auth3-visual::after{content:"";position:absolute;width:180px;height:180px;border-radius:34px;background:rgba(255,255,255,.10);transform:rotate(22deg);bottom:-40px;left:-30px;animation:float3 10s ease-in-out infinite reverse}
.auth3-brand{position:relative;z-index:2;display:flex;align-items:center;gap:10px;font-family:'Outfit',sans-serif;font-weight:800;letter-spacing:1px;font-size:19px}
.auth3-brand .pin{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:12px;background:rgba(255,255,255,.2);box-shadow:inset 0 1px 0 rgba(255,255,255,.5)}
.auth3-hero{position:relative;z-index:2;margin:26px 0}
.auth3-hero .heart{width:96px;filter:drop-shadow(0 18px 30px rgba(0,0,0,.28));animation:float3 5.5s ease-in-out infinite}
.auth3-hero h2{font-family:'Outfit',sans-serif;font-size:clamp(26px,3.4vw,38px);line-height:1.1;margin:18px 0 10px;letter-spacing:-.02em;font-weight:800}
.auth3-hero p{margin:0;color:rgba(255,255,255,.9);font-size:15px;line-height:1.65;max-width:340px}
.auth3-feats{position:relative;z-index:2;list-style:none;padding:0;margin:22px 0 0;display:flex;flex-direction:column;gap:12px}
.auth3-feats li{display:flex;align-items:center;gap:12px;font-size:14.5px;font-weight:600}
.auth3-feats li .fi{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:11px;background:rgba(255,255,255,.18);font-size:17px;box-shadow:inset 0 1px 0 rgba(255,255,255,.4)}
.auth3-stats{position:relative;z-index:2;display:flex;gap:22px;margin-top:26px;padding-top:20px;border-top:1px solid rgba(255,255,255,.22)}
.auth3-stats .n{font-family:'Outfit',sans-serif;font-size:22px;font-weight:800;line-height:1}
.auth3-stats .l{font-size:11.5px;color:rgba(255,255,255,.82);margin-top:3px}
/* Sağ form paneli */
.auth3-form{padding:46px 46px;display:flex;flex-direction:column;justify-content:center;background:rgba(255,255,255,.45)}
.auth3-form .emoji{font-size:34px;animation:pulseSoft 2.4s ease-in-out infinite}
.auth3-form h1{font-family:'Outfit',sans-serif;font-size:27px;font-weight:800;letter-spacing:-.02em;margin:8px 0 4px}
.auth3-form .sub{color:var(--muted);font-size:14px;margin:0 0 22px}
.f3{position:relative;margin-bottom:18px}
.f3 input{width:100%;padding:22px 15px 9px;border:none;border-radius:15px;background:rgba(255,255,255,.92);color:#0f172a;font-size:15px;
  font-family:'Plus Jakarta Sans',sans-serif;box-shadow:inset 0 2px 6px rgba(30,20,60,.09),0 1px 0 rgba(255,255,255,1);transition:box-shadow .25s ease}
.f3 input:focus{outline:none;box-shadow:inset 0 2px 6px rgba(30,20,60,.08),inset 0 0 0 2px var(--violet),0 0 0 4px rgba(251,91,120,.16)}
.f3 label{position:absolute;left:15px;top:15px;color:var(--muted);font-size:14px;font-weight:500;pointer-events:none;transition:all .18s ease}
.f3 input:focus + label,.f3 input:not(:placeholder-shown) + label{top:7px;font-size:11px;font-weight:700;color:var(--red2);letter-spacing:.3px}
.f3-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.btn-3d{display:block;width:100%;padding:15px;margin-top:4px;font-family:'Outfit',sans-serif;font-size:16px;font-weight:800;letter-spacing:.3px;
  color:#fff;background:linear-gradient(135deg,var(--red2),var(--violet));border:none;border-radius:16px;cursor:pointer;
  box-shadow:0 6px 0 #a10c37,0 16px 26px -10px rgba(225,29,72,.55);transform:translateY(-2px);
  transition:transform .16s cubic-bezier(.34,1.56,.64,1),box-shadow .16s ease,filter .16s ease}
.btn-3d:hover{filter:brightness(1.06);transform:translateY(-3px);box-shadow:0 7px 0 #a10c37,0 22px 32px -10px rgba(225,29,72,.6)}
.btn-3d:active{transform:translateY(4px);box-shadow:0 0 0 #a10c37,0 4px 10px -6px rgba(225,29,72,.4)}
.auth3-note{color:var(--muted);font-size:12px;margin:-6px 0 14px;line-height:1.5}
.auth3-alt{color:var(--muted);font-size:14px;margin-top:18px;text-align:center}
.auth3-alt a{font-weight:700}
/* şifre göster/gizle */
.f3 .pw-toggle{position:absolute;right:10px;top:50%;transform:translateY(-50%);width:34px;height:34px;border:none;background:transparent;
  cursor:pointer;color:var(--muted);font-size:17px;display:grid;place-items:center;border-radius:9px;transition:background .15s,color .15s}
.f3 .pw-toggle:hover{background:rgba(225,29,72,.08);color:var(--red2)}
.f3 input.has-toggle{padding-right:46px}
/* canlı sosyal kanıt rozeti (görsel panelde) */
.auth3-pulse{position:relative;z-index:2;display:inline-flex;align-items:center;gap:9px;margin-top:18px;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.28);padding:9px 15px;border-radius:99px;
  font-size:13px;font-weight:600;backdrop-filter:blur(8px);box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}
.auth3-pulse .live-dot{width:9px;height:9px;border-radius:50%;background:#31d158;box-shadow:0 0 0 0 rgba(49,209,88,.7);animation:livePulse 1.8s ease-out infinite}
.auth3-pulse b{font-family:'Outfit',sans-serif;font-weight:800}
@keyframes livePulse{0%{box-shadow:0 0 0 0 rgba(49,209,88,.6)}70%{box-shadow:0 0 0 9px rgba(49,209,88,0)}100%{box-shadow:0 0 0 0 rgba(49,209,88,0)}}
@keyframes float3{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-16px) rotate(3deg)}}
@keyframes pulseSoft{0%,100%{opacity:.85;transform:scale(1)}50%{opacity:1;transform:scale(1.08)}}
@media(max-width:860px){
  .auth3-card{grid-template-columns:1fr;max-width:460px}
  .auth3-visual{display:none}
  .auth3-form{padding:34px 26px}
}

/* ===== Şampiyonlar vitrini ===== */
.champ-hero{text-align:center;padding:24px 16px 8px}
.champ-hero .crown{font-size:52px;filter:drop-shadow(0 12px 20px rgba(240,180,41,.5));animation:float3 4.5s ease-in-out infinite}
.champ-hero h1{font-family:'Outfit',sans-serif;font-size:clamp(28px,5vw,44px);font-weight:800;letter-spacing:-.02em;margin:8px 0 6px;
  background:linear-gradient(120deg,#f4a825,#e11d48 55%,#fb5b78);-webkit-background-clip:text;background-clip:text;color:transparent}
.champ-hero p{color:var(--muted);font-size:15px;max-width:560px;margin:0 auto;line-height:1.6}
.champ-card{background:#fff;border:1px solid var(--line);border-radius:22px;padding:24px;margin-top:22px;box-shadow:var(--shadow);position:relative;overflow:hidden}
.champ-card::before{content:"";position:absolute;inset:0 0 auto 0;height:5px;background:linear-gradient(90deg,#f4a825,#e11d48,#7c3aed)}
.champ-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin-bottom:18px}
.champ-head h3{font-family:'Outfit',sans-serif;font-size:20px;margin:0}
.champ-head .meta{color:var(--muted);font-size:13px}
.podium{display:grid;grid-template-columns:1fr 1.15fr 1fr;gap:14px;align-items:end}
.pod{border-radius:18px;padding:18px 14px;text-align:center;position:relative;border:1px solid var(--line);transition:transform .2s}
.pod:hover{transform:translateY(-4px)}
.pod .medal{font-size:34px;line-height:1}
.pod .pname{font-family:'Outfit',sans-serif;font-weight:800;font-size:16px;margin:8px 0 2px;color:#171a2b}
.pod .pcity{color:var(--muted);font-size:12px}
.pod .pscore{font-family:'Outfit',sans-serif;font-weight:800;font-size:22px;margin-top:8px}
.pod .pprize{margin-top:8px;font-size:12px;font-weight:700;padding:5px 11px;border-radius:99px;display:inline-block}
.pod.p1{background:linear-gradient(160deg,#fff7e0,#ffe9a8);border-color:#f0c94a;transform:translateY(-10px)}
.pod.p1 .pscore{color:#b8860b}.pod.p1 .pprize{background:#f4a825;color:#5b3d00}
.pod.p2{background:linear-gradient(160deg,#f6f8fb,#e7ecf3);border-color:#cbd5e1}
.pod.p2 .pscore{color:#64748b}.pod.p2 .pprize{background:#cbd5e1;color:#334155}
.pod.p3{background:linear-gradient(160deg,#fdeee2,#f7dcc4);border-color:#e0b592}
.pod.p3 .pscore{color:#b45309}.pod.p3 .pprize{background:#e0b592;color:#7c3a0f}
.champ-empty{text-align:center;padding:60px 20px;color:var(--muted)}
.champ-empty .ce-emoji{font-size:56px;margin-bottom:12px}
.vs-badge{display:inline-flex;align-items:center;gap:3px;font-size:11px;font-weight:800;color:#fff;background:linear-gradient(135deg,#16a34a,#059669);padding:2px 8px;border-radius:99px;vertical-align:middle;box-shadow:0 2px 6px -2px rgba(5,150,105,.6)}
.us-badge{display:inline-flex;align-items:center;font-size:10px;font-weight:700;color:#64748b;background:#eef2f7;border:1px solid #e2e8f0;padding:2px 7px;border-radius:99px;vertical-align:middle}

/* ===== Modern okul/şampiyona hero + podyum ===== */
.mhero{position:relative;overflow:hidden;border-radius:26px;padding:34px clamp(22px,4vw,44px);margin:6px 0 22px;color:#fff;
  background:linear-gradient(125deg,#4c1d95,#7c3aed 42%,#e11d48);
  box-shadow:0 40px 80px -44px rgba(124,58,237,.6);isolation:isolate}
.mhero::before{content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(560px 280px at 88% -30%,rgba(255,255,255,.22),transparent 60%),
  radial-gradient(420px 260px at 4% 120%,rgba(244,63,94,.4),transparent 60%)}
.mhero::after{content:"";position:absolute;inset:0;z-index:-1;opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.14) 1px,transparent 1px);background-size:22px 22px;mask:radial-gradient(400px 200px at 80% 0,#000,transparent)}
.mhero .mh-top{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.mh-logo{width:76px;height:76px;flex:none;border-radius:20px;display:grid;place-items:center;font-size:38px;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.32);backdrop-filter:blur(6px);box-shadow:inset 0 1px 0 rgba(255,255,255,.4)}
.mhero h1{font-family:'Outfit';font-weight:900;font-size:clamp(24px,3.4vw,38px);margin:0;line-height:1.08}
.mhero .mh-sub{opacity:.9;margin:5px 0 0;font-size:15px}
.mh-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.mh-chip{display:flex;flex-direction:column;background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.26);
  border-radius:14px;padding:10px 16px;backdrop-filter:blur(6px);min-width:96px}
.mh-chip b{font-family:'Outfit';font-weight:900;font-size:22px;line-height:1}
.mh-chip span{opacity:.85;font-size:12px;margin-top:3px}
.mh-verify{display:inline-flex;align-items:center;gap:5px;background:rgba(255,255,255,.92);color:#059669;
  font-weight:800;font-size:12px;padding:4px 12px;border-radius:99px;vertical-align:middle;margin-left:6px}

/* Podyum — profesyonel kaide/pedestal */
.podium-xp{display:grid;grid-template-columns:1fr 1.1fr 1fr;gap:16px;align-items:end;margin:8px 0 20px}
.podium-xp .pod{position:relative;text-align:center;padding:0}
.podium-xp .pcard{display:flex;flex-direction:column;align-items:center;gap:6px;padding:18px 12px 16px;background:#fff;border:1px solid var(--line);border-radius:16px 16px 0 0;box-shadow:0 -2px 0 rgba(0,0,0,.02)}
.podium-xp .av{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;font-family:'Outfit';font-weight:800;font-size:20px;color:#fff;background:#334155;position:relative}
.podium-xp .av::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid transparent}
.podium-xp .pn{font-weight:700;font-size:14px;color:#111827;line-height:1.2}
.podium-xp .pc{font-size:12px;color:#6b7280}
.podium-xp .px{font-family:'Outfit';font-weight:800;font-size:15px;color:#111827}
.podium-xp .px small{color:#9ca3af;font-weight:600;font-size:11px}
.podium-xp .base{border-radius:0 0 12px 12px;color:#fff;font-family:'Outfit';font-weight:900;letter-spacing:.5px;padding:10px 0;font-size:15px;position:relative}
.podium-xp .base .lbl{display:block;font-size:10px;font-weight:700;letter-spacing:1px;opacity:.85;margin-top:2px}
/* 1. sıra — altın */
.podium-xp .p1 .pcard{border-color:#e9cf7a;box-shadow:0 24px 44px -30px rgba(201,162,39,.55)}
.podium-xp .p1 .av{background:linear-gradient(160deg,#e6c15a,#b8860b)}
.podium-xp .p1 .av::after{border-color:#f1d68a}
.podium-xp .p1 .base{height:78px;background:linear-gradient(180deg,#d9b64a,#b8860b)}
.podium-xp .p1 .medal{font-size:20px;margin-bottom:-2px}
/* 2. sıra — gümüş */
.podium-xp .p2 .av{background:linear-gradient(160deg,#c7cdd6,#8b95a4)}
.podium-xp .p2 .av::after{border-color:#dfe4ea}
.podium-xp .p2 .base{height:58px;background:linear-gradient(180deg,#aab2be,#818b99)}
/* 3. sıra — bronz */
.podium-xp .p3 .av{background:linear-gradient(160deg,#cf9b6a,#a06a3b)}
.podium-xp .p3 .av::after{border-color:#e2b78c}
.podium-xp .p3 .base{height:46px;background:linear-gradient(180deg,#c08a56,#9c6636)}
@media(max-width:560px){.podium-xp{grid-template-columns:1fr;gap:10px}.podium-xp .base{height:auto!important;padding:8px 0}}
/* ===== Rehber / Nasıl Çalışır ===== */
.guide-hero{text-align:center;padding:26px 16px 6px}
.guide-hero .gi{font-size:50px;filter:drop-shadow(0 12px 22px rgba(124,58,237,.4));animation:float3 5s ease-in-out infinite}
.guide-hero h1{font-family:'Outfit',sans-serif;font-size:clamp(28px,5vw,42px);font-weight:800;letter-spacing:-.02em;margin:8px 0 6px;
  background:linear-gradient(120deg,var(--red2),var(--violet) 55%,var(--blue));-webkit-background-clip:text;background-clip:text;color:transparent}
.guide-hero p{color:var(--muted);font-size:15px;max-width:600px;margin:0 auto;line-height:1.6}
.guide-quick{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:22px 0}
.gq{background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px;text-align:center;box-shadow:var(--shadow);transition:transform .2s}
.gq:hover{transform:translateY(-4px)}
.gq .n{font-family:'Outfit',sans-serif;font-weight:800;font-size:22px;color:var(--red2)}
.gq .l{color:var(--muted);font-size:12.5px;margin-top:4px}
.acc{background:#fff;border:1px solid var(--line);border-radius:18px;margin-bottom:12px;overflow:hidden;box-shadow:var(--shadow)}
.acc summary{list-style:none;cursor:pointer;padding:18px 22px;display:flex;align-items:center;gap:12px;font-family:'Outfit',sans-serif;font-weight:700;font-size:16.5px;transition:background .15s}
.acc summary::-webkit-details-marker{display:none}
.acc summary:hover{background:#faf7ff}
.acc summary .ai{font-size:22px}
.acc summary .chev{margin-left:auto;color:var(--muted);transition:transform .2s}
.acc[open] summary .chev{transform:rotate(180deg)}
.acc[open] summary{border-bottom:1px solid var(--line)}
.acc .acc-body{padding:18px 22px;color:#3d4160;font-size:14.5px;line-height:1.7}
.acc .acc-body b{color:var(--red2)}
.acc .acc-body ul{margin:8px 0 0;padding-left:18px}
.acc .acc-body li{margin-bottom:7px}
.gtable{width:100%;border-collapse:collapse;margin-top:10px}
.gtable th,.gtable td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--line);font-size:14px}
.gtable th{color:var(--muted);font-weight:700;font-size:12.5px;text-transform:uppercase;letter-spacing:.5px}
.gtable td b{color:var(--red2)}
.lvl-row{display:flex;align-items:center;gap:12px;padding:9px 0;border-bottom:1px solid var(--line)}
.lvl-row:last-child{border-bottom:none}
.lvl-row .lv-ic{font-size:22px;width:34px;text-align:center}
.lvl-row .lv-nm{font-family:'Outfit',sans-serif;font-weight:700;flex:1}
.lvl-row .lv-xp{color:var(--muted);font-size:13px}
.formula{background:linear-gradient(135deg,#fff0f5,#f0e9ff);border:1px solid #e6ddff;border-radius:14px;padding:14px 16px;margin:10px 0;
  font-family:'Outfit',sans-serif;font-weight:700;color:#171a2b;font-size:15px}
/* ===== Tema Seçici ===== */
.theme-switch{position:relative;display:inline-block}
.ts-btn{width:38px;height:38px;border-radius:12px;border:1px solid var(--line);background:var(--card);cursor:pointer;font-size:17px;
  display:grid;place-items:center;transition:.15s;box-shadow:var(--shadow)}
.ts-btn:hover{transform:translateY(-1px);border-color:var(--violet)}
.ts-menu{position:absolute;right:0;top:46px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:8px;
  box-shadow:0 20px 50px -18px rgba(60,40,120,.5);display:none;flex-direction:column;gap:2px;min-width:170px;z-index:60}
.ts-menu.open{display:flex;animation:pop .18s ease}
.ts-item{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:10px;color:var(--text);font-size:14px;font-weight:600;text-decoration:none}
.ts-item:hover{background:rgba(124,58,237,.1);color:var(--text)}
.ts-item.on{background:rgba(124,58,237,.14)}
.ts-dot{width:15px;height:15px;border-radius:50%;flex:none;box-shadow:inset 0 0 0 2px rgba(255,255,255,.6)}
/* admin tema swatch */
.adm-theme{padding:6px 8px 10px}
.adm-theme-lbl{font-size:11px;font-weight:700;color:#9aa2c0;text-transform:uppercase;letter-spacing:.5px;margin-bottom:7px}
.adm-theme-row{display:flex;gap:7px;flex-wrap:wrap}
.adm-swatch{width:22px;height:22px;border-radius:50%;border:2px solid transparent;box-shadow:0 0 0 1px rgba(0,0,0,.1);transition:.15s}
.adm-swatch:hover{transform:scale(1.15)}
.adm-swatch.on{border-color:#fff;box-shadow:0 0 0 2px var(--red2)}

/* ===== Temalar ===== */
body[data-theme="ocean"]{--red:#0ea5e9;--red2:#0284c7;--violet:#0891b2;--blue:#3b82f6;--cyan:#06b6d4;
  --bodybg:radial-gradient(900px 480px at 10% -6%,rgba(14,165,233,.12),transparent 60%),radial-gradient(820px 460px at 94% 2%,rgba(59,130,246,.12),transparent 55%),linear-gradient(180deg,#f4f9fe,#e9f2fb)}
body[data-theme="emerald"]{--red:#10b981;--red2:#059669;--violet:#14b8a6;--blue:#22c55e;--cyan:#06b6d4;
  --bodybg:radial-gradient(900px 480px at 10% -6%,rgba(16,185,129,.12),transparent 60%),radial-gradient(820px 460px at 94% 2%,rgba(34,197,94,.10),transparent 55%),linear-gradient(180deg,#f3fbf6,#e8f6ee)}
body[data-theme="neon"]{--red:#a855f7;--red2:#9333ea;--violet:#d946ef;--blue:#8b5cf6;--cyan:#c026d3;
  --bodybg:radial-gradient(900px 480px at 10% -6%,rgba(168,85,247,.14),transparent 60%),radial-gradient(820px 460px at 94% 2%,rgba(217,70,239,.12),transparent 55%),linear-gradient(180deg,#f9f5ff,#f1e9fb)}
body[data-theme="amber"]{--red:#f59e0b;--red2:#d97706;--violet:#f97316;--blue:#eab308;--cyan:#f59e0b;
  --bodybg:radial-gradient(900px 480px at 10% -6%,rgba(245,158,11,.14),transparent 60%),radial-gradient(820px 460px at 94% 2%,rgba(249,115,22,.12),transparent 55%),linear-gradient(180deg,#fffaf0,#fdf3e3)}
/* Gece (dark) */
body[data-theme="dark"]{--text:#e8eaf6;--muted:#9aa3c7;--panel:#1a1f37;--panel2:#1a1f37;--card:#1a1f37;--exambg:#1a1f37;
  --line:#2b3157;--heading:#ffffff;--topbar:rgba(18,22,42,.9);--shadow:0 1px 2px rgba(0,0,0,.3),0 18px 40px -22px rgba(0,0,0,.7);
  --red:#fb7185;--red2:#f43f5e;--violet:#c084fc;--blue:#818cf8;--cyan:#22d3ee;
  --bodybg:radial-gradient(900px 480px at 10% -6%,rgba(124,58,237,.22),transparent 60%),radial-gradient(820px 460px at 94% 2%,rgba(59,107,255,.18),transparent 55%),linear-gradient(180deg,#0d1022,#141833)}
body[data-theme="dark"] h1,body[data-theme="dark"] h2,body[data-theme="dark"] h3{color:var(--heading)}
body[data-theme="dark"] .btn-ghost{background:#232a4d;color:#e8eaf6;border-color:#2b3157}
body[data-theme="dark"] .btn-ghost:hover{background:#2b3357}
body[data-theme="dark"] .card,body[data-theme="dark"] .feature,body[data-theme="dark"] .exam{box-shadow:0 18px 44px -26px rgba(0,0,0,.8)}
body[data-theme="dark"] .flash{background:#232a4d;border-color:#2b3157;color:#e8eaf6}
body[data-theme="dark"] .admin-side,body[data-theme="dark"] .admin-body{background:#141833}
body[data-theme="dark"] .admin-side{border-right-color:#2b3157}
body[data-theme="dark"] .nav-link{color:#c3c9e8}
body[data-theme="dark"] .nav-link.on{background:#232a4d;color:#fff}
body[data-theme="dark"] table th{color:#9aa3c7}
body[data-theme="dark"] .ts-btn{background:#232a4d}
body[data-theme="dark"] .goal-bar,body[data-theme="dark"] .hg-xpbar{background:#2b3157}
body[data-theme="dark"] .hero-game{background:linear-gradient(135deg,#1e2647,#241a3f);border-color:#2b3157}
body[data-theme="dark"] .hgm{background:#232a4d;border-color:#2b3157}
body[data-theme="dark"] .hg-hello{color:#c3c9e8}
body[data-theme="dark"] .goal-card .goal-bar,body[data-theme="dark"] .rank-ctx .rc-row{border-color:#2b3157}
body[data-theme="dark"] .goal-card .goal-bar{background:#2b3157}
body[data-theme="dark"] .rank-ctx .rc-row.me{background:rgba(244,63,94,.18)}
body[data-theme="dark"] .badge-card{background:#1a1f37;border-color:#2b3157}
body[data-theme="dark"] .alert-strip{background:#3a2a12;border-color:#5c4420;color:#fcd9a0}
body[data-theme="dark"] .act-row{border-color:#2b3157}
body[data-theme="dark"] .ann-card{background:#1a1f37;border-color:#2b3157}
body[data-theme="dark"] .pill{background:#2b3157;color:#c3c9e8}
body[data-theme="dark"] .badge.soon{background:#2b3157;color:#c9b8f0}
body[data-theme="dark"] .brand b{color:#fff}
body[data-theme="dark"] .exam .desc,body[data-theme="dark"] .feature p{color:#aab2d6}
/* ===== Kırmızı kayan yazı (marquee) ===== */
.marquee{display:flex;align-items:stretch;gap:0;margin:0 0 16px;border-radius:14px;overflow:hidden;
  background:linear-gradient(135deg,#e11d48,#f43f5e);box-shadow:0 10px 26px -12px rgba(225,29,72,.65)}
.marquee .mq-label{flex:none;display:flex;align-items:center;gap:6px;background:rgba(0,0,0,.22);color:#fff;font-weight:800;
  font-family:'Outfit',sans-serif;font-size:12.5px;letter-spacing:.6px;padding:0 16px}
.marquee .mq-view{overflow:hidden;flex:1;position:relative}
.marquee .mq-track{display:inline-flex;align-items:center;white-space:nowrap;padding:12px 0;will-change:transform;animation:mqScroll 26s linear infinite}
.marquee:hover .mq-track{animation-play-state:paused}
.marquee .mq-item{color:#fff;text-decoration:none;font-size:14px;font-weight:600;padding:0 4px}
.marquee .mq-item b{font-weight:800}
.marquee .mq-sep{color:rgba(255,255,255,.6);padding:0 14px}
@keyframes mqScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* ===== Belirgin Duyurular ===== */
.ann-hero{margin:0 0 18px}
.ann-hero-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.ann-hero-all{font-size:13px;color:var(--red2);font-weight:700}
.ann-card.ann-imp{border-color:var(--red2);box-shadow:0 0 0 1px rgba(225,29,72,.25),0 14px 30px -18px rgba(225,29,72,.5)}
.ann-tag.imp{background:var(--red2);color:#fff}
/* ===== Yeniden Onay (reconsent) ===== */
.reconsent-overlay{position:fixed;inset:0;z-index:2000;display:flex;align-items:center;justify-content:center;padding:18px;
  background:rgba(12,10,30,.66);backdrop-filter:blur(6px)}
.reconsent-box{max-width:460px;width:100%;background:var(--card);border:1px solid var(--line);border-radius:20px;padding:30px 28px;text-align:center;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.5);animation:pop .3s ease}
.reconsent-box .rc-emoji{font-size:44px}
.reconsent-box h2{font-family:'Outfit',sans-serif;margin:8px 0 6px;font-size:22px}
.reconsent-box p{color:var(--muted);font-size:14px;line-height:1.6;margin:0 0 18px}
.rc-check{display:flex;align-items:flex-start;gap:9px;text-align:left;font-size:13px;color:var(--text);margin-bottom:11px;line-height:1.45}
.rc-check input{margin-top:2px;width:17px;height:17px;accent-color:var(--red2);flex:none}
.rc-check a{color:var(--red2);font-weight:700;text-decoration:underline}
.rc-logout{display:inline-block;margin-top:12px;color:var(--muted);font-size:13px}
.rc-modal{position:fixed;inset:0;z-index:2100;display:none;align-items:center;justify-content:center;padding:18px;background:rgba(10,8,24,.7)}
.rc-modal.open{display:flex}
.rc-modal-box{max-width:640px;width:100%;max-height:80vh;overflow:auto;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:24px}
.rc-modal-box h3{font-family:'Outfit',sans-serif;display:flex;justify-content:space-between;align-items:center;margin:0 0 12px;font-size:19px}
.rc-modal-box h3 button{background:var(--line);border:none;width:34px;height:34px;border-radius:10px;cursor:pointer;font-size:18px;color:var(--text)}
.rc-mbody{white-space:pre-wrap;font-size:13.5px;line-height:1.7;color:var(--muted)}
@keyframes pop{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
body[data-theme="dark"] .marquee{box-shadow:0 10px 26px -12px rgba(0,0,0,.7)}
@media(max-width:640px){.podium{grid-template-columns:1fr;gap:10px}.pod.p1{transform:none}}/* Admin kullanıcı sekmeleri + filtre */
.utabs{display:flex;gap:8px;margin:6px 0 16px;border-bottom:1px solid var(--line)}
.utab{display:inline-flex;align-items:center;gap:8px;padding:11px 18px;text-decoration:none;color:var(--muted);font-weight:700;
  border-bottom:3px solid transparent;margin-bottom:-1px;transition:.15s}
.utab:hover{color:var(--red2)}
.utab.on{color:var(--red2);border-bottom-color:var(--red2)}
.utab .ub{background:var(--line);color:var(--text);border-radius:99px;padding:1px 9px;font-size:12px}
.utab.on .ub{background:var(--red2);color:#fff}
.ufilter{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:12px}
.adm-input{padding:10px 14px;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--text);font-size:14px;min-width:240px;font-family:inherit}
.adm-input:focus{outline:none;border-color:var(--red2)}
.ucard.u-bl{border-color:#111;box-shadow:inset 4px 0 0 #111}
.ucard.u-pv{box-shadow:inset 4px 0 0 #9ca3af}


/* ===== Modern "Gece" (dark) — cam efektli panel görünümü ===== */
body[data-theme="dark"]{
  --card:rgba(30,38,66,.55);--exambg:rgba(30,38,66,.55);--panel:rgba(30,38,66,.55);--panel2:rgba(30,38,66,.55);
  --bodybg:radial-gradient(1100px 560px at 8% -8%,rgba(45,212,191,.16),transparent 58%),radial-gradient(1000px 520px at 96% 0%,rgba(124,58,237,.20),transparent 55%),linear-gradient(180deg,#080b18,#0c1024 55%,#0a0e20);
  --cyan:#2dd4bf;--cyan2:#14b8a6;--red:#a78bfa;--red2:#8b5cf6;--violet:#c084fc;--blue:#38bdf8;
}
body[data-theme="dark"] .card,body[data-theme="dark"] .exam,body[data-theme="dark"] .feature,
body[data-theme="dark"] .hero-game,body[data-theme="dark"] .goal-card,body[data-theme="dark"] .rank-ctx,
body[data-theme="dark"] .ann-card,body[data-theme="dark"] .ev-card,body[data-theme="dark"] .badge-card{
  background:var(--card);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  border:1px solid rgba(148,163,184,.16);
  border-radius:20px;
  box-shadow:0 20px 50px -30px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.05);
  transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease;
}
body[data-theme="dark"] .exam:hover,body[data-theme="dark"] .ev-card:hover,body[data-theme="dark"] .ann-card:hover{
  transform:translateY(-4px);border-color:rgba(45,212,191,.45);
  box-shadow:0 26px 60px -28px rgba(45,212,191,.35),0 0 0 1px rgba(45,212,191,.18) inset;
}
/* Kategori kartı üstünde ince degrade çizgi */
body[data-theme="dark"] .exam{position:relative;overflow:hidden}
body[data-theme="dark"] .exam::before{content:"";position:absolute;left:0;top:0;right:0;height:3px;background:linear-gradient(90deg,#2dd4bf,#8b5cf6);opacity:.9}
body[data-theme="dark"] .ex-ic{background:linear-gradient(135deg,rgba(45,212,191,.22),rgba(139,92,246,.22));border-radius:14px;padding:8px}
/* Butonlar: teal→mor degrade */
body[data-theme="dark"] .btn,body[data-theme="dark"] .btn-red{
  background:linear-gradient(120deg,#2dd4bf,#8b5cf6);border:none;color:#06121f;font-weight:800;
  box-shadow:0 10px 26px -12px rgba(45,212,191,.55);
}
body[data-theme="dark"] .btn:hover,body[data-theme="dark"] .btn-red:hover{filter:brightness(1.08);transform:translateY(-1px)}
body[data-theme="dark"] .btn-ghost{background:rgba(148,163,184,.10);border:1px solid rgba(148,163,184,.22);color:#e8eaf6}
/* İlerleme çubukları degrade */
body[data-theme="dark"] .goal-bar i,body[data-theme="dark"] .hg-xpbar i{background:linear-gradient(90deg,#2dd4bf,#8b5cf6)}
body[data-theme="dark"] .goal-bar,body[data-theme="dark"] .hg-xpbar{background:rgba(148,163,184,.16)}
/* Üst bar cam efekti */
body[data-theme="dark"] .topbar{background:rgba(10,14,32,.72);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border-bottom:1px solid rgba(148,163,184,.14)}
body[data-theme="dark"] .section-title{color:#eef2ff}
body[data-theme="dark"] .hgm-n{color:#5eead4}
body[data-theme="dark"] .cat{color:#2dd4bf}
body[data-theme="dark"] .badge{backdrop-filter:blur(6px)}
body[data-theme="dark"] .daynight{background:rgba(148,163,184,.12);border-color:rgba(148,163,184,.22)}
/* Mini istatistik kutuları (hero) cam */
body[data-theme="dark"] .hg-mini .hgm{background:rgba(148,163,184,.08);border:1px solid rgba(148,163,184,.14);border-radius:14px}

/* ===== Hero ilerleme halkaları ===== */
.hero-rings{display:flex;gap:20px;flex-wrap:wrap;margin:18px 0 4px}
.ring{--p:0;--ringc:#2dd4bf;width:118px;height:118px;border-radius:50%;background:conic-gradient(var(--ringc) calc(var(--p)*1%),rgba(148,163,184,.18) 0);display:flex;align-items:center;justify-content:center;box-shadow:0 12px 30px -18px rgba(0,0,0,.45);animation:ringpop .6s ease}
@keyframes ringpop{from{transform:scale(.9);opacity:.35}to{transform:scale(1);opacity:1}}
.ring-in{width:86px;height:86px;border-radius:50%;background:var(--card);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.ring-in b{font-size:22px;color:var(--heading);line-height:1}
.ring-in span{font-size:11.5px;color:var(--muted);margin-top:3px}
/* ===== Akıllı arama çubuğu ===== */
.dash-search{display:flex;align-items:center;gap:10px;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:6px 8px 6px 16px;margin:10px 0 22px;box-shadow:var(--shadow)}
.dash-search .ds-ic{font-size:18px;opacity:.7}
.dash-search input{flex:1;border:none;background:transparent;font-size:15px;color:var(--text);outline:none;padding:9px 4px}
.dash-search .btn{padding:9px 20px}
body[data-theme="dark"] .dash-search{background:rgba(148,163,184,.10);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-color:rgba(148,163,184,.2)}
body[data-theme="dark"] .ring-in b{color:#fff}
body[data-theme="dark"] .ring-in{background:rgba(20,26,48,.9)}
/* ===== Tema geçiş animasyonu (yumuşak fade) ===== */
body,.topbar,.card,.exam,.feature,.hero-game,.goal-card,.ring-in,.dash-search,.btn-ghost,.badge,.ann-card,.ev-card{transition:background-color .4s ease,color .3s ease,border-color .4s ease,box-shadow .4s ease}
/* ===== Landing (giriş öncesi) koyu cam polish ===== */
body[data-theme="dark"] .feature{background:var(--card);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid rgba(148,163,184,.16)}
body[data-theme="dark"] .hero h1{background:linear-gradient(120deg,#5eead4,#c084fc);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
@media(max-width:640px){.ring{width:96px;height:96px}.ring-in{width:70px;height:70px}.ring-in b{font-size:18px}}



/* ===== Mockup: Hoşgeldin kartı + kategori ilerleme ===== */
.welcome-card{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:18px 20px;margin:6px 0 18px;box-shadow:var(--shadow)}
.wc-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.wc-hi{color:var(--muted);font-size:14px}
.wc-name{font-size:24px;font-weight:800;color:var(--heading);line-height:1.1}
.wc-badge{background:linear-gradient(120deg,#2dd4bf,#8b5cf6);color:#06121f;font-weight:800;font-size:12px;padding:4px 12px;border-radius:999px;white-space:nowrap}
.wc-prog-l{color:var(--muted);font-size:13px;margin:14px 0 6px}
.welcome-card .hero-rings{margin:16px 0 2px;gap:14px;justify-content:space-between}
body[data-theme="dark"] .welcome-card{background:rgba(20,26,48,.55);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-color:rgba(148,163,184,.16)}
/* ===== Mockup 2-sütun panel hero düzeni ===== */
.dash-top{display:grid;grid-template-columns:360px 1fr;gap:22px;align-items:start;margin-top:4px}
.wrap:has(.dash-top){max-width:1480px}
.dash-top .dt-left{display:flex;flex-direction:column;gap:16px}
.dash-top .dt-left > *{margin:0!important}
.dash-top .dt-right{min-width:0}
.dash-top .dash-search{margin:0 0 18px}
.dash-top .welcome-card .hero-rings{gap:10px;justify-content:space-between}
.dash-top .welcome-card .ring{width:96px;height:96px}
.dash-top .welcome-card .ring-in{width:70px;height:70px}
.dash-top .welcome-card .ring-in b{font-size:17px}
.dash-top .welcome-card .ring-in span{font-size:10px}
.dash-top #examGrid{grid-template-columns:repeat(3,1fr);gap:16px}
.dash-top .dt-right .section-title{margin-top:0}
@media(max-width:1120px){.dash-top #examGrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:960px){.dash-top{grid-template-columns:1fr}.dash-top .dt-left{order:-1}}
@media(max-width:600px){.dash-top #examGrid{grid-template-columns:1fr}}
/* alt bölüm: 7 gün + sıralama yan yana */
.dash-btm{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:20px 0 8px}
@media(max-width:820px){.dash-btm{grid-template-columns:1fr}}
.invite-card{background:linear-gradient(160deg,#f0fdf4,#ecfeff);border-color:#a7f3d0}
body[data-theme="dark"] .invite-card{background:linear-gradient(160deg,rgba(16,185,129,.12),rgba(34,211,238,.10));border-color:rgba(52,211,153,.28)}
/* welcome card modern vurgu */
.dash-top .welcome-card{position:relative;overflow:hidden}
.dash-top .welcome-card::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:linear-gradient(90deg,#2dd4bf,#22d3ee,#8b5cf6)}
body[data-theme="dark"] .dash-top .exam{background:rgba(20,26,48,.5);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-color:rgba(148,163,184,.14)}
.dash-top .exam{transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.dash-top .exam:hover{transform:translateY(-4px);box-shadow:0 24px 50px -30px rgba(124,58,237,.55);border-color:rgba(139,92,246,.4)}
body[data-theme="dark"] .dash-top .card{background:rgba(20,26,48,.55);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-color:rgba(148,163,184,.16)}
/* modern kategori ikonu (çizgi ikon) */
.exam .ex-ic-svg{background:rgba(148,163,184,.12);border:1px solid var(--line);color:var(--icc);box-shadow:0 8px 18px -10px var(--icc);padding:0}
.exam .ex-ic-svg svg{width:26px;height:26px}
body[data-theme="dark"] .exam .ex-ic-svg{background:rgba(148,163,184,.10);padding:0}
/* açık/koyu pill toggle */
.dn-toggle{display:inline-flex;align-items:center;gap:2px;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:3px;margin-left:4px}
.dn-toggle .dn-opt{width:30px;height:28px;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;font-size:14px;text-decoration:none;line-height:1;opacity:.5;transition:background .2s,transform .2s,opacity .2s}
.dn-toggle .dn-opt.on{background:linear-gradient(135deg,#22d3ee,#8b5cf6);opacity:1;box-shadow:0 4px 12px -4px rgba(139,92,246,.6)}
.dn-toggle .dn-opt:hover{opacity:1;transform:translateY(-1px)}
/* mobil ince ayar */
@media(max-width:600px){
  .dash-top{gap:14px}
  .dash-top .dt-right .dash-search{padding:5px 6px 5px 12px}
  .dash-top .dash-search input{font-size:14px;padding:8px 4px}
  .dash-top .welcome-card .ring{width:88px;height:88px}
  .dash-top .welcome-card .ring-in{width:64px;height:64px}
  .dash-btm{gap:12px}
  .dn-toggle{margin-left:0}
}
/* Admin kullanıcı listesi — tam genişlik + görünür işlem butonları */
.admin-main:has(.utable-wrap){max-width:100%}
.utable-wrap{overflow-x:auto}
.uact{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.uact-f{display:inline-flex;gap:4px;align-items:center;margin:0}
.uact-btn{padding:6px 11px;font-size:12px;border-radius:8px;white-space:nowrap}
.uact-sel{padding:6px 8px;border:1px solid var(--line);border-radius:8px;font-size:12px;background:#fff;color:var(--text);max-width:140px}
.uact-inp{padding:6px 8px;border:1px solid var(--line);border-radius:8px;font-size:12px;width:92px}
.uact-del{background:#fee2e2;color:#dc2626;border:1px solid #fca5a5;padding:6px 11px;border-radius:8px;font-size:12px;white-space:nowrap;cursor:pointer;font-weight:700}
.uact-del:hover{background:#fecaca}
/* kategori kartı ilerleme çubuğu */
.ex-prog{height:7px;border-radius:99px;background:rgba(148,163,184,.22);margin:10px 0 4px;overflow:hidden}
.ex-prog i{display:block;height:100%;background:linear-gradient(90deg,#2dd4bf,#8b5cf6);border-radius:99px;transition:width .5s ease}

/* ===== Son Çözülenler (aside) ===== */
.rs-list{margin-top:10px;display:flex;flex-direction:column;gap:2px}
.rs-item{display:flex;align-items:center;gap:10px;padding:9px 4px;border-bottom:1px solid var(--line)}
.rs-item:last-child{border-bottom:none}
.rs-dot{width:11px;height:11px;border-radius:50%;flex:none}
.rs-name{font-weight:600;font-size:13.5px;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rs-meta{color:var(--muted);font-size:12px}
.rs-score{font-weight:800;font-size:14px;min-width:38px;text-align:right}
.rs-all{display:inline-block;margin-top:10px;font-size:13px;font-weight:600}
/* ===== Son Eklenen Sorular şeridi ===== */
.newq-strip{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px;margin-top:12px}
.newq-card{display:flex;gap:12px;align-items:flex-start;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px;box-shadow:var(--shadow);transition:transform .2s ease,border-color .2s ease}
.newq-card:hover{transform:translateY(-3px);border-color:#2dd4bf88}
.newq-ic{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:18px;background:linear-gradient(135deg,#2dd4bf33,#8b5cf633);flex:none}
.newq-t{font-weight:700;font-size:13.5px;line-height:1.2}
.newq-s{color:var(--muted);font-size:12px;margin:3px 0 8px}
.newq-tag{font-size:11px;font-weight:800;padding:3px 10px;border-radius:999px}
body[data-theme="dark"] .newq-card{background:rgba(20,26,48,.55);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-color:rgba(148,163,184,.16)}
/* ===== Kategori kartı 3-nokta menü ===== */
.ex-menu{position:relative}
.ex-menu>summary{list-style:none;cursor:pointer;width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:20px;color:var(--muted);line-height:1;user-select:none}
.ex-menu>summary::-webkit-details-marker{display:none}
.ex-menu>summary:hover{background:rgba(148,163,184,.16)}
.ex-menu-pop{position:absolute;right:0;top:34px;z-index:30;background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:0 16px 40px -18px rgba(0,0,0,.5);min-width:150px;padding:6px;display:flex;flex-direction:column}
.ex-menu-pop a,.ex-menu-pop button{display:block;text-align:left;background:none;border:none;cursor:pointer;padding:9px 12px;border-radius:8px;font-size:13.5px;color:var(--text);text-decoration:none;font-weight:600}
.ex-menu-pop a:hover,.ex-menu-pop button:hover{background:rgba(45,212,191,.14);color:var(--heading)}
body[data-theme="dark"] .ex-menu-pop{background:#141a30;border-color:rgba(148,163,184,.2)}
/* ===== Gündüz/gece toggle pill ===== */
.daynight{transition:transform .2s ease,background .3s ease}
.daynight:hover{transform:translateY(-1px) rotate(-8deg)}


/* ===== Son Çözülenler hızlı önizleme ===== */
.rs-detail{display:none;flex-wrap:wrap;gap:6px;padding:8px 4px 12px;border-bottom:1px solid var(--line)}
.rs-item.open + .rs-detail{display:flex;animation:upfade .2s ease}
.rsd{font-size:11.5px;font-weight:700;padding:3px 9px;border-radius:999px;background:rgba(148,163,184,.14);color:var(--muted)}
.rsd.ok{background:#22c55e22;color:#16a34a}.rsd.wr{background:#ef444422;color:#dc2626}
.rsd.nt{background:#8b5cf622;color:#7c3aed}.rsd.tm{background:#38bdf822;color:#0284c7}
/* ===== Favorilerim şeridi ===== */
.fav-strip{display:flex;flex-wrap:wrap;gap:10px;margin:10px 0 18px}
.fav-chip{display:flex;align-items:center;gap:10px;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:6px 8px 6px 16px;box-shadow:var(--shadow);font-size:13.5px;font-weight:700}
.fav-chip a{color:#0d9488;text-decoration:none;font-weight:800}
.fav-chip button{border:none;background:rgba(148,163,184,.18);color:var(--muted);width:24px;height:24px;border-radius:50%;cursor:pointer;font-weight:800}
.fav-chip button:hover{background:#ef444422;color:#dc2626}
body[data-theme="dark"] .fav-chip{background:rgba(20,26,48,.6);border-color:rgba(148,163,184,.2)}