/* ====================================================================
   rozet.css — seviye plakasi, XP cubugu, rozet ikonu, bildirim satiri, basliktaki zil (2026-10-14)
   /lab-rozet'ten (A1 · B · C · D2). JS: assets/js/bildirim.js (MM_RZ). Karemsi, hover yok, iptal icin kirmizi yok.
   Yuzey renkleri: --rz-kart / --rz-ic / --rz-cz / --rz-cz2 (Settings icinde ayarlar.css'in --ay-* degerleri).
   ==================================================================== */
:root { --rz-kart:var(--kd-yuzey, #fff); --rz-ic:var(--buz, #EEF3FB); --rz-cz:var(--cizgi, rgba(15,42,86,.1)); --rz-cz2:var(--cizgi-2, rgba(15,42,86,.16)); }
html[data-tema="koyu"] { --rz-kart:#111; --rz-ic:#181818; --rz-cz:#1C1C1C; --rz-cz2:#262626; }

/* ---------------------------------------------- seviye plakasi */
.rz-plaka { --p:#2563EB; position:relative; display:inline-grid; place-items:center; width:64px; height:64px; flex:none; border-radius:18px; overflow:hidden; color:#fff;
  background:radial-gradient(110% 90% at 100% 0%, rgba(255,255,255,.3), transparent 55%), linear-gradient(150deg, color-mix(in srgb, var(--p) 70%, #000), var(--p) 55%, color-mix(in srgb, var(--p) 65%, #fff));
  box-shadow:0 12px 24px -12px color-mix(in srgb, var(--p) 80%, transparent), inset 0 0 0 1px rgba(255,255,255,.2), inset 0 -3px 0 rgba(0,0,0,.18); }
.rz-plaka b { position:relative; z-index:1; font-size:25px; font-weight:800; letter-spacing:-.04em; line-height:1; margin-top:6px; }
.rz-plaka small { position:absolute; top:7px; left:0; right:0; z-index:1; text-align:center; font-size:8.5px; font-weight:800; letter-spacing:.14em; opacity:.8; }
.rz-plaka-bicak { position:absolute; right:-8px; bottom:-8px; width:44px; height:44px; opacity:.18; transform:rotate(12deg); }
.rz-plaka-bicak svg { width:100%; height:100%; }
.rz-plaka.buyuk { width:76px; height:76px; border-radius:21px; } .rz-plaka.buyuk b { font-size:30px; }
.rz-plaka.uzun b { font-size:20px; } .rz-plaka.buyuk.uzun b { font-size:24px; }

/* ---------------------------------------------- XP cubugu */
.rz-xp { display:block; height:8px; border-radius:4px; overflow:hidden; background:var(--rz-ic); box-shadow:inset 0 0 0 1px var(--rz-cz); }
.rz-xp i { display:block; height:100%; width:calc(var(--o) * 100%); border-radius:4px; background:linear-gradient(90deg,#2563EB,#60A5FA); transition:width .9s cubic-bezier(.3,.9,.3,1); position:relative; overflow:hidden; }
.rz-xp i::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent); transform:translateX(-100%); animation:rzIsik 2.6s 1s ease-in-out infinite; }
@keyframes rzIsik { 0%, 60% { transform:translateX(-100%); } 100% { transform:translateX(100%); } }
.rz-xp.ince { height:5px; } .rz-xp.genis { height:10px; }

/* ---------------------------------------------- rozet ikonu */
.rz-rz { --r:#2563EB; position:relative; width:46px; height:46px; flex:none; display:grid; place-items:center; border-radius:13px; color:#fff;
  background:radial-gradient(110% 90% at 100% 0%, rgba(255,255,255,.3), transparent 55%), linear-gradient(150deg, color-mix(in srgb, var(--r) 72%, #000), var(--r) 60%, color-mix(in srgb, var(--r) 70%, #fff));
  box-shadow:0 10px 20px -12px color-mix(in srgb, var(--r) 85%, transparent), inset 0 -3px 0 rgba(0,0,0,.16); }
.rz-rz svg { width:22px; height:22px; }
.rz-rz.buyuk { width:54px; height:54px; border-radius:15px; } .rz-rz.buyuk svg { width:26px; height:26px; }
.rz-rz.yolda { color:var(--r); background:color-mix(in srgb, var(--r) 12%, var(--rz-kart)); box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--r) 40%, transparent); }
.rz-rz.kilit { color:var(--ink-3); background:var(--rz-ic); box-shadow:inset 0 0 0 1px var(--rz-cz2); }

/* ---------------------------------------------- bildirim satiri */
.rz-bs { position:relative; display:flex; align-items:center; gap:12px; width:100%; padding:11px 12px; border:0; border-radius:13px; background:none; font:inherit; color:var(--ink);
  text-align:left; cursor:pointer; transition:background .4s ease; animation:rzGel .35s calc(var(--i, 0) * 40ms) cubic-bezier(.2,.8,.2,1) both; }
@keyframes rzGel { from { opacity:0; transform:translateY(10px); } }
.rz-bs[hidden] { display:none; }
.rz-bs:not([data-link]) { cursor:default; }
.rz-bs:active { background:var(--rz-ic); }
.rz-bs.yeni { background:color-mix(in srgb, var(--mavi, #2563EB) 6%, transparent); }
.rz-bs-ik { width:38px; height:38px; flex:none; display:grid; place-items:center; border-radius:11px; color:var(--r); background:color-mix(in srgb, var(--r) 12%, transparent); }
.rz-bs-ik svg { width:18px; height:18px; }
.rz-bs-tx { flex:1; min-width:0; display:grid; gap:2px; }
.rz-bs-tx b { font-size:13.5px; font-weight:750; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rz-bs-tx small { font-size:12.5px; color:var(--ink-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rz-bs-zaman { font-size:11.5px; font-weight:600; color:var(--ink-3); white-space:nowrap; }
.rz-nokta { width:8px; height:8px; flex:none; border-radius:2px; background:var(--mavi, #2563EB); }
.rz-link { border:0; background:none; padding:0; font:inherit; font-size:12.5px; font-weight:750; color:var(--mavi, #2563EB); cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; gap:5px; }
.rz-link svg { width:14px; height:14px; }

/* ---------------------------------------------- basliktaki zil */
.zil { position:relative; flex:none; width:42px; height:42px; display:grid; place-items:center; padding:0; border-radius:11px; cursor:pointer; color:var(--ink);
  background:var(--kd-yuzey, #fff); border:1px solid var(--cizgi); }
.zil[hidden], html.misafir .menu .zil { display:none !important; }
.zil svg { width:19px; height:19px; transform-origin:50% 10%; }
.zil em { position:absolute; top:-6px; right:-6px; min-width:18px; height:18px; padding:0 4px; display:grid; place-items:center; border-radius:5px; font-style:normal;
  font-size:10.5px; font-weight:800; line-height:1; color:#fff; background:var(--mavi, #2563EB); box-shadow:0 0 0 2px var(--kd-yuzey, #fff); font-variant-numeric:tabular-nums; }
.zil em[hidden] { display:none; }
.zil.acik, .zil:active { box-shadow:inset 0 2px 6px rgba(15,42,86,.12); border-color:transparent; }
html[data-tema="koyu"] .zil.acik, html[data-tema="koyu"] .zil:active { box-shadow:inset 0 2px 8px rgba(0,0,0,.6); }
.zil:focus { outline:none; } .zil:focus-visible { box-shadow:0 0 0 2px var(--mavi-ln, rgba(37,99,235,.4)); }
@media (max-width:560px) { .zil { width:38px; height:38px; } .zil svg { width:18px; height:18px; } }

.zil-ac { position:fixed; z-index:130; width:360px; padding:10px; border-radius:16px; background:var(--inci); text-align:left; transform-origin:calc(100% - 20px) 0;
  box-shadow:0 24px 56px -18px rgba(15,42,86,.42), 0 4px 14px rgba(15,42,86,.08); }
html[data-tema="koyu"] .zil-ac { background:var(--k-pencere, #111); box-shadow:0 26px 60px -16px rgba(0,0,0,.85), 0 4px 14px rgba(0,0,0,.45); }
html[data-tema="koyu"]:not([data-kt]) .zil-ac { box-shadow:inset 0 0 0 1px #181818, 0 8px 24px rgba(0,0,0,.5); }
.zil-ac[hidden] { display:none; }
.zil-ac-bas { display:flex; justify-content:space-between; align-items:center; padding:4px 6px 8px; }
.zil-ac-bas b { font-size:14px; font-weight:800; color:var(--ink); }
.zil-ac-liste { display:grid; gap:2px; max-height:min(420px, calc(100vh - 200px)); overflow-y:auto; }
.zil-ac-liste.gelis { overflow-y:hidden; }   /* giris animasyonu sirasinda kaydirma cubugu cikmasin */
.zil-ac-liste .rz-bs { padding:9px 8px; } .zil-ac-liste .rz-bs-ik { width:34px; height:34px; }
.zil-ac-tumu { display:flex; justify-content:center; margin-top:6px; padding:10px 0 4px; border-top:1px solid var(--cizgi); }
.zil-ac-bos { display:grid; justify-items:center; gap:4px; padding:22px 10px; text-align:center; margin:0; font-size:13px; color:var(--ink-3); }
.zil-ac-bos span { width:42px; height:42px; display:grid; place-items:center; border-radius:12px; color:var(--mavi, #2563EB); background:var(--rz-ic); margin-bottom:4px; }
.zil-ac-bos span svg { width:20px; height:20px; }
.zil-ac-bos b { font-size:14px; color:var(--ink); }
.zil-ac-bos small { font-size:12.5px; }
/* yukleniyor: ayni yerde 3 satir iskelet */
.zil-ac-yuk { display:grid; gap:8px; padding:6px 4px; }
.zil-ac-yuk i { display:block; height:44px; border-radius:11px; background:var(--rz-ic); animation:rzYuk 1.2s ease-in-out infinite; }
.zil-ac-yuk i:nth-child(2) { animation-delay:.15s; } .zil-ac-yuk i:nth-child(3) { animation-delay:.3s; }
@keyframes rzYuk { 50% { opacity:.45; } }
@media (max-width:560px) { .zil-ac { width:calc(100vw - 24px); } }
@media (prefers-reduced-motion: reduce) { .rz-xp i, .rz-bs { transition:none; animation:none; } .rz-xp i::after, .zil-ac-yuk i { animation:none; } }