/* Otomatik üretildi (build.py) — kaynaklar: _src/css/*.css. Elle düzenleme. */

/* ===== 404.css ===== */
/* =========================================================
   404 — önek: nf-  (dikkat: .nf-title/.nf-body/.nf-media/.nf-tags/.nf-excerpt ana sayfada kullanılıyor)
   Piksel bloklardan 404, 0'ın içinde portal, ipine bağlı süzülen Steve
   ========================================================= */
.nf-page {
    position: relative;
    isolation: isolate;
    max-width: 1240px;
    margin: 0 auto;
    padding: 6rem 1.5rem 5rem;
    overflow-x: clip;
}
.nf-page::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 4rem;
    z-index: -1;
    width: min(1300px, 150%);
    height: 1100px;
    transform: translateX(-50%);
    background:
        radial-gradient(ellipse 40% 26% at 46% 26%, rgba(255, 138, 61, 0.13), transparent 70%),
        radial-gradient(ellipse 50% 55% at 50% 50%, rgba(5, 10, 20, 0.72), rgba(5, 10, 20, 0.3) 60%, transparent 78%);
    pointer-events: none;
}

/* ---------- Sahne ---------- */
.nf-stage { position: relative; width: min(1000px, 100%); margin: 0 auto; aspect-ratio: 1000 / 430; }

.nf-digits {
    position: absolute;
    left: 3%;
    bottom: 2%;
    z-index: 2;
    width: 68%;
    height: auto;
    overflow: visible;
    filter: drop-shadow(0 30px 36px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 50px rgba(255, 138, 61, 0.28));
}
.nf-r0 { color: #ffe2cc; }
.nf-r1 { color: #ffc596; }
.nf-r2 { color: #ffab6b; }
.nf-r3 { color: #ff9447; }
.nf-r4 { color: #f57f33; }
.nf-r5 { color: #e86c25; }
.nf-r6 { color: #d45b1a; }
.nf-blk { transform-box: fill-box; transform-origin: 50% 50%; animation: nf-drop 0.75s cubic-bezier(0.2, 1.3, 0.4, 1) both; transition: filter 0.3s var(--ease); }
.nf-blk.is-flash { filter: brightness(1.55) saturate(1.2); }
.nf-portal rect:first-child { animation: nf-portal 3.4s ease-in-out infinite; }
.nf-swirl { transform-box: fill-box; transform-origin: 50% 50%; animation: nf-swirl 2.8s ease-out infinite; }
.nf-swirl--2 { animation-delay: 1.4s; }
.nf-tw { animation: nf-twinkle 2.2s steps(2) infinite; }
.nf-tw2 { animation-delay: 0.6s; }
.nf-tw3 { animation-delay: 1.1s; }
.nf-tw4 { animation-delay: 1.6s; }
.nf-debris { transform-box: fill-box; transform-origin: 50% 50%; }
.nf-debris--1 { animation: nf-debris1 7s ease-in-out infinite alternate; }
.nf-debris--2 { animation: nf-debris2 9s ease-in-out infinite alternate; }
.nf-debris--3 { animation: nf-debris3 11s ease-in-out infinite alternate; }

.nf-planet { position: absolute; left: 1%; top: 0; z-index: 1; width: 12%; height: auto; overflow: visible; opacity: 0.95; filter: drop-shadow(0 0 22px rgba(94, 234, 212, 0.3)); animation: nf-planet 14s ease-in-out infinite alternate; }

/* İp: JS çizer (sahne boyutunda viewBox) */
.nf-lines { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.nf-tether-glow { fill: none; stroke: rgba(255, 138, 61, 0.28); stroke-width: 6; stroke-linecap: round; filter: blur(3px); }
.nf-tether { fill: none; stroke: #ffc596; stroke-width: 2.2; stroke-linecap: square; stroke-dasharray: 7 6; animation: nf-flow 1.4s linear infinite; }

/* Astronot Steve */
.nf-astro { position: absolute; right: 7%; top: 3%; z-index: 4; height: 66%; animation: nf-float 7s ease-in-out infinite; }
.nf-steve {
    position: relative;
    z-index: 1;
    display: block;
    height: 100%;
    width: auto;
    max-width: none;
    image-rendering: pixelated;
    transform-origin: 50% 55%;
    filter: drop-shadow(0 0 22px rgba(94, 234, 212, 0.28)) drop-shadow(0 22px 26px rgba(0, 0, 0, 0.5));
    animation: nf-sway 9s ease-in-out infinite;
}
.nf-orbit { position: absolute; left: 50%; top: 56%; width: 300%; height: auto; overflow: visible; transform: translate(-50%, -50%); pointer-events: none; }
.nf-orbit--back { z-index: 0; }
.nf-orbit--front { z-index: 2; }
.nf-orbit-line { fill: none; stroke: #5eead4; stroke-width: 1.4; stroke-dasharray: 5 5; opacity: 0.75; animation: nf-flow 3s linear infinite; }
.nf-orbit--back .nf-orbit-line { opacity: 0.35; }
.nf-sat { fill: #5eead4; }
.nf-orbit--back .nf-sat { fill: #2dd4bf; opacity: 0.55; }

/* Minecraft sohbet satırı */
.nf-chat {
    position: absolute;
    right: 82%;
    top: 2%;
    z-index: 3;
    padding: 0.45rem 0.75rem;
    font-family: var(--font-mono);
    font-size: 0.82rem;
    font-weight: 500;
    white-space: nowrap;
    color: #fff;
    background: rgba(8, 12, 22, 0.9);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
    clip-path: var(--px-sm);
    animation: nf-chat 7s ease-in-out infinite;
}
.nf-chat b { font-weight: 600; color: #ffb07a; }

/* ---------- Metin ---------- */
.nf-copy { position: relative; z-index: 5; max-width: 740px; margin: 1.2rem auto 0; text-align: center; }
.nf-code {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    height: 32px;
    padding: 0 0.9rem;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: #ffd3b0;
    background: rgba(8, 14, 27, 0.92);
    box-shadow: inset 0 0 0 1px rgba(255, 138, 61, 0.4);
    clip-path: var(--px-sm);
}
.nf-code-dot { width: 7px; height: 7px; background: #f87171; box-shadow: 0 0 8px #f87171; animation: nf-blink 1.2s steps(2) infinite; }
.nf-heading {
    margin: 1.1rem 0 0;
    font-family: var(--font-brand);
    font-size: clamp(1.9rem, 4.2vw, 3.05rem);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: 0.01em;
    text-wrap: balance;
    background: linear-gradient(180deg, #fff 0%, #ffe7d6 55%, #ff9a52 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 4px 20px rgba(5, 10, 20, 0.9));
}
.nf-lead { max-width: 560px; margin: 1rem auto 0; font-size: 1.06rem; line-height: 1.7; color: #c6cedd; text-shadow: 0 1px 2px rgba(5, 10, 20, 0.9), 0 0 18px rgba(5, 10, 20, 0.85); }
.nf-actions { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0.9rem; margin-top: 1.9rem; }
.nf-back { height: 60px; padding: 0 1.6rem; font-size: 0.86rem; }

.nf-search {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    max-width: 580px;
    margin: 2.1rem auto 0;
    padding: 0.45rem;
    border-radius: 16px;
    background: rgba(8, 14, 27, 0.94);
    border: 1px solid var(--line-strong);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
    transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.nf-search:focus-within { border-color: rgba(255, 138, 61, 0.6); box-shadow: 0 0 0 4px rgba(255, 138, 61, 0.12), 0 20px 50px rgba(0, 0, 0, 0.4); }
.nf-search .input-group { flex: 1; min-width: 0; }
.nf-search .input { height: 46px; border: 0; background: transparent; }
.nf-search .input:focus { box-shadow: none; }
.nf-search .input-group:focus-within > svg { color: #ffb07a; }
.nf-search-btn { flex-shrink: 0; height: 46px; padding: 0 1.5rem; border: 0; cursor: pointer; }
.nf-popular { margin: 0.95rem 0 0; font-size: 0.82rem; color: var(--faint); text-shadow: 0 1px 2px rgba(5, 10, 20, 0.9), 0 0 14px rgba(5, 10, 20, 0.85); }
.nf-popular a { margin-left: 0.7rem; color: var(--muted); text-decoration: underline; text-decoration-color: rgba(255, 176, 122, 0.45); text-underline-offset: 3px; }
.nf-popular a:hover { color: #ffd3b0; }
.nf-popular a + a::before { content: '·'; display: inline-block; margin-right: 0.7rem; color: var(--faint); text-decoration: none; }

/* ---------- Hızlı bağlantılar ---------- */
.nf-links { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; max-width: 1040px; margin: 3.4rem auto 0; }
.nf-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 1.1rem;
    border-radius: 16px;
    color: inherit;
    text-decoration: none;
    background: rgba(8, 14, 27, 0.92);
    border: 1px solid var(--line);
    transition: transform 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.nf-link::before { content: ''; position: absolute; top: -1px; left: 18px; width: 22px; height: 3px; background: #ff8a3d; box-shadow: 26px 0 0 rgba(94, 234, 212, 0.7); opacity: 0; transition: opacity 0.3s var(--ease); }
.nf-link:hover { transform: translateY(-3px); border-color: rgba(255, 138, 61, 0.45); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45); }
.nf-link:hover::before { opacity: 1; }
.nf-link .feat-ico { flex-shrink: 0; }
.nf-link-text { min-width: 0; }
.nf-link b { display: block; font-size: 0.96rem; font-weight: 600; color: #fff; }
.nf-link small { display: block; margin-top: 0.15rem; font-size: 0.78rem; line-height: 1.4; color: var(--muted); }
.nf-link-arrow { margin-left: auto; color: var(--faint); transition: transform 0.25s var(--ease), color 0.25s var(--ease); }
.nf-link:hover .nf-link-arrow { color: #ffb07a; transform: translateX(3px); }

/* ---------- Animasyonlar ---------- */
@keyframes nf-drop { 0% { opacity: 0; transform: translateY(-2.5px) scale(0.6); } 100% { opacity: 1; transform: none; } }
@keyframes nf-portal { 0%, 100% { opacity: 1; } 50% { opacity: 0.78; } }
@keyframes nf-swirl { 0% { opacity: 0.9; transform: scale(0.35); } 100% { opacity: 0; transform: scale(1.1); } }
@keyframes nf-twinkle { 50% { opacity: 0.15; } }
@keyframes nf-debris1 { 0% { transform: translate(0.25px, 0.4px) rotate(10deg); } 100% { transform: translate(0.9px, 1.1px) rotate(46deg); } }
@keyframes nf-debris2 { 0% { transform: translate(0, 0) rotate(0deg); } 100% { transform: translate(0.7px, -0.3px) rotate(-70deg); } }
@keyframes nf-debris3 { 0% { transform: translate(0, 0) rotate(0deg); } 100% { transform: translate(-0.4px, 0.5px) rotate(90deg); } }
@keyframes nf-planet { from { transform: translateY(0) rotate(0deg); } to { transform: translateY(10px) rotate(-4deg); } }
@keyframes nf-flow { to { stroke-dashoffset: -26; } }
@keyframes nf-float { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-8px, -12px); } }
@keyframes nf-sway { 0%, 100% { transform: rotate(-16deg); } 50% { transform: rotate(12deg); } }
@keyframes nf-chat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }
@keyframes nf-blink { 50% { opacity: 0.25; } }

@media (prefers-reduced-motion: reduce) {
    .nf-blk, .nf-portal rect, .nf-swirl, .nf-tw, .nf-debris, .nf-planet, .nf-tether, .nf-astro, .nf-steve, .nf-orbit-line, .nf-chat, .nf-code-dot { animation: none !important; }
    .nf-steve { transform: rotate(-8deg); }
    .nf-swirl { opacity: 0.5; }
}

/* ---------- Tablet ---------- */
@media (max-width: 1000px) {
    .nf-page { padding-top: 4rem; }
    .nf-links { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 640px; }
}

/* ---------- Mobil ---------- */
@media (max-width: 640px) {
    .nf-page { padding: 2.5rem 1rem 3.5rem; }
    .nf-stage { aspect-ratio: 390 / 420; }
    .nf-digits { left: 1%; width: 97%; bottom: 3%; }
    .nf-astro { right: 9%; top: 7%; height: 43%; }
    .nf-orbit { width: 280%; }
    .nf-chat { right: auto; left: -118%; top: -12%; font-size: 0.72rem; }
    .nf-planet { left: 0; top: 4%; width: 22%; }
    .nf-copy { margin-top: 0.8rem; }
    .nf-heading { font-size: 1.85rem; }
    .nf-lead { font-size: 0.98rem; }
    .nf-actions { flex-direction: column; align-items: stretch; }
    .nf-actions .play-btn--lg { width: 100%; }
    .nf-back { height: 50px; }
    .nf-search-btn { padding: 0 1.1rem; }
    .nf-popular a { display: inline-block; margin: 0.25rem 0.35rem 0; }
    .nf-links { gap: 0.6rem; margin-top: 2.4rem; }
    .nf-link { flex-direction: column; align-items: flex-start; gap: 0.7rem; padding: 1rem; }
    .nf-link-arrow { position: absolute; top: 1rem; right: 1rem; }
}

/* ===== _discord.css ===== */
/* Discord sunucu kartı (_src/js/_discord.js): sitedeki Discord bağlantılarından açılan önizleme penceresi */
html.dck-lock { overflow: hidden; }
/* Tek sütun minmax(0,1fr): kutunun %100 genişliği içeriğe göre değil ekrana göre çözülsün (dar ekranda taşmasın) */
.dck-modal { position: fixed; inset: 0; z-index: 190; display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; padding: 1.5rem; }
.dck-modal[hidden], .dck-modal [hidden] { display: none !important; }
.dck-back { position: absolute; inset: 0; background: rgba(3, 6, 12, 0.82); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); animation: dck-fade 0.25s var(--ease); }
.dck-box {
    position: relative;
    width: min(520px, 100%);
    max-height: calc(100vh - 3rem);
    max-height: calc(100dvh - 3rem);
    overflow: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    border-radius: 20px;
    background: #0a1222;
    border: 1px solid rgba(255, 138, 61, 0.35);
    box-shadow: 0 40px 120px rgba(0, 0, 0, 0.6), 0 0 90px rgba(255, 122, 26, 0.08);
    animation: dck-pop 0.38s var(--ease);
}
.dck-box:focus { outline: none; }
@keyframes dck-pop { from { opacity: 0; transform: translateY(14px) scale(0.97); } to { opacity: 1; transform: none; } }
@keyframes dck-fade { from { opacity: 0; } to { opacity: 1; } }

.dck-x { position: absolute; top: 12px; right: 12px; z-index: 3; display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.18); background: rgba(5, 10, 20, 0.78); color: #fff; cursor: pointer; transition: border-color 0.2s var(--ease), background 0.2s var(--ease); }
.dck-x:hover { border-color: rgba(255, 138, 61, 0.6); background: rgba(5, 10, 20, 0.95); }
.dck-x svg { width: 18px; height: 18px; }

/* Banner: görsel yüklenmezse marka renkli gradyan kalır */
.dck-banner {
    position: relative;
    aspect-ratio: 16 / 7;
    overflow: hidden;
    background:
        radial-gradient(ellipse 60% 80% at 25% 30%, rgba(255, 122, 26, 0.45), transparent 70%),
        radial-gradient(ellipse 50% 70% at 80% 20%, rgba(94, 234, 212, 0.25), transparent 70%),
        linear-gradient(180deg, #111c33, #0a1222);
}
.dck-banner img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
.dck-banner.is-bos img { display: none; }
.dck-banner::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 18, 34, 0) 45%, rgba(10, 18, 34, 0.75) 80%, #0a1222); }

.dck-body { position: relative; padding: 0 1.5rem 1.35rem; }
.dck-kimlik { display: flex; align-items: flex-end; justify-content: space-between; gap: 0.9rem; margin-top: -50px; }
.dck-ikon {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    width: 96px;
    height: 96px;
    padding: 4px;
    border-radius: 50%;
    background: #0a1222;
    box-shadow: 0 0 0 2px rgba(255, 138, 61, 0.6), 0 14px 32px rgba(0, 0, 0, 0.5), 0 0 44px rgba(255, 122, 26, 0.28);
}
.dck-ikon img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }

.dck-sayilar {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.45rem;
    margin: 0 0 0.3rem;
    padding: 0.4rem 0.75rem;
    border-radius: 999px;
    border: 1px solid var(--line-strong);
    background: rgba(5, 10, 20, 0.6);
    font-family: var(--font-mono);
    font-size: 0.74rem;
    color: var(--muted);
    white-space: nowrap;
    animation: dck-fade 0.35s var(--ease);
}
.dck-sayilar b { font-weight: 600; color: var(--text); }
.dck-sayilar .live-dot { display: inline-block; width: 7px; height: 7px; margin-right: 0.4rem; vertical-align: 1px; }
.dck-nokta { color: var(--faint); }

.dck-etiket { display: flex; align-items: center; gap: 0.45rem; margin: 1rem 0 0.25rem; font-family: var(--font-mono); font-size: 0.66rem; font-weight: 600; letter-spacing: 0.18em; color: #5eead4; }
.dck-etiket svg { width: 14px; height: 14px; }
.dck-ad {
    margin: 0;
    font-family: var(--font-brand);
    font-size: clamp(1.45rem, 4.4vw, 1.85rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: 0.04em;
    color: #fff;
    background: linear-gradient(180deg, #ffffff 0%, #ffe7d6 55%, #ff9a52 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.dck-acik { margin: 0.55rem 0 0; font-size: 0.9rem; line-height: 1.55; color: var(--muted); }

.dck-bolum { margin: 1.3rem 0 0.6rem; font-family: var(--font-mono); font-size: 0.66rem; font-weight: 600; letter-spacing: 0.18em; color: var(--faint); }
.dck-kanallar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.dck-kanal { display: flex; align-items: center; gap: 0.65rem; min-width: 0; padding: 0.6rem 0.7rem; border-radius: 12px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.025); transition: border-color 0.2s var(--ease), background 0.2s var(--ease); }
.dck-kanal:hover { border-color: rgba(255, 138, 61, 0.32); background: rgba(255, 138, 61, 0.05); }
.dck-kanal img { flex-shrink: 0; width: 28px; height: 28px; image-rendering: pixelated; }
.dck-kanal > span { min-width: 0; }
.dck-kanal b { display: block; font-family: var(--font-display); font-size: 0.86rem; font-weight: 600; color: var(--text); }
.dck-kanal b i { margin-right: 0.15rem; font-style: normal; font-family: var(--font-mono); color: #ff8a3d; }
.dck-kanal small { display: block; margin-top: 0.12rem; font-size: 0.72rem; line-height: 1.35; color: var(--faint); }

.dck-eylem { display: flex; gap: 0.6rem; margin-top: 1.35rem; }
.dck-katil { flex: 1; height: 48px; font-size: 0.84rem; }
.dck-katil svg { width: 18px; height: 18px; }
.dck-kapat { height: 48px; padding: 0 1.4rem; cursor: pointer; border: 0; }
/* Piksel köşeli düğmelerde (clip-path) dış çerçeve kırpılır: odak halkası içeride */
.dck-modal .btn-gold:focus-visible, .dck-modal .btn-ghost-px:focus-visible { outline: 2px solid #fff; outline-offset: -6px; }
.dck-x:focus-visible { outline: 2px solid #5eead4; outline-offset: 2px; }
.dck-not { margin: 0.85rem 0 0; text-align: center; font-family: var(--font-mono); font-size: 0.7rem; color: var(--faint); }

@media (max-width: 560px) {
    .dck-modal { place-items: end center; padding: 0.6rem; }
    .dck-box { max-height: calc(100vh - 1.2rem); max-height: calc(100dvh - 1.2rem); border-radius: 18px; }
    .dck-body { padding: 0 1.1rem 1.1rem; }
    .dck-kimlik { margin-top: -42px; }
    .dck-ikon { width: 80px; height: 80px; }
    .dck-sayilar { font-size: 0.7rem; padding: 0.35rem 0.6rem; }
    .dck-kanallar { grid-template-columns: minmax(0, 1fr); }
    .dck-eylem { flex-direction: column; }
    .dck-katil, .dck-kapat { flex: none; width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .dck-box, .dck-back, .dck-sayilar { animation: none; }
    .dck-kanal, .dck-x { transition: none; }
}

/* ===== _gercek.css ===== */
/* Gerçek backend modu: dinamik boş durumlar ve küçük yardımcılar (_src/js/_gercek.js) */
.g-empty { grid-column: 1 / -1; }
.g-empty h3 { margin: 0.8rem 0 0.3rem; color: var(--text, #fff); }
.g-empty p { margin: 0 auto 1rem; max-width: 46ch; }
.g-art { width: 100%; height: 100%; }

/*
 * Örnek içerik anahtarı: <html class="is-real"> gerçek sitede (BOOT varken) <body> başında konur.
 *   [data-ornek]  → yalnız tasarım önizlemesinde görünür (gerçek sitede hiç boyanmaz, ilk anda bile)
 *   [data-gercek] → yalnız gerçek sitede görünür
 */
.is-real [data-ornek] { display: none !important; }
html:not(.is-real) [data-gercek] { display: none !important; }

/* Bekleyen hesap silme talebi şeridi: tüm sayfalarda en üstte (_gercek.js · BOOT.hesap_silme) */
.g-silme { position: relative; z-index: 2; background: #2a0d14; border-bottom: 1px solid rgba(248, 113, 113, 0.35); }
.g-silme-ic { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0.35rem 0.8rem; max-width: 1240px; margin: 0 auto; padding: 0.4rem 1.5rem; font-size: 0.8rem; line-height: 1.4; text-align: center; color: #fecaca; }
.g-silme-ic svg { flex-shrink: 0; width: 15px; height: 15px; color: #f87171; }
.g-silme-ic b { font-weight: 600; color: #fff; }
.g-silme button { height: 26px; padding: 0 0.75rem; border: 1px solid rgba(248, 113, 113, 0.55); border-radius: 7px; background: rgba(248, 113, 113, 0.14); color: #fff; font: inherit; font-size: 0.76rem; font-weight: 700; white-space: nowrap; cursor: pointer; transition: background 0.2s; }
.g-silme button:hover:not(:disabled) { background: rgba(248, 113, 113, 0.28); }
.g-silme button:disabled { opacity: 0.6; cursor: progress; }
.g-silme button:focus-visible { outline: 2px solid #fca5a5; outline-offset: 2px; }
@media (max-width: 640px) { .g-silme-ic { gap: 0.35rem 0.6rem; padding: 0.4rem 0.75rem; font-size: 0.74rem; } }
@media (max-width: 420px) { .g-silme-ic svg { display: none; } } /* telefonda tek satır kalsın */

/* "Oyun sunucusu açılınca burada görünecek" kutusu (G.bekle) */
.g-bekle { grid-column: 1 / -1; display: flex; align-items: center; gap: 1rem; padding: 1.25rem 1.4rem; border-radius: 16px; background: rgba(11, 20, 38, 0.88); border: 1px dashed rgba(94, 234, 212, 0.4); color: var(--muted, #cbd5e1); text-align: left; }
.g-bekle-ico { flex-shrink: 0; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; background: rgba(94, 234, 212, 0.12); color: #5eead4; }
.g-bekle-ico svg { width: 24px; height: 24px; }
.g-bekle b { display: block; margin-bottom: 0.2rem; font-size: 0.98rem; color: #fff; }
.g-bekle p { margin: 0; font-size: 0.88rem; line-height: 1.5; }
.g-bekle a { color: var(--orange, #ff8a3d); font-weight: 600; }
.g-bekle--buyuk { flex-direction: column; justify-content: center; padding: 2.4rem 1.4rem; text-align: center; }
.g-bekle--buyuk .g-bekle-ico { width: 58px; height: 58px; }
.g-bekle--buyuk p { max-width: 52ch; margin: 0 auto; }
.g-bekle-kap { max-width: 1180px; margin: 1.5rem auto; padding: 0 1.25rem; }

/* Gerçek veri gelene kadar örnek sayılar/haberler görünmesin (durum: _gercek.js, ana sayfa: index.js, yardım: yardim.js) */
.is-real:not(.durum-yuklendi) .tb-status,
.is-real:not(.durum-yuklendi) .tb-event,
.is-real:not(.durum-yuklendi) .sf-status,
.is-real:not(.durum-yuklendi) .mm-status { visibility: hidden; }
.is-real .hero-badge:not(.is-yuklendi),
.is-real .stats:not(.is-yuklendi),
.is-real .events-card:not(.is-yuklendi) .ec-next,
.is-real .events-card:not(.is-yuklendi) .ec-list,
.is-real #news-grid:not(.is-yuklendi),
.is-real [data-hc-statusbox]:not(.is-yuklendi) .hc-status-txt h2 { visibility: hidden; }

/* ===== arkadas.css ===== */
/* =========================================================
   Arkadaşlık ve davet: Hesabım → Arkadaşlar (fr-), profil ⋯ menüsü (pf-more), davet sayfası gerçek mod eklentileri (rf-)
   ========================================================= */

/* ---- Hesabım → Arkadaşlar ---- */
.fr-list { margin: 0; padding: 0; list-style: none; }
.fr-item { display: flex; align-items: center; gap: 0.8rem; padding: 0.7rem 0; }
.fr-item + .fr-item { border-top: 1px solid var(--line); }
.fr-av { position: relative; flex-shrink: 0; display: block; }
.fr-av img { display: block; width: 40px; height: 40px; border-radius: 8px; image-rendering: pixelated; }
.fr-dot { position: absolute; right: -3px; bottom: -3px; width: 13px; height: 13px; border-radius: 50%; border: 2px solid #0b1426; background: #475569; }
.fr-dot.is-game { background: #34d399; box-shadow: 0 0 6px rgba(52, 211, 153, 0.7); }
.fr-dot.is-site { background: #5eead4; }
.fr-dot.is-gizli { background: #334155; }
.fr-who { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.2rem 0.45rem; }
.fr-who > a { color: inherit; text-decoration: none; }
.fr-who b { font-size: 0.9rem; color: #fff; }
.fr-who > a:hover b, .fr-who > a:focus-visible b { color: #ffb07a; }
.fr-who .badge { font-size: 0.62rem; }
.fr-who small { flex-basis: 100%; font-size: 0.76rem; color: var(--faint); }
.fr-st.is-game { color: #6ee7b7; font-weight: 600; }
.fr-st.is-site { color: #5eead4; }
.fr-act { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.4rem; flex-shrink: 0; }
.ac-mini-btn.fr-yes { color: #2a1204; background: linear-gradient(180deg, #ffb87e, #ff8a3d); border-color: transparent; }
.ac-mini-btn.fr-yes:hover { color: #2a1204; filter: brightness(1.08); }
.ac-mini-btn:disabled { opacity: 0.6; cursor: wait; }
.fr-search { margin: 0; }
.fr-search .input, .fr-filter .input { width: 100%; height: 42px; }
.fr-add .fr-list:not(:empty) { margin-top: 0.5rem; }
.fr-filter { margin-bottom: 0.3rem; }
.fr-filter .input { height: 38px; }
.fr-list .ac-empty { padding: 0.8rem 0; }
@media (max-width: 640px) {
    .fr-item { flex-wrap: wrap; }
    .fr-act { width: 100%; justify-content: flex-start; margin-left: calc(40px + 0.8rem); }
}

/* ---- Profil: ⋯ menüsü (Engelle / Engeli kaldır) ---- */
.pf-more { position: relative; display: inline-flex; }
.pf-more[hidden] { display: none; }
.pf-more-btn { width: 42px; justify-content: center; padding: 0; }
.pf-more-btn svg { width: 18px; height: 18px; }
.pf-more-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 190px; padding: 0.35rem; border-radius: 12px; background: #0b1426; border: 1px solid var(--line-strong); box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5); }
.pf-more-menu[hidden] { display: none; }
.pf-more-menu button { display: block; width: 100%; padding: 0.6rem 0.75rem; border: 0; border-radius: 8px; background: none; color: #fca5a5; font: inherit; font-size: 0.84rem; font-weight: 600; text-align: left; cursor: pointer; }
.pf-more-menu button:hover, .pf-more-menu button:focus-visible { background: rgba(248, 113, 113, 0.12); outline: none; }
.pf-engel-not { margin: 0.8rem 0 0; padding: 0.6rem 0.8rem; border-radius: 10px; font-size: 0.84rem; line-height: 1.5; color: #fecaca; background: rgba(248, 113, 113, 0.08); border: 1px solid rgba(248, 113, 113, 0.3); }
@media (max-width: 900px) {
    .pf-more-menu { right: auto; left: 50%; transform: translateX(-50%); }
}

/* ---- Davet sayfası (gerçek mod) ---- */
.rf-by { margin: 0.9rem 0 0; font-size: 0.84rem; color: var(--muted); }
.rf-by a { color: #ffd3b0; text-decoration: none; }
.rf-by b { color: inherit; }
.rf-copy.is-copied, .rf-mini.is-copied { filter: saturate(0.6); }
.rf-mini.is-copied { color: #6ee7b7; border-color: rgba(52, 211, 153, 0.4); }
.rf-sh--share svg { color: #ffb07a; }
button.rf-sh { font: inherit; font-size: 0.82rem; font-weight: 600; cursor: pointer; }
.rf-stats .is-soon b { font-family: var(--font-brand); font-size: 1.15rem; color: #d8b4fe; }
.rf-stats .is-soon { border-color: rgba(192, 132, 252, 0.35); }
.rf-yakinda { display: flex; align-items: center; gap: 0.9rem; padding: 1rem 1.2rem; border-radius: 16px; background: rgba(192, 132, 252, 0.07); border: 1px dashed rgba(192, 132, 252, 0.45); }
.rf-yakinda-tag { flex-shrink: 0; padding: 0.3rem 0.6rem; border-radius: 7px; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.14em; color: #2e1065; background: #d8b4fe; }
.rf-yakinda b { display: block; margin-bottom: 0.15rem; font-size: 0.95rem; color: #fff; }
.rf-yakinda span:not(.rf-yakinda-tag) { font-size: 0.86rem; line-height: 1.5; color: var(--muted); }
.is-real .rf-both, .is-real .rf-tiers { opacity: 0.7; }
.rf-list .rf-bos { display: block; padding: 0.9rem 0; font-size: 0.86rem; color: var(--muted); }
.rf-who > a { color: inherit; text-decoration: none; }
.rf-who > a:hover b { color: #ffb07a; }
.rf-rw.is-joined { font-family: inherit; font-size: 0.74rem; font-weight: 600; color: #6ee7b7; }
@media (max-width: 640px) {
    .rf-yakinda { flex-direction: column; align-items: flex-start; }
}

/* ===== auth.css ===== */
/* =========================================================
   Hesap sayfaları: giris.html + kayit.html — önek: au-
   Tek kartta bölünmüş düzen: solda görsel/önizleme paneli, sağda form.
   ========================================================= */
.au-page {
    position: relative;
    isolation: isolate;
    max-width: 1180px;
    margin: 0 auto;
    padding: 6.5rem 1.5rem 4.5rem;
}
.au-page::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 3rem;
    z-index: -1;
    width: min(1400px, 150%);
    height: 1000px;
    transform: translateX(-50%);
    background: radial-gradient(ellipse 48% 46% at 50% 44%, rgba(255, 138, 61, 0.1), rgba(5, 10, 20, 0.6) 48%, transparent 74%);
    pointer-events: none;
}
.au-page [hidden] { display: none !important; }

/* ---------- Kart ---------- */
.au-card {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr);
    max-width: 1100px;
    margin: 0 auto;
    overflow: hidden;
    border-radius: 24px;
    background: rgba(8, 13, 26, 0.97);
    border: 1px solid rgba(255, 138, 61, 0.24);
    box-shadow: 0 0 0 6px rgba(8, 13, 26, 0.55), 0 0 0 7px rgba(255, 138, 61, 0.08), 0 50px 120px rgba(0, 0, 0, 0.6), 0 0 140px rgba(255, 138, 61, 0.12);
}
.au-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 10%;
    right: 10%;
    z-index: 4;
    height: 1px;
    background: linear-gradient(90deg, transparent, #ffb07a 30%, #5eead4 70%, transparent);
}
/* Kart .reveal ile belirir (opacity:0 + rise animasyonu). Sallama animasyonu rise'ın YERİNE geçtiği için sallama bitince kart
   opacity:0'a dönüp tamamen kayboluyordu (hatalı girişte "boş sayfa") → sallanırken ve sonrasında hep görünür kalsın (bkz. odeme .co-shake) */
.au-card.au-shake { animation: au-shake 0.45s var(--ease); opacity: 1; transform: none; }

/* ---------- Sol panel ---------- */
.au-art {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
    min-height: 680px;
    padding: 1.75rem 2.2rem 1.7rem 2rem;
    overflow: hidden;
    background: #0a1222;
}
.au-art::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        radial-gradient(ellipse 90% 50% at 0% 100%, rgba(221, 99, 32, 0.4), transparent 70%),
        linear-gradient(180deg, rgba(5, 10, 20, 0.6) 0%, rgba(5, 10, 20, 0.08) 20%, rgba(5, 10, 20, 0.55) 38%, rgba(5, 10, 20, 0.9) 56%, rgba(5, 10, 20, 0.97) 100%);
    pointer-events: none;
}
/* ince piksel ızgara dokusu */
.au-art::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background-image: linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
    background-size: 6px 6px;
    pointer-events: none;
}
.au-art-img {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 0%;
    transform: scale(1.04);
    transform-origin: 50% 0;
    animation: au-drift 30s ease-in-out infinite alternate;
}
/* Sağ kenar: panel forma piksel piksel dağılarak geçer */
.au-art-dither {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    width: 42px;
    pointer-events: none;
    background:
        linear-gradient(#080d1a, #080d1a) right top / 6px 100% no-repeat,
        conic-gradient(#080d1a 0 75%, transparent 0) 24px 0 / 12px 12px repeat-y,
        repeating-conic-gradient(#080d1a 0 25%, transparent 0 50%) 12px 0 / 12px 12px repeat-y,
        conic-gradient(#080d1a 0 25%, transparent 0) 0 6px / 12px 12px repeat-y;
}
.au-art-top, .au-art-body, .au-art-foot, .au-reg-head, .au-stage, .au-stage-cap, .au-gets { position: relative; z-index: 3; }

.au-art-top { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.au-live {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    height: 32px;
    padding: 0 0.85rem 0 0.7rem;
    border-radius: 999px;
    font-size: 0.8rem;
    color: var(--muted);
    white-space: nowrap;
    background: rgba(5, 10, 20, 0.88);
    border: 1px solid rgba(255, 255, 255, 0.12);
}
.au-live b { font-weight: 700; color: #fff; }
.au-season {
    padding: 0.42rem 0.75rem 0.38rem;
    font-family: var(--font-brand);
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    color: #2a1204;
    background: linear-gradient(180deg, #ffc596, #ff8a3d);
    clip-path: var(--px-sm);
}

.au-art-body { margin-top: auto; }
.au-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.24em;
    color: #ffd3b0;
    text-shadow: 0 1px 2px rgba(5, 10, 20, 0.9);
}
/* piksel iz: üç kare */
.au-kicker::before {
    content: '';
    width: 6px;
    height: 6px;
    margin-right: 18px;
    background: #ff8a3d;
    box-shadow: 9px 0 0 rgba(255, 138, 61, 0.55), 18px 0 0 rgba(94, 234, 212, 0.55);
}
.au-art-title {
    margin: 0.8rem 0 0;
    font-family: var(--font-brand);
    font-size: clamp(2.3rem, 3.8vw, 3.2rem);
    font-weight: 700;
    line-height: 1.02;
    letter-spacing: 0.01em;
    background: linear-gradient(180deg, #fff 0%, #ffe7d6 52%, #ff9a52 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 4px 18px rgba(5, 10, 20, 0.85));
}
.au-art-lead { max-width: 390px; margin: 0.9rem 0 0; font-size: 0.98rem; line-height: 1.6; color: #d3d9e6; text-shadow: 0 1px 2px rgba(5, 10, 20, 0.95), 0 0 16px rgba(5, 10, 20, 0.8); }

.au-perks { display: grid; gap: 0.8rem; margin: 1.5rem 0 0; padding: 0; list-style: none; }
.au-perks li { display: flex; align-items: flex-start; gap: 0.85rem; }
.au-perk-ico {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    color: #2a1204;
    background: linear-gradient(180deg, #ffb87e, #ff8a3d 60%, #ea6420);
    clip-path: var(--px-sm);
}
.au-perk-ico svg { width: 13px; height: 12px; }
.au-perks b { display: block; font-size: 0.92rem; font-weight: 600; color: #fff; }
.au-perks small { display: block; margin-top: 0.12rem; font-size: 0.8rem; line-height: 1.45; color: #b9c2d4; }

.au-art-foot {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.75rem 0.95rem;
    border-radius: 12px;
    font-size: 0.8rem;
    color: var(--muted);
    background: rgba(5, 10, 20, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.au-art-foot b { color: #fff; font-weight: 600; }
.au-foot-ico { width: 8px; height: 8px; flex-shrink: 0; background: #34d399; box-shadow: 0 0 10px #34d399; }
.au-clock { margin-left: auto; font-family: var(--font-mono); font-size: 0.86rem; font-weight: 600; color: #ffb07a; letter-spacing: 0.04em; }

/* ---------- Sağ panel ---------- */
.au-main { position: relative; display: flex; flex-direction: column; padding: 2.3rem 3.2rem 2.4rem; }
/* köşelerde ince piksel köşebentler */
.au-main::before, .au-main::after {
    content: '';
    position: absolute;
    right: 14px;
    width: 16px;
    height: 16px;
    opacity: 0.55;
    pointer-events: none;
}
.au-main::before { top: 14px; background: linear-gradient(#ff8a3d, #ff8a3d) right top / 100% 3px no-repeat, linear-gradient(#ff8a3d, #ff8a3d) right top / 3px 100% no-repeat; }
.au-main::after { bottom: 14px; background: linear-gradient(#5eead4, #5eead4) right bottom / 100% 3px no-repeat, linear-gradient(#5eead4, #5eead4) right bottom / 3px 100% no-repeat; }

.au-switch {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    padding: 4px;
    border-radius: 12px;
    background: rgba(5, 10, 20, 0.9);
    border: 1px solid var(--line);
}
.au-switch a {
    display: grid;
    place-items: center;
    height: 38px;
    border-radius: 9px;
    font-family: var(--font-brand);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--muted);
    text-decoration: none;
    transition: color 0.2s var(--ease), background 0.2s var(--ease);
}
.au-switch a:hover { color: #fff; background: rgba(255, 255, 255, 0.04); }
.au-switch a.is-active { color: #2a1204; background: linear-gradient(180deg, #ffb87e, #ff8a3d); box-shadow: inset 0 -2px 0 rgba(110, 36, 4, 0.4); }

.au-pane { margin-top: 2rem; animation: au-in 0.5s var(--ease) both; }
.au-title {
    margin: 0.7rem 0 0;
    font-family: var(--font-brand);
    font-size: clamp(1.8rem, 2.6vw, 2.3rem);
    font-weight: 700;
    line-height: 1.12;
    background: linear-gradient(180deg, #fff 30%, #ffd2b0);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.au-sub { margin: 0.6rem 0 0; font-size: 0.95rem; line-height: 1.6; color: var(--muted); }
.au-sub b { color: #fff; }
.au-head--center { text-align: center; }
.au-head--center .eyebrow { justify-content: center; }

/* ---------- Form ---------- */
.au-form { display: grid; gap: 1.15rem; margin-top: 1.6rem; }
.au-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.au-counter { font-family: var(--font-mono); font-size: 0.74rem; color: var(--faint); transition: color 0.2s var(--ease); }
.au-counter.is-max { color: #ffb07a; }
.au-input { height: 52px; }
.au-input--end { padding-right: 3.3rem; }
.input-group:focus-within > svg { color: #ffb07a; }
.au-field.is-error .input { border-color: rgba(248, 113, 113, 0.75); box-shadow: 0 0 0 4px rgba(248, 113, 113, 0.12); }
.au-field.is-error .input-group > svg { color: #fca5a5; }
.au-field.is-valid .input { border-color: rgba(52, 211, 153, 0.55); }
.au-field.is-valid .input-group > svg { color: #6ee7b7; }
.au-field .input:not(.au-input--end) { padding-right: 2.8rem; }

.au-state {
    position: absolute;
    top: 50%;
    right: 1rem;
    width: 16px;
    height: 14px;
    color: #34d399;
    opacity: 0;
    transform: translateY(-50%) scale(0.4);
    transition: opacity 0.2s var(--ease), transform 0.3s var(--ease);
    pointer-events: none;
}
.au-state svg { display: block; width: 100%; height: 100%; }
.au-field.is-valid .au-state { opacity: 1; transform: translateY(-50%) scale(1); }

.au-eye {
    position: absolute;
    top: 50%;
    right: 6px;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--faint);
    cursor: pointer;
    transform: translateY(-50%);
    transition: color 0.2s var(--ease), background 0.2s var(--ease);
}
.au-eye:hover { color: #ffd3b0; background: rgba(255, 255, 255, 0.05); }
.au-eye:focus-visible { outline: 2px solid #5eead4; outline-offset: -2px; }
.au-eye svg { width: 19px; height: 19px; }
.au-eye .au-eye-off, .au-eye[aria-pressed="true"] .au-eye-on { display: none; }
.au-eye[aria-pressed="true"] .au-eye-off { display: block; }
.au-eye[aria-pressed="true"] { color: #ffb07a; }

.au-hint-row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.au-hint-row .hint:empty { display: none; }
.hint[data-au-hint]:empty { display: none; }
.au-caps {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    height: 24px;
    margin-left: auto;
    padding: 0 0.6rem;
    border-radius: 6px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    white-space: nowrap;
    color: #fde68a;
    background: rgba(66, 48, 10, 0.92);
    border: 1px solid rgba(251, 191, 36, 0.4);
    animation: au-pop 0.25s var(--ease);
}
.au-caps svg { width: 9px; height: 9px; }

.au-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.6rem 1rem; }
.au-link { font-size: 0.88rem; font-weight: 600; color: #ffb07a; text-decoration: none; text-underline-offset: 3px; transition: color 0.2s var(--ease); }
.au-link:hover { color: #ffd3b0; text-decoration: underline; }

/* Ana buton: tam genişlik + yükleniyor durumu */
.au-submit { width: 100%; margin-top: 0.3rem; }
.au-dots { position: relative; display: none; align-items: center; gap: 4px; }
.au-dots i { width: 6px; height: 6px; background: #2a1204; animation: au-dot 0.9s ease-in-out infinite; }
.au-dots i:nth-child(2) { animation-delay: 0.15s; }
.au-dots i:nth-child(3) { animation-delay: 0.3s; }
.au-submit.is-loading { pointer-events: none; }
.au-submit.is-loading .pb-icon { display: none; }
.au-submit.is-loading .au-dots { display: inline-flex; }
.au-submit.is-loading .pb-shine { animation-duration: 1.1s; }

.au-or {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 1.4rem 0;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--faint);
}
.au-or::before, .au-or::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--line-strong)); }
.au-or::after { background: linear-gradient(90deg, var(--line-strong), transparent); }

/* Discord: piksel köşeli, iki katmanlı */
.au-discord {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.7rem;
    width: 100%;
    height: 52px;
    font-size: 0.92rem;
    font-weight: 600;
    color: #fff;
    text-decoration: none;
    background: rgba(123, 134, 255, 0.6);
    clip-path: var(--px-sm);
    transition: filter 0.2s var(--ease), transform 0.2s var(--ease);
}
.au-discord::before { content: ''; position: absolute; inset: 1.5px; z-index: -1; background: linear-gradient(180deg, #2b3278, #1c2257); clip-path: var(--px-sm); }
.au-discord:hover { filter: brightness(1.18); transform: translateY(-1px); }
.au-discord svg { width: 20px; height: 20px; color: #c7ccff; }
/* Piksel köşeli (clip-path) düğmelerde outline kırpılır: odakta dış katman turuncu çerçeve olur */
.au-discord:focus-visible { outline: none; background: #ffb07a; }

/* ---------- Hızlı giriş: Google · Discord · geçiş anahtarı (auth.js; yapılandırılmamış olan gizlenir) ---------- */
.au-alt { display: grid; gap: 0.65rem; margin-top: 1.4rem; }
.au-alt-note { margin: 0.4rem 0 0; text-align: center; font-size: 0.74rem; color: var(--faint); }
/* Google: resmi koyu tema düğmesi (#131314 zemin, #8E918F çerçeve, #E3E3E3 yazı, değiştirilmemiş renkli "G") */
.au-google {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    width: 100%;
    height: 52px;
    padding: 0 1rem;
    border: 1px solid #8e918f;
    border-radius: 4px;
    background: #131314;
    color: #e3e3e3;
    font-family: Roboto, "Segoe UI", Arial, sans-serif;
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    text-decoration: none;
    transition: background 0.2s var(--ease);
}
.au-google:hover { background: #262628; }
.au-google:focus-visible { outline: 2px solid #ffb07a; outline-offset: 3px; }
.au-google svg { flex-shrink: 0; width: 20px; height: 20px; }
.au-passkey {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.7rem;
    width: 100%;
    height: 52px;
    padding: 0 1rem;
    border: 0;
    font: inherit;
    font-size: 0.92rem;
    font-weight: 600;
    color: #fff;
    background: rgba(94, 234, 212, 0.45);
    clip-path: var(--px-sm);
    cursor: pointer;
    transition: filter 0.2s var(--ease), transform 0.2s var(--ease);
}
.au-passkey::before { content: ''; position: absolute; inset: 1.5px; z-index: -1; background: linear-gradient(180deg, #15313a, #0e2028); clip-path: var(--px-sm); }
.au-passkey:hover { filter: brightness(1.18); transform: translateY(-1px); }
.au-passkey:focus-visible { outline: none; background: #ffb07a; }
.au-passkey svg { flex-shrink: 0; width: 20px; height: 20px; color: #5eead4; }
.au-google.is-busy, .au-discord.is-busy, .au-passkey.is-busy { pointer-events: none; opacity: 0.72; transform: none; }
.au-linkrow { display: grid; justify-items: center; gap: 0.15rem; margin: 1.1rem 0 0; text-align: center; }
.au-linkrow small { font-size: 0.74rem; color: var(--faint); }
/* E-posta kodu adımı: "Kodu tekrar gönder" (sınırlı: sayaçla pasif) */
.au-resend { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 0.3rem 0.5rem; font-size: 0.82rem; color: var(--muted); text-align: center; }
.au-alert-act:disabled { color: var(--faint); text-decoration: none; cursor: default; }
.au-alert-act:focus-visible { outline: 2px solid #ffb07a; outline-offset: 2px; border-radius: 3px; }
/* Hesabını tamamla (Google/Discord ile yeni hesap) */
.au-tamamla { display: flex; align-items: center; gap: 0.8rem; margin-top: 1.2rem; padding: 0.8rem 1rem; border-radius: 12px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--line); }
.au-tamamla > div { flex: 1; min-width: 0; }
.au-tamamla b { display: block; font-size: 0.88rem; line-height: 1.35; color: #fff; }
.au-tamamla small { display: block; font-size: 0.76rem; color: var(--faint); overflow-wrap: anywhere; }
.au-tamamla-ico { flex-shrink: 0; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 8px; background: #131314; border: 1px solid #3c3d3f; }
.au-tamamla-ico svg { width: 20px; height: 20px; }
.au-tamamla[data-saglayici="discord"] .au-tamamla-ico { background: #5865f2; border-color: #5865f2; color: #fff; }
.au-tamamla[data-saglayici="discord"] .au-ti-g, .au-tamamla:not([data-saglayici="discord"]) .au-ti-d { display: none; }

.au-foot { margin: 1.4rem 0 0; text-align: center; font-size: 0.9rem; color: var(--muted); }

.au-alert {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    margin-top: 1.3rem;
    padding: 0.85rem 1rem;
    border-radius: 12px;
    font-size: 0.86rem;
    line-height: 1.5;
    color: #fecaca;
    background: rgba(58, 16, 22, 0.94);
    border: 1px solid rgba(248, 113, 113, 0.45);
    animation: au-pop 0.3s var(--ease);
}
.au-alert svg { flex-shrink: 0; width: 18px; height: 18px; margin-top: 1px; color: #f87171; }
.au-alert b { color: #fff; }
.au-note {
    margin-top: 1.3rem;
    padding: 0.85rem 1rem;
    border-radius: 12px;
    font-size: 0.88rem;
    line-height: 1.55;
    color: #bbf7d0;
    background: rgba(14, 48, 30, 0.92);
    border: 1px solid rgba(74, 222, 128, 0.4);
    animation: au-pop 0.3s var(--ease);
}
.au-alert[hidden], .au-note[hidden], .au-backup[hidden] { display: none; }
.au-backup { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.au-backup .au-alert { margin: 0 0 0.9rem; }
.au-backup-btn { width: 100%; justify-content: center; margin-top: 0.4rem; }
/* Gerçek site: örnek içerik (data-au-ornek) gizlenir, gerçek içerik (data-au-gercek) açılır; hidden her zaman gizler */
.au-page [hidden] { display: none !important; }
.au-alert-act { padding: 0; border: 0; background: none; color: #ffb07a; font: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.au-alert-act:hover { color: #ffd3b0; }
.au-done-note { margin: 1rem 0 0.4rem; text-align: left; }

/* ---------- İki adımlı doğrulama ---------- */
.au-back { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0; border: 0; background: none; font: inherit; font-size: 0.85rem; color: var(--muted); cursor: pointer; }
.au-back:hover { color: #fff; }
.au-2fa-ico {
    width: 72px;
    height: 72px;
    margin: 1.2rem auto 0.4rem;
    display: grid;
    place-items: center;
    background: linear-gradient(180deg, rgba(255, 138, 61, 0.2), rgba(94, 234, 212, 0.08));
    box-shadow: inset 0 0 0 1.5px rgba(255, 176, 122, 0.45);
    clip-path: var(--px-lg);
}
.au-2fa-ico svg { width: 34px; height: 37px; filter: drop-shadow(0 0 10px rgba(255, 138, 61, 0.5)); }
.au-otp { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) 14px repeat(3, minmax(0, 1fr)); align-items: center; gap: 0.55rem; }
.au-otp-sep { height: 3px; background: var(--line-strong); }
.au-otp input {
    width: 100%;
    height: 66px;
    padding: 0;
    border: 0;
    text-align: center;
    font-family: var(--font-mono);
    font-size: 1.75rem;
    font-weight: 600;
    color: #fff;
    caret-color: #ff8a3d;
    background: #0a1222;
    clip-path: var(--px-sm);
    box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.14), inset 0 -5px 0 rgba(0, 0, 0, 0.35);
    transition: box-shadow 0.2s var(--ease), background 0.2s var(--ease), color 0.2s var(--ease), transform 0.2s var(--ease);
}
.au-otp input:focus { outline: none; background: #17151b; box-shadow: inset 0 0 0 2px #ff8a3d, inset 0 -5px 0 rgba(255, 138, 61, 0.25); }
.au-otp input.is-filled { color: #ffd3b0; box-shadow: inset 0 0 0 1.5px rgba(255, 176, 122, 0.6), inset 0 -5px 0 rgba(255, 138, 61, 0.22); animation: au-pop 0.2s var(--ease); }
.au-otp.is-error input { color: #fca5a5; box-shadow: inset 0 0 0 1.5px rgba(248, 113, 113, 0.75); }
.au-otp.is-ok input { color: #6ee7b7; box-shadow: inset 0 0 0 1.5px rgba(52, 211, 153, 0.75), inset 0 -5px 0 rgba(16, 185, 129, 0.2); }
.au-otp.is-error { animation: au-shake 0.4s var(--ease); }
.au-totp { display: flex; align-items: center; gap: 0.8rem; font-size: 0.78rem; color: var(--faint); }
.au-totp .progress { flex: 1; height: 6px; }
.au-totp .progress > span { width: 100%; transition: width 1s linear; }
.au-totp b { min-width: 2.6rem; text-align: right; font-family: var(--font-mono); font-weight: 600; color: #ffd3b0; }
.au-otp-hint { text-align: center; }
.au-check-center { justify-content: center; }

/* ---------- Cloudflare Turnstile (auth.js; yalnız PIKSORA_BOOT.turnstile doluysa eklenir) ---------- */
.au-ts { display: grid; justify-items: center; gap: 0.45rem; margin-top: 0.9rem; }
.au-ts-widget { width: 100%; display: flex; justify-content: center; }
.au-ts-widget:empty { display: none; }
.au-ts.is-soru .au-ts-widget { padding: 0.45rem; border-radius: 12px; background: rgba(255, 138, 61, 0.06); box-shadow: inset 0 0 0 1px rgba(255, 138, 61, 0.4); }
.au-ts-note { display: inline-flex; align-items: center; gap: 0.35rem; margin: 0; font-size: 0.72rem; color: var(--faint); }
.au-ts-note svg { width: 12px; height: 12px; flex-shrink: 0; color: #5eead4; }
.au-ts.is-soru .au-ts-note { color: #ffd3b0; }

/* ---------- Başarılı durum ---------- */
.au-done { text-align: center; padding-top: 0.8rem; }
.au-done .eyebrow { justify-content: center; margin-top: 1.5rem; }
.au-done .au-sub { max-width: 400px; margin-inline: auto; }
.au-ok-wrap { position: relative; width: 96px; height: 96px; margin: 0.6rem auto 0; }
.au-ok {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    color: #03261a;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.45) 0, rgba(255, 255, 255, 0) 4px),
        linear-gradient(180deg, #a7f3d0, #34d399 55%, #059669);
    clip-path: var(--px-lg);
    box-shadow: inset 0 -5px 0 rgba(4, 60, 40, 0.45);
    animation: au-pop 0.6s var(--ease) both;
}
.au-ok svg { width: 42px; height: 37px; }
.au-ok-ring { position: absolute; inset: 0; border: 2px solid rgba(52, 211, 153, 0.55); border-radius: 6px; animation: au-okring 2.4s ease-out infinite; }
.au-ok-ring + .au-ok-ring { animation-delay: 1.2s; }
.au-done-bar { max-width: 280px; margin: 1.4rem auto 0; }
.au-done-bar > span { width: 0; transition: width 1.8s linear; }
.au-done-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 0.7rem; margin-top: 1.7rem; }
.au-done .au-submit { margin-top: 1.5rem; }
.au-gift {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1.3rem;
    padding: 0.65rem 1rem 0.65rem 0.7rem;
    border-radius: 12px;
    text-align: left;
    font-size: 0.86rem;
    line-height: 1.45;
    color: var(--text);
    background: rgba(255, 138, 61, 0.1);
    border: 1px dashed rgba(255, 176, 122, 0.45);
}
.au-gift b { color: #ffd3b0; }
.au-gift code { font-family: var(--font-mono); font-size: 0.8rem; color: #5eead4; }
.au-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; margin: 1.1rem 0 0; padding: 0; list-style: none; }
.au-steps li { display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.6rem 0.4rem; border-radius: 10px; font-size: 0.82rem; font-weight: 600; color: var(--text); background: rgba(5, 10, 20, 0.85); border: 1px solid var(--line); }
.au-steps b { width: 22px; height: 22px; display: grid; place-items: center; font-family: var(--font-mono); font-size: 0.72rem; color: #2a1204; background: #ffb07a; clip-path: var(--px-sm); }

.au-trust { display: flex; justify-content: center; flex-wrap: wrap; gap: 0.6rem 1.8rem; margin: 1.8rem auto 0; padding: 0; list-style: none; font-size: 0.8rem; color: var(--muted); text-shadow: 0 1px 2px rgba(5, 10, 20, 0.9), 0 0 14px rgba(5, 10, 20, 0.85); }
.au-trust li { display: inline-flex; align-items: center; gap: 0.45rem; }
.au-trust svg { width: 15px; height: 15px; color: #5eead4; }
.au-trust a { margin-left: 0.25rem; color: #ffd3b0; }

/* =========================================================
   Kayıt: canlı karakter sahnesi
   ========================================================= */
.au-art--reg { gap: 1rem; }
.au-art--reg .au-art-img { object-position: 50% 20%; filter: saturate(0.75) brightness(0.62); }
.au-art--reg::before {
    background:
        radial-gradient(ellipse 60% 34% at 50% 66%, rgba(255, 138, 61, 0.2), transparent 70%),
        linear-gradient(180deg, rgba(5, 10, 20, 0.7) 0%, rgba(5, 10, 20, 0.45) 28%, rgba(5, 10, 20, 0.78) 55%, rgba(5, 10, 20, 0.97) 100%);
}
/* sahnenin arkasında karakteri zeminden ayıran koyu hale */
.au-stage::before {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 10px;
    width: 380px;
    height: 400px;
    transform: translateX(-50%);
    background: radial-gradient(ellipse 50% 50% at 50% 58%, rgba(5, 10, 20, 0.85), rgba(5, 10, 20, 0.55) 55%, transparent 76%);
    pointer-events: none;
}
.au-reg-head { margin-top: 0.6rem; }
.au-reg-head .au-art-title { font-size: clamp(2.2rem, 3.4vw, 2.9rem); }

.au-stage {
    position: relative;
    flex: 1;
    min-height: 350px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
}
.au-beam {
    position: absolute;
    left: 50%;
    bottom: 60px;
    width: 180px;
    height: 88%;
    transform: translateX(-50%);
    background: linear-gradient(0deg, rgba(255, 138, 61, 0.32), rgba(255, 176, 122, 0.08) 55%, transparent);
    clip-path: polygon(20% 100%, 80% 100%, 100% 0, 0 0);
    opacity: 0.65;
    transition: opacity 0.4s var(--ease);
}
.au-halo {
    position: absolute;
    left: 50%;
    bottom: 36px;
    width: 320px;
    height: 90px;
    transform: translateX(-50%);
    background: radial-gradient(ellipse at center, rgba(255, 138, 61, 0.62), rgba(255, 138, 61, 0.16) 50%, transparent 72%);
    transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}
.au-tag {
    position: relative;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    max-width: 92%;
    margin-bottom: 14px;
    padding: 0.42rem 0.8rem;
    font-family: var(--font-mono);
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
    color: #fff;
    background: rgba(8, 12, 22, 0.9);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
    clip-path: var(--px-sm);
}
.au-tag [data-au-tagname] { overflow: hidden; text-overflow: ellipsis; }
.au-tag.is-empty [data-au-tagname] { color: var(--faint); }
.au-tag.is-bump { animation: au-bump 0.22s var(--ease); }
.au-tag-new { padding: 0.12rem 0.35rem; font-size: 0.6rem; font-weight: 800; letter-spacing: 0.1em; color: #2a1204; background: #5eead4; }

.au-skin { position: relative; z-index: 2; height: 250px; animation: au-bob 4.6s ease-in-out infinite; }
.au-skin img {
    display: block;
    height: 100%;
    width: auto;
    max-width: none;
    image-rendering: pixelated;
    transform-origin: 50% 100%;
    filter: drop-shadow(0 16px 16px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 26px rgba(255, 138, 61, 0.25));
    transition: opacity 0.3s var(--ease), transform 0.5s var(--ease), filter 0.5s var(--ease);
}
.au-pedestal { position: relative; z-index: 1; display: block; width: 250px; height: auto; margin-top: -12px; filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.6)); }
.au-ring {
    position: absolute;
    left: 50%;
    bottom: 46px;
    z-index: 1;
    width: 170px;
    height: 36px;
    margin-left: -85px;
    border-radius: 50%;
    border: 2px solid rgba(255, 211, 176, 0.95);
    box-shadow: 0 0 18px rgba(255, 138, 61, 0.7);
    opacity: 0;
    pointer-events: none;
}
/* yükselen piksel kıvılcımlar */
.au-motes { position: absolute; left: 50%; bottom: 64px; z-index: 2; width: 170px; height: 280px; margin-left: -85px; pointer-events: none; }
.au-motes i { position: absolute; bottom: 0; width: 4px; height: 4px; background: #ffd3b0; box-shadow: 0 0 8px #ff8a3d; opacity: 0; animation: au-mote 5s linear infinite; }
.au-motes i:nth-child(1) { left: 8%; animation-delay: 0s; }
.au-motes i:nth-child(2) { left: 22%; animation-delay: 1.6s; width: 3px; height: 3px; }
.au-motes i:nth-child(3) { left: 36%; animation-delay: 3.1s; background: #99f6e4; box-shadow: 0 0 8px #5eead4; }
.au-motes i:nth-child(4) { left: 50%; animation-delay: 0.8s; width: 3px; height: 3px; }
.au-motes i:nth-child(5) { left: 63%; animation-delay: 2.4s; }
.au-motes i:nth-child(6) { left: 76%; animation-delay: 4s; background: #99f6e4; box-shadow: 0 0 8px #5eead4; width: 3px; height: 3px; }
.au-motes i:nth-child(7) { left: 88%; animation-delay: 1.2s; }
.au-motes i:nth-child(8) { left: 44%; animation-delay: 3.6s; width: 3px; height: 3px; }
/* kayıt tamamlanınca patlayan pikseller (--dx / --dy JS ile) */
.au-burst { position: absolute; left: 50%; bottom: 170px; z-index: 4; width: 0; height: 0; pointer-events: none; }
.au-burst i { position: absolute; width: 6px; height: 6px; background: #ffb07a; opacity: 0; }
.au-burst i:nth-child(3n) { background: #5eead4; }
.au-burst i:nth-child(4n) { width: 4px; height: 4px; background: #fff; }

/* Karakter değişirken: söner, küçülür, parlayarak yeniden belirir */
.au-stage.is-swapping .au-skin img { opacity: 0; transform: scale(0.84) translateY(10px); filter: blur(5px) brightness(2.4) drop-shadow(0 0 30px rgba(255, 176, 122, 0.9)); }
.au-stage.is-swapping .au-beam { opacity: 1; }
.au-stage.is-swapping .au-halo { transform: translateX(-50%) scale(1.15); }
.au-stage.is-pulse .au-ring { animation: au-ring 0.9s ease-out; }
.au-stage.is-pulse .au-skin img { animation: au-materialize 0.9s var(--ease); }
.au-stage.is-burst .au-burst i { animation: au-burst 1.2s cubic-bezier(0.15, 0.7, 0.3, 1) forwards; }

.au-stage-cap { display: flex; align-items: center; justify-content: center; gap: 0.55rem; margin: 0.2rem 0 0; font-size: 0.78rem; color: #c3cbdb; text-shadow: 0 1px 2px rgba(5, 10, 20, 0.9); }
.au-cap-dot { width: 6px; height: 6px; background: #5eead4; box-shadow: 0 0 8px #5eead4; }
.au-stage-cap.is-busy .au-cap-dot { background: #ffb07a; box-shadow: 0 0 8px #ff8a3d; animation: au-blink 0.6s steps(2) infinite; }

.au-gets { display: grid; grid-template-columns: 1fr 1fr; gap: 0.55rem; margin: 0.4rem 0 0; padding: 0; list-style: none; }
.au-gets li { display: flex; align-items: center; gap: 0.65rem; padding: 0.65rem 0.75rem; border-radius: 12px; background: rgba(5, 10, 20, 0.9); border: 1px solid rgba(255, 255, 255, 0.08); }
.au-get-ico { flex-shrink: 0; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px; color: #ffd3b0; background: rgba(255, 138, 61, 0.14); border: 1px solid rgba(255, 176, 122, 0.28); }
.au-get-ico svg { width: 16px; height: 16px; }
.au-gets b { display: block; font-size: 0.8rem; font-weight: 600; line-height: 1.25; color: #fff; }
.au-gets small { display: block; margin-top: 0.1rem; font-size: 0.72rem; line-height: 1.35; color: var(--faint); }

/* Kullanıcı adı alanında canlı mini kafa */
.au-avatar { position: absolute; top: 50%; left: 0.85rem; width: 24px; height: 24px; border-radius: 5px; image-rendering: pixelated; transform: translateY(-50%); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.16); transition: opacity 0.25s var(--ease), transform 0.3s var(--ease); pointer-events: none; }
.au-avatar.is-swapping { opacity: 0.25; transform: translateY(-50%) scale(0.8); }
.au-field .input-group .au-input[data-au-name] { padding-left: 3rem; }
.au-code { font-family: var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; }

/* Şifre gücü: 4 piksel parça */
.au-meter-wrap { --mc: rgba(255, 255, 255, 0.3); display: grid; gap: 0.55rem; }
.au-meter-wrap[data-score="1"] { --mc: #f87171; }
.au-meter-wrap[data-score="2"] { --mc: #ff8a3d; }
.au-meter-wrap[data-score="3"] { --mc: #7fdcc6; }
.au-meter-wrap[data-score="4"] { --mc: #5eead4; }
.au-meter-top { display: flex; align-items: center; gap: 0.9rem; }
.au-meter { flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
.au-meter i {
    height: 8px;
    background: rgba(255, 255, 255, 0.08);
    clip-path: polygon(0 2px, 2px 2px, 2px 0, calc(100% - 2px) 0, calc(100% - 2px) 2px, 100% 2px, 100% calc(100% - 2px), calc(100% - 2px) calc(100% - 2px), calc(100% - 2px) 100%, 2px 100%, 2px calc(100% - 2px), 0 calc(100% - 2px));
    transition: background 0.25s var(--ease);
}
.au-meter-wrap[data-score="1"] .au-meter i:nth-child(-n + 1),
.au-meter-wrap[data-score="2"] .au-meter i:nth-child(-n + 2),
.au-meter-wrap[data-score="3"] .au-meter i:nth-child(-n + 3),
.au-meter-wrap[data-score="4"] .au-meter i {
    background: repeating-linear-gradient(90deg, var(--mc) 0 6px, color-mix(in srgb, var(--mc) 65%, #fff) 6px 8px);
}
.au-meter-wrap:not([data-score="0"]) .au-meter { filter: drop-shadow(0 0 5px color-mix(in srgb, var(--mc) 55%, transparent)); }
.au-meter-label { flex-shrink: 0; min-width: 118px; text-align: right; font-size: 0.76rem; color: var(--faint); }
.au-meter-label b { color: var(--mc); font-weight: 700; }
.au-meter-wrap[data-score="0"] .au-meter-label b { color: var(--faint); }
.au-reqs { display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; margin: 0; padding: 0; list-style: none; font-size: 0.74rem; color: var(--faint); }
.au-reqs li { display: inline-flex; align-items: center; gap: 0.4rem; transition: color 0.2s var(--ease); }
.au-reqs li::before { content: ''; width: 6px; height: 6px; background: rgba(255, 255, 255, 0.2); transition: background 0.2s var(--ease), box-shadow 0.2s var(--ease); }
.au-reqs li.is-met { color: #99f6e4; }
.au-reqs li.is-met::before { background: #5eead4; box-shadow: 0 0 6px #5eead4; }

.au-invite { display: grid; gap: 0.9rem; }
.au-invite-toggle { justify-self: start; display: inline-flex; align-items: center; gap: 0.5rem; padding: 0; border: 0; background: none; font: inherit; font-size: 0.88rem; font-weight: 600; color: #ffb07a; cursor: pointer; }
.au-invite-toggle:hover { color: #ffd3b0; }
.au-invite-toggle small { font-weight: 500; color: var(--faint); }
.au-invite-toggle svg { width: 10px; height: 10px; transition: transform 0.25s var(--ease); }
.au-invite-toggle[aria-expanded="true"] svg { transform: rotate(45deg); }
.au-invite-field { animation: au-in 0.35s var(--ease); }

.au-checks { display: grid; gap: 0.75rem; padding: 1rem 1.05rem; border-radius: 14px; background: rgba(5, 10, 20, 0.7); border: 1px solid var(--line); }
.au-checks .check { font-size: 0.86rem; }
.au-checks .check a { font-weight: 600; text-decoration: none; }
.au-checks .check a:hover { text-decoration: underline; }
.check.is-error { color: #fecaca; }
.check.is-error input { border-color: rgba(248, 113, 113, 0.85); box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.15); }
.au-opt { display: inline-block; margin-left: 0.25rem; font-size: 0.72rem; color: var(--faint); }

/* ---------- Animasyonlar ---------- */
@keyframes au-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes au-pop { 0% { transform: scale(0.6); opacity: 0; } 70% { transform: scale(1.06); opacity: 1; } 100% { transform: scale(1); } }
@keyframes au-drift { from { transform: scale(1.04) translate(0, 0); } to { transform: scale(1.12) translate(-2%, -1.5%); } }
@keyframes au-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes au-mote { 0% { opacity: 0; transform: translateY(0); } 12% { opacity: 1; } 80% { opacity: 0.7; } 100% { opacity: 0; transform: translateY(-250px); } }
@keyframes au-ring { 0% { opacity: 1; transform: scale(0.4); } 100% { opacity: 0; transform: scale(1.7); } }
@keyframes au-materialize { 0% { filter: brightness(2.2) drop-shadow(0 0 34px rgba(255, 176, 122, 0.95)); } 100% { filter: drop-shadow(0 16px 16px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 26px rgba(255, 138, 61, 0.25)); } }
@keyframes au-burst { 0% { opacity: 1; transform: translate(0, 0) scale(1); } 100% { opacity: 0; transform: translate(var(--dx, 0), var(--dy, -80px)) scale(0.5); } }
@keyframes au-bump { 50% { transform: translateY(-3px); } }
@keyframes au-blink { 50% { opacity: 0.2; } }
@keyframes au-dot { 0%, 100% { transform: translateY(0); opacity: 0.35; } 50% { transform: translateY(-4px); opacity: 1; } }
@keyframes au-shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-8px); } 40% { transform: translateX(7px); } 60% { transform: translateX(-5px); } 80% { transform: translateX(3px); } }
@keyframes au-okring { 0% { opacity: 0.9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.55); } }

@media (prefers-reduced-motion: reduce) {
    .au-art-img, .au-skin, .au-motes i, .au-pane, .au-ok, .au-ok-ring, .au-caps, .au-alert, .au-invite-field,
    .au-tag.is-bump, .au-card.au-shake, .au-otp.is-error, .au-otp input.is-filled, .au-dots i { animation: none !important; }
    .au-motes, .au-ok-ring { display: none; }
    .au-skin img { transition: opacity 0.2s linear; }
    .au-stage.is-swapping .au-skin img { transform: none; filter: none; }
    .au-stage.is-pulse .au-ring, .au-stage.is-pulse .au-skin img, .au-stage.is-burst .au-burst i { animation: none; }
}

/* ---------- Tablet ---------- */
@media (max-width: 1000px) {
    .au-page { padding: 4rem 1.25rem 4rem; }
    .au-main { padding: 2rem 2rem 2.2rem; }
    .au-art { padding: 1.5rem 1.9rem 1.5rem 1.5rem; }
}
@media (max-width: 860px) {
    .au-card { grid-template-columns: 1fr; max-width: 580px; }
    .au-art { min-height: 0; padding: 1.5rem; }
    .au-art-dither {
        top: auto;
        left: 0;
        width: auto;
        height: 42px;
        background:
            linear-gradient(#080d1a, #080d1a) left bottom / 100% 6px no-repeat,
            conic-gradient(#080d1a 0 75%, transparent 0) 0 24px / 12px 12px repeat-x,
            repeating-conic-gradient(#080d1a 0 25%, transparent 0 50%) 0 12px / 12px 12px repeat-x,
            conic-gradient(#080d1a 0 25%, transparent 0) 6px 0 / 12px 12px repeat-x;
    }
    .au-art-body { margin-top: 3.5rem; }
    .au-art-foot { margin-bottom: 1.4rem; }
    .au-reg-head { margin-top: 0.2rem; }
    .au-stage { min-height: 330px; }
    .au-gets { margin-bottom: 1.6rem; }
}

/* ---------- Mobil ---------- */
@media (max-width: 640px) {
    .au-page { padding: 2.5rem 0.85rem 3rem; }
    .au-card { border-radius: 20px; box-shadow: 0 0 0 4px rgba(8, 13, 26, 0.55), 0 30px 80px rgba(0, 0, 0, 0.6), 0 0 80px rgba(255, 138, 61, 0.12); }
    .au-art { padding: 1.2rem 1.15rem; gap: 1rem; }
    .au-art-body { margin-top: 2.2rem; }
    .au-art-title { font-size: 2.1rem; }
    .au-art-lead { font-size: 0.92rem; }
    .au-perks { display: none; }
    .au-art-foot { font-size: 0.76rem; padding: 0.65rem 0.8rem; }
    .au-live { font-size: 0.74rem; height: 30px; }
    .au-main { padding: 1.5rem 1.2rem 1.7rem; }
    .au-main::before, .au-main::after { display: none; }
    .au-pane { margin-top: 1.6rem; }
    .au-title { font-size: 1.75rem; }
    .au-sub { font-size: 0.9rem; }
    .au-stage { min-height: 300px; }
    .au-skin { height: 210px; }
    .au-pedestal { width: 214px; }
    .au-ring { bottom: 38px; }
    .au-stage::before { width: 320px; height: 340px; }
    .au-gets { gap: 0.45rem; }
    .au-gets li { padding: 0.55rem 0.6rem; gap: 0.5rem; }
    .au-gets small { display: none; }
    .au-get-ico { width: 28px; height: 28px; }
    .au-meter-label { min-width: 0; }
    .au-otp { gap: 0.35rem; grid-template-columns: repeat(3, minmax(0, 1fr)) 8px repeat(3, minmax(0, 1fr)); }
    .au-otp input { height: 54px; font-size: 1.4rem; }
    .au-steps li { font-size: 0.76rem; }
    .au-gift { font-size: 0.8rem; }
    .au-trust { flex-direction: column; align-items: center; gap: 0.5rem; }
}

/* ===== basvuru.css ===== */
/* =========================================================
   Ekip başvurusu (basvuru.html) — önek: ap-
   ========================================================= */
.ap-page [hidden] { display: none !important; }
.ap-page code { font-family: var(--font-mono); font-size: 0.84em; color: #ffd3b0; background: rgba(255, 138, 61, 0.1); padding: 0.05rem 0.35rem; border-radius: 5px; }
.ap-page button.btn-gold, .ap-page button.btn-ghost-px { border: 0; cursor: pointer; }
.ap-page .btn-ghost-px:disabled { opacity: 0.55; cursor: not-allowed; filter: none; transform: none; }

/* Piksel ikon renkleri */
.ap-pxi { display: block; width: 100%; height: 100%; }
.ap-px-a { fill: #ff8a3d; }
.ap-px-b { fill: #ffd3b0; }
.ap-px-c { fill: #c85418; }
.ap-px-d { fill: #2a1204; }
.ap-px-t { fill: #5eead4; }

.ap-mini { display: block; margin: 0 0 0.65rem; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.2em; color: #f2b48c; }

/* ---------- Hero ---------- */
.ap-open {
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    height: 40px;
    margin-top: 1.5rem;
    padding: 0 1.1rem;
    font-size: 0.86rem;
    color: var(--text);
    text-decoration: none;
    background: rgba(94, 234, 212, 0.35);
    clip-path: var(--px-sm);
    transition: filter 0.2s var(--ease);
}
.ap-open::before { content: ''; position: absolute; inset: 1px; z-index: -1; clip-path: var(--px-sm); background: rgba(8, 14, 27, 0.94); }
.ap-open:hover { filter: brightness(1.15); }
.ap-open b { color: #fff; font-weight: 700; }
.ap-open-dot { width: 8px; height: 8px; background: #5eead4; box-shadow: 0 0 10px rgba(94, 234, 212, 0.8); animation: ap-blink 1.6s steps(2) infinite; }
.ap-open-sep { width: 1px; height: 14px; background: var(--line-strong); }
.ap-open-date { color: var(--muted); }
.ap-open-arrow { color: #99f6e4; transition: transform 0.2s var(--ease); }
.ap-open:hover .ap-open-arrow { transform: translateX(3px); }
@keyframes ap-blink { 50% { opacity: 0.35; } }

.ap-hero-ghost { height: 60px; padding: 0 1.8rem; }

.ap-hero-stats {
    display: grid;
    grid-template-columns: 2fr repeat(3, 1fr);
    max-width: 940px;
    margin: 2.8rem auto 0;
    border-radius: 18px;
    border: 1px solid var(--line);
    background: var(--glass-strong);
    text-align: left;
    overflow: hidden;
}
.ap-hero-stats > * { padding: 1.15rem 1.4rem; }
.ap-hero-stats > * + * { border-left: 1px solid var(--line); }
.ap-crew { display: flex; align-items: center; gap: 1rem; }
.ap-crew-heads { display: flex; padding-left: 10px; }
.ap-crew-heads .mc-head { width: 34px; height: 34px; margin-left: -10px; border-radius: 8px; box-shadow: 0 0 0 2px #0b1426, 0 6px 14px rgba(0, 0, 0, 0.4); }
.ap-crew-more { display: grid; place-items: center; width: 34px; height: 34px; margin-left: -10px; border-radius: 8px; font-size: 0.7rem; font-weight: 700; color: #ffd3b0; background: #3a1d0c; box-shadow: 0 0 0 2px #0b1426; }
.ap-crew-txt b { display: block; font-size: 0.95rem; color: #fff; }
.ap-crew-txt small { font-size: 0.78rem; color: var(--muted); }
.ap-hs { text-align: center; }
.ap-hs b { display: block; font-family: var(--font-brand); font-size: 1.45rem; font-weight: 700; color: #fff; }
.ap-hs small { display: block; margin-top: 0.15rem; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); }

/* ---------- Pozisyon kartları ---------- */
.ap-roles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1.1rem; }
.ap-role {
    position: relative;
    grid-column: span 2;
    container-type: inline-size;
    display: flex;
    flex-direction: column;
    padding: 1.45rem;
    overflow: hidden;
    border-radius: 20px;
    background: var(--glass-strong);
    border: 1px solid var(--line);
    transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease), translate 0.25s var(--ease);
}
.ap-role::before {
    content: '';
    position: absolute;
    top: 0;
    left: 1.45rem;
    width: 96px;
    height: 3px;
    background: repeating-linear-gradient(90deg, #ff8a3d 0 6px, transparent 6px 10px);
    opacity: 0.85;
}
.ap-role::after {
    content: '';
    position: absolute;
    top: -80px;
    right: -80px;
    width: 220px;
    height: 220px;
    background: radial-gradient(circle, rgba(255, 138, 61, 0.12), transparent 65%);
    pointer-events: none;
}
.ap-role:hover { border-color: rgba(255, 138, 61, 0.32); translate: 0 -3px; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35); }
.ap-role.is-selected { border-color: rgba(255, 138, 61, 0.75); box-shadow: 0 0 0 3px rgba(255, 138, 61, 0.14), 0 18px 50px rgba(0, 0, 0, 0.35); }
.ap-role--wide { grid-column: span 3; }
.ap-role.is-closed { background: rgba(8, 13, 25, 0.9); }
.ap-role.is-closed::before { background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.3) 0 6px, transparent 6px 10px); }
.ap-role.is-closed::after { display: none; }
.ap-role.is-closed .ap-role-ico { filter: grayscale(0.85) brightness(0.85); }
.ap-role.is-closed:hover { translate: none; border-color: var(--line-strong); }

.ap-role-head { display: flex; align-items: center; gap: 0.95rem; }
.ap-role-ico {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    padding: 10px;
    clip-path: var(--px-sm);
    background: linear-gradient(180deg, rgba(255, 138, 61, 0.26), rgba(255, 138, 61, 0.08));
    box-shadow: inset 0 0 0 1px rgba(255, 176, 122, 0.35), inset 0 -3px 0 rgba(0, 0, 0, 0.25);
}
.ap-role-name { min-width: 0; }
.ap-role-name h3 { margin: 0; font-family: var(--font-brand); font-size: 1.22rem; font-weight: 700; color: #fff; line-height: 1.15; }
.ap-role-name small { display: block; margin-top: 0.2rem; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--faint); }
.ap-status { margin-left: auto; align-self: flex-start; }
.ap-status .live-dot { width: 6px; height: 6px; }
.ap-role-desc { margin: 1rem 0 1.15rem; font-size: 0.92rem; line-height: 1.6; color: var(--muted); }
.ap-role-desc a { color: #ffb07a; }

.ap-role-cols { display: grid; gap: 1.15rem; padding-top: 1.15rem; border-top: 1px dashed var(--line-strong); }
@container (min-width: 520px) {
    .ap-role-cols { grid-template-columns: 1.15fr 1fr; gap: 1.6rem; }
}
.ap-list { display: grid; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.ap-list li { position: relative; padding-left: 1.15rem; font-size: 0.88rem; line-height: 1.5; color: var(--text); }
.ap-list li::before { content: ''; position: absolute; left: 0; top: 0.5em; width: 6px; height: 6px; background: #ff8a3d; box-shadow: 2px 2px 0 #7a3712; }
.is-closed .ap-list li::before { background: #8591a9; box-shadow: 2px 2px 0 #3a4256; }

.ap-req { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin: 0; }
.ap-req > div { padding: 0.55rem 0.7rem; border-radius: 10px; background: rgba(255, 255, 255, 0.035); border: 1px solid var(--line); }
.ap-req dt { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); }
.ap-req dd { margin: 0.2rem 0 0; font-size: 0.85rem; font-weight: 600; line-height: 1.3; color: #fff; }

.ap-role-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: auto; padding-top: 1.4rem; }
.ap-slots { display: flex; align-items: center; gap: 0.6rem; font-size: 0.8rem; color: var(--muted); }
.ap-slots b { color: #fff; }
.ap-slots-bar { display: flex; gap: 3px; }
.ap-slots-bar i { width: 9px; height: 13px; background: #ff8a3d; box-shadow: inset 0 -3px 0 #c64e12, 0 0 8px rgba(255, 138, 61, 0.45); }
.ap-slots.is-full .ap-slots-bar i { background: rgba(255, 255, 255, 0.14); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.3); }
.ap-apply-btn { flex-shrink: 0; }

/* ---------- Süreç: piksel yol ---------- */
.ap-path-wrap { position: relative; max-width: 1180px; margin: 0 auto; }
.ap-path {
    position: absolute;
    top: 34px;
    left: 10%;
    right: 10%;
    height: 4px;
    background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.16) 0 6px, transparent 6px 12px);
}
.ap-path-fill {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 0;
    background: repeating-linear-gradient(90deg, #ff8a3d 0 6px, transparent 6px 12px);
    filter: drop-shadow(0 0 4px rgba(255, 138, 61, 0.75));
    transition: width 2.6s steps(30);
}
.ap-path-walker {
    position: absolute;
    top: 50%;
    right: -6px;
    width: 12px;
    height: 12px;
    transform: translateY(-50%);
    background: #ffd3b0;
    box-shadow: 0 0 0 2px #7a3712, 0 0 14px #ff8a3d;
}
.ap-path-wrap.is-in .ap-path-fill { width: 100%; }

.ap-steps { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; margin: 0; padding: 0; list-style: none; }
.ap-step { display: flex; flex-direction: column; align-items: center; text-align: center; }
.ap-step-badge {
    position: relative;
    isolation: isolate;
    display: grid;
    place-items: center;
    width: 68px;
    height: 68px;
    color: #ffd3b0;
    background: rgba(255, 138, 61, 0.7);
    clip-path: var(--px-lg);
    transition: background 0.4s var(--ease), color 0.4s var(--ease);
}
.ap-step-badge::before { content: ''; position: absolute; inset: 2px; z-index: -1; clip-path: var(--px-lg); background: linear-gradient(180deg, #16223a, #0b1426); }
.ap-step-badge svg { width: 26px; height: 26px; }
.ap-step--final .ap-step-badge { color: #2a1204; background: #ffe2cc; }
.ap-step--final .ap-step-badge::before { background: linear-gradient(180deg, #ffb87e, #ff8a3d 55%, #dd6320); }
.js .ap-path-wrap:not(.is-in) .ap-step-badge { color: var(--faint); background: rgba(255, 255, 255, 0.16); }
.js .ap-path-wrap:not(.is-in) .ap-step--final .ap-step-badge::before { background: linear-gradient(180deg, #16223a, #0b1426); }
.ap-step:nth-child(2) .ap-step-badge, .ap-step:nth-child(2) .ap-step-badge::before { transition-delay: 0.6s; }
.ap-step:nth-child(3) .ap-step-badge { transition-delay: 1.2s; }
.ap-step:nth-child(4) .ap-step-badge { transition-delay: 1.8s; }
.ap-step:nth-child(5) .ap-step-badge { transition-delay: 2.4s; }

.ap-step-card {
    flex: 1;
    width: 100%;
    margin-top: 1rem;
    padding: 1.1rem 1rem 1.2rem;
    border-radius: 16px;
    background: var(--glass-strong);
    border: 1px solid var(--line);
}
.ap-step--final .ap-step-card { border-color: rgba(255, 138, 61, 0.4); background: linear-gradient(180deg, rgba(40, 22, 12, 0.92), rgba(8, 14, 27, 0.92)); }
.ap-step-num { display: block; font-family: var(--font-mono); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.16em; color: #ffb07a; }
.ap-step h3 { margin: 0.35rem 0 0.5rem; font-family: var(--font-brand); font-size: 1.05rem; font-weight: 700; color: #fff; }
.ap-step-time { display: inline-block; padding: 0.18rem 0.5rem; border-radius: 6px; font-family: var(--font-mono); font-size: 0.68rem; color: #99f6e4; background: rgba(45, 212, 191, 0.1); border: 1px solid rgba(94, 234, 212, 0.25); }
.ap-step p { margin: 0.7rem 0 0; font-size: 0.84rem; line-height: 1.55; color: var(--muted); }

/* Ayrıcalıklar */
.ap-perks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; max-width: 1180px; margin: 3rem auto 0; }
.ap-perk { display: flex; gap: 0.9rem; padding: 1.1rem 1.15rem; border-radius: 16px; background: var(--glass-strong); border: 1px solid var(--line); }
.ap-perk .feat-ico { flex-shrink: 0; }
.ap-perk h3 { margin: 0 0 0.25rem; font-size: 0.95rem; font-weight: 700; color: #fff; }
.ap-perk p { margin: 0; font-size: 0.82rem; line-height: 1.5; color: var(--muted); }

/* ---------- Form ---------- */
.ap-apply { display: grid; grid-template-columns: minmax(0, 1fr) 330px; align-items: start; gap: 1.6rem; max-width: 1180px; margin: 0 auto; }
.ap-form { padding: 1.8rem 2rem 2rem; background: rgba(8, 14, 27, 0.95); }

.ap-stepper { margin-bottom: 1.8rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--line); }
.ap-sp-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem; margin: 0 0 1.1rem; padding: 0; list-style: none; }
.ap-sp-btn { display: flex; align-items: center; gap: 0.7rem; width: 100%; padding: 0.5rem 0.6rem; border: 1px solid transparent; border-radius: 12px; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; transition: background 0.2s var(--ease), border-color 0.2s var(--ease); }
.ap-sp-btn:disabled { cursor: default; }
.ap-sp-btn:not(:disabled):hover { background: rgba(255, 255, 255, 0.03); border-color: var(--line); }
.ap-sp-n { flex-shrink: 0; display: grid; place-items: center; width: 34px; height: 34px; clip-path: var(--px-sm); font-family: var(--font-brand); font-size: 0.95rem; font-weight: 700; color: var(--faint); background: rgba(255, 255, 255, 0.08); transition: background 0.3s var(--ease), color 0.3s var(--ease); }
.ap-sp.is-current .ap-sp-n { color: #2a1204; background: linear-gradient(180deg, #ffb87e, #ff8a3d 60%, #dd6320); }
.ap-sp.is-done .ap-sp-n { color: #6ee7b7; background: rgba(52, 211, 153, 0.18); }
.ap-sp-txt { min-width: 0; }
.ap-sp-txt b { display: block; font-size: 0.9rem; color: var(--muted); }
.ap-sp.is-current .ap-sp-txt b, .ap-sp.is-done .ap-sp-txt b { color: #fff; }
.ap-sp-txt small { display: block; overflow: hidden; font-size: 0.74rem; color: var(--faint); white-space: nowrap; text-overflow: ellipsis; }

.ap-meter { position: relative; height: 16px; padding: 3px; border-radius: 4px; background: #050a14; border: 1px solid var(--line-strong); }
.ap-meter::before { content: ''; position: absolute; inset: 3px; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.07) 0 10px, transparent 10px 13px); }
.ap-meter-fill { position: relative; display: block; height: 100%; background: repeating-linear-gradient(90deg, #ff8a3d 0 10px, transparent 10px 13px); filter: drop-shadow(0 0 5px rgba(255, 138, 61, 0.65)); transition: width 0.7s steps(10); }
.ap-meter.is-complete .ap-meter-fill { background: repeating-linear-gradient(90deg, #34d399 0 10px, transparent 10px 13px); filter: drop-shadow(0 0 5px rgba(52, 211, 153, 0.6)); }
.ap-meter-meta { display: flex; justify-content: space-between; gap: 1rem; margin-top: 0.55rem; font-size: 0.76rem; color: var(--faint); }
.ap-meter-meta b { color: #fff; }

.ap-pane { display: grid; gap: 1.35rem; min-width: 0; margin: 0; padding: 0; border: 0; }
.ap-pane.is-active { animation: ap-in 0.45s var(--ease); }
.ap-pane-title { float: left; width: 100%; padding: 0; font-family: var(--font-brand); font-size: 1.3rem; font-weight: 700; color: #fff; }
@keyframes ap-in { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }

.ap-idcard { display: grid; grid-template-columns: 156px minmax(0, 1fr); gap: 1.4rem; }
.ap-avatar {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 1.2rem 0.8rem 1.6rem;
    overflow: hidden;
    border-radius: 16px;
    background: radial-gradient(circle at 50% 38%, rgba(255, 138, 61, 0.2), transparent 62%), #060c18;
    border: 1px solid var(--line-strong);
}
.ap-avatar::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 14px; background: repeating-conic-gradient(#12203a 0 25%, #0b1528 0 50%) 0 0 / 14px 14px; border-top: 1px solid var(--line); }
.ap-avatar-img { width: 84px; height: 84px; border-radius: 6px; image-rendering: pixelated; background: #1a1a2e; box-shadow: 0 0 0 3px #0a1222, 0 0 0 5px rgba(255, 138, 61, 0.55), 0 14px 30px rgba(0, 0, 0, 0.5); transition: opacity 0.2s var(--ease), transform 0.3s var(--ease); }
.ap-avatar.is-loading .ap-avatar-img { opacity: 0.45; }
.ap-avatar.is-found .ap-avatar-img { animation: ap-pop 0.45s var(--ease); box-shadow: 0 0 0 3px #0a1222, 0 0 0 5px rgba(52, 211, 153, 0.6), 0 14px 30px rgba(0, 0, 0, 0.5); }
.ap-avatar-name { max-width: 100%; margin-top: 0.35rem; overflow: hidden; font-size: 0.9rem; font-weight: 700; color: #fff; white-space: nowrap; text-overflow: ellipsis; }
.ap-avatar-state { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); }
.ap-avatar.is-found .ap-avatar-state { color: #6ee7b7; }
.ap-avatar.is-err .ap-avatar-state { color: #fca5a5; }
@keyframes ap-pop { 0% { transform: scale(0.85); } 60% { transform: scale(1.06); } 100% { transform: none; } }
.ap-idfields { display: grid; align-content: center; gap: 1.1rem; }
.ap-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }

.ap-page .textarea.is-error, .ap-page .select.is-error { border-color: rgba(248, 113, 113, 0.7); }
.ap-page .select.is-valid, .ap-page .textarea.is-valid { border-color: rgba(52, 211, 153, 0.5); }

.ap-tslots { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.6rem; }
.ap-tslot { position: relative; display: flex; align-items: center; gap: 0.7rem; padding: 0.75rem 0.85rem; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(5, 10, 20, 0.8); cursor: pointer; transition: border-color 0.2s var(--ease), background 0.2s var(--ease); }
.ap-tslot:hover { border-color: rgba(255, 255, 255, 0.22); }
.ap-tslot input { position: absolute; opacity: 0; pointer-events: none; }
.ap-tslot-ico { flex-shrink: 0; width: 14px; height: 14px; border: 2px solid rgba(255, 255, 255, 0.28); transition: background 0.15s, border-color 0.15s; }
.ap-tslot b { display: block; font-size: 0.86rem; color: #fff; }
.ap-tslot small { display: block; font-family: var(--font-mono); font-size: 0.7rem; color: var(--faint); }
.ap-tslot:has(input:checked) { border-color: rgba(255, 138, 61, 0.65); background: rgba(255, 138, 61, 0.08); }
.ap-tslot:has(input:checked) .ap-tslot-ico { border-color: #ff8a3d; background: #ff8a3d; box-shadow: inset 0 0 0 2px #0a1222; }
.ap-tslot:has(input:focus-visible) { box-shadow: 0 0 0 3px rgba(255, 138, 61, 0.25); }

.ap-nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 0.3rem; padding-top: 1.4rem; border-top: 1px solid var(--line); }
.ap-nav-note { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.8rem; color: var(--faint); }
.ap-nav-note svg { width: 15px; height: 15px; }

.ap-choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(205px, 1fr)); gap: 0.6rem; }
.ap-choice { gap: 0.7rem; padding: 0.75rem 0.9rem; }
.ap-choice-ico { flex-shrink: 0; width: 34px; height: 34px; padding: 3px; }
.ap-choice-txt b { display: block; font-size: 0.9rem; color: #fff; }
.ap-choice-txt small { display: block; font-size: 0.74rem; color: var(--faint); }
.ap-choice.is-disabled { opacity: 0.5; cursor: not-allowed; }
.ap-choice.is-disabled .ap-pxi { filter: grayscale(1); }
.ap-choices.is-error .ap-choice:not(.is-disabled) { border-color: rgba(248, 113, 113, 0.45); }

.ap-count { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.ap-count-n { display: inline-flex; flex-shrink: 0; align-items: center; gap: 0.55rem; font-family: var(--font-mono); font-size: 0.74rem; color: var(--faint); }
.ap-count-n b { font-weight: 600; color: #fff; }
.ap-count-bar { width: 64px; height: 6px; overflow: hidden; background: rgba(255, 255, 255, 0.08); }
.ap-count-bar span { display: block; width: 0; height: 100%; background: repeating-linear-gradient(90deg, #ff8a3d 0 4px, transparent 4px 5px); transition: width 0.2s steps(8); }
.ap-count.is-ok .ap-count-bar span { background: repeating-linear-gradient(90deg, #34d399 0 4px, transparent 4px 5px); }

.ap-scenario { display: grid; gap: 0.65rem; padding: 1.1rem 1.2rem 1rem; border-radius: 14px; background: linear-gradient(180deg, rgba(255, 138, 61, 0.08), rgba(255, 138, 61, 0.02)), rgba(5, 10, 20, 0.6); border: 1px solid rgba(255, 138, 61, 0.2); }
.ap-scn-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.ap-scn-tag { padding: 0.22rem 0.5rem; border-radius: 4px; font-family: var(--font-mono); font-size: 0.64rem; font-weight: 700; letter-spacing: 0.14em; color: #2a1204; background: #ffb07a; box-shadow: inset 0 -2px 0 rgba(110, 36, 4, 0.35); }
.ap-scn-note { font-size: 0.72rem; color: var(--faint); }
.ap-scn-q { font-size: 0.98rem; font-weight: 600; line-height: 1.5; color: #fff; }
.ap-scenario .textarea { min-height: 112px; }

/* Özet */
.ap-summary { display: grid; gap: 1rem; padding: 1.2rem; border-radius: 16px; background: rgba(5, 10, 20, 0.75); border: 1px solid var(--line-strong); }
.ap-sum-id { display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem; padding-bottom: 1rem; border-bottom: 1px dashed var(--line-strong); }
.ap-sum-id .mc-head { width: 52px; height: 52px; }
.ap-sum-who { min-width: 0; }
.ap-sum-who b { display: block; overflow: hidden; font-family: var(--font-brand); font-size: 1.15rem; color: #fff; text-overflow: ellipsis; }
.ap-sum-who small { font-size: 0.8rem; color: var(--faint); }
.ap-sum-pos { padding: 0.3rem 0.65rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #ffd3b0; background: rgba(255, 138, 61, 0.14); border: 1px solid rgba(255, 138, 61, 0.35); border-radius: 6px; }
.ap-edit { margin-left: auto; padding: 0; border: 0; background: none; font: inherit; font-size: 0.8rem; font-weight: 600; color: #ffb07a; cursor: pointer; text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px; }
.ap-sum-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem; margin: 0; }
.ap-sum-grid > div { padding: 0.6rem 0.75rem; border-radius: 10px; background: rgba(255, 255, 255, 0.035); border: 1px solid var(--line); }
.ap-sum-grid dt { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); }
.ap-sum-grid dd { margin: 0.2rem 0 0; font-size: 0.88rem; font-weight: 600; color: #fff; }
.ap-sum-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.ap-sum-row .ap-mini { margin: 0; }
.ap-sum-count { font-family: var(--font-mono); font-size: 0.72rem; color: var(--faint); }
.ap-sum-block p { display: -webkit-box; margin: 0.5rem 0 0; padding-left: 0.8rem; overflow: hidden; border-left: 2px solid rgba(255, 138, 61, 0.45); font-size: 0.87rem; line-height: 1.6; color: var(--muted); -webkit-line-clamp: 3; -webkit-box-orient: vertical; }

.ap-consents { display: grid; gap: 0.75rem; }
.ap-consents.is-error .check input:not(:checked) { border-color: rgba(248, 113, 113, 0.75); }
.ap-nav--final .play-btn { margin-left: auto; }
.ap-form .play-btn.is-sending { pointer-events: none; filter: saturate(0.6); }

/* Başarılı */
.ap-done { display: grid; justify-items: center; gap: 0.45rem; padding: 1.2rem 0.5rem 0.4rem; text-align: center; outline: none; animation: ap-in 0.5s var(--ease); }
.ap-done-mark { display: grid; place-items: center; width: 100px; height: 100px; margin-bottom: 0.9rem; padding: 24px; clip-path: var(--px-lg); background: rgba(52, 211, 153, 0.14); box-shadow: inset 0 0 0 2px rgba(52, 211, 153, 0.5); animation: ap-pop 0.6s var(--ease); }
.ap-done-mark .ap-px-a { fill: #34d399; }
.ap-done-mark .ap-px-b { fill: #0f766e; }
.ap-done-title { margin: 0.4rem 0 0; font-family: var(--font-brand); font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 700; background: linear-gradient(180deg, #fff, #ffcfae); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ap-done-lead { max-width: 480px; margin: 0.3rem 0 0; font-size: 0.98rem; line-height: 1.6; color: var(--muted); }
.ap-done-lead b { color: #fff; }
.ap-done-ref { display: inline-flex; align-items: center; gap: 0.8rem; margin: 1rem 0 0.4rem; padding: 0.6rem 1rem; border-radius: 10px; background: rgba(5, 10, 20, 0.85); border: 1px dashed rgba(255, 176, 122, 0.45); font-size: 0.8rem; color: var(--faint); }
.ap-done-ref code { font-size: 1rem; letter-spacing: 0.08em; background: none; padding: 0; }
.ap-done-next { display: flex; justify-content: center; margin: 1rem 0 0.6rem; padding: 0; list-style: none; }
.ap-done-next li { position: relative; display: grid; justify-items: center; gap: 0.3rem; width: 130px; }
.ap-done-next li + li::before { content: ''; position: absolute; top: 6px; right: calc(50% + 12px); width: calc(100% - 24px); height: 2px; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.25) 0 4px, transparent 4px 8px); }
.ap-done-next span { width: 14px; height: 14px; background: rgba(255, 255, 255, 0.16); }
.ap-done-next .is-done span { background: #34d399; box-shadow: 0 0 10px rgba(52, 211, 153, 0.6); }
.ap-done-next .is-now span { background: #ff8a3d; box-shadow: 0 0 10px rgba(255, 138, 61, 0.7); animation: ap-blink 1.2s steps(2) infinite; }
.ap-done-next b { font-size: 0.82rem; color: #fff; }
.ap-done-next small { font-size: 0.72rem; color: var(--faint); }
.ap-done-hint { max-width: 500px; margin: 0.4rem 0 0; font-size: 0.85rem; line-height: 1.6; color: var(--muted); }
.ap-done-hint b { color: #fff; }
.ap-done-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.7rem; margin-top: 1.2rem; }

/* Kenar sütun */
.ap-aside { display: grid; gap: 1rem; top: 110px; }
.ap-pick { padding: 1.3rem; transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease); }
.ap-pick.is-flash { animation: ap-flash 1.1s var(--ease); }
@keyframes ap-flash { 0%, 100% { box-shadow: none; } 30% { box-shadow: 0 0 0 3px rgba(255, 138, 61, 0.45), 0 0 40px rgba(255, 138, 61, 0.25); border-color: rgba(255, 138, 61, 0.7); } }
.ap-pick-empty { display: flex; align-items: center; gap: 0.9rem; }
.ap-pick-ghost { flex-shrink: 0; width: 48px; height: 48px; clip-path: var(--px-sm); background: repeating-conic-gradient(rgba(255, 255, 255, 0.07) 0 25%, transparent 0 50%) 0 0 / 8px 8px, rgba(255, 255, 255, 0.03); }
.ap-pick-empty p { margin: 0; font-size: 0.85rem; line-height: 1.5; color: var(--muted); }
.ap-pick-empty b { color: #fff; }
.ap-pick-head { display: flex; align-items: center; gap: 0.85rem; }
.ap-pick-head .ap-role-ico { width: 50px; height: 50px; padding: 8px; }
.ap-pick-head b { display: block; font-family: var(--font-brand); font-size: 1.1rem; color: #fff; }
.ap-pick-head small { font-size: 0.76rem; color: var(--faint); }
.ap-req--compact { margin-top: 0.95rem; }
.ap-pick-check { margin-top: 0.8rem; padding: 0.55rem 0.75rem; border-radius: 10px; font-size: 0.8rem; font-weight: 600; }
.ap-pick-check:empty { display: none; }
.ap-pick-check.is-ok { color: #6ee7b7; background: rgba(16, 185, 129, 0.1); border: 1px solid rgba(52, 211, 153, 0.25); }
.ap-pick-check.is-warn { color: #fcd34d; background: rgba(245, 158, 11, 0.1); border: 1px solid rgba(251, 191, 36, 0.28); }

.ap-tips { padding: 1.3rem; }
.ap-tips ol { display: grid; gap: 0.8rem; margin: 0; padding: 0; list-style: none; counter-reset: aptip; }
.ap-tips li { position: relative; padding-left: 2.1rem; font-size: 0.85rem; line-height: 1.55; color: var(--muted); counter-increment: aptip; }
.ap-tips li::before { content: counter(aptip); position: absolute; left: 0; top: 0.05rem; display: grid; place-items: center; width: 24px; height: 24px; clip-path: var(--px-sm); font-family: var(--font-mono); font-size: 0.72rem; font-weight: 700; color: #2a1204; background: #ffb07a; }
.ap-tips b { color: #fff; }
.ap-help { display: flex; align-items: center; gap: 0.85rem; padding: 0.95rem 1.1rem; border-radius: 16px; background: var(--glass-strong); border: 1px solid rgba(94, 234, 212, 0.22); text-decoration: none; transition: border-color 0.2s var(--ease); }
.ap-help:hover { border-color: rgba(94, 234, 212, 0.5); }
.ap-help-ico { display: grid; flex-shrink: 0; place-items: center; width: 38px; height: 38px; border-radius: 10px; color: #99f6e4; background: rgba(45, 212, 191, 0.12); }
.ap-help-ico svg { width: 18px; height: 18px; }
.ap-help b { display: block; font-size: 0.88rem; color: #fff; }
.ap-help small { font-size: 0.76rem; color: var(--muted); }
.ap-help-arrow { margin-left: auto; color: #99f6e4; }

/* ---------- Duyarlı ---------- */
@media (max-width: 1000px) {
    .ap-hero-stats { grid-template-columns: repeat(3, 1fr); }
    .ap-crew { grid-column: 1 / -1; justify-content: center; border-bottom: 1px solid var(--line); }
    .ap-hero-stats > .ap-hs:nth-child(2) { border-left: 0; }
    .ap-roles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ap-role, .ap-role--wide { grid-column: auto; }
    .ap-role.is-closed { grid-column: 1 / -1; }
    .ap-perks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ap-apply { grid-template-columns: 1fr; }
    .ap-aside { grid-template-columns: 1fr 1fr; }
    .ap-help { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
    .ap-path { top: 34px; bottom: 34px; left: 32px; right: auto; width: 4px; height: auto; background: repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0 6px, transparent 6px 12px); }
    .ap-path-fill { right: 0; width: 100%; height: 0; background: repeating-linear-gradient(180deg, #ff8a3d 0 6px, transparent 6px 12px); transition: height 2.6s steps(30); }
    .ap-path-walker { top: auto; bottom: -6px; left: 50%; right: auto; transform: translateX(-50%); }
    .ap-path-wrap.is-in .ap-path-fill { width: 100%; height: 100%; }
    .ap-steps { grid-template-columns: 1fr; gap: 1rem; }
    .ap-step { flex-direction: row; align-items: flex-start; gap: 1rem; text-align: left; }
    .ap-step-badge { flex-shrink: 0; }
    .ap-step-card { margin-top: 0; }
}
@media (max-width: 640px) {
    .ap-open { font-size: 0.8rem; gap: 0.55rem; padding: 0 0.9rem; }
    .ap-open-arrow { display: none; }
    .page-actions .play-btn--lg, .ap-hero-ghost { width: 100%; }
    .ap-hero-ghost { height: 48px; }
    .ap-hero-stats { grid-template-columns: repeat(3, 1fr); margin-top: 2rem; }
    .ap-hero-stats > * { padding: 0.95rem 0.6rem; }
    .ap-crew { padding: 1rem; }
    .ap-hs b { font-size: 1.15rem; }
    .ap-hs small { font-size: 0.6rem; letter-spacing: 0.06em; }
    .ap-roles { grid-template-columns: 1fr; }
    .ap-role.is-closed { grid-column: auto; }
    .ap-role { padding: 1.2rem; }
    .ap-role-ico { width: 50px; height: 50px; padding: 9px; }
    .ap-role-name h3 { font-size: 1.1rem; }
    .ap-role-foot { flex-wrap: wrap; }
    .ap-perks { grid-template-columns: 1fr; }
    .ap-step-badge { width: 60px; height: 60px; }
    .ap-path { top: 30px; bottom: 30px; left: 28px; }
    .ap-form { padding: 1.25rem 1rem 1.3rem; }
    .ap-sp-list { gap: 0.3rem; }
    .ap-sp-btn { flex-direction: column; gap: 0.35rem; padding: 0.4rem 0.2rem; text-align: center; }
    .ap-sp-txt small { display: none; }
    .ap-sp-txt b { font-size: 0.8rem; }
    .ap-idcard { grid-template-columns: 1fr; }
    .ap-avatar { flex-direction: row; justify-content: flex-start; gap: 0.9rem; padding: 0.9rem 1rem; }
    .ap-avatar::after { display: none; }
    .ap-avatar-img { width: 60px; height: 60px; }
    .ap-avatar-name { margin: 0; }
    .ap-avatar > span { display: block; }
    .ap-grid2 { grid-template-columns: 1fr; }
    .ap-tslots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ap-choices { grid-template-columns: 1fr; }
    .ap-scenario { padding: 1rem 0.9rem 0.9rem; }
    .ap-count { flex-wrap: wrap; gap: 0.4rem 1rem; }
    .ap-sum-grid { grid-template-columns: 1fr 1fr; }
    .ap-sum-grid > div:last-child { grid-column: 1 / -1; }
    .ap-nav { flex-wrap: wrap; }
    .ap-nav-note { width: 100%; }
    .ap-nav [data-ap-next] { margin-left: auto; }
    .ap-nav--final .play-btn { width: 100%; margin-left: 0; }
    .ap-nav--final .btn-ghost-px { order: 2; }
    .ap-done-next li { width: 96px; }
    .ap-aside { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .ap-open-dot, .ap-done-next .is-now span, .ap-pane.is-active, .ap-done, .ap-done-mark, .ap-avatar.is-found .ap-avatar-img, .ap-pick.is-flash { animation: none; }
    .ap-path-fill, .ap-step-badge, .ap-meter-fill, .ap-role { transition: none; }
}

/* Gerçek mod: başvurularım / giriş kutusu (basvuru.js → gercekBasvuru) */
.ap-mine { margin-bottom: 1.25rem; }
.ap-mine .btn-gold { justify-self: start; }
.ap-mine-list { margin: 0; padding: 0; list-style: none; }
.ap-mine-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1rem; padding: 0.7rem 0; }
.ap-mine-list li + li { border-top: 1px solid var(--line); }
.ap-mine-list li > div { flex: 1; min-width: 0; }
.ap-mine-list b { display: block; color: #fff; }
.ap-mine-list small { font-size: 0.76rem; color: var(--faint); }
.ap-mine-fb { flex-basis: 100%; margin: 0; font-size: 0.84rem; color: var(--muted); overflow-wrap: anywhere; }
.ap-elig { margin: 0.5rem 0 0; flex-basis: 100%; color: #fcd34d; }

/* ===== cihaz.css ===== */
/* =========================================================
   Launcher girişi onayı: cihaz.html — önek: cz-
   Giriş kartının görünümü (auth.css .au-*) tek sütunda; kimlik doğrulama penceresi hesap.css .ac-dlg.
   ========================================================= */
.cz-card { grid-template-columns: minmax(0, 1fr); max-width: 580px; }
.cz-main { padding-top: 2.6rem; }
.cz-main .au-pane { margin-top: 0; }
.cz-main .au-title:focus { outline: none; } /* adım değişince ekran okuyucu için betikle odaklanır; çerçeve gerekmez */

.cz-ico {
    width: 60px;
    height: 60px;
    display: grid;
    place-items: center;
    margin: 0 auto 1.1rem;
    color: #2a1204;
    background: linear-gradient(180deg, #ffb87e, #ff8a3d 60%, #ea6420);
    clip-path: var(--px-sm);
}
.cz-ico svg { width: 28px; height: 26px; }
.cz-ico--ok { color: #052e1c; background: linear-gradient(180deg, #a7f3d0, #34d399 60%, #059669); }
.cz-ico--red { color: #3b0a0a; background: linear-gradient(180deg, #fecaca, #f87171 60%, #dc2626); }
.cz-ico--ok svg, .cz-ico--red svg { width: 24px; height: 22px; }

/* Kod kutusu: büyük, ortalı, tek aralıklı */
.au-field .cz-kod { height: 64px; padding: 0 1rem; text-align: center; font-size: 1.6rem; font-weight: 700; letter-spacing: 0.22em; }
.cz-kod::placeholder { color: rgba(255, 255, 255, 0.18); }
.cz-hesap b { color: #fff; }

/* Cihaz bilgisi */
.cz-device {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.9rem;
    margin-top: 1.5rem;
    padding: 1rem 1.1rem;
    border-radius: 14px;
    background: rgba(5, 10, 20, 0.85);
    border: 1px solid var(--line-strong);
}
.cz-device-ico { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 10px; color: #ffb07a; background: rgba(255, 138, 61, 0.1); border: 1px solid rgba(255, 138, 61, 0.3); }
.cz-device-ico svg { width: 22px; height: 22px; }
.cz-device-txt b { display: block; font-size: 0.98rem; color: #fff; overflow-wrap: anywhere; }
.cz-device-txt small { display: block; margin-top: 0.2rem; font-size: 0.8rem; line-height: 1.45; color: var(--muted); overflow-wrap: anywhere; }
.cz-chip { padding: 0.35rem 0.6rem; border-radius: 8px; font-family: var(--font-mono); font-size: 0.85rem; font-weight: 700; letter-spacing: 0.12em; white-space: nowrap; color: #ffd3b0; background: rgba(255, 138, 61, 0.12); border: 1px solid rgba(255, 138, 61, 0.35); }

/* Büyük uyarı */
.cz-warn {
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
    margin-top: 1rem;
    padding: 1rem 1.1rem;
    border-radius: 14px;
    font-size: 0.92rem;
    line-height: 1.55;
    color: #fecaca;
    background: rgba(58, 16, 22, 0.94);
    border: 1px solid rgba(248, 113, 113, 0.55);
}
.cz-warn svg { flex-shrink: 0; width: 22px; height: 22px; margin-top: 1px; color: #f87171; }
.cz-warn p { margin: 0; }
.cz-warn b { color: #fff; }
.cz-warn strong { padding: 0 0.3rem; border-radius: 4px; color: #fff; background: rgba(248, 113, 113, 0.32); letter-spacing: 0.04em; }

.cz-kalan { margin: 0.8rem 0 0; text-align: center; font-family: var(--font-mono); }
.cz-kalan:empty { display: none; }
.cz-kalan.is-az { color: #fcd34d; }

.cz-btns { display: grid; gap: 0.7rem; margin-top: 1.2rem; }
.cz-btns .au-submit { margin-top: 0; }
.cz-btns .au-submit:disabled { opacity: 0.55; cursor: not-allowed; filter: grayscale(0.5); }
.cz-reddet { width: 100%; height: 48px; border: 0; cursor: pointer; }
.cz-reddet:disabled { opacity: 0.55; cursor: not-allowed; }
.cz-reddet:focus-visible { outline: 2px solid #ffb07a; outline-offset: 3px; }
.cz-link { padding: 0; border: 0; background: none; font: inherit; cursor: pointer; }

@media (max-width: 640px) {
    .cz-main { padding-top: 1.8rem; }
    .au-field .cz-kod { font-size: 1.35rem; letter-spacing: 0.16em; }
    .cz-device { grid-template-columns: auto minmax(0, 1fr); padding: 0.9rem; }
    .cz-chip { grid-column: 1 / -1; justify-self: start; }
    .cz-warn { font-size: 0.88rem; padding: 0.9rem; }
}

/* ===== davet.css ===== */
/* =========================================================
   Arkadaşını getir (rf-)
   ========================================================= */
.rf-page { padding-bottom: 3rem; }
.rf-hero .page-lead b { color: #ffd3b0; }
.rf-wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }

/* Davet kartı */
.rf-card { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 2rem; align-items: center; overflow: hidden; padding: 2rem 2.2rem; border-radius: 22px; background: radial-gradient(ellipse at 0% 0%, rgba(255, 138, 61, 0.2), transparent 55%), radial-gradient(ellipse at 100% 100%, rgba(45, 212, 191, 0.14), transparent 55%), var(--glass-strong); border: 1px solid rgba(255, 138, 61, 0.35); }
.rf-card::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.018) 0 2px, transparent 2px 12px); pointer-events: none; }
.rf-card > * { position: relative; }
.rf-card-title { margin: 0 0 1rem; font-family: var(--font-brand); font-size: 1.5rem; color: #fff; }
.rf-link { display: flex; align-items: center; gap: 0.6rem; padding: 0.45rem 0.45rem 0.45rem 1.1rem; border-radius: 14px; background: #070d19; border: 1px dashed rgba(255, 176, 122, 0.45); }
.rf-link-url { flex: 1; min-width: 0; overflow: hidden; font-family: var(--font-mono); font-size: 1rem; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.rf-link-url b { color: #ffd3b0; }
.rf-copy { flex-shrink: 0; height: 44px; }
.rf-code { display: flex; align-items: center; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.9rem; font-size: 0.84rem; color: var(--muted); }
.rf-code b { font-family: var(--font-mono); font-size: 1.05rem; letter-spacing: 0.08em; color: #fff; }
.rf-mini { height: 28px; padding: 0 0.6rem; border: 1px solid var(--line); border-radius: 7px; background: rgba(255, 255, 255, 0.04); color: var(--muted); font: inherit; font-size: 0.74rem; font-weight: 600; cursor: pointer; }
.rf-mini:hover { color: #fff; border-color: var(--line-strong); }
.rf-share { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.2rem; }
.rf-sh { display: inline-flex; align-items: center; gap: 0.45rem; height: 38px; padding: 0 0.9rem; border-radius: 10px; font-size: 0.82rem; font-weight: 600; text-decoration: none; color: #fff; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line); transition: border-color 0.2s, background 0.2s; }
.rf-sh svg { width: 16px; height: 16px; }
.rf-sh--wa svg { color: #4ade80; }
.rf-sh--dc svg { color: #a5b4fc; }
.rf-sh:hover { background: rgba(255, 255, 255, 0.08); border-color: var(--line-strong); }
.rf-stats { display: grid; gap: 0.6rem; margin: 0; padding: 0; list-style: none; }
.rf-stats li { display: flex; align-items: baseline; gap: 0.7rem; padding: 0.8rem 1rem; border-radius: 14px; background: rgba(8, 14, 27, 0.85); border: 1px solid var(--line); }
.rf-stats b { font-family: var(--font-mono); font-size: 1.6rem; font-weight: 600; color: #fff; }
.rf-stats span { font-size: 0.84rem; color: var(--muted); }
.rf-stats .is-hi { border-color: rgba(94, 234, 212, 0.4); }
.rf-stats .is-hi b { color: #5eead4; }

/* İki taraf */
.rf-both { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; gap: 1rem; }
.rf-side { padding: 1.3rem 1.4rem; border-radius: 18px; background: var(--glass-strong); border: 1px solid var(--line); }
.rf-side small { font-size: 0.66rem; font-weight: 800; letter-spacing: 0.16em; color: #ffb07a; }
.rf-side--friend small { color: #5eead4; }
.rf-side b { display: block; margin: 0.4rem 0; font-size: 1.1rem; color: #fff; }
.rf-side p { margin: 0; font-size: 0.86rem; line-height: 1.55; color: var(--muted); }
.rf-plus { align-self: center; width: 44px; height: 44px; display: grid; place-items: center; font-family: var(--font-mono); font-size: 1.4rem; font-weight: 700; color: #2a1204; background: linear-gradient(180deg, #ffb87e, #ff8a3d); clip-path: var(--px-sm); }

/* Kademeler */
.rf-steps { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.8rem; margin: 0.8rem 0 0; padding: 0; list-style: none; }
.rf-steps::before, .rf-steps::after { content: ''; position: absolute; top: 20px; left: 10%; height: 4px; }
.rf-steps::before { right: 10%; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.14) 0 6px, transparent 6px 10px); }
.rf-steps::after { width: calc(var(--p) * 0.8); background: repeating-linear-gradient(90deg, #ff8a3d 0 6px, transparent 6px 10px); filter: drop-shadow(0 0 4px rgba(255, 138, 61, 0.8)); }
.rf-steps li { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 0.3rem; text-align: center; }
.rf-steps i { width: 44px; height: 44px; display: grid; place-items: center; margin-bottom: 0.3rem; font-family: var(--font-mono); font-size: 0.9rem; font-style: normal; font-weight: 700; color: var(--muted); background: #0a1222; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.14); clip-path: var(--px-sm); }
.rf-steps b { font-size: 0.86rem; color: #fff; }
.rf-steps small { font-size: 0.72rem; color: var(--faint); }
.rf-steps .is-done i { color: #2a1204; background: linear-gradient(180deg, #ffb87e, #ff8a3d); box-shadow: none; }
.rf-steps .is-done small { color: #6ee7b7; }
.rf-steps .is-next i { color: #fff; box-shadow: inset 0 0 0 2px #5eead4; }
.rf-steps .is-next small { color: #5eead4; }
.rf-steps .is-big i { box-shadow: inset 0 0 0 2px #c084fc; }

/* Alt */
.rf-lower { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.rf-list { margin: 0; padding: 0; list-style: none; }
.rf-list li { display: flex; align-items: center; gap: 0.8rem; padding: 0.7rem 0; }
.rf-list li + li { border-top: 1px solid var(--line); }
.rf-list .mc-head { border-radius: 8px; }
.rf-who { flex: 1; min-width: 0; }
.rf-who b { display: block; font-size: 0.9rem; color: #fff; }
.rf-who small { font-size: 0.76rem; color: var(--faint); }
.rf-list .is-ok small { color: #6ee7b7; }
.rf-prog { display: block; width: 140px; height: 6px; margin-top: 0.35rem; background: rgba(255, 255, 255, 0.07); clip-path: var(--px-sm); }
.rf-prog span { display: block; height: 100%; background: #ff8a3d; }
.rf-rw { font-family: var(--font-mono); font-size: 0.86rem; font-weight: 600; color: #ffd3b0; }
.rf-rw.is-wait { font-family: inherit; font-size: 0.74rem; font-weight: 500; color: var(--faint); }
.rf-rules ul { display: grid; gap: 0.6rem; margin: 0 0 1.2rem; padding: 0; list-style: none; }
.rf-rules li { position: relative; padding-left: 1.2rem; font-size: 0.86rem; line-height: 1.55; color: var(--muted); }
.rf-rules li::before { content: ''; position: absolute; left: 0.1rem; top: 0.6em; width: 6px; height: 6px; background: #ff8a3d; }
.rf-rules b { color: #fff; }
.rf-rules a { color: #ffb07a; }
.rf-rules .btn-ghost-px { height: 40px; }

@media (max-width: 1000px) {
    .rf-card { grid-template-columns: minmax(0, 1fr); }
    .rf-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .rf-stats li { flex-direction: column; gap: 0.1rem; }
    .rf-lower { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
    .rf-card { padding: 1.3rem; }
    .rf-link { flex-direction: column; align-items: stretch; padding: 0.8rem; }
    .rf-link-url { font-size: 0.9rem; text-align: center; }
    .rf-stats b { font-size: 1.25rem; }
    .rf-stats span { font-size: 0.72rem; }
    .rf-both { grid-template-columns: minmax(0, 1fr); }
    .rf-plus { justify-self: center; }
    .rf-steps { grid-template-columns: minmax(0, 1fr); gap: 0.5rem; }
    .rf-steps::before, .rf-steps::after { display: none; }
    .rf-steps li { flex-direction: row; gap: 0.8rem; padding: 0.45rem 0.6rem; text-align: left; border-radius: 10px; background: rgba(255, 255, 255, 0.025); border: 1px solid var(--line); }
    .rf-steps i { width: 36px; height: 36px; margin: 0; flex-shrink: 0; }
    .rf-steps small { margin-left: auto; }
}

/* ===== destek.css ===== */
/* =========================================================
   Destek Talebi (destek.html) — önek: tk-
   ========================================================= */
.tk-page { padding-bottom: 2rem; }
.tk-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tk-page code { padding: 0.08rem 0.38rem; border-radius: 5px; font-family: var(--font-mono); font-size: 0.86em; color: #ffd3b0; background: rgba(255, 255, 255, 0.07); }
.tk-page [hidden] { display: none !important; }
.tk-page .is-hidden { display: none !important; }

/* ---------- Hero ---------- */
.tk-hero { padding-bottom: 2.2rem; }
.tk-stats { display: flex; justify-content: center; flex-wrap: wrap; gap: 0.7rem; margin: 1.9rem 0 0; padding: 0; list-style: none; }
.tk-stat {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.55rem 1.05rem 0.55rem 0.55rem;
    text-align: left;
    border-radius: 12px;
    background: rgba(8, 14, 27, 0.92);
    border: 1px solid var(--line);
}
.tk-stat b { display: block; font-family: var(--font-mono); font-size: 0.95rem; font-weight: 600; color: #fff; }
.tk-stat small { display: block; font-size: 0.72rem; color: var(--faint); }
.tk-stat-ico { width: 36px; height: 36px; display: grid; place-items: center; flex-shrink: 0; clip-path: var(--px-sm); color: #ffb07a; background: rgba(255, 138, 61, 0.13); }
.tk-stat-ico svg { width: 18px; height: 18px; }
.tk-stat-ico--live { background: rgba(52, 211, 153, 0.12); }

/* ---------- Sekme çubuğu ---------- */
.tk-shell { padding-bottom: 3rem; }
.tk-bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.4rem; }
.tk-tabs .tab { height: 42px; padding: 0 1.35rem; font-size: 0.9rem; }
.tk-tab-count { display: inline-grid; place-items: center; min-width: 22px; height: 20px; margin-left: 0.4rem; padding: 0 0.3rem; border-radius: 6px; font-family: var(--font-mono); font-size: 0.72rem; background: rgba(255, 255, 255, 0.1); }
.tab.is-active .tk-tab-count { background: rgba(42, 18, 4, 0.18); }
.tk-me { display: flex; align-items: center; gap: 0.7rem; padding: 0.4rem 0.95rem 0.4rem 0.4rem; border-radius: 12px; background: rgba(8, 14, 27, 0.92); border: 1px solid var(--line); }
.tk-me .mc-head { width: 34px; height: 34px; border-radius: 8px; }
.tk-me small { display: block; font-size: 0.68rem; color: var(--faint); }
.tk-me b { display: block; font-size: 0.88rem; color: #fff; }

/* ---------- Yeni talep ---------- */
.tk-new { display: grid; grid-template-columns: minmax(0, 1fr) 340px; align-items: start; gap: 1.6rem; }
.tk-form { overflow: hidden; border-radius: 22px; background: rgba(8, 14, 27, 0.94); border: 1px solid var(--line); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35); }
/* Formun üstündeki güvenlik uyarısı: şifre / kod / kart bilgisi yazılmasın */
.tk-uyari { display: flex; align-items: flex-start; gap: 0.7rem; margin: 18px 22px 0; padding: 0.75rem 0.95rem; border-radius: 14px; background: linear-gradient(135deg, rgba(255, 122, 26, 0.13), rgba(255, 122, 26, 0.04)); border: 1px solid rgba(255, 122, 26, 0.38); }
.tk-uyari svg { flex: 0 0 auto; width: 20px; height: 20px; margin-top: 1px; color: #ff9a4d; }
.tk-uyari p { margin: 0; font-size: 0.86rem; line-height: 1.5; color: #e7ecf7; }
.tk-uyari b { color: #fff; font-weight: 700; }
@media (max-width: 600px) { .tk-uyari { margin: 14px 14px 0; } }
.tk-step { min-width: 0; margin: 0; padding: 1.8rem 2rem; border: 0; border-bottom: 1px solid var(--line); }
.tk-step-head { float: left; width: 100%; display: flex; align-items: center; gap: 1rem; margin: 0 0 1.35rem; padding: 0; }
.tk-step-head + * { clear: both; }
.tk-step-n {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    clip-path: var(--px-sm);
    font-family: var(--font-mono);
    font-size: 0.9rem;
    font-weight: 600;
    color: #2a1204;
    background: linear-gradient(180deg, #ffb87e, #ff8a3d 55%, #ea6420);
    box-shadow: inset 0 -3px 0 rgba(110, 36, 4, 0.45);
}
.tk-step-head b { display: block; font-family: var(--font-brand); font-size: 1.12rem; font-weight: 700; letter-spacing: 0.02em; color: #fff; }
.tk-step-head small { display: block; margin-top: 0.2rem; font-size: 0.84rem; line-height: 1.45; color: var(--muted); }

.tk-cats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; }
.tk-catc { flex-direction: column; align-items: flex-start; gap: 0.12rem; min-height: 124px; padding: 1.05rem 1rem 1rem; }
.tk-catc .choice-dot { position: absolute; top: 0.95rem; right: 0.95rem; }
.tk-catc-ico { width: 42px; height: 42px; display: grid; place-items: center; margin-bottom: 0.6rem; clip-path: var(--px-sm); color: #ffb07a; background: rgba(255, 176, 122, 0.12); transition: background 0.2s var(--ease), color 0.2s var(--ease); }
.tk-catc-ico svg { width: 24px; height: 24px; }
.tk-catc b { font-size: 0.95rem; font-weight: 600; color: #fff; }
.tk-catc small { font-size: 0.76rem; color: var(--faint); }
.tk-catc:has(input:checked) .tk-catc-ico { color: #fff1e6; background: linear-gradient(180deg, #ff9a52, #dd6320); box-shadow: inset 0 -3px 0 rgba(110, 36, 4, 0.45); }
.tk-catc:has(input:focus-visible), .tk-seg-opt:has(input:focus-visible) { outline: 2px solid #5eead4; outline-offset: 2px; }

.tk-extra {
    margin-top: 1.2rem;
    padding: 1.2rem 1.25rem 1.3rem;
    border-radius: 16px;
    background: linear-gradient(rgba(255, 138, 61, 0.05), rgba(255, 138, 61, 0.05)), #0b1324;
    border: 1px dashed rgba(255, 176, 122, 0.32);
    animation: tk-in 0.4s var(--ease);
}
.tk-extra-k { display: flex; align-items: center; gap: 0.55rem; margin: 0 0 0.95rem; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: #ffb07a; }
.tk-extra-k::before { content: ''; width: 6px; height: 6px; background: #ff8a3d; box-shadow: 0 0 6px rgba(255, 138, 61, 0.7); }
.tk-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.1rem; }
.tk-extra .hint { margin: 0.8rem 0 0; line-height: 1.5; }
.tk-extra .hint b { color: var(--muted); }
.tk-warn { margin: 0.9rem 0 0; font-size: 0.82rem; color: #fca5a5; }
.tk-warn b { color: #fecaca; }
.tk-info { margin: 0; padding-left: 0.9rem; font-size: 0.86rem; line-height: 1.65; color: var(--muted); border-left: 3px solid #5eead4; }
.tk-extra .tk-grid2 + .tk-info { margin-top: 1rem; }
.tk-info b { color: #fff; }
.tk-check-sm { margin-top: 0.95rem; font-size: 0.86rem; }
.tk-player { position: relative; }
.tk-player .mc-head { position: absolute; left: 0.6rem; top: 50%; width: 30px; height: 30px; border-radius: 6px; transform: translateY(-50%); }
.tk-player .input { padding-left: 3.1rem; }
.tk-mono { font-family: var(--font-mono); }
.tk-order { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.9rem; margin-top: 1rem; padding: 0.85rem 1rem; border-radius: 12px; background: #0a1222; border: 1px solid var(--line); animation: tk-in 0.35s var(--ease); }
.tk-order-ico { width: 38px; height: 38px; display: grid; place-items: center; clip-path: var(--px-sm); color: #ffb07a; background: rgba(255, 138, 61, 0.13); }
.tk-order-ico svg { width: 20px; height: 20px; }
.tk-order-main { min-width: 0; }
.tk-order-main b { display: block; font-size: 0.92rem; color: #fff; }
.tk-order-main small { display: block; margin-top: 0.15rem; font-size: 0.76rem; color: var(--faint); }
.tk-order-side { display: flex; flex-direction: column; align-items: flex-end; gap: 0.3rem; }
.tk-order-side b { font-family: var(--font-mono); font-size: 0.95rem; color: #ffd3b0; }

.tk-count-wrap { position: relative; }
.tk-count-wrap .input { padding-right: 4.4rem; }
.tk-count { position: absolute; right: 0.95rem; top: 50%; transform: translateY(-50%); font-family: var(--font-mono); font-size: 0.72rem; color: var(--faint); pointer-events: none; }
.tk-count--static { position: static; transform: none; white-space: nowrap; }
.tk-count.is-near { color: #fcd34d; }
.tk-prio-field { margin-top: 1.35rem; }
.tk-seg { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.3rem; padding: 0.3rem; border-radius: 12px; background: rgba(5, 10, 20, 0.85); border: 1px solid rgba(255, 255, 255, 0.12); }
.tk-seg-opt {
    --b1: rgba(255, 255, 255, 0.16); --b2: rgba(255, 255, 255, 0.16); --b3: rgba(255, 255, 255, 0.16); --b4: rgba(255, 255, 255, 0.16);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    height: 44px;
    border-radius: 9px;
    font-size: 0.87rem;
    font-weight: 600;
    color: var(--muted);
    cursor: pointer;
    transition: background 0.2s var(--ease), color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.tk-seg-opt input { position: absolute; opacity: 0; pointer-events: none; }
.tk-seg-opt:hover { color: #fff; }
.tk-seg-opt i {
    width: 15px;
    height: 13px;
    color: var(--c);
    background:
        linear-gradient(var(--b1), var(--b1)) 0 100% / 3px 4px no-repeat,
        linear-gradient(var(--b2), var(--b2)) 4px 100% / 3px 7px no-repeat,
        linear-gradient(var(--b3), var(--b3)) 8px 100% / 3px 10px no-repeat,
        linear-gradient(var(--b4), var(--b4)) 12px 100% / 3px 13px no-repeat;
}
.tk-seg-opt[data-lvl="1"] { --c: #5eead4; --b1: var(--c); }
.tk-seg-opt[data-lvl="2"] { --c: #ffb07a; --b1: var(--c); --b2: var(--c); }
.tk-seg-opt[data-lvl="3"] { --c: #ff8a3d; --b1: var(--c); --b2: var(--c); --b3: var(--c); }
.tk-seg-opt[data-lvl="4"] { --c: #f87171; --b1: var(--c); --b2: var(--c); --b3: var(--c); --b4: var(--c); }
.tk-seg-opt:has(input:checked) { color: #fff; background: rgba(255, 138, 61, 0.14); box-shadow: inset 0 0 0 1px rgba(255, 138, 61, 0.55); }
.tk-seg-opt[data-lvl="4"]:has(input:checked) { background: rgba(248, 113, 113, 0.14); box-shadow: inset 0 0 0 1px rgba(248, 113, 113, 0.55); }

.tk-msg { min-height: 180px; }
.tk-msg-meta { display: flex; align-items: center; gap: 0.8rem; }
.tk-msg-meta .hint { flex: 1; }
.tk-minbar { flex-shrink: 0; width: 96px; height: 8px; overflow: hidden; border-radius: 2px; background: rgba(255, 255, 255, 0.08); }
.tk-minbar span { display: block; width: 0; height: 100%; background: repeating-linear-gradient(90deg, #ff8a3d 0 6px, #ffa564 6px 8px); transition: width 0.25s var(--ease); }
.tk-minbar.is-ok span { background: repeating-linear-gradient(90deg, #34d399 0 6px, #6ee7b7 6px 8px); }
.tk-page .input.is-error, .tk-page .textarea.is-error { border-color: rgba(248, 113, 113, 0.75); box-shadow: 0 0 0 4px rgba(248, 113, 113, 0.12); }

.tk-drop {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.45rem;
    padding: 1.9rem 1rem 1.7rem;
    text-align: center;
    border-radius: 16px;
    border: 2px dashed rgba(255, 176, 122, 0.32);
    background: repeating-conic-gradient(rgba(255, 255, 255, 0.015) 0 25%, transparent 0 50%) 0 0 / 8px 8px, #0a1222;
    cursor: pointer;
    transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.tk-drop:hover, .tk-drop.is-over { border-color: #ff8a3d; background-color: #1a1412; }
.tk-drop.is-over { transform: scale(1.01); }
.tk-drop input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.tk-drop:has(input:focus-visible) { outline: 2px solid #5eead4; outline-offset: 3px; }
.tk-drop-ico { width: 46px; height: 46px; color: #ffb07a; transition: transform 0.25s var(--ease); }
.tk-drop-ico svg { width: 100%; height: 100%; }
.tk-drop:hover .tk-drop-ico, .tk-drop.is-over .tk-drop-ico { transform: translateY(-4px); }
.tk-drop-txt { font-size: 0.93rem; color: var(--muted); }
.tk-drop-txt b { color: #fff; }
.tk-drop-txt u { color: #ffb07a; text-underline-offset: 3px; }
.tk-drop small { font-size: 0.76rem; color: var(--faint); }
.tk-files { display: grid; gap: 0.5rem; margin: 0.8rem 0 0; padding: 0; list-style: none; }
.tk-files:empty { display: none; }
.tk-file { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 0.85rem; padding: 0.6rem 0.7rem 0.6rem 0.6rem; border-radius: 12px; background: #0a1222; border: 1px solid var(--line); animation: tk-in 0.3s var(--ease); }
.tk-file-ext { width: 40px; height: 40px; display: grid; place-items: center; clip-path: var(--px-sm); font-family: var(--font-mono); font-size: 0.62rem; font-weight: 700; color: #99f6e4; background: rgba(94, 234, 212, 0.12); }
.tk-file-main { min-width: 0; }
.tk-file-main b { display: block; overflow: hidden; font-size: 0.86rem; font-weight: 600; color: #fff; white-space: nowrap; text-overflow: ellipsis; }
.tk-file-bar { display: block; height: 4px; margin-top: 0.45rem; overflow: hidden; border-radius: 2px; background: rgba(255, 255, 255, 0.08); }
.tk-file-bar span { display: block; width: 0; height: 100%; background: repeating-linear-gradient(90deg, #ff8a3d 0 6px, #ffa564 6px 8px); transition: width 0.2s linear; }
.tk-file.is-done .tk-file-bar span { width: 100%; background: #34d399; }
.tk-file-size { font-family: var(--font-mono); font-size: 0.74rem; color: var(--faint); white-space: nowrap; }
.tk-file-x { width: 30px; height: 30px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 8px; color: var(--faint); background: transparent; cursor: pointer; }
.tk-file-x:hover { color: #fca5a5; background: rgba(248, 113, 113, 0.1); }
.tk-file-x svg { width: 14px; height: 14px; }
.tk-files-max { margin: 0.5rem 0 0; font-size: 0.78rem; color: #fcd34d; }

.tk-submit { padding: 1.6rem 2rem 2rem; background: radial-gradient(ellipse 70% 120% at 20% 120%, rgba(255, 138, 61, 0.12), transparent 70%); }
.tk-consent-err { margin: 0.5rem 0 0 1.9rem; }
.tk-submit-row { display: flex; align-items: center; gap: 1.6rem; margin-top: 1.4rem; }
.tk-submit-note { max-width: 380px; margin: 0; font-size: 0.84rem; line-height: 1.55; color: var(--muted); }
.tk-submit-note b { color: #fff; }
.tk-send.is-loading { pointer-events: none; filter: saturate(0.7) brightness(0.92); }
.tk-shake { animation: tk-shake 0.4s var(--ease); }

/* Yan sütun */
.tk-aside { display: grid; gap: 1rem; }
.tk-card { padding: 1.25rem 1.3rem 1.3rem; border-radius: 18px; background: rgba(8, 14, 27, 0.94); border: 1px solid var(--line); }
.tk-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.tk-card h3 { margin: 0; font-family: var(--font-brand); font-size: 1rem; font-weight: 700; letter-spacing: 0.02em; color: #fff; }
.tk-card-head small { font-size: 0.72rem; color: var(--faint); }
.tk-pct { font-family: var(--font-mono); font-size: 0.95rem; color: #ffb07a; }
.tk-progress { margin: 0.85rem 0 1rem; }
.tk-progress > span { transition: width 0.35s var(--ease); }
.tk-check-card.is-ready .tk-progress > span { background: repeating-linear-gradient(90deg, #34d399 0 8px, #6ee7b7 8px 10px); box-shadow: 0 0 12px rgba(52, 211, 153, 0.5); }
.tk-check-card.is-ready .tk-pct { color: #6ee7b7; }
.tk-todo { display: grid; gap: 0.55rem; margin: 0; padding: 0; list-style: none; }
.tk-todo li { display: flex; align-items: center; gap: 0.65rem; font-size: 0.86rem; color: var(--muted); transition: color 0.2s var(--ease); }
.tk-todo i { flex-shrink: 0; width: 16px; height: 16px; border: 2px solid rgba(255, 255, 255, 0.22); transition: background 0.2s var(--ease), border-color 0.2s var(--ease); }
.tk-todo li.is-done { color: #fff; }
.tk-todo li.is-done i { border-color: #34d399; background: #34d399; box-shadow: inset 0 0 0 3px #0a1222; }
.tk-todo small { color: var(--faint); }
.tk-card-lead { margin: 0.5rem 0 0.7rem; font-size: 0.84rem; line-height: 1.55; color: var(--muted); }
.tk-suggest { margin: 0; padding: 0; list-style: none; }
.tk-suggest a { display: flex; align-items: baseline; gap: 0.6rem; padding: 0.55rem 0; border-bottom: 1px dashed rgba(255, 255, 255, 0.08); font-size: 0.87rem; color: var(--text); text-decoration: none; transition: color 0.2s var(--ease); }
.tk-suggest li:last-child a { border-bottom: 0; }
.tk-suggest a::before { content: ''; flex-shrink: 0; width: 6px; height: 6px; transform: translateY(-2px); background: #ff8a3d; }
.tk-suggest a:hover { color: #ffd3b0; }
.tk-sla { display: grid; gap: 0.5rem; margin: 0.9rem 0 0; padding: 0; list-style: none; }
.tk-sla li { display: grid; grid-template-columns: 62px minmax(0, 1fr) 48px; align-items: center; gap: 0.7rem; font-size: 0.8rem; }
.tk-sla li > span:first-child { color: var(--muted); transition: color 0.2s var(--ease); }
.tk-sla-bar { height: 8px; overflow: hidden; border-radius: 2px; background: rgba(255, 255, 255, 0.07); }
.tk-sla-bar span { display: block; height: 100%; background: repeating-linear-gradient(90deg, rgba(94, 234, 212, 0.75) 0 6px, rgba(153, 246, 228, 0.75) 6px 8px); }
.tk-sla b { font-family: var(--font-mono); font-size: 0.76rem; font-weight: 600; text-align: right; color: #fff; }
.tk-sla li.is-current > span:first-child { color: #ffd3b0; font-weight: 600; }
.tk-sla li.is-current .tk-sla-bar span { background: repeating-linear-gradient(90deg, #ff8a3d 0 6px, #ffa564 6px 8px); box-shadow: 0 0 10px rgba(255, 138, 61, 0.5); }
.tk-safe { display: flex; align-items: flex-start; gap: 0.7rem; margin: 0; padding: 0.9rem 1rem; border-radius: 14px; font-size: 0.82rem; line-height: 1.55; color: var(--muted); background: linear-gradient(rgba(248, 113, 113, 0.07), rgba(248, 113, 113, 0.07)), #0a1222; border: 1px solid rgba(248, 113, 113, 0.25); }
.tk-safe svg { flex-shrink: 0; width: 18px; height: 18px; margin-top: 0.1rem; color: #f87171; }
.tk-safe b { color: #fecaca; }

/* ---------- Taleplerim ---------- */
.tk-inbox { display: grid; grid-template-columns: 370px minmax(0, 1fr); align-items: stretch; gap: 1.2rem; }
.tk-list-col { display: flex; flex-direction: column; padding: 0.8rem; border-radius: 20px; background: rgba(8, 14, 27, 0.94); border: 1px solid var(--line); }
.tk-list-tools { padding: 0.2rem 0.2rem 0.8rem; }
.tk-filters { display: flex; gap: 0.3rem; }
.tk-filter { flex: 1; height: 36px; border-radius: 9px; border: 1px solid var(--line); background: transparent; color: var(--muted); font: inherit; font-size: 0.8rem; font-weight: 600; cursor: pointer; transition: color 0.2s var(--ease), border-color 0.2s var(--ease), background 0.2s var(--ease); }
.tk-filter b { margin-left: 0.25rem; font-family: var(--font-mono); font-size: 0.72rem; opacity: 0.75; }
.tk-filter:hover { color: #fff; }
.tk-filter.is-active { color: #ffd3b0; background: rgba(255, 138, 61, 0.13); border-color: rgba(255, 138, 61, 0.5); }
.tk-tickets { display: grid; gap: 0.4rem; margin: 0; padding: 0; list-style: none; }
.tk-tk {
    position: relative;
    display: grid;
    gap: 0.45rem;
    width: 100%;
    padding: 0.9rem 1rem;
    text-align: left;
    border-radius: 14px;
    border: 1px solid transparent;
    background: rgba(255, 255, 255, 0.025);
    color: inherit;
    font: inherit;
    cursor: pointer;
    transition: background 0.2s var(--ease), border-color 0.2s var(--ease);
}
.tk-tk:hover { background: rgba(255, 255, 255, 0.05); }
.tk-tk.is-active { background: rgba(255, 138, 61, 0.08); border-color: rgba(255, 138, 61, 0.42); }
.tk-tk.is-active::before { content: ''; position: absolute; left: -1px; top: 22%; bottom: 22%; width: 3px; background: #ff8a3d; box-shadow: 0 0 10px rgba(255, 138, 61, 0.8); }
.tk-tk:focus-visible { outline: 2px solid #5eead4; outline-offset: 2px; }
.tk-tk-top { display: flex; align-items: center; gap: 0.55rem; }
.tk-tk-top .badge { height: 22px; font-size: 0.62rem; }
.tk-tk-id { font-family: var(--font-mono); font-size: 0.72rem; color: var(--faint); }
.tk-tk-top time { margin-left: auto; font-size: 0.72rem; color: var(--faint); white-space: nowrap; }
.tk-tk-subj { font-size: 0.93rem; font-weight: 600; line-height: 1.35; color: #fff; }
.tk-tk-foot { display: flex; align-items: center; gap: 0.6rem; font-size: 0.75rem; }
.tk-tk-cat { color: #99f6e4; font-weight: 600; white-space: nowrap; }
.tk-tk-who { display: inline-flex; align-items: center; gap: 0.35rem; margin-left: auto; color: var(--muted); white-space: nowrap; }
.tk-tk-who .mc-head { width: 18px; height: 18px; border-radius: 4px; }
.tk-tk-who--queue { color: #ffb07a; }
.tk-tk-who--rate { color: #fcd34d; }
.tk-tk-rated { color: #ff8a3d; letter-spacing: 0.12em; }
.tk-unread { width: 8px; height: 8px; flex-shrink: 0; background: #ff8a3d; box-shadow: 0 0 8px rgba(255, 138, 61, 0.9); }
.tk-tk:not(.is-unread) .tk-unread { display: none; }
.tk-tk[data-state="closed"] .tk-tk-subj { color: var(--text); }
.tk-list-note { margin: auto 0 0; padding: 0.9rem 0.4rem 0.2rem; font-size: 0.74rem; text-align: center; color: var(--faint); }

.tk-conv { display: flex; flex-direction: column; min-width: 0; min-height: 640px; overflow: hidden; border-radius: 20px; background: rgba(8, 14, 27, 0.95); border: 1px solid var(--line); }
.tk-conv-head { padding: 1.25rem 1.5rem 1.2rem; border-bottom: 1px solid var(--line); background: linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent); }
.tk-conv-top { display: flex; align-items: center; flex-wrap: wrap; gap: 0.6rem; }
.tk-conv-top .tk-tk-id { font-size: 0.78rem; }
.tk-back { display: none; align-items: center; gap: 0.35rem; height: 32px; padding: 0 0.7rem 0 0.5rem; border-radius: 8px; border: 1px solid var(--line); background: transparent; color: var(--muted); font: inherit; font-size: 0.8rem; font-weight: 600; cursor: pointer; }
.tk-back svg { width: 14px; height: 14px; }
.tk-conv-head h2 { margin: 0.55rem 0 1rem; font-family: var(--font-brand); font-size: 1.35rem; font-weight: 700; letter-spacing: 0.01em; line-height: 1.25; color: #fff; }
.tk-meta { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.8rem; margin: 0; }
.tk-meta div { min-width: 0; }
.tk-meta dt { font-size: 0.64rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); }
.tk-meta dd { display: flex; align-items: center; gap: 0.4rem; margin: 0.3rem 0 0; font-size: 0.85rem; color: #fff; white-space: nowrap; }
.tk-meta dd .mc-head { width: 20px; height: 20px; border-radius: 5px; }
.tk-meta dd .role { font-size: 0.55rem; }
.tk-meta .tk-muted { color: var(--muted); }

.tk-thread {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-height: 600px;
    padding: 1.4rem 1.5rem;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 176, 122, 0.3) transparent;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 28px);
    mask-image: linear-gradient(180deg, transparent 0, #000 28px);
}
.tk-day { display: flex; align-items: center; gap: 0.8rem; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); }
.tk-day::before, .tk-day::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.tk-ev { align-self: center; display: inline-flex; align-items: center; gap: 0.55rem; max-width: 92%; padding: 0.38rem 0.85rem; border-radius: 8px; text-align: left; line-height: 1.45; font-size: 0.78rem; color: var(--muted); background: rgba(255, 255, 255, 0.035); border: 1px dashed rgba(255, 255, 255, 0.12); }
.tk-ev i { flex-shrink: 0; width: 7px; height: 7px; background: #5eead4; box-shadow: 0 0 6px rgba(94, 234, 212, 0.8); }
.tk-ev.is-status i { background: #ff8a3d; box-shadow: 0 0 6px rgba(255, 138, 61, 0.8); }
.tk-ev.is-done i { background: #34d399; }
.tk-ev b { color: #fff; font-weight: 600; }
.tk-ev span { min-width: 0; }
.tk-ev time { flex-shrink: 0; font-family: var(--font-mono); font-size: 0.7rem; color: var(--faint); white-space: nowrap; }
.tk-row { display: flex; align-items: flex-start; gap: 0.75rem; max-width: 84%; animation: tk-in 0.35s var(--ease); }
.tk-row .mc-head { width: 36px; height: 36px; }
.tk-row.is-me { align-self: flex-end; flex-direction: row-reverse; }
.tk-bub { min-width: 0; padding: 0.8rem 1rem 0.9rem; border-radius: 14px; border-top-left-radius: 4px; background: #101a2e; border: 1px solid rgba(94, 234, 212, 0.18); }
.tk-row.is-me .tk-bub { border-radius: 14px; border-top-right-radius: 4px; background: linear-gradient(180deg, rgba(255, 138, 61, 0.16), rgba(255, 138, 61, 0.08)), #140f12; border-color: rgba(255, 138, 61, 0.35); }
.tk-bub-head { display: flex; align-items: center; flex-wrap: wrap; gap: 0.45rem; margin-bottom: 0.35rem; }
.tk-bub-head b { font-size: 0.82rem; color: #fff; }
.tk-bub-head time { margin-left: auto; padding-left: 0.6rem; font-family: var(--font-mono); font-size: 0.7rem; color: var(--faint); }
.tk-bub p { margin: 0; font-size: 0.9rem; line-height: 1.62; color: var(--text); overflow-wrap: anywhere; }
.tk-bub p + p { margin-top: 0.55rem; }
.tk-atts { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.65rem; }
.tk-att { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.3rem 0.6rem 0.3rem 0.35rem; border-radius: 8px; font-size: 0.76rem; color: var(--text); background: rgba(5, 10, 20, 0.7); border: 1px solid var(--line); }
.tk-att em { padding: 0.12rem 0.3rem; border-radius: 4px; font-family: var(--font-mono); font-size: 0.58rem; font-style: normal; font-weight: 700; color: #99f6e4; background: rgba(94, 234, 212, 0.12); }
.tk-att small { font-family: var(--font-mono); color: var(--faint); }

.tk-reply { padding: 1rem 1.25rem 1.2rem; border-top: 1px solid var(--line); background: rgba(5, 10, 20, 0.5); }
.tk-reply .textarea { min-height: 88px; }
.tk-reply-row { display: flex; align-items: center; gap: 0.7rem; margin-top: 0.7rem; }
.tk-reply-row .hint { flex: 1; }
.tk-icon-btn { width: 40px; height: 40px; display: grid; place-items: center; flex-shrink: 0; padding: 0; border-radius: 10px; border: 1px solid var(--line-strong); background: rgba(255, 255, 255, 0.03); color: var(--muted); cursor: pointer; }
.tk-icon-btn:hover { color: #fff; border-color: rgba(255, 176, 122, 0.4); }
.tk-icon-btn svg { width: 18px; height: 18px; }
.tk-reply .btn-gold { border: 0; cursor: pointer; }

.tk-closed { padding: 1.5rem 1.5rem 1.6rem; text-align: center; border-top: 1px solid var(--line); background: radial-gradient(ellipse 60% 120% at 50% 130%, rgba(255, 138, 61, 0.14), transparent 70%), rgba(5, 10, 20, 0.55); }
.tk-closed-k { margin: 0; font-size: 0.8rem; color: var(--faint); }
.tk-closed h3 { margin: 0.4rem 0 0.9rem; font-family: var(--font-brand); font-size: 1.1rem; color: #fff; }
.tk-stars { display: inline-flex; gap: 0.35rem; }
.tk-star { width: 42px; height: 42px; display: grid; place-items: center; padding: 0; border: 0; clip-path: var(--px-sm); color: rgba(255, 255, 255, 0.16); background: rgba(255, 255, 255, 0.04); cursor: pointer; transition: color 0.15s var(--ease), background 0.15s var(--ease), transform 0.15s var(--ease); }
.tk-star svg { width: 24px; height: 24px; }
.tk-star.is-on { color: #ff8a3d; background: rgba(255, 138, 61, 0.14); }
.tk-star.is-on svg { filter: drop-shadow(0 0 6px rgba(255, 138, 61, 0.7)); }
.tk-star:hover { transform: translateY(-2px); }
.tk-star:focus-visible { outline: 2px solid #5eead4; outline-offset: 2px; }
.tk-stars.is-locked .tk-star { cursor: default; transform: none; }
.tk-rate-label { min-height: 1.3em; margin: 0.6rem 0 0; font-size: 0.86rem; font-weight: 600; color: #ffd3b0; }
.tk-rate-form { max-width: 480px; margin: 0.9rem auto 0; text-align: left; }
.tk-rate-form .textarea { min-height: 72px; }
.tk-rate-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 0.7rem; }
.tk-rate-row a, .tk-reopen { font-size: 0.82rem; font-weight: 600; color: #ffb07a; text-decoration: none; }
.tk-rate-row .btn-gold { border: 0; cursor: pointer; }
.tk-rated-note { max-width: 460px; margin: 0.8rem auto 0; font-size: 0.86rem; font-style: italic; line-height: 1.55; color: var(--muted); }
.tk-reopen { display: inline-block; margin-top: 0.9rem; }

/* ---------- Bildirim ---------- */
.tk-toast {
    position: fixed;
    right: 1.5rem;
    bottom: 1.5rem;
    z-index: 80;
    display: flex;
    align-items: center;
    gap: 0.9rem;
    max-width: calc(100vw - 2rem);
    padding: 0.85rem 0.8rem 0.85rem 0.85rem;
    border-radius: 14px;
    background: #0c1526;
    border: 1px solid rgba(52, 211, 153, 0.42);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(52, 211, 153, 0.08);
    animation: tk-toast 0.45s var(--ease);
}
.tk-toast.is-leaving { opacity: 0; transform: translateY(12px); transition: opacity 0.3s var(--ease), transform 0.3s var(--ease); }
.tk-toast-ico { width: 38px; height: 38px; display: grid; place-items: center; flex-shrink: 0; clip-path: var(--px-sm); color: #052e1f; background: #34d399; }
.tk-toast-ico svg { width: 16px; height: 16px; }
.tk-toast-txt b { display: block; font-size: 0.92rem; color: #fff; }
.tk-toast-txt small { display: block; margin-top: 0.1rem; font-family: var(--font-mono); font-size: 0.74rem; color: var(--muted); }
.tk-toast-btn { height: 34px; padding: 0 0.85rem; border: 0; border-radius: 8px; font: inherit; font-size: 0.8rem; font-weight: 700; color: #2a1204; background: #ffb07a; cursor: pointer; }
.tk-toast-x { width: 30px; height: 30px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 8px; color: var(--faint); background: transparent; cursor: pointer; }
.tk-toast-x svg { width: 14px; height: 14px; }

@keyframes tk-in { from { opacity: 0; transform: translateY(8px); } }
@keyframes tk-toast { from { opacity: 0; transform: translateY(20px) scale(0.97); } }
@keyframes tk-shake { 20% { transform: translateX(-6px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }

/* ---------- Duyarlı ---------- */
@media (max-width: 1000px) {
    .tk-new { grid-template-columns: minmax(0, 1fr); }
    .tk-aside { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tk-safe { grid-column: 1 / -1; }
    .tk-inbox { grid-template-columns: minmax(0, 1fr); }
    .tk-inbox:not(.is-reading) .tk-conv { display: none; }
    .tk-inbox.is-reading .tk-list-col { display: none; }
    .tk-back { display: inline-flex; }
    .tk-conv { min-height: 0; }
    .tk-thread { max-height: none; }
    .tk-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .tk-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
    .tk-stat { padding: 0.5rem 0.6rem 0.5rem 0.5rem; gap: 0.55rem; }
    .tk-stat b { font-size: 0.86rem; }
    .tk-stat small { font-size: 0.68rem; }
    .tk-stat-ico { width: 32px; height: 32px; }
    .tk-bar { flex-direction: column; align-items: stretch; }
    .tk-tabs { display: grid; grid-template-columns: 1fr 1fr; }
    .tk-me { display: none; }
    .tk-step { padding: 1.4rem 1.1rem; }
    .tk-step-head { gap: 0.8rem; }
    .tk-step-n { width: 38px; height: 38px; font-size: 0.82rem; }
    .tk-step-head b { font-size: 1rem; }
    .tk-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.55rem; }
    .tk-catc { min-height: 0; padding: 0.9rem 0.85rem; }
    .tk-catc-ico { width: 36px; height: 36px; }
    .tk-catc-ico svg { width: 20px; height: 20px; }
    .tk-catc b { font-size: 0.88rem; }
    .tk-catc small { font-size: 0.72rem; }
    .tk-extra { padding: 1rem 0.95rem 1.1rem; }
    .tk-grid2 { grid-template-columns: minmax(0, 1fr); }
    .tk-order { grid-template-columns: auto minmax(0, 1fr); }
    .tk-order-side { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; padding-top: 0.6rem; border-top: 1px solid var(--line); }
    .tk-seg { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tk-msg-meta { flex-wrap: wrap; row-gap: 0.35rem; }
    .tk-msg-meta .tk-count { margin-left: auto; }
    .tk-msg-meta .hint { order: 3; flex-basis: 100%; }
    .tk-file { grid-template-columns: auto minmax(0, 1fr) auto; }
    .tk-file-size { display: none; }
    .tk-submit { padding: 1.4rem 1.1rem 1.6rem; }
    .tk-submit-row { flex-direction: column; align-items: stretch; gap: 1rem; }
    .tk-send { width: 100%; }
    .tk-aside { grid-template-columns: minmax(0, 1fr); }
    .tk-list-col { padding: 0.6rem; }
    .tk-tk { padding: 0.85rem 0.85rem; }
    .tk-tk-foot { flex-wrap: wrap; }
    .tk-conv-head { padding: 1rem 1rem 1.05rem; }
    .tk-conv-head h2 { font-size: 1.12rem; }
    .tk-thread { padding: 1.1rem 0.85rem; }
    .tk-row { max-width: 100%; gap: 0.55rem; }
    .tk-row .mc-head { width: 30px; height: 30px; }
    .tk-ev { max-width: 100%; }
    .tk-reply { padding: 0.9rem 0.85rem 1rem; }
    .tk-reply-row .hint { display: none; }
    .tk-reply-row .btn-gold { flex: 1; }
    .tk-star { width: 40px; height: 40px; }
    .tk-toast { left: 1rem; right: 1rem; bottom: 1rem; }
    .tk-toast-btn { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .tk-extra, .tk-order, .tk-file, .tk-row, .tk-toast, .tk-shake { animation: none !important; }
    .tk-drop, .tk-drop-ico, .tk-star, .tk-progress > span, .tk-minbar span { transition: none; }
}

/* Gerçek site: misafire "giriş yap" kutusu (destek.js) */
.tk-guest { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem 1.2rem; margin-bottom: 1.4rem; padding: 1rem 1.2rem; border-radius: 14px; background: linear-gradient(rgba(255, 138, 61, 0.08), rgba(255, 138, 61, 0.08)), #0a1222; border: 1px solid rgba(255, 138, 61, 0.35); }
.tk-guest[hidden] { display: none; }
.tk-guest p { flex: 1 1 18rem; margin: 0; font-size: 0.88rem; line-height: 1.6; color: var(--muted); }
.tk-guest b { color: #fff; }
.tk-step > .tk-info[data-gercek] { margin-top: 0.2rem; }

.tk-stat[hidden], .tk-card[hidden] { display: none; }

/* ===== durum.css ===== */
/* =========================================================
   Sunucu durumu (ss-)
   ========================================================= */
.ss-page { padding-bottom: 3rem; }
.ss-wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; max-width: 1000px; }

/* Durum şeridi */
.ss-banner { --c: #34d399; display: flex; align-items: center; gap: 1rem; max-width: 760px; margin: 1.6rem auto 0; padding: 1rem 1.2rem; text-align: left; border-radius: 16px; background: color-mix(in srgb, var(--c) 10%, #0a1222); border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); }
.ss-banner.is-warn { --c: #fbbf24; }
.ss-banner.is-down { --c: #f87171; }
.ss-banner > div { flex: 1; min-width: 0; }
.ss-banner b { color: #fff; }
.ss-banner > div > b { display: block; font-size: 1.05rem; }
.ss-banner span { font-size: 0.84rem; color: var(--muted); }
.ss-banner .btn-ghost-px { height: 38px; flex-shrink: 0; }
.ss-pulse { position: relative; width: 16px; height: 16px; flex-shrink: 0; border-radius: 50%; background: var(--c); }
.ss-pulse::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: var(--c); animation: ss-pulse 1.8s ease-out infinite; }
@keyframes ss-pulse { to { opacity: 0; transform: scale(2.6); } }

/* Metrikler */
.ss-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.8rem; margin: 0; padding: 0; list-style: none; }
.ss-metrics li { padding: 1rem 1.1rem; border-radius: 16px; background: var(--glass-strong); border: 1px solid var(--line); }
.ss-metrics small { display: block; font-size: 0.62rem; font-weight: 800; letter-spacing: 0.14em; color: var(--faint); }
.ss-metrics b { display: inline-block; margin: 0.35rem 0.3rem 0 0; font-family: var(--font-mono); font-size: 1.6rem; font-weight: 600; color: #fff; }
.ss-metrics em { font-size: 0.9rem; font-style: normal; color: var(--muted); }
.ss-metrics span { font-size: 0.8rem; color: var(--muted); }

/* Bakım */
.ss-maint { display: flex; align-items: center; gap: 1.1rem; border-color: rgba(56, 189, 248, 0.35); background: radial-gradient(ellipse at 0 50%, rgba(56, 189, 248, 0.12), transparent 55%), var(--glass-strong); }
.ss-maint .feat-ico { flex-shrink: 0; color: #7dd3fc; }
.ss-maint > div:nth-child(2) { flex: 1; min-width: 0; }
.ss-maint h2 { margin: 0 0 0.3rem; font-size: 1rem; color: #fff; }
.ss-maint p { margin: 0; font-size: 0.86rem; line-height: 1.55; color: var(--muted); }
.ss-maint-t { flex-shrink: 0; text-align: right; }
.ss-maint-t small { display: block; font-size: 0.72rem; color: var(--faint); }
.ss-maint-t b { font-family: var(--font-mono); font-size: 1.1rem; color: #7dd3fc; }

/* Sistemler */
.ss-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.8rem; margin-bottom: 0.9rem; }
.ss-h2 { margin: 0; font-family: var(--font-brand); font-size: 1.6rem; color: #fff; }
.ss-legend { display: flex; gap: 1rem; font-size: 0.76rem; color: var(--muted); }
.ss-legend span::before { content: ''; display: inline-block; width: 9px; height: 9px; margin-right: 0.4rem; border-radius: 2px; background: #34d399; }
.ss-legend .is-warn::before { background: #fbbf24; }
.ss-legend .is-down::before { background: #f87171; }
.ss-svcs { display: grid; margin: 0; padding: 0; list-style: none; overflow: hidden; border-radius: 18px; background: var(--glass-strong); border: 1px solid var(--line); }
.ss-svc { padding: 1.1rem 1.3rem; }
.ss-svc + .ss-svc { border-top: 1px solid var(--line); }
.ss-svc-top { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 0.7rem; }
.ss-svc-top b { display: block; font-size: 0.95rem; color: #fff; }
.ss-svc-top small { font-size: 0.78rem; color: var(--faint); }
.ss-bars { display: grid; grid-template-columns: repeat(90, minmax(0, 1fr)); gap: 2px; height: 30px; }
.ss-b { border-radius: 2px; background: #34d399; opacity: 0.85; transition: opacity 0.15s, transform 0.15s; }
.ss-b:hover { opacity: 1; transform: scaleY(1.15); }
.ss-b.is-warn { background: #fbbf24; }
.ss-b.is-down { background: #f87171; }
.ss-b.is-none { background: rgba(148, 163, 184, 0.22); opacity: 1; }
.ss-svc-foot { display: flex; justify-content: space-between; margin-top: 0.4rem; font-size: 0.7rem; color: var(--faint); }
.ss-svc-foot span:nth-child(2) { font-family: var(--font-mono); color: var(--muted); }

/* Olaylar */
.ss-tl { position: relative; margin: 0; padding: 0; list-style: none; }
.ss-tl li { --c: #34d399; position: relative; padding: 0 0 1.2rem 1.6rem; }
.ss-tl li.is-warn { --c: #fbbf24; }
.ss-tl li::before { content: ''; position: absolute; left: 0; top: 0.35rem; width: 10px; height: 10px; background: var(--c); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 20%, transparent); }
.ss-tl li::after { content: ''; position: absolute; left: 4px; top: 1.3rem; bottom: 0; width: 2px; background: var(--line); }
.ss-tl li:last-child::after { display: none; }
.ss-tl-h { display: flex; align-items: center; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 0.3rem; }
.ss-tl-h b { color: #fff; }
.ss-tl p { margin: 0; font-size: 0.86rem; line-height: 1.55; color: var(--muted); }
.ss-tl time { display: block; font-family: var(--font-mono); font-size: 0.76rem; color: var(--faint); }
.ss-sub { margin: 0.4rem 0 0; padding-top: 1rem; border-top: 1px solid var(--line); font-size: 0.84rem; color: var(--muted); }
.ss-sub b { color: #fff; }

@media (max-width: 800px) {
    .ss-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ss-maint { flex-wrap: wrap; }
    .ss-maint-t { text-align: left; }
}
@media (max-width: 640px) {
    .ss-banner { flex-wrap: wrap; }
    .ss-banner > div { flex-basis: calc(100% - 32px); }
    .ss-banner .btn-ghost-px { margin-left: 32px; }
    .ss-maint { display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: start; }
    .ss-maint-t { grid-column: 2; }
    .ss-bars { grid-template-columns: repeat(45, minmax(0, 1fr)); height: 26px; }
    .ss-b:nth-child(-n+45) { display: none; }
    .ss-svc-foot span:first-child::after { content: ' (45 gün)'; }
}
@media (prefers-reduced-motion: reduce) { .ss-pulse::after { animation: none; } }

/* ===== duyurular.css ===== */
/* =========================================================
   Duyuru arşivi (duyurular.html) — önek: na-
   ========================================================= */
.na-page { overflow-x: clip; }
.na-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Kategori renkleri */
.na-c-update { --c: #5eead4; }
.na-c-event { --c: #f472b6; }
.na-c-store { --c: #fbbf24; }
.na-c-system { --c: #93c5fd; }
.na-dot { display: inline-block; width: 8px; height: 8px; flex-shrink: 0; background: var(--c); box-shadow: 0 0 8px color-mix(in srgb, var(--c) 70%, transparent); }
.cat.na-cat-system { color: #bfdbfe; background: rgba(59, 130, 246, 0.18); border-color: rgba(147, 197, 253, 0.38); }

/* ---------- Hero ---------- */
.na-hero { padding-bottom: 2rem; }
.na-search { max-width: 680px; margin: 2rem auto 0; }
.na-search-box {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    height: 62px;
    padding: 0 0.7rem 0 1.25rem;
    background: rgba(255, 176, 122, 0.5);
    clip-path: var(--px-lg);
    cursor: text;
    transition: background 0.2s var(--ease);
}
.na-search-box::before { content: ''; position: absolute; inset: 1.5px; z-index: -1; clip-path: var(--px-lg); background: linear-gradient(180deg, #0d1729, #080f1d); }
.na-search-box:focus-within { background: linear-gradient(90deg, #ffb07a, #5eead4); }
.na-search-box > svg { width: 20px; height: 20px; flex-shrink: 0; color: #ffb07a; }
.na-search-input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; color: #fff; font: inherit; font-size: 1.02rem; outline: none; }
.na-search-input::placeholder { color: #6b7894; }
.na-search-input::-webkit-search-cancel-button { display: none; }
.na-kbd { display: grid; place-items: center; min-width: 28px; height: 28px; padding: 0 0.4rem; border-radius: 6px; font-family: var(--font-mono); font-size: 0.8rem; color: var(--faint); background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line-strong); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.35); }
.na-search-box:focus-within .na-kbd { display: none; }
.na-search-clear { display: grid; place-items: center; width: 38px; height: 38px; border: 0; border-radius: 9px; color: var(--muted); background: rgba(255, 255, 255, 0.06); cursor: pointer; }
.na-search-clear:hover { color: #fff; }
.na-search-clear svg { width: 16px; height: 16px; }
.na-search-hints { display: flex; justify-content: center; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin-top: 0.9rem; font-size: 0.8rem; color: var(--faint); text-shadow: 0 1px 2px rgba(5, 10, 20, 0.9); }
.na-search-hints button { height: 28px; padding: 0 0.7rem; border: 1px solid var(--line-strong); border-radius: 7px; background: rgba(8, 14, 27, 0.88); color: var(--muted); font: inherit; font-size: 0.78rem; cursor: pointer; transition: color 0.2s var(--ease), border-color 0.2s var(--ease); }
.na-search-hints button:hover { color: #ffd3b0; border-color: rgba(255, 138, 61, 0.5); }

/* Son dakika şeridi */
.na-ticker { display: flex; align-items: stretch; max-width: 900px; height: 42px; margin: 1.8rem auto 0; overflow: hidden; border-radius: 10px; background: rgba(8, 14, 27, 0.92); border: 1px solid var(--line); text-align: left; }
.na-ticker-label { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0 0.95rem; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.18em; color: #2a1204; background: linear-gradient(180deg, #ffb87e, #ff8a3d); }
.na-ticker-label .live-dot { width: 7px; height: 7px; background: #2a1204; animation: none; }
.na-ticker-track { position: relative; flex: 1; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 4%, #000 92%, transparent); }
.na-ticker-move { display: flex; align-items: center; gap: 2.5rem; height: 100%; width: max-content; padding-left: 1.2rem; animation: na-marquee 38s linear infinite; }
.na-ticker:hover .na-ticker-move { animation-play-state: paused; }
.na-ticker a { display: inline-flex; align-items: center; gap: 0.6rem; font-size: 0.84rem; color: var(--text); text-decoration: none; white-space: nowrap; }
.na-ticker a:hover { color: #ffd3b0; }
.na-ticker a b { font-size: 0.64rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: #ffb07a; }
.na-ticker a::after { content: ''; width: 5px; height: 5px; margin-left: 1.9rem; background: rgba(255, 176, 122, 0.45); }
@keyframes na-marquee { to { transform: translateX(-50%); } }

/* ---------- Araç çubuğu ---------- */
.na-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; max-width: 1240px; margin: 0 auto 1.6rem; padding: 0 1.5rem; }
.na-chips .chip { display: inline-flex; align-items: center; gap: 0.5rem; }
.na-chips .chip.is-active .na-dot { box-shadow: none; outline: 1px solid rgba(42, 18, 4, 0.4); }
.na-tools-right { display: flex; align-items: center; gap: 1rem; }
.na-count { font-size: 0.86rem; color: var(--muted); white-space: nowrap; text-shadow: 0 1px 2px rgba(5, 10, 20, 0.9); }
.na-count b { font-family: var(--font-mono); color: #fff; }
.na-count q { color: #ffd3b0; quotes: '“' '”'; }
.na-sort { display: flex; align-items: center; gap: 0.6rem; font-size: 0.8rem; font-weight: 600; color: var(--faint); }
.na-sort .select { width: 176px; height: 42px; font-size: 0.88rem; background-color: rgba(8, 14, 27, 0.92); }

/* ---------- Düzen ---------- */
.na-layout { grid-template-columns: minmax(0, 1fr) 300px; gap: 1.75rem; }
.na-main { min-width: 0; }

/* Öne çıkan duyuru (yatay) */
.na-feature { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); margin-bottom: 1.25rem; }
.na-feature .nf-media { aspect-ratio: auto; min-height: 100%; }
.na-feature .nf-media img { position: absolute; inset: 0; }
.na-feature .nf-media::after { background: linear-gradient(90deg, transparent 55%, rgba(8, 14, 27, 0.9) 100%); }
.na-feature .nf-body { margin-top: 0; padding: 1.8rem 1.8rem 1.5rem; }
.na-kicker { font-size: 0.66rem; font-weight: 800; letter-spacing: 0.18em; color: #ffb07a; }
.na-feature .nf-title { margin-top: 0.7rem; font-family: var(--font-brand); font-size: 1.7rem; letter-spacing: 0.01em; line-height: 1.18; }
.na-feature .nf-excerpt { margin: 0.8rem 0 0; }
.na-feature-points { display: grid; gap: 0.35rem; margin: 1rem 0 1.4rem; padding: 0; list-style: none; }
.na-feature-points li { display: flex; align-items: center; gap: 0.6rem; font-size: 0.86rem; color: #dfe4ee; }
.na-feature-points li::before { content: ''; width: 6px; height: 6px; flex-shrink: 0; background: #ff8a3d; box-shadow: 0 0 8px rgba(255, 138, 61, 0.7); }

/* Kart ızgarası */
.na-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem; transition: opacity 0.25s var(--ease); }
.na-grid.is-swapping { opacity: 0.25; }
.na-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 18px;
    background: var(--glass-strong);
    border: 1px solid var(--line);
    color: inherit;
    text-decoration: none;
    transition: transform 0.35s var(--ease), border-color 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.na-card:hover { transform: translateY(-4px); border-color: var(--line-strong); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 176, 122, 0.12); }
.na-card-media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #0a1325; }
.na-card-media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease); }
.na-card:hover .na-card-media img { transform: scale(1.06); }
.na-card-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5, 10, 20, 0.35) 0%, transparent 35%, transparent 60%, rgba(8, 14, 27, 0.7) 100%); pointer-events: none; }
.na-card-media .cat { position: absolute; top: 0.75rem; left: 0.75rem; z-index: 1; }
.na-read { position: absolute; right: 0.7rem; bottom: 0.65rem; z-index: 1; display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.18rem 0.5rem; border-radius: 6px; font-family: var(--font-mono); font-size: 0.68rem; font-weight: 600; color: #fff; background: rgba(5, 10, 20, 0.85); }
.na-img-launcher { object-position: left center; }
.na-img-beta { object-position: center 70%; filter: saturate(0.75) hue-rotate(-8deg); }

/* Pikselli kapak (görselsiz duyurular) */
.na-pxcover {
    display: grid;
    place-items: center;
    background:
        linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px) 0 0 / 12px 12px,
        linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px) 0 0 / 12px 12px,
        radial-gradient(ellipse 60% 70% at 50% 50%, color-mix(in srgb, var(--c) 28%, transparent), transparent 70%),
        linear-gradient(160deg, #0f1a31, #070d1a);
}
.na-pxcover .na-px { width: 38%; max-width: 120px; image-rendering: pixelated; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.5)); transition: transform 0.6s var(--ease); }
.na-card:hover .na-pxcover .na-px { transform: translateY(-4px) rotate(-3deg); }
.na-pxcover-label { position: absolute; left: 0.75rem; bottom: 0.7rem; z-index: 1; font-family: var(--font-mono); font-size: 0.66rem; font-weight: 600; letter-spacing: 0.1em; color: color-mix(in srgb, var(--c) 70%, #fff); }

.na-card-body { display: flex; flex: 1; flex-direction: column; padding: 1rem 1.1rem 1rem; }
.na-card-body time { font-size: 0.74rem; font-weight: 600; color: var(--faint); }
.na-card-title { margin: 0.4rem 0 0; font-family: var(--font-display); font-size: 1.02rem; font-weight: 600; line-height: 1.38; color: #fff; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.na-card-ex { margin: 0.5rem 0 0; font-size: 0.84rem; line-height: 1.55; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.na-card-meta { display: flex; align-items: center; gap: 0.5rem; margin-top: auto; padding-top: 0.9rem; font-size: 0.78rem; }
.na-card-meta .mc-head { width: 22px; height: 22px; border-radius: 5px; }
.na-card-meta b { color: #dfe4ee; font-weight: 600; }
.na-card-body > .na-card-ex { margin-bottom: 0.9rem; }
.na-card-meta { border-top: 1px solid var(--line); }
.na-views { display: inline-flex; align-items: center; gap: 0.3rem; margin-left: auto; font-family: var(--font-mono); font-size: 0.72rem; color: var(--faint); }
.na-views svg { width: 13px; height: 13px; }
mark.na-mark { padding: 0 0.1em; border-radius: 3px; color: #2a1204; background: #ffb07a; }
.na-hide { display: none !important; }

.na-empty { margin-top: 0.5rem; padding: 3rem 1.5rem; border-radius: 18px; background: var(--glass-strong); border: 1px dashed rgba(255, 176, 122, 0.3); }
.na-empty h3 { margin: 0.8rem 0 0.3rem; font-size: 1.1rem; color: #fff; }
.na-empty p { margin: 0 0 1.3rem; font-size: 0.9rem; }

.na-pagination .na-page-arrow { font-size: 1rem; }
.na-pagination .na-gap { background: transparent; border-color: transparent; }
.na-pagination a { cursor: pointer; }
.na-page-note { margin: 0.8rem 0 0; text-align: center; font-size: 0.8rem; color: var(--faint); text-shadow: 0 1px 2px rgba(5, 10, 20, 0.9); }
.na-page-note b { color: var(--muted); }

/* ---------- Kenar çubuğu ---------- */
.na-side { display: grid; gap: 1rem; align-content: start; }
.na-panel { padding: 1.2rem 1.25rem; }
.na-panel-title { margin-bottom: 0.8rem; font-family: var(--font-brand); font-size: 0.86rem; letter-spacing: 0.14em; text-transform: uppercase; color: #ffd3b0; }
.na-panel-title::before { content: ''; width: 8px; height: 8px; background: linear-gradient(135deg, #ff8a3d, #5eead4); }
.na-cats { display: grid; gap: 0.15rem; margin: 0; padding: 0; list-style: none; }
.na-cats button { width: 100%; display: flex; align-items: center; gap: 0.7rem; padding: 0.6rem 0.55rem; border: 0; border-radius: 9px; background: transparent; color: var(--text); font: inherit; font-size: 0.9rem; text-align: left; cursor: pointer; transition: background 0.2s var(--ease); }
.na-cats button:hover { background: rgba(255, 255, 255, 0.04); }
.na-cats button.is-active { background: rgba(255, 138, 61, 0.12); box-shadow: inset 2px 0 0 #ff8a3d; }
.na-cats b { margin-left: auto; min-width: 30px; padding: 0.1rem 0.4rem; border-radius: 6px; font-family: var(--font-mono); font-size: 0.76rem; font-weight: 600; text-align: center; color: var(--muted); background: rgba(255, 255, 255, 0.05); }
.na-cat-bar { display: flex; gap: 2px; height: 8px; margin-top: 0.8rem; }
.na-cat-bar span { background: var(--c); }
.na-cat-bar .na-c-update { flex: 17; } .na-cat-bar .na-c-event { flex: 21; } .na-cat-bar .na-c-store { flex: 9; } .na-cat-bar .na-c-system { flex: 7; }

.na-top { display: grid; margin: 0; padding: 0; list-style: none; counter-reset: none; }
.na-top li + li { border-top: 1px solid var(--line); }
.na-top a { display: flex; align-items: flex-start; gap: 0.85rem; padding: 0.75rem 0; color: inherit; text-decoration: none; }
.na-top-n { font-family: var(--font-brand); font-size: 1.35rem; font-weight: 700; line-height: 1; color: transparent; -webkit-text-stroke: 1px rgba(255, 176, 122, 0.7); transition: color 0.2s var(--ease); }
.na-top li:first-child .na-top-n { color: #ff8a3d; -webkit-text-stroke: 0; text-shadow: 0 0 14px rgba(255, 138, 61, 0.5); }
.na-top a:hover .na-top-n { color: #ffb07a; }
.na-top-t { font-size: 0.88rem; font-weight: 600; line-height: 1.4; color: #e7eaf3; }
.na-top a:hover .na-top-t { color: #fff; }
.na-top-t small { display: block; margin-top: 0.2rem; font-size: 0.74rem; font-weight: 500; color: var(--faint); }

.na-news-cta {
    position: relative;
    isolation: isolate;
    padding: 1.4rem 1.3rem 1.25rem;
    background: linear-gradient(160deg, rgba(255, 176, 122, 0.7), rgba(255, 138, 61, 0.3) 45%, rgba(94, 234, 212, 0.4));
    clip-path: var(--px-lg);
}
.na-news-cta::before { content: ''; position: absolute; inset: 1.5px; z-index: -1; clip-path: var(--px-lg); background: radial-gradient(ellipse 90% 60% at 100% 0%, rgba(255, 138, 61, 0.22), transparent 70%), #0a1224; }
.na-cta-ico { width: 40px; height: 40px; display: grid; place-items: center; color: #2a1204; background: linear-gradient(180deg, #ffb87e, #ff8a3d); clip-path: var(--px-sm); }
.na-cta-ico svg { width: 19px; height: 19px; }
.na-news-cta h2 { margin: 0.9rem 0 0.3rem; font-family: var(--font-brand); font-size: 1.2rem; color: #fff; }
.na-news-cta p { margin: 0; font-size: 0.86rem; line-height: 1.55; color: var(--muted); }
.na-news-form { display: grid; gap: 0.55rem; margin-top: 1rem; }
.na-news-form .input { height: 44px; font-size: 0.9rem; }
.na-news-form .btn-gold { width: 100%; height: 44px; border: 0; cursor: pointer; font-family: var(--font-brand); }
.na-news-form .hint { line-height: 1.45; }
.na-news-done { display: flex; align-items: flex-start; gap: 0.6rem; margin-top: 1rem; padding: 0.8rem 0.9rem; border-radius: 12px; font-size: 0.86rem; line-height: 1.45; color: #a7f3d0; background: rgba(16, 185, 129, 0.12); border: 1px solid rgba(52, 211, 153, 0.35); }
.na-news-done svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 0.1rem; }
.na-news-done b { color: #fff; }
.na-dc-link { display: flex; align-items: center; gap: 0.6rem; margin-top: 1rem; padding-top: 0.9rem; border-top: 1px solid var(--line); font-size: 0.8rem; color: var(--muted); text-decoration: none; }
.na-dc-link svg { width: 18px; height: 18px; flex-shrink: 0; color: #a5adf5; }
.na-dc-link b { color: #fff; }
.na-dc-link > span:last-child { margin-left: auto; color: #ffb07a; transition: transform 0.2s var(--ease); }
.na-dc-link:hover > span:last-child { transform: translateX(3px); }

.na-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.na-tags button { height: 30px; padding: 0 0.7rem; border: 1px solid var(--line-strong); border-radius: 7px; background: rgba(255, 255, 255, 0.03); color: var(--muted); font: inherit; font-size: 0.8rem; font-weight: 500; cursor: pointer; transition: color 0.2s var(--ease), border-color 0.2s var(--ease), background 0.2s var(--ease); }
.na-tags button:nth-child(3n + 1) { font-size: 0.86rem; color: #dfe4ee; }
.na-tags button:hover, .na-tags button.is-active { color: #2a1204; background: #ffb07a; border-color: #ffb07a; }

.na-archive { display: grid; gap: 0.1rem; margin: 0; padding: 0; list-style: none; }
.na-archive a { display: grid; grid-template-columns: 104px minmax(0, 1fr) 26px; align-items: center; gap: 0.7rem; padding: 0.5rem 0; font-size: 0.86rem; color: var(--text); text-decoration: none; }
.na-archive a:hover { color: #ffd3b0; }
.na-archive b { font-family: var(--font-mono); font-size: 0.76rem; font-weight: 600; text-align: right; color: var(--faint); }
.na-arc-bar { height: 6px; overflow: hidden; border-radius: 2px; background: rgba(255, 255, 255, 0.06); }
.na-arc-bar i { display: block; height: 100%; background: repeating-linear-gradient(90deg, #ff8a3d 0 6px, #ffa564 6px 8px); }
.na-w-19 { width: 100%; } .na-w-14 { width: 74%; } .na-w-12 { width: 63%; } .na-w-9 { width: 47%; }

/* ---------- Duyarlı ---------- */
@media (max-width: 1180px) {
    .na-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1000px) {
    .na-layout { grid-template-columns: 1fr; }
    .na-side { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .na-feature { grid-template-columns: 1fr; }
    .na-feature .nf-media { aspect-ratio: 16 / 8; min-height: 0; }
    .na-feature .nf-media::after { background: linear-gradient(180deg, transparent 50%, rgba(8, 14, 27, 0.9)); }
}
@media (max-width: 640px) {
    .na-search { margin-top: 1.5rem; }
    .na-search-box { height: 54px; padding-left: 1rem; }
    .na-kbd { display: none; }
    .na-search-input { font-size: 0.95rem; }
    .na-ticker { margin-top: 1.4rem; }
    .na-ticker-label { padding: 0 0.7rem; }
    .na-toolbar { padding: 0 1rem; }
    .na-toolbar .chips { width: 100%; }
    .na-tools-right { width: 100%; justify-content: space-between; }
    .na-sort .select { width: 160px; }
    .na-feature .nf-media { aspect-ratio: 16 / 10; }
    .na-feature .nf-body { padding: 0 1.15rem 1.2rem; margin-top: -2.2rem; }
    .na-feature .nf-title { font-size: 1.35rem; }
    .na-feature .read-cta { display: none; }
    .na-grid { grid-template-columns: 1fr; }
    .na-side { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
    .na-ticker-move { animation: none; }
    .na-grid { transition: none; }
}

/* ===== etkinlikler.css ===== */
/* =========================================================
   Etkinlik takvimi (etkinlikler.html) — önek: ev-
   Not: .ev-dot/.ev-when/.ev-live ana sayfada kullanılıyor; burada yeniden tanımlanmaz.
   ========================================================= */
.ev-page { overflow-x: clip; }
.ev-page .section-lead, .ev-page .page-lead, .ev-dc-copy p { text-wrap: pretty; }

/* Etkinlik türü renkleri */
.ev-t-drop { --c: #ff8a3d; --c-soft: #ffd3b0; }
.ev-t-kredi { --c: #fbbf24; --c-soft: #fde68a; }
.ev-t-saklambac { --c: #5eead4; --c-soft: #ccfbf1; }
.ev-t-arena { --c: #f472b6; --c-soft: #fbcfe8; }
.ev-t-insa { --c: #7dd3fc; --c-soft: #e0f2fe; }
.ev-t-hazine { --c: #34d399; --c-soft: #d1fae5; }

.ev-art { display: block; width: 100%; height: auto; image-rendering: pixelated; }

/* ---------- Hero spot ---------- */
.ev-hero { padding-bottom: 1rem; }
.ev-spot {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: 290px minmax(0, 1fr) 360px;
    grid-template-rows: auto 1fr;
    max-width: 1140px;
    margin: 2.6rem auto 0;
    text-align: left;
    background: linear-gradient(135deg, rgba(255, 176, 122, 0.75), rgba(255, 138, 61, 0.35) 40%, rgba(94, 234, 212, 0.35));
    clip-path: var(--px-lg);
    filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.5));
}
.ev-spot::before {
    content: '';
    position: absolute;
    inset: 1.5px;
    z-index: -1;
    clip-path: var(--px-lg);
    background:
        radial-gradient(ellipse 45% 80% at 12% 60%, color-mix(in srgb, var(--c) 22%, transparent), transparent 70%),
        linear-gradient(180deg, #0b1427, #070d1a);
}
.ev-spot-banner {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 1.4rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    color: #ffd3b0;
    background: rgba(255, 138, 61, 0.08);
    border-bottom: 1px solid rgba(255, 176, 122, 0.18);
}
.ev-spot-banner b { font-weight: 800; }
.ev-spot-banner [data-spot-when] { color: var(--muted); letter-spacing: 0.08em; font-weight: 600; }
.ev-spot-banner-sep { width: 1px; height: 12px; background: rgba(255, 255, 255, 0.18); }
.ev-spot-pulse { position: relative; width: 10px; height: 10px; flex-shrink: 0; background: #ffb07a; }
.ev-spot.is-live .ev-spot-banner {
    color: #2a1204;
    background: repeating-linear-gradient(135deg, #ff9a52 0 14px, #ff8a3d 14px 28px);
    border-bottom-color: transparent;
    animation: ev-banner 1.2s linear infinite;
}
.ev-spot.is-live .ev-spot-banner [data-spot-when] { color: #4a1f06; }
.ev-spot.is-live .ev-spot-banner-sep { background: rgba(42, 18, 4, 0.3); }
.ev-spot.is-live .ev-spot-pulse { background: #2a1204; animation: ev-blink 1s steps(2) infinite; }
.ev-spot.is-live .ev-spot-pulse::after { content: ''; position: absolute; inset: -4px; border: 2px solid rgba(42, 18, 4, 0.55); animation: ev-ring 1.4s var(--ease) infinite; }
.ev-spot.is-live { animation: ev-glow 2.4s ease-in-out infinite; }
@keyframes ev-banner { to { background-position: 39.6px 0; } }
@keyframes ev-blink { 50% { opacity: 0.25; } }
@keyframes ev-ring { from { transform: scale(0.6); opacity: 1; } to { transform: scale(1.8); opacity: 0; } }
@keyframes ev-glow { 50% { filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 28px rgba(255, 138, 61, 0.45)); } }

.ev-spot-art {
    position: relative;
    display: grid;
    place-items: center;
    padding: 1.6rem 1.4rem;
    border-right: 1px solid var(--line);
    background:
        linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px) 0 0 / 16px 16px,
        linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px) 0 0 / 16px 16px,
        radial-gradient(ellipse 70% 60% at 50% 55%, color-mix(in srgb, var(--c) 30%, transparent), transparent 70%);
}
.ev-spot-art .ev-art { max-width: 240px; filter: drop-shadow(0 14px 18px rgba(0, 0, 0, 0.5)); animation: ev-bob 4s ease-in-out infinite; }
@keyframes ev-bob { 50% { transform: translateY(-5px); } }

.ev-spot-body { padding: 1.6rem 1.6rem 1.5rem; min-width: 0; }
.ev-spot-type, .ev-type {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--c-soft, #ffd3b0);
}
.ev-spot-type::before, .ev-type::before { content: ''; width: 8px; height: 8px; background: var(--c); box-shadow: 0 0 10px var(--c); }
.ev-spot-title { margin: 0.55rem 0 0; font-family: var(--font-brand); font-size: clamp(1.8rem, 3.2vw, 2.5rem); font-weight: 700; line-height: 1.08; color: #fff; }
.ev-spot-desc { margin: 0.75rem 0 0; font-size: 0.95rem; line-height: 1.65; color: var(--muted); }
.ev-spot-meta { display: grid; gap: 0.1rem; margin: 1.1rem 0 0; padding: 0; list-style: none; }
.ev-spot-meta li { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0; border-top: 1px solid var(--line); font-size: 0.86rem; }
.ev-spot-meta svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--c); }
.ev-spot-meta span { width: 64px; color: var(--faint); }
.ev-spot-meta b { font-weight: 600; color: #fff; }

.ev-spot-count {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1rem;
    padding: 1.6rem 1.6rem 1.5rem;
    border-left: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.02);
}
.ev-spot-label { font-size: 0.66rem; font-weight: 800; letter-spacing: 0.2em; color: var(--faint); }
.ev-clock { display: flex; align-items: flex-start; gap: 0.35rem; }
.ev-seg { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 0.4rem; }
.ev-seg b {
    position: relative;
    isolation: isolate;
    width: 100%;
    padding: 0.55rem 0 0.5rem;
    text-align: center;
    font-family: var(--font-mono);
    font-size: 2.3rem;
    font-weight: 600;
    line-height: 1;
    color: #fff;
    background: rgba(255, 176, 122, 0.35);
    clip-path: var(--px-sm);
    font-variant-numeric: tabular-nums;
}
.ev-seg b::before { content: ''; position: absolute; inset: 1.5px; z-index: -1; clip-path: var(--px-sm); background: linear-gradient(180deg, #111c33 0 50%, #0b1426 50% 100%); }
.ev-seg b::after { content: ''; position: absolute; left: 1.5px; right: 1.5px; top: 50%; height: 1px; background: rgba(0, 0, 0, 0.5); }
.ev-seg i { font-style: normal; font-size: 0.58rem; font-weight: 700; letter-spacing: 0.16em; color: var(--faint); }
.ev-colon { padding-top: 0.55rem; font-family: var(--font-mono); font-size: 1.8rem; font-weight: 600; color: #ff8a3d; animation: ev-blink 1s steps(2) infinite; }
.ev-spot-prog { display: none; }
.ev-spot.is-live .ev-spot-prog { display: block; }
.ev-spot-prog small { display: flex; justify-content: space-between; margin-top: 0.45rem; font-size: 0.74rem; color: var(--muted); }
.ev-spot-prog small b { font-family: var(--font-mono); color: #ffd3b0; }
.ev-spot-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.ev-spot-actions .play-btn { flex: 1 1 auto; }

/* Hatırlat düğmesi */
.ev-bell {
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    height: 38px;
    padding: 0 0.95rem;
    border: 0;
    font: inherit;
    font-size: 0.8rem;
    font-weight: 700;
    color: #ffd3b0;
    background: rgba(255, 138, 61, 0.5);
    clip-path: var(--px-sm);
    cursor: pointer;
    transition: color 0.2s var(--ease), transform 0.2s var(--ease);
}
.ev-bell::before { content: ''; position: absolute; inset: 1.5px; z-index: -1; clip-path: var(--px-sm); background: #0b1426; transition: background 0.2s var(--ease); }
.ev-bell svg { width: 16px; height: 16px; transform-origin: 50% 10%; }
.ev-bell:hover { transform: translateY(-1px); color: #fff; }
.ev-bell.is-on { color: #2a1204; background: #ffcca3; }
.ev-bell.is-on::before { background: linear-gradient(180deg, #ffae6e, #f47a2e); }
.ev-bell.is-on svg { fill: currentColor; }
.ev-bell.is-ringing svg { animation: ev-ring-bell 0.7s var(--ease); }
@keyframes ev-ring-bell { 20% { transform: rotate(18deg); } 40% { transform: rotate(-14deg); } 60% { transform: rotate(9deg); } 80% { transform: rotate(-5deg); } }
.ev-bell--spot { height: 44px; padding: 0 1.1rem; }

/* İstatistik şeridi */
.ev-stats { display: grid; grid-template-columns: repeat(4, 1fr); max-width: 1140px; margin: 1rem auto 0; padding: 0; list-style: none; border-radius: 16px; background: rgba(8, 14, 27, 0.9); border: 1px solid var(--line); }
.ev-stats li { padding: 1rem 1rem 1.05rem; text-align: center; }
.ev-stats li + li { border-left: 1px solid var(--line); }
.ev-stats b { display: block; font-family: var(--font-mono); font-size: 1.35rem; font-weight: 600; color: #fff; }
.ev-stats span { display: block; margin-top: 0.2rem; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); }

/* ---------- Haftalık takvim ---------- */
.ev-legend { display: flex; flex-wrap: wrap; gap: 0.45rem 1rem; margin: 0; padding: 0.7rem 1rem; list-style: none; border-radius: 12px; background: rgba(8, 14, 27, 0.88); border: 1px solid var(--line); }
.ev-legend li { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.78rem; font-weight: 600; color: var(--muted); }
.ev-legend li::before { content: ''; width: 10px; height: 10px; background: var(--c); box-shadow: 0 0 8px color-mix(in srgb, var(--c) 60%, transparent); }
.ev-legend .ev-t-kredi::before { background: repeating-linear-gradient(135deg, var(--c) 0 2px, transparent 2px 4px); outline: 1px solid var(--c); outline-offset: -1px; }

.ev-cal { --h: 76px; overflow: hidden; border-radius: 22px; background: rgba(7, 12, 24, 0.94); border: 1px solid var(--line-strong); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45); }
.ev-cal-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.9rem 1.25rem; border-bottom: 1px solid var(--line); background: rgba(255, 255, 255, 0.02); }
.ev-cal-week { display: inline-flex; align-items: center; gap: 0.6rem; font-size: 0.9rem; color: #fff; }
.ev-cal-week svg { width: 18px; height: 18px; color: #ffb07a; }
.ev-cal-week b { font-family: var(--font-brand); font-weight: 700; letter-spacing: 0.04em; }
.ev-cal-clock { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.82rem; color: var(--muted); }
.ev-cal-clock b { font-family: var(--font-mono); color: #fff; }
.ev-daytabs { display: none; }

.ev-grid { display: grid; grid-template-columns: 68px repeat(7, minmax(0, 1fr)); }
.ev-corner { display: grid; place-items: center; font-family: var(--font-mono); font-size: 0.62rem; color: var(--faint); border-bottom: 1px solid var(--line); }
.ev-dh { display: flex; flex-direction: column; align-items: center; gap: 0.15rem; padding: 0.8rem 0.4rem; border-left: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.ev-dh b { font-family: var(--font-brand); font-size: 0.82rem; font-weight: 700; letter-spacing: 0.14em; color: #dfe4ee; }
.ev-dh small { font-size: 0.72rem; color: var(--faint); }
.ev-dh.is-today { background: linear-gradient(180deg, rgba(255, 138, 61, 0.22), rgba(255, 138, 61, 0.06)); box-shadow: inset 0 3px 0 #ff8a3d; }
.ev-dh.is-today b { color: #ffd3b0; }
.ev-dh.is-today small { color: #ffb07a; }
.ev-dh.is-today small::after { content: ' · Bugün'; font-weight: 700; }

.ev-times { position: relative; height: calc(var(--h) * 6); }
.ev-times span { position: absolute; right: 0.7rem; transform: translateY(-50%); font-family: var(--font-mono); font-size: 0.7rem; color: var(--faint); }
.ev-times span:nth-child(1) { top: 0; transform: translateY(0.3rem); }
.ev-times span:nth-child(2) { top: calc(var(--h) * 1); }
.ev-times span:nth-child(3) { top: calc(var(--h) * 2); }
.ev-times span:nth-child(4) { top: calc(var(--h) * 3); }
.ev-times span:nth-child(5) { top: calc(var(--h) * 4); }
.ev-times span:nth-child(6) { top: calc(var(--h) * 5); }
.ev-times span:nth-child(7) { top: calc(var(--h) * 6); transform: translateY(-1.1rem); }

.ev-body {
    position: relative;
    grid-column: 2 / -1;
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    height: calc(var(--h) * 6);
    background:
        repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.07) 0 1px, transparent 1px var(--h)),
        repeating-linear-gradient(180deg, transparent 0 calc(var(--h) / 2), rgba(255, 255, 255, 0.025) calc(var(--h) / 2) calc(var(--h) / 2 + 1px), transparent calc(var(--h) / 2 + 1px) var(--h));
}
.ev-col { position: relative; border-left: 1px solid var(--line); }
.ev-col.is-today { background: linear-gradient(180deg, rgba(255, 138, 61, 0.07), rgba(255, 138, 61, 0.02)); box-shadow: inset 1px 0 0 rgba(255, 138, 61, 0.35), inset -1px 0 0 rgba(255, 138, 61, 0.35); }

/* Konum sınıfları (18:00 başlangıç) */
.ev-s18 { top: 0; }
.ev-s19 { top: calc(var(--h) * 1); }
.ev-s20 { top: calc(var(--h) * 2); }
.ev-s21 { top: calc(var(--h) * 3); }
.ev-s22 { top: calc(var(--h) * 4); }
.ev-s23 { top: calc(var(--h) * 5); }
.ev-d30 { height: calc(var(--h) * 0.5); }
.ev-d45 { height: calc(var(--h) * 0.75); }
.ev-d60 { height: calc(var(--h) * 1); }
.ev-d90 { height: calc(var(--h) * 1.5); }
.ev-d120 { height: calc(var(--h) * 2); }

.ev-blk {
    position: absolute;
    left: 5px;
    right: 5px;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
    margin-top: 2px;
    padding: 0.4rem 0.55rem;
    overflow: hidden;
    border-radius: 8px;
    border-left: 3px solid var(--c);
    background: linear-gradient(180deg, color-mix(in srgb, var(--c) 30%, #0b1426), color-mix(in srgb, var(--c) 18%, #0b1426));
    color: #fff;
    text-decoration: none;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
    transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), opacity 0.3s var(--ease);
}
.ev-blk.ev-d30 { height: calc(var(--h) * 0.5 - 4px); flex-direction: row; align-items: center; justify-content: space-between; gap: 0.4rem; padding-block: 0; }
.ev-blk.ev-d30 b { flex: 0 1 auto; }
.ev-blk.ev-d30 small { flex-shrink: 0; }
.ev-blk.ev-d45 { height: calc(var(--h) * 0.75 - 4px); }
.ev-blk.ev-d60 { height: calc(var(--h) - 4px); }
.ev-blk.ev-d90 { height: calc(var(--h) * 1.5 - 4px); }
.ev-blk b { overflow: hidden; font-size: 0.78rem; font-weight: 700; line-height: 1.25; white-space: nowrap; text-overflow: ellipsis; }
.ev-blk small { overflow: hidden; font-family: var(--font-mono); font-size: 0.66rem; color: var(--c-soft); white-space: nowrap; text-overflow: ellipsis; }
.ev-blk em { margin-top: auto; font-style: normal; font-size: 0.68rem; color: rgba(255, 255, 255, 0.72); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ev-blk:hover { z-index: 3; transform: translateY(-2px) scale(1.02); box-shadow: 0 12px 26px rgba(0, 0, 0, 0.5), 0 0 0 1px color-mix(in srgb, var(--c) 60%, transparent); }
.ev-blk:focus-visible { outline: 2px solid var(--c); outline-offset: 2px; }
/* Çift Kredi: tüm günlere yayılan taralı bant */
.ev-blk.ev-band {
    left: 0;
    right: 0;
    z-index: 0;
    margin-top: 0;
    height: calc(var(--h) * 2);
    padding: 0.45rem 0.55rem;
    border-radius: 0;
    border-left: 0;
    border-top: 1px dashed rgba(251, 191, 36, 0.45);
    border-bottom: 1px dashed rgba(251, 191, 36, 0.45);
    background: repeating-linear-gradient(135deg, rgba(251, 191, 36, 0.13) 0 7px, rgba(251, 191, 36, 0.04) 7px 14px);
    box-shadow: none;
}
.ev-blk.ev-band b { font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; color: #fde68a; }
.ev-blk.ev-band small { color: rgba(253, 230, 138, 0.75); }
.ev-blk.ev-band:hover { transform: none; background: repeating-linear-gradient(135deg, rgba(251, 191, 36, 0.2) 0 7px, rgba(251, 191, 36, 0.07) 7px 14px); box-shadow: none; }
.ev-blk.is-past { opacity: 0.38; filter: saturate(0.4); }
.ev-blk.is-live { z-index: 2; box-shadow: 0 0 0 2px var(--c), 0 0 24px color-mix(in srgb, var(--c) 55%, transparent); animation: ev-blk-live 1.6s ease-in-out infinite; }
.ev-blk.ev-band.is-live { box-shadow: inset 0 0 0 1px rgba(251, 191, 36, 0.7); animation: none; }
.ev-blk.is-live::after { content: 'CANLI'; position: absolute; top: 4px; right: 5px; padding: 1px 4px; font-size: 0.52rem; font-weight: 800; letter-spacing: 0.1em; color: #2a1204; background: var(--c); }
@keyframes ev-blk-live { 50% { box-shadow: 0 0 0 2px var(--c), 0 0 34px color-mix(in srgb, var(--c) 75%, transparent); } }
.ev-blk.is-flash { animation: ev-flash 1.2s var(--ease); }
@keyframes ev-flash { 30% { transform: scale(1.06); } }

/* Şimdi çizgisi */
.ev-now { position: absolute; left: 0; right: 0; z-index: 4; height: 0; border-top: 1px dashed rgba(94, 234, 212, 0.45); pointer-events: none; }
.ev-now-mark { position: absolute; top: -1px; height: 2px; background: #5eead4; box-shadow: 0 0 12px rgba(94, 234, 212, 0.8); }
.ev-now-mark::before { content: ''; position: absolute; left: -5px; top: -4px; width: 10px; height: 10px; background: #5eead4; box-shadow: 0 0 10px #5eead4; }
.ev-now-mark b { position: absolute; right: 4px; top: -20px; padding: 1px 5px; font-family: var(--font-mono); font-size: 0.64rem; font-weight: 600; color: #042f2e; background: #5eead4; }
.ev-cal-note { margin: 0; padding: 0.8rem 1.25rem; font-size: 0.8rem; color: var(--faint); border-top: 1px solid var(--line); }

/* ---------- Etkinlik kartları ---------- */
.ev-filter { display: flex; justify-content: center; margin-bottom: 1.8rem; }
.ev-tab-n { margin-left: 0.3rem; padding: 0.05rem 0.4rem; border-radius: 5px; font-family: var(--font-mono); font-size: 0.7rem; background: rgba(255, 255, 255, 0.08); }
.tab.is-active .ev-tab-n { background: rgba(42, 18, 4, 0.18); }
.ev-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.ev-card {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 20px;
    background: var(--glass-strong);
    border: 1px solid var(--line);
    scroll-margin-top: 110px;
    transition: transform 0.35s var(--ease), border-color 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.ev-card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--c) 45%, transparent); box-shadow: 0 26px 60px rgba(0, 0, 0, 0.45), 0 0 40px color-mix(in srgb, var(--c) 14%, transparent); }
.ev-card.is-target { border-color: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 30%, transparent), 0 26px 60px rgba(0, 0, 0, 0.45); }
.ev-card-art {
    position: relative;
    padding: 1.4rem 1.6rem 0;
    border-bottom: 1px solid var(--line);
    background:
        linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px) 0 0 / 14px 14px,
        linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px) 0 0 / 14px 14px,
        radial-gradient(ellipse 70% 70% at 50% 45%, color-mix(in srgb, var(--c) 26%, transparent), transparent 72%),
        #0a1325;
}
.ev-card-art .ev-art { max-width: 300px; margin: 0 auto; transition: transform 0.5s var(--ease); }
.ev-card:hover .ev-card-art .ev-art { transform: translateY(-4px); }
.ev-card-when {
    position: absolute;
    top: 0.9rem;
    left: 0.9rem;
    padding: 0.3rem 0.55rem;
    font-family: var(--font-mono);
    font-size: 0.64rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: #fff;
    background: rgba(5, 10, 20, 0.88);
    border: 1px solid color-mix(in srgb, var(--c) 45%, transparent);
    border-radius: 6px;
}
.ev-card-body { display: flex; flex: 1; flex-direction: column; padding: 1.15rem 1.3rem 1.2rem; }
.ev-card-top { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; }
.ev-next { font-size: 0.74rem; font-weight: 600; color: var(--faint); white-space: nowrap; }
.ev-next.is-live { display: inline-flex; align-items: center; gap: 0.35rem; color: #6ee7b7; }
.ev-next.is-live::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #34d399; animation: live-pulse 2s infinite; }
.ev-next.is-soon { color: #ffd3b0; }
.ev-card-title { margin: 0.55rem 0 0; font-family: var(--font-brand); font-size: 1.4rem; font-weight: 700; letter-spacing: 0.02em; color: #fff; }
.ev-card-desc { margin: 0.5rem 0 0; font-size: 0.9rem; line-height: 1.6; color: var(--muted); }
.ev-card-desc strong { color: #fff; }
.ev-facts { display: grid; gap: 0; margin: 1rem 0 0; padding: 0; }
.ev-facts > div { display: grid; grid-template-columns: 118px minmax(0, 1fr); gap: 0.6rem; padding: 0.55rem 0; border-top: 1px solid var(--line); font-size: 0.83rem; line-height: 1.5; }
.ev-facts dt { color: var(--faint); font-weight: 600; }
.ev-facts dd { margin: 0; color: #e7eaf3; }
.ev-facts code { padding: 0.08rem 0.35rem; border-radius: 5px; font-family: var(--font-mono); font-size: 0.78rem; color: var(--c-soft); background: color-mix(in srgb, var(--c) 14%, transparent); }
.ev-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--line); }
.ev-card-facts-end { flex: 1; }
.ev-joined { display: inline-flex; align-items: center; gap: 0.55rem; font-size: 0.78rem; color: var(--faint); }
.ev-joined b { color: #fff; font-family: var(--font-mono); }
.ev-heads { display: inline-flex; }
.ev-heads img { width: 22px; height: 22px; border-radius: 5px; image-rendering: pixelated; box-shadow: 0 0 0 2px #0b1426; }
.ev-heads img + img { margin-left: -6px; }
.ev-card.is-filtered { display: none; }
.ev-card-body > .ev-facts { margin-bottom: 1rem; }

/* ---------- Kazananlar ---------- */
.ev-hall { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 1.25rem; max-width: 1140px; margin: 0 auto; }
.ev-podium { position: relative; display: flex; flex-direction: column; overflow: hidden; padding: 1.3rem 1.4rem 1.2rem; border-radius: 22px; background: var(--glass-strong); border: 1px solid rgba(244, 114, 182, 0.3); }
.ev-podium::before {
    content: '';
    position: absolute;
    left: -10%;
    right: -10%;
    bottom: 0;
    height: 170px;
    background-image: linear-gradient(rgba(255, 176, 122, 0.14) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 176, 122, 0.14) 1px, transparent 1px);
    background-size: 26px 26px;
    transform: perspective(360px) rotateX(60deg);
    transform-origin: bottom;
    -webkit-mask-image: linear-gradient(to top, #000 10%, transparent);
    mask-image: linear-gradient(to top, #000 10%, transparent);
    pointer-events: none;
}
.ev-podium::after { content: ''; position: absolute; left: 50%; top: 30%; width: 70%; height: 60%; transform: translateX(-50%); background: radial-gradient(ellipse, rgba(255, 138, 61, 0.28), transparent 70%); pointer-events: none; }
.ev-podium-head { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem; }
.ev-podium-date { font-size: 0.78rem; color: var(--faint); }
.ev-stage { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, 1fr); align-items: end; gap: 0.6rem; margin-top: 1.4rem; }
.ev-step { display: flex; flex-direction: column; align-items: center; text-align: center; }
.ev-body-skin { position: relative; z-index: 1; height: 150px; width: auto; margin-bottom: -6px; filter: drop-shadow(0 14px 16px rgba(0, 0, 0, 0.55)); }
.ev-skin-alt { filter: hue-rotate(185deg) saturate(0.85) drop-shadow(0 14px 16px rgba(0, 0, 0, 0.55)); }
.ev-step--1 .ev-body-skin { height: 190px; filter: drop-shadow(0 14px 16px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 26px rgba(255, 138, 61, 0.45)); animation: skin-float 5s ease-in-out infinite; }
.ev-crown { width: 34px; margin-bottom: 0.3rem; animation: ev-bob 3s ease-in-out infinite; }
.ev-crown svg { display: block; width: 100%; }
.ev-block {
    position: relative;
    isolation: isolate;
    width: 100%;
    display: grid;
    place-items: center;
    background: linear-gradient(180deg, rgba(255, 211, 176, 0.7), rgba(221, 99, 32, 0.5));
    clip-path: var(--px-lg);
}
.ev-block::before { content: ''; position: absolute; inset: 2px; z-index: -1; clip-path: var(--px-lg); background: linear-gradient(180deg, #1a2744, #0b1426); }
.ev-step--1 .ev-block { height: 92px; }
.ev-step--2 .ev-block { height: 66px; }
.ev-step--3 .ev-block { height: 48px; }
.ev-step--1 .ev-block::before { background: linear-gradient(180deg, #3a1d0c, #1a0e07); }
.ev-rank { font-family: var(--font-brand); font-size: 1.8rem; font-weight: 700; color: #ffd3b0; text-shadow: 0 0 16px rgba(255, 138, 61, 0.6); }
.ev-step--1 .ev-rank { font-size: 2.4rem; color: #ffb07a; }
.ev-winner { margin-top: 0.7rem; }
.ev-winner b { display: block; font-size: 0.95rem; color: #fff; }
.ev-winner small { display: block; margin-top: 0.2rem; font-size: 0.74rem; line-height: 1.4; color: #ffd3b0; }
.ev-podium-link { position: relative; z-index: 1; align-self: center; margin-top: 1.2rem; color: #ffb07a; }

.ev-wins { display: grid; gap: 0.75rem; margin: 0; padding: 0; list-style: none; }
.ev-win { position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; gap: 1rem; padding: 1rem 1.1rem; overflow: hidden; border-radius: 18px; background: var(--glass-strong); border: 1px solid var(--line); transition: border-color 0.3s var(--ease), transform 0.3s var(--ease); }
.ev-win::before { content: ''; position: absolute; left: 0; top: 18%; bottom: 18%; width: 3px; background: var(--c); box-shadow: 0 0 12px var(--c); }
.ev-win:hover { transform: translateX(3px); border-color: color-mix(in srgb, var(--c) 40%, transparent); }
.ev-win-head { width: 64px; height: 64px; object-fit: contain; filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.5)); }
.ev-win-body { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.ev-win-ev { font-size: 0.66rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-soft); }
.ev-win-name { font-size: 1.02rem; color: #fff; }
.ev-win-what { font-size: 0.82rem; line-height: 1.45; color: var(--muted); }
.ev-prize {
    position: relative;
    isolation: isolate;
    max-width: 150px;
    padding: 0.45rem 0.7rem;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
    color: #ffd3b0;
    background: rgba(255, 138, 61, 0.45);
    clip-path: var(--px-sm);
}
.ev-prize::before { content: ''; position: absolute; inset: 1px; z-index: -1; clip-path: var(--px-sm); background: #1a1410; }

/* ---------- Discord bildirimi ---------- */
.ev-discord {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: 2.5rem;
    max-width: 1140px;
    margin: 1rem auto 2rem;
    padding: 3rem 3rem;
    background: linear-gradient(135deg, rgba(120, 132, 255, 0.55), rgba(255, 138, 61, 0.45));
    clip-path: var(--px-lg);
}
.ev-discord::before {
    content: '';
    position: absolute;
    inset: 1.5px;
    z-index: -1;
    clip-path: var(--px-lg);
    background:
        radial-gradient(ellipse 50% 90% at 100% 50%, rgba(88, 101, 242, 0.28), transparent 70%),
        radial-gradient(ellipse 50% 70% at 0% 100%, rgba(255, 138, 61, 0.18), transparent 70%),
        #0a1224;
}
.ev-dc-copy h2 { margin: 0.8rem 0 0; font-family: var(--font-brand); font-size: clamp(1.7rem, 3.2vw, 2.4rem); font-weight: 700; line-height: 1.15; color: #fff; }
.ev-dc-copy p { max-width: 460px; margin: 0.9rem 0 0; font-size: 0.98rem; line-height: 1.65; color: var(--muted); }
.ev-dc-copy p b { color: #fff; }
.ev-dc-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 1.2rem; margin-top: 1.6rem; }
.ev-dc-rules { font-size: 0.88rem; font-weight: 600; color: #ffd3b0; text-decoration: none; }
.ev-dc-rules span { display: inline-block; transition: transform 0.2s var(--ease); }
.ev-dc-rules:hover span { transform: translateX(3px); }
.ev-dc-mock { padding: 1rem 1.1rem 1.1rem; border-radius: 16px; background: #1e1f24; border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 26px 60px rgba(0, 0, 0, 0.5); transform: rotate(1.5deg); }
.ev-dc-channel { display: flex; align-items: center; gap: 0.35rem; padding-bottom: 0.75rem; margin-bottom: 0.85rem; border-bottom: 1px solid rgba(255, 255, 255, 0.07); font-size: 0.86rem; font-weight: 700; color: #f2f3f5; }
.ev-dc-channel span { font-size: 1.15rem; color: #80848e; }
.ev-dc-msg { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 0.75rem; }
.ev-dc-msg + .ev-dc-msg { margin-top: 0.9rem; }
.ev-dc-avatar { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle at 50% 30%, #1d2a48, #070d19 72%); box-shadow: 0 0 0 1px rgba(255, 176, 122, 0.6); }
.ev-dc-avatar svg { width: 24px; height: 24px; }
.ev-dc-msg > img { width: 36px; height: 36px; border-radius: 50%; image-rendering: pixelated; }
.ev-dc-name { display: flex; align-items: center; gap: 0.4rem; font-size: 0.86rem; }
.ev-dc-name b { color: #ffb07a; }
.ev-dc-msg--small .ev-dc-name b { color: #f2f3f5; }
.ev-dc-bot { padding: 0 0.28rem; border-radius: 3px; font-size: 0.56rem; font-weight: 700; color: #fff; background: #5865f2; }
.ev-dc-name small { font-size: 0.7rem; color: #949ba4; }
.ev-dc-content p { margin: 0.2rem 0 0; font-size: 0.86rem; color: #dbdee1; }
.ev-dc-mention { padding: 0 0.2rem; border-radius: 3px; color: #c9cdfb; background: rgba(88, 101, 242, 0.3); }
.ev-dc-embed { display: flex; flex-direction: column; gap: 0.3rem; margin-top: 0.5rem; padding: 0.7rem 0.85rem; border-radius: 4px; border-left: 4px solid #ff8a3d; background: #2b2d31; font-size: 0.82rem; color: #dbdee1; }
.ev-dc-embed b { color: #fff; }
.ev-dc-embed code { padding: 0.05rem 0.3rem; border-radius: 3px; font-family: var(--font-mono); font-size: 0.76rem; background: #1e1f22; }
.ev-dc-fields { display: flex; gap: 1.4rem; margin-top: 0.2rem; }
.ev-dc-fields i { display: block; font-style: normal; font-size: 0.7rem; font-weight: 700; color: #b5bac1; }
.ev-dc-reacts { display: flex; gap: 0.35rem; margin-top: 0.45rem; }
.ev-dc-reacts span { padding: 0.12rem 0.45rem; border-radius: 6px; font-size: 0.74rem; color: #dbdee1; background: rgba(88, 101, 242, 0.2); border: 1px solid rgba(88, 101, 242, 0.5); }

/* ---------- Bildirim (toast) ---------- */
.ev-toast {
    position: fixed;
    left: 50%;
    bottom: 1.6rem;
    z-index: 80;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    max-width: min(460px, calc(100vw - 2rem));
    padding: 0.8rem 1.1rem 0.8rem 0.8rem;
    font-size: 0.88rem;
    line-height: 1.45;
    color: #fff;
    background: rgba(9, 15, 29, 0.97);
    border: 1px solid rgba(255, 176, 122, 0.45);
    border-radius: 14px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6), 0 0 30px rgba(255, 138, 61, 0.18);
    transform: translate(-50%, 20px);
    opacity: 0;
    transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
.ev-toast.is-shown { transform: translate(-50%, 0); opacity: 1; }
.ev-toast-ico { width: 34px; height: 34px; flex-shrink: 0; display: grid; place-items: center; color: #2a1204; background: linear-gradient(180deg, #ffb87e, #ff8a3d); clip-path: var(--px-sm); }
.ev-toast-ico svg { width: 17px; height: 17px; }
.ev-toast.is-off .ev-toast-ico { color: #ffd3b0; background: #1c2742; }

/* ---------- Duyarlı ---------- */
@media (max-width: 1100px) {
    .ev-spot { grid-template-columns: 240px minmax(0, 1fr); }
    .ev-spot-count { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'label actions' 'clock actions' 'prog actions'; align-items: center; column-gap: 2rem; row-gap: 0.7rem; }
    .ev-spot-label { grid-area: label; }
    .ev-clock { grid-area: clock; max-width: 420px; }
    .ev-spot-prog { grid-area: prog; }
    .ev-spot-actions { grid-area: actions; flex-direction: column; }
    .ev-spot-actions .play-btn { flex: none; }
}
@media (max-width: 1000px) {
    .ev-cal { --h: 70px; }
    .ev-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ev-hall { grid-template-columns: 1fr; }
    .ev-discord { grid-template-columns: 1fr; padding: 2.4rem 2rem; }
    .ev-dc-mock { max-width: 520px; }
    .ev-blk b { font-size: 0.72rem; }
}
@media (max-width: 760px) {
    .ev-spot { grid-template-columns: 1fr; }
    .ev-spot-art { border-right: 0; border-bottom: 1px solid var(--line); padding: 1.2rem 1rem 0.6rem; }
    .ev-spot-art .ev-art { max-width: 220px; }
    .ev-spot-count { display: flex; }
    .ev-spot-actions { flex-direction: row; }
    .ev-stats { grid-template-columns: repeat(2, 1fr); }
    .ev-stats li:nth-child(3) { border-left: 0; }
    .ev-stats li:nth-child(n + 3) { border-top: 1px solid var(--line); }

    /* Takvim → gün sekmeli liste */
    .ev-daytabs { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.3rem; padding: 0.7rem 0.7rem 0; }
    .ev-daytab { display: flex; flex-direction: column; align-items: center; gap: 0.1rem; padding: 0.5rem 0; border: 1px solid var(--line); border-radius: 10px; background: rgba(255, 255, 255, 0.03); color: var(--muted); font: inherit; cursor: pointer; }
    .ev-daytab b { font-size: 0.74rem; font-weight: 700; }
    .ev-daytab small { font-family: var(--font-mono); font-size: 0.7rem; color: var(--faint); }
    .ev-daytab.is-today { border-color: rgba(255, 138, 61, 0.5); }
    .ev-daytab.is-today small { color: #ffb07a; }
    .ev-daytab[aria-selected='true'] { color: #2a1204; background: linear-gradient(180deg, #ffb87e, #ff8a3d); border-color: #ff8a3d; }
    .ev-daytab[aria-selected='true'] small { color: #4a1f06; }
    .ev-grid { display: block; }
    .ev-corner, .ev-dh, .ev-times, .ev-now { display: none !important; }
    .ev-body { display: block; height: auto; padding: 0.7rem; background: none; }
    .ev-col { display: none; border: 0; background: none !important; box-shadow: none !important; }
    .ev-col.is-shown { display: grid; gap: 0.5rem; }
    .ev-blk, .ev-blk.ev-band, .ev-blk.ev-d30, .ev-blk.ev-d45, .ev-blk.ev-d60, .ev-blk.ev-d90 {
        position: relative;
        top: auto;
        left: auto;
        right: auto;
        height: auto;
        margin: 0;
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-areas: 'name time' 'extra time';
        align-items: center;
        gap: 0.15rem 0.8rem;
        padding: 0.85rem 0.95rem;
        border-radius: 12px;
    }
    .ev-blk b { grid-area: name; font-size: 0.95rem; white-space: normal; }
    .ev-blk small, .ev-blk.ev-d30 small, .ev-blk.ev-d45 small { grid-area: time; display: block; font-size: 0.78rem; text-align: right; }
    .ev-blk em { grid-area: extra; margin: 0; }
    .ev-blk.ev-band { border: 1px dashed rgba(251, 191, 36, 0.45); }
    .ev-blk.ev-band b { font-size: 0.82rem; }
    .ev-blk.is-live::after { position: static; grid-area: extra; justify-self: start; }
    .ev-cal-note { font-size: 0.76rem; }
}
@media (max-width: 640px) {
    .ev-spot { margin-top: 2rem; }
    .ev-spot-banner { padding: 0.65rem 1rem; font-size: 0.64rem; letter-spacing: 0.14em; }
    .ev-spot-body, .ev-spot-count { padding: 1.2rem 1.1rem; }
    .ev-seg b { font-size: 1.8rem; }
    .ev-colon { font-size: 1.4rem; }
    .ev-spot-actions { flex-direction: column; }
    .ev-spot-actions .play-btn, .ev-bell--spot { width: 100%; flex: none; }
    .ev-cal-bar { padding: 0.8rem 0.9rem; }
    .ev-cal-week b { font-size: 0.84rem; }
    .ev-legend { width: 100%; }
    .ev-filter .tabs { width: 100%; display: grid; grid-template-columns: 1fr 1fr; }
    .ev-cards { grid-template-columns: 1fr; }
    .ev-facts > div { grid-template-columns: 104px minmax(0, 1fr); }
    .ev-podium { padding: 1.1rem 0.9rem 1rem; }
    .ev-body-skin { height: 104px; }
    .ev-skin-alt { filter: hue-rotate(185deg) saturate(0.85) drop-shadow(0 14px 16px rgba(0, 0, 0, 0.55)); }
.ev-step--1 .ev-body-skin { height: 136px; }
    .ev-step--1 .ev-block { height: 70px; }
    .ev-step--2 .ev-block { height: 50px; }
    .ev-step--3 .ev-block { height: 36px; }
    .ev-rank { font-size: 1.3rem; }
    .ev-step--1 .ev-rank { font-size: 1.7rem; }
    .ev-winner b { font-size: 0.84rem; }
    .ev-winner small { font-size: 0.68rem; }
    .ev-win { grid-template-columns: 52px minmax(0, 1fr); gap: 0.8rem; padding: 0.9rem; }
    .ev-win-head { width: 52px; height: 52px; }
    .ev-prize { grid-column: 2; justify-self: start; max-width: none; }
    .ev-discord { margin-inline: 1rem; padding: 2rem 1.25rem; gap: 1.8rem; }
    .ev-dc-mock { transform: none; }
    .ev-dc-actions .btn-discord { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .ev-spot, .ev-spot.is-live, .ev-spot.is-live .ev-spot-banner, .ev-spot-pulse, .ev-spot-pulse::after, .ev-spot-art .ev-art,
    .ev-colon, .ev-blk.is-live, .ev-crown, .ev-step--1 .ev-body-skin, .ev-bell.is-ringing svg, .ev-next.is-live::before { animation: none !important; }
    .ev-toast { transition: none; }
}

/* ===== hesap.css ===== */
/* =========================================================
   Hesabım (ac-) — giriş yapılmış oyuncu paneli
   ========================================================= */
.ac-page { padding-bottom: 2rem; }

/* Oturum yoksa kapı ekranı */
.ac-gate { display: none; place-items: center; min-height: 72vh; padding: 8rem 1.5rem 4rem; }
html:not(.is-authed) .ac-gate { display: grid; }
html:not(.is-authed) .ac-app { display: none; }
.ac-gate-card { max-width: 470px; padding: 2.4rem 2rem; text-align: center; border-radius: 20px; background: var(--glass-strong); border: 1px solid var(--line); }
.ac-gate-card .feat-ico { margin: 0 auto 1.1rem; }
.ac-gate-card h1 { margin: 0 0 0.6rem; font-family: var(--font-brand); font-size: 1.7rem; color: #fff; }
.ac-gate-card p { margin: 0 0 1.5rem; line-height: 1.6; color: var(--muted); }
.ac-gate-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 0.6rem; }

/* Karşılama */
.ac-hero { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 1.5rem 2rem; max-width: 1240px; margin: 0 auto; padding: 6.5rem 1.5rem 2.2rem; }
.ac-hello { display: flex; align-items: center; gap: 1.2rem; min-width: 0; }
.ac-hello-av { position: relative; flex-shrink: 0; width: 86px; height: 86px; padding: 4px; background: linear-gradient(180deg, #ffb87e, #dd6320); clip-path: var(--px-lg); }
.ac-hello-av img { display: block; width: 100%; height: 100%; image-rendering: pixelated; clip-path: var(--px-lg); }
.ac-hello-av i { position: absolute; right: 4px; bottom: 4px; width: 14px; height: 14px; background: #34d399; box-shadow: 0 0 0 3px #0a1222; }
.ac-hello .breadcrumb { justify-content: flex-start; margin-bottom: 0.55rem; }
.ac-title { margin: 0; font-family: var(--font-brand); font-size: clamp(1.8rem, 3.6vw, 2.6rem); line-height: 1.1; color: #fff; }
.ac-title span { color: #ffb07a; }
.ac-sub { margin: 0.45rem 0 0; font-size: 0.86rem; color: var(--muted); }
.ac-quick { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.ac-q { display: flex; align-items: center; gap: 0.65rem; padding: 0.7rem 1rem; border-radius: 12px; font-size: 0.84rem; font-weight: 600; color: #fff; text-decoration: none; background: var(--glass-strong); border: 1px solid var(--line); transition: border-color 0.2s var(--ease), transform 0.2s var(--ease); }
.ac-q:hover { transform: translateY(-2px); border-color: rgba(255, 138, 61, 0.5); }
.ac-q svg { width: 18px; height: 18px; flex-shrink: 0; color: #ffb07a; }
.ac-q small { display: block; font-size: 0.7rem; font-weight: 500; color: var(--faint); }

/* Kenar: oyuncu kartı + sekmeler */
.ac-side { display: grid; gap: 1rem; }
.ac-me { padding: 1.1rem; border-radius: 16px; background: var(--glass-strong); border: 1px solid var(--line); }
.ac-me-top { display: flex; align-items: center; gap: 0.75rem; }
.ac-me-top img { width: 42px; height: 42px; border-radius: 9px; image-rendering: pixelated; }
.ac-me-top b { display: block; color: #fff; }
.ac-me-top small { display: flex; align-items: center; gap: 0.4rem; font-size: 0.75rem; color: var(--muted); }
.ac-me .progress { margin-top: 0.95rem; }
.ac-me-xp { display: flex; justify-content: space-between; margin-top: 0.4rem; font-size: 0.72rem; color: var(--faint); }
.ac-nav { display: grid; gap: 0.2rem; padding: 0.45rem; border-radius: 16px; background: var(--glass-strong); border: 1px solid var(--line); }
.ac-tab { position: relative; display: flex; align-items: center; gap: 0.7rem; width: 100%; height: 44px; padding: 0 0.8rem; border: 0; border-radius: 10px; background: none; color: var(--muted); font: inherit; font-size: 0.88rem; font-weight: 600; text-align: left; cursor: pointer; transition: color 0.2s, background 0.2s; }
.ac-tab svg { width: 18px; height: 18px; flex-shrink: 0; }
.ac-tab:hover { color: #fff; background: rgba(255, 255, 255, 0.04); }
.ac-tab.is-active { color: #fff; background: linear-gradient(90deg, rgba(255, 138, 61, 0.2), rgba(255, 138, 61, 0.03)); }
.ac-tab.is-active::before { content: ''; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 2px; background: #ff8a3d; }
.ac-tab.is-active svg { color: #ffb07a; }
.ac-tab small { min-width: 22px; margin-left: auto; padding: 0.05rem 0.4rem; border-radius: 6px; font-family: var(--font-mono); font-size: 0.7rem; text-align: center; color: var(--faint); background: rgba(255, 255, 255, 0.05); }
.ac-dot { width: 8px; height: 8px; margin-left: auto; border-radius: 50%; background: #fbbf24; box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.18); }
.ac-logout { display: flex; align-items: center; justify-content: center; gap: 0.5rem; height: 42px; border: 1px solid rgba(248, 113, 113, 0.3); border-radius: 12px; background: rgba(248, 113, 113, 0.06); color: #fca5a5; font: inherit; font-size: 0.84rem; font-weight: 600; cursor: pointer; }
.ac-logout svg { width: 16px; height: 16px; }

/* Bölmeler */
.ac-main { min-width: 0; }
.ac-pane { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
.ac-pane-head { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 1rem; }
.ac-pane-head h2 { margin: 0; font-family: var(--font-brand); font-size: 1.5rem; color: #fff; }
.ac-pane-head p { margin: 0.3rem 0 0; font-size: 0.86rem; color: var(--muted); }
.ac-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.9rem; }
.ac-stat { position: relative; display: flex; flex-direction: column; gap: 0.3rem; overflow: hidden; padding: 1.1rem; border-radius: 16px; background: var(--glass-strong); border: 1px solid var(--line); }
.ac-stat-k { font-size: 0.66rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); }
.ac-stat b { display: flex; align-items: center; gap: 0.45rem; font-family: var(--font-mono); font-size: 1.55rem; font-weight: 600; line-height: 1.15; color: #fff; }
.ac-stat b svg { width: 22px; height: 22px; }
.ac-stat small { font-size: 0.78rem; color: var(--muted); }
.ac-stat a { margin-top: auto; padding-top: 0.45rem; font-size: 0.8rem; font-weight: 600; color: #ffb07a; text-decoration: none; }
.ac-stat a:hover { color: #ffd3b0; }
.ac-stat .progress { margin-top: 0.35rem; }
.ac-stat--hi { border-color: rgba(255, 138, 61, 0.35); background: radial-gradient(ellipse at 100% 0, rgba(255, 138, 61, 0.18), transparent 60%), var(--glass-strong); }
.ac-row { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 1.25rem; }
.ac-row > .panel { display: flex; flex-direction: column; }
.panel-title small { margin-left: auto; font-size: 0.76rem; font-weight: 500; color: var(--faint); }

/* Günlük ödül serisi */
.ac-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.5rem; margin: 0.3rem 0 1.2rem; padding: 0; list-style: none; }
.ac-day { position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.35rem; padding: 0.7rem 0.2rem 0.6rem; text-align: center; border-radius: 12px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--line); }
.ac-day i { font-size: 0.6rem; font-style: normal; font-weight: 800; letter-spacing: 0.1em; color: var(--faint); }
.ac-day svg { width: 30px; height: 30px; }
.ac-day small { font-size: 0.66rem; font-weight: 600; line-height: 1.2; color: var(--muted); }
.ac-day.is-done { background: rgba(52, 211, 153, 0.06); border-color: rgba(52, 211, 153, 0.3); }
.ac-day.is-done svg { opacity: 0.45; }
.ac-day.is-done i { color: #6ee7b7; }
.ac-day.is-done::after { content: '✓'; position: absolute; top: 44%; left: 50%; transform: translate(-50%, -50%); font-size: 1.1rem; font-weight: 800; color: #6ee7b7; }
.ac-day.is-today { background: radial-gradient(circle at 50% 30%, rgba(255, 138, 61, 0.28), transparent 70%), #0f1a30; border-color: #ff8a3d; animation: ac-glow 2.2s ease-in-out infinite; }
.ac-day.is-today i { color: #ffb07a; }
.ac-day.is-today small { color: #fff; }
.ac-day.is-locked { opacity: 0.6; }
.ac-day--big { border-style: dashed; border-color: rgba(192, 132, 252, 0.45); }
@keyframes ac-glow { 0%, 100% { box-shadow: 0 0 0 3px rgba(255, 138, 61, 0.14); } 50% { box-shadow: 0 0 0 5px rgba(255, 138, 61, 0.06), 0 0 26px rgba(255, 138, 61, 0.35); } }
.ac-claim-row { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; margin-top: auto; }
.ac-claim-row p { margin: 0; font-size: 0.84rem; color: var(--muted); }
.ac-claim-row b { color: #fff; }
.ac-claim-row .btn-gold { height: 42px; }
.btn-gold[disabled] { filter: grayscale(0.7); opacity: 0.7; cursor: default; }

/* Güvenlik skoru */
.ac-score { display: flex; align-items: center; gap: 1.3rem; }
.ac-ring { --v: 75; flex-shrink: 0; width: 96px; height: 96px; display: grid; place-items: center; border-radius: 50%; background: conic-gradient(#ff8a3d calc(var(--v) * 1%), rgba(255, 255, 255, 0.08) 0); }
.ac-ring span { width: 78px; height: 78px; display: grid; place-items: center; align-content: center; border-radius: 50%; font-family: var(--font-mono); font-size: 1.35rem; font-weight: 600; line-height: 1; color: #fff; background: #0a1222; }
.ac-ring small { font-family: 'Inter', sans-serif; font-size: 0.56rem; font-weight: 700; letter-spacing: 0.12em; color: var(--faint); margin-top: 0.2rem; }
.ac-checks { display: grid; gap: 0.5rem; margin: 0; padding: 0; list-style: none; font-size: 0.82rem; color: var(--muted); }
.ac-checks li { display: flex; align-items: center; gap: 0.5rem; }
.ac-checks svg { width: 16px; height: 16px; flex-shrink: 0; color: #34d399; }
.ac-checks .is-miss { color: #fde68a; }
.ac-checks .is-miss svg { color: #fbbf24; }
.ac-score-foot { margin-top: auto; padding-top: 1.1rem; }
.ac-score-foot .btn-ghost-px { width: 100%; height: 40px; }

/* Son hareketler */
.ac-feed { margin: 0; padding: 0; list-style: none; }
.ac-feed li { display: flex; align-items: center; gap: 0.9rem; padding: 0.75rem 0; }
.ac-feed li + li { border-top: 1px solid var(--line); }
.ac-feed .feat-ico { flex-shrink: 0; width: 36px; height: 36px; }
.ac-feed-t { flex: 1; min-width: 0; }
.ac-feed b { display: block; font-size: 0.88rem; font-weight: 600; color: #fff; }
.ac-feed small { font-size: 0.76rem; color: var(--faint); }
.ac-feed time { font-size: 0.76rem; white-space: nowrap; color: var(--muted); }

/* Siparişler + kredi tabloları */
.ac-item { display: flex; align-items: center; gap: 0.7rem; }
.ac-item svg { flex-shrink: 0; width: 32px; height: 32px; padding: 6px; border-radius: 8px; color: #ffb07a; background: rgba(255, 138, 61, 0.1); }
.ac-item b { display: block; font-size: 0.88rem; color: #fff; }
.ac-item small { font-size: 0.74rem; color: var(--faint); }
.ac-table .data-table td { vertical-align: middle; }
.ac-oid { font-family: var(--font-mono); font-size: 0.8rem; white-space: nowrap; color: var(--muted); }
.ac-mini-btn { height: 30px; padding: 0 0.7rem; border: 1px solid var(--line); border-radius: 8px; background: rgba(255, 255, 255, 0.03); color: var(--muted); font: inherit; font-size: 0.76rem; font-weight: 600; white-space: nowrap; cursor: pointer; transition: color 0.2s, border-color 0.2s; }
.ac-mini-btn:hover { color: #fff; border-color: var(--line-strong); }
.ac-mini-btn--red { color: #fca5a5; border-color: rgba(248, 113, 113, 0.3); }
.ac-amt { font-family: var(--font-mono); font-weight: 600; white-space: nowrap; }
.ac-amt.is-in { color: #6ee7b7; }
.ac-amt.is-out { color: #fca5a5; }
.ac-table-foot { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.8rem; margin-top: 1rem; font-size: 0.8rem; color: var(--faint); }

/* Kredi grafiği */
.ac-chart { display: flex; align-items: stretch; gap: 1.2rem; height: 200px; padding: 0.6rem 0.4rem 0; background: repeating-linear-gradient(180deg, transparent 0 39px, rgba(255, 255, 255, 0.05) 39px 40px); }
.ac-bar { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 0.45rem; }
.ac-bar-pair { flex: 1; display: flex; justify-content: center; align-items: flex-end; gap: 5px; width: 100%; }
.ac-bar-pair i { width: min(24px, 42%); height: var(--h); border-radius: 4px 4px 0 0; }
.ac-bar-pair .in { background: repeating-linear-gradient(180deg, #ffb07a 0 6px, #ff8a3d 6px 8px); }
.ac-bar-pair .out { background: repeating-linear-gradient(180deg, #5eead4 0 6px, #2dd4bf 6px 8px); opacity: 0.85; }
.ac-bar small { font-size: 0.72rem; font-weight: 600; color: var(--faint); }
.ac-bar.is-now small { color: #ffb07a; }
.ac-legend { display: flex; gap: 1rem; font-size: 0.76rem; color: var(--muted); }
.ac-legend span::before { content: ''; display: inline-block; width: 10px; height: 10px; margin-right: 0.4rem; border-radius: 3px; vertical-align: -1px; background: #ff8a3d; }
.ac-legend span + span::before { background: #2dd4bf; }

/* Güvenlik */
.ac-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 1.25rem; }
.ac-form { display: grid; gap: 0.9rem; }
.ac-form .btn-gold { height: 44px; justify-self: start; }
.ac-state { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.9rem 1rem; border-radius: 12px; background: rgba(52, 211, 153, 0.06); border: 1px solid rgba(52, 211, 153, 0.28); }
.ac-state b { display: block; font-size: 0.9rem; color: #fff; }
.ac-state small { font-size: 0.78rem; color: var(--muted); }
.ac-state.is-off { background: rgba(251, 191, 36, 0.06); border-color: rgba(251, 191, 36, 0.35); }
.ac-codes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.45rem; margin-top: 1rem; padding: 0.9rem; border-radius: 12px; font-family: var(--font-mono); font-size: 0.84rem; text-align: center; color: #ffd3b0; background: #070d19; border: 1px dashed var(--line-strong); filter: blur(5px); user-select: none; transition: filter 0.3s var(--ease); }
.ac-codes.is-shown { filter: none; user-select: text; }
.ac-btns { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.8rem; }
.ac-note { margin: 0.8rem 0 0; font-size: 0.78rem; line-height: 1.5; color: var(--faint); }
.ac-mail { display: flex; align-items: center; gap: 0.9rem; }
.ac-mail .feat-ico { flex-shrink: 0; }
.ac-mail div { flex: 1; min-width: 0; }
.ac-mail b { display: block; font-family: var(--font-mono); font-size: 0.9rem; color: #fff; }
.ac-mail small { font-size: 0.76rem; color: var(--faint); }
.ac-sessions { margin: 0; padding: 0; list-style: none; }
.ac-sess { display: flex; align-items: center; gap: 0.9rem; padding: 0.85rem 0; transition: opacity 0.3s var(--ease), transform 0.3s var(--ease); }
.ac-sess + .ac-sess { border-top: 1px solid var(--line); }
.ac-sess .feat-ico { flex-shrink: 0; width: 40px; height: 40px; }
.ac-sess-info { flex: 1; min-width: 0; }
.ac-sess b { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; font-size: 0.9rem; color: #fff; }
.ac-sess small { display: block; font-size: 0.76rem; color: var(--faint); }
.ac-sess.is-gone { opacity: 0; transform: translateX(24px); }
.ac-sess-foot { display: flex; justify-content: flex-end; margin-top: 0.6rem; }

/* Anahtar (switch) */
.ac-sw { position: relative; display: inline-block; flex-shrink: 0; width: 40px; height: 22px; vertical-align: middle; }
.ac-sw input { position: absolute; inset: 0; z-index: 1; margin: 0; opacity: 0; cursor: pointer; }
.ac-sw span { position: absolute; inset: 0; border-radius: 999px; background: rgba(255, 255, 255, 0.1); border: 1px solid var(--line); transition: background 0.2s, border-color 0.2s; }
.ac-sw span::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #9aa6bd; transition: transform 0.2s var(--ease), background 0.2s; }
.ac-sw input:checked + span { background: #ff8a3d; border-color: #ff8a3d; }
.ac-sw input:checked + span::after { transform: translateX(18px); background: #fff; }
.ac-sw input:disabled { cursor: not-allowed; }
.ac-sw input:disabled + span { opacity: 0.5; }
.ac-sw input:focus-visible + span { outline: 2px solid #ffb07a; outline-offset: 2px; }

/* Bildirimler */
.ac-notif .data-table th:not(:first-child), .ac-notif .data-table td:not(:first-child) { width: 110px; text-align: center; }
.ac-notif td b { display: block; font-size: 0.88rem; color: #fff; }
.ac-notif td small { font-size: 0.76rem; color: var(--faint); }
.ac-save-row { display: flex; justify-content: flex-end; align-items: center; gap: 1rem; margin-top: 1.1rem; }
.ac-save-row .btn-gold { height: 42px; }
.ac-saved { font-size: 0.82rem; color: #6ee7b7; opacity: 0; transition: opacity 0.3s; }
.ac-saved.is-on { opacity: 1; }
.ac-discord { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem; }
.ac-discord .feat-ico { flex-shrink: 0; color: #a5b4fc; background: rgba(88, 101, 242, 0.14); border-color: rgba(88, 101, 242, 0.35); }
.ac-discord div { flex: 1; min-width: 180px; }
.ac-discord b { display: block; color: #fff; }
.ac-discord small { font-size: 0.78rem; color: var(--muted); }

/* ---------- Duyarlı ---------- */
@media (max-width: 1000px) {
    .ac-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ac-row, .ac-grid2 { grid-template-columns: minmax(0, 1fr); }
    .ac-side.side-sticky { position: static; }
    .ac-me, .ac-logout { display: none; }
    .ac-nav { display: flex; overflow-x: auto; scrollbar-width: none; }
    .ac-nav::-webkit-scrollbar { display: none; }
    .ac-tab { flex-shrink: 0; width: auto; white-space: nowrap; }
    .ac-tab.is-active::before { top: auto; left: 12px; right: 12px; bottom: 4px; width: auto; height: 2px; }
}
@media (max-width: 640px) {
    .ac-hero { padding: 5.8rem 1rem 1.6rem; }
    .ac-hello { gap: 0.9rem; }
    .ac-hello-av { width: 64px; height: 64px; }
    .ac-quick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
    .ac-q { flex-direction: column; gap: 0.35rem; padding: 0.75rem 0.4rem; font-size: 0.76rem; text-align: center; }
    .ac-q small { display: none; }
    .ac-stat b { font-size: 1.3rem; }
    .ac-days { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .ac-score { flex-direction: column; align-items: flex-start; }
    .ac-feed time { display: none; }
    .ac-chart { gap: 0.5rem; }
    .ac-notif .data-table th:not(:first-child), .ac-notif .data-table td:not(:first-child) { width: 58px; }
    .ac-sess { flex-wrap: wrap; }
    .ac-sess .ac-mini-btn { margin-left: calc(40px + 0.9rem); }
}
@media (prefers-reduced-motion: reduce) {
    .ac-day.is-today { animation: none; }
    .ac-sess, .ac-q, .ac-codes { transition: none; }
}

/* ---------- Gerçek hesap (API) ---------- */
.ac-empty { padding: 1.2rem 0.5rem; text-align: center; font-size: 0.86rem; color: var(--muted); list-style: none; }
.ac-inline { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.ac-2fa-setup:not(:empty) { margin-top: 1rem; }
.ac-steps { margin: 0; padding-left: 1.2rem; display: grid; gap: 0.6rem; font-size: 0.86rem; line-height: 1.55; color: var(--muted); }
.ac-steps b { color: #fff; }
.ac-key { display: block; margin: 0.5rem 0; padding: 0.6rem 0.8rem; border-radius: 10px; font-family: var(--font-mono); font-size: 0.95rem; letter-spacing: 0.06em; color: #ffd3b0; background: #070d19; border: 1px dashed var(--line-strong); word-break: break-all; user-select: all; }
.ac-qr { display: inline-block; margin: 0.6rem 0 0.2rem; padding: 10px; border-radius: 12px; background: #fff; line-height: 0; }
.ac-qr svg { display: block; width: 184px; height: 184px; }
/* E-posta doğrulama uyarısı (tüm sekmelerin üstünde) */
.ac-verify { display: flex; align-items: center; flex-wrap: wrap; gap: 0.9rem 1rem; margin-bottom: 1.25rem; padding: 1rem 1.1rem; border-radius: 16px; background: rgba(251, 191, 36, 0.07); border: 1px solid rgba(251, 191, 36, 0.4); }
.ac-verify .feat-ico { flex-shrink: 0; color: #fbbf24; }
.ac-verify div { flex: 1; min-width: 200px; }
.ac-verify b { display: block; color: #fff; }
.ac-verify small { font-size: 0.8rem; line-height: 1.5; color: var(--muted); }
/* Oyun kimliği (Minecraft adı + skin) */
.ac-kimlik { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem; }
.ac-kimlik img { flex-shrink: 0; width: 56px; height: 56px; border-radius: 10px; image-rendering: pixelated; }
.ac-kimlik dl { flex: 1; min-width: 200px; display: grid; grid-template-columns: auto 1fr; gap: 0.35rem 1rem; margin: 0; font-size: 0.86rem; }
.ac-kimlik dt { color: var(--faint); }
.ac-kimlik dd { margin: 0; font-family: var(--font-mono); color: #fff; overflow-wrap: anywhere; }
.ac-loading { color: var(--faint); }

/* ---------- Güvenlik: giriş yöntemleri, geçiş anahtarları, tanınan cihazlar, 2FA yöntemi ---------- */
.ac-methods { margin-bottom: 1.25rem; }
.ac-lead { margin: -0.3rem 0 0.4rem; font-size: 0.82rem; line-height: 1.5; color: var(--muted); }
.ac-sess-act { display: flex; flex-wrap: wrap; gap: 0.4rem; flex-shrink: 0; }
.ac-sess-warn { display: block; margin-top: 0.25rem; font-size: 0.76rem; line-height: 1.45; color: #fcd34d; }
.feat-ico.ac-ico-google { background: #131314; border-color: #3c3d3f; }
.feat-ico.ac-ico-google svg { width: 20px; height: 20px; }
.feat-ico.ac-ico-discord { color: #fff; background: #5865f2; border-color: #5865f2; }
.ac-mini-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.ac-mini-btn:focus-visible { outline: 2px solid #ffb07a; outline-offset: 2px; }
.ac-opts { display: grid; gap: 0.5rem; min-width: 0; margin: 1rem 0 0; padding: 0; border: 0; }
.ac-opts-leg { margin-bottom: 0.45rem; padding: 0; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); }
.ac-opt { display: flex; align-items: flex-start; gap: 0.7rem; padding: 0.75rem 0.9rem; border-radius: 12px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.02); cursor: pointer; transition: border-color 0.2s, background 0.2s; }
.ac-opt:hover { border-color: var(--line-strong); }
.ac-opt input { flex-shrink: 0; width: 18px; height: 18px; margin: 0.1rem 0 0; accent-color: #ff8a3d; cursor: pointer; }
.ac-opt > span { min-width: 0; }
.ac-opt b { display: flex; align-items: center; flex-wrap: wrap; gap: 0.45rem; font-size: 0.88rem; color: #fff; }
.ac-opt small { display: block; margin-top: 0.15rem; font-size: 0.77rem; line-height: 1.45; color: var(--muted); }
.ac-opt:has(input:checked) { border-color: rgba(255, 138, 61, 0.6); background: rgba(255, 138, 61, 0.07); }
.ac-opt:has(input:focus-visible) { outline: 2px solid #ffb07a; outline-offset: 2px; }
.ac-opt.is-disabled { opacity: 0.6; cursor: not-allowed; }
.ac-opt.is-disabled input { cursor: not-allowed; }
.ac-note--info { padding: 0.6rem 0.8rem; border-radius: 10px; color: var(--muted); background: rgba(94, 234, 212, 0.06); border: 1px solid rgba(94, 234, 212, 0.25); }
.ac-note--info[hidden] { display: none; }

/* Pencere: onay, ad verme, "kimliğini doğrula" (<dialog>) */
.ac-dlg { width: min(440px, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); padding: 0; border: 0; border-radius: 18px; background: transparent; color: var(--text); overflow: auto; }
.ac-dlg::backdrop { background: rgba(3, 6, 14, 0.74); backdrop-filter: blur(3px); }
.ac-dlg-card { display: grid; gap: 0.8rem; padding: 1.4rem; border-radius: 18px; background: #0e1628; border: 1px solid var(--line-strong); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55); }
.ac-dlg-title { margin: 0; font-family: var(--font-display); font-size: 1.15rem; line-height: 1.3; color: #fff; }
.ac-dlg-text { margin: 0; font-size: 0.86rem; line-height: 1.55; color: var(--muted); }
.ac-dlg-body { display: grid; gap: 0.75rem; }
.ac-dlg-body:empty { display: none; }
.ac-dlg-body .chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.ac-dlg-body .ac-btns { margin-top: 0; }
.ac-dlg .hint:empty { display: none; }
.ac-dlg-btns { margin-top: 0.2rem; }
.ac-dlg .btn-gold { height: 42px; }
.ac-dlg .btn-gold:disabled { opacity: 0.7; cursor: progress; }
/* ---------- Verilerim ve hesap silme (KVKK) ---------- */
.ac-veri { display: flex; align-items: flex-start; gap: 0.9rem; }
.ac-veri .feat-ico { flex-shrink: 0; }
.ac-veri div { flex: 1; min-width: 0; }
.ac-veri b { display: block; font-size: 0.92rem; color: #fff; }
.ac-veri small { display: block; margin-top: 0.2rem; font-size: 0.8rem; line-height: 1.5; color: var(--muted); }
.ac-sil { border-color: rgba(248, 113, 113, 0.28); background: radial-gradient(ellipse at 100% 0, rgba(239, 68, 68, 0.08), transparent 60%), var(--glass-strong); }
.ac-sil .panel-title { color: #fecaca; }
.ac-sil [hidden] { display: none !important; }
.ac-sil-list { display: grid; gap: 0.55rem; margin: 0 0 1.1rem; padding: 0; list-style: none; font-size: 0.86rem; line-height: 1.55; color: var(--muted); }
.ac-sil-list li { position: relative; padding-left: 1.2rem; }
.ac-sil-list li::before { content: ''; position: absolute; left: 0.2rem; top: 0.6em; width: 6px; height: 6px; background: #f87171; }
.ac-sil-list b { color: #fff; }
.ac-sil .check { padding: 0.8rem 0.95rem; border-radius: 12px; background: rgba(5, 10, 20, 0.6); border: 1px solid var(--line); transition: border-color 0.2s, background 0.2s; }
.ac-sil .check:has(input:checked) { color: #fff; background: rgba(239, 68, 68, 0.07); border-color: rgba(248, 113, 113, 0.5); }
.ac-sil .check input:checked { background: #f87171; border-color: #f87171; }
.ac-sil .check input:focus-visible { outline: 2px solid #fca5a5; outline-offset: 2px; }
.ac-sil-btn { display: inline-flex; align-items: center; justify-content: center; height: 42px; padding: 0 1.2rem; border: 1px solid rgba(248, 113, 113, 0.55); border-radius: 12px; background: rgba(239, 68, 68, 0.16); color: #fecaca; font: inherit; font-size: 0.88rem; font-weight: 700; cursor: pointer; transition: color 0.2s, background 0.2s, border-color 0.2s; }
.ac-sil-btn:hover:not(:disabled) { color: #fff; background: rgba(239, 68, 68, 0.28); border-color: #f87171; }
.ac-sil-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.ac-sil-btn:focus-visible { outline: 2px solid #fca5a5; outline-offset: 2px; }
.ac-state.is-danger { flex-wrap: wrap; background: rgba(239, 68, 68, 0.08); border-color: rgba(248, 113, 113, 0.4); }
.ac-state.is-danger > div { flex: 1; min-width: 200px; }
.ac-sil .ac-loading { padding: 0.4rem 0; text-align: left; }

@media (max-width: 640px) {
    /* Düğmeler metnin altına, kendi satırına: metin sütunu daralmasın */
    .ac-sess .ac-sess-act { flex-basis: calc(100% - 40px - 0.9rem); margin-left: calc(40px + 0.9rem); }
    .ac-sess .ac-sess-act .ac-mini-btn { margin-left: 0; }
    .ac-dlg-card { padding: 1.1rem; }
}

/* ===== klan.css ===== */
/* =========================================================
   Klan profili (cl-)
   ========================================================= */
.cl-page { padding-bottom: 3rem; overflow-x: clip; }

/* Kapak + kimlik */
.cl-hero { position: relative; padding-top: 7.5rem; }
.cl-cover { position: absolute; inset: 0 0 auto; height: 360px; overflow: hidden; background: radial-gradient(ellipse 60% 80% at 25% 20%, rgba(45, 212, 191, 0.28), transparent 70%), radial-gradient(ellipse 50% 70% at 85% 10%, rgba(255, 138, 61, 0.14), transparent 70%), linear-gradient(180deg, #0b2430, #050a14); }
.cl-cover::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(94, 234, 212, 0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(94, 234, 212, 0.07) 1px, transparent 1px); background-size: 24px 24px; mask-image: linear-gradient(180deg, #000 20%, transparent 95%); }
.cl-cover::after { content: ''; position: absolute; inset: auto 0 0; height: 140px; background: linear-gradient(180deg, transparent, var(--bg, #050a14)); }
.cl-id { position: relative; z-index: 1; display: grid; grid-template-columns: 170px minmax(0, 1fr) 360px; align-items: end; gap: 2rem; }
.cl-banner { position: relative; display: flex; justify-content: center; }
.cl-banner svg { width: 150px; height: 200px; transform-origin: 50% 0; filter: drop-shadow(0 18px 24px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 30px rgba(45, 212, 191, 0.35)); animation: cl-sway 5s ease-in-out infinite; }
.cl-banner::before { content: ''; position: absolute; top: -8px; left: 50%; width: 184px; height: 10px; transform: translateX(-50%); background: linear-gradient(180deg, #ffd3b0, #c46a2c); clip-path: var(--px-sm); }
@keyframes cl-sway { 50% { transform: rotate(1.6deg); } }
.cl-id-main { min-width: 0; padding-bottom: 0.3rem; }
.cl-id-main .breadcrumb { justify-content: flex-start; margin-bottom: 0.9rem; }
.cl-name-row { display: flex; align-items: center; flex-wrap: wrap; gap: 0.6rem 0.9rem; }
.cl-name { margin: 0; font-family: var(--font-brand); font-size: clamp(2.2rem, 4.6vw, 3.4rem); font-weight: 700; line-height: 1.05; color: #fff; }
.cl-tag { padding: 0.2rem 0.55rem; border-radius: 6px; font-family: var(--font-mono); font-size: 0.95rem; font-weight: 600; color: #5eead4; background: rgba(8, 14, 27, 0.85); border: 1px solid rgba(94, 234, 212, 0.4); }
.cl-motto { margin: 0.7rem 0 0; font-size: 1rem; font-style: italic; color: #c6cedd; }
.cl-meta { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; margin: 0.8rem 0 0; padding: 0; list-style: none; font-size: 0.84rem; color: var(--muted); }
.cl-meta b { color: #fff; font-weight: 600; }
.cl-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.1rem; }
.cl-actions .btn-gold, .cl-actions .btn-ghost-px { height: 42px; }
.cl-join.is-sent { color: #042f2e; background: #99f6e4; }
.cl-join.is-sent::before { background: linear-gradient(180deg, #5eead4, #2dd4bf); }
.cl-share { height: 42px; padding: 0 1rem; display: inline-flex; align-items: center; gap: 0.45rem; border: 1px solid var(--line); border-radius: 10px; background: rgba(8, 14, 27, 0.85); color: var(--muted); font: inherit; font-size: 0.82rem; font-weight: 600; cursor: pointer; }
.cl-share:hover { color: #fff; border-color: var(--line-strong); }
.cl-share svg { width: 16px; height: 16px; }
.cl-score { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
.cl-score div { padding: 0.8rem 0.95rem; border-radius: 14px; background: rgba(8, 14, 27, 0.92); border: 1px solid var(--line); }
.cl-score b { display: block; font-family: var(--font-mono); font-size: 1.45rem; font-weight: 600; color: #fff; }
.cl-score span { font-size: 0.68rem; font-weight: 800; letter-spacing: 0.12em; color: var(--faint); }
.cl-score .is-hi { border-color: rgba(255, 138, 61, 0.45); background: radial-gradient(ellipse at 100% 0, rgba(255, 138, 61, 0.18), transparent 60%), rgba(8, 14, 27, 0.92); }
.cl-score .is-hi b { color: #ffd3b0; }

/* Izgara */
.cl-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; align-items: start; gap: 1.25rem; margin-top: 2.4rem; }
.cl-main, .cl-side { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; min-width: 0; }
.panel-title small { margin-left: auto; font-size: 0.76rem; font-weight: 500; color: var(--faint); }

/* Klan savaşı */
.cl-war { overflow: hidden; background: radial-gradient(ellipse at 20% 50%, rgba(45, 212, 191, 0.12), transparent 55%), radial-gradient(ellipse at 80% 50%, rgba(192, 132, 252, 0.12), transparent 55%), var(--glass-strong); }
.cl-vs { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; margin: 0.4rem 0 1.2rem; }
.cl-side-team { display: flex; align-items: center; gap: 0.8rem; }
.cl-side-team--r { flex-direction: row-reverse; text-align: right; }
.cl-side-team svg { width: 48px; height: 64px; flex-shrink: 0; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.5)); }
.cl-side-team b { display: block; font-family: var(--font-brand); font-size: 1.05rem; color: #fff; }
.cl-side-team small { font-family: var(--font-mono); font-size: 0.78rem; color: var(--muted); }
.cl-vs-mid { text-align: center; }
.cl-vs-mid strong { display: block; font-family: var(--font-brand); font-size: 1.6rem; color: #ff9a52; text-shadow: 0 0 20px rgba(255, 138, 61, 0.6); }
.cl-vs-mid small { font-size: 0.72rem; color: var(--faint); }
.cl-count { display: flex; justify-content: center; gap: 0.3rem; margin-top: 0.3rem; font-family: var(--font-mono); font-size: 1.1rem; font-weight: 600; color: #fff; }
.cl-count span { min-width: 34px; padding: 0.2rem 0.3rem; border-radius: 6px; background: rgba(0, 0, 0, 0.35); border: 1px solid var(--line); }
.cl-war-foot { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.8rem; padding-top: 1rem; border-top: 1px solid var(--line); font-size: 0.8rem; color: var(--muted); }
.cl-form { display: flex; gap: 0.3rem; }
.cl-form i { width: 26px; height: 26px; display: grid; place-items: center; font-size: 0.7rem; font-style: normal; font-weight: 800; clip-path: var(--px-sm); }
.cl-form .w { color: #042f2e; background: #5eead4; }
.cl-form .l { color: #fff; background: rgba(248, 113, 113, 0.7); }

/* Üyeler */
.cl-mem-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.8rem; margin-bottom: 1rem; }
.cl-mem-head .panel-title { margin: 0; }
.cl-members { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.7rem; margin: 0; padding: 0; list-style: none; }
.cl-mem { position: relative; display: flex; align-items: center; gap: 0.65rem; min-width: 0; padding: 0.7rem; border-radius: 12px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--line); transition: border-color 0.2s; }
.cl-mem:hover { border-color: var(--line-strong); }
.cl-mem-av { position: relative; flex-shrink: 0; }
.cl-mem-av img { display: block; width: 36px; height: 36px; border-radius: 8px; image-rendering: pixelated; }
.cl-mem-av i { position: absolute; right: -3px; bottom: -3px; width: 11px; height: 11px; border-radius: 50%; background: #4b5563; box-shadow: 0 0 0 2px #0a1222; }
.cl-mem.is-on .cl-mem-av i { background: #34d399; }
.cl-mem-t { min-width: 0; }
.cl-mem b { display: block; overflow: hidden; font-size: 0.84rem; text-overflow: ellipsis; white-space: nowrap; color: #fff; }
.cl-mem small { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); }
.cl-mem.is-lead { border-color: rgba(255, 138, 61, 0.45); background: rgba(255, 138, 61, 0.07); }
.cl-mem.is-lead small { color: #ffb07a; }
.cl-mem.is-cap small { color: #5eead4; }
.cl-more { display: flex; justify-content: center; margin-top: 1rem; }
.cl-more .btn-ghost-px { height: 40px; }

/* Haftalık katkı */
.cl-bars { display: grid; gap: 0.6rem; margin: 0; padding: 0; list-style: none; }
.cl-bars li { display: grid; grid-template-columns: 26px 130px minmax(0, 1fr) 64px; align-items: center; gap: 0.7rem; font-size: 0.84rem; }
.cl-bars img { width: 26px; height: 26px; border-radius: 6px; image-rendering: pixelated; }
.cl-bars b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #fff; font-weight: 600; }
.cl-bar { height: 12px; background: rgba(255, 255, 255, 0.06); clip-path: var(--px-sm); }
.cl-bar span { display: block; height: 100%; width: var(--w); background: repeating-linear-gradient(90deg, #5eead4 0 8px, #2dd4bf 8px 10px); }
.cl-bars li:first-child .cl-bar span { background: repeating-linear-gradient(90deg, #ffb07a 0 8px, #ff8a3d 8px 10px); }
.cl-pts { font-family: var(--font-mono); font-size: 0.8rem; text-align: right; color: var(--muted); }

/* Kenar: seviye, kupalar, günlük */
.cl-lvl-top { display: flex; align-items: center; gap: 0.9rem; margin-bottom: 0.9rem; }
.cl-lvl-badge { position: relative; isolation: isolate; width: 52px; height: 52px; flex-shrink: 0; display: grid; place-items: center; font-family: var(--font-mono); font-size: 1.3rem; font-weight: 700; color: #042f2e; background: #ccfbf1; clip-path: var(--px-sm); }
.cl-lvl-badge::before { content: ''; position: absolute; inset: 2px; z-index: -1; background: linear-gradient(180deg, #99f6e4, #2dd4bf); clip-path: var(--px-sm); }
.cl-lvl-top div { flex: 1; min-width: 0; }
.cl-lvl-top small { display: flex; justify-content: space-between; margin-bottom: 0.4rem; font-size: 0.76rem; color: var(--muted); }
.cl-lvl-top small b { color: #fff; }
.cl-unlocks { display: grid; gap: 0.45rem; margin: 0; padding: 0; list-style: none; }
.cl-unlocks li { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.6rem; border-radius: 10px; font-size: 0.82rem; color: var(--muted); background: rgba(255, 255, 255, 0.025); border: 1px solid var(--line); }
.cl-unlocks i { width: 22px; height: 22px; flex-shrink: 0; display: grid; place-items: center; font-family: var(--font-mono); font-size: 0.66rem; font-style: normal; font-weight: 700; border-radius: 6px; color: var(--faint); background: rgba(255, 255, 255, 0.06); }
.cl-unlocks .is-done { color: #fff; }
.cl-unlocks .is-done i { color: #042f2e; background: #5eead4; }
.cl-unlocks .is-next { border-color: rgba(255, 138, 61, 0.4); color: #ffd3b0; }
.cl-unlocks .is-next i { color: #2a1204; background: #ff9a52; }
.cl-unlocks em { margin-left: auto; font-size: 0.68rem; font-style: normal; font-weight: 700; letter-spacing: 0.06em; color: var(--faint); }
.cl-trophies { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; }
.cl-trophy { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; padding: 0.8rem 0.4rem; text-align: center; border-radius: 12px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--line); }
.cl-trophy svg { width: 34px; height: 34px; }
.cl-trophy small { font-size: 0.66rem; font-weight: 700; line-height: 1.25; color: var(--muted); }
.cl-trophy.is-locked { opacity: 0.4; filter: grayscale(1); }
.cl-feed { margin: 0; padding: 0; list-style: none; }
.cl-feed li { position: relative; padding: 0 0 0.9rem 1.3rem; font-size: 0.82rem; line-height: 1.45; color: var(--muted); }
.cl-feed li::before { content: ''; position: absolute; left: 0; top: 0.4em; width: 8px; height: 8px; background: #5eead4; }
.cl-feed li::after { content: ''; position: absolute; left: 3px; top: 1.2em; bottom: 0; width: 2px; background: var(--line); }
.cl-feed li:last-child::after { display: none; }
.cl-feed b { color: #fff; font-weight: 600; }
.cl-feed time { display: block; font-size: 0.72rem; color: var(--faint); }
.cl-feed .is-win::before { background: #ff8a3d; }

/* Duyarlı */
@media (max-width: 1000px) {
    .cl-id { grid-template-columns: 130px minmax(0, 1fr); }
    .cl-banner svg { width: 116px; height: 155px; }
    .cl-banner::before { width: 142px; }
    .cl-score { grid-column: 1 / -1; grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .cl-grid { grid-template-columns: minmax(0, 1fr); }
    .cl-side { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cl-side > :last-child { grid-column: 1 / -1; }
    .cl-members { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .cl-hero { padding-top: 6rem; }
    .cl-id { grid-template-columns: minmax(0, 1fr); gap: 1.2rem; text-align: center; }
    .cl-id-main .breadcrumb, .cl-name-row, .cl-meta, .cl-actions { justify-content: center; }
    .cl-score { grid-template-columns: repeat(2, minmax(0, 1fr)); text-align: left; }
    .cl-side { grid-template-columns: minmax(0, 1fr); }
    .cl-members { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cl-vs { grid-template-columns: 1fr; text-align: center; }
    .cl-side-team, .cl-side-team--r { flex-direction: column; text-align: center; }
    .cl-bars li { grid-template-columns: 26px minmax(0, 1fr) 56px; }
    .cl-bar { grid-column: 2 / -1; grid-row: 2; }
}
@media (prefers-reduced-motion: reduce) {
    .cl-banner svg { animation: none; }
}

/* ===== klanlar.css ===== */
/* =========================================================
   Klanlar listesi (kn-)
   ========================================================= */
.kn-page { padding-bottom: 3rem; }
.kn-wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
.kn-tag { font-family: var(--font-mono); font-size: 0.8rem; font-weight: 600; color: #5eead4; }

/* Podyum */
.kn-podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: 1rem; max-width: 900px; margin: 0 auto; width: 100%; }
.kn-pod { position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.3rem; padding: 1.4rem 1rem 1.2rem; text-align: center; text-decoration: none; border-radius: 18px 18px 8px 8px; background: var(--glass-strong); border: 1px solid var(--line); transition: transform 0.25s var(--ease), border-color 0.25s; }
.kn-pod:hover { transform: translateY(-4px); border-color: var(--line-strong); }
.kn-pod .kn-ban { width: 72px; height: 96px; margin-bottom: 0.4rem; filter: drop-shadow(0 12px 14px rgba(0, 0, 0, 0.5)); }
.kn-pod b { font-family: var(--font-brand); font-size: 1.05rem; color: #fff; }
.kn-pod-pts { font-family: var(--font-mono); font-size: 0.82rem; color: var(--muted); }
.kn-pod-rank { position: absolute; top: -14px; width: 30px; height: 30px; display: grid; place-items: center; font-family: var(--font-mono); font-weight: 700; color: #2a1204; background: #cbd5e1; clip-path: var(--px-sm); }
.kn-pod--1 { padding-top: 2rem; padding-bottom: 1.8rem; border-color: rgba(255, 138, 61, 0.5); background: radial-gradient(ellipse at 50% 0, rgba(255, 138, 61, 0.2), transparent 70%), var(--glass-strong); }
.kn-pod--1 .kn-ban { width: 90px; height: 120px; }
.kn-pod--1 .kn-pod-rank { background: linear-gradient(180deg, #ffb87e, #ff8a3d); }
.kn-pod--3 .kn-pod-rank { background: #d6a27a; }

/* Liste */
.kn-list-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; margin-bottom: 1rem; }
.kn-list-head .panel-title { margin: 0; }
.kn-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 0.7rem; }
.kn-search { position: relative; }
.kn-search svg { position: absolute; left: 0.8rem; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); color: var(--faint); pointer-events: none; }
.kn-search .input { width: 240px; height: 40px; padding-left: 2.3rem; }
.kn-list .data-table td { vertical-align: middle; }
.kn-rank { font-family: var(--font-mono); color: var(--faint); }
.kn-cell { display: flex; align-items: center; gap: 0.7rem; color: inherit; text-decoration: none; }
.kn-cell:hover b { color: #ffd3b0; }
.kn-mini { width: 24px; height: 32px; flex-shrink: 0; }
.kn-cell b { display: block; font-size: 0.9rem; color: #fff; transition: color 0.2s; }
.kn-cell small { font-family: var(--font-mono); font-size: 0.74rem; color: var(--faint); }
.kn-mem { display: inline-block; width: 70px; height: 8px; margin-right: 0.5rem; vertical-align: middle; background: rgba(255, 255, 255, 0.07); clip-path: var(--px-sm); }
.kn-mem span { display: block; height: 100%; background: #5eead4; }
.kn-list td small { font-family: var(--font-mono); font-size: 0.78rem; color: var(--muted); }
.kn-empty { margin: 1rem 0 0; text-align: center; color: var(--muted); }

/* Klan kur */
.kn-create { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 2.5rem; align-items: center; padding: 2rem 2.2rem; border-radius: 22px; background: radial-gradient(ellipse at 15% 50%, rgba(45, 212, 191, 0.14), transparent 60%), var(--glass-strong); border: 1px solid rgba(94, 234, 212, 0.3); scroll-margin-top: 110px; }
.kn-create-art { display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.kn-stand { position: relative; padding-top: 12px; }
.kn-stand::before { content: ''; position: absolute; top: 0; left: 50%; width: 200px; height: 12px; transform: translateX(-50%); background: linear-gradient(180deg, #ffd3b0, #c46a2c); clip-path: var(--px-sm); }
.kn-preview { display: block; width: 170px; height: 226px; transform-origin: 50% 0; filter: drop-shadow(0 20px 24px rgba(0, 0, 0, 0.55)); animation: kn-sway 5s ease-in-out infinite; }
.kn-preview path { transition: fill 0.3s var(--ease); }
@keyframes kn-sway { 50% { transform: rotate(1.5deg); } }
.kn-prev-name { text-align: center; }
.kn-prev-name b { display: block; font-family: var(--font-brand); font-size: 1.3rem; color: #fff; }
.kn-h2 { margin: 0.5rem 0 0.4rem; font-family: var(--font-brand); font-size: clamp(1.6rem, 3vw, 2.2rem); color: #fff; }
.kn-lead { margin: 0 0 1.2rem; font-size: 0.92rem; line-height: 1.6; color: var(--muted); }
.kn-lead b { color: #ffd3b0; }
.kn-fields { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 0.9rem; }
.kn-tag-in { font-family: var(--font-mono); text-transform: uppercase; }
.label small { font-weight: 500; color: var(--faint); }
.kn-pick { margin-top: 1rem; }
.kn-sws, .kn-ems { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.45rem; }
.kn-sw { width: 36px; height: 36px; border: 0; background: var(--s); clip-path: var(--px-sm); cursor: pointer; opacity: 0.7; transition: opacity 0.2s, transform 0.2s; }
.kn-sw:hover { opacity: 1; }
.kn-sw.is-active { opacity: 1; transform: scale(1.12); box-shadow: inset 0 0 0 3px #fff; }
.kn-em { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 10px; background: rgba(255, 255, 255, 0.03); color: var(--muted); cursor: pointer; transition: color 0.2s, border-color 0.2s; }
.kn-em svg { width: 22px; height: 22px; }
.kn-em.is-active { color: #5eead4; border-color: rgba(94, 234, 212, 0.6); background: rgba(94, 234, 212, 0.08); }
.kn-create-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 0.8rem 1.2rem; margin-top: 1.4rem; }
.kn-create-foot .btn-gold { height: 46px; }
.kn-create-foot .hint { margin: 0; }

/* Nasıl işler */
.kn-how { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.kn-how-card { padding: 1.3rem; border-radius: 16px; background: var(--glass-strong); border: 1px solid var(--line); }
.kn-how-card b { display: block; margin: 0.8rem 0 0.35rem; color: #fff; }
.kn-how-card p { margin: 0; font-size: 0.86rem; line-height: 1.55; color: var(--muted); }

@media (max-width: 1000px) {
    .kn-create { grid-template-columns: 220px minmax(0, 1fr); gap: 1.6rem; padding: 1.6rem; }
    .kn-preview { width: 130px; height: 173px; }
    .kn-stand::before { width: 156px; }
    .kn-how { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
    .kn-podium { gap: 0.5rem; }
    .kn-pod { padding: 1.1rem 0.4rem 0.9rem; }
    .kn-pod .kn-ban { width: 48px; height: 64px; }
    .kn-pod--1 .kn-ban { width: 60px; height: 80px; }
    .kn-pod b { font-size: 0.8rem; }
    .kn-pod-pts { font-size: 0.7rem; }
    .kn-tools, .kn-search, .kn-search .input { width: 100%; }
    .kn-create { grid-template-columns: minmax(0, 1fr); padding: 1.3rem; }
    .kn-fields { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .kn-preview { animation: none; } }

/* ===== kod-bozdur.css ===== */
/* =========================================================
   Kod bozdur (kb-) — kod konsolu, sandık açılışı, kaynaklar, geçmiş
   ========================================================= */
.kb-page { overflow-x: clip; }
.kb-hero { padding-bottom: 1rem; }

/* ---------- Konsol ---------- */
.kb-console {
    position: relative;
    max-width: 780px;
    margin: 2.6rem auto 0;
    overflow: hidden;
    text-align: left;
    border-radius: 24px;
    background: #09111f;
    border: 1px solid rgba(255, 138, 61, 0.34);
    box-shadow: 0 40px 110px rgba(0, 0, 0, 0.6), 0 0 90px rgba(255, 138, 61, 0.14);
}
.kb-console::before { content: ''; position: absolute; left: 2rem; right: 2rem; top: 0; z-index: 4; height: 2px; background: repeating-linear-gradient(90deg, #ff8a3d 0 8px, transparent 8px 14px); opacity: 0.7; }

.kb-stage {
    position: relative;
    height: 300px;
    overflow: hidden;
    background: radial-gradient(ellipse 45% 60% at 50% 72%, rgba(255, 138, 61, 0.26), transparent 70%), linear-gradient(180deg, #0d1a33 0%, #09111f 100%);
    border-bottom: 1px solid var(--line);
}
.kb-rays {
    position: absolute;
    left: 50%;
    top: 64%;
    width: 760px;
    height: 760px;
    margin: -380px 0 0 -380px;
    background: repeating-conic-gradient(rgba(255, 176, 122, 0.16) 0 6deg, transparent 6deg 18deg);
    -webkit-mask-image: radial-gradient(circle, #000 8%, transparent 58%);
    mask-image: radial-gradient(circle, #000 8%, transparent 58%);
    opacity: 0.45;
    animation: kb-rot 50s linear infinite;
    transition: opacity 0.6s var(--ease), transform 0.8s var(--ease);
}
@keyframes kb-rot { to { rotate: 360deg; } }
.kb-floor {
    position: absolute;
    left: -10%;
    right: -10%;
    bottom: -12px;
    height: 110px;
    background: repeating-conic-gradient(rgba(255, 138, 61, 0.14) 0 25%, transparent 0 50%) 0 0 / 26px 26px;
    transform: perspective(260px) rotateX(58deg);
    transform-origin: bottom;
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 60%);
    mask-image: linear-gradient(180deg, transparent, #000 60%);
}
.kb-stage::after { content: ''; position: absolute; left: 50%; bottom: 38px; width: 220px; height: 22px; margin-left: -110px; border-radius: 50%; background: radial-gradient(ellipse, rgba(0, 0, 0, 0.65), transparent 70%); }
.kb-flash { position: absolute; left: 50%; top: 58%; z-index: 4; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; background: radial-gradient(circle, #fff 0%, rgba(255, 211, 176, 0.9) 30%, transparent 70%); opacity: 0; pointer-events: none; }

.kb-chest-wrap { position: absolute; left: 50%; bottom: 44px; z-index: 2; width: 204px; margin-left: -102px; transition: transform 0.7s var(--ease), opacity 0.7s var(--ease); animation: kb-idle 3.2s ease-in-out infinite; }
@keyframes kb-idle { 50% { transform: translateY(-5px); } }
.kb-chest { position: relative; display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 16px 16px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 26px rgba(255, 138, 61, 0.35)); }
.kb-chest-lid { transform-box: fill-box; transform-origin: 0 100%; transition: transform 0.6s cubic-bezier(0.34, 1.7, 0.6, 1); }
.kb-beam { position: absolute; left: 18%; right: 18%; bottom: 55%; height: 0; background: linear-gradient(0deg, rgba(255, 238, 222, 0.95), rgba(255, 176, 122, 0.4) 50%, transparent); clip-path: polygon(8% 100%, 92% 100%, 100% 0, 0 0); transition: height 0.5s var(--ease) 0.1s; }

/* Durumlar */
.kb-stage.is-shaking .kb-chest-wrap { animation: kb-rattle 0.14s linear infinite; }
.kb-stage.is-shaking .kb-rays { opacity: 0.8; }
@keyframes kb-rattle { 0% { transform: translate(0, 0) rotate(0); } 25% { transform: translate(-3px, -1px) rotate(-2deg); } 50% { transform: translate(2px, 0) rotate(1.5deg); } 75% { transform: translate(-1px, -2px) rotate(-1deg); } 100% { transform: translate(0, 0) rotate(0); } }
.kb-stage.is-nope .kb-chest-wrap { animation: kb-nope 0.45s var(--ease); }
@keyframes kb-nope { 25% { transform: rotate(-4deg); } 60% { transform: rotate(3deg); } }
.kb-stage.is-open .kb-chest-wrap { animation: none; }
.kb-stage.is-open .kb-chest-lid { transform: translate(-1px, -7px) rotate(-18deg); }
.kb-stage.is-open .kb-beam { height: 220px; }
.kb-stage.is-open .kb-rays { opacity: 1; transform: scale(1.25); animation-duration: 10s; }
.kb-stage.is-open .kb-flash { animation: kb-flash 0.8s ease-out; }
@keyframes kb-flash { 0% { opacity: 0; transform: scale(0.4); } 25% { opacity: 1; } 100% { opacity: 0; transform: scale(14); } }
.kb-stage.has-reward .kb-chest-wrap { opacity: 0.22; transform: translateY(26px) scale(0.78); }

/* Parçacıklar */
.kb-burst { position: absolute; left: 50%; bottom: 118px; z-index: 3; width: 0; height: 0; }
.kb-p { position: absolute; left: 0; top: 0; width: var(--s); height: var(--s); background: var(--c); box-shadow: 0 0 8px var(--c); animation: kb-fly 1.3s cubic-bezier(0.12, 0.7, 0.3, 1) var(--dl, 0s) both; }
@keyframes kb-fly {
    0% { opacity: 1; transform: translate(0, 0) scale(1); }
    70% { opacity: 1; }
    100% { opacity: 0; transform: translate(var(--x), var(--y)) scale(0.4); }
}

/* Ödül kartı */
.kb-reward {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 5;
    width: 290px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 1rem 1.2rem 1.1rem;
    text-align: center;
    border-radius: 18px;
    background: radial-gradient(ellipse 70% 50% at 50% 30%, color-mix(in srgb, var(--r) 22%, transparent), transparent 75%), rgba(8, 14, 27, 0.97);
    border: 1px solid var(--r);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--r) 16%, transparent), 0 0 70px color-mix(in srgb, var(--r) 35%, transparent), 0 30px 60px rgba(0, 0, 0, 0.6);
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, -44%) scale(0.6);
    transition: transform 0.6s cubic-bezier(0.34, 1.5, 0.6, 1), opacity 0.35s var(--ease), visibility 0.6s;
}
.kb-stage.has-reward .kb-reward { opacity: 1; visibility: visible; transform: translate(-50%, -50%) scale(1); }
.kb-reward-label { font-size: 0.6rem; font-weight: 800; letter-spacing: 0.24em; color: var(--r); }
.kb-reward-art { display: grid; place-items: center; width: 96px; height: 84px; margin: 0.2rem 0 0.1rem; }
.kb-reward-art svg { width: 84px; height: auto; max-height: 84px; filter: drop-shadow(0 0 16px color-mix(in srgb, var(--r) 60%, transparent)); animation: kb-float 2.8s ease-in-out infinite; }
@keyframes kb-float { 50% { transform: translateY(-4px); } }
.kb-reward-name { font-family: var(--font-brand); font-size: 1.3rem; font-weight: 700; color: #fff; }
.kb-reward-rar { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--r); }
.kb-reward-rar::before { content: ''; width: 7px; height: 7px; background: var(--r); box-shadow: 0 0 8px var(--r); }
.kb-reward-note { margin-top: 0.35rem; font-size: 0.78rem; line-height: 1.5; color: var(--muted); }

/* ---------- Kod girişi ---------- */
.kb-form { padding: 1.7rem 2rem 1.6rem; text-align: center; }
.kb-label { display: block; margin-bottom: 0.9rem; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.22em; color: #ffb07a; }
.kb-code { display: flex; justify-content: center; align-items: center; gap: 0.7rem; }
.kb-group { display: flex; gap: 0.4rem; }
.kb-char {
    width: 50px;
    height: 60px;
    padding: 0;
    text-align: center;
    font-family: var(--font-mono);
    font-size: 1.55rem;
    font-weight: 600;
    text-transform: uppercase;
    color: #fff;
    caret-color: #ff8a3d;
    background: #050a14;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 10px;
    box-shadow: inset 0 -3px 0 rgba(255, 255, 255, 0.03);
    transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease), background 0.2s var(--ease), transform 0.15s var(--ease);
}
.kb-char:focus { outline: none; border-color: #ff8a3d; background: #0b1426; box-shadow: 0 0 0 4px rgba(255, 138, 61, 0.18); }
.kb-char.is-filled { border-color: rgba(255, 176, 122, 0.45); background: linear-gradient(180deg, #14213b, #0a1426); animation: kb-type 0.18s var(--ease); }
@keyframes kb-type { 50% { transform: translateY(-2px) scale(1.05); } }
.kb-char:disabled { opacity: 0.75; }
.kb-dash { width: 14px; height: 4px; flex-shrink: 0; background: rgba(255, 176, 122, 0.55); }
.kb-code.is-error { animation: kb-shake 0.45s var(--ease); }
.kb-code.is-error .kb-char { border-color: rgba(248, 113, 113, 0.75); background: rgba(127, 29, 29, 0.18); }
.kb-code.is-ok .kb-char { border-color: rgba(52, 211, 153, 0.6); }
@keyframes kb-shake { 15%, 55% { transform: translateX(-8px); } 35%, 75% { transform: translateX(7px); } 90% { transform: translateX(-2px); } }
.kb-hint { max-width: 520px; min-height: 1.4em; margin: 0.95rem auto 0; font-size: 0.82rem; line-height: 1.5; }
.kb-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 0.8rem; margin-top: 1.3rem; }
.kb-ghost { height: 60px; padding: 0 1.4rem; border: 0; cursor: pointer; font-size: 0.78rem; }
.kb-ghost svg { width: 16px; height: 16px; }
.kb-submit .pb-icon--dl { width: 17px; height: 17px; }
.kb-submit[disabled] { pointer-events: none; filter: saturate(0.6) brightness(0.9); }

.kb-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.7rem 1.2rem; padding: 0.9rem 1.5rem; border-top: 1px solid var(--line); background: rgba(255, 255, 255, 0.02); }
.kb-tries { display: flex; align-items: center; gap: 0.6rem; font-size: 0.76rem; color: var(--faint); }
.kb-tries-dots { display: flex; gap: 3px; }
.kb-tries-dots i { width: 8px; height: 8px; background: #ff8a3d; box-shadow: 0 0 6px rgba(255, 138, 61, 0.6); transition: background 0.3s var(--ease), box-shadow 0.3s var(--ease); }
.kb-tries-dots i.is-used { background: rgba(255, 255, 255, 0.12); box-shadow: none; }
.kb-tries b { font-family: var(--font-mono); font-weight: 600; color: var(--text); }
.kb-demo { display: flex; align-items: center; flex-wrap: wrap; gap: 0.3rem 0.5rem; font-size: 0.76rem; color: var(--faint); }
.kb-demo button { padding: 0.2rem 0.45rem; border: 1px dashed rgba(255, 176, 122, 0.35); border-radius: 6px; background: transparent; color: #ffd3b0; font-family: var(--font-mono); font-size: 0.72rem; cursor: pointer; transition: background 0.2s var(--ease); }
.kb-demo button:hover { background: rgba(255, 138, 61, 0.12); }

/* ---------- Kaynaklar ---------- */
.kb-sources { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.kb-src { --c: #ff8a3d; position: relative; display: flex; flex-direction: column; gap: 0.5rem; padding: 1.3rem 1.3rem 1.25rem; overflow: hidden; border-radius: 18px; background: var(--glass-strong); border: 1px solid var(--line); color: inherit; text-decoration: none; transition: transform 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease); }
.kb-src::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: repeating-linear-gradient(90deg, var(--c) 0 8px, transparent 8px 12px); opacity: 0.8; }
.kb-src:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--c) 50%, transparent); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4), 0 0 36px color-mix(in srgb, var(--c) 15%, transparent); }
.kb-src--orange { --c: #ff8a3d; } .kb-src--pink { --c: #f472b6; } .kb-src--indigo { --c: #818cf8; } .kb-src--teal { --c: #5eead4; }
.kb-src-top { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; margin-bottom: 0.4rem; }
.kb-src-ico { position: relative; isolation: isolate; width: 46px; height: 46px; display: grid; place-items: center; color: var(--c); background: color-mix(in srgb, var(--c) 55%, transparent); clip-path: var(--px-sm); }
.kb-src-ico::before { content: ''; position: absolute; inset: 1.5px; z-index: -1; background: #0c1528; clip-path: var(--px-sm); }
.kb-src-ico svg { width: 21px; height: 21px; }
.kb-src-freq { height: 24px; padding: 0 0.55rem; display: inline-flex; align-items: center; border-radius: 6px; font-size: 0.68rem; font-weight: 700; color: var(--c); background: color-mix(in srgb, var(--c) 12%, transparent); border: 1px solid color-mix(in srgb, var(--c) 30%, transparent); white-space: nowrap; }
.kb-src-title { font-family: var(--font-brand); font-size: 1.12rem; font-weight: 700; letter-spacing: 0.03em; color: #fff; }
.kb-src-text { font-size: 0.86rem; line-height: 1.6; color: var(--muted); }
.kb-src-text code { font-family: var(--font-mono); font-size: 0.78rem; color: #c7d2fe; }
.kb-src .link-more { margin-top: auto; padding-top: 0.4rem; font-size: 0.84rem; color: var(--c); }

/* ---------- Geçmiş + kurallar ---------- */
.kb-lower { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); align-items: start; gap: 1.25rem; }
.kb-lower > * { min-width: 0; }   /* tablo sütunu genişletip sayfayı taşırmasın */
.kb-code-cell { font-family: var(--font-mono); font-size: 0.82rem; color: var(--muted) !important; white-space: nowrap; }
.kb-rw { display: flex; align-items: center; gap: 0.65rem; }
.kb-rw-art { width: 30px; height: 30px; flex-shrink: 0; padding: 3px; border-radius: 8px; background: color-mix(in srgb, var(--r) 14%, #0a1222); border: 1px solid color-mix(in srgb, var(--r) 35%, transparent); }
.kb-rw > span { display: flex; flex-direction: column; line-height: 1.3; }
.kb-rw b { font-size: 0.88rem; font-weight: 600; white-space: nowrap; }
.kb-rw small { font-size: 0.64rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--r); }
.kb-col-src { color: var(--muted) !important; font-size: 0.84rem; white-space: nowrap; }
.kb-date { font-size: 0.84rem; color: var(--muted) !important; white-space: nowrap; }
.kb-history tr.is-new { animation: kb-row 2.4s var(--ease); }
@keyframes kb-row { 0%, 30% { background: rgba(255, 138, 61, 0.16); } }

.kb-rules .panel-title { gap: 0.8rem; }
.kb-rules .panel-title .feat-ico { width: 36px; height: 36px; }
.kb-rule-list { counter-reset: kb; margin: 0; padding: 0; list-style: none; display: grid; gap: 0.75rem; }
.kb-rule-list li { counter-increment: kb; position: relative; padding-left: 2.2rem; font-size: 0.88rem; line-height: 1.55; color: var(--muted); }
.kb-rule-list li::before { content: counter(kb, decimal-leading-zero); position: absolute; left: 0; top: 0.05rem; width: 1.6rem; height: 1.3rem; display: grid; place-items: center; font-family: var(--font-mono); font-size: 0.66rem; font-weight: 600; color: #2a1204; background: linear-gradient(180deg, #ffb87e, #ff8a3d); clip-path: var(--px-sm); }
.kb-rule-list b { color: #fff; }
.kb-help { display: flex; align-items: center; gap: 1rem; margin-top: 1.3rem; padding: 0.9rem 1rem; border-radius: 12px; background: rgba(255, 138, 61, 0.08); border: 1px solid rgba(255, 138, 61, 0.3); color: inherit; text-decoration: none; transition: background 0.2s var(--ease); }
.kb-help:hover { background: rgba(255, 138, 61, 0.14); }
.kb-help > span:first-child { display: flex; flex-direction: column; line-height: 1.4; }
.kb-help b { font-size: 0.9rem; color: #fff; }
.kb-help small { font-size: 0.78rem; color: var(--muted); }
.kb-help-go { margin-left: auto; font-size: 1.2rem; font-weight: 700; color: #ffb07a; transition: transform 0.2s var(--ease); }
.kb-help:hover .kb-help-go { transform: translateX(3px); }

/* ---------- Duyarlı ---------- */
@media (max-width: 1000px) {
    .kb-sources { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .kb-lower { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .kb-console { margin-top: 2rem; border-radius: 20px; }
    .kb-stage { height: 270px; }
    .kb-chest-wrap { width: 160px; margin-left: -80px; bottom: 42px; }
    .kb-burst { bottom: 100px; }
    .kb-reward { width: min(290px, calc(100% - 2rem)); }
    .kb-form { padding: 1.4rem 0.9rem 1.3rem; }
    .kb-code { gap: 0.3rem; }
    .kb-group { flex: 1; min-width: 0; gap: 0.2rem; }
    .kb-char { flex: 1; width: 0; min-width: 0; height: 48px; font-size: 1.1rem; border-radius: 7px; }
    .kb-dash { width: 6px; height: 3px; }
    .kb-actions { flex-direction: column; align-items: stretch; }
    .kb-actions .play-btn--lg { width: 100%; }
    .kb-ghost { height: 48px; }
    .kb-foot { flex-direction: column; align-items: flex-start; padding: 0.9rem 1rem; }
    .kb-sources { grid-template-columns: 1fr; }
    .kb-col-src { display: none; }
    .kb-history .data-table th, .kb-history .data-table td { padding: 0.75rem 0.7rem; }
    .kb-rw-art { width: 26px; height: 26px; }
}
@media (prefers-reduced-motion: reduce) {
    .kb-rays, .kb-chest-wrap, .kb-reward-art svg, .kb-p, .kb-char.is-filled, .kb-code.is-error, .kb-stage.is-open .kb-flash { animation: none !important; }
    .kb-chest-lid, .kb-reward, .kb-beam, .kb-chest-wrap { transition: none; }
}

/* ===== kozmetikler.css ===== */
/* =========================================================
   Kozmetikler (cs-) — katalog, sezon vitrini, canlı önizleme
   ========================================================= */
@property --cs-a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

.cs-page { overflow-x: clip; }
.cs-hero { padding-bottom: 2.2rem; }
.cs-hero-facts { display: flex; justify-content: center; flex-wrap: wrap; gap: 0.5rem 1.8rem; margin: 1.5rem 0 0; padding: 0; list-style: none; font-size: 0.86rem; color: var(--muted); text-shadow: 0 1px 2px rgba(5, 10, 20, 0.9), 0 0 18px rgba(5, 10, 20, 0.85); }
.cs-hero-facts li { display: inline-flex; align-items: center; gap: 0.5rem; }
.cs-hero-facts li::before { content: ''; width: 6px; height: 6px; background: #ff8a3d; box-shadow: 0 0 8px rgba(255, 138, 61, 0.7); }
.cs-hero-facts b { font-weight: 700; color: #fff; }

/* ---------- Sezon vitrini ---------- */
.cs-season-wrap { margin-bottom: 2.8rem; }
.cs-season {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    align-items: center;
    gap: 2.5rem;
    min-height: 380px;
    padding: 2.6rem 2.8rem;
    border-radius: 24px;
    background: #07101e;
    border: 1px solid rgba(94, 234, 212, 0.28);
    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.5), 0 0 80px rgba(94, 234, 212, 0.08);
}
.cs-season-bg { position: absolute; inset: 0; z-index: -3; width: 100%; height: 100%; object-fit: cover; object-position: center 42%; }
.cs-season::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -2;
    background:
        linear-gradient(90deg, rgba(6, 12, 24, 0.97) 0%, rgba(6, 12, 24, 0.92) 36%, rgba(6, 12, 24, 0.45) 66%, rgba(6, 12, 24, 0.7) 100%),
        linear-gradient(0deg, rgba(6, 12, 24, 0.7), transparent 45%);
}
.cs-season::after { content: ''; position: absolute; left: 2.8rem; right: 2.8rem; top: 0; height: 2px; background: repeating-linear-gradient(90deg, #5eead4 0 8px, transparent 8px 14px); opacity: 0.55; }
/* Piksel kar: iki katman, kutu gölgeleriyle */
.cs-snow { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.cs-snow::before, .cs-snow::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 3px;
    background: transparent;
    box-shadow:
        620px 30px #e0f2fe, 760px 110px #e0f2fe, 910px 60px #e0f2fe, 1040px 180px #e0f2fe, 1150px 40px #e0f2fe, 700px 260px #e0f2fe, 860px 330px #e0f2fe, 990px 300px #e0f2fe, 1110px 250px #e0f2fe, 560px 350px #e0f2fe, 480px 150px #e0f2fe, 1200px 360px #e0f2fe,
        620px -370px #e0f2fe, 760px -290px #e0f2fe, 910px -340px #e0f2fe, 1040px -220px #e0f2fe, 1150px -360px #e0f2fe, 700px -140px #e0f2fe, 860px -70px #e0f2fe, 990px -100px #e0f2fe, 1110px -150px #e0f2fe, 560px -50px #e0f2fe, 480px -250px #e0f2fe, 1200px -40px #e0f2fe;
    opacity: 0.75;
    animation: cs-snow 14s linear infinite;
}
.cs-snow::after {
    width: 2px;
    height: 2px;
    box-shadow:
        660px 80px #99f6e4, 820px 20px #fff, 950px 140px #99f6e4, 1080px 90px #fff, 740px 190px #fff, 890px 240px #99f6e4, 1020px 350px #fff, 1180px 200px #99f6e4, 590px 280px #fff, 520px 60px #99f6e4,
        660px -320px #99f6e4, 820px -380px #fff, 950px -260px #99f6e4, 1080px -310px #fff, 740px -210px #fff, 890px -160px #99f6e4, 1020px -50px #fff, 1180px -200px #99f6e4, 590px -120px #fff, 520px -340px #99f6e4;
    opacity: 0.6;
    animation-duration: 9s;
}
@keyframes cs-snow { to { transform: translateY(400px); } }

.cs-season-copy { position: relative; }
.cs-season-tag { display: inline-flex; align-items: center; gap: 0.55rem; height: 28px; padding: 0 0.8rem; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.16em; color: #ccfbf1; background: rgba(15, 118, 110, 0.35); border: 1px solid rgba(94, 234, 212, 0.4); border-radius: 999px; }
.cs-season-dot { width: 7px; height: 7px; background: #5eead4; box-shadow: 0 0 10px #5eead4; animation: cs-blink 1.6s steps(2) infinite; }
@keyframes cs-blink { 50% { opacity: 0.25; } }
.cs-season-title {
    margin: 1rem 0 0;
    font-family: var(--font-brand);
    font-size: clamp(2.2rem, 4.4vw, 3.4rem);
    font-weight: 700;
    line-height: 1.02;
    letter-spacing: 0.01em;
    background: linear-gradient(180deg, #ffffff 0%, #e0fbf6 50%, #5eead4 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 6px 24px rgba(94, 234, 212, 0.25));
}
.cs-season-lead { max-width: 440px; margin: 0.9rem 0 0; font-size: 0.98rem; line-height: 1.65; color: #c6cedd; }
.cs-cd { display: flex; gap: 0.6rem; margin-top: 1.5rem; }
.cs-cd-seg { position: relative; isolation: isolate; min-width: 72px; padding: 0.55rem 0.5rem 0.5rem; text-align: center; background: rgba(94, 234, 212, 0.45); clip-path: var(--px-sm); }
.cs-cd-seg::before { content: ''; position: absolute; inset: 1.5px; z-index: -1; background: linear-gradient(180deg, #0d1c30, #081221); clip-path: var(--px-sm); }
.cs-cd-seg b { display: block; font-family: var(--font-mono); font-size: 1.75rem; font-weight: 600; line-height: 1.1; color: #fff; }
.cs-cd-seg small { display: block; margin-top: 0.15rem; font-size: 0.56rem; font-weight: 700; letter-spacing: 0.16em; color: #99f6e4; }
.cs-season-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem 1.4rem; margin-top: 1.7rem; }
.cs-season-note { font-size: 0.84rem; color: var(--muted); }
.cs-season-note b { font-family: var(--font-mono); color: #fff; }

.cs-season-items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem; margin: 0; padding: 0; list-style: none; }
.cs-sitem {
    position: relative;
    width: 100%;
    display: grid;
    justify-items: center;
    gap: 0.15rem;
    padding: 1rem 0.8rem 0.9rem;
    border-radius: 16px;
    border: 1px solid color-mix(in srgb, var(--r) 40%, rgba(255, 255, 255, 0.06));
    background: radial-gradient(ellipse 70% 55% at 50% 38%, color-mix(in srgb, var(--r) 26%, transparent), transparent 70%), rgba(8, 14, 27, 0.92);
    color: inherit;
    font: inherit;
    cursor: pointer;
    transition: transform 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.cs-sitem:hover { transform: translateY(-4px); border-color: var(--r); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45), 0 0 30px color-mix(in srgb, var(--r) 25%, transparent); }
.cs-sitem-art { width: 64px; height: 64px; margin-bottom: 0.35rem; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.5)); transition: transform 0.35s var(--ease); }
.cs-sitem:hover .cs-sitem-art { transform: translateY(-4px) scale(1.06); }
.cs-sitem-name { font-size: 0.86rem; font-weight: 700; color: #fff; text-align: center; }
.cs-sitem-rar { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--r); }

/* ---------- Düzen ---------- */
.cs-layout { grid-template-columns: 250px minmax(0, 1fr) 340px; gap: 1.5rem; max-width: 1440px; }
.cs-side { position: sticky; top: 96px; display: grid; gap: 1rem; }
.cs-fdrawer-head, .cs-fdrawer-go { display: none; }

/* Koleksiyon ilerlemesi */
.cs-collection { padding: 1.15rem 1.2rem 1.2rem; border-radius: 18px; background: linear-gradient(160deg, rgba(255, 138, 61, 0.16), rgba(8, 14, 27, 0) 60%), rgba(8, 14, 27, 0.94); border: 1px solid rgba(255, 138, 61, 0.3); }
.cs-col-head { display: flex; align-items: baseline; justify-content: space-between; }
.cs-col-label { font-size: 0.64rem; font-weight: 800; letter-spacing: 0.18em; color: #ffb07a; }
.cs-col-num { font-family: var(--font-mono); font-size: 0.86rem; color: var(--faint); }
.cs-col-num b { font-size: 1.35rem; font-weight: 600; color: #fff; }
.cs-col-bar { margin: 0.7rem 0 0.9rem; }
.cs-col-rar { display: grid; gap: 0.35rem; margin: 0; padding: 0; list-style: none; }
.cs-col-rar li { display: flex; align-items: center; gap: 0.5rem; font-size: 0.76rem; color: var(--muted); }
.cs-col-rar li::before { content: ''; width: 7px; height: 7px; background: var(--r); box-shadow: 0 0 6px var(--r); }
.cs-col-rar b { margin-left: auto; font-family: var(--font-mono); font-size: 0.72rem; font-weight: 600; color: var(--text); }

/* Filtre paneli */
.cs-fpanel { padding: 1.2rem; border-radius: 18px; background: var(--glass-strong); border: 1px solid var(--line); }
.cs-fgroup + .cs-fgroup { margin-top: 1.15rem; padding-top: 1.15rem; border-top: 1px solid var(--line); }
.cs-fh { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; margin: 0 0 0.75rem; font-family: var(--font-brand); font-size: 0.76rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: #ffb07a; }
.cs-fh-val { font-family: 'Inter', sans-serif; font-size: 0.72rem; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--faint); }
.cs-fh-val b { font-family: var(--font-mono); font-weight: 600; color: #fff; }
.cs-cats { display: grid; gap: 0.15rem; }
.cs-cat { display: flex; align-items: center; gap: 0.7rem; width: 100%; height: 40px; padding: 0 0.55rem; border: 0; border-radius: 10px; background: transparent; color: var(--muted); font: inherit; font-size: 0.88rem; font-weight: 500; text-align: left; cursor: pointer; transition: background 0.2s var(--ease), color 0.2s var(--ease); }
.cs-cat:hover { color: #fff; background: rgba(255, 255, 255, 0.04); }
.cs-cat.is-active { color: #ffd3b0; background: rgba(255, 138, 61, 0.12); box-shadow: inset 2px 0 0 #ff8a3d; }
.cs-cat-ico { width: 26px; height: 26px; flex-shrink: 0; display: grid; place-items: center; border-radius: 7px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line); }
.cs-cat-ico svg { width: 18px; height: 18px; }
.cs-cat-ico--all { grid-template-columns: repeat(2, 6px); gap: 2px; place-content: center; }
.cs-cat-ico--all i { width: 6px; height: 6px; background: #ffb07a; }
.cs-cat-ico--all i:nth-child(2), .cs-cat-ico--all i:nth-child(3) { background: #5eead4; }
.cs-cat-n { margin-left: auto; font-family: var(--font-mono); font-size: 0.72rem; color: var(--faint); }
.cs-rars { display: grid; gap: 0.6rem; }
.cs-rcheck { align-items: center; font-size: 0.88rem; }
.cs-rcheck input { margin: 0; }
.cs-rcheck input:checked { background: var(--r); border-color: var(--r); }
.cs-rcheck input:checked::after { color: #0a1222; }
.cs-rsq { width: 9px; height: 9px; flex-shrink: 0; background: var(--r); box-shadow: 0 0 8px var(--r); }

.cs-range { --p: 100%; width: 100%; height: 20px; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; }
.cs-range:focus { outline: none; }
.cs-range::-webkit-slider-runnable-track { height: 8px; border-radius: 2px; background: linear-gradient(90deg, transparent var(--p), rgba(255, 255, 255, 0.1) var(--p)), repeating-linear-gradient(90deg, #ff8a3d 0 8px, #ffa564 8px 10px); }
.cs-range::-webkit-slider-thumb { width: 18px; height: 18px; margin-top: -5px; border: 3px solid #ff8a3d; border-radius: 3px; background: #fff3ea; box-shadow: 0 0 12px rgba(255, 138, 61, 0.6); -webkit-appearance: none; appearance: none; }
.cs-range:focus-visible::-webkit-slider-thumb { border-color: #5eead4; }
.cs-range::-moz-range-track { height: 8px; border-radius: 2px; background: rgba(255, 255, 255, 0.1); }
.cs-range::-moz-range-progress { height: 8px; border-radius: 2px; background: #ff8a3d; }
.cs-range::-moz-range-thumb { width: 12px; height: 12px; border: 3px solid #ff8a3d; border-radius: 3px; background: #fff3ea; }
.cs-range-scale { display: flex; justify-content: space-between; margin-top: 0.35rem; font-family: var(--font-mono); font-size: 0.66rem; color: var(--faint); }

.cs-switch { position: relative; display: flex; align-items: center; gap: 0.75rem; font-size: 0.88rem; color: var(--muted); cursor: pointer; }
.cs-switch input { position: absolute; opacity: 0; pointer-events: none; }
.cs-switch-track { position: relative; flex-shrink: 0; width: 40px; height: 22px; border-radius: 4px; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.14); transition: background 0.2s var(--ease), border-color 0.2s var(--ease); }
.cs-switch-track i { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 2px; background: #8591a9; transition: transform 0.25s var(--ease), background 0.2s var(--ease); }
.cs-switch input:checked + .cs-switch-track { background: #ff8a3d; border-color: #ff8a3d; }
.cs-switch input:checked + .cs-switch-track i { transform: translateX(18px); background: #fff3ea; }
.cs-switch input:focus-visible + .cs-switch-track { box-shadow: 0 0 0 3px rgba(94, 234, 212, 0.5); }
.cs-switch:hover { color: #fff; }

.cs-reset { width: 100%; height: 40px; margin-top: 1.2rem; display: flex; align-items: center; justify-content: center; gap: 0.5rem; border: 1px dashed rgba(255, 255, 255, 0.16); border-radius: 10px; background: transparent; color: var(--muted); font: inherit; font-size: 0.84rem; cursor: pointer; transition: color 0.2s var(--ease), border-color 0.2s var(--ease); }
.cs-reset svg { width: 15px; height: 15px; }
.cs-reset:hover { color: #ffd3b0; border-color: rgba(255, 138, 61, 0.5); }

/* ---------- Araç çubuğu ---------- */
.cs-toolbar { display: flex; gap: 0.7rem; }
.cs-search { flex: 1; min-width: 0; }
.cs-sort { width: 230px; flex-shrink: 0; }
.cs-ftoggle { display: none; align-items: center; gap: 0.5rem; height: 48px; padding: 0 1rem; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 12px; background: rgba(5, 10, 20, 0.8); color: #fff; font: inherit; font-size: 0.9rem; font-weight: 600; cursor: pointer; }
.cs-ftoggle svg { width: 18px; height: 18px; color: #ffb07a; }
.cs-ftoggle-n:not(:empty) { min-width: 20px; height: 20px; padding: 0 0.3rem; display: grid; place-items: center; border-radius: 4px; font-family: var(--font-mono); font-size: 0.7rem; color: #2a1204; background: #ff8a3d; }
.cs-subbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.8rem 1rem; margin: 0.9rem 0 1.15rem; }
.cs-count { margin: 0; font-size: 0.86rem; color: var(--muted); text-shadow: 0 1px 2px rgba(5, 10, 20, 0.9); }
.cs-count b { font-family: var(--font-mono); color: #fff; }
.cs-col-mini { display: none; }

/* ---------- Kartlar ---------- */
.cs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; }
.cs-card {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    border-radius: 18px;
    background: #0a1222;
    border: 1px solid color-mix(in srgb, var(--r) 28%, rgba(255, 255, 255, 0.06));
    transition: transform 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.cs-card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--r) 65%, transparent); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45), 0 0 34px color-mix(in srgb, var(--r) 22%, transparent); }
.cs-card.is-selected { border-color: var(--r); box-shadow: 0 0 0 1px var(--r), 0 18px 50px rgba(0, 0, 0, 0.45), 0 0 44px color-mix(in srgb, var(--r) 32%, transparent); }
.cs-stage-mini {
    position: relative;
    height: 168px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 17px 17px 0 0;
    background: radial-gradient(ellipse 55% 55% at 50% 56%, color-mix(in srgb, var(--r) 34%, transparent), transparent 72%), linear-gradient(180deg, #0f1b31, #0a1222);
    cursor: pointer;
}
.cs-stage-mini::before {
    content: '';
    position: absolute;
    left: -20%;
    right: -20%;
    bottom: -18px;
    height: 70px;
    background: repeating-conic-gradient(color-mix(in srgb, var(--r) 18%, transparent) 0 25%, transparent 0 50%) 0 0 / 14px 14px;
    transform: perspective(160px) rotateX(58deg);
    transform-origin: bottom;
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 70%);
    mask-image: linear-gradient(180deg, transparent, #000 70%);
}
.cs-art { position: relative; z-index: 1; width: 92px; height: 92px; filter: drop-shadow(0 10px 10px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 14px color-mix(in srgb, var(--r) 45%, transparent)); transition: transform 0.4s var(--ease); }
.cs-card:hover .cs-art { transform: translateY(-6px) scale(1.06); }
.cs-card-cat { position: absolute; top: 0.75rem; left: 0.8rem; z-index: 2; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); }
.cs-flag { position: absolute; top: 0.6rem; right: 0.6rem; z-index: 2; height: 20px; padding: 0 0.45rem; display: grid; place-items: center; font-size: 0.58rem; font-weight: 800; letter-spacing: 0.1em; clip-path: var(--px-sm); }
.cs-flag--new { color: #2a1204; background: linear-gradient(180deg, #ffb87e, #ff8a3d); }
.cs-flag--sale { color: #fff; background: linear-gradient(180deg, #f87171, #dc2626); }
.cs-flag--own { color: #042f2e; background: linear-gradient(180deg, #99f6e4, #2dd4bf); }
.cs-card-body { display: flex; flex: 1; flex-direction: column; padding: 0.9rem 1rem 1rem; border-top: 1px solid color-mix(in srgb, var(--r) 20%, transparent); }
.cs-card-name { margin: 0; font-size: 1rem; font-weight: 700; line-height: 1.3; color: #fff; }
.cs-rar { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 0.3rem; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--r); }
.cs-rar::before { content: ''; width: 7px; height: 7px; background: var(--r); box-shadow: 0 0 8px var(--r); }
.cs-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-top: auto; padding-top: 0.95rem; }
.cs-price { display: inline-flex; align-items: center; gap: 0.4rem; font-family: var(--font-mono); white-space: nowrap; }
.cs-price b { font-size: 1.02rem; font-weight: 600; color: #fff; }
.cs-price s { font-size: 0.74rem; color: var(--faint); }
.cs-coin { width: 16px; height: 16px; flex-shrink: 0; }
.cs-owned-tag { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.76rem; font-weight: 600; color: #5eead4; white-space: nowrap; }
.cs-owned-tag svg { width: 12px; height: 11px; }
.cs-card-actions { display: flex; gap: 0.35rem; }
.cs-btn-pv { position: relative; isolation: isolate; height: 34px; padding: 0 0.8rem; border: 0; background: rgba(255, 138, 61, 0.5); color: #ffd3b0; font: inherit; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.05em; cursor: pointer; clip-path: var(--px-sm); transition: filter 0.2s var(--ease); }
.cs-btn-pv::before { content: ''; position: absolute; inset: 1.5px; z-index: -1; background: #0e172a; clip-path: var(--px-sm); transition: background 0.2s var(--ease); }
.cs-btn-pv:hover::before { background: #1c2540; }
.cs-btn-cart { width: 34px; height: 34px; flex-shrink: 0; display: grid; place-items: center; padding: 0; border: 0; color: #2a1204; background: linear-gradient(180deg, #ffb87e, #ff8a3d 55%, #e06a24); box-shadow: inset 0 -3px 0 rgba(110, 36, 4, 0.45); clip-path: var(--px-sm); cursor: pointer; transition: filter 0.2s var(--ease), transform 0.15s var(--ease); }
.cs-btn-cart:hover { filter: brightness(1.08); }
.cs-btn-cart:active { transform: translateY(1px); }
.cs-btn-cart svg { width: 15px; height: 14px; }
.cs-ico-ok { display: none; }
.cs-btn-cart.is-on { color: #042f2e; background: linear-gradient(180deg, #99f6e4, #2dd4bf); box-shadow: inset 0 -3px 0 rgba(4, 47, 46, 0.4); }
.cs-btn-cart.is-on .cs-ico-cart { display: none; }
.cs-btn-cart.is-on .cs-ico-ok { display: block; }
.cs-btn-pv:focus-visible, .cs-btn-cart:focus-visible, .cs-cat:focus-visible, .cs-sitem:focus-visible, .cs-rot:focus-visible { outline: 2px solid #5eead4; outline-offset: 2px; }

/* Efsanevi ve mitik: dönen ışık çerçevesi + parıltı */
.cs-card.rarity-legendary::before, .cs-card.rarity-mythic::before {
    content: '';
    position: absolute;
    inset: -1px;
    z-index: 3;
    padding: 1.5px;
    border-radius: inherit;
    pointer-events: none;
    background: conic-gradient(from var(--cs-a), transparent 0 58%, var(--r) 72%, #fff 77%, var(--r) 82%, transparent 94%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    animation: cs-spin 5s linear infinite;
}
.cs-card.rarity-mythic::before { animation-duration: 3.4s; }
.cs-card.rarity-legendary .cs-stage-mini::after, .cs-card.rarity-mythic .cs-stage-mini::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.13) 46%, color-mix(in srgb, var(--r) 30%, transparent) 50%, transparent 58%);
    background-size: 260% 100%;
    animation: cs-sheen 3.8s ease-in-out infinite;
}
@keyframes cs-spin { to { --cs-a: 360deg; } }
@keyframes cs-sheen { 0% { background-position: 130% 0; } 60%, 100% { background-position: -130% 0; } }

.cs-empty { margin-top: 1rem; border-radius: 18px; background: var(--glass-strong); border: 1px dashed var(--line-strong); }
.cs-empty p { margin: 0.8rem 0 1.2rem; line-height: 1.6; }
.cs-empty b { color: #fff; }

/* ---------- Önizleme ---------- */
.cs-preview { position: sticky; top: 96px; }
.cs-pv {
    position: relative;
    overflow: hidden auto;
    max-height: calc(100vh - 116px);
    border-radius: 20px;
    background: #09111f;
    border: 1px solid color-mix(in srgb, var(--r) 40%, rgba(255, 255, 255, 0.08));
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5), 0 0 60px color-mix(in srgb, var(--r) 14%, transparent);
    scrollbar-width: thin;
    transition: border-color 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.cs-pv-grab { display: none; }
.cs-pv-head { position: absolute; top: 0; left: 0; right: 0; z-index: 6; display: flex; align-items: center; justify-content: space-between; padding: 0.85rem 0.9rem; pointer-events: none; }
.cs-pv-head > * { pointer-events: auto; }
.cs-pv-label { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.35rem 0.65rem; border-radius: 999px; font-size: 0.6rem; font-weight: 800; letter-spacing: 0.18em; color: var(--muted); background: rgba(5, 10, 20, 0.82); border: 1px solid var(--line); }
.cs-pv-label .live-dot { width: 6px; height: 6px; }
.cs-pv-close { display: none; width: 34px; height: 34px; place-items: center; padding: 0; border: 1px solid var(--line-strong); border-radius: 9px; background: rgba(5, 10, 20, 0.85); color: #fff; cursor: pointer; }
.cs-pv-close svg { width: 16px; height: 16px; }

.cs-stage {
    position: relative;
    height: 340px;
    overflow: hidden;
    background: radial-gradient(ellipse 60% 50% at 50% 50%, color-mix(in srgb, var(--r) 30%, transparent), transparent 72%), linear-gradient(180deg, #101d36 0%, #0a1222 100%);
    border-bottom: 1px solid var(--line);
}
.cs-stage-glow {
    position: absolute;
    left: 50%;
    top: 46%;
    width: 480px;
    height: 480px;
    margin: -240px 0 0 -240px;
    background: repeating-conic-gradient(color-mix(in srgb, var(--r) 18%, transparent) 0 7deg, transparent 7deg 22deg);
    -webkit-mask-image: radial-gradient(circle, #000 12%, transparent 62%);
    mask-image: radial-gradient(circle, #000 12%, transparent 62%);
    animation: cs-rays 40s linear infinite;
}
@keyframes cs-rays { to { transform: rotate(360deg); } }
.cs-floor {
    position: absolute;
    left: -10%;
    right: -10%;
    bottom: -10px;
    height: 110px;
    background: repeating-conic-gradient(color-mix(in srgb, var(--r) 16%, rgba(255, 255, 255, 0.03)) 0 25%, transparent 0 50%) 0 0 / 24px 24px;
    transform: perspective(260px) rotateX(58deg);
    transform-origin: bottom;
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 60%);
    mask-image: linear-gradient(180deg, transparent, #000 60%);
}
.cs-stage::after { content: ''; position: absolute; left: 50%; bottom: 34px; z-index: 1; width: 150px; height: 20px; margin-left: -75px; border-radius: 50%; background: radial-gradient(ellipse, rgba(0, 0, 0, 0.6), transparent 70%); }
.cs-figure { position: absolute; left: 50%; bottom: 42px; z-index: 2; width: 120px; height: 270px; margin-left: -60px; transition: transform 0.6s var(--ease); }
.cs-figure.is-flipped { transform: scaleX(-1); }
.cs-skin { position: relative; z-index: 2; display: block; width: 100%; height: 100%; object-fit: contain; object-position: bottom; image-rendering: pixelated; filter: drop-shadow(0 14px 16px rgba(0, 0, 0, 0.45)); }
.cs-slot { position: absolute; pointer-events: none; }
.cs-slot svg { display: block; width: 100%; height: auto; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.45)) drop-shadow(0 0 12px color-mix(in srgb, var(--r) 45%, transparent)); animation: cs-pop 0.55s var(--ease) both; }
@keyframes cs-pop { from { opacity: 0; transform: translateY(-12px) scale(0.85); } }
.cs-slot--back { z-index: 1; left: 50%; top: 27%; width: 88%; transform: translateX(-50%); }
.cs-stage[data-kind="kanat"] .cs-slot--back { top: 17%; width: 172%; }
.cs-stage[data-kind="kanat"] .cs-slot--back svg { animation: cs-pop 0.55s var(--ease) both, cs-flap 2.4s ease-in-out 0.6s infinite; transform-origin: center; }
@keyframes cs-flap { 50% { transform: scaleX(0.9) translateY(-3px); } }
.cs-slot--head { z-index: 3; left: 50%; top: -14%; width: 70%; transform: translateX(-50%); }
.cs-stage[data-item="beanie"] .cs-slot--head { top: -10%; width: 66%; }
.cs-stage[data-item="tophat"] .cs-slot--head { top: -22%; }
.cs-slot--hand { z-index: 3; right: -30%; top: 38%; width: 58%; }
.cs-slot--aura { z-index: 3; left: 50%; top: -30%; width: 130%; transform: translateX(-50%); }
.cs-slot--aura svg { animation: cs-pop 0.55s var(--ease) both, cs-float 3.2s ease-in-out 0.6s infinite; }
.cs-stage[data-item="fire"] .cs-slot--aura { top: auto; bottom: -8%; width: 150%; }
.cs-slot--pet { z-index: 3; left: calc(50% - 150px); bottom: 36px; width: 84px; transition: left 0.6s var(--ease), right 0.6s var(--ease); }
.cs-slot--pet svg { animation: cs-pop 0.55s var(--ease) both, cs-float 2.6s ease-in-out 0.6s infinite; }
.cs-stage.is-flipped .cs-slot--pet { left: calc(50% + 66px); }
.cs-stage.is-flipped .cs-slot--pet svg { transform: scaleX(-1); animation: none; }
@keyframes cs-float { 50% { translate: 0 -6px; } }
.cs-rot { position: absolute; bottom: 0.9rem; z-index: 5; isolation: isolate; width: 38px; height: 38px; display: grid; place-items: center; padding: 0; border: 0; color: #ffd3b0; background: rgba(255, 138, 61, 0.55); clip-path: var(--px-sm); cursor: pointer; }
.cs-rot::before { content: ''; position: absolute; inset: 1.5px; z-index: -1; background: #0e172a; clip-path: var(--px-sm); transition: background 0.2s var(--ease); }
.cs-rot:hover::before { background: #1f2944; }
.cs-rot svg { width: 7px; height: 12px; }
.cs-rot--l { left: 0.9rem; }
.cs-rot--r { right: 0.9rem; }

.cs-pv-body { padding: 1.2rem 1.3rem 1.35rem; }
.cs-pv-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; }
.cs-pv-tags .cs-rar { margin: 0 0.3rem 0 0; }
.cs-pv-name { margin: 0.65rem 0 0; font-family: var(--font-brand); font-size: 1.5rem; font-weight: 700; line-height: 1.15; color: #fff; }
.cs-pv-desc { margin: 0.5rem 0 0; font-size: 0.88rem; line-height: 1.6; color: var(--muted); }
.cs-pv-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 0.55rem; margin: 1rem 0 0; }
.cs-pv-meta div { padding: 0.6rem 0.7rem; border-radius: 10px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--line); }
.cs-pv-meta dt { font-size: 0.58rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); }
.cs-pv-meta dd { margin: 0.25rem 0 0; font-size: 0.84rem; font-weight: 600; color: #fff; }
.cs-pv-price { display: flex; flex-direction: column; gap: 0.35rem; margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.cs-pv-amount { display: flex; align-items: center; gap: 0.5rem; font-family: var(--font-mono); }
.cs-pv-amount .cs-coin { width: 22px; height: 22px; }
.cs-pv-amount b { font-size: 1.6rem; font-weight: 600; line-height: 1; color: #fff; }
.cs-pv-amount small { font-family: 'Inter', sans-serif; font-size: 0.8rem; color: var(--muted); }
.cs-pv-amount s { font-size: 0.86rem; color: var(--faint); }
.cs-pv-bal { font-size: 0.78rem; color: var(--faint); }
.cs-pv-bal b { font-family: var(--font-mono); color: var(--text); }
.cs-pv-bal a { color: #ffb07a; font-weight: 600; }
.cs-pv-actions { display: grid; gap: 0.6rem; margin-top: 1rem; }
.cs-pv-buy { width: 100%; }
.cs-pv-sub { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.cs-pv-sub .btn-ghost-px { height: 40px; padding: 0 0.6rem; font-size: 0.68rem; letter-spacing: 0.12em; border: 0; cursor: pointer; }
.cs-pv-sub .btn-ghost-px.is-on { color: #042f2e; background: #5eead4; }
.cs-pv-sub .btn-ghost-px.is-on::before { background: linear-gradient(180deg, #99f6e4, #2dd4bf); }
.cs-pv-owned { display: flex; align-items: flex-start; gap: 0.6rem; margin: 1rem 0 0; padding: 0.8rem 0.9rem; border-radius: 12px; font-size: 0.84rem; line-height: 1.5; color: #ccfbf1; background: rgba(45, 212, 191, 0.1); border: 1px solid rgba(94, 234, 212, 0.3); }
.cs-pv-owned svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 0.1rem; color: #5eead4; }
.cs-pv-owned b { color: #fff; }

/* Sepet şeridi */
.cs-cartbar {
    position: fixed;
    right: 1.5rem;
    bottom: 1.5rem;
    z-index: 45;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.5rem 0.5rem 0.5rem 0.55rem;
    border-radius: 14px;
    background: rgba(8, 14, 27, 0.97);
    border: 1px solid rgba(255, 138, 61, 0.45);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.55), 0 0 40px rgba(255, 138, 61, 0.18);
    color: #fff;
    text-decoration: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(140%);
    transition: transform 0.45s var(--ease), opacity 0.3s var(--ease), visibility 0.45s;
}
.cs-cartbar.is-on { opacity: 1; visibility: visible; transform: none; }
.cs-cartbar.is-bump .cs-cartbar-ico { animation: cs-bump 0.45s var(--ease); }
@keyframes cs-bump { 40% { transform: scale(1.18) rotate(-6deg); } }
.cs-cartbar-ico { width: 42px; height: 42px; display: grid; place-items: center; color: #2a1204; background: linear-gradient(180deg, #ffb87e, #ff8a3d); clip-path: var(--px-sm); }
.cs-cartbar-ico svg { width: 18px; height: 16px; }
.cs-cartbar-txt { display: flex; flex-direction: column; line-height: 1.25; }
.cs-cartbar-txt small { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.14em; color: var(--faint); }
.cs-cartbar-txt small b { color: #ffb07a; }
.cs-cartbar-txt span { font-size: 0.92rem; font-weight: 600; }
.cs-cartbar-txt span b { font-family: var(--font-mono); }
.cs-cartbar-go { height: 42px; padding: 0 0.9rem 0 1rem; display: flex; align-items: center; gap: 0.35rem; font-size: 0.8rem; font-weight: 700; color: #ffd3b0; border-left: 1px solid var(--line); }
.cs-cartbar:hover .cs-cartbar-go span { transform: translateX(3px); }
.cs-cartbar-go span { transition: transform 0.2s var(--ease); }

.cs-backdrop { display: none; }
html.cs-lock { overflow: hidden; }

/* ---------- Duyarlı ---------- */
@media (max-width: 1279px) {
    .cs-layout { grid-template-columns: 250px minmax(0, 1fr); }
    .cs-preview { position: fixed; top: auto; left: 50%; bottom: 0; z-index: 60; width: min(560px, 100%); transform: translate(-50%, 104%); visibility: hidden; transition: transform 0.45s var(--ease), visibility 0.45s; }
    .cs-preview.is-open { transform: translate(-50%, 0); visibility: visible; }
    .cs-pv { max-height: 92vh; border-bottom: 0; border-radius: 22px 22px 0 0; }
    .cs-pv-grab { display: block; position: absolute; top: 7px; left: 50%; z-index: 7; width: 44px; height: 4px; margin-left: -22px; border-radius: 2px; background: rgba(255, 255, 255, 0.28); }
    .cs-pv-head { padding-top: 1rem; }
    .cs-pv-close { display: grid; }
    .cs-stage { height: 300px; }
    .cs-backdrop { display: block; position: fixed; inset: 0; z-index: 55; background: rgba(3, 6, 12, 0.66); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); opacity: 0; visibility: hidden; transition: opacity 0.3s var(--ease), visibility 0.3s; }
    .cs-backdrop.is-open { opacity: 1; visibility: visible; }
}
@media (max-width: 1000px) {
    .cs-layout { grid-template-columns: minmax(0, 1fr); }
    .cs-season { grid-template-columns: 1fr; gap: 2rem; padding: 2.2rem 1.8rem; }
    .cs-season::after { left: 1.8rem; right: 1.8rem; }
    .cs-season-items { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .cs-ftoggle { display: inline-flex; }
    .cs-col-mini { display: flex; align-items: center; gap: 0.7rem; min-width: 190px; font-size: 0.78rem; color: var(--muted); }
    .cs-col-mini b { font-family: var(--font-mono); color: #fff; }
    .cs-col-mini .progress { flex: 1; height: 8px; min-width: 60px; }
    .cs-filters { position: fixed; top: 0; bottom: 0; left: 0; z-index: 60; width: min(340px, 88vw); overflow-y: auto; background: #070d19; border-right: 1px solid rgba(255, 138, 61, 0.3); box-shadow: 30px 0 80px rgba(0, 0, 0, 0.6); transform: translateX(-105%); visibility: hidden; transition: transform 0.4s var(--ease), visibility 0.4s; }
    .cs-filters.is-open { transform: none; visibility: visible; }
    .cs-side { position: static; padding: 1rem 1rem 1.5rem; }
    .cs-fdrawer-head { display: flex; align-items: center; justify-content: space-between; padding: 0.2rem 0.1rem; }
    .cs-fdrawer-head b { font-family: var(--font-brand); font-size: 1.1rem; letter-spacing: 0.12em; text-transform: uppercase; color: #fff; }
    .cs-fdrawer-head .cs-pv-close { display: grid; }
    .cs-fdrawer-go { display: inline-flex; width: 100%; height: 46px; border: 0; cursor: pointer; }
}
@media (max-width: 640px) {
    .cs-hero-facts { gap: 0.4rem 1.1rem; font-size: 0.8rem; }
    .cs-season-wrap { margin-bottom: 2rem; }
    .cs-season { padding: 1.6rem 1.15rem 1.3rem; border-radius: 20px; min-height: 0; }
    .cs-season::before { background: linear-gradient(180deg, rgba(6, 12, 24, 0.92) 0%, rgba(6, 12, 24, 0.9) 55%, rgba(6, 12, 24, 0.94) 100%); }
    .cs-season::after { left: 1.15rem; right: 1.15rem; }
    .cs-season-lead { font-size: 0.92rem; }
    .cs-cd { gap: 0.4rem; }
    .cs-cd-seg { flex: 1; min-width: 0; }
    .cs-cd-seg b { font-size: 1.35rem; }
    .cs-cd-seg small { font-size: 0.5rem; letter-spacing: 0.1em; }
    .cs-season-actions .play-btn--lg { width: 100%; }
    .cs-season-note { width: 100%; text-align: center; }
    .cs-season-items { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
    .cs-sitem-art { width: 52px; height: 52px; }
    .cs-toolbar { flex-wrap: wrap; }
    .cs-search { flex-basis: 100%; }
    .cs-sort { flex: 1; width: auto; min-width: 0; }
    .cs-subbar { gap: 0.7rem; }
    .cs-quick { width: 100%; }
    .cs-count { order: 2; }
    .cs-col-mini { order: 3; min-width: 0; flex: 1; justify-content: flex-end; }
    .cs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem; }
    .cs-stage-mini { height: 128px; }
    .cs-art { width: 70px; height: 70px; }
    .cs-card-cat { top: 0.6rem; left: 0.65rem; font-size: 0.54rem; }
    .cs-stage-mini:has(.cs-flag) .cs-card-cat { display: none; }
    .cs-flag { left: 0.45rem; right: auto; }
    .cs-flag { top: 0.45rem; right: 0.45rem; height: 18px; font-size: 0.52rem; }
    .cs-card-body { padding: 0.75rem 0.75rem 0.8rem; }
    .cs-card-name { font-size: 0.9rem; }
    .cs-rar { font-size: 0.6rem; }
    .cs-card-foot { flex-direction: column; align-items: stretch; gap: 0.6rem; padding-top: 0.75rem; }
    .cs-card-actions .cs-btn-pv { flex: 1; }
    .cs-stage { height: 270px; }
    .cs-figure { transform: scale(0.88); transform-origin: bottom center; }
    .cs-figure.is-flipped { transform: scale(-0.88, 0.88); }
    .cs-pv-body { padding: 1rem 1.1rem 1.2rem; }
    .cs-pv-name { font-size: 1.3rem; }
    .cs-cartbar { left: 1rem; right: 1rem; bottom: 1rem; }
    .cs-cartbar-go { margin-left: auto; }
}
@media (prefers-reduced-motion: reduce) {
    .cs-snow::before, .cs-snow::after, .cs-season-dot, .cs-stage-glow,
    .cs-card.rarity-legendary::before, .cs-card.rarity-mythic::before,
    .cs-card .cs-stage-mini::after, .cs-slot svg { animation: none !important; }
    .cs-figure, .cs-preview, .cs-filters, .cs-cartbar { transition: none; }
}

/* ===== kredi.css ===== */
/* =========================================================
   Kredi yükle (cr-) — bakiye, paketler, özel miktar, ödeme, özet
   ========================================================= */
.cr-page { overflow-x: clip; }
.cr-mono { font-family: var(--font-mono); }

/* ---------- Başlık + bakiye kartı ---------- */
.cr-hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); align-items: center; gap: 3.5rem; padding-bottom: 3rem; text-align: left; }
.cr-hero::before { left: 30%; }
.cr-hero .breadcrumb { justify-content: flex-start; }
.cr-hero .page-title { font-size: clamp(2.4rem, 5vw, 4rem); }
.cr-hero .page-lead { margin-left: 0; max-width: 520px; }
.cr-accent { background: linear-gradient(180deg, #ffe7d6, #ff8a3d 70%, #dd6320); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 8px 30px rgba(255, 138, 61, 0.35)); }
.cr-points { display: flex; flex-wrap: wrap; gap: 0.6rem 1.4rem; margin: 1.6rem 0 0; padding: 0; list-style: none; font-size: 0.9rem; color: var(--muted); text-shadow: 0 1px 2px rgba(5, 10, 20, 0.9); }
.cr-points li { display: inline-flex; align-items: center; gap: 0.45rem; }
.cr-points svg { width: 15px; height: 15px; color: #5eead4; }

.cr-balance {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 1.5rem 1.6rem 1.35rem;
    border-radius: 22px;
    background: linear-gradient(155deg, rgba(255, 138, 61, 0.2), rgba(8, 14, 27, 0) 55%), #0a1222;
    border: 1px solid rgba(255, 138, 61, 0.38);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5), 0 0 60px rgba(255, 138, 61, 0.12);
}
.cr-balance::before { content: ''; position: absolute; left: 1.6rem; right: 1.6rem; top: 0; height: 2px; background: repeating-linear-gradient(90deg, #ff8a3d 0 8px, transparent 8px 14px); opacity: 0.7; }
.cr-bal-deco { position: absolute; right: -44px; top: -40px; z-index: -1; width: 210px; height: 210px; opacity: 0.08; transform: rotate(12deg); }
.cr-bal-top { display: flex; align-items: center; gap: 0.8rem; }
.cr-bal-top .mc-head { width: 44px; height: 44px; }
.cr-bal-who { display: flex; flex-direction: column; line-height: 1.25; }
.cr-bal-who small { font-size: 0.6rem; font-weight: 800; letter-spacing: 0.18em; color: var(--faint); }
.cr-bal-who b { font-family: var(--font-brand); font-size: 1.1rem; letter-spacing: 0.04em; color: #fff; }
.cr-bal-top .badge { margin-left: auto; }
.cr-bal-label { margin-top: 1.4rem; font-size: 0.64rem; font-weight: 800; letter-spacing: 0.2em; color: #ffb07a; }
.cr-bal-amount { display: flex; align-items: center; gap: 0.75rem; margin-top: 0.45rem; }
.cr-bal-coin { width: 42px; height: 42px; filter: drop-shadow(0 0 14px rgba(255, 138, 61, 0.5)); animation: cr-coin 3.4s ease-in-out infinite; }
@keyframes cr-coin { 50% { transform: translateY(-3px); } }
.cr-bal-amount b { font-family: var(--font-mono); font-size: 3rem; font-weight: 600; line-height: 1; letter-spacing: -0.02em; color: #fff; }
.cr-bal-amount span { align-self: flex-end; margin-bottom: 0.35rem; font-size: 0.9rem; color: var(--muted); }
.cr-bal-worth { margin: 0.55rem 0 0; font-size: 0.84rem; color: var(--muted); }
.cr-tier { margin-top: 1.2rem; padding: 0.95rem 1rem; border-radius: 14px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--line); }
.cr-tier-head { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.8rem; color: var(--muted); }
.cr-tier-head b { color: #ffd3b0; }
.cr-tier-num { font-family: var(--font-mono); font-size: 0.76rem; }
.cr-tier-num b { color: #fff; }
.cr-tier .progress { margin: 0.6rem 0 0.55rem; }
.cr-tier small { display: block; font-size: 0.76rem; line-height: 1.5; color: var(--faint); }
.cr-tier small b { color: #e2e8f0; }
.cr-bal-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; margin: 0.9rem 0 0; }
.cr-bal-stats div { padding: 0.6rem 0.75rem; border-radius: 10px; background: rgba(255, 255, 255, 0.025); border: 1px solid var(--line); }
.cr-bal-stats dt { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); }
.cr-bal-stats dd { margin: 0.25rem 0 0; font-size: 0.84rem; font-weight: 600; color: #fff; }
.cr-bal-links { display: flex; justify-content: space-between; gap: 1rem; margin-top: 1rem; padding-top: 0.9rem; border-top: 1px solid var(--line); }
.cr-bal-links .link-more { font-size: 0.82rem; color: #ffb07a; }

/* ---------- Paketler ---------- */
.cr-packs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4rem 1.1rem; padding-top: 0.6rem; }
.cr-pack {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    border-radius: 20px;
    background: #0a1222;
    border: 1px solid rgba(255, 255, 255, 0.08);
    cursor: pointer;
    transition: transform 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.cr-pack:hover { transform: translateY(-3px); border-color: rgba(255, 176, 122, 0.35); }
.cr-pack input { position: absolute; opacity: 0; pointer-events: none; }
.cr-pack:has(input:checked) { transform: translateY(-4px); border-color: #ff8a3d; box-shadow: 0 0 0 1px #ff8a3d, 0 0 0 6px rgba(255, 138, 61, 0.13), 0 26px 60px rgba(0, 0, 0, 0.45), 0 0 60px rgba(255, 138, 61, 0.2); }
.cr-pack:has(input:focus-visible) { outline: 2px solid #5eead4; outline-offset: 4px; }
.cr-pack.is-popular { border-color: rgba(94, 234, 212, 0.45); }
.cr-pack-art {
    position: relative;
    height: 176px;
    display: grid;
    place-items: end center;
    overflow: hidden;
    padding-bottom: 18px;
    border-radius: 19px 19px 0 0;
    background: radial-gradient(ellipse 50% 60% at 50% 78%, rgba(255, 138, 61, 0.3), transparent 70%), linear-gradient(180deg, #0f1b31, #0a1222);
}
.cr-pack-art::before {
    content: '';
    position: absolute;
    left: -20%;
    right: -20%;
    bottom: -18px;
    height: 70px;
    background: repeating-conic-gradient(rgba(255, 138, 61, 0.13) 0 25%, transparent 0 50%) 0 0 / 16px 16px;
    transform: perspective(170px) rotateX(58deg);
    transform-origin: bottom;
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 70%);
    mask-image: linear-gradient(180deg, transparent, #000 70%);
}
.cr-pack-art svg { position: relative; width: 200px; height: 140px; filter: drop-shadow(0 10px 12px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 16px rgba(255, 138, 61, 0.28)); transition: transform 0.4s var(--ease); }
.cr-pack:hover .cr-pack-art svg, .cr-pack:has(input:checked) .cr-pack-art svg { transform: translateY(-4px) scale(1.04); }
.cr-pack-body { display: flex; flex-direction: column; gap: 0.45rem; padding: 1.05rem 1.3rem 0; }
.cr-pack-amount { display: flex; align-items: baseline; gap: 0.5rem; }
.cr-pack-amount b { font-family: var(--font-mono); font-size: 2.2rem; font-weight: 600; line-height: 1; letter-spacing: -0.02em; color: #fff; }
.cr-pack-amount small { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.2em; color: #ffb07a; }
.cr-pack-bonus { align-self: flex-start; display: inline-flex; align-items: center; height: 24px; padding: 0 0.55rem; border-radius: 6px; font-size: 0.74rem; font-weight: 700; color: #99f6e4; background: rgba(45, 212, 191, 0.12); border: 1px solid rgba(94, 234, 212, 0.3); }
.cr-pack-bonus--none { font-weight: 600; color: var(--muted); background: rgba(255, 255, 255, 0.04); border-color: var(--line); }
.cr-pack-total { font-size: 0.84rem; color: var(--muted); }
.cr-pack-total b { font-family: var(--font-mono); font-weight: 600; color: #fff; }
.cr-pack-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 0.8rem; margin-top: auto; padding: 1rem 1.3rem 1.2rem; }
.cr-pack-body + .cr-pack-foot { margin-top: 1rem; border-top: 1px dashed rgba(255, 255, 255, 0.1); }
.cr-pack-price { font-family: var(--font-mono); font-size: 1.45rem; font-weight: 600; color: #fff; }
.cr-pack-unit { display: flex; flex-direction: column; align-items: flex-end; font-family: var(--font-mono); font-size: 0.7rem; color: var(--faint); text-align: right; }
.cr-pack-unit em { margin-top: 0.15rem; font-family: 'Inter', sans-serif; font-size: 0.72rem; font-style: normal; font-weight: 700; color: #6ee7b7; }
.cr-ribbon { position: absolute; top: 16px; left: -6px; z-index: 3; height: 28px; padding: 0 1.1rem 0 0.8rem; display: grid; place-items: center; font-family: var(--font-mono); font-size: 0.84rem; font-weight: 700; color: #2a1204; background: linear-gradient(180deg, #ffc89c, #ff8a3d); clip-path: polygon(0 0, 100% 0, calc(100% - 7px) 50%, 100% 100%, 0 100%); box-shadow: inset 0 -3px 0 rgba(110, 36, 4, 0.35); }
.cr-ribbon::after { content: ''; }
.cr-pack-tag { position: absolute; top: -12px; left: 50%; z-index: 4; height: 24px; padding: 0 0.85rem; display: grid; place-items: center; font-size: 0.6rem; font-weight: 800; letter-spacing: 0.14em; white-space: nowrap; color: #042f2e; background: linear-gradient(180deg, #ccfbf1, #2dd4bf); clip-path: var(--px-sm); transform: translateX(-50%); }
.cr-pack-tag--best { color: #2a1204; background: linear-gradient(180deg, #ffd3b0, #ff9a52); }
.cr-pack-check { position: absolute; top: 14px; right: 14px; z-index: 3; width: 26px; height: 26px; display: grid; place-items: center; color: transparent; background: rgba(255, 255, 255, 0.08); clip-path: var(--px-sm); transition: background 0.2s var(--ease), color 0.2s var(--ease); }
.cr-pack-check svg { width: 12px; height: 11px; }
.cr-pack:has(input:checked) .cr-pack-check { color: #2a1204; background: #ff8a3d; }

/* ---------- Özel miktar + ödeme ---------- */
.cr-opts { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 1.1rem; margin-top: 1.4rem; }
.cr-custom, .cr-pay { padding: 1.4rem 1.5rem; border-radius: 20px; background: var(--glass-strong); border: 1px solid var(--line); transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease); }
.cr-custom.is-selected { border-color: #ff8a3d; box-shadow: 0 0 0 1px #ff8a3d, 0 0 0 6px rgba(255, 138, 61, 0.13); }
.cr-custom-head { display: flex; align-items: flex-start; gap: 0.9rem; }
.cr-custom-head .feat-ico { flex-shrink: 0; }
.cr-custom-head h3 { margin: 0; font-size: 1.05rem; color: #fff; }
.cr-custom-head p { margin: 0.25rem 0 0; font-size: 0.84rem; line-height: 1.55; color: var(--muted); }
.cr-custom-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.2rem; margin-top: 1.2rem; }
.cr-stepper { display: flex; }
.cr-stepper button { width: 48px; height: 48px; flex-shrink: 0; border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.04); color: #ffd3b0; font-size: 1.3rem; font-weight: 600; cursor: pointer; transition: background 0.2s var(--ease); }
.cr-stepper button:hover { background: rgba(255, 138, 61, 0.14); }
.cr-stepper button:first-child { border-radius: 12px 0 0 12px; border-right: 0; }
.cr-stepper button:last-child { border-radius: 0 12px 12px 0; border-left: 0; }
.cr-stepper .input { min-width: 0; border-radius: 0; text-align: center; font-family: var(--font-mono); font-size: 1.2rem; font-weight: 600; }
.cr-quick { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.6rem; }
.cr-quick button { height: 30px; padding: 0 0.7rem; border: 1px solid var(--line); border-radius: 8px; background: rgba(255, 255, 255, 0.03); color: var(--muted); font-family: var(--font-mono); font-size: 0.76rem; cursor: pointer; transition: color 0.2s var(--ease), border-color 0.2s var(--ease); }
.cr-quick button:hover { color: #ffd3b0; border-color: rgba(255, 138, 61, 0.45); }
.cr-calc { display: grid; align-content: start; gap: 0.55rem; padding: 0.95rem 1rem; border-radius: 14px; background: rgba(5, 10, 20, 0.75); border: 1px solid var(--line); }
.cr-calc-row { display: flex; align-items: baseline; justify-content: space-between; gap: 0.8rem; font-size: 0.84rem; color: var(--muted); }
.cr-calc-row b { font-family: var(--font-mono); font-weight: 600; color: #fff; }
.cr-calc-row em { font-style: normal; font-family: var(--font-mono); font-size: 0.74rem; color: #5eead4; }
.cr-calc-bonus b { color: #5eead4; }
.cr-calc-total { margin-top: 0.1rem; padding-top: 0.6rem; border-top: 1px dashed rgba(255, 255, 255, 0.12); }
.cr-calc-total b { font-size: 1.2rem; color: #ffd3b0; }
.cr-track { position: relative; height: 10px; margin: 1.6rem 7px 2.2rem; border-radius: 3px; background: rgba(255, 255, 255, 0.08); }
.cr-track-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 3px; background: repeating-linear-gradient(90deg, #ff8a3d 0 8px, #ffa564 8px 10px); box-shadow: 0 0 12px rgba(255, 138, 61, 0.5); transition: width 0.45s var(--ease); }
.cr-mark { position: absolute; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; background: #0a1222; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.28); transition: background 0.3s var(--ease), box-shadow 0.3s var(--ease); }
.cr-mark--1 { left: 25%; } .cr-mark--2 { left: 50%; } .cr-mark--3 { left: 75%; } .cr-mark--4 { left: 100%; }
.cr-mark.is-hit { background: #ff8a3d; box-shadow: inset 0 0 0 2px #ffd3b0, 0 0 12px rgba(255, 138, 61, 0.7); }
.cr-mark small { position: absolute; top: 20px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-family: var(--font-mono); font-size: 0.66rem; color: var(--faint); }
.cr-mark--4 small { transform: translateX(-88%); }
.cr-mark b { color: #99f6e4; }
.cr-mark.is-hit small { color: var(--text); }
.cr-custom-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.8rem 1rem; }
.cr-next { margin: 0; font-size: 0.86rem; color: var(--muted); }
.cr-next b { font-family: var(--font-mono); color: #ffd3b0; }
.cr-use { height: 42px; border: 0; cursor: pointer; }
.cr-use.is-on { color: #2a1204; background: #ffcca3; }
.cr-use.is-on::before { background: linear-gradient(180deg, #ffae6e, #f47a2e); }

.cr-pay .panel-title { margin-bottom: 1rem; }
.cr-pay-list { display: grid; gap: 0.6rem; }
.cr-pay-opt { gap: 0.8rem; padding: 0.85rem 1rem; }
.cr-pay-ico { width: 40px; height: 32px; flex-shrink: 0; display: grid; place-items: center; border-radius: 7px; color: #ffd3b0; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line); }
.cr-pay-ico svg { width: 21px; height: 21px; }
.cr-pay-txt { display: flex; flex: 1; flex-direction: column; min-width: 0; line-height: 1.35; }
.cr-pay-txt b { font-size: 0.92rem; color: #fff; }
.cr-pay-txt small { font-size: 0.76rem; color: var(--faint); }
.cr-pay-opt .badge { flex-shrink: 0; }
.cr-pay-note { display: flex; align-items: flex-start; gap: 0.55rem; margin: 1rem 0 0; font-size: 0.78rem; line-height: 1.55; color: var(--faint); }
.cr-pay-note svg { width: 15px; height: 15px; flex-shrink: 0; margin-top: 0.1rem; color: #5eead4; }

/* ---------- Yapışkan özet ---------- */
.cr-summary {
    position: sticky;
    bottom: 14px;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 1.2rem;
    margin-top: 1.4rem;
    padding: 0.8rem 0.85rem 0.8rem 0.9rem;
    border-radius: 18px;
    background: rgba(9, 15, 29, 0.97);
    border: 1px solid rgba(255, 138, 61, 0.45);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), 0 0 50px rgba(255, 138, 61, 0.14);
}
.cr-sum-art { width: 54px; height: 54px; flex-shrink: 0; display: grid; place-items: center; border-radius: 12px; background: rgba(255, 138, 61, 0.12); border: 1px solid rgba(255, 138, 61, 0.3); }
.cr-sum-art svg { width: 30px; height: 30px; }
.cr-sum-main { display: flex; flex: 1; flex-direction: column; min-width: 0; line-height: 1.3; }
.cr-summary small { font-size: 0.6rem; font-weight: 800; letter-spacing: 0.16em; color: var(--faint); }
.cr-sum-main b { font-size: 1.05rem; color: #fff; }
.cr-sum-main span { font-size: 0.8rem; color: var(--muted); }
.cr-sum-col { display: flex; flex-direction: column; align-items: flex-end; padding: 0 1.2rem; border-left: 1px solid var(--line); line-height: 1.3; }
.cr-sum-col b { font-family: var(--font-mono); font-size: 1.35rem; font-weight: 600; color: #fff; white-space: nowrap; }
.cr-sum-total { color: #ffd3b0 !important; }
.cr-sum-total i { font-family: 'Inter', sans-serif; font-size: 0.78rem; font-style: normal; font-weight: 500; color: var(--muted); }
.cr-sum-go { flex-shrink: 0; --pb-h: 52px; padding: 0 1.6rem 0 1.3rem; }
.cr-summary.is-flash .cr-sum-col b, .cr-summary.is-flash .cr-sum-main b { animation: cr-flash 0.5s var(--ease); }
@keyframes cr-flash { 40% { color: #fff; text-shadow: 0 0 14px rgba(255, 176, 122, 0.9); } }

/* ---------- Güven şeridi ---------- */
.cr-trust { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin: 2.2rem 0 0; padding: 1.1rem 1.3rem; list-style: none; border-radius: 18px; background: var(--glass-strong); border: 1px solid var(--line); }
.cr-trust li { display: flex; align-items: center; gap: 0.8rem; }
.cr-trust li + li { padding-left: 1rem; border-left: 1px solid var(--line); }
.cr-trust .feat-ico { width: 38px; height: 38px; flex-shrink: 0; }
.cr-trust li > span:last-child { display: flex; flex-direction: column; line-height: 1.35; }
.cr-trust b { font-size: 0.9rem; color: #fff; }
.cr-trust small { font-size: 0.76rem; color: var(--faint); }
.cr-trust code { font-family: var(--font-mono); font-size: 0.72rem; color: var(--muted); }

/* ---------- Kullanım alanları ---------- */
.cr-uses { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem; }
.cr-use-card { --c: #ff8a3d; display: flex; flex-direction: column; overflow: hidden; border-radius: 20px; background: #0a1222; border: 1px solid var(--line); color: inherit; text-decoration: none; transition: transform 0.35s var(--ease), border-color 0.35s var(--ease), box-shadow 0.35s var(--ease); }
.cr-use--teal { --c: #5eead4; } .cr-use--orange { --c: #ff8a3d; } .cr-use--pink { --c: #f472b6; }
.cr-use-card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--c) 55%, transparent); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45), 0 0 40px color-mix(in srgb, var(--c) 18%, transparent); }
.cr-use-stage { position: relative; height: 170px; display: grid; place-items: center; background: radial-gradient(ellipse 45% 60% at 50% 60%, color-mix(in srgb, var(--c) 28%, transparent), transparent 72%), repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 24px), repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 24px), linear-gradient(180deg, #0f1b31, #0a1222); border-bottom: 1px solid var(--line); }
.cr-use-art { width: 104px; height: 104px; filter: drop-shadow(0 12px 12px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 18px color-mix(in srgb, var(--c) 40%, transparent)); transition: transform 0.4s var(--ease); }
.cr-use-card:hover .cr-use-art { transform: translateY(-6px) rotate(-3deg); }
.cr-use-body { display: flex; flex: 1; flex-direction: column; gap: 0.45rem; padding: 1.2rem 1.35rem 1.35rem; }
.cr-use-num { font-family: var(--font-mono); font-size: 0.72rem; font-weight: 600; color: var(--c); }
.cr-use-title { font-family: var(--font-brand); font-size: 1.3rem; font-weight: 700; letter-spacing: 0.04em; color: #fff; }
.cr-use-text { font-size: 0.9rem; line-height: 1.6; color: var(--muted); }
.cr-use-ex { margin-top: 0.2rem; padding: 0.5rem 0.7rem; border-radius: 9px; font-size: 0.78rem; color: var(--faint); background: rgba(255, 255, 255, 0.03); border: 1px dashed var(--line-strong); }
.cr-use-ex b { font-family: var(--font-mono); color: #fff; }
.cr-use-body .link-more { margin-top: auto; padding-top: 0.5rem; color: var(--c); }

/* ---------- Duyarlı ---------- */
@media (max-width: 1000px) {
    .cr-hero { grid-template-columns: 1fr; gap: 2.2rem; }
    .cr-balance { max-width: 560px; width: 100%; }
    .cr-packs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cr-opts { grid-template-columns: 1fr; }
    .cr-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cr-trust li:nth-child(3) { padding-left: 0; border-left: 0; }
    .cr-uses { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; }
    .cr-use-card { flex-direction: row; }
    .cr-use-stage { width: 170px; height: auto; flex-shrink: 0; border-bottom: 0; border-right: 1px solid var(--line); }
    .cr-use-art { width: 84px; height: 84px; }
}
@media (max-width: 640px) {
    .cr-hero .page-title { font-size: 2.35rem; }
    .cr-points { gap: 0.5rem 1rem; font-size: 0.84rem; }
    .cr-balance { padding: 1.3rem 1.15rem 1.15rem; }
    .cr-bal-amount b { font-size: 2.5rem; }
    .cr-bal-stats dd { font-size: 0.78rem; }
    .cr-bal-links { flex-direction: column; gap: 0.4rem; }
    .cr-packs { gap: 1.3rem 0.7rem; }
    .cr-pack-art { height: 118px; padding-bottom: 12px; }
    .cr-pack-art svg { width: 130px; height: 91px; }
    .cr-pack-body { padding: 0.8rem 0.85rem 0; gap: 0.35rem; }
    .cr-pack-amount { flex-direction: column; gap: 0.15rem; }
    .cr-pack-amount b { font-size: 1.55rem; }
    .cr-pack-amount small { font-size: 0.58rem; }
    .cr-pack-bonus { height: auto; padding: 0.2rem 0.45rem; font-size: 0.66rem; }
    .cr-pack-total { font-size: 0.74rem; }
    .cr-pack-foot { flex-direction: column; align-items: flex-start; gap: 0.2rem; padding: 0.75rem 0.85rem 0.9rem; }
    .cr-pack-body + .cr-pack-foot { margin-top: 0.75rem; }
    .cr-pack-price { font-size: 1.15rem; }
    .cr-pack-unit { align-items: flex-start; text-align: left; font-size: 0.64rem; }
    .cr-pack-unit em { font-size: 0.66rem; }
    .cr-ribbon { top: 10px; height: 22px; padding: 0 0.8rem 0 0.55rem; font-size: 0.7rem; }
    .cr-pack-check { top: 10px; right: 10px; width: 22px; height: 22px; }
    .cr-pack-tag { top: -11px; height: 22px; padding: 0 0.55rem; font-size: 0.5rem; letter-spacing: 0.1em; }
    .cr-custom, .cr-pay { padding: 1.2rem 1.05rem; }
    .cr-custom-grid { grid-template-columns: 1fr; }
    .cr-mark small { font-size: 0.56rem; }
    .cr-mark small b { display: block; text-align: center; }
    .cr-mark--4 small { transform: translateX(-80%); }
    .cr-custom-foot .cr-use { width: 100%; }
    .cr-pay-opt { flex-wrap: wrap; }
    .cr-pay-txt { flex-basis: calc(100% - 18px - 40px - 1.6rem); }   /* yazıya satırın kalanı, rozet alta */
    .cr-pay-opt .badge { margin-left: calc(18px + 40px + 1.6rem); }
    .cr-summary { flex-wrap: wrap; gap: 0.7rem 0.9rem; bottom: 8px; padding: 0.8rem; }
    .cr-sum-art { display: none; }
    .cr-sum-main { flex: 1 1 100%; }
    .cr-sum-col { flex: 1; align-items: flex-start; padding: 0; border-left: 0; }
    .cr-sum-col b { font-size: 1.1rem; }
    .cr-sum-go { flex: 1 1 100%; --pb-h: 48px; }
    .cr-trust { grid-template-columns: 1fr; gap: 0.9rem; }
    .cr-trust li + li { padding: 0.9rem 0 0; border-left: 0; border-top: 1px solid var(--line); }
    .cr-trust li:nth-child(3) { padding-top: 0.9rem; }
    .cr-use-card { flex-direction: column; }
    .cr-use-stage { width: auto; height: 140px; border-right: 0; border-bottom: 1px solid var(--line); }
}
@media (prefers-reduced-motion: reduce) {
    .cr-bal-coin, .cr-summary.is-flash .cr-sum-col b, .cr-summary.is-flash .cr-sum-main b { animation: none; }
    .cr-pack, .cr-track-fill { transition: none; }
}

/* ===== kurallar.css ===== */
/* =========================================================
   Sunucu kuralları (kurallar.html) — önek: ru-
   ========================================================= */
.ru-page { overflow-x: clip; }
.ru-page .page-lead { text-wrap: pretty; }

/* Ciddiyet renkleri */
.ru-sev--1 { --s: #5eead4; }
.ru-sev--2 { --s: #fbbf24; }
.ru-sev--3 { --s: #ff8a3d; }
.ru-sev--4 { --s: #f87171; }

/* ---------- Hero ---------- */
.ru-hero { padding-bottom: 3rem; }
.ru-hero .page-title { font-size: clamp(2.1rem, 4.6vw, 3.5rem); }
.ru-meta { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 0.6rem 1.4rem; margin: 1.5rem 0 0; padding: 0; list-style: none; font-size: 0.86rem; color: var(--muted); text-shadow: 0 1px 2px rgba(5, 10, 20, 0.9), 0 0 18px rgba(5, 10, 20, 0.85); }
.ru-meta li { display: inline-flex; align-items: center; gap: 0.45rem; }
.ru-meta svg { width: 16px; height: 16px; color: #ffb07a; }
.ru-meta b { color: #fff; font-weight: 600; }
.ru-pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.9rem; max-width: 980px; margin: 2.2rem auto 0; text-align: left; }
.ru-pillar { display: flex; align-items: flex-start; gap: 0.9rem; padding: 1.05rem 1.1rem; border-radius: 16px; background: rgba(8, 14, 27, 0.9); border: 1px solid var(--line); }
.ru-pillar-ico {
    position: relative;
    isolation: isolate;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    color: #ff8a3d;
    background: rgba(255, 176, 122, 0.55);
    clip-path: var(--px-sm);
}
.ru-pillar-ico::before { content: ''; position: absolute; inset: 1.5px; z-index: -1; clip-path: var(--px-sm); background: radial-gradient(circle at 50% 30%, #1d2a48, #0a1222 75%); }
.ru-pillar-ico svg { width: 22px; height: 22px; filter: drop-shadow(0 0 6px rgba(255, 138, 61, 0.55)); }
.ru-pillar:nth-child(2) .ru-pillar-ico { color: #5eead4; }
.ru-pillar:nth-child(2) .ru-pillar-ico svg { filter: drop-shadow(0 0 6px rgba(94, 234, 212, 0.5)); }
.ru-pillar:nth-child(3) .ru-pillar-ico { color: #ffb07a; }
.ru-pillar b { display: block; font-family: var(--font-brand); font-size: 1rem; letter-spacing: 0.06em; color: #fff; }
.ru-pillar span:not(.ru-pillar-ico) { display: block; margin-top: 0.25rem; font-size: 0.84rem; line-height: 1.5; color: var(--muted); }

/* ---------- Düzen ---------- */
.ru-layout { gap: 1.75rem; }
.ru-main { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; min-width: 0; }

/* Kenar: arama + içindekiler */
.ru-side { display: grid; gap: 0.9rem; }
.ru-side-card { padding: 1rem; border-radius: 18px; background: var(--glass-strong); border: 1px solid var(--line); }
.ru-search .input { height: 44px; font-size: 0.9rem; }
.ru-search-hint { margin: 0.55rem 0.2rem 0; font-size: 0.76rem; color: var(--faint); }
.ru-search-hint b { font-family: var(--font-mono); color: #ffd3b0; }
.ru-toc { display: grid; gap: 0.1rem; margin-top: 0.8rem; padding-top: 0.8rem; border-top: 1px solid var(--line); }
.ru-toc-link { position: relative; display: flex; align-items: center; gap: 0.7rem; padding: 0.55rem 0.6rem; border-radius: 9px; font-size: 0.86rem; color: var(--muted); text-decoration: none; transition: color 0.2s var(--ease), background 0.2s var(--ease), opacity 0.2s var(--ease); }
.ru-toc-link:hover { color: #fff; background: rgba(255, 255, 255, 0.035); }
.ru-toc-n { font-family: var(--font-mono); font-size: 0.7rem; color: var(--faint); }
.ru-toc-t { flex: 1; min-width: 0; }
.ru-toc-link b { min-width: 24px; padding: 0.05rem 0.35rem; border-radius: 5px; font-family: var(--font-mono); font-size: 0.7rem; font-weight: 600; text-align: center; color: var(--faint); background: rgba(255, 255, 255, 0.05); }
.ru-toc-link.is-active { color: #fff; background: linear-gradient(90deg, rgba(255, 138, 61, 0.16), rgba(255, 138, 61, 0.03)); }
.ru-toc-link.is-active::before { content: ''; position: absolute; left: -1rem; top: 50%; width: 6px; height: 14px; transform: translateY(-50%); background: #ff8a3d; box-shadow: 0 0 10px rgba(255, 138, 61, 0.8); }
.ru-toc-link.is-active .ru-toc-n { color: #ffb07a; }
.ru-toc-link.is-active b { color: #2a1204; background: #ffb07a; }
.ru-toc-link.is-empty { opacity: 0.35; }
.ru-toc-link.is-match b { color: #2a1204; background: #5eead4; }
.ru-toc-sep { height: 1px; margin: 0.35rem 0.6rem; background: var(--line); }
.ru-read { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0.45rem 0.6rem; margin-top: 0.8rem; padding-top: 0.85rem; border-top: 1px solid var(--line); }
.ru-read small { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; color: var(--faint); }
.ru-read .progress { grid-column: 1 / -1; grid-row: 2; height: 8px; }
.ru-read .progress > span { transition: width 0.2s linear; }
.ru-read b { font-family: var(--font-mono); font-size: 0.74rem; color: #ffd3b0; }
.ru-side-report { display: flex; align-items: center; gap: 0.8rem; padding: 0.9rem 1rem; border-radius: 16px; background: rgba(8, 14, 27, 0.9); border: 1px dashed rgba(255, 138, 61, 0.4); font-size: 0.84rem; color: var(--muted); text-decoration: none; transition: border-color 0.2s var(--ease); }
.ru-side-report:hover { border-color: rgba(255, 176, 122, 0.8); }
.ru-side-report b { display: block; margin-top: 0.1rem; color: #ffb07a; }
.ru-side-report-ico { width: 34px; height: 34px; flex-shrink: 0; display: grid; place-items: center; color: #2a1204; background: linear-gradient(180deg, #ffb87e, #ff8a3d); clip-path: var(--px-sm); }
.ru-side-report-ico svg { width: 16px; height: 16px; }

/* Ciddiyet göstergesi: 4 piksel kare */
.ru-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.2rem; margin: 0; padding: 0.8rem 1.1rem; border-radius: 14px; font-size: 0.8rem; color: var(--faint); background: rgba(8, 14, 27, 0.88); border: 1px solid var(--line); }
.ru-legend > span:first-child { font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; font-size: 0.68rem; }
.ru-sev { display: inline-flex; align-items: center; gap: 2px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; color: var(--s, var(--muted)); white-space: nowrap; }
.ru-sev i { width: 8px; height: 8px; background: rgba(255, 255, 255, 0.1); }
.ru-sev i:last-of-type { margin-right: 0.45rem; }
.ru-sev--1 i:nth-child(-n + 1), .ru-sev--2 i:nth-child(-n + 2), .ru-sev--3 i:nth-child(-n + 3), .ru-sev--4 i:nth-child(-n + 4) { background: var(--s); box-shadow: 0 0 6px color-mix(in srgb, var(--s) 55%, transparent); }
.ru-sev--ok, .ru-sev--info { gap: 0.35rem; padding: 0.15rem 0.5rem; border-radius: 6px; }
.ru-sev--ok { color: #6ee7b7; background: rgba(16, 185, 129, 0.12); border: 1px solid rgba(52, 211, 153, 0.3); }
.ru-sev--info { color: #bfdbfe; background: rgba(59, 130, 246, 0.12); border: 1px solid rgba(147, 197, 253, 0.28); }

/* Bölüm */
.ru-sec { position: relative; padding: 1.5rem 1.6rem 1.2rem; border-radius: 22px; background: rgba(7, 12, 24, 0.93); border: 1px solid var(--line); scroll-margin-top: 104px; }
.ru-sec-head { position: relative; display: flex; align-items: flex-start; gap: 1rem; padding-bottom: 1.1rem; border-bottom: 1px solid var(--line); }
.ru-sec-head .feat-ico { flex-shrink: 0; }
.ru-sec-head h2 { margin: 0.1rem 0 0; font-family: var(--font-brand); font-size: 1.45rem; font-weight: 700; letter-spacing: 0.02em; color: #fff; }
.ru-sec-head p { max-width: 560px; margin: 0.35rem 0 0; font-size: 0.9rem; line-height: 1.55; color: var(--muted); }
.ru-sec-n { position: absolute; top: -0.4rem; right: 0; font-family: var(--font-brand); font-size: 3.4rem; font-weight: 700; line-height: 1; color: transparent; -webkit-text-stroke: 1px rgba(255, 176, 122, 0.28); pointer-events: none; }
.ru-sec.is-hidden-by-search { display: none; }

/* Kural satırı */
.ru-rules { margin: 0; padding: 0; list-style: none; }
.ru-rule { display: grid; grid-template-columns: 56px minmax(0, 1fr) 200px; align-items: start; gap: 1rem; padding: 1rem 0.2rem; border-bottom: 1px solid var(--line); scroll-margin-top: 110px; transition: background 0.3s var(--ease); }
.ru-rule:last-child { border-bottom: 0; }
.ru-rule:target, .ru-rule.is-flash { background: linear-gradient(90deg, rgba(255, 138, 61, 0.12), transparent 70%); }
.ru-code {
    position: relative;
    isolation: isolate;
    display: grid;
    place-items: center;
    height: 34px;
    font-family: var(--font-mono);
    font-size: 0.84rem;
    font-weight: 600;
    color: #ffd3b0;
    text-decoration: none;
    background: rgba(255, 176, 122, 0.4);
    clip-path: var(--px-sm);
    transition: color 0.2s var(--ease), background 0.2s var(--ease);
}
.ru-code::before { content: ''; position: absolute; inset: 1.5px; z-index: -1; clip-path: var(--px-sm); background: #0e1830; transition: background 0.2s var(--ease); }
.ru-code:hover, .ru-code.is-copied { color: #2a1204; background: #ffcca3; }
.ru-code:hover::before, .ru-code.is-copied::before { background: linear-gradient(180deg, #ffae6e, #f47a2e); }
.ru-rule-body h3 { margin: 0.35rem 0 0; font-size: 1rem; font-weight: 700; color: #fff; }
.ru-rule-body p { margin: 0.35rem 0 0; font-size: 0.9rem; line-height: 1.6; color: var(--muted); }
.ru-rule-body a { color: #ffb07a; }
.ru-pen { display: flex; flex-direction: column; align-items: flex-end; gap: 0.35rem; padding-top: 0.4rem; text-align: right; }
.ru-pen b { font-size: 0.84rem; font-weight: 600; line-height: 1.35; color: #fff; }
.ru-rule--ok .ru-pen b { color: #a7f3d0; }
.ru-rule--info .ru-pen b { color: #dbeafe; }
mark.ru-mark { padding: 0 0.1em; border-radius: 3px; color: #2a1204; background: #ffb07a; }
.ru-rule.is-hidden-by-search { display: none; }
.ru-empty { padding: 3rem 1.5rem; border-radius: 22px; background: var(--glass-strong); border: 1px dashed rgba(255, 176, 122, 0.3); }
.ru-empty h3 { margin: 0.8rem 0 0.3rem; font-size: 1.1rem; color: #fff; }
.ru-empty p { margin: 0 0 1.3rem; font-size: 0.9rem; }

/* ---------- Ceza merdiveni ---------- */
.ru-ladder { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: end; gap: 0.7rem; margin: 1.4rem 0 1.4rem; padding: 0; list-style: none; }
.ru-step { display: flex; flex-direction: column; }
.ru-step-block {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 0.6rem 0.8rem;
    background: color-mix(in srgb, var(--s) 70%, transparent);
    clip-path: var(--px-lg);
}
.ru-step-block::before {
    content: '';
    position: absolute;
    inset: 2px;
    z-index: -1;
    clip-path: var(--px-lg);
    background:
        repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 12px),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 12px),
        linear-gradient(180deg, color-mix(in srgb, var(--s) 32%, #0b1426), #0b1426);
}
.ru-step-block b { font-family: var(--font-brand); font-size: 1.6rem; line-height: 1; color: var(--s); text-shadow: 0 0 14px color-mix(in srgb, var(--s) 60%, transparent); }
.ru-step--1 { --s: #5eead4; } .ru-step--2 { --s: #fbbf24; } .ru-step--3 { --s: #ff8a3d; } .ru-step--4 { --s: #f87171; }
.ru-step--1 .ru-step-block { height: 56px; }
.ru-step--2 .ru-step-block { height: 88px; }
.ru-step--3 .ru-step-block { height: 120px; }
.ru-step--4 .ru-step-block { height: 152px; }
.ru-step strong { margin-top: 0.7rem; font-family: var(--font-brand); font-size: 1rem; letter-spacing: 0.04em; color: #fff; }
.ru-step small { margin-top: 0.2rem; font-size: 0.78rem; line-height: 1.45; color: var(--muted); }

.ru-table { border-radius: 16px; background: rgba(5, 10, 20, 0.6); }
.ru-table .data-table th[scope='row'] { font-size: 0.86rem; font-weight: 600; letter-spacing: 0; color: #fff; background: none; white-space: nowrap; }
.ru-table .data-table th[scope='row'] a { margin-left: 0.35rem; font-family: var(--font-mono); font-size: 0.7rem; font-weight: 500; color: var(--faint); text-decoration: none; }
.ru-table .data-table th[scope='row'] a:hover { color: #ffb07a; }
.ru-table .data-table tbody th { border-bottom: 1px solid var(--line); }
.ru-table .data-table tr:last-child th { border-bottom: 0; }
.ru-table .data-table td { white-space: nowrap; }
.ru-pill { display: inline-flex; align-items: center; height: 26px; padding: 0 0.6rem; border-radius: 6px; font-size: 0.76rem; font-weight: 700; }
.ru-pill--warn { color: #99f6e4; background: rgba(45, 212, 191, 0.12); }
.ru-pill--mute { color: #fde68a; background: rgba(245, 158, 11, 0.12); }
.ru-pill--ban { color: #ffd3b0; background: rgba(255, 138, 61, 0.16); }
.ru-pill--perm { color: #fecaca; background: rgba(239, 68, 68, 0.16); box-shadow: inset 0 0 0 1px rgba(248, 113, 113, 0.35); }
.ru-pill--none { color: var(--faint); }
.ru-table-note { margin: 0.9rem 0.2rem 0.3rem; font-size: 0.82rem; line-height: 1.6; color: var(--faint); }

/* ---------- İtiraz ---------- */
.ru-appeal { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 1.3rem; }
.ru-card { display: flex; flex-direction: column; padding: 1.3rem 1.3rem 1.25rem; border-radius: 18px; background: linear-gradient(160deg, rgba(255, 138, 61, 0.1), rgba(255, 255, 255, 0.02) 60%); border: 1px solid rgba(255, 138, 61, 0.28); }
.ru-card--report { background: linear-gradient(160deg, rgba(94, 234, 212, 0.08), rgba(255, 255, 255, 0.02) 60%); border-color: rgba(94, 234, 212, 0.25); }
.ru-card-kicker { font-size: 0.64rem; font-weight: 800; letter-spacing: 0.18em; color: #ffb07a; }
.ru-card--report .ru-card-kicker { color: #5eead4; }
.ru-card h3 { margin: 0.5rem 0 0; font-family: var(--font-brand); font-size: 1.25rem; color: #fff; }
.ru-steps { display: grid; gap: 0.7rem; margin: 1rem 0 1.3rem; padding: 0; list-style: none; counter-reset: ru-step; }
.ru-steps li { position: relative; padding-left: 2.3rem; font-size: 0.88rem; line-height: 1.55; color: var(--muted); counter-increment: ru-step; }
.ru-steps li::before { content: counter(ru-step); position: absolute; left: 0; top: 0; width: 1.55rem; height: 1.55rem; display: grid; place-items: center; font-family: var(--font-mono); font-size: 0.74rem; font-weight: 700; color: #2a1204; background: #ffb07a; clip-path: var(--px-sm); }
.ru-card--report .ru-steps li::before { background: #5eead4; color: #042f2e; }
.ru-steps b { color: #fff; }
.ru-steps code { padding: 0.08rem 0.35rem; border-radius: 5px; font-family: var(--font-mono); font-size: 0.8rem; color: #ffd3b0; background: rgba(255, 255, 255, 0.06); }
.ru-card .btn-gold, .ru-card .btn-ghost-px { align-self: flex-start; margin-top: auto; }
.ru-note { display: flex; align-items: flex-start; gap: 0.9rem; margin-top: 1rem; padding: 1rem 1.1rem; border-radius: 14px; background: linear-gradient(135deg, rgba(255, 138, 61, 0.12), rgba(45, 212, 191, 0.07)); border: 1px solid rgba(255, 176, 122, 0.28); }
.ru-note-ico { width: 34px; height: 34px; flex-shrink: 0; display: grid; place-items: center; color: #2a1204; background: linear-gradient(135deg, #ffb07a, #5eead4); clip-path: var(--px-sm); }
.ru-note-ico svg { width: 17px; height: 17px; }
.ru-note p { margin: 0; font-size: 0.9rem; line-height: 1.6; color: var(--muted); }
.ru-note b { color: #fff; }

.ru-sr-copy { position: fixed; top: 0; left: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* Kopyalandı bildirimi */
.ru-toast { position: fixed; left: 50%; bottom: 1.5rem; z-index: 80; padding: 0.7rem 1rem; border-radius: 12px; font-size: 0.86rem; font-weight: 600; color: #2a1204; background: linear-gradient(180deg, #ffb87e, #ff8a3d); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55); transform: translate(-50%, 12px); opacity: 0; transition: opacity 0.25s var(--ease), transform 0.25s var(--ease); }
.ru-toast.is-shown { transform: translate(-50%, 0); opacity: 1; }

/* ---------- Duyarlı ---------- */
@media (max-width: 1000px) {
    .ru-pillars { grid-template-columns: 1fr; max-width: 560px; }
    .ru-side { position: sticky; top: 64px; z-index: 5; gap: 0; margin: 0 -1.5rem; padding: 0.6rem 1.5rem; background: rgba(5, 10, 20, 0.94); border-bottom: 1px solid var(--line); }
    .ru-side-card { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.55rem; padding: 0; border: 0; background: none; }
    .ru-search-hint, .ru-read, .ru-side-report, .ru-toc-sep { display: none; }
    .ru-toc { display: flex; gap: 0.35rem; margin: 0; padding: 0; overflow-x: auto; border: 0; scrollbar-width: none; }
    .ru-toc::-webkit-scrollbar { display: none; }
    .ru-toc-link { flex-shrink: 0; padding: 0.4rem 0.7rem; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.03); font-size: 0.8rem; white-space: nowrap; }
    .ru-toc-link.is-active::before { display: none; }
    .ru-toc-link.is-active { border-color: rgba(255, 138, 61, 0.5); }
    .ru-toc-link b { display: none; }
    .ru-sec { scroll-margin-top: 170px; }
    .ru-rule { scroll-margin-top: 180px; }
}
@media (max-width: 640px) {
    .ru-side { top: 64px; margin: 0 -1rem; padding: 0.55rem 1rem; }
    .ru-meta { gap: 0.5rem 1rem; font-size: 0.8rem; }
    .ru-sec { padding: 1.2rem 1rem 0.8rem; border-radius: 18px; }
    .ru-sec-head { gap: 0.8rem; }
    .ru-sec-head .feat-ico { width: 36px; height: 36px; }
    .ru-sec-head h2 { font-size: 1.2rem; }
    .ru-sec-n { font-size: 2.4rem; top: -0.3rem; }
    .ru-sec-head > div { padding-right: 2.6rem; }
    .ru-rule { grid-template-columns: 46px minmax(0, 1fr); gap: 0.25rem 0.8rem; padding: 0.9rem 0; }
    .ru-code { height: 30px; font-size: 0.78rem; }
    .ru-rule-body h3 { margin-top: 0.25rem; }
    .ru-pen { grid-column: 2; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 0.3rem 0.7rem; padding-top: 0.35rem; text-align: left; }
    .ru-legend { gap: 0.5rem 0.9rem; }
    .ru-ladder { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
    .ru-step-block { height: 64px !important; }
    .ru-appeal { grid-template-columns: 1fr; }
    .ru-card .btn-gold, .ru-card .btn-ghost-px { align-self: stretch; }
}
@media (prefers-reduced-motion: reduce) {
    .ru-toast, .ru-read .progress > span { transition: none; }
}

/* ===== magaza.css ===== */
/* =========================================================
   Mağaza (magaza.html) — önek: st-
   ========================================================= */
.st-page { overflow-x: clip; }

/* Rütbe madalyonları: img/cover-vip.jpg içinden kırpılır, renk kimliği hue-rotate ile verilir */
.st-medal {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: url(img/cover-vip.jpg) no-repeat;
    background-size: 603.4% auto;
}
.st-medal--vip { background-position: 20.7% 51.1%; filter: hue-rotate(140deg) saturate(0.85) brightness(1.05); }
.st-medal--svip { background-size: 514.7% auto; background-position: 49.8% 50.2%; filter: hue-rotate(-22deg) saturate(1.15); }
.st-medal--svipp { background-position: 78.9% 51.1%; filter: hue-rotate(-20deg) saturate(1.3) brightness(1.08); }

/* ---------- Hero: bakiye + sepet ---------- */
.st-hero { padding-bottom: 2.2rem; }
.st-hero-actions { gap: 0.9rem; }
.st-balance, .st-cartbtn {
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    height: 56px;
    padding: 0 1.1rem 0 0.95rem;
    border: 0;
    color: #fff;
    font: inherit;
    text-decoration: none;
    cursor: pointer;
    clip-path: var(--px-lg);
    background: rgba(255, 138, 61, 0.5);
    transition: transform 0.2s var(--ease), filter 0.2s var(--ease);
}
.st-balance::before, .st-cartbtn::before { content: ''; position: absolute; inset: 1.5px; z-index: -1; clip-path: var(--px-lg); background: linear-gradient(180deg, #101a30, #0a1222); }
.st-balance:hover, .st-cartbtn:hover { transform: translateY(-2px); filter: brightness(1.12); }
.st-coin { width: 30px; height: 30px; flex-shrink: 0; filter: drop-shadow(0 0 10px rgba(255, 138, 61, 0.55)); }
.st-balance-text { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; }
.st-balance-text small { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.18em; color: var(--faint); }
.st-balance-text b { font-family: var(--font-mono); font-size: 1.02rem; font-weight: 600; color: #ffd3b0; }
.st-balance-add { margin-left: 0.3rem; padding: 0.3rem 0.55rem; border-radius: 6px; font-size: 0.72rem; font-weight: 700; color: #2a1204; background: linear-gradient(180deg, #ffb87e, #ff8a3d); }
.st-cartbtn { padding-right: 0.8rem; }
.st-cartbtn > svg { width: 22px; height: 22px; color: #ffd3b0; }
.st-cartbtn-label { font-family: var(--font-brand); font-size: 0.82rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.st-cartcount {
    min-width: 30px;
    height: 30px;
    padding: 0 0.4rem;
    display: grid;
    place-items: center;
    font-family: var(--font-mono);
    font-size: 0.9rem;
    font-weight: 700;
    color: #2a1204;
    background: linear-gradient(180deg, #ffb87e, #ff8a3d);
    clip-path: var(--px-sm);
}
.st-cartcount.is-bump { animation: st-bump 0.5s var(--ease); }
@keyframes st-bump { 0% { transform: scale(1); } 35% { transform: scale(1.35); } 100% { transform: scale(1); } }

/* ---------- Vitrin (SVIP+) ---------- */
.st-spot-wrap { max-width: 1240px; margin: 0 auto; padding: 0 1.5rem; }
.st-spot {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    overflow: hidden;
    border-radius: 26px;
    background:
        radial-gradient(ellipse 60% 80% at 100% 50%, rgba(255, 138, 61, 0.2), transparent 70%),
        radial-gradient(ellipse 50% 60% at 0% 100%, rgba(94, 234, 212, 0.07), transparent 70%),
        rgba(8, 14, 27, 0.95);
    border: 1px solid rgba(255, 138, 61, 0.32);
    box-shadow: 0 40px 120px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 138, 61, 0.06), 0 0 90px rgba(255, 138, 61, 0.12);
}
.st-spot::before { content: ''; position: absolute; top: 0; left: 8%; right: 40%; height: 1px; background: linear-gradient(90deg, transparent, #ffb07a, transparent); }
.st-spot-copy { position: relative; z-index: 1; padding: 2.8rem 2.6rem 2.6rem 3rem; }
.st-spot-tags { display: flex; align-items: center; flex-wrap: wrap; gap: 0.6rem; }
.st-flag {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    height: 28px;
    padding: 0 0.75rem;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    color: #2a1204;
    background: linear-gradient(180deg, #ffd3b0, #ffb07a);
    clip-path: var(--px-sm);
}
.st-flag .live-dot { width: 7px; height: 7px; background: #c2410c; animation: none; }
.st-spot-title {
    margin: 1.1rem 0 0;
    font-family: var(--font-brand);
    font-size: clamp(3.4rem, 6.4vw, 5.4rem);
    font-weight: 700;
    line-height: 0.95;
    letter-spacing: 0.02em;
    background: linear-gradient(180deg, #fff 0%, #ffe2cc 45%, #ff8a3d 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 10px 36px rgba(255, 138, 61, 0.4));
}
.st-spot-lead { max-width: 470px; margin: 1rem 0 0; font-size: 1rem; line-height: 1.65; color: var(--muted); }
.st-spot-lead strong { color: #ffd3b0; }
.st-spot-perks { display: grid; grid-template-columns: 1fr 1fr; gap: 0.55rem 1.2rem; max-width: 480px; margin: 1.4rem 0 0; padding: 0; list-style: none; }
.st-spot-perks li { display: flex; align-items: center; gap: 0.6rem; font-size: 0.88rem; font-weight: 500; color: #e4e8f3; }
.st-spot-perks svg { width: 13px; height: 9px; flex-shrink: 0; color: #5eead4; }

.st-spot-deal { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 1.2rem 2rem; margin-top: 1.8rem; padding-top: 1.4rem; border-top: 1px solid var(--line); }
.st-spot-price { display: flex; flex-direction: column; line-height: 1.1; }
.st-spot-price s { font-family: var(--font-mono); font-size: 0.86rem; color: var(--faint); text-decoration-color: rgba(248, 113, 113, 0.8); }
.st-spot-price b { display: flex; align-items: baseline; gap: 0.4rem; margin-top: 0.25rem; font-family: var(--font-mono); font-size: 2.3rem; font-weight: 600; color: #fff; }
.st-spot-price b small { font-family: 'Inter', sans-serif; font-size: 0.9rem; font-weight: 600; color: #ffb07a; }
.st-spot-price span { margin-top: 0.3rem; font-size: 0.78rem; color: var(--faint); }
.st-count small { display: block; margin-bottom: 0.45rem; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.18em; color: #ffb07a; }
.st-count-segs { display: flex; gap: 0.35rem; }
.st-count-segs span {
    width: 50px;
    padding: 0.45rem 0 0.35rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #050a14;
    border: 1px solid rgba(255, 138, 61, 0.28);
    clip-path: var(--px-sm);
}
.st-count-segs b { font-family: var(--font-mono); font-size: 1.25rem; font-weight: 600; line-height: 1; color: #fff; }
.st-count-segs i { margin-top: 0.3rem; font-size: 0.54rem; font-style: normal; font-weight: 700; letter-spacing: 0.12em; color: var(--faint); }
.st-spot-cta { display: flex; align-items: center; flex-wrap: wrap; gap: 0.9rem 1.2rem; margin-top: 1.8rem; }
.st-spot-cta .play-btn { font: inherit; }
.st-spot-compare { height: 48px; }
.play-btn.is-added .pb-frame { background: linear-gradient(180deg, #d1fae5, #34d399 50%, #047857); }
.play-btn.is-added .pb-core { background: linear-gradient(180deg, #6ee7b7, #10b981 60%, #047857); }

/* Sahne */
.st-spot-stage {
    position: relative;
    min-height: 460px;
    display: grid;
    place-items: center;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 46%, rgba(255, 138, 61, 0.38), transparent 42%),
        radial-gradient(circle at 50% 46%, rgba(94, 234, 212, 0.08), transparent 62%),
        linear-gradient(180deg, rgba(5, 10, 20, 0.2), rgba(5, 10, 20, 0.6));
    border-left: 1px solid var(--line);
}
.st-spot-floor {
    position: absolute;
    left: -20%;
    right: -20%;
    bottom: 0;
    height: 150px;
    background-image: linear-gradient(rgba(255, 176, 122, 0.16) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 176, 122, 0.16) 1px, transparent 1px);
    background-size: 26px 26px;
    transform: perspective(360px) rotateX(62deg);
    transform-origin: bottom;
    -webkit-mask-image: linear-gradient(to top, #000 10%, transparent);
    mask-image: linear-gradient(to top, #000 10%, transparent);
}
.st-spot-medal {
    position: relative;
    z-index: 2;
    width: 250px;
    height: 250px;
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(255, 211, 176, 0.35), 0 0 0 10px rgba(5, 10, 20, 0.6), 0 0 0 11px rgba(255, 138, 61, 0.35), 0 30px 60px rgba(0, 0, 0, 0.6), 0 0 110px rgba(255, 138, 61, 0.45);
    animation: st-float 6s ease-in-out infinite;
}
@keyframes st-float { 50% { transform: translateY(-10px); } }
.st-orbit { position: absolute; z-index: 1; left: 50%; top: 50%; border-radius: 50%; pointer-events: none; }
.st-orbit--a { width: 340px; height: 340px; margin: -170px 0 0 -170px; border: 1px dashed rgba(255, 176, 122, 0.35); animation: orbit 40s linear infinite; }
.st-orbit--b { width: 410px; height: 410px; margin: -205px 0 0 -205px; border: 1px solid rgba(94, 234, 212, 0.14); }
.st-orbit--b::after { content: ''; position: absolute; top: 50%; right: -4px; width: 8px; height: 8px; background: #5eead4; box-shadow: 0 0 12px #5eead4; }
.st-orbit--b { animation: orbit 22s linear infinite reverse; }
.st-sparkle { position: absolute; z-index: 3; width: 6px; height: 6px; background: #ffd3b0; box-shadow: 0 0 10px #ff8a3d; animation: st-twinkle 3s ease-in-out infinite; }
.st-sparkle--1 { left: 22%; top: 24%; }
.st-sparkle--2 { right: 20%; top: 18%; width: 4px; height: 4px; animation-delay: -1s; }
.st-sparkle--3 { right: 16%; top: 62%; animation-delay: -2s; }
.st-sparkle--4 { left: 18%; top: 66%; width: 4px; height: 4px; background: #99f6e4; box-shadow: 0 0 10px #5eead4; animation-delay: -0.5s; }
.st-sparkle--5 { left: 50%; top: 10%; width: 4px; height: 4px; animation-delay: -1.6s; }
@keyframes st-twinkle { 0%, 100% { opacity: 0.15; transform: scale(0.6); } 50% { opacity: 1; transform: scale(1); } }
.st-corner {
    position: absolute;
    z-index: 4;
    top: 30px;
    right: -52px;
    width: 220px;
    padding: 0.55rem 0;
    transform: rotate(45deg);
    text-align: center;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    color: #2a1204;
    background: linear-gradient(180deg, #ffb87e, #ff8a3d 60%, #ea6420);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45), inset 0 -2px 0 rgba(110, 36, 4, 0.4);
}
.st-corner b { font-family: var(--font-mono); font-size: 0.86rem; }
.st-spot-tag {
    position: absolute;
    z-index: 4;
    left: 50%;
    bottom: 34px;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: baseline;
    gap: 0.6rem;
    padding: 0.55rem 0.95rem;
    white-space: nowrap;
    background: rgba(5, 10, 20, 0.92);
    border: 1px solid rgba(255, 176, 122, 0.35);
    clip-path: var(--px-sm);
}
.st-spot-tag small { font-size: 0.58rem; font-weight: 700; letter-spacing: 0.16em; color: var(--faint); }
.st-spot-tag s { font-family: var(--font-mono); font-size: 0.82rem; color: var(--faint); }
.st-spot-tag b { font-family: var(--font-mono); font-size: 1rem; color: #ffd3b0; }

/* ---------- Kategoriler ---------- */
.st-section-cats { padding-top: 3.5rem; padding-bottom: 1rem; }
.st-section-cats::before { display: none; }
.st-cats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.st-cat {
    --c: #ff8a3d;
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 1.5rem 1.4rem 1.3rem;
    overflow: hidden;
    border-radius: 20px;
    background: rgba(8, 14, 27, 0.92);
    border: 1px solid var(--line);
    color: inherit;
    text-decoration: none;
    transition: translate 0.35s var(--ease), border-color 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.st-cat--cos { --c: #5eead4; }
.st-cat--credit { --c: #ffb07a; }
.st-cat--code { --c: #7dd3fc; }
.st-cat::before { content: ''; position: absolute; top: 0; left: 1.4rem; right: 1.4rem; height: 2px; background: linear-gradient(90deg, var(--c), transparent); opacity: 0.8; }
.st-cat::after { content: ''; position: absolute; right: -60px; top: -60px; width: 180px; height: 180px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--c) 22%, transparent), transparent 70%); transition: transform 0.5s var(--ease); pointer-events: none; }
.st-cat:hover { translate: 0 -6px; border-color: color-mix(in srgb, var(--c) 45%, transparent); box-shadow: 0 26px 60px rgba(0, 0, 0, 0.45), 0 0 40px color-mix(in srgb, var(--c) 14%, transparent); }
.st-cat:hover::after { transform: scale(1.3); }
.st-cat-ico {
    position: relative;
    isolation: isolate;
    width: 78px;
    height: 78px;
    display: grid;
    place-items: center;
    background: color-mix(in srgb, var(--c) 55%, transparent);
    clip-path: var(--px-lg);
    transition: transform 0.35s var(--ease);
}
.st-cat-ico::before { content: ''; position: absolute; inset: 2px; z-index: -1; background: radial-gradient(circle at 50% 35%, #1b2743, #0a1222 75%); clip-path: var(--px-lg); }
.st-cat-ico svg { width: 48px; height: 48px; filter: drop-shadow(0 4px 0 rgba(0, 0, 0, 0.35)); }
.st-cat:hover .st-cat-ico { transform: translateY(-3px) rotate(-3deg); }
.st-cat-count { position: absolute; top: 1.5rem; right: 1.4rem; z-index: 1; font-family: var(--font-mono); font-size: 0.72rem; font-weight: 600; color: var(--c); }
.st-cat h3 { margin: 1.2rem 0 0.4rem; font-family: var(--font-brand); font-size: 1.22rem; font-weight: 700; letter-spacing: 0.04em; color: #fff; }
.st-cat p { margin: 0; font-size: 0.87rem; line-height: 1.6; color: var(--muted); }
.st-cat-go { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: auto; padding-top: 1.1rem; font-size: 0.84rem; font-weight: 600; color: var(--c); }
.st-cat-go span { transition: transform 0.25s var(--ease); }
.st-cat:hover .st-cat-go span { transform: translateX(4px); }

/* ---------- Haftanın fırsatları ---------- */
.st-deals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
:where(.st-card) { --r: #ff8a3d; }
.st-card {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 20px;
    background: rgba(8, 14, 27, 0.95);
    border: 1px solid var(--line);
    transition: translate 0.35s var(--ease), border-color 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.st-card--teal { --r: #5eead4; }
.st-card--credit { --r: #ffb07a; }
.st-card:hover { translate: 0 -5px; border-color: color-mix(in srgb, var(--r) 45%, transparent); box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5), 0 0 50px color-mix(in srgb, var(--r) 12%, transparent); }
/* .reveal-scroll transform + geçişi sabitler; kaldırma efekti translate ile, gecikmesiz */
.js .st-cat.reveal-scroll, .js .st-card.reveal-scroll { transition: opacity 0.8s var(--ease) var(--d, 0s), transform 0.8s var(--ease) var(--d, 0s), translate 0.35s var(--ease), border-color 0.35s var(--ease), box-shadow 0.35s var(--ease); }
.st-card-art {
    position: relative;
    height: 200px;
    display: grid;
    place-items: center;
    overflow: hidden;
    background:
        radial-gradient(ellipse 55% 60% at 50% 62%, color-mix(in srgb, var(--r) 34%, transparent), transparent 70%),
        linear-gradient(180deg, #0d1729, #080e1b);
    border-bottom: 1px solid var(--line);
}
.st-card-art::before {
    content: '';
    position: absolute;
    left: -10%;
    right: -10%;
    bottom: 0;
    height: 80px;
    background-image: linear-gradient(color-mix(in srgb, var(--r) 22%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--r) 22%, transparent) 1px, transparent 1px);
    background-size: 20px 20px;
    transform: perspective(260px) rotateX(60deg);
    transform-origin: bottom;
    -webkit-mask-image: linear-gradient(to top, #000, transparent);
    mask-image: linear-gradient(to top, #000, transparent);
}
.st-card-medal {
    position: relative;
    width: 134px;
    height: 134px;
    border-radius: 50%;
    box-shadow: 0 0 0 6px rgba(5, 10, 20, 0.7), 0 0 0 7px color-mix(in srgb, var(--r) 40%, transparent), 0 20px 40px rgba(0, 0, 0, 0.55), 0 0 60px color-mix(in srgb, var(--r) 35%, transparent);
    transition: transform 0.5s var(--ease);
}
.st-card:hover .st-card-medal { transform: translateY(-4px) rotate(-6deg); }
.st-card-skin { position: relative; z-index: 2; height: 168px; margin-top: 24px; filter: drop-shadow(0 14px 18px rgba(0, 0, 0, 0.55)); transition: transform 0.5s var(--ease); }
.st-card:hover .st-card-skin { transform: translateY(-4px); }
.st-wings { position: absolute; z-index: 1; left: 50%; top: 34px; width: 250px; transform: translateX(-50%); filter: drop-shadow(0 0 18px rgba(255, 138, 61, 0.45)); transform-origin: 50% 40%; animation: st-flap 3.2s ease-in-out infinite; }
@keyframes st-flap { 50% { transform: translateX(-50%) scaleX(0.9) translateY(-3px); } }
.st-card-art--ice .st-card-skin { filter: drop-shadow(0 14px 18px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 16px rgba(56, 189, 248, 0.5)); }
.st-snow { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.st-snow i { position: absolute; top: -8px; width: 4px; height: 4px; background: #e0f2fe; box-shadow: 0 0 6px #7dd3fc; animation: st-snow 5s linear infinite; }
.st-snow i:nth-child(1) { left: 12%; animation-delay: 0s; }
.st-snow i:nth-child(2) { left: 26%; animation-delay: -2.2s; width: 3px; height: 3px; }
.st-snow i:nth-child(3) { left: 38%; animation-delay: -4s; }
.st-snow i:nth-child(4) { left: 62%; animation-delay: -1.1s; width: 3px; height: 3px; }
.st-snow i:nth-child(5) { left: 74%; animation-delay: -3.2s; }
.st-snow i:nth-child(6) { left: 86%; animation-delay: -0.6s; width: 3px; height: 3px; }
.st-snow i:nth-child(7) { left: 52%; animation-delay: -2.8s; }
.st-snow i:nth-child(8) { left: 94%; animation-delay: -4.4s; }
@keyframes st-snow { to { transform: translateY(220px); } }
.st-coins { position: relative; z-index: 1; width: 196px; filter: drop-shadow(0 12px 14px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 24px rgba(255, 138, 61, 0.35)); transition: transform 0.5s var(--ease); }
.st-card:hover .st-coins { transform: translateY(-4px) scale(1.03); }
.st-coins-amount { position: absolute; z-index: 2; right: 16px; bottom: 12px; font-family: var(--font-mono); font-size: 1.5rem; font-weight: 600; color: #fff; text-shadow: 0 2px 0 #7a3712, 0 0 18px rgba(255, 138, 61, 0.6); }

.st-rib {
    position: absolute;
    z-index: 3;
    top: 14px;
    left: 14px;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    height: 28px;
    padding: 0 0.7rem;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
    clip-path: var(--px-sm);
}
.st-rib svg { width: 13px; height: 13px; }
.st-rib--sale { font-family: var(--font-mono); letter-spacing: 0; font-size: 0.82rem; color: #2a1204; background: linear-gradient(180deg, #ffb87e, #ff8a3d); }
.st-rib--time { color: #fff; background: linear-gradient(180deg, #f87171, #dc2626); }
.st-rib--new { color: #042f2e; background: linear-gradient(180deg, #99f6e4, #2dd4bf); }
.st-rib--bonus { color: #042f2e; background: linear-gradient(180deg, #99f6e4, #2dd4bf); }
.st-rarity { position: absolute; z-index: 3; top: 18px; right: 16px; font-size: 0.62rem; font-weight: 800; letter-spacing: 0.16em; color: var(--r); text-shadow: 0 0 12px color-mix(in srgb, var(--r) 60%, transparent); }

.st-card-body { display: flex; flex: 1; flex-direction: column; padding: 1.15rem 1.3rem 1.3rem; }
.st-card-type { font-size: 0.64rem; font-weight: 700; letter-spacing: 0.16em; color: var(--r); }
.st-card-body h3 { margin: 0.45rem 0 0.35rem; font-family: var(--font-brand); font-size: 1.3rem; font-weight: 700; letter-spacing: 0.03em; color: #fff; }
.st-card-body p { margin: 0; font-size: 0.86rem; line-height: 1.6; color: var(--muted); }
.st-card-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 0.8rem; margin-top: auto; padding-top: 1.1rem; }
.st-card-price { display: flex; flex-direction: column; line-height: 1.1; }
.st-card-price s { font-family: var(--font-mono); font-size: 0.76rem; color: var(--faint); text-decoration-color: rgba(248, 113, 113, 0.8); }
.st-card-price b { display: flex; align-items: baseline; gap: 0.3rem; margin-top: 0.2rem; font-family: var(--font-mono); font-size: 1.4rem; font-weight: 600; color: #fff; }
.st-card-price b small { font-family: 'Inter', sans-serif; font-size: 0.74rem; font-weight: 600; color: var(--r); }
.st-card-price span { margin-top: 0.25rem; font-size: 0.72rem; color: var(--faint); }
.st-add {
    position: relative;
    isolation: isolate;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    height: 42px;
    padding: 0 1rem 0 0.85rem;
    border: 0;
    font: inherit;
    font-size: 0.8rem;
    font-weight: 700;
    color: #2a1204;
    cursor: pointer;
    background: #ffcca3;
    clip-path: var(--px-sm);
    transition: transform 0.2s var(--ease), filter 0.2s var(--ease);
}
.st-add::before { content: ''; position: absolute; inset: 1.5px; z-index: -1; background: linear-gradient(180deg, #ffae6e, #f47a2e); clip-path: var(--px-sm); box-shadow: inset 0 -2px 0 rgba(110, 36, 4, 0.4); }
.st-add svg { width: 15px; height: 15px; }
.st-add:hover { transform: translateY(-1px); filter: brightness(1.08); }
.st-add:active { transform: translateY(1px); }
.st-add.is-added { color: #022c22; background: #a7f3d0; }
.st-add.is-added::before { background: linear-gradient(180deg, #6ee7b7, #10b981); }
.st-add:focus-visible, .st-cartbtn:focus-visible, .st-balance:focus-visible { outline: 2px solid #5eead4; outline-offset: 3px; }

/* ---------- Sosyal kanıt ---------- */
.st-proof-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.6rem 1rem; margin-bottom: 1.1rem; }
.st-proof-title { display: inline-flex; align-items: center; gap: 0.7rem; margin: 0; font-family: var(--font-brand); font-size: 1.2rem; font-weight: 700; letter-spacing: 0.06em; color: #fff; }
.st-proof-sub { font-size: 0.86rem; color: var(--muted); text-shadow: 0 1px 2px rgba(5, 10, 20, 0.9); }
.st-proof-sub b { font-family: var(--font-mono); color: #ffd3b0; }
.st-ticker {
    overflow: hidden;
    margin: 0 -1.5rem;
    padding: 0.3rem 0;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.st-ticker-track { display: flex; gap: 0.75rem; width: max-content; margin: 0; padding: 0 1.5rem; list-style: none; }
.st-ticker.is-running .st-ticker-track { animation: st-marquee var(--st-dur, 48s) linear infinite; }
.st-ticker:hover .st-ticker-track { animation-play-state: paused; }
@keyframes st-marquee { to { transform: translateX(calc(-50% - 0.375rem)); } }
.st-buy {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.55rem 1rem 0.55rem 0.55rem;
    white-space: nowrap;
    border-radius: 14px;
    background: rgba(8, 14, 27, 0.94);
    border: 1px solid var(--line);
    font-size: 0.86rem;
    color: var(--muted);
}
.st-buy .mc-head { width: 34px; height: 34px; border-radius: 8px; }
.st-buy b { color: #fff; font-weight: 600; }
.st-buy small { margin-left: 0.2rem; padding-left: 0.75rem; border-left: 1px solid var(--line); font-size: 0.74rem; color: var(--faint); }
.st-buy-item { font-style: normal; font-weight: 700; color: #ffb07a; }
.st-buy-item--svipp { background: linear-gradient(90deg, #ffe2cc, #ff8a3d); -webkit-background-clip: text; background-clip: text; color: transparent; }
.st-buy-item--vip { color: #5eead4; }
.st-buy-item--credit { color: #ffd3b0; }
.st-buy-item--ice { color: #7dd3fc; }

.st-trust { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 2rem 0 0; padding: 0; list-style: none; border-radius: 20px; background: rgba(8, 14, 27, 0.92); border: 1px solid var(--line); }
.st-trust li { display: flex; align-items: flex-start; gap: 0.9rem; padding: 1.35rem 1.3rem; }
.st-trust li + li { border-left: 1px solid var(--line); }
.st-trust-ico {
    position: relative;
    isolation: isolate;
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    color: #ffd3b0;
    background: rgba(255, 138, 61, 0.45);
    clip-path: var(--px-sm);
}
.st-trust-ico::before { content: ''; position: absolute; inset: 1.5px; z-index: -1; background: #0f1a2f; clip-path: var(--px-sm); }
.st-trust-ico svg { width: 19px; height: 19px; }
.st-trust b { display: block; font-size: 0.94rem; color: #fff; }
.st-trust small { display: block; margin-top: 0.25rem; font-size: 0.8rem; line-height: 1.5; color: var(--muted); }
.faq-a a { color: #ffb07a; }

/* ---------- Mini sepet ---------- */
html.st-lock { overflow: hidden; }
.st-backdrop { position: fixed; inset: 0; z-index: 80; background: rgba(3, 6, 12, 0.62); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); opacity: 0; visibility: hidden; transition: opacity 0.3s var(--ease), visibility 0.3s; }
.st-backdrop.is-open { opacity: 1; visibility: visible; }
.st-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 81;
    width: min(430px, 100vw);
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, #0b1427, #070d19);
    border-left: 1px solid rgba(255, 138, 61, 0.3);
    box-shadow: -30px 0 80px rgba(0, 0, 0, 0.6);
    transform: translateX(104%);
    visibility: hidden;
    transition: transform 0.45s var(--ease), visibility 0.45s;
}
.st-drawer.is-open { transform: none; visibility: visible; }
.st-drawer:focus { outline: none; }
.st-drawer::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 160px; background: radial-gradient(ellipse 80% 100% at 50% 0%, rgba(255, 138, 61, 0.14), transparent 70%); pointer-events: none; }
.st-dr-head { position: relative; display: flex; align-items: center; justify-content: space-between; padding: 1.4rem 1.4rem 1.1rem; border-bottom: 1px solid var(--line); }
.st-dr-head h2 { margin: 0; font-family: var(--font-brand); font-size: 1.35rem; font-weight: 700; letter-spacing: 0.06em; color: #fff; }
.st-dr-head small { font-size: 0.8rem; color: var(--faint); }
.st-dr-close { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--line-strong); border-radius: 10px; background: rgba(255, 255, 255, 0.04); color: var(--muted); cursor: pointer; transition: color 0.2s var(--ease), border-color 0.2s var(--ease); }
.st-dr-close:hover { color: #fff; border-color: rgba(255, 138, 61, 0.5); }
.st-dr-close svg { width: 18px; height: 18px; }
.st-dr-goal { position: relative; margin: 1rem 1.4rem 0; padding: 0.85rem 0.95rem; border-radius: 14px; background: rgba(255, 138, 61, 0.08); border: 1px solid rgba(255, 138, 61, 0.24); }
.st-dr-goal-row { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; margin-bottom: 0.6rem; font-size: 0.8rem; line-height: 1.4; color: var(--muted); }
.st-dr-goal-row b { color: #ffd3b0; }
.st-dr-goal-ico svg { width: 24px; height: 24px; display: block; }
.st-dr-goal.is-done { background: rgba(16, 185, 129, 0.1); border-color: rgba(52, 211, 153, 0.3); }
.st-dr-progress { height: 8px; }
.st-dr-progress > span { transition: width 0.6s var(--ease); }
.st-dr-list { flex: 1; overflow-y: auto; margin: 0; padding: 0.6rem 1.4rem; list-style: none; overscroll-behavior: contain; }
.st-dr-item { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; align-items: center; gap: 0.9rem; padding: 0.9rem 0; border-bottom: 1px solid var(--line); animation: st-item-in 0.4s var(--ease); }
@keyframes st-item-in { from { opacity: 0; transform: translateX(16px); } }
.st-thumb {
    --r: #ff8a3d;
    position: relative;
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 12px;
    background: radial-gradient(circle at 50% 60%, color-mix(in srgb, var(--r) 38%, transparent), transparent 70%), #0d1729;
    border: 1px solid color-mix(in srgb, var(--r) 30%, transparent);
}
.st-thumb .st-medal { width: 44px; height: 44px; }
.st-thumb svg { width: 40px; height: 40px; }
.st-thumb--vip { --r: #5eead4; }
.st-thumb--ice { --r: #38bdf8; }
.st-thumb--coins { --r: #ffb07a; }
.st-dr-info { min-width: 0; }
.st-dr-info b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.92rem; font-weight: 600; color: #fff; }
.st-dr-info small { display: block; margin-top: 0.15rem; font-size: 0.75rem; color: var(--faint); }
.st-step { display: inline-flex; align-items: center; margin-top: 0.5rem; border: 1px solid var(--line-strong); border-radius: 9px; overflow: hidden; }
.st-step button { width: 28px; height: 28px; display: grid; place-items: center; border: 0; background: rgba(255, 255, 255, 0.04); color: #ffd3b0; font: inherit; font-size: 1rem; font-weight: 700; cursor: pointer; transition: background 0.2s var(--ease); }
.st-step button:hover { background: rgba(255, 138, 61, 0.2); }
.st-step output { min-width: 30px; text-align: center; font-family: var(--font-mono); font-size: 0.85rem; font-weight: 600; color: #fff; }
.st-dr-side { display: flex; flex-direction: column; align-items: flex-end; gap: 0.5rem; }
.st-dr-side b { font-family: var(--font-mono); font-size: 0.9rem; font-weight: 600; color: #fff; white-space: nowrap; }
.st-dr-remove { padding: 0; border: 0; background: none; font: inherit; font-size: 0.74rem; color: var(--faint); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.st-dr-remove:hover { color: #fca5a5; }
.st-dr-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem 2.4rem; text-align: center; }
.st-dr-empty[hidden] { display: none; }
.st-dr-empty svg { width: 64px; height: 64px; }
.st-dr-empty b { margin-top: 1rem; font-family: var(--font-brand); font-size: 1.1rem; color: #fff; }
.st-dr-empty p { margin: 0.4rem 0 0; font-size: 0.86rem; line-height: 1.6; color: var(--muted); }
.st-dr-foot { padding: 1.1rem 1.4rem 1.4rem; border-top: 1px solid var(--line); background: rgba(5, 10, 20, 0.6); }
.st-dr-sum { display: grid; gap: 0.45rem; margin: 0; }
.st-dr-sum div { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.88rem; }
.st-dr-sum div[hidden] { display: none; }
.st-dr-sum dt { color: var(--muted); }
.st-dr-sum dd { margin: 0; font-family: var(--font-mono); font-weight: 600; color: #fff; }
.st-dr-sum div:first-child dd { font-size: 1.15rem; color: #ffd3b0; }
.st-dr-bal dt, .st-dr-bal dd { font-size: 0.8rem; color: var(--faint) !important; }
.st-dr-status { margin: 0.8rem 0 1rem; padding: 0.6rem 0.8rem; border-radius: 10px; font-size: 0.8rem; line-height: 1.45; }
.st-dr-status.is-ok { color: #a7f3d0; background: rgba(16, 185, 129, 0.1); border: 1px solid rgba(52, 211, 153, 0.25); }
.st-dr-status.is-warn { color: #fde68a; background: rgba(245, 158, 11, 0.1); border: 1px solid rgba(251, 191, 36, 0.28); }
.st-dr-checkout { width: 100%; }
.st-dr-checkout.is-disabled { pointer-events: none; filter: grayscale(0.9) brightness(0.6); }
.st-dr-continue { display: block; width: 100%; margin-top: 0.8rem; padding: 0.4rem; border: 0; background: none; font: inherit; font-size: 0.84rem; font-weight: 600; color: var(--muted); cursor: pointer; }
.st-dr-continue:hover { color: #fff; }

/* Bildirim */
.st-toast {
    position: fixed;
    left: 50%;
    bottom: 24px;
    z-index: 90;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.75rem 1.1rem;
    font-size: 0.86rem;
    font-weight: 600;
    color: #fff;
    background: rgba(8, 14, 27, 0.97);
    border: 1px solid rgba(52, 211, 153, 0.4);
    border-radius: 12px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
    transform: translate(-50%, 140%);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.4s var(--ease), opacity 0.4s var(--ease);
}
.st-toast.is-on { transform: translate(-50%, 0); opacity: 1; }
.st-toast::before { content: '✓'; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 6px; font-size: 0.8rem; color: #022c22; background: #34d399; }

@media (prefers-reduced-motion: reduce) {
    .st-spot-medal, .st-orbit, .st-sparkle, .st-wings, .st-snow i, .st-dr-item, .st-cartcount.is-bump { animation: none !important; }
    .st-ticker.is-running .st-ticker-track { animation: none; }
    .st-ticker { overflow-x: auto; }
    .st-drawer, .st-backdrop { transition: none; }
}

/* ---------- Tablet ---------- */
@media (max-width: 1000px) {
    .st-spot { grid-template-columns: 1fr; }
    .st-spot-stage { order: -1; min-height: 360px; border-left: 0; border-bottom: 1px solid var(--line); }
    .st-spot-medal { width: 210px; height: 210px; }
    .st-orbit--a { width: 290px; height: 290px; margin: -145px 0 0 -145px; }
    .st-orbit--b { width: 350px; height: 350px; margin: -175px 0 0 -175px; }
    .st-spot-copy { padding: 2.2rem 2rem 2.2rem; }
    .st-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .st-deals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .st-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .st-trust li:nth-child(3) { border-left: 0; }
    .st-trust li:nth-child(n + 3) { border-top: 1px solid var(--line); }
}

/* ---------- Mobil ---------- */
@media (max-width: 640px) {
    .st-hero-actions { flex-wrap: nowrap; gap: 0.6rem; }
    .st-balance, .st-cartbtn { height: 52px; padding: 0 0.8rem; gap: 0.55rem; }
    .st-balance-add { display: none; }
    .st-cartbtn-label { display: none; }
    .st-spot-wrap { padding: 0 1rem; }
    .st-spot { border-radius: 20px; }
    .st-spot-stage { min-height: 290px; }
    .st-spot-medal { width: 170px; height: 170px; }
    .st-orbit--a { width: 230px; height: 230px; margin: -115px 0 0 -115px; }
    .st-orbit--b { width: 280px; height: 280px; margin: -140px 0 0 -140px; }
    .st-corner { top: 20px; right: -62px; font-size: 0.64rem; }
    .st-spot-tag { bottom: 18px; }
    .st-spot-copy { padding: 1.6rem 1.25rem 1.6rem; }
    .st-spot-perks { grid-template-columns: 1fr; }
    .st-spot-deal { flex-direction: column; align-items: flex-start; }
    .st-count-segs span { width: 56px; }
    .st-spot-cta { flex-direction: column; align-items: stretch; }
    .st-spot-cta .play-btn--lg, .st-spot-compare { width: 100%; }
    .st-section-cats { padding-top: 2.5rem; }
    .st-cats { grid-template-columns: 1fr; gap: 0.75rem; }
    .st-cat { display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: 1rem; padding: 1.1rem; }
    .st-cat-ico { grid-row: 1 / span 3; width: 64px; height: 64px; }
    .st-cat-ico svg { width: 40px; height: 40px; }
    .st-cat h3 { margin: 0 0 0.25rem; font-size: 1.1rem; }
    .st-cat p { font-size: 0.83rem; }
    .st-cat-go { padding-top: 0.6rem; }
    .st-cat-count { top: 1.2rem; right: 1.1rem; }
    .st-deals { grid-template-columns: 1fr; }
    .st-ticker { margin: 0 -1rem; }
    .st-ticker-track { padding: 0 1rem; }
    .st-trust { grid-template-columns: 1fr; }
    .st-trust li + li { border-left: 0; border-top: 1px solid var(--line); }
    .st-dr-head, .st-dr-list, .st-dr-foot { padding-left: 1.1rem; padding-right: 1.1rem; }
    .st-dr-goal { margin-inline: 1.1rem; }
}

/* ===== odeme.css ===== */
/* =========================================================
   Ödeme (odeme.html) — önek: co-
   ========================================================= */
.co-page { overflow-x: clip; }
.co-lock { width: 13px; height: 13px; }

/* Madalyon kırpımı (img/cover-vip.jpg) */
.co-medal { display: block; width: 100%; height: 100%; border-radius: 50%; background: url(img/cover-vip.jpg) no-repeat; background-size: 603.4% auto; }
.co-medal--svipp { background-position: 78.9% 51.1%; filter: hue-rotate(-20deg) saturate(1.3) brightness(1.08); }

/* ---------- Hero + adımlar ---------- */
.co-hero { padding-bottom: 2.6rem; }
.co-t-done { display: none; }
.co-page.is-done .co-t-pay { display: none; }
.co-page.is-done .co-t-done { display: inline; }
.co-steps { display: flex; max-width: 620px; margin: 2rem auto 0; padding: 0; list-style: none; }
.co-steps li { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; gap: 0.65rem; text-align: center; }
.co-steps li + li::before {
    content: '';
    position: absolute;
    top: 21px;
    left: calc(-50% + 36px);
    right: calc(50% + 36px);
    height: 4px;
    background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.16) 0 6px, transparent 6px 10px);
}
.co-steps li.is-done + li::before { background: repeating-linear-gradient(90deg, #ff8a3d 0 6px, transparent 6px 10px); filter: drop-shadow(0 0 5px rgba(255, 138, 61, 0.7)); }
.co-step-ico {
    position: relative;
    isolation: isolate;
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, 0.2);
    clip-path: var(--px-lg);
}
.co-step-ico::before { content: ''; position: absolute; inset: 2px; z-index: -1; background: #0a1222; clip-path: var(--px-lg); }
.co-step-ico b { font-family: var(--font-mono); font-size: 1rem; font-weight: 600; color: var(--faint); }
.co-step-ico svg { display: none; width: 18px; height: 12px; color: #2a1204; }
.co-steps .is-done .co-step-ico { background: #ffd3b0; }
.co-steps .is-done .co-step-ico::before { background: linear-gradient(180deg, #ffb87e, #ff8a3d); }
.co-steps .is-done .co-step-ico svg { display: block; }
.co-steps .is-done .co-step-ico b { display: none; }
.co-steps .is-current .co-step-ico { background: linear-gradient(180deg, #ffd3b0, #ff8a3d); }
.co-steps .is-current .co-step-ico::before { background: radial-gradient(circle at 50% 30%, #3a2414, #150d0a 80%); }
.co-steps .is-current .co-step-ico b { color: #ffd3b0; }
.co-step-txt { font-size: 0.86rem; font-weight: 600; line-height: 1.3; color: var(--muted); text-shadow: 0 1px 2px rgba(5, 10, 20, 0.9), 0 0 14px rgba(5, 10, 20, 0.85); }
.co-step-txt small { display: block; margin-bottom: 0.15rem; font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.14em; color: var(--faint); }
.co-steps .is-current .co-step-txt { color: #fff; }
.co-steps .is-done .co-step-txt { color: #ffd3b0; }

/* ---------- Düzen ---------- */
.co-layout { display: grid; grid-template-columns: minmax(0, 1fr) 400px; align-items: start; gap: 1.75rem; max-width: 1240px; margin: 0 auto; padding: 0 1.5rem 4rem; }
.co-page.is-done .co-layout { display: none; }
.co-side { position: sticky; top: 96px; }

/* Paneller */
.co-panel { padding: 1.75rem; background: rgba(8, 14, 27, 0.94); }
.co-panel + .co-panel { margin-top: 1.25rem; }
.co-panel-head { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 1.4rem; }
.co-num { flex-shrink: 0; padding: 0.4rem 0.5rem; font-family: var(--font-mono); font-size: 0.76rem; font-weight: 700; color: #2a1204; background: linear-gradient(180deg, #ffb87e, #ff8a3d); clip-path: var(--px-sm); }
.co-panel-head h2 { margin: 0; font-family: var(--font-brand); font-size: 1.18rem; font-weight: 700; letter-spacing: 0.04em; color: #fff; }
.co-panel-head p { margin: 0.25rem 0 0; font-size: 0.85rem; color: var(--muted); }
.co-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.co-grid-tight { gap: 0.8rem; }
.co-muted { color: var(--faint); font-weight: 400; }
.hint code { padding: 0.05rem 0.35rem; border-radius: 5px; font-family: var(--font-mono); font-size: 0.76rem; color: #ffd3b0; background: rgba(255, 255, 255, 0.07); }
.co-user { position: relative; }
.co-user .mc-head { position: absolute; left: 7px; top: 50%; width: 34px; height: 34px; border-radius: 8px; transform: translateY(-50%); }
.co-user .input { padding-left: 3.4rem; font-family: var(--font-mono); }

/* Ödeme yöntemleri */
.co-methods { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.7rem; }
.co-method { flex-direction: column; align-items: flex-start; gap: 0.75rem; padding: 1rem 1rem 0.95rem; }
.co-method .choice-dot { position: absolute; top: 0.9rem; right: 0.9rem; }
.co-m-ico {
    position: relative;
    isolation: isolate;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    color: #ffd3b0;
    background: rgba(255, 138, 61, 0.42);
    clip-path: var(--px-sm);
}
.co-m-ico::before { content: ''; position: absolute; inset: 1.5px; z-index: -1; background: #111c32; clip-path: var(--px-sm); }
.co-m-ico svg { width: 20px; height: 20px; }
.co-method:has(input:checked) .co-m-ico { background: #ffb07a; }
.co-m-txt b { display: block; font-size: 0.92rem; font-weight: 700; color: #fff; }
.co-m-txt small { display: block; margin-top: 0.15rem; font-size: 0.74rem; color: var(--faint); }

.co-pane { margin-top: 1.4rem; padding-top: 1.4rem; border-top: 1px dashed var(--line-strong); animation: co-pane 0.4s var(--ease); }
.co-pane[hidden] { display: none !important; }
@keyframes co-pane { from { opacity: 0; transform: translateY(8px); } }
.co-pane--card { display: grid; grid-template-columns: 300px minmax(0, 1fr); align-items: center; gap: 1.8rem; }
.co-card-fields { display: grid; gap: 1rem; }
.co-cnum .input { padding-right: 4.6rem; font-family: var(--font-mono); letter-spacing: 0.06em; }
.co-cnum-brand { position: absolute; right: 0.7rem; top: 50%; transform: translateY(-50%); padding: 0.2rem 0.45rem; border-radius: 5px; font-family: var(--font-mono); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.06em; color: var(--faint); background: rgba(255, 255, 255, 0.06); }
.co-cnum-brand.is-on { color: #2a1204; background: #ffb07a; }
[data-co-cexp], [data-co-ccvc] { font-family: var(--font-mono); }

/* Kart önizlemesi (çevrilir) */
.co-cardstage { perspective: 1100px; }
.co-card { --bc: #ff8a3d; width: 100%; max-width: 300px; aspect-ratio: 1.586; margin: 0 auto; }
.co-card[data-brand="visa"] { --bc: #60a5fa; }
.co-card[data-brand="mc"] { --bc: #f97316; }
.co-card[data-brand="troy"] { --bc: #2dd4bf; }
.co-card[data-brand="amex"] { --bc: #38bdf8; }
.co-card-inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 0.7s var(--ease); }
.co-card.is-flipped .co-card-inner { transform: rotateY(180deg); }
.co-card-face {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 1.05rem 1.15rem;
    border-radius: 16px;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    background:
        radial-gradient(circle at 88% 0%, color-mix(in srgb, var(--bc) 50%, transparent), transparent 52%),
        radial-gradient(circle at 0% 105%, rgba(94, 234, 212, 0.2), transparent 50%),
        linear-gradient(135deg, #182850, #0a1222 72%);
    border: 1px solid color-mix(in srgb, var(--bc) 40%, transparent);
    box-shadow: 0 24px 50px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.12);
    transition: background 0.5s var(--ease), border-color 0.5s var(--ease);
}
.co-card-face::before { content: ''; position: absolute; inset: 0; background: repeating-conic-gradient(rgba(255, 255, 255, 0.025) 0 25%, transparent 0 50%) 0 0 / 8px 8px; pointer-events: none; }
.co-card-top { position: relative; display: flex; align-items: center; justify-content: space-between; }
.co-chip { width: 42px; height: 32px; }
.co-brand { display: none; }
.co-card[data-brand="none"] .co-brand--none, .co-card[data-brand="visa"] .co-brand--visa, .co-card[data-brand="mc"] .co-brand--mc, .co-card[data-brand="troy"] .co-brand--troy, .co-card[data-brand="amex"] .co-brand--amex { display: flex; }
.co-brand--none { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.2em; color: rgba(255, 255, 255, 0.45); }
.co-brand--visa { font-size: 1.35rem; font-style: italic; font-weight: 900; letter-spacing: 0.02em; color: #fff; }
.co-brand--mc i, .co-logo--mc i { display: block; width: 26px; height: 26px; border-radius: 50%; background: #eb001b; }
.co-brand--mc i + i, .co-logo--mc i + i { margin-left: -10px; background: #f79e1b; mix-blend-mode: screen; }
.co-brand--troy { font-size: 1.3rem; font-weight: 800; letter-spacing: -0.01em; color: #fff; }
.co-brand--amex { padding: 0.15rem 0.4rem; font-size: 0.8rem; font-weight: 900; letter-spacing: 0.06em; color: #0a1222; background: #bae6fd; border-radius: 3px; }
.co-card-num { position: relative; margin-top: auto; font-family: var(--font-mono); font-size: 1.12rem; font-weight: 600; letter-spacing: 0.08em; white-space: nowrap; color: #fff; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.4); }
.co-card-bottom { position: relative; display: flex; justify-content: space-between; gap: 1rem; margin-top: 0.8rem; }
.co-card-bottom div { min-width: 0; }
.co-card-bottom small { display: block; font-size: 0.5rem; font-weight: 700; letter-spacing: 0.16em; color: rgba(255, 255, 255, 0.5); }
.co-card-bottom b { display: block; max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-mono); font-size: 0.8rem; font-weight: 600; text-transform: uppercase; color: #fff; }
.co-card-mark { position: absolute; right: -6px; bottom: 34px; font-family: var(--font-brand); font-size: 2.6rem; font-weight: 700; color: rgba(255, 255, 255, 0.04); pointer-events: none; }
.co-card-back { transform: rotateY(180deg); padding: 0; }
.co-card-stripe { display: block; height: 40px; margin-top: 1.2rem; background: #03060d; }
.co-card-sign { display: flex; align-items: center; justify-content: space-between; margin: 1rem 1.15rem 0; padding: 0.45rem 0.6rem; border-radius: 4px; background: repeating-linear-gradient(90deg, #e2e8f0 0 6px, #cbd5e1 6px 12px); }
.co-card-sign span { font-size: 0.64rem; font-style: italic; color: #64748b; }
.co-card-sign b { padding: 0.1rem 0.45rem; font-family: var(--font-mono); font-size: 0.9rem; color: #0a1222; background: #fff; }
.co-card-back p { margin: auto 1.15rem 1rem; font-size: 0.62rem; line-height: 1.4; color: rgba(255, 255, 255, 0.5); }

/* Mobil ödeme / havale / bakiye */
.co-pane-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; align-items: start; }
.co-phone { display: flex; }
.co-phone span { height: 48px; padding: 0 0.9rem; display: grid; place-items: center; font-family: var(--font-mono); font-size: 0.9rem; color: var(--muted); background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.12); border-right: 0; border-radius: 12px 0 0 12px; }
.co-phone .input { border-radius: 0 12px 12px 0; font-family: var(--font-mono); }
.co-info { padding: 1rem 1.1rem; border-radius: 14px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--line); }
.co-info b { font-size: 0.9rem; color: #fff; }
.co-info p { margin: 0.35rem 0 0.8rem; font-size: 0.82rem; line-height: 1.55; color: var(--muted); }
.co-ops { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.co-ops span { padding: 0.25rem 0.55rem; border-radius: 6px; font-size: 0.72rem; font-weight: 600; color: var(--muted); background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line); }
.co-bank, .co-bal { overflow: hidden; border-radius: 14px; background: rgba(5, 10, 20, 0.7); border: 1px solid var(--line); }
.co-bank-row { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; align-items: center; gap: 0.8rem; padding: 0.8rem 1rem; }
.co-bank-row + .co-bank-row { border-top: 1px solid var(--line); }
.co-bank-row span { font-size: 0.76rem; color: var(--faint); }
.co-bank-row b { grid-column: 2 / -1; font-size: 0.9rem; color: #fff; }
.co-bank-row code { font-family: var(--font-mono); font-size: 0.88rem; color: #ffd3b0; overflow-wrap: anywhere; }
.co-note { margin: 0.9rem 0 0; font-size: 0.82rem; line-height: 1.6; color: var(--muted); }
.co-bal { padding: 1rem 1.1rem; }
.co-bal-row { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.86rem; color: var(--muted); }
.co-bal-row + .co-bal-row { margin-top: 0.4rem; }
.co-bal-row b { font-family: var(--font-mono); color: #fff; }
.co-bal-bar { margin-top: 0.9rem; }
.co-bal-warn { margin: 0.8rem 0 0; font-size: 0.82rem; line-height: 1.5; color: #fde68a; }
.co-bal-warn a { color: #ffb07a; }

/* Kupon + onaylar */
.co-coupon { display: flex; gap: 0.6rem; }
.co-coupon .input-group { flex: 1; }
.co-coupon .input { font-family: var(--font-mono); text-transform: uppercase; }
.co-coupon .input::placeholder { text-transform: none; }
.co-coupon-btn { height: 48px; min-width: 110px; border: 0; cursor: pointer; font: inherit; font-family: var(--font-brand); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.14em; }
.co-coupon.is-applied .input { border-color: rgba(52, 211, 153, 0.6); color: #a7f3d0; }
.co-consents { display: grid; gap: 0.9rem; margin-top: 1.5rem; padding-top: 1.4rem; border-top: 1px solid var(--line); }
.co-consents .check span { color: var(--muted); }
.co-consents .check a { color: #ffb07a; font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(255, 176, 122, 0.35); }
.co-consents .check a:hover { border-color: #ffb07a; }
.co-optional { padding-top: 0.2rem; }
.co-consents.is-error .check input[data-co-req]:not(:checked) { border-color: rgba(248, 113, 113, 0.85); box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.18); }
.co-consent-err { margin: 0; }
.co-shake { animation: co-shake 0.45s var(--ease); opacity: 1; transform: none; } /* .reveal'in yerini aldığında görünür kalsın */
@keyframes co-shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }

/* ---------- Sipariş özeti ---------- */
.co-summary {
    padding: 1.5rem;
    border-radius: 20px;
    background:
        radial-gradient(ellipse 80% 28% at 50% 0%, rgba(255, 138, 61, 0.14), transparent 70%),
        rgba(8, 14, 27, 0.96);
    border: 1px solid rgba(255, 138, 61, 0.32);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
}
.co-sum-head { display: flex; align-items: center; justify-content: space-between; }
.co-sum-head h2 { margin: 0; font-family: var(--font-brand); font-size: 1.2rem; font-weight: 700; letter-spacing: 0.04em; color: #fff; }
.co-edit { font-size: 0.82rem; font-weight: 600; color: #ffb07a; text-decoration: none; }
.co-edit:hover { color: #ffd3b0; }
.co-items { margin: 0.8rem 0 0; padding: 0; list-style: none; }
.co-item { display: grid; grid-template-columns: 54px minmax(0, 1fr) auto; align-items: center; gap: 0.85rem; padding: 0.85rem 0; border-bottom: 1px solid var(--line); }
.co-thumb {
    --r: #ff8a3d;
    position: relative;
    width: 54px;
    height: 54px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: radial-gradient(circle at 50% 60%, color-mix(in srgb, var(--r) 38%, transparent), transparent 70%), #0d1729;
    border: 1px solid color-mix(in srgb, var(--r) 30%, transparent);
}
.co-thumb .co-medal { width: 42px; height: 42px; }
.co-thumb svg { width: 36px; height: 36px; }
.co-thumb--coins { --r: #ffb07a; }
.co-thumb--gift { --r: #5eead4; }
.co-thumb em { position: absolute; top: -7px; right: -7px; min-width: 21px; height: 21px; padding: 0 0.25rem; display: grid; place-items: center; font-family: var(--font-mono); font-size: 0.7rem; font-style: normal; font-weight: 700; color: #2a1204; background: #ffb07a; clip-path: var(--px-sm); }
.co-item-info { min-width: 0; }
.co-item-info b { display: block; font-size: 0.88rem; font-weight: 600; color: #fff; }
.co-item-info small { display: block; margin-top: 0.15rem; font-size: 0.74rem; color: var(--faint); }
.co-item-price { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.2; white-space: nowrap; }
.co-item-price s { font-family: var(--font-mono); font-size: 0.7rem; color: var(--faint); }
.co-item-price b { font-family: var(--font-mono); font-size: 0.9rem; font-weight: 600; color: #fff; }
.co-totals { display: grid; gap: 0.5rem; margin: 1.1rem 0 0; }
.co-totals div { display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-size: 0.86rem; }
.co-totals div[hidden] { display: none; }
.co-totals dt { color: var(--muted); }
.co-totals dt code { margin-left: 0.3rem; padding: 0.05rem 0.35rem; border-radius: 4px; font-family: var(--font-mono); font-size: 0.72rem; color: #a7f3d0; background: rgba(16, 185, 129, 0.12); }
.co-totals dd { margin: 0; font-family: var(--font-mono); font-weight: 600; color: #fff; }
.co-t-save dd, .co-t-coupon dd { color: #6ee7b7; }
.co-t-vat dd { font-family: inherit; font-weight: 500; font-size: 0.8rem; color: var(--faint); }
.co-t-coupon { animation: co-pane 0.4s var(--ease); }
.co-total { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px dashed var(--line-strong); }
.co-total span { font-size: 0.92rem; font-weight: 600; color: #fff; }
.co-total b { font-family: var(--font-mono); font-size: 1.85rem; font-weight: 600; color: #fff; text-shadow: 0 0 24px rgba(255, 138, 61, 0.35); }
.co-bonus { display: flex; align-items: center; gap: 0.6rem; margin: 1rem 0 0; padding: 0.65rem 0.8rem; border-radius: 10px; font-size: 0.8rem; line-height: 1.45; color: var(--muted); background: rgba(94, 234, 212, 0.07); border: 1px solid rgba(94, 234, 212, 0.2); }
.co-bonus svg { width: 20px; height: 20px; flex-shrink: 0; }
.co-bonus b { color: #99f6e4; }
.co-pay { width: 100%; margin-top: 1.2rem; font: inherit; }
.co-pay.is-loading { cursor: progress; filter: saturate(0.8); }
.co-pay.is-loading .pb-core { background: repeating-linear-gradient(-45deg, #ff9a52 0 10px, #f47a2e 10px 20px); background-size: 28px 28px; animation: co-stripes 0.6s linear infinite; }
@keyframes co-stripes { to { background-position: 28px 0; } }
.co-secure { display: flex; gap: 0.75rem; margin-top: 1.1rem; }
.co-secure svg { width: 22px; height: 22px; flex-shrink: 0; color: #6ee7b7; }
.co-secure p { margin: 0; font-size: 0.76rem; line-height: 1.5; color: var(--faint); }
.co-secure b { display: block; font-size: 0.8rem; color: #fff; }
.co-logos { display: flex; justify-content: center; flex-wrap: wrap; gap: 0.4rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.co-logo { height: 28px; min-width: 50px; padding: 0 0.5rem; display: flex; align-items: center; justify-content: center; border-radius: 6px; font-size: 0.72rem; font-weight: 900; color: #cbd5e1; background: rgba(255, 255, 255, 0.06); border: 1px solid var(--line); }
.co-logo--visa { font-style: italic; font-size: 0.8rem; }
.co-logo--mc i { width: 15px; height: 15px; }
.co-logo--mc i + i { margin-left: -6px; }
.co-logo--troy { font-size: 0.82rem; font-weight: 800; }

/* ---------- Onay ---------- */
.co-done { display: none; max-width: 920px; margin: 0 auto; padding: 0 1.5rem 4rem; }
.co-page.is-done .co-done { display: block; }
.co-done-card {
    position: relative;
    overflow: hidden;
    padding: 3rem 2.6rem 2.4rem;
    text-align: center;
    border-radius: 26px;
    background:
        radial-gradient(ellipse 55% 40% at 50% 0%, rgba(52, 211, 153, 0.16), transparent 70%),
        radial-gradient(ellipse 60% 50% at 50% 115%, rgba(255, 138, 61, 0.22), transparent 70%),
        rgba(8, 14, 27, 0.96);
    border: 1px solid rgba(52, 211, 153, 0.32);
    box-shadow: 0 40px 110px rgba(0, 0, 0, 0.55), 0 0 80px rgba(52, 211, 153, 0.08);
}
.co-confetti { position: absolute; inset: 0; pointer-events: none; }
.co-confetti i { position: absolute; top: -12px; width: 8px; height: 8px; background: #ff8a3d; opacity: 0.85; animation: co-fall 5s linear infinite; }
.co-confetti i:nth-child(4n + 2) { background: #5eead4; width: 6px; height: 6px; }
.co-confetti i:nth-child(4n + 3) { background: #ffd3b0; width: 5px; height: 5px; }
.co-confetti i:nth-child(4n + 4) { background: #34d399; width: 7px; height: 7px; }
.co-confetti i:nth-child(1) { left: 4%; animation-delay: -0.3s; }
.co-confetti i:nth-child(2) { left: 10%; animation-delay: -2.1s; }
.co-confetti i:nth-child(3) { left: 17%; animation-delay: -3.6s; }
.co-confetti i:nth-child(4) { left: 23%; animation-delay: -1.2s; }
.co-confetti i:nth-child(5) { left: 30%; animation-delay: -4.4s; }
.co-confetti i:nth-child(6) { left: 36%; animation-delay: -2.7s; }
.co-confetti i:nth-child(7) { left: 43%; animation-delay: -0.9s; }
.co-confetti i:nth-child(8) { left: 49%; animation-delay: -3.1s; }
.co-confetti i:nth-child(9) { left: 56%; animation-delay: -1.7s; }
.co-confetti i:nth-child(10) { left: 62%; animation-delay: -4s; }
.co-confetti i:nth-child(11) { left: 68%; animation-delay: -0.5s; }
.co-confetti i:nth-child(12) { left: 74%; animation-delay: -2.4s; }
.co-confetti i:nth-child(13) { left: 80%; animation-delay: -3.8s; }
.co-confetti i:nth-child(14) { left: 86%; animation-delay: -1.4s; }
.co-confetti i:nth-child(15) { left: 91%; animation-delay: -4.7s; }
.co-confetti i:nth-child(16) { left: 96%; animation-delay: -2.9s; }
@keyframes co-fall { 0% { transform: translateY(0) rotate(0); opacity: 0; } 8% { opacity: 0.9; } 70% { opacity: 0.6; } 100% { transform: translateY(560px) rotate(260deg); opacity: 0; } }
.co-done-card > :not(.co-confetti) { position: relative; }
.co-done-badge { width: 108px; height: 108px; margin: 0 auto; display: grid; place-items: center; animation: co-pop 0.7s var(--ease) both; }
.co-done-badge::before { content: ''; position: absolute; inset: 10px; background: linear-gradient(180deg, #a7f3d0, #10b981); clip-path: var(--px-lg); }
.co-done-badge::after { content: ''; position: absolute; inset: 12.5px; background: radial-gradient(circle at 50% 30%, #0f3b31, #07221c 80%); clip-path: var(--px-lg); }
.co-done-badge svg { position: relative; z-index: 1; width: 44px; height: 30px; color: #6ee7b7; filter: drop-shadow(0 0 10px rgba(52, 211, 153, 0.7)); }
.co-done-ring { position: absolute; inset: -4px; border-radius: 50%; border: 1px dashed rgba(52, 211, 153, 0.45); animation: orbit 26s linear infinite; }
.co-done-ring::after { content: ''; position: absolute; top: 50%; right: -4px; width: 7px; height: 7px; background: #ffb07a; box-shadow: 0 0 10px #ff8a3d; }
@keyframes co-pop { from { opacity: 0; transform: scale(0.6); } }
.co-done-card .eyebrow { margin-top: 1.4rem; color: #6ee7b7; }
.co-done-title { margin: 0.7rem 0 0; font-family: var(--font-brand); font-size: clamp(2rem, 4.2vw, 2.9rem); font-weight: 700; line-height: 1.1; background: linear-gradient(180deg, #fff 0%, #ffe7d6 60%, #ffb07a 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.co-done-lead { max-width: 560px; margin: 0.9rem auto 0; font-size: 1rem; line-height: 1.65; color: var(--muted); }
.co-done-lead b { font-family: var(--font-mono); color: #fff; }
.co-done-meta { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 2rem 0 0; border-radius: 16px; background: rgba(5, 10, 20, 0.65); border: 1px solid var(--line); text-align: left; }
.co-done-meta div { min-width: 0; padding: 1rem 1.1rem; }
.co-done-meta div + div { border-left: 1px solid var(--line); }
.co-done-meta dt { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--faint); }
.co-done-meta dd { display: flex; align-items: center; flex-wrap: wrap; gap: 0.2rem 0.5rem; margin: 0.4rem 0 0; font-family: var(--font-mono); font-size: 0.86rem; font-weight: 600; color: #fff; }
.co-done-meta code { font-family: inherit; color: #ffd3b0; }
.co-done-amount { font-size: 1.05rem !important; color: #6ee7b7 !important; }
.co-copy { padding: 0; border: 0; background: none; font: inherit; font-family: 'Inter', sans-serif; font-size: 0.7rem; font-weight: 600; color: #ffb07a; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.co-copy.is-copied { color: #6ee7b7; }
.co-done-deliver { margin-top: 1.2rem; padding: 1.2rem; text-align: left; border-radius: 16px; background: rgba(5, 10, 20, 0.5); border: 1px solid var(--line); }
.co-done-to { display: flex; align-items: center; gap: 0.85rem; padding-bottom: 1rem; border-bottom: 1px solid var(--line); }
.co-done-to .mc-head { width: 44px; height: 44px; }
.co-done-to small { display: block; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.16em; color: var(--faint); }
.co-done-to b { font-family: var(--font-mono); font-size: 1rem; color: #fff; }
.co-done-to .badge { margin-left: auto; }
.co-done-to .badge .live-dot { width: 6px; height: 6px; }
.co-done-items { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; margin: 1rem 0 0; padding: 0; list-style: none; }
.co-done-items li { display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 0.8rem 0.6rem 0.6rem; border-radius: 12px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--line); opacity: 0; animation: co-deliver 0.5s var(--ease) forwards; }
.co-done-items li:nth-child(2) { animation-delay: 0.15s; }
.co-done-items li:nth-child(3) { animation-delay: 0.3s; }
.co-done-items li:nth-child(4) { animation-delay: 0.45s; }
@keyframes co-deliver { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.co-done-items .co-thumb { width: 44px; height: 44px; }
.co-done-items .co-thumb .co-medal { width: 34px; height: 34px; }
.co-done-items .co-thumb svg { width: 28px; height: 28px; }
.co-done-items b { flex: 1; min-width: 0; font-size: 0.86rem; font-weight: 600; color: #fff; }
.co-delivered { flex-shrink: 0; font-size: 0.7rem; font-weight: 700; color: #6ee7b7; white-space: nowrap; }
.co-delivered::before { content: '✓ '; }
.co-done-tip { display: flex; align-items: center; justify-content: center; gap: 0.6rem; margin: 1.5rem 0 0; font-size: 0.88rem; line-height: 1.5; color: var(--muted); }
.co-done-tip svg { width: 18px; height: 18px; flex-shrink: 0; color: #ffb07a; }
.co-done-tip code { padding: 0.05rem 0.4rem; border-radius: 5px; font-family: var(--font-mono); font-size: 0.82rem; color: #ffd3b0; background: rgba(255, 255, 255, 0.07); }
.co-done-cta { display: flex; justify-content: center; flex-wrap: wrap; gap: 1rem; margin-top: 1.7rem; }
.co-done-back { height: 60px; padding: 0 1.8rem; }
.co-done-invoice { display: inline-block; margin-top: 1.2rem; font-size: 0.8rem; color: var(--faint); text-underline-offset: 3px; }
.co-done-invoice:hover { color: var(--muted); }

@media (prefers-reduced-motion: reduce) {
    .co-card-inner { transition: none; }
    .co-pane, .co-t-coupon, .co-shake, .co-done-badge, .co-done-ring, .co-pay.is-loading .pb-core { animation: none !important; }
    .co-done-items li { animation: none; opacity: 1; }
    .co-confetti i { animation: none; top: auto; opacity: 0.5; }
    .co-confetti i:nth-child(odd) { top: 6%; }
    .co-confetti i:nth-child(even) { top: 12%; }
}

/* ---------- Tablet ---------- */
@media (max-width: 1000px) {
    .co-layout { grid-template-columns: 1fr; max-width: 760px; }
    .co-side { position: static; }
    .co-methods { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .co-done-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .co-done-meta div:nth-child(3) { border-left: 0; }
    .co-done-meta div:nth-child(n + 3) { border-top: 1px solid var(--line); }
}
@media (max-width: 760px) {
    .co-pane--card { grid-template-columns: 1fr; }
}

/* ---------- Mobil ---------- */
@media (max-width: 640px) {
    .co-hero { padding-bottom: 1.8rem; }
    .co-steps { margin-top: 1.5rem; }
    .co-step-ico { width: 40px; height: 40px; }
    .co-steps li + li::before { top: 18px; left: calc(-50% + 30px); right: calc(50% + 30px); }
    .co-step-txt { font-size: 0.78rem; }
    .co-layout { padding: 0 1rem 3rem; gap: 1.25rem; }
    .co-panel { padding: 1.25rem 1.1rem; }
    .co-panel-head { margin-bottom: 1.1rem; }
    .co-grid-2 { grid-template-columns: 1fr; }
    .co-grid-tight { grid-template-columns: 1fr 1fr; }
    .co-methods { gap: 0.55rem; }
    .co-method { padding: 0.85rem 0.8rem; gap: 0.6rem; }
    .co-m-ico { width: 36px; height: 36px; }
    .co-m-txt b { font-size: 0.86rem; }
    .co-pane-grid { grid-template-columns: 1fr; }
    .co-bank-row { grid-template-columns: minmax(0, 1fr) auto; gap: 0.3rem 0.8rem; }
    .co-bank-row span { grid-column: 1 / -1; }
    .co-bank-row b { grid-column: 1 / -1; }
    .co-coupon-btn { min-width: 92px; }
    .co-summary { padding: 1.25rem 1.1rem; }
    .co-total b { font-size: 1.6rem; }
    .co-done { padding: 0 1rem 3rem; }
    .co-done-card { padding: 2.2rem 1.15rem 1.8rem; border-radius: 20px; }
    .co-done-meta div { padding: 0.85rem 0.9rem; }
    .co-done-items { grid-template-columns: 1fr; }
    .co-done-deliver { padding: 1rem 0.9rem; }
    .co-done-cta { flex-direction: column; align-items: stretch; }
    .co-done-cta .play-btn--lg, .co-done-back { width: 100%; }
    .co-done-tip { align-items: flex-start; text-align: left; }
}

/* ===== oy-ver.css ===== */
/* =========================================================
   Oy ver (vt-)
   ========================================================= */
.vt-page { padding-bottom: 3rem; }
.vt-hero-stats { display: flex; justify-content: center; flex-wrap: wrap; gap: 0.7rem; margin: 1.6rem 0 0; padding: 0; list-style: none; }
.vt-hero-stats li { display: flex; align-items: baseline; gap: 0.5rem; padding: 0.55rem 1rem; border-radius: 12px; background: rgba(8, 14, 27, 0.9); border: 1px solid var(--line); font-size: 0.84rem; color: var(--muted); }
.vt-hero-stats b { font-family: var(--font-mono); font-size: 1.05rem; color: #ffd3b0; }
.vt-wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }

/* Konsol: ad + tur + bonus */
.vt-console { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1.1fr); gap: 1.5rem; align-items: center; padding: 1.4rem 1.6rem; border-radius: 20px; background: var(--glass-strong); border: 1px solid var(--line); }
.vt-name-row { display: flex; align-items: center; gap: 0.7rem; margin-top: 0.45rem; }
.vt-head { width: 46px; height: 46px; flex-shrink: 0; border-radius: 10px; image-rendering: pixelated; box-shadow: 0 0 0 2px rgba(255, 138, 61, 0.45); }
.vt-name-row .input { font-family: var(--font-mono); font-size: 1rem; }
.vt-name .hint { margin-top: 0.45rem; }
.vt-round { padding: 0 1.5rem; border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
.vt-round-top { display: flex; justify-content: space-between; align-items: baseline; font-size: 0.82rem; color: var(--muted); }
.vt-round-top b { font-family: var(--font-mono); font-size: 1.5rem; color: #fff; }
.vt-segs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 0.6rem 0 0.7rem; }
.vt-segs i { height: 12px; background: rgba(255, 255, 255, 0.08); clip-path: var(--px-sm); transition: background 0.4s var(--ease); }
.vt-segs i.is-on { background: repeating-linear-gradient(90deg, #ffb07a 0 6px, #ff8a3d 6px 8px); }
.vt-round-note { margin: 0; font-size: 0.78rem; color: var(--faint); }
.vt-round-note b { color: #ffd3b0; }
.vt-bonus { display: flex; align-items: center; gap: 1rem; padding: 0.9rem 1rem; border-radius: 14px; background: rgba(192, 132, 252, 0.06); border: 1px dashed rgba(192, 132, 252, 0.4); transition: background 0.4s, border-color 0.4s; }
.vt-bonus-art { position: relative; flex-shrink: 0; width: 56px; height: 56px; }
.vt-bonus-art svg { width: 100%; height: 100%; filter: grayscale(0.7) brightness(0.8); transition: filter 0.4s; }
.vt-lock { position: absolute; right: -4px; bottom: -4px; width: 20px; height: 20px; border-radius: 6px; background: #0a1222 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c4b5fd' stroke-width='2.4' stroke-linecap='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E") center / 13px no-repeat; border: 1px solid rgba(192, 132, 252, 0.5); }
.vt-bonus small { display: block; font-size: 0.6rem; font-weight: 800; letter-spacing: 0.14em; color: #c4b5fd; }
.vt-bonus b { display: block; margin: 0.15rem 0; font-size: 0.92rem; color: #fff; }
.vt-bonus span { font-size: 0.76rem; color: var(--muted); }
.vt-bonus.is-open { background: radial-gradient(ellipse at 20% 50%, rgba(192, 132, 252, 0.25), transparent 70%), rgba(192, 132, 252, 0.08); border-style: solid; border-color: #c084fc; }
.vt-bonus.is-open .vt-bonus-art svg { filter: drop-shadow(0 0 12px rgba(192, 132, 252, 0.8)); animation: vt-bob 1.6s ease-in-out infinite; }
.vt-bonus.is-open .vt-lock { display: none; }
@keyframes vt-bob { 50% { transform: translateY(-4px) rotate(-3deg); } }

/* Başlık satırı */
.vt-head-row { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 0.6rem 2rem; margin-bottom: 1.1rem; }
.vt-head-row p { max-width: 420px; margin: 0; font-size: 0.88rem; color: var(--muted); }
.vt-h2 { margin: 0.5rem 0 0; font-family: var(--font-brand); font-size: clamp(1.6rem, 3vw, 2.2rem); color: #fff; }

/* Oy siteleri */
.vt-sites { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.vt-site { --c: #ff8a3d; position: relative; display: flex; flex-direction: column; gap: 0.9rem; padding: 1.1rem; overflow: hidden; border-radius: 18px; background: radial-gradient(ellipse at 50% -20%, color-mix(in srgb, var(--c) 22%, transparent), transparent 65%), var(--glass-strong); border: 1px solid color-mix(in srgb, var(--c) 40%, transparent); transition: transform 0.25s var(--ease), border-color 0.3s, filter 0.3s; }
.vt-site:hover { transform: translateY(-3px); }
.vt-site header { display: flex; align-items: center; gap: 0.7rem; }
.vt-logo { width: 42px; height: 42px; flex-shrink: 0; display: grid; place-items: center; font-family: var(--font-mono); font-size: 0.9rem; font-weight: 700; color: #0a1222; background: var(--c); clip-path: var(--px-sm); }
.vt-site header b { display: block; font-size: 0.95rem; color: #fff; }
.vt-site header small { font-size: 0.72rem; color: var(--faint); }
.vt-pos { margin-left: auto; padding: 0.15rem 0.45rem; border-radius: 6px; font-family: var(--font-mono); font-size: 0.72rem; color: var(--muted); background: rgba(255, 255, 255, 0.05); }
.vt-rw { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; padding: 0; list-style: none; }
.vt-rw li { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.3rem 0.55rem; border-radius: 8px; font-size: 0.76rem; font-weight: 600; color: #ffd3b0; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line); }
.vt-rw svg { width: 16px; height: 16px; }
.vt-state { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; margin-top: auto; font-size: 0.76rem; color: #6ee7b7; }
.vt-timer { font-family: var(--font-mono); font-weight: 600; }
.vt-go { width: 100%; height: 44px; }
.vt-site.is-voted { border-color: var(--line); filter: saturate(0.5); }
.vt-site.is-voted .vt-state { color: var(--muted); }
.vt-site.is-voted .vt-timer { color: #fff; }
.vt-site.is-voted .vt-go { filter: grayscale(1); opacity: 0.55; cursor: default; }
.vt-site.is-pop { animation: vt-pop 0.6s var(--ease); }
.vt-site.is-pop::after { content: '+25 Kredi'; position: absolute; top: 40%; left: 50%; font-family: var(--font-mono); font-weight: 700; color: #ffd3b0; text-shadow: 0 0 12px rgba(255, 138, 61, 0.9); transform: translate(-50%, 0); animation: vt-float 1.2s var(--ease) forwards; pointer-events: none; }
@keyframes vt-pop { 40% { transform: scale(1.04); } }
@keyframes vt-float { to { opacity: 0; transform: translate(-50%, -60px); } }

/* Aylık yol */
.vt-month-head { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 1rem; }
.vt-month-head .panel-title { margin-bottom: 0.3rem; }
.vt-month-head p { margin: 0; font-size: 0.84rem; color: var(--muted); }
.vt-month-num b { font-family: var(--font-mono); font-size: 2rem; color: #ffd3b0; }
.vt-month-num span { margin-left: 0.4rem; font-size: 0.8rem; color: var(--faint); }
.vt-road { position: relative; margin: 1.6rem 1.2rem 0.4rem; padding-top: 0.2rem; }
.vt-road-bar { height: 10px; background: rgba(255, 255, 255, 0.07); clip-path: var(--px-sm); }
.vt-road-bar span { display: block; width: var(--p); height: 100%; background: repeating-linear-gradient(90deg, #ffb07a 0 8px, #ff8a3d 8px 10px); box-shadow: 0 0 12px rgba(255, 138, 61, 0.6); }
.vt-stops { position: relative; height: 96px; margin: 0; padding: 0; list-style: none; }
.vt-stops li { position: absolute; top: -24px; left: var(--at); display: flex; flex-direction: column; align-items: center; gap: 0.45rem; width: 110px; transform: translateX(-50%); text-align: center; }
.vt-stops i { width: 36px; height: 36px; display: grid; place-items: center; font-family: var(--font-mono); font-size: 0.78rem; font-style: normal; font-weight: 700; color: var(--muted); background: #0a1222; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.14); clip-path: var(--px-sm); }
.vt-stops li.is-done i { color: #2a1204; background: linear-gradient(180deg, #ffb87e, #ff8a3d); box-shadow: none; }
.vt-stops li.is-big i { color: #fff; box-shadow: inset 0 0 0 2px #c084fc; }
.vt-stops span { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; }
.vt-stops svg { width: 30px; height: 30px; }
.vt-stops li:not(.is-done) svg { opacity: 0.6; }
.vt-stops b { font-size: 0.76rem; line-height: 1.25; color: #fff; }
.vt-stops li.is-done b { color: #6ee7b7; }

/* Alt: sıralama + nasıl */
.vt-lower { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.vt-podium { display: grid; grid-template-columns: repeat(3, 1fr); align-items: end; gap: 0.7rem; margin: 0.6rem 0 1rem; }
.vt-pod { position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.25rem; padding: 1rem 0.5rem 0.9rem; text-align: center; border-radius: 14px 14px 6px 6px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--line); }
.vt-pod .mc-head { border-radius: 10px; margin-bottom: 0.3rem; }
.vt-pod b { font-size: 0.9rem; color: #fff; }
.vt-pod span { font-family: var(--font-mono); font-size: 0.78rem; color: var(--muted); }
.vt-pod em { font-size: 0.72rem; font-style: normal; font-weight: 700; color: #ffd3b0; }
.vt-pod i { position: absolute; top: -12px; width: 26px; height: 26px; display: grid; place-items: center; font-family: var(--font-mono); font-size: 0.8rem; font-style: normal; font-weight: 700; color: #2a1204; background: #cbd5e1; clip-path: var(--px-sm); }
.vt-pod--1 { padding-top: 1.5rem; padding-bottom: 1.4rem; border-color: rgba(255, 138, 61, 0.5); background: radial-gradient(ellipse at 50% 0, rgba(255, 138, 61, 0.2), transparent 70%), rgba(255, 255, 255, 0.03); }
.vt-pod--1 i { background: linear-gradient(180deg, #ffb87e, #ff8a3d); }
.vt-pod--3 i { background: #d6a27a; }
.vt-list { margin: 0; padding: 0; list-style: none; }
.vt-list li { display: flex; align-items: center; gap: 0.7rem; padding: 0.55rem 0.4rem; border-top: 1px solid var(--line); }
.vt-list .mc-head { border-radius: 6px; }
.vt-list b { font-size: 0.88rem; color: #fff; }
.vt-n { width: 26px; font-family: var(--font-mono); font-size: 0.8rem; color: var(--faint); }
.vt-v { margin-left: auto; font-family: var(--font-mono); font-size: 0.84rem; color: var(--muted); }
.vt-list li.is-me { margin-top: 0.3rem; border: 1px solid rgba(255, 138, 61, 0.4); border-radius: 10px; background: rgba(255, 138, 61, 0.08); }
.vt-list li.is-me b, .vt-list li.is-me .vt-v { color: #ffd3b0; }
.vt-steps { display: grid; gap: 0.9rem; margin: 0.4rem 0 1rem; padding: 0; list-style: none; counter-reset: vt; }
.vt-steps li { position: relative; padding-left: 3rem; counter-increment: vt; }
.vt-steps li::before { content: counter(vt); position: absolute; left: 0; top: 0; width: 34px; height: 34px; display: grid; place-items: center; font-family: var(--font-mono); font-weight: 700; color: #2a1204; background: linear-gradient(180deg, #ffb87e, #ff8a3d); clip-path: var(--px-sm); }
.vt-steps b { display: block; font-size: 0.92rem; color: #fff; }
.vt-steps span { font-size: 0.84rem; line-height: 1.5; color: var(--muted); }
.vt-note { margin: 0; padding: 0.8rem 1rem; border-radius: 12px; font-size: 0.8rem; line-height: 1.5; color: #fde68a; background: rgba(251, 191, 36, 0.06); border: 1px solid rgba(251, 191, 36, 0.3); }

/* Duyarlı */
@media (max-width: 1000px) {
    .vt-console { grid-template-columns: 1fr 1fr; }
    .vt-round { padding: 0 0 0 1.5rem; border-right: 0; }
    .vt-bonus { grid-column: 1 / -1; }
    .vt-sites { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .vt-lower { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
    .vt-console { grid-template-columns: 1fr; padding: 1.1rem; }
    .vt-round { padding: 1.1rem 0 0; border-left: 0; border-top: 1px solid var(--line); }
    .vt-sites { grid-template-columns: minmax(0, 1fr); }
    .vt-road { margin: 1.1rem 0 0; }
    .vt-road-bar { margin-bottom: 0.9rem; }
    .vt-stops { display: grid; gap: 0.45rem; height: auto; }
    .vt-stops li { position: static; flex-direction: row; gap: 0.8rem; width: auto; padding: 0.45rem 0.6rem; transform: none; text-align: left; border-radius: 10px; background: rgba(255, 255, 255, 0.025); border: 1px solid var(--line); }
    .vt-stops li.is-done { border-color: rgba(94, 234, 212, 0.25); }
    .vt-stops span { flex-direction: row; gap: 0.5rem; }
    .vt-stops svg { width: 24px; height: 24px; }
}
@media (prefers-reduced-motion: reduce) {
    .vt-site, .vt-site.is-pop, .vt-bonus.is-open .vt-bonus-art svg { animation: none; transition: none; }
    .vt-site.is-pop::after { display: none; }
}

/* ===== profil.css ===== */
/* =========================================================
   Oyuncu profili (pf-) — "Piksel Pasaport"
   ========================================================= */
.pf-page { overflow-x: clip; padding-bottom: 2rem; }

/* ---------- Kapak + kimlik ---------- */
.pf-cover { position: relative; height: 380px; overflow: hidden; }
.pf-cover img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 42%; }
.pf-cover::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5, 10, 20, 0.4) 0%, rgba(5, 10, 20, 0.25) 40%, rgba(5, 10, 20, 0.95) 100%), linear-gradient(90deg, rgba(5, 10, 20, 0.65), transparent 35%, transparent 65%, rgba(5, 10, 20, 0.65)); }
.pf-id { position: relative; z-index: 2; display: grid; grid-template-columns: 240px minmax(0, 1fr) 300px; align-items: end; gap: 2rem; margin-top: -210px; }

/* 3D skin + kaide + isim etiketi */
.pf-skin { position: relative; height: 340px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; }
.pf-nametag { position: absolute; top: 0; left: 50%; z-index: 2; padding: 0.28rem 0.65rem; transform: translateX(-50%); font-family: var(--font-mono); font-size: 0.8rem; font-weight: 600; white-space: nowrap; color: #fff; background: rgba(0, 0, 0, 0.6); }
.pf-nametag b { color: #ff9a52; }
.pf-skin-img { position: relative; z-index: 1; width: auto; height: 270px; margin-bottom: -6px; filter: drop-shadow(0 20px 22px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 40px rgba(255, 138, 61, 0.3)); animation: pf-float 5s ease-in-out infinite; transition: opacity 0.18s var(--ease), transform 0.18s var(--ease); }
.pf-skin-img.is-turning { opacity: 0; transform: scaleX(0.4); }
@keyframes pf-float { 50% { translate: 0 -6px; } }
.pf-pedestal { position: relative; width: 200px; height: 38px; background: linear-gradient(180deg, #ffb07a 0 3px, #ff8a3d 3px 6px, #1a2540 6px 100%); clip-path: var(--px-sm); }
.pf-pedestal::after { content: ''; position: absolute; left: 12px; right: 12px; bottom: 8px; height: 2px; background: repeating-linear-gradient(90deg, rgba(255, 176, 122, 0.4) 0 6px, transparent 6px 10px); }
.pf-skin::after { content: ''; position: absolute; bottom: -18px; left: 50%; width: 260px; height: 40px; transform: translateX(-50%); background: radial-gradient(ellipse, rgba(255, 138, 61, 0.35), transparent 70%); pointer-events: none; }
.pf-turn { position: absolute; bottom: 50px; z-index: 3; width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--line-strong); border-radius: 9px; background: rgba(8, 14, 27, 0.9); color: #ffd3b0; font-size: 1rem; cursor: pointer; transition: border-color 0.2s var(--ease); }
.pf-turn:hover { border-color: rgba(255, 138, 61, 0.6); }
.pf-turn--l { left: 6px; }
.pf-turn--r { right: 6px; }

/* Kimlik bilgileri */
.pf-id-main { min-width: 0; padding-bottom: 0.4rem; }
.pf-id-main .breadcrumb { justify-content: flex-start; margin-bottom: 1rem; }
.pf-name-row { display: flex; align-items: center; flex-wrap: wrap; gap: 0.7rem 1rem; }
.pf-name { margin: 0; font-family: var(--font-brand); font-size: clamp(2.4rem, 5vw, 3.6rem); font-weight: 700; line-height: 1; color: #fff; text-shadow: 0 4px 30px rgba(0, 0, 0, 0.6); }
.pf-clan { padding: 0.2rem 0.5rem; border-radius: 6px; font-family: var(--font-mono); font-size: 0.88rem; font-weight: 600; color: #5eead4; background: rgba(8, 14, 27, 0.8); border: 1px solid rgba(94, 234, 212, 0.35); }
.pf-meta { display: flex; flex-wrap: wrap; gap: 0.5rem 1.3rem; margin-top: 0.9rem; font-size: 0.88rem; color: #c6cedd; text-shadow: 0 1px 2px rgba(5, 10, 20, 0.9); }
.pf-meta span { display: inline-flex; align-items: center; gap: 0.4rem; }
.pf-meta svg { width: 15px; height: 15px; color: #ffb07a; }
.pf-online { font-weight: 600; color: #6ee7b7; }
.pf-online .live-dot { width: 7px; height: 7px; }
.pf-level { display: flex; align-items: center; gap: 1rem; max-width: 520px; margin-top: 1.2rem; padding: 0.8rem 1rem; border-radius: 14px; background: rgba(8, 14, 27, 0.9); border: 1px solid var(--line); }
.pf-lvl-badge { position: relative; isolation: isolate; flex-shrink: 0; width: 54px; height: 54px; display: grid; place-items: center; font-family: var(--font-mono); font-size: 1.3rem; font-weight: 700; color: #2a1204; background: #ffd3b0; clip-path: var(--px-sm); }
.pf-lvl-badge::before { content: ''; position: absolute; inset: 2px; z-index: -1; background: linear-gradient(180deg, #ffb87e, #ff8a3d 60%, #dd6320); clip-path: var(--px-sm); }
.pf-lvl-info { flex: 1; min-width: 0; }
.pf-lvl-top { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: 0.45rem; font-size: 0.8rem; color: var(--muted); }
.pf-lvl-top b { color: #fff; }
.pf-lvl-top .num { font-size: 0.78rem; }
.pf-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.1rem; }
.pf-actions .btn-gold, .pf-actions .btn-ghost-px { height: 42px; }
.pf-add.is-sent { color: #042f2e; background: #99f6e4; }
.pf-add.is-sent::before { background: linear-gradient(180deg, #5eead4, #2dd4bf); }
.pf-share { height: 42px; padding: 0 1rem; display: inline-flex; align-items: center; gap: 0.45rem; border: 1px solid var(--line); border-radius: 10px; background: rgba(8, 14, 27, 0.85); color: var(--muted); font: inherit; font-size: 0.82rem; font-weight: 600; cursor: pointer; transition: color 0.2s var(--ease), border-color 0.2s var(--ease); }
.pf-share:hover { color: #fff; border-color: var(--line-strong); }
.pf-share svg { width: 16px; height: 16px; }
.pf-share.is-copied { color: #6ee7b7; border-color: rgba(52, 211, 153, 0.4); }

/* Pasaport kartı */
.pf-passport { position: relative; overflow: hidden; margin-bottom: 0.4rem; padding: 1.1rem 1.2rem 1rem; border-radius: 14px; background: linear-gradient(160deg, #13223f, #0a1222 70%); border: 1px solid rgba(255, 176, 122, 0.35); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5); transform: rotate(-2deg); }
.pf-passport::before { content: ''; position: absolute; inset: 0; background: repeating-radial-gradient(circle at 100% 0, rgba(255, 138, 61, 0.07) 0 2px, transparent 2px 9px); pointer-events: none; }
.pf-pp-head { position: relative; display: flex; justify-content: space-between; align-items: center; font-size: 0.58rem; font-weight: 800; letter-spacing: 0.2em; color: #ffb07a; }
.pf-pp-title { position: relative; margin: 0.45rem 0 0.8rem; font-family: var(--font-brand); font-size: 1.12rem; font-weight: 700; letter-spacing: 0.08em; color: #fff; }
.pf-pp-data { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 0.55rem 0.8rem; margin: 0; }
.pf-pp-data dt { font-size: 0.54rem; font-weight: 700; letter-spacing: 0.14em; color: var(--faint); }
.pf-pp-data dd { margin: 0.1rem 0 0; font-family: var(--font-mono); font-size: 0.78rem; color: #fff; }
.pf-pp-mrz { position: relative; margin-top: 0.85rem; padding-top: 0.6rem; border-top: 1px dashed rgba(255, 176, 122, 0.25); font-family: var(--font-mono); font-size: 0.6rem; line-height: 1.45; letter-spacing: 0.1em; color: rgba(255, 211, 176, 0.6); word-break: break-all; }
.pf-pp-stamp { position: absolute; right: 14px; bottom: 44px; width: 76px; height: 76px; display: grid; place-items: center; border-radius: 50%; border: 2px solid rgba(94, 234, 212, 0.6); font-size: 0.48rem; font-weight: 800; line-height: 1.25; letter-spacing: 0.1em; text-align: center; color: rgba(94, 234, 212, 0.8); transform: rotate(14deg); }
.pf-pp-stamp::after { content: ''; position: absolute; inset: 5px; border-radius: 50%; border: 1px dashed rgba(94, 234, 212, 0.5); }

/* ---------- Sekmeler ---------- */
.pf-tabs { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; margin-top: 2.4rem; }
.pf-tabs small { font-size: 0.8rem; color: var(--faint); }
.pf-pane { margin-top: 1.4rem; }
.pf-grid { display: grid; grid-template-columns: minmax(0, 1fr) 330px; align-items: start; gap: 1.25rem; }
.pf-main, .pf-side { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; min-width: 0; }

/* İstatistikler */
.pf-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.9rem; }
.pf-stat { position: relative; overflow: hidden; padding: 1rem 1.1rem; border-radius: 16px; background: var(--glass-strong); border: 1px solid var(--line); }
.pf-stat .feat-ico { width: 36px; height: 36px; }
.pf-stat b { display: block; margin-top: 0.75rem; font-family: var(--font-mono); font-size: 1.55rem; font-weight: 600; line-height: 1.1; color: #fff; }
.pf-stat span { font-size: 0.78rem; color: var(--muted); }
.pf-stat em { position: absolute; top: 1rem; right: 1rem; font-size: 0.72rem; font-style: normal; font-weight: 700; color: #6ee7b7; }
.pf-stat em.is-down { color: #fca5a5; }

/* Sezon yolu */
.pf-season-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.6rem 1rem; }
.pf-season-head .panel-title { margin: 0; }
.pf-season-head small { font-size: 0.8rem; color: var(--muted); }
.pf-season-head small b { color: #ffd3b0; }
.pf-track { overflow-x: auto; margin: 0.6rem -0.4rem 0; padding: 1rem 0.4rem 0.6rem; scrollbar-width: thin; scrollbar-color: rgba(255, 138, 61, 0.4) transparent; }
.pf-tiers { position: relative; display: flex; gap: 12px; width: max-content; margin: 0; padding: 0; list-style: none; }
.pf-tiers::before, .pf-tiers::after { content: ''; position: absolute; left: 20px; top: 18px; height: 4px; }
.pf-tiers::before { right: 20px; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.14) 0 6px, transparent 6px 10px); }
.pf-tiers::after { width: var(--p, 0); background: repeating-linear-gradient(90deg, #ff8a3d 0 6px, transparent 6px 10px); filter: drop-shadow(0 0 4px rgba(255, 138, 61, 0.8)); }
.pf-tier { position: relative; z-index: 1; width: 40px; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
.pf-tier i { width: 40px; height: 40px; display: grid; place-items: center; font-family: var(--font-mono); font-size: 0.76rem; font-style: normal; font-weight: 600; color: var(--faint); background: #0a1222; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.12); clip-path: var(--px-sm); }
.pf-tier.is-done i { color: #2a1204; background: linear-gradient(180deg, #ffb87e, #ff8a3d); box-shadow: none; }
.pf-tier.is-now i { color: #fff; background: #0f1d36; box-shadow: inset 0 0 0 2px #5eead4; }
.pf-tier.is-now::before { content: 'ŞİMDİ'; position: absolute; top: -18px; font-size: 0.52rem; font-weight: 800; letter-spacing: 0.14em; color: #5eead4; }
.pf-tier-rw { width: 34px; height: 34px; padding: 4px; border-radius: 8px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line); }
.pf-tier-rw svg { display: block; width: 100%; height: 100%; }
.pf-tier.is-done .pf-tier-rw { border-color: rgba(255, 138, 61, 0.4); }
.pf-tier-rw.is-empty { visibility: hidden; }

/* Damgalar */
.pf-stamps-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1.1rem 0.8rem; margin-top: 0.4rem; }
.pf-stamp { --c: #ff8a3d; --rot: -6deg; position: relative; aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.25rem; padding: 0.4rem; text-align: center; border-radius: 50%; border: 2px solid var(--c); color: var(--c); background: radial-gradient(circle, color-mix(in srgb, var(--c) 12%, transparent), transparent 70%); transform: rotate(var(--rot)); cursor: help; transition: transform 0.3s var(--ease); }
.pf-stamp::before { content: ''; position: absolute; inset: 5px; border-radius: inherit; border: 1px dashed color-mix(in srgb, var(--c) 70%, transparent); }
.pf-stamp:nth-child(2n) { --rot: 5deg; }
.pf-stamp:nth-child(3n) { --rot: -10deg; }
.pf-stamp:nth-child(5n) { --rot: 8deg; }
.pf-stamp:hover { transform: rotate(0) scale(1.07); }
.pf-stamp svg { width: 34%; height: 34%; }
.pf-stamp span { max-width: 78%; font-size: 0.5rem; font-weight: 800; line-height: 1.15; letter-spacing: 0.06em; text-transform: uppercase; }
.pf-stamp--sq { border-radius: 12px; }
.pf-stamp--sq::before { border-radius: 8px; }
.pf-c-teal { --c: #5eead4; }
.pf-c-pink { --c: #f472b6; }
.pf-c-sky { --c: #38bdf8; }
.pf-stamp.is-locked { --c: #3a4560; color: #5c6884; opacity: 0.65; }
.pf-stamps-foot { margin: 1rem 0 0; font-size: 0.8rem; color: var(--faint); }
.pf-stamps-foot b { color: #fff; }

/* Kenar: klan, arkadaşlar, kuşanılanlar */
.pf-clan-top { display: flex; align-items: center; gap: 0.9rem; }
.pf-clan-top svg { width: 44px; height: 58px; flex-shrink: 0; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.5)); }
.pf-clan-top b { display: block; font-family: var(--font-brand); font-size: 1.05rem; color: #fff; }
.pf-clan-top small { font-size: 0.78rem; color: var(--muted); }
.pf-clan-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; margin-top: 1rem; }
.pf-clan-stats div { padding: 0.55rem 0.4rem; text-align: center; border-radius: 10px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--line); }
.pf-clan-stats b { display: block; font-family: var(--font-mono); font-size: 1rem; color: #fff; }
.pf-clan-stats span { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.1em; color: var(--faint); }
.pf-friends { margin: 0; padding: 0; list-style: none; }
.pf-friend { display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 0; }
.pf-friend + .pf-friend { border-top: 1px solid var(--line); }
.pf-f-av { position: relative; flex-shrink: 0; }
.pf-f-av .mc-head { width: 34px; height: 34px; border-radius: 8px; }
.pf-f-av i { position: absolute; right: -3px; bottom: -3px; width: 11px; height: 11px; border-radius: 50%; background: #34d399; box-shadow: 0 0 0 2px #0a1222; }
.pf-friend.is-away .pf-f-av i { background: #fbbf24; }
.pf-friend.is-off .pf-f-av i { background: #4b5563; }
.pf-friend b { font-size: 0.88rem; color: #fff; }
.pf-friend small { display: block; font-size: 0.74rem; color: var(--faint); }
.pf-friend .badge { margin-left: auto; }
.pf-equip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
.pf-eq { display: flex; align-items: center; gap: 0.6rem; min-width: 0; padding: 0.6rem; border-radius: 12px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--line); }
.pf-eq svg { flex-shrink: 0; width: 34px; height: 34px; padding: 4px; border-radius: 8px; background: color-mix(in srgb, var(--r) 14%, #0a1222); border: 1px solid color-mix(in srgb, var(--r) 40%, transparent); }
.pf-eq span { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.pf-eq b { overflow: hidden; font-size: 0.8rem; text-overflow: ellipsis; white-space: nowrap; color: #fff; }
.pf-eq small { font-size: 0.6rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--r); }

/* ---------- Maçlar ---------- */
.pf-match-sum { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.9rem; margin-bottom: 1.1rem; }
.pf-winrate { display: flex; height: 8px; overflow: hidden; margin-top: 0.7rem; border-radius: 3px; background: rgba(248, 113, 113, 0.5); }
.pf-winrate span { background: repeating-linear-gradient(90deg, #34d399 0 8px, #6ee7b7 8px 10px); }
.pf-matches { display: grid; gap: 0.55rem; margin: 0; padding: 0; list-style: none; }
.pf-match { --m: #34d399; display: grid; grid-template-columns: 120px minmax(0, 1.3fr) minmax(0, 1fr) 110px 100px; align-items: center; gap: 1rem; padding: 0.85rem 1.1rem; border-radius: 14px; background: var(--glass-strong); border: 1px solid var(--line); border-left: 4px solid var(--m); }
.pf-m-win { --m: #34d399; }
.pf-m-loss { --m: #f87171; }
.pf-m-top { --m: #5eead4; }
.pf-m-res { font-size: 0.78rem; font-weight: 800; letter-spacing: 0.08em; color: var(--m); }
.pf-m-res small, .pf-m-mode small, .pf-m-kd small { display: block; font-size: 0.74rem; font-weight: 500; letter-spacing: 0; color: var(--faint); }
.pf-m-mode b { font-size: 0.92rem; color: #fff; }
.pf-m-kd { font-family: var(--font-mono); color: #fff; }
.pf-m-kd small { font-family: 'Inter', sans-serif; }
.pf-m-time { font-size: 0.8rem; text-align: right; color: var(--muted); }

/* ---------- Koleksiyon ---------- */
.pf-coll-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; margin-bottom: 1rem; }
.pf-coll-prog { flex: 1; min-width: 240px; max-width: 420px; }
.pf-coll-prog small { display: flex; justify-content: space-between; margin-bottom: 0.45rem; font-size: 0.8rem; color: var(--muted); }
.pf-coll-prog b { color: #fff; }
.pf-coll-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.8rem; }
.pf-item { --r: #9ca3af; position: relative; padding: 1rem 0.6rem 0.85rem; text-align: center; border-radius: 14px; background: radial-gradient(ellipse at 50% 30%, color-mix(in srgb, var(--r) 18%, transparent), transparent 70%), #0a1222; border: 1px solid color-mix(in srgb, var(--r) 35%, transparent); transition: transform 0.25s var(--ease); }
.pf-item:hover { transform: translateY(-3px); }
.pf-item svg { width: 56px; height: 56px; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.5)); }
.pf-item b { display: block; margin-top: 0.5rem; font-size: 0.8rem; color: #fff; }
.pf-item small { font-size: 0.58rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--r); }
.pf-item.is-locked { filter: grayscale(1); opacity: 0.45; }
.pf-item.is-locked::after { content: 'KİLİTLİ'; position: absolute; top: 8px; right: 8px; padding: 0.1rem 0.35rem; border-radius: 4px; font-size: 0.5rem; font-weight: 800; letter-spacing: 0.1em; color: #fff; background: rgba(0, 0, 0, 0.6); }

/* ---------- Duyarlı ---------- */
@media (max-width: 1000px) {
    .pf-id { grid-template-columns: 200px minmax(0, 1fr); margin-top: -180px; }
    .pf-passport { grid-column: 1 / -1; width: 100%; max-width: 440px; transform: none; }
    .pf-grid { grid-template-columns: 1fr; }
    .pf-side { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pf-stamps-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .pf-coll-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .pf-match { grid-template-columns: 110px minmax(0, 1fr) 100px 90px; }
    .pf-m-map { display: none; }
}
@media (max-width: 640px) {
    .pf-cover { height: 250px; }
    .pf-id { grid-template-columns: 1fr; gap: 1rem; margin-top: -150px; text-align: center; }
    .pf-skin { height: 260px; }
    .pf-skin-img { height: 200px; }
    .pf-id-main .breadcrumb, .pf-name-row, .pf-meta, .pf-actions { justify-content: center; }
    .pf-level { margin-inline: auto; text-align: left; }
    .pf-passport { margin: 0 auto; text-align: left; }
    .pf-tabs { justify-content: center; }
    .pf-tabs small { display: none; }
    .pf-stats, .pf-match-sum { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pf-stamps-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .pf-side { grid-template-columns: 1fr; }
    .pf-coll-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .pf-match { grid-template-columns: minmax(0, 1fr) auto; row-gap: 0.35rem; }
    .pf-m-kd { text-align: right; }
    .pf-m-time { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .pf-skin-img { animation: none; transition: none; }
    .pf-stamp, .pf-item { transition: none; }
}

/* ---- Gerçek profil (profil.js → GET /api/v1/oyuncular/{ad}) ---- */
/* Veri gelene kadar örnek içerik bir an bile görünmesin */
.is-real [data-pf]:not(.is-yuklendi) { visibility: hidden; }
.pf-yok { padding-top: 9rem; padding-bottom: 4rem; }
.pf-yok .empty { max-width: 560px; margin: 0 auto; border-radius: 18px; background: rgba(11, 20, 38, 0.88); border: 1px solid var(--line); }
.pf-friend a { color: inherit; text-decoration: none; }
.pf-friend a:hover b { color: #ffb07a; }
.pf-friend--bos, .pf-bos { margin: 0; font-size: 0.86rem; line-height: 1.5; color: var(--muted); }
.pf-bos a, .pf-friend--bos a { color: #ff8a3d; font-weight: 600; }
.pf-eq svg { color: var(--r); }
.pf-coll-gercek { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.pf-coll-gercek .pf-coll-prog { min-width: min(100%, 320px); }
.pf-coll-gercek .pf-bos { flex: 1 1 260px; }
.pf-item svg.pf-ico { color: var(--r); }

/* ===== rehber.css ===== */
/* =========================================================
   Yeni oyuncu rehberi (gd-)
   ========================================================= */
.gd-page { padding-bottom: 3rem; }
.gd-wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
.gd-prog { display: inline-flex; align-items: center; gap: 0.8rem; margin-top: 1.4rem; padding: 0.55rem 1rem; border-radius: 12px; font-size: 0.84rem; color: var(--muted); background: rgba(8, 14, 27, 0.9); border: 1px solid var(--line); }
.gd-prog b { font-family: var(--font-mono); color: #fff; }
.gd-prog-bar { width: 160px; height: 8px; background: rgba(255, 255, 255, 0.08); clip-path: var(--px-sm); }
.gd-prog-bar span { display: block; width: 0; height: 100%; background: repeating-linear-gradient(90deg, #5eead4 0 6px, #2dd4bf 6px 8px); transition: width 0.5s var(--ease); }
code { padding: 0.1rem 0.35rem; border-radius: 5px; font-family: var(--font-mono); font-size: 0.86em; color: #ffd3b0; background: rgba(255, 138, 61, 0.1); }

/* Adımlar */
.gd-steps { position: relative; display: grid; gap: 0.8rem; max-width: 900px; width: 100%; margin: 0 auto; padding: 0; list-style: none; }
.gd-steps::before { content: ''; position: absolute; left: 27px; top: 30px; bottom: 30px; width: 2px; background: repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0 6px, transparent 6px 10px); }
.gd-step { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: 1.1rem; padding: 1.1rem 1.2rem 1.1rem 0; }
.gd-step-body { padding: 1.1rem 1.3rem; border-radius: 16px; background: var(--glass-strong); border: 1px solid var(--line); transition: border-color 0.3s, opacity 0.3s; }
.gd-step h2 { margin: 0 0 0.3rem; font-size: 1.05rem; color: #fff; }
.gd-step p { margin: 0 0 0.5rem; font-size: 0.88rem; line-height: 1.55; color: var(--muted); }
.gd-step p b { color: #ffd3b0; }
.gd-link { margin-right: 0.8rem; font-size: 0.84rem; font-weight: 600; color: #ffb07a; text-decoration: none; }
.gd-link:hover { color: #ffd3b0; }
.gd-n { position: relative; z-index: 1; width: 56px; height: 56px; display: grid; place-items: center; font-family: var(--font-mono); font-size: 1.2rem; font-weight: 700; color: #2a1204; background: linear-gradient(180deg, #ffb87e, #ff8a3d); clip-path: var(--px-sm); transition: background 0.3s; }
.gd-check { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.8rem; border-radius: 10px; font-size: 0.82rem; font-weight: 600; color: var(--muted); background: rgba(255, 255, 255, 0.03); border: 1px solid var(--line); cursor: pointer; }
.gd-check input { width: 18px; height: 18px; margin: 0; display: grid; place-items: center; appearance: none; border-radius: 5px; border: 1px solid rgba(255, 255, 255, 0.25); background: rgba(5, 10, 20, 0.8); cursor: pointer; }
.gd-check input:checked { background: #34d399; border-color: #34d399; }
.gd-check input:checked::after { content: '✓'; font-size: 0.75rem; font-weight: 800; color: #042f2e; }
.gd-step.is-done .gd-n { color: #042f2e; background: linear-gradient(180deg, #6ee7b7, #34d399); }
.gd-step.is-done .gd-step-body { border-color: rgba(52, 211, 153, 0.35); opacity: 0.75; }
.gd-step.is-done .gd-check { color: #6ee7b7; border-color: rgba(52, 211, 153, 0.4); }
.gd-done-msg { max-width: 900px; width: 100%; margin: 0 auto; padding: 1rem 1.3rem; border-radius: 14px; text-align: center; color: #d1fae5; background: rgba(52, 211, 153, 0.08); border: 1px solid rgba(52, 211, 153, 0.4); }

/* Harita */
.gd-map-sec { scroll-margin-top: 110px; }
.gd-map-head { margin-bottom: 1rem; }
.gd-map-head p { margin: 0.3rem 0 0; font-size: 0.88rem; color: var(--muted); }
.gd-h2 { margin: 0.5rem 0 0; font-family: var(--font-brand); font-size: clamp(1.6rem, 3vw, 2.2rem); color: #fff; }
.gd-map-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 1.25rem; align-items: stretch; }
.gd-map { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 20px; background: linear-gradient(rgba(0, 0, 0, 0.12) 1px, transparent 1px) 0 0 / 20px 20px, linear-gradient(90deg, rgba(0, 0, 0, 0.12) 1px, transparent 1px) 0 0 / 20px 20px, radial-gradient(ellipse at 50% 50%, #1f4d2c, #10281a 75%); border: 1px solid var(--line-strong); box-shadow: inset 0 0 80px rgba(0, 0, 0, 0.6); }
.gd-path { position: absolute; background: repeating-linear-gradient(90deg, #a98b62 0 10px, #8c7250 10px 20px); opacity: 0.7; }
.gd-path--h { left: 4%; right: 4%; top: 46%; height: 18px; }
.gd-path--v { top: 4%; bottom: 4%; left: calc(50% - 9px); width: 18px; background: repeating-linear-gradient(180deg, #a98b62 0 10px, #8c7250 10px 20px); }
.gd-zone { --c: #ff8a3d; position: absolute; left: var(--x); top: var(--y); width: var(--w); height: var(--h); display: grid; place-items: center; padding: 0.4rem; border: 0; font: inherit; font-size: 0.82rem; font-weight: 700; color: #fff; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8); cursor: pointer; background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--c) 42%, #0a1222) 0 8px, color-mix(in srgb, var(--c) 34%, #0a1222) 8px 16px); box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--c) 80%, transparent), 0 10px 20px rgba(0, 0, 0, 0.4); clip-path: var(--px-lg); transition: transform 0.2s var(--ease), filter 0.2s; }
.gd-zone:hover { transform: translateY(-3px); filter: brightness(1.15); }
.gd-zone.is-active { box-shadow: inset 0 0 0 3px #fff, 0 0 30px color-mix(in srgb, var(--c) 70%, transparent); filter: brightness(1.2); }
.gd-you { position: absolute; left: var(--x); top: var(--y); padding: 0.15rem 0.4rem; transform: translate(-50%, -50%); font-family: var(--font-mono); font-size: 0.62rem; font-weight: 700; color: #042f2e; background: #5eead4; animation: gd-ping 1.8s ease-out infinite; pointer-events: none; }
@keyframes gd-ping { 0% { box-shadow: 0 0 0 0 rgba(94, 234, 212, 0.6); } 100% { box-shadow: 0 0 0 14px rgba(94, 234, 212, 0); } }
.gd-info { position: relative; display: flex; flex-direction: column; }
.gd-info-dot { width: 40px; height: 40px; margin-bottom: 0.9rem; background: var(--c, #ff8a3d); clip-path: var(--px-sm); transition: background 0.3s; }
.gd-info h3 { margin: 0 0 0.5rem; font-family: var(--font-brand); font-size: 1.35rem; color: #fff; }
.gd-info p { margin: 0 0 1rem; font-size: 0.9rem; line-height: 1.6; color: var(--muted); }
.gd-info-cmd { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--line); font-size: 0.8rem; color: var(--faint); }
.gd-info-cmd code { font-size: 0.92rem; }
.gd-copy { margin-left: auto; height: 30px; padding: 0 0.7rem; border: 1px solid var(--line); border-radius: 8px; background: rgba(255, 255, 255, 0.04); color: var(--muted); font: inherit; font-size: 0.76rem; font-weight: 600; cursor: pointer; }
.gd-copy:hover { color: #fff; border-color: var(--line-strong); }

/* Alt */
.gd-lower { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.gd-cmds td:first-child { width: 42%; white-space: nowrap; }
.gd-cmds td { font-size: 0.86rem; color: var(--muted); }
.gd-tips { display: grid; gap: 0.8rem; }
.gd-tip { display: flex; gap: 0.9rem; padding: 1.1rem; border-radius: 16px; background: var(--glass-strong); border: 1px solid var(--line); }
.gd-tip .feat-ico { flex-shrink: 0; }
.gd-tip b { display: block; margin-bottom: 0.25rem; color: #fff; }
.gd-tip p { margin: 0 0 0.3rem; font-size: 0.84rem; line-height: 1.5; color: var(--muted); }

@media (max-width: 1000px) {
    .gd-map-grid, .gd-lower { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
    .gd-steps::before { left: 21px; }
    .gd-step { grid-template-columns: 44px minmax(0, 1fr); gap: 0.8rem; padding-right: 0; }
    .gd-n { width: 44px; height: 44px; font-size: 1rem; }
    .gd-check { grid-column: 2; justify-self: start; }
    .gd-map { aspect-ratio: 4 / 5; }
    .gd-zone { font-size: 0.66rem; }
    .gd-cmds td:first-child { white-space: normal; }
}
@media (prefers-reduced-motion: reduce) { .gd-you { animation: none; } }

/* ===== rutbeler.css ===== */
/* =========================================================
   Rütbeler (rutbeler.html) — önek: rk-
   ========================================================= */
.rk-page { overflow-x: clip; }

/* Madalyonlar: img/cover-vip.jpg içinden kırpılır */
.rk-medal-img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: url(img/cover-vip.jpg) no-repeat;
    background-size: 603.4% auto;
}
.rk-medal-img--vip { background-position: 20.7% 51.1%; filter: hue-rotate(140deg) saturate(0.85) brightness(1.05); }
.rk-medal-img--svip { background-size: 514.7% auto; background-position: 49.8% 50.2%; filter: hue-rotate(-22deg) saturate(1.15); }
.rk-medal-img--svipp { background-position: 78.9% 51.1%; filter: hue-rotate(-20deg) saturate(1.3) brightness(1.08); }

/* Piksel onay işareti (maske) */
.rk-perks i::after, .rk-yes::after {
    content: '';
    position: absolute;
    inset: 0;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 6' shape-rendering='crispEdges'%3E%3Cpath d='M7 0h2v1H7zM6 1h2v1H6zM5 2h2v1H5zM0 3h2v1H0zM4 3h2v1H4zM1 4h4v1H1zM2 5h2v1H2z'/%3E%3C/svg%3E") center / 9px 6px no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 6' shape-rendering='crispEdges'%3E%3Cpath d='M7 0h2v1H7zM6 1h2v1H6zM5 2h2v1H5zM0 3h2v1H0zM4 3h2v1H4zM1 4h4v1H1zM2 5h2v1H2z'/%3E%3C/svg%3E") center / 9px 6px no-repeat;
}

/* ---------- Hero + plan anahtarı ---------- */
.rk-hero { padding-bottom: 2.4rem; }
.rk-plan { flex-direction: column; align-items: center; gap: 0.8rem; }
.rk-plan-tabs { padding: 0.35rem; border-color: rgba(255, 138, 61, 0.3); }
.rk-plan-tabs .tab { height: 44px; min-width: 120px; padding: 0 1.4rem; font-family: var(--font-brand); font-size: 0.86rem; letter-spacing: 0.14em; text-transform: uppercase; transition: color 0.25s var(--ease), background 0.25s var(--ease), box-shadow 0.25s var(--ease); }
.rk-plan-note { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.84rem; color: var(--muted); text-shadow: 0 1px 2px rgba(5, 10, 20, 0.9), 0 0 18px rgba(5, 10, 20, 0.85); }
.rk-plan-note svg { width: 12px; height: 8px; color: #5eead4; }
.rk-page[data-plan="kalici"] .rk-plan-note { color: #ffd3b0; }

/* ---------- Rütbe kartları ---------- */
.rk-cards-wrap { max-width: 1180px; margin: 0 auto; padding: 1.5rem 1.5rem 1rem; }
.rk-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; gap: 1.25rem; }
.rk-card {
    --c: #ff8a3d;
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 2rem 1.6rem 1.6rem;
    border-radius: 22px;
    background:
        radial-gradient(ellipse 90% 38% at 50% 0%, color-mix(in srgb, var(--c) 18%, transparent), transparent 70%),
        rgba(8, 14, 27, 0.95);
    border: 1px solid color-mix(in srgb, var(--c) 28%, transparent);
    transition: translate 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.4s var(--ease);
}
/* Not: .reveal animasyonu transform'u sabitlediği için kaldırma efektleri translate ile yapılır */
.rk-card:hover { translate: 0 -4px; box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45), 0 0 50px color-mix(in srgb, var(--c) 14%, transparent); }
.rk-card--vip { --c: #5eead4; }
.rk-card--svipp {
    --c: #ffb07a;
    border: 1px solid rgba(255, 138, 61, 0.65);
    background:
        radial-gradient(ellipse 90% 42% at 50% 0%, rgba(255, 138, 61, 0.3), transparent 70%),
        radial-gradient(ellipse 70% 30% at 50% 100%, rgba(255, 138, 61, 0.12), transparent 70%),
        rgba(10, 15, 28, 0.96);
    box-shadow: 0 0 0 4px rgba(255, 138, 61, 0.08), 0 36px 90px rgba(0, 0, 0, 0.55), 0 0 90px rgba(255, 138, 61, 0.22);
}
.rk-card--svipp::before { content: ''; position: absolute; top: -1px; left: 15%; right: 15%; height: 2px; background: linear-gradient(90deg, transparent, #ffd3b0, transparent); }
@media (min-width: 1001px) {
    .rk-card--svipp { translate: 0 -14px; }
    .rk-card--svipp:hover { translate: 0 -18px; }
}
.rk-popular {
    position: absolute;
    z-index: 3;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    height: 30px;
    padding: 0 0.95rem;
    white-space: nowrap;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #2a1204;
    background: linear-gradient(180deg, #ffd3b0, #ff9a52 55%, #f47a2e);
    clip-path: var(--px-sm);
}
.rk-popular svg { width: 14px; height: 14px; }
.rk-sparks { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; pointer-events: none; }
.rk-sparks i { position: absolute; bottom: 40%; width: 4px; height: 4px; background: #ffd3b0; box-shadow: 0 0 8px #ff8a3d; opacity: 0; animation: rk-rise 4.5s ease-in infinite; }
.rk-sparks i:nth-child(1) { left: 12%; }
.rk-sparks i:nth-child(2) { left: 26%; animation-delay: -1.5s; width: 3px; height: 3px; }
.rk-sparks i:nth-child(3) { left: 44%; animation-delay: -3s; }
.rk-sparks i:nth-child(4) { left: 62%; animation-delay: -0.7s; width: 3px; height: 3px; }
.rk-sparks i:nth-child(5) { left: 78%; animation-delay: -2.2s; }
.rk-sparks i:nth-child(6) { left: 90%; animation-delay: -3.7s; width: 3px; height: 3px; }
@keyframes rk-rise { 0% { opacity: 0; transform: translateY(0); } 20% { opacity: 0.9; } 100% { opacity: 0; transform: translateY(-300px); } }

.rk-card-head { position: relative; z-index: 1; text-align: center; }
.rk-medal {
    position: relative;
    display: block;
    width: 128px;
    height: 128px;
    margin: 0 auto;
    border-radius: 50%;
    box-shadow: 0 0 0 6px rgba(5, 10, 20, 0.75), 0 0 0 7px color-mix(in srgb, var(--c) 45%, transparent), 0 20px 40px rgba(0, 0, 0, 0.5), 0 0 60px color-mix(in srgb, var(--c) 30%, transparent);
    transition: transform 0.5s var(--ease);
}
.rk-card:hover .rk-medal { transform: rotate(-6deg) scale(1.03); }
.rk-card--svipp .rk-medal { width: 146px; height: 146px; box-shadow: 0 0 0 6px rgba(5, 10, 20, 0.75), 0 0 0 7px rgba(255, 176, 122, 0.7), 0 20px 40px rgba(0, 0, 0, 0.5), 0 0 90px rgba(255, 138, 61, 0.55); }
.rk-medal-ring { position: absolute; inset: -18px; border-radius: 50%; border: 1px dashed rgba(255, 176, 122, 0.45); animation: orbit 30s linear infinite; }
.rk-medal-ring::after { content: ''; position: absolute; top: 50%; left: -3px; width: 6px; height: 6px; background: #5eead4; box-shadow: 0 0 10px #5eead4; }
.rk-prefix { display: inline-block; margin-top: 1.3rem; padding: 0.2rem 0.5rem; border-radius: 4px; font-family: var(--font-mono); font-size: 0.8rem; font-weight: 600; color: var(--c); background: rgba(0, 0, 0, 0.4); text-shadow: 0 0 10px color-mix(in srgb, var(--c) 50%, transparent); }
.rk-prefix--svipp { color: #ffb07a; text-shadow: 0 0 10px rgba(255, 138, 61, 0.9); }
.rk-name { margin: 0.45rem 0 0; font-family: var(--font-brand); font-size: 2.1rem; font-weight: 700; line-height: 1.05; letter-spacing: 0.04em; color: #fff; }
.rk-card--svipp .rk-name { background: linear-gradient(180deg, #fff, #ffd3b0 50%, #ff8a3d); -webkit-background-clip: text; background-clip: text; color: transparent; }
.rk-tagline { margin: 0.4rem 0 0; font-size: 0.9rem; color: var(--muted); }

.rk-price { margin-top: 1.3rem; padding: 1.1rem 0 1rem; text-align: center; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.rk-price-row { display: flex; align-items: baseline; justify-content: center; gap: 0.45rem; }
.rk-amount { display: inline-block; font-family: var(--font-mono); font-size: 2.5rem; font-weight: 600; line-height: 1; color: #fff; transition: color 0.3s var(--ease), text-shadow 0.3s var(--ease), transform 0.3s var(--ease); }
.rk-unit { font-size: 0.95rem; font-weight: 600; color: var(--c); }
.rk-price small { display: block; margin-top: 0.45rem; font-size: 0.8rem; color: var(--faint); }
[data-rk-price].is-swap { color: #ffd3b0; text-shadow: 0 0 18px rgba(255, 138, 61, 0.7); }
.rk-amount.is-swap { transform: scale(1.06); }

.rk-inherit { margin: 1.2rem 0 0; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--c); }
.rk-perks { display: grid; gap: 0.62rem; margin: 1rem 0 1.6rem; padding: 0; list-style: none; }
.rk-inherit + .rk-perks { margin-top: 0.7rem; }
.rk-perks li { display: flex; align-items: flex-start; gap: 0.65rem; font-size: 0.9rem; line-height: 1.45; color: #dfe4ef; }
.rk-perks li b { color: var(--c); font-weight: 700; }
.rk-perks i { position: relative; flex-shrink: 0; width: 18px; height: 18px; margin-top: 0.05rem; color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent); border: 1px solid color-mix(in srgb, var(--c) 35%, transparent); border-radius: 4px; }
.rk-perks code, .rk-table code { padding: 0.05rem 0.35rem; border-radius: 4px; font-family: var(--font-mono); font-size: 0.82em; color: #ffd3b0; background: rgba(255, 255, 255, 0.07); }
.rk-cta { width: 100%; margin-top: auto; }
.btn-ghost-px.rk-cta, .btn-gold.rk-cta { height: 50px; }
.rk-card--vip .btn-ghost-px { color: #99f6e4; background: rgba(94, 234, 212, 0.5); }
.rk-cards-note { max-width: 640px; margin: 2rem auto 0; text-align: center; font-size: 0.82rem; line-height: 1.6; color: var(--faint); text-shadow: 0 1px 2px rgba(5, 10, 20, 0.9); }

/* ---------- Karşılaştırma tablosu ---------- */
.rk-compare { max-width: 1000px; margin: 0 auto; overflow: clip; border-radius: 20px; background: rgba(8, 14, 27, 0.96); border: 1px solid var(--line); }
.rk-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 0.9rem; }
.rk-table thead th {
    position: sticky;
    top: 72px;
    z-index: 2;
    padding: 1rem 0.8rem;
    text-align: center;
    background: #0b1427;
    border-bottom: 1px solid var(--line-strong);
    box-shadow: 0 10px 20px -12px rgba(0, 0, 0, 0.6);
}
.rk-table thead th.rk-th-feat { width: 34%; padding-left: 1.4rem; text-align: left; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--faint); }
.rk-table thead th.rk-hl { background: linear-gradient(rgba(255, 138, 61, 0.12), rgba(255, 138, 61, 0.12)), #0b1427; }
.rk-col { display: flex; flex-direction: column; align-items: center; gap: 0.2rem; }
.rk-col b { font-family: var(--font-brand); font-size: 1.1rem; font-weight: 700; letter-spacing: 0.04em; }
.rk-col small { font-family: var(--font-mono); font-size: 0.74rem; color: var(--faint); }
.rk-col--vip b { color: #5eead4; }
.rk-col--svip b { color: #ff8a3d; }
.rk-col--svipp b { color: #ffd3b0; text-shadow: 0 0 14px rgba(255, 138, 61, 0.7); }
.rk-table tbody th, .rk-table tbody td { padding: 0.85rem 0.8rem; border-bottom: 1px solid var(--line); }
.rk-table tbody th { padding-left: 1.4rem; text-align: left; font-weight: 500; color: var(--muted); }
.rk-table tbody td { text-align: center; color: #fff; }
.rk-table tbody td b { color: #ffd3b0; font-weight: 700; }
.rk-table tbody tr:not(.rk-group):hover th, .rk-table tbody tr:not(.rk-group):hover td { background-color: rgba(255, 255, 255, 0.025); }
.rk-table tbody tr:last-child th, .rk-table tbody tr:last-child td { border-bottom: 0; }
.rk-table td.rk-hl { background: rgba(255, 138, 61, 0.06); }
.rk-group th { padding: 1.4rem 1.4rem 0.6rem !important; font-size: 0.7rem; font-weight: 700 !important; letter-spacing: 0.18em; text-transform: uppercase; color: #ffb07a !important; background: linear-gradient(90deg, rgba(255, 138, 61, 0.08), transparent 60%); }
.rk-group-ico { display: inline-grid; place-items: center; width: 24px; height: 24px; margin-right: 0.6rem; vertical-align: middle; border-radius: 6px; background: rgba(255, 138, 61, 0.14); border: 1px solid rgba(255, 138, 61, 0.3); }
.rk-group-ico svg { width: 13px; height: 13px; }
.rk-yes { position: relative; display: inline-block; width: 24px; height: 24px; vertical-align: middle; border-radius: 6px; color: #6ee7b7; background: rgba(16, 185, 129, 0.14); border: 1px solid rgba(52, 211, 153, 0.3); }
.rk-hl .rk-yes { color: #ffd3b0; background: rgba(255, 138, 61, 0.18); border-color: rgba(255, 138, 61, 0.45); }
.rk-no { color: #4a5670; font-weight: 700; }
.rk-v { display: inline-block; padding: 0.18rem 0.45rem; border-radius: 4px; font-family: var(--font-mono); font-size: 0.8rem; font-weight: 600; background: rgba(0, 0, 0, 0.45); }
.rk-v--vip { color: #5eead4; }
.rk-v--svip { color: #ff8a3d; }
.rk-v--svipp { color: #ffb07a; text-shadow: 0 0 10px rgba(255, 138, 61, 0.9); }

/* ---------- Oyunda gör ---------- */
.rk-pv-tabs .tab { min-width: 76px; font-family: var(--font-brand); letter-spacing: 0.08em; }
.rk-game {
    --c: #ffb07a;
    position: relative;
    aspect-ratio: 16 / 8.2;
    overflow: hidden;
    border-radius: 22px;
    border: 1px solid var(--line-strong);
    background: #0a1222;
    box-shadow: 0 40px 110px rgba(0, 0, 0, 0.6), 0 0 80px rgba(255, 138, 61, 0.12);
}
.rk-game[data-rank="vip"] { --c: #5eead4; }
.rk-game[data-rank="svip"] { --c: #ff8a3d; }
.rk-game-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; filter: saturate(0.9) brightness(0.72); }
.rk-game::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(5, 10, 20, 0.7), transparent 55%),
        linear-gradient(0deg, rgba(5, 10, 20, 0.75), transparent 45%);
    pointer-events: none;
}
.rk-game > :not(.rk-game-bg) { z-index: 1; }
.rk-cross { position: absolute; left: 50%; top: 45%; width: 18px; height: 18px; margin: -9px 0 0 -9px; opacity: 0.75; }
.rk-cross::before, .rk-cross::after { content: ''; position: absolute; background: #fff; }
.rk-cross::before { left: 8px; top: 0; width: 2px; height: 18px; }
.rk-cross::after { top: 8px; left: 0; width: 18px; height: 2px; }

.rk-player { position: absolute; right: 13%; bottom: 17%; display: flex; flex-direction: column; align-items: center; animation: rk-bob 4s ease-in-out infinite; }
@keyframes rk-bob { 50% { transform: translateY(-6px); } }
.rk-nametag { position: relative; z-index: 2; margin-bottom: 0.9rem; padding: 0.3rem 0.7rem; white-space: nowrap; font-family: var(--font-mono); font-size: 1.05rem; font-weight: 600; color: #fff; background: rgba(0, 0, 0, 0.5); text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.55); }
.rk-nt-prefix { color: var(--c); transition: color 0.3s var(--ease); }
.rk-game[data-rank="svipp"] .rk-nt-prefix { text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.55), 0 0 12px rgba(255, 138, 61, 0.9); }
.rk-body { position: relative; z-index: 1; height: 300px; filter: drop-shadow(0 18px 20px rgba(0, 0, 0, 0.55)); transition: filter 0.4s var(--ease); }
.rk-game[data-rank="svipp"] .rk-body { filter: drop-shadow(0 18px 20px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 22px rgba(255, 138, 61, 0.55)); }
.rk-game[data-rank="vip"] .rk-body { filter: drop-shadow(0 18px 20px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 14px rgba(94, 234, 212, 0.3)); }
.rk-shadow { width: 120px; height: 16px; margin-top: -8px; border-radius: 50%; background: radial-gradient(ellipse, rgba(0, 0, 0, 0.6), transparent 70%); }
.rk-aura { position: absolute; inset: 40px -30px 10px; pointer-events: none; }
.rk-aura i { position: absolute; bottom: 10%; width: 6px; height: 6px; background: var(--c); box-shadow: 0 0 10px var(--c); opacity: 0; animation: rk-aura 3.2s ease-out infinite; }
.rk-aura i:nth-child(1) { left: 6%; }
.rk-aura i:nth-child(2) { left: 88%; animation-delay: -0.4s; }
.rk-aura i:nth-child(3) { left: 20%; animation-delay: -0.8s; width: 4px; height: 4px; }
.rk-aura i:nth-child(4) { left: 74%; animation-delay: -1.2s; width: 4px; height: 4px; }
.rk-aura i:nth-child(5) { left: 12%; animation-delay: -1.6s; }
.rk-aura i:nth-child(6) { left: 94%; animation-delay: -2s; width: 4px; height: 4px; }
.rk-aura i:nth-child(7) { left: 30%; animation-delay: -2.4s; width: 4px; height: 4px; }
.rk-aura i:nth-child(8) { left: 66%; animation-delay: -2.8s; }
@keyframes rk-aura { 0% { opacity: 0; transform: translateY(0); } 25% { opacity: 1; } 100% { opacity: 0; transform: translateY(-220px); } }
.rk-game[data-rank="vip"] .rk-aura { display: none; }
.rk-game[data-rank="svip"] .rk-aura i:nth-child(n + 5) { display: none; }

.rk-chat { position: absolute; left: 2.2%; bottom: 17%; width: min(560px, 50%); font-family: var(--font-mono); font-size: 0.9rem; line-height: 1.45; }
.rk-chat-lines { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.rk-chat-lines li { padding: 0.28rem 0.65rem; color: #f1f5f9; background: rgba(0, 0, 0, 0.5); text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.55); }
.rk-chat-lines li.is-new { animation: rk-line 0.45s var(--ease); }
@keyframes rk-line { from { opacity: 0; transform: translateX(-12px); } }
.rk-c-name { color: #fff; font-weight: 600; }
.rk-c-sep { color: #94a3b8; }
.rk-c-color { color: #ffd3b0; }
.rk-c-sys { color: #ffb07a !important; font-weight: 600; }
.rk-p { font-weight: 700; }
.rk-p--vip { color: #5eead4; }
.rk-p--svip { color: #ff8a3d; }
.rk-p--svipp { color: #ffb07a; text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.55), 0 0 10px rgba(255, 138, 61, 0.95); }
.rk-chat-input { margin-top: 0.45rem; padding: 0.42rem 0.65rem; color: #f1f5f9; background: rgba(0, 0, 0, 0.66); border: 1px solid rgba(255, 255, 255, 0.14); text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.55); white-space: nowrap; overflow: hidden; }
.rk-caret { display: inline-block; width: 9px; height: 2px; margin-left: 2px; vertical-align: -2px; background: #fff; animation: rk-caret 1s steps(1) infinite; }
@keyframes rk-caret { 50% { opacity: 0; } }

.rk-hud { position: absolute; left: 50%; bottom: 3.5%; display: flex; flex-direction: column; align-items: center; transform: translateX(-50%); }
.rk-xp { position: relative; width: 364px; height: 7px; margin-bottom: 6px; background: rgba(0, 0, 0, 0.6); border: 1px solid rgba(0, 0, 0, 0.8); }
.rk-xp span { position: absolute; inset: 0 32% 0 0; background: repeating-linear-gradient(90deg, #5eead4 0 18px, #2dd4bf 18px 20px); box-shadow: 0 0 8px rgba(94, 234, 212, 0.6); }
.rk-xp b { position: absolute; left: 50%; bottom: 7px; transform: translateX(-50%); font-family: var(--font-mono); font-size: 0.9rem; color: #5eead4; text-shadow: 2px 2px 0 #042f2e; }
.rk-hotbar { display: flex; padding: 2px; background: rgba(0, 0, 0, 0.55); border: 2px solid rgba(255, 255, 255, 0.16); }
.rk-hotbar i { width: 40px; height: 40px; display: grid; place-items: center; border: 2px solid rgba(255, 255, 255, 0.06); }
.rk-hotbar i.is-sel { border-color: var(--c); box-shadow: 0 0 12px color-mix(in srgb, var(--c) 60%, transparent), inset 0 0 8px color-mix(in srgb, var(--c) 30%, transparent); }
.rk-hotbar svg { width: 24px; height: 24px; }

/* ---------- Hediye et ---------- */
.rk-gift {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
    gap: 2.6rem;
    max-width: 1140px;
    margin: 0 auto;
    padding: 2.6rem;
    border-radius: 24px;
    background:
        radial-gradient(ellipse 50% 70% at 100% 0%, rgba(255, 138, 61, 0.14), transparent 70%),
        rgba(8, 14, 27, 0.95);
    border: 1px solid rgba(255, 138, 61, 0.28);
}
.rk-gift-title { margin: 0.8rem 0 0; font-family: var(--font-brand); font-size: clamp(1.7rem, 3vw, 2.3rem); font-weight: 700; line-height: 1.15; color: #fff; }
.rk-gift-lead { max-width: 520px; margin: 0.7rem 0 0; font-size: 0.95rem; line-height: 1.65; color: var(--muted); }
.rk-gift-form > .field, .rk-gift-form > fieldset, .rk-gift-form > .rk-gift-row { margin-top: 1.25rem; }
.rk-gift-form > .field:first-of-type { margin-top: 1.7rem; }
.rk-user { position: relative; }
.rk-user .mc-head { position: absolute; left: 8px; top: 50%; width: 36px; height: 36px; border-radius: 8px; transform: translateY(-50%); }
.rk-user .input { height: 54px; padding-left: 3.6rem; font-family: var(--font-mono); font-size: 1rem; }
.rk-gift-ranks { margin: 0; padding: 0; border: 0; min-width: 0; }
.rk-gift-ranks legend { margin-bottom: 0.45rem; padding: 0; }
.rk-gift-ranks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem; }
.rk-gift-ranks legend { grid-column: 1 / -1; }
.rk-gift-ranks .choice { padding: 0.85rem 0.9rem; gap: 0.7rem; }
.rk-gr { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.rk-gr b { font-family: var(--font-brand); font-size: 1rem; font-weight: 700; }
.rk-gr small { margin-top: 0.2rem; font-family: var(--font-mono); font-size: 0.72rem; color: var(--faint); white-space: nowrap; }
.rk-gift-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.rk-gift-note { min-height: 86px; }

.rk-gift-preview { display: flex; flex-direction: column; gap: 1rem; }
.rk-giftcard {
    --c: #ffb07a;
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2.6rem 1.5rem 1.6rem;
    text-align: center;
    background: color-mix(in srgb, var(--c) 60%, transparent);
    clip-path: var(--px-lg);
    transition: background 0.3s var(--ease);
}
.rk-giftcard::before {
    content: '';
    position: absolute;
    inset: 2px;
    z-index: -1;
    clip-path: var(--px-lg);
    background:
        linear-gradient(90deg, transparent calc(50% - 13px), color-mix(in srgb, var(--c) 12%, transparent) calc(50% - 13px), color-mix(in srgb, var(--c) 12%, transparent) calc(50% + 13px), transparent calc(50% + 13px)),
        radial-gradient(ellipse 80% 45% at 50% 0%, color-mix(in srgb, var(--c) 28%, transparent), transparent 70%),
        linear-gradient(165deg, #13203a, #0a1222 70%);
}
.rk-giftcard[data-rank="vip"] { --c: #5eead4; }
.rk-giftcard[data-rank="svip"] { --c: #ff8a3d; }
.rk-bow { position: absolute; top: 8px; left: 50%; width: 58px; transform: translateX(-50%); filter: drop-shadow(0 4px 0 rgba(0, 0, 0, 0.35)); }
.rk-gc-label { margin-top: 0.4rem; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.22em; color: var(--faint); }
.rk-gc-head { width: 72px; height: 72px; margin-top: 1rem; border-radius: 12px; image-rendering: pixelated; background: #1a1a2e; box-shadow: 0 0 0 3px #0a1222, 0 0 0 4px var(--c), 0 12px 30px rgba(0, 0, 0, 0.5), 0 0 30px color-mix(in srgb, var(--c) 40%, transparent); }
.rk-gc-to { margin-top: 0.9rem; font-size: 0.92rem; color: var(--muted); }
.rk-gc-to b { font-family: var(--font-mono); color: #fff; }
.rk-gc-rank { margin-top: 0.4rem; font-family: var(--font-brand); font-size: 2.6rem; font-weight: 700; line-height: 1; color: var(--c); text-shadow: 0 0 26px color-mix(in srgb, var(--c) 55%, transparent); }
.rk-gc-plan { margin-top: 0.55rem; padding: 0.2rem 0.55rem; border-radius: 5px; font-family: var(--font-mono); font-size: 0.74rem; font-weight: 600; color: var(--c); background: rgba(0, 0, 0, 0.4); border: 1px solid color-mix(in srgb, var(--c) 35%, transparent); }
.rk-gc-note { max-width: 260px; min-height: 2.9em; margin: 1rem 0 0; font-size: 0.92rem; font-style: italic; line-height: 1.5; color: #e2e8f0; overflow-wrap: anywhere; }
.rk-gc-note.is-empty { color: var(--faint); }
.rk-gc-from { margin-top: 0.9rem; padding-top: 0.8rem; width: 100%; border-top: 1px dashed rgba(255, 255, 255, 0.12); font-size: 0.78rem; color: var(--faint); }
.rk-gc-from b { color: var(--muted); }
.rk-gift-total { display: flex; align-items: baseline; justify-content: space-between; padding: 0.9rem 1.1rem; border-radius: 14px; background: rgba(5, 10, 20, 0.7); border: 1px solid var(--line); }
.rk-gift-total span { font-size: 0.84rem; color: var(--muted); }
.rk-gift-total b { font-family: var(--font-mono); font-size: 1.3rem; font-weight: 600; color: #ffd3b0; }
.rk-gift-cta { width: 100%; }

@media (prefers-reduced-motion: reduce) {
    .rk-sparks i, .rk-medal-ring, .rk-player, .rk-aura i, .rk-caret, .rk-chat-lines li.is-new { animation: none !important; }
    .rk-aura i { opacity: 0.7; }
}

/* ---------- Tablet ---------- */
@media (max-width: 1000px) {
    .rk-cards { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; gap: 2rem; }
    .rk-card--svipp { order: -1; }
    .rk-table thead th { top: 64px; }
    .rk-game { aspect-ratio: 16 / 10; }
    .rk-chat { width: 58%; font-size: 0.82rem; }
    .rk-player { right: 6%; }
    .rk-body { height: 240px; }
    .rk-gift { grid-template-columns: 1fr; padding: 2rem; }
    .rk-gift-preview { max-width: 440px; width: 100%; margin: 0 auto; }
}

/* ---------- Mobil ---------- */
@media (max-width: 640px) {
    .rk-plan-tabs .tab { min-width: 0; padding: 0 1.2rem; }
    .rk-cards-wrap { padding: 1.5rem 1rem 0.5rem; }
    .rk-card { padding: 1.8rem 1.2rem 1.3rem; }
    .rk-amount { font-size: 2.2rem; }
    .rk-compare { border-radius: 16px; }
    .rk-table { font-size: 0.78rem; }
    .rk-table thead th { padding: 0.75rem 0.25rem; }
    .rk-table thead th.rk-th-feat { width: auto; padding-left: 0.8rem; font-size: 0.56rem; letter-spacing: 0.12em; }
    .rk-col b { font-size: 0.86rem; }
    .rk-col small { font-size: 0.64rem; }
    .rk-table tbody th, .rk-table tbody td { padding: 0.7rem 0.25rem; }
    .rk-table tbody th { padding-left: 0.8rem; line-height: 1.35; }
    .rk-group th { padding: 1.1rem 0.8rem 0.5rem !important; font-size: 0.62rem; }
    .rk-v { padding: 0.12rem 0.25rem; font-size: 0.66rem; }
    .rk-yes { width: 20px; height: 20px; }
    .rk-pv-tabs { width: 100%; }
    .rk-pv-tabs .tab { flex: 1; }
    .rk-game { aspect-ratio: auto; height: 640px; border-radius: 18px; }
    .rk-game::after { background: linear-gradient(0deg, rgba(5, 10, 20, 0.9) 10%, rgba(5, 10, 20, 0.2) 60%, rgba(5, 10, 20, 0.35)); }
    .rk-game-bg { object-position: 30% 40%; }
    .rk-cross { display: none; }
    .rk-player { right: 50%; top: 5%; bottom: auto; transform: translateX(50%); animation: none; }
    .rk-body { height: 210px; }
    .rk-nametag { font-size: 0.9rem; }
    .rk-chat { left: 0.6rem; right: 0.6rem; bottom: 88px; width: auto; font-size: 0.74rem; }
    .rk-chat-lines li { padding: 0.24rem 0.5rem; }
    .rk-hud { bottom: 14px; }
    .rk-xp { width: 270px; }
    .rk-hotbar i { width: 29px; height: 29px; border-width: 1px; }
    .rk-hotbar svg { width: 18px; height: 18px; }
    .rk-gift { padding: 1.5rem 1.15rem; border-radius: 20px; }
    .rk-gift-ranks { grid-template-columns: 1fr; }
    .rk-gift-row { grid-template-columns: 1fr; }
}

/* ===== sezon-bileti.css ===== */
/* =========================================================
   Sezon bileti (sb-)
   ========================================================= */
.sb-page { padding-bottom: 3rem; }
.sb-wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
.sb-ends { display: inline-flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0.5rem 0.7rem; margin-top: 1.4rem; padding: 0.55rem 1rem; border-radius: 12px; font-size: 0.84rem; color: var(--muted); background: rgba(8, 14, 27, 0.9); border: 1px solid var(--line); }
.sb-ends b { font-family: var(--font-mono); white-space: nowrap; color: #ffd3b0; }
.sb-ends-bar { width: 90px; height: 6px; background: rgba(255, 255, 255, 0.08); clip-path: var(--px-sm); }
.sb-ends-bar span { display: block; height: 100%; background: #ff8a3d; }

/* Ödül yolu */
.sb-pass-head { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 1rem; margin-bottom: 1rem; }
.sb-pass-head .panel-title { margin-bottom: 0.3rem; }
.sb-pass-head p { margin: 0; font-size: 0.86rem; color: var(--muted); }
.sb-pass-head p b { color: #fff; }
.sb-detail { display: grid; gap: 0.2rem; min-width: 260px; padding: 0.6rem 0.9rem; border-radius: 12px; font-size: 0.82rem; background: rgba(8, 14, 27, 0.85); border: 1px solid var(--line); }
.sb-detail small { font-size: 0.6rem; font-weight: 800; letter-spacing: 0.16em; color: #ffb07a; }
.sb-detail span { display: flex; align-items: center; gap: 0.5rem; }
.sb-detail b { font-weight: 600; color: #fff; }
.sb-dot { width: 8px; height: 8px; flex-shrink: 0; background: #5eead4; }
.sb-dot--prem { background: #ff8a3d; }
.sb-rail { display: grid; grid-template-columns: 92px minmax(0, 1fr); }
.sb-labels { display: grid; grid-template-rows: 44px 76px 76px; gap: 10px; padding-top: 0.6rem; }
.sb-labels span { display: flex; align-items: center; font-size: 0.64rem; font-weight: 800; letter-spacing: 0.14em; color: #5eead4; }
.sb-labels .is-prem { color: #ff9a52; }
.sb-track { overflow-x: auto; padding: 0.6rem 0.2rem 0.8rem; scrollbar-width: thin; scrollbar-color: rgba(255, 138, 61, 0.4) transparent; mask-image: linear-gradient(90deg, #000 92%, transparent); }
.sb-cols { position: relative; display: flex; gap: 10px; width: max-content; margin: 0; padding: 0; list-style: none; }
.sb-cols::before { content: ''; position: absolute; left: 0; right: 0; top: 20px; height: 4px; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.14) 0 6px, transparent 6px 10px); }
.sb-col { position: relative; display: grid; grid-template-rows: 44px 76px 76px; gap: 10px; justify-items: center; width: 76px; }
.sb-num { position: relative; z-index: 1; align-self: start; width: 40px; height: 40px; display: grid; place-items: center; font-family: var(--font-mono); font-size: 0.8rem; font-weight: 700; color: var(--faint); background: #0a1222; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.12); clip-path: var(--px-sm); }
.sb-col.is-done .sb-num { color: #2a1204; background: linear-gradient(180deg, #ffb87e, #ff8a3d); box-shadow: none; }
.sb-col.is-now .sb-num { color: #fff; background: #0f1d36; box-shadow: inset 0 0 0 2px #5eead4; }
.sb-col.is-now::before { content: 'SEN'; position: absolute; top: -14px; font-size: 0.54rem; font-weight: 800; letter-spacing: 0.16em; color: #5eead4; }
.sb-cell { position: relative; width: 76px; height: 76px; display: grid; place-items: center; padding: 14px; border-radius: 14px; cursor: pointer; transition: transform 0.2s var(--ease), border-color 0.2s; }
.sb-cell svg { width: 100%; height: 100%; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.45)); }
.sb-cell:hover, .sb-cell.is-sel { transform: translateY(-3px); }
.sb-cell--free { background: rgba(45, 212, 191, 0.06); border: 1px solid rgba(94, 234, 212, 0.22); }
.sb-cell--prem { background: radial-gradient(circle at 50% 30%, rgba(255, 138, 61, 0.16), transparent 70%), #0d1628; border: 1px solid rgba(255, 138, 61, 0.3); }
.sb-cell--prem::after { content: ''; position: absolute; right: 5px; bottom: 5px; width: 16px; height: 16px; border-radius: 4px; background: #0a1222 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffb07a' stroke-width='2.6' stroke-linecap='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E") center / 10px no-repeat; border: 1px solid rgba(255, 138, 61, 0.45); }
.sb-cell--prem svg { opacity: 0.55; }
.sb-col.is-done .sb-cell--free { background: rgba(52, 211, 153, 0.08); border-color: rgba(52, 211, 153, 0.35); }
.sb-col.is-done .sb-cell--free::after { content: '✓'; position: absolute; right: 5px; bottom: 3px; font-size: 0.8rem; font-weight: 800; color: #6ee7b7; }
.sb-col.is-now .sb-cell--free { border-color: #5eead4; box-shadow: 0 0 0 3px rgba(94, 234, 212, 0.15), 0 0 20px rgba(94, 234, 212, 0.25); }
.sb-col.is-big .sb-cell--prem { border-color: rgba(255, 138, 61, 0.7); background: radial-gradient(circle at 50% 30%, rgba(255, 138, 61, 0.32), transparent 70%), #111b31; }
.sb-col.is-big .sb-cell--prem svg { opacity: 0.85; }
.sb-cell.is-sel { outline: 2px solid #fff; outline-offset: 2px; }
.sb-lockmsg { margin: 0.8rem 0 0; font-size: 0.8rem; color: var(--faint); }
.sb-lockmsg b { color: #ffd3b0; }

/* Öne çıkan ödüller */
.sb-show { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 1rem; }
.sb-show-card { --r: #ff8a3d; display: flex; flex-direction: column; align-items: center; gap: 0.3rem; padding: 1.6rem 1rem 1.3rem; text-align: center; border-radius: 20px; background: radial-gradient(ellipse at 50% 35%, color-mix(in srgb, var(--r) 28%, transparent), transparent 65%), var(--glass-strong); border: 1px solid color-mix(in srgb, var(--r) 45%, transparent); }
.sb-show-art { width: 110px; height: 110px; margin-bottom: 0.6rem; animation: sb-float 4s ease-in-out infinite; }
.sb-show-card:first-child .sb-show-art { width: 150px; height: 150px; }
.sb-show-art svg { width: 100%; height: 100%; filter: drop-shadow(0 14px 16px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 24px color-mix(in srgb, var(--r) 50%, transparent)); }
.sb-show-card b { font-family: var(--font-brand); font-size: 1.15rem; color: #fff; }
.sb-show-card small { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--r); }
@keyframes sb-float { 50% { transform: translateY(-6px); } }

/* Planlar */
.sb-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; gap: 1rem; scroll-margin-top: 110px; }
.sb-plan { position: relative; display: flex; flex-direction: column; padding: 1.5rem; border-radius: 20px; background: var(--glass-strong); border: 1px solid var(--line); }
.sb-plan h3 { margin: 0; font-family: var(--font-brand); font-size: 1.25rem; color: #fff; }
.sb-price { margin: 0.6rem 0 0.2rem; font-family: var(--font-mono); font-size: 2rem; font-weight: 600; color: #ffd3b0; }
.sb-price small { font-family: 'Inter', sans-serif; font-size: 0.8rem; font-weight: 600; color: var(--muted); }
.sb-plan p { margin: 0 0 1rem; font-size: 0.84rem; color: var(--muted); }
.sb-plan ul { display: grid; gap: 0.55rem; margin: 0 0 1.4rem; padding: 0; list-style: none; font-size: 0.86rem; color: #dbe2ee; }
.sb-plan li { display: flex; align-items: center; gap: 0.55rem; }
.sb-plan li svg { width: 16px; height: 16px; flex-shrink: 0; color: #5eead4; }
.sb-plan li.is-no { color: var(--faint); }
.sb-plan li.is-no svg { color: var(--faint); }
.sb-plan .btn-gold, .sb-plan .btn-ghost-px { margin-top: auto; height: 46px; }
.sb-plan.is-hot { border-color: rgba(255, 138, 61, 0.6); background: radial-gradient(ellipse at 50% 0, rgba(255, 138, 61, 0.2), transparent 60%), var(--glass-strong); box-shadow: 0 20px 60px rgba(255, 138, 61, 0.12); transform: translateY(-8px); }
.sb-flag { position: absolute; top: -12px; left: 50%; padding: 0.25rem 0.7rem; transform: translateX(-50%); font-size: 0.62rem; font-weight: 800; letter-spacing: 0.14em; color: #2a1204; background: linear-gradient(180deg, #ffb87e, #ff8a3d); clip-path: var(--px-sm); }

/* Görevler */
.sb-quests { margin: 0; padding: 0; list-style: none; }
.sb-q { display: grid; grid-template-columns: minmax(0, 1fr) 80px 110px; align-items: center; gap: 1rem; padding: 0.8rem 0; }
.sb-q + .sb-q { border-top: 1px solid var(--line); }
.sb-q-t b { display: block; margin-bottom: 0.4rem; font-size: 0.9rem; color: #fff; }
.sb-q-bar { display: block; height: 8px; background: rgba(255, 255, 255, 0.07); clip-path: var(--px-sm); }
.sb-q-bar span { display: block; height: 100%; background: repeating-linear-gradient(90deg, #ffb07a 0 6px, #ff8a3d 6px 8px); }
.sb-q-n { font-family: var(--font-mono); font-size: 0.82rem; text-align: right; color: var(--muted); }
.sb-q-xp { justify-self: end; padding: 0.3rem 0.6rem; border-radius: 8px; font-family: var(--font-mono); font-size: 0.78rem; font-weight: 600; color: #ffd3b0; background: rgba(255, 138, 61, 0.1); border: 1px solid rgba(255, 138, 61, 0.3); }
.sb-q.is-done .sb-q-bar span { background: #34d399; }
.sb-q.is-done .sb-q-xp { color: #6ee7b7; background: rgba(52, 211, 153, 0.08); border-color: rgba(52, 211, 153, 0.35); }

@media (max-width: 1000px) {
    .sb-show { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .sb-show-card:first-child .sb-show-art, .sb-show-art { width: 90px; height: 90px; }
    .sb-plans { grid-template-columns: minmax(0, 1fr); max-width: 520px; margin: 0 auto; width: 100%; }
    .sb-plan.is-hot { transform: none; }
}
@media (max-width: 640px) {
    .sb-rail { grid-template-columns: 58px minmax(0, 1fr); }
    .sb-labels span { font-size: 0.52rem; letter-spacing: 0.08em; }
    .sb-labels, .sb-col { grid-template-rows: 44px 64px 64px; }
    .sb-col, .sb-cell { width: 64px; }
    .sb-cell { height: 64px; padding: 11px; }
    .sb-detail { width: 100%; min-width: 0; }
    .sb-show { grid-template-columns: minmax(0, 1fr); }
    .sb-show-card { display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: center; column-gap: 1rem; row-gap: 0.1rem; padding: 1rem; text-align: left; }
    .sb-show-card:first-child .sb-show-art, .sb-show-art { grid-row: span 2; width: 64px; height: 64px; margin: 0; }
    .sb-show-card b { align-self: end; }
    .sb-show-card small { align-self: start; }
    .sb-show-card b { font-size: 1rem; }
    .sb-q { grid-template-columns: minmax(0, 1fr) auto; row-gap: 0.4rem; }
    .sb-q-n { display: none; }
}
@media (prefers-reduced-motion: reduce) { .sb-show-art { animation: none; } }

/* ===== siralamalar.css ===== */
/* =========================================================
   Sıralamalar (lb-) — podyum, tablo, klanlar
   ========================================================= */
.lb-page {
    overflow-x: clip;
    --lb-px2: polygon(0 4px, 2px 4px, 2px 2px, 4px 2px, 4px 0, calc(100% - 4px) 0, calc(100% - 4px) 2px, calc(100% - 2px) 2px, calc(100% - 2px) 4px, 100% 4px, 100% calc(100% - 4px), calc(100% - 2px) calc(100% - 4px), calc(100% - 2px) calc(100% - 2px), calc(100% - 4px) calc(100% - 2px), calc(100% - 4px) 100%, 4px 100%, 4px calc(100% - 2px), 2px calc(100% - 2px), 2px calc(100% - 4px), 0 calc(100% - 4px));
}
.lb-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Hero ---------- */
.lb-hero { padding-bottom: 2.2rem; }
.lb-hero-meta { display: flex; justify-content: center; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.7rem; }
.lb-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    height: 38px;
    padding: 0 0.95rem;
    border-radius: 10px;
    font-size: 0.84rem;
    color: var(--muted);
    background: rgba(8, 14, 27, 0.92);
    border: 1px solid var(--line);
}
.lb-chip b { font-family: var(--font-mono); font-weight: 600; color: #fff; }
.lb-chip .live-dot { width: 7px; height: 7px; }
.lb-chip--count {
    color: #ffd3b0;
    background: linear-gradient(180deg, rgba(46, 22, 10, 0.95), rgba(12, 15, 28, 0.95));
    border-color: rgba(255, 138, 61, 0.5);
    box-shadow: 0 0 0 3px rgba(255, 138, 61, 0.08), 0 12px 32px rgba(255, 138, 61, 0.14);
}
.lb-chip--count b { color: #ffb07a; }
.lb-chip--count svg { width: 14px; height: 14px; color: #ff8a3d; animation: lb-hourglass 6s var(--ease) infinite; }
@keyframes lb-hourglass { 0%, 42% { transform: rotate(0); } 50%, 92% { transform: rotate(180deg); } 100% { transform: rotate(360deg); } }

/* ---------- Sezon ödülleri ---------- */
.lb-reward-in {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 1.4rem 2.2rem;
    padding: 1.7rem 1.9rem 1.3rem;
    border-radius: 22px;
    background:
        radial-gradient(ellipse 40% 140% at 0% 40%, rgba(255, 138, 61, 0.2), transparent 70%),
        linear-gradient(180deg, rgba(15, 21, 38, 0.96), rgba(8, 13, 25, 0.96));
    border: 1px solid rgba(255, 138, 61, 0.34);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4);
}
/* Sağ üst köşede piksel doku */
.lb-reward-in::before {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    width: 260px;
    height: 100%;
    background: repeating-conic-gradient(rgba(255, 176, 122, 0.05) 0 25%, transparent 0 50%) 0 0 / 12px 12px;
    -webkit-mask-image: linear-gradient(225deg, #000, transparent 60%);
    mask-image: linear-gradient(225deg, #000, transparent 60%);
    pointer-events: none;
}
.lb-reward-head { position: relative; display: flex; align-items: center; gap: 1.2rem; }
.lb-reward-ico {
    position: relative;
    isolation: isolate;
    width: 76px;
    height: 76px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    background: linear-gradient(180deg, #ffd3b0, #dd6320);
    clip-path: var(--px-lg);
}
.lb-reward-ico::before { content: ''; position: absolute; inset: 2px; z-index: -1; background: radial-gradient(circle at 50% 38%, #3a1f12, #0a1222 72%); clip-path: var(--px-lg); }
.lb-reward-ico svg { width: 42px; height: 42px; filter: drop-shadow(0 0 10px rgba(255, 138, 61, 0.65)); }
.lb-kicker { display: block; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.2em; color: #ffb07a; }
.lb-reward-title { margin: 0.35rem 0 0.4rem; font-family: var(--font-brand); font-size: 1.5rem; font-weight: 700; letter-spacing: 0.02em; color: #fff; }
.lb-reward-head p { max-width: 470px; margin: 0; font-size: 0.9rem; line-height: 1.6; color: var(--muted); }
.lb-prizes { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.7rem; margin: 0; padding: 0; list-style: none; }
.lb-prize {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    min-width: 172px;
    padding: 0.85rem 0.9rem 0.8rem 0.75rem;
    border-radius: 14px;
    background: rgba(5, 10, 20, 0.9);
    border: 1px solid color-mix(in srgb, var(--r) 42%, transparent);
    box-shadow: inset 0 -18px 30px -24px var(--r);
}
.lb-prize-place {
    position: absolute;
    top: -9px;
    left: 12px;
    height: 18px;
    padding: 0 0.42rem;
    font-family: var(--font-mono);
    font-size: 0.66rem;
    font-weight: 700;
    line-height: 18px;
    color: #12090a;
    background: var(--r);
    clip-path: var(--lb-px2);
}
.lb-prize-ico {
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: radial-gradient(circle, color-mix(in srgb, var(--r) 26%, transparent), transparent 72%), rgba(255, 255, 255, 0.03);
}
.lb-prize-ico svg { width: 30px; height: 30px; }
.lb-prize-txt b { display: block; font-size: 0.92rem; color: #fff; }
.lb-prize-txt { min-width: 0; }
.lb-prize-txt small { display: block; margin-top: 0.12rem; font-size: 0.74rem; color: var(--muted); white-space: nowrap; }
.lb-prize-txt em { font-style: normal; font-weight: 700; color: var(--r); }
.lb-prize-cr { display: block; margin-top: 0.22rem; font-family: var(--font-mono); font-size: 0.74rem; font-weight: 600; color: #ffd3b0; white-space: nowrap; }
.lb-reward-foot { position: relative; grid-column: 1 / -1; display: flex; align-items: center; gap: 0.6rem; margin: 0; padding-top: 1rem; border-top: 1px dashed rgba(255, 138, 61, 0.24); font-size: 0.82rem; line-height: 1.5; color: var(--muted); }
.lb-reward-foot b { color: #ffd3b0; }
.lb-foot-sq { width: 8px; height: 8px; flex-shrink: 0; background: #5eead4; box-shadow: 0 0 10px rgba(94, 234, 212, 0.7); }

/* ---------- Kontroller ---------- */
.lb-board { padding-top: 3.6rem; }
.lb-controls { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; }
.lb-modes .tab { display: inline-flex; align-items: center; gap: 0.5rem; height: 42px; padding: 0 1.1rem; }
.lb-modes .tab svg { width: 14px; height: 14px; flex-shrink: 0; }
.lb-period { position: relative; isolation: isolate; display: inline-flex; gap: 2px; padding: 3px; background: rgba(255, 138, 61, 0.42); clip-path: var(--px-sm); }
.lb-period::before { content: ''; position: absolute; inset: 1.5px; z-index: -1; background: #0a1222; clip-path: var(--px-sm); }
.lb-period-btn {
    height: 38px;
    padding: 0 1.05rem;
    border: 0;
    background: transparent;
    color: var(--muted);
    font-family: var(--font-brand);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    cursor: pointer;
    clip-path: var(--px-sm);
    transition: color 0.2s var(--ease), background 0.2s var(--ease);
}
.lb-period-btn:hover { color: #fff; }
.lb-period-btn.is-active { color: #2a1204; background: linear-gradient(180deg, #ffb87e, #ff8a3d); box-shadow: inset 0 -2px 0 rgba(110, 36, 4, 0.4); }
.lb-modes .tab:focus-visible, .lb-period-btn:focus-visible, .lb-link:focus-visible { outline: 2px solid #5eead4; outline-offset: 2px; }

/* Geçiş: kısa bir solma */
.lb-swap { transition: opacity 0.2s var(--ease), transform 0.2s var(--ease); }
.lb-page.is-swapping .lb-swap { opacity: 0; transform: translateY(8px); }

/* ---------- Podyum ---------- */
.lb-stage { position: relative; isolation: isolate; max-width: 980px; margin: 2.6rem auto 0; padding-top: 1rem; }
.lb-stage::before {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -30px;
    z-index: -2;
    width: 120%;
    height: 75%;
    transform: translateX(-50%);
    background: radial-gradient(ellipse 50% 55% at 50% 100%, rgba(255, 138, 61, 0.26), transparent 72%);
    pointer-events: none;
}
/* Perspektifli piksel zemin */
.lb-stage::after {
    content: '';
    position: absolute;
    left: -8%;
    right: -8%;
    bottom: -56px;
    z-index: -1;
    height: 150px;
    background-image:
        linear-gradient(rgba(255, 176, 122, 0.16) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 176, 122, 0.16) 1px, transparent 1px);
    background-size: 30px 30px;
    background-position: center top;
    transform: perspective(420px) rotateX(62deg);
    transform-origin: top;
    -webkit-mask-image: radial-gradient(ellipse 55% 90% at 50% 0%, #000 30%, transparent 75%);
    mask-image: radial-gradient(ellipse 55% 90% at 50% 0%, #000 30%, transparent 75%);
    pointer-events: none;
}
.lb-podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: 1.1rem; }
.lb-pod { position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: center; min-width: 0; transition: opacity 0.25s var(--ease), filter 0.25s var(--ease); }
.lb-pod--1 { order: 2; --c1: #ffe2cc; --c2: #ff8a3d; --c3: #b4480f; --ped: 224px; }
.lb-pod--2 { order: 1; --c1: #ffffff; --c2: #b9c5d8; --c3: #5d6b82; --ped: 180px; }
.lb-pod--3 { order: 3; --c1: #ffdcc0; --c2: #c9793f; --c3: #6f3615; --ped: 150px; }
.lb-pod-fig { position: relative; display: flex; flex-direction: column; align-items: center; max-width: 100%; }
.lb-crown { width: 58px; height: 44px; margin-bottom: 0.55rem; filter: drop-shadow(0 0 14px rgba(255, 138, 61, 0.75)); animation: lb-bob 3.4s ease-in-out infinite; }
@keyframes lb-bob { 50% { transform: translateY(-5px); } }
/* Minecraft isim etiketi */
.lb-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    max-width: 100%;
    margin-bottom: 0.7rem;
    padding: 0.32rem 0.6rem 0.32rem 0.4rem;
    font-family: var(--font-mono);
    font-size: 0.82rem;
    font-weight: 600;
    color: #fff;
    text-decoration: none;
    white-space: nowrap;
    background: rgba(4, 7, 14, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: border-color 0.2s var(--ease);
}
.lb-tag:hover { border-color: var(--c2); }
.lb-tag-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.lb-pod-skin {
    position: relative;
    z-index: 1;
    display: block;
    width: auto;
    height: 196px;
    margin-bottom: -8px;
    image-rendering: pixelated;
    filter: drop-shadow(0 18px 16px rgba(0, 0, 0, 0.6));
}
.lb-pod--1 .lb-pod-skin { height: 236px; filter: drop-shadow(0 18px 16px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 26px rgba(255, 138, 61, 0.35)); }
.lb-banner.lb-pod-banner { position: relative; z-index: 1; width: auto; height: 170px; margin-bottom: -2px; filter: drop-shadow(0 16px 18px rgba(0, 0, 0, 0.6)); }
.lb-pod--1 .lb-banner.lb-pod-banner { height: 210px; }

/* Spot ışığı + kıvılcımlar (1.) */
.lb-pod--1::before {
    content: '';
    position: absolute;
    left: 50%;
    top: -70px;
    z-index: -1;
    width: 380px;
    height: calc(100% - var(--ped) + 90px);
    transform: translateX(-50%);
    background: linear-gradient(180deg, rgba(255, 226, 204, 0.34), rgba(255, 138, 61, 0.12) 65%, transparent);
    clip-path: polygon(43% 0, 57% 0, 100% 100%, 0 100%);
    filter: blur(8px);
    pointer-events: none;
    animation: lb-spot 5s ease-in-out infinite;
}
@keyframes lb-spot { 50% { opacity: 0.7; } }
.lb-sparks { position: absolute; left: 10%; right: 10%; top: 0; bottom: var(--ped); z-index: 2; pointer-events: none; }
.lb-sparks i { position: absolute; bottom: 4%; width: 4px; height: 4px; background: #ffd3b0; box-shadow: 0 0 8px #ff8a3d; opacity: 0; animation: lb-rise 3.8s linear infinite; }
.lb-sparks i:nth-child(1) { left: 8%; animation-delay: 0s; }
.lb-sparks i:nth-child(2) { left: 22%; animation-delay: 1.4s; width: 3px; height: 3px; }
.lb-sparks i:nth-child(3) { left: 34%; animation-delay: 2.6s; }
.lb-sparks i:nth-child(4) { left: 46%; animation-delay: 0.7s; width: 5px; height: 5px; }
.lb-sparks i:nth-child(5) { left: 58%; animation-delay: 2s; width: 3px; height: 3px; background: #5eead4; box-shadow: 0 0 8px #2dd4bf; }
.lb-sparks i:nth-child(6) { left: 68%; animation-delay: 3.1s; }
.lb-sparks i:nth-child(7) { left: 80%; animation-delay: 1s; width: 3px; height: 3px; }
.lb-sparks i:nth-child(8) { left: 90%; animation-delay: 2.3s; }
.lb-sparks i:nth-child(9) { left: 14%; animation-delay: 3.4s; width: 3px; height: 3px; background: #5eead4; box-shadow: 0 0 8px #2dd4bf; }
.lb-sparks i:nth-child(10) { left: 74%; animation-delay: 0.3s; width: 5px; height: 5px; }
@keyframes lb-rise { 0% { opacity: 0; transform: translateY(0); } 15% { opacity: 1; } 100% { opacity: 0; transform: translateY(-230px); } }

/* Piksel basamaklı kaide */
.lb-ped {
    --s: 12px;
    --ped-shape: polygon(0 calc(var(--s) * 2), var(--s) calc(var(--s) * 2), var(--s) var(--s), calc(var(--s) * 2) var(--s), calc(var(--s) * 2) 0, calc(100% - var(--s) * 2) 0, calc(100% - var(--s) * 2) var(--s), calc(100% - var(--s)) var(--s), calc(100% - var(--s)) calc(var(--s) * 2), 100% calc(var(--s) * 2), 100% 100%, 0 100%);
    position: relative;
    isolation: isolate;
    width: min(100%, 260px);
    height: var(--ped);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: calc(var(--s) * 2 + 4px);
    text-align: center;
    background: linear-gradient(180deg, var(--c1), var(--c2) 30%, var(--c3));
    clip-path: var(--ped-shape);
}
.lb-ped::before {
    content: '';
    position: absolute;
    inset: 2px 2px 0;
    z-index: -1;
    clip-path: var(--ped-shape);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0 calc(var(--s) * 2), transparent calc(var(--s) * 2)),
        linear-gradient(180deg, transparent calc(var(--s) * 2), color-mix(in srgb, var(--c2) 55%, transparent) calc(var(--s) * 2) calc(var(--s) * 2 + 2px), transparent calc(var(--s) * 2 + 2px)),
        repeating-conic-gradient(rgba(255, 255, 255, 0.025) 0 25%, transparent 0 50%) 0 0 / 10px 10px,
        radial-gradient(ellipse 70% 60% at 50% 30%, color-mix(in srgb, var(--c2) 18%, transparent), transparent 70%),
        linear-gradient(180deg, #18243d, #0a1120 85%);
}
.lb-ped-num { position: relative; display: grid; place-items: center; width: 96px; height: 60px; color: var(--c2); }
.lb-ped-num svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.lb-ped-num b {
    position: relative;
    font-family: var(--font-brand);
    font-size: 2.3rem;
    font-weight: 700;
    line-height: 1;
    background: linear-gradient(180deg, #fff, var(--c1) 40%, var(--c2));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.55));
}
.lb-pod--1 .lb-ped-num { width: 110px; height: 70px; }
.lb-pod--1 .lb-ped-num b { font-size: 2.9rem; }
.lb-ped-pts { margin-top: 0.35rem; font-family: var(--font-mono); line-height: 1; }
.lb-ped-pts b { font-size: 1.2rem; font-weight: 600; color: #fff; }
.lb-ped-pts small { margin-left: 0.35rem; font-size: 0.64rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); }
.lb-ped-sub { margin-top: 0.45rem; font-size: 0.74rem; color: var(--muted); }
.lb-pod--1 .lb-ped-pts b { font-size: 1.4rem; color: #ffe2cc; }

/* Arama eşleşmesi */
.lb-podium.is-searching .lb-pod:not(.is-match) { opacity: 0.35; filter: grayscale(0.7); }
.lb-pod.is-match .lb-tag { border-color: #ff8a3d; box-shadow: 0 0 0 3px rgba(255, 138, 61, 0.25); }

/* ---------- Tablo + kenar ---------- */
.lb-layout { display: grid; grid-template-columns: minmax(0, 1fr) 330px; align-items: start; gap: 1.5rem; margin-top: 4.4rem; }
.lb-table-card { position: relative; border-radius: 20px; background: var(--glass-strong); border: 1px solid var(--line); }
.lb-table-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; padding: 1.2rem 1.3rem; border-bottom: 1px solid var(--line); }
.lb-h2 { margin: 0; font-family: var(--font-brand); font-size: 1.15rem; font-weight: 700; letter-spacing: 0.04em; color: #fff; }
.lb-sub { margin: 0.25rem 0 0; font-size: 0.8rem; color: var(--faint); }
.lb-search-wrap { display: flex; align-items: center; gap: 0.7rem; }
.lb-search { display: block; width: 260px; }
.lb-search .input { height: 42px; font-size: 0.88rem; }
.lb-search .input::-webkit-search-cancel-button { filter: invert(0.6); }
.lb-count { font-family: var(--font-mono); font-size: 0.74rem; color: #ffb07a; white-space: nowrap; }
.lb-count:empty { display: none; }
.lb-table-wrap { border: 0; border-radius: 0; background: transparent; }
.lb-table td { padding: 0.68rem 1rem; vertical-align: middle; }
.lb-table th.num { text-align: right; }
.lb-table th:first-child, .lb-table td:first-child { padding-left: 1.3rem; }
.lb-table th:last-child, .lb-table td:last-child { padding-right: 1.3rem; }
.lb-table tbody tr { position: relative; }
.lb-table tbody tr:hover td:first-child { box-shadow: inset 3px 0 0 #ff8a3d; }
.lb-table tbody tr.is-match { background: rgba(255, 138, 61, 0.07); }
.lb-pos { width: 48px; font-family: var(--font-mono); font-weight: 700; color: var(--muted); }
.lb-trend { width: 52px; font-family: var(--font-mono); font-size: 0.76rem; font-weight: 700; white-space: nowrap; }
.lb-trend span { margin-right: 0.18rem; font-size: 0.6rem; }
.lb-trend.is-up { color: #34d399; }
.lb-trend.is-down { color: #f87171; }
.lb-trend.is-flat { color: var(--faint); }
.lb-pl { display: flex; align-items: center; gap: 0.6rem; min-width: 0; }
.lb-who { display: inline-flex; align-items: center; gap: 0.7rem; min-width: 0; color: #fff; text-decoration: none; }
.lb-who .mc-head, .lb-who .lb-banner { width: 32px; height: 32px; border-radius: 7px; }
.lb-who .lb-banner { width: 20px; height: 40px; border-radius: 0; box-shadow: none; margin: -4px 6px -4px 6px; }
.lb-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; transition: color 0.2s var(--ease); }
.lb-who:hover .lb-name { color: #ffd3b0; }
.lb-mark { padding: 0 1px; border-radius: 3px; color: #fff; background: rgba(255, 138, 61, 0.45); }
.lb-meta { display: none; }
.lb-lv {
    display: inline-grid;
    place-items: center;
    min-width: 36px;
    height: 24px;
    padding: 0 0.4rem;
    font-family: var(--font-mono);
    font-size: 0.76rem;
    font-weight: 700;
    color: #ffd3b0;
    background: rgba(255, 138, 61, 0.12);
    box-shadow: inset 0 0 0 1px rgba(255, 138, 61, 0.32);
    clip-path: var(--lb-px2);
}
.lb-c-s1, .lb-c-s2 { color: var(--text); }
.lb-pts b { display: block; font-size: 0.95rem; font-weight: 600; color: #fff; }
.lb-bar { display: block; width: 100px; height: 6px; margin: 0.38rem 0 0 auto; background: rgba(255, 255, 255, 0.07); }
.lb-bar > span { display: block; height: 100%; background: repeating-linear-gradient(90deg, #ff8a3d 0 6px, #ffa564 6px 8px); box-shadow: 0 0 8px rgba(255, 138, 61, 0.35); }
.lb-empty { padding: 2.6rem 1rem 2.2rem; text-align: center; color: var(--muted); }
.lb-empty svg { width: 34px; height: 34px; color: var(--faint); }
.lb-empty b { display: block; margin-top: 0.7rem; color: #fff; }
.lb-empty span { display: block; margin-top: 0.3rem; font-size: 0.86rem; }

/* Rütbe rozetleri */
.lb-rk { display: inline-flex; align-items: center; flex-shrink: 0; height: 18px; padding: 0 0.42rem; font-family: 'Inter', sans-serif; font-size: 0.58rem; font-weight: 800; letter-spacing: 0.08em; line-height: 1; white-space: nowrap; clip-path: var(--lb-px2); }
.lb-rk--vip { color: #042f2e; background: linear-gradient(180deg, #99f6e4, #2dd4bf); }
.lb-rk--svip { color: #2a1204; background: linear-gradient(180deg, #ffb87e, #ff8a3d); }
.lb-rk--svipp { color: #2a1204; background: linear-gradient(90deg, #ffe2cc, #ff9a52 45%, #f472b6); box-shadow: inset 0 -2px 0 rgba(110, 36, 4, 0.3); }
.lb-clan-tag { font-family: var(--font-mono); font-size: 0.78rem; font-weight: 600; color: #5eead4; }

/* Senin sıran (yapışkan) */
.lb-me {
    position: sticky;
    bottom: 14px;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 0.9rem;
    margin: 0.4rem 0.8rem 0.9rem;
    padding: 0.65rem 0.8rem 0.65rem 1rem;
    border-radius: 14px;
    background: linear-gradient(90deg, rgba(62, 29, 11, 0.98), rgba(12, 18, 34, 0.98) 60%);
    border: 1px solid rgba(255, 138, 61, 0.5);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55), 0 0 0 4px rgba(255, 138, 61, 0.08);
}
.lb-me-pos { min-width: 3.4rem; font-family: var(--font-mono); font-size: 1.15rem; font-weight: 700; color: #ffb07a; }
.lb-me .mc-head { width: 34px; height: 34px; border-radius: 8px; }
.lb-me-who b { display: block; font-size: 0.9rem; color: #fff; }
.lb-me-who small { font-size: 0.74rem; color: var(--muted); }
.lb-me-prog { flex: 1; min-width: 0; padding-left: 0.6rem; }
.lb-me-prog small { font-size: 0.76rem; color: var(--muted); }
.lb-me-prog b { color: #ffd3b0; font-weight: 600; }
.lb-bar--me { width: 100%; max-width: 280px; height: 8px; margin: 0.35rem 0 0; }
.lb-me-pts { text-align: right; font-family: var(--font-mono); line-height: 1.1; }
.lb-me-pts b { display: block; font-size: 1.05rem; color: #fff; }
.lb-me-pts small { font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); }
.lb-me-btn { height: 36px; padding: 0 1rem; font-size: 0.7rem; }
.lb-pages { margin: 0.4rem 0 1.3rem; }

/* Kenar */
.lb-side { display: grid; gap: 1.2rem; }
.lb-side .panel-title { margin: 0; font-family: var(--font-brand); font-size: 1rem; letter-spacing: 0.04em; }
.lb-side-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.7rem; }
.lb-link { padding: 0; border: 0; background: none; font: inherit; font-size: 0.82rem; font-weight: 600; color: #ffb07a; cursor: pointer; transition: color 0.2s var(--ease); }
.lb-link:hover { color: #ffd3b0; }
.lb-clan-list { margin: 0; padding: 0; list-style: none; }
.lb-clan { display: grid; grid-template-columns: 16px 26px minmax(0, 1fr) auto; align-items: center; gap: 0.7rem; padding: 0.55rem 0.6rem; border-radius: 12px; }
.lb-clan + .lb-clan { margin-top: 0.15rem; }
.lb-clan.is-top { background: linear-gradient(90deg, rgba(255, 138, 61, 0.16), rgba(255, 138, 61, 0.02)); box-shadow: inset 0 0 0 1px rgba(255, 138, 61, 0.22); }
.lb-clan-pos { font-family: var(--font-mono); font-size: 0.82rem; font-weight: 700; color: var(--faint); }
.lb-clan.is-top .lb-clan-pos { color: #ffb07a; }
.lb-banner { display: block; width: 26px; height: 52px; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5)); }
.lb-clan-txt { min-width: 0; }
.lb-clan-txt b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.88rem; color: #fff; }
.lb-clan-txt small { font-size: 0.74rem; color: var(--muted); }
.lb-clan-pts { font-family: var(--font-mono); font-size: 0.84rem; font-weight: 600; color: #fff; }

.lb-riser-row { display: flex; align-items: center; gap: 0.8rem; margin-top: 0.8rem; color: inherit; text-decoration: none; }
.lb-riser-row .mc-head { width: 44px; height: 44px; }
.lb-riser-row b { display: block; font-size: 1rem; color: #fff; }
.lb-riser-row small { font-family: var(--font-mono); font-size: 0.74rem; color: var(--muted); }
.lb-riser-row:hover b { color: #ffd3b0; }
.lb-riser-up { margin-left: auto; padding: 0.3rem 0.55rem; font-family: var(--font-mono); font-size: 0.84rem; font-weight: 700; color: #052e1f; background: #34d399; clip-path: var(--lb-px2); }
.lb-spark { display: flex; align-items: flex-end; gap: 6px; height: 70px; margin-top: 1.1rem; padding-bottom: 2px; border-bottom: 1px solid var(--line); }
.lb-spark i { flex: 1; background: repeating-linear-gradient(180deg, #ff8a3d 0 6px, #ffa564 6px 8px); opacity: 0.55; }
.lb-spark i:nth-child(1) { height: 16%; }
.lb-spark i:nth-child(2) { height: 22%; }
.lb-spark i:nth-child(3) { height: 30%; }
.lb-spark i:nth-child(4) { height: 42%; }
.lb-spark i:nth-child(5) { height: 55%; }
.lb-spark i:nth-child(6) { height: 74%; opacity: 0.8; }
.lb-spark i:nth-child(7) { height: 100%; opacity: 1; box-shadow: 0 0 14px rgba(255, 138, 61, 0.6); }
.lb-spark-days { display: flex; gap: 6px; margin-top: 0.4rem; }
.lb-spark-days span { flex: 1; text-align: center; font-family: var(--font-mono); font-size: 0.62rem; color: var(--faint); }

.lb-howto .panel-title { margin-bottom: 0.6rem; }
.lb-howto-list { margin: 0; padding: 0; list-style: none; }
.lb-howto-list li { display: flex; align-items: center; gap: 0.7rem; padding: 0.6rem 0; font-size: 0.87rem; color: var(--text); }
.lb-howto-list li + li { border-top: 1px solid var(--line); }
.lb-howto-list b { margin-left: auto; font-family: var(--font-mono); font-weight: 600; color: #6ee7b7; }
.lb-howto-ico { width: 30px; height: 30px; flex-shrink: 0; display: grid; place-items: center; color: #ffb07a; background: rgba(255, 138, 61, 0.12); clip-path: var(--lb-px2); }
.lb-howto-ico svg { width: 14px; height: 14px; }
.lb-howto-note { margin: 0.7rem 0 0; font-size: 0.78rem; line-height: 1.55; color: var(--faint); }

/* ---------- Son çağrı ---------- */
.lb-cta { padding-top: 3.5rem; padding-bottom: 1rem; }
.lb-cta-in {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1.8rem 2.5rem;
    padding: 2.3rem 2.5rem;
    border-radius: 22px;
    background:
        radial-gradient(ellipse 45% 140% at 100% 50%, rgba(255, 138, 61, 0.3), transparent 70%),
        rgba(8, 14, 27, 0.94);
    border: 1px solid rgba(255, 138, 61, 0.3);
}
.lb-cta-title { margin: 0.7rem 0 0.45rem; font-family: var(--font-brand); font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 700; color: #fff; }
.lb-cta-in p { max-width: 520px; margin: 0; line-height: 1.65; color: var(--muted); }

/* ---------- Duyarlı ---------- */
@media (max-width: 1140px) {
    .lb-reward-in { grid-template-columns: 1fr; }
    .lb-prize { min-width: 0; }
}
@media (max-width: 1000px) {
    .lb-layout { grid-template-columns: 1fr; margin-top: 3.6rem; }
    .lb-side { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lb-clans { grid-row: span 2; }
    .lb-controls { justify-content: center; }
}
@media (max-width: 640px) {
    .lb-hide-sm { display: none; }
    .lb-hero-meta { gap: 0.45rem; }
    .lb-chip { height: 34px; padding: 0 0.75rem; font-size: 0.78rem; }
    .lb-reward-in { padding: 1.3rem 1.1rem 1.1rem; gap: 1.3rem; }
    .lb-reward-head { flex-direction: column; align-items: flex-start; gap: 0.9rem; }
    .lb-reward-ico { width: 56px; height: 56px; }
    .lb-reward-ico svg { width: 30px; height: 30px; }
    .lb-reward-title { font-size: 1.2rem; }
    .lb-reward-head p { font-size: 0.86rem; }
    .lb-prizes { grid-template-columns: 1fr; gap: 0.9rem; }
    .lb-reward-foot { align-items: flex-start; font-size: 0.78rem; }
    .lb-foot-sq { margin-top: 0.4rem; }

    .lb-board { padding-top: 2.6rem; }
    .lb-controls { flex-direction: column; align-items: stretch; gap: 0.7rem; }
    .lb-modes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .lb-modes .tab { justify-content: center; height: 38px; padding: 0 0.2rem; font-size: 0.76rem; }
    .lb-modes .tab svg { display: none; }
    .lb-period { display: flex; }
    .lb-period-btn { flex: 1; padding: 0 0.5rem; }

    .lb-stage { margin-top: 1.8rem; }
    .lb-podium { gap: 0.4rem; }
    .lb-pod--1 { --ped: 176px; }
    .lb-pod--2 { --ped: 146px; }
    .lb-pod--3 { --ped: 124px; }
    .lb-pod--1::before { top: -10px; width: 220px; height: calc(100% - var(--ped) + 30px); }
    .lb-crown { width: 40px; height: 30px; margin-bottom: 0.4rem; }
    .lb-tag { flex-direction: column; gap: 0.25rem; padding: 0.3rem 0.45rem; font-size: 0.7rem; }
    .lb-pod-skin { height: 124px; margin-bottom: -5px; }
    .lb-pod--1 .lb-pod-skin { height: 150px; }
    .lb-banner.lb-pod-banner { height: 116px; }
    .lb-pod--1 .lb-banner.lb-pod-banner { height: 140px; }
    .lb-ped { --s: 7px; padding-top: 18px; }
    .lb-ped-num { width: 66px; height: 42px; }
    .lb-ped-num b { font-size: 1.6rem; }
    .lb-pod--1 .lb-ped-num { width: 76px; height: 50px; }
    .lb-pod--1 .lb-ped-num b { font-size: 2rem; }
    .lb-ped-pts b, .lb-pod--1 .lb-ped-pts b { font-size: 0.9rem; }
    .lb-ped-pts small { display: block; margin: 0.25rem 0 0; font-size: 0.56rem; }
    .lb-ped-sub { display: none; }
    .lb-sparks { left: 0; right: 0; }

    .lb-layout { margin-top: 3rem; }
    .lb-table-head { padding: 1rem; }
    .lb-search-wrap { width: 100%; }
    .lb-search { flex: 1; width: auto; }
    .lb-c-lv, .lb-c-s1, .lb-c-s2 { display: none; }
    .lb-table th, .lb-table td { padding: 0.62rem 0.45rem; }
    .lb-table th:first-child, .lb-table td:first-child { padding-left: 0.9rem; }
    .lb-table th:last-child, .lb-table td:last-child { padding-right: 0.9rem; }
    .lb-pos { width: 30px; }
    .lb-trend { width: 34px; font-size: 0.7rem; }
    .lb-who { gap: 0.55rem; }
    .lb-who .mc-head { width: 28px; height: 28px; border-radius: 6px; }
    .lb-name { font-size: 0.86rem; }
    .lb-pl { gap: 0.45rem; }
    .lb-meta { display: block; margin: 0.2rem 0 0 2.3rem; font-family: var(--font-mono); font-size: 0.66rem; color: var(--faint); white-space: nowrap; }
    .lb-pts b { font-size: 0.86rem; }
    .lb-bar { width: 58px; }
    .lb-me { gap: 0.6rem; margin: 0.4rem 0.5rem 0.6rem; padding: 0.55rem 0.7rem; }
    .lb-me-pos { min-width: 0; font-size: 1rem; }
    .lb-me .mc-head { width: 30px; height: 30px; }
    .lb-me-who { flex: 1; min-width: 0; }
    .lb-me-prog, .lb-me-btn { display: none; }

    .lb-side { grid-template-columns: 1fr; }
    .lb-clans { grid-row: auto; }
    .lb-cta-in { padding: 1.7rem 1.2rem; }
    .lb-cta .play-btn--lg { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .lb-chip--count svg, .lb-crown, .lb-pod--1::before, .lb-sparks i { animation: none; }
    .lb-sparks { display: none; }
    .lb-swap, .lb-pod { transition: none; }
}

/* ===== yardim.css ===== */
/* =========================================================
   Yardım Merkezi (yardim.html) — önek: hc-
   ========================================================= */
.hc-page { padding-bottom: 2rem; }
.hc-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hc-page mark { padding: 0 2px; border-radius: 3px; color: #fff; background: rgba(255, 138, 61, 0.3); box-shadow: inset 0 -2px 0 #ff8a3d; }
.hc-page code { padding: 0.08rem 0.38rem; border-radius: 5px; font-family: var(--font-mono); font-size: 0.86em; color: #ffd3b0; background: rgba(255, 255, 255, 0.07); }
.hc-page .is-hidden { display: none !important; }

/* ---------- Hero + arama ---------- */
.hc-hero { padding-bottom: 2rem; }
.hc-search-wrap { max-width: 780px; margin: 2.2rem auto 0; }
.hc-search {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    height: 70px;
    transition: filter 0.25s var(--ease);
}
.hc-search::before, .hc-search::after { content: ''; position: absolute; z-index: -1; clip-path: var(--px-lg); pointer-events: none; }
.hc-search::before { inset: 0; background: linear-gradient(180deg, rgba(255, 196, 150, 0.75), rgba(221, 99, 32, 0.55)); transition: background 0.25s var(--ease); }
.hc-search::after {
    inset: 2px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent 40%),
        repeating-conic-gradient(rgba(255, 255, 255, 0.018) 0 25%, transparent 0 50%) 0 0 / 6px 6px,
        #0a1222;
}
.hc-search:focus-within { filter: drop-shadow(0 0 18px rgba(255, 138, 61, 0.45)); }
.hc-search:focus-within::before { background: linear-gradient(180deg, #ffe2cc, #ff8a3d); }
.hc-search-ico { position: absolute; left: 1.4rem; width: 24px; height: 24px; color: #ffb07a; pointer-events: none; }
.hc-search-input {
    width: 100%;
    height: 100%;
    padding: 0 6.5rem 0 3.9rem;
    border: 0;
    background: transparent;
    color: #fff;
    font: inherit;
    font-size: 1.08rem;
    font-weight: 500;
    outline: none;
}
.hc-search-input::placeholder { color: #7482a0; }
.hc-search-input::-webkit-search-cancel-button { display: none; }
.hc-search-clear {
    position: absolute;
    right: 3.6rem;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 8px;
    color: var(--muted);
    background: rgba(255, 255, 255, 0.06);
    cursor: pointer;
}
.hc-search-clear[hidden] { display: none; }
.hc-search-clear:hover { color: #fff; background: rgba(255, 255, 255, 0.12); }
.hc-search-clear svg { width: 14px; height: 14px; }
.hc-kbd {
    position: absolute;
    right: 1.3rem;
    min-width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    font-weight: 600;
    color: #ffd3b0;
    background: rgba(255, 138, 61, 0.1);
    border: 1px solid rgba(255, 176, 122, 0.35);
    border-bottom-width: 3px;
    border-radius: 6px;
}
.hc-search-status { min-height: 1.3em; margin: 0.85rem 0 0; font-size: 0.86rem; color: var(--muted); text-shadow: 0 1px 2px rgba(5, 10, 20, 0.9), 0 0 18px rgba(5, 10, 20, 0.85); }
.hc-search-status b { color: #fff; }
.hc-search-status a { margin-left: 0.4rem; color: #ffb07a; font-weight: 600; text-decoration: none; }
.hc-chips { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 0.45rem; margin-top: 0.4rem; }
.hc-chips-k { margin-right: 0.2rem; font-size: 0.78rem; font-weight: 600; color: var(--faint); text-shadow: 0 1px 2px rgba(5, 10, 20, 0.9); }
.hc-chip {
    height: 32px;
    padding: 0 0.85rem;
    border: 1px solid rgba(255, 176, 122, 0.2);
    border-radius: 8px;
    background: rgba(8, 14, 27, 0.9);
    color: var(--text);
    font: inherit;
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    transition: border-color 0.2s var(--ease), color 0.2s var(--ease), background 0.2s var(--ease);
}
.hc-chip:hover, .hc-chip.is-active { color: #ffd3b0; border-color: rgba(255, 138, 61, 0.65); background: rgba(40, 22, 14, 0.95); }

/* ---------- Sistem durumu ---------- */
.hc-status-wrap { margin-top: 0.5rem; margin-bottom: 1rem; }
.hc-status {
    position: relative;
    padding: 1.35rem 1.5rem 1.5rem;
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(52, 211, 153, 0.05), transparent 45%), rgba(8, 14, 27, 0.93);
    border: 1px solid var(--line);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}
.hc-status-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1.1rem; }
.hc-status-light {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    clip-path: var(--px-sm);
    background: rgba(52, 211, 153, 0.13);
}
.hc-status-light i { width: 14px; height: 14px; background: #34d399; box-shadow: 0 0 14px rgba(52, 211, 153, 0.9); animation: hc-blink 2.4s steps(2, jump-none) infinite; }
.hc-status-txt h2 { margin: 0; font-family: var(--font-brand); font-size: 1.28rem; font-weight: 700; letter-spacing: 0.02em; color: #fff; }
.hc-status-txt p { margin: 0.25rem 0 0; font-size: 0.84rem; color: var(--muted); }
.hc-status-txt p b { font-family: var(--font-mono); font-weight: 600; color: #fff; }
.hc-status-uptime { display: flex; flex-direction: column; align-items: flex-end; }
.hc-status-uptime b { font-family: var(--font-mono); font-size: 1.45rem; font-weight: 600; color: #6ee7b7; }
.hc-status-uptime small { font-size: 0.74rem; color: var(--faint); }
.hc-services {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 1px;
    margin: 1.2rem 0 0;
    padding: 0;
    list-style: none;
    overflow: hidden;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.07);
}
.hc-svc { display: flex; flex-direction: column; gap: 0.3rem; padding: 1rem 1.05rem 1.05rem; background: #0a1222; }
.hc-svc-top { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 0.55rem; }
.hc-svc-top b { font-size: 0.9rem; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hc-svc-top em { grid-column: 2; font-style: normal; font-size: 0.76rem; font-weight: 600; color: #6ee7b7; }
.hc-dot { width: 9px; height: 9px; background: #34d399; box-shadow: 0 0 10px rgba(52, 211, 153, 0.8); }
.hc-svc.is-warn .hc-dot { background: #fbbf24; box-shadow: 0 0 10px rgba(251, 191, 36, 0.8); animation: hc-blink 1.6s steps(2, jump-none) infinite; }
.hc-svc.is-warn .hc-svc-top em { color: #fcd34d; }
.hc-svc-meta { padding-left: calc(9px + 0.55rem); font-size: 0.75rem; color: var(--faint); }
.hc-bars { display: grid; grid-template-columns: repeat(30, minmax(0, 1fr)); gap: 2px; height: 20px; margin-top: auto; padding-top: 0.55rem; box-sizing: content-box; }
.hc-bars i { background: rgba(52, 211, 153, 0.72); transition: transform 0.2s var(--ease); }
.hc-bars i.is-warn { background: #fbbf24; }
.hc-bars i:last-child { box-shadow: 0 0 8px rgba(52, 211, 153, 0.7); }
@keyframes hc-blink { 50% { opacity: 0.45; } }

/* ---------- Kategoriler ---------- */
.hc-cats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; }
.hc-cat {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 1.5rem 1.5rem 1.35rem;
    overflow: hidden;
    border-radius: 20px;
    background: rgba(9, 15, 29, 0.93);
    border: 1px solid var(--line);
    transition: border-color 0.25s var(--ease), transform 0.25s var(--ease), opacity 0.25s var(--ease);
}
.hc-cat::before { content: ''; position: absolute; left: 1.5rem; right: 1.5rem; top: 0; height: 2px; background: linear-gradient(90deg, #ff8a3d, rgba(94, 234, 212, 0.6), transparent); opacity: 0.35; transition: opacity 0.25s var(--ease); }
.hc-cat:hover { border-color: rgba(255, 138, 61, 0.35); transform: translateY(-3px); }
.hc-cat:hover::before { opacity: 1; }
.hc-page .hc-cats .hc-cat.is-dim { transform: none; border-color: var(--line); }
.hc-cat.is-dim > * { opacity: 0.32; filter: grayscale(0.6); transition: opacity 0.25s var(--ease); }
.hc-cat.is-dim .hc-cat-links { border-top-color: transparent; }
.hc-cat-head { display: flex; align-items: center; gap: 1rem; }
.hc-pix, .hc-cc-ico {
    position: relative;
    isolation: isolate;
    flex-shrink: 0;
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    clip-path: var(--px-sm);
    color: #ffb07a;
    background: rgba(255, 176, 122, 0.45);
}
.hc-pix::before, .hc-cc-ico::before { content: ''; position: absolute; inset: 2px; z-index: -1; clip-path: var(--px-sm); background: linear-gradient(180deg, #2a1a14, #120f16); }
.hc-pix svg, .hc-cc-ico svg { width: 28px; height: 28px; }
.hc-cat h3 { margin: 0; font-family: var(--font-brand); font-size: 1.1rem; font-weight: 700; letter-spacing: 0.02em; color: #fff; }
.hc-cat-head small { display: block; margin-top: 0.2rem; font-size: 0.78rem; color: var(--faint); }
.hc-cat-head small b { font-family: var(--font-mono); color: #ffb07a; }
.hc-cat > p { margin: 1rem 0 0.9rem; font-size: 0.9rem; line-height: 1.55; color: var(--muted); }
.hc-cat-links { flex: 1; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.hc-cat-links a {
    display: flex;
    align-items: baseline;
    gap: 0.65rem;
    padding: 0.62rem 0;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.07);
    font-size: 0.9rem;
    color: var(--text);
    text-decoration: none;
    transition: color 0.2s var(--ease), transform 0.2s var(--ease);
}
.hc-cat-links a::before { content: ''; flex-shrink: 0; width: 6px; height: 6px; transform: translateY(-2px); background: #ff8a3d; box-shadow: 0 0 6px rgba(255, 138, 61, 0.6); }
.hc-cat-links a:hover { color: #ffd3b0; transform: translateX(3px); }
.hc-cat-more { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 1rem; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.02em; color: #ffb07a; text-decoration: none; }
.hc-cat-more span { transition: transform 0.2s var(--ease); }
.hc-cat-more:hover span { transform: translateX(4px); }

/* ---------- Popüler + SSS ---------- */
.hc-read-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 2.5rem; align-items: start; }
.hc-read-grid.is-single { grid-template-columns: minmax(0, 1fr); max-width: 860px; margin: 0 auto; }
.hc-col-head { margin-bottom: 1.2rem; }
.hc-col-title {
    margin: 0.6rem 0 0;
    font-family: var(--font-brand);
    font-size: clamp(1.5rem, 2.6vw, 1.9rem);
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 1.15;
    background: linear-gradient(180deg, #fff, #ffcfae);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.hc-pop-list { margin: 0; padding: 0; list-style: none; overflow: hidden; border-radius: 18px; background: rgba(8, 14, 27, 0.93); border: 1px solid var(--line); }
.hc-pop-list li + li { border-top: 1px solid var(--line); }
.hc-pop { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 0.9rem; padding: 0.95rem 1.15rem; color: inherit; text-decoration: none; transition: background 0.2s var(--ease); }
.hc-pop:hover { background: rgba(255, 138, 61, 0.06); }
.hc-pop-n {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    clip-path: var(--px-sm);
    font-family: var(--font-mono);
    font-size: 0.95rem;
    font-weight: 600;
    color: #ffb07a;
    background: rgba(255, 138, 61, 0.1);
}
.hc-pop-list li:first-child .hc-pop-n { color: #2a1204; background: linear-gradient(180deg, #ffb87e, #ff8a3d); }
.hc-pop-body { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.hc-pop-body .hc-t { font-size: 0.95rem; font-weight: 600; line-height: 1.4; color: #fff; }
.hc-pop-body small { font-size: 0.76rem; color: var(--faint); }
.hc-pop-cat { font-weight: 600; color: #99f6e4; }
.hc-pop-go { color: var(--faint); transition: transform 0.2s var(--ease), color 0.2s var(--ease); }
.hc-pop:hover .hc-pop-go { color: #ffb07a; transform: translateX(4px); }
.hc-tip {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    margin-top: 1rem;
    padding: 1rem 1.1rem;
    border-radius: 14px;
    background: linear-gradient(rgba(94, 234, 212, 0.07), rgba(94, 234, 212, 0.07)), #0a1222;
    border: 1px solid rgba(94, 234, 212, 0.24);
}
.hc-tip-ico { flex-shrink: 0; width: 22px; height: 22px; color: #5eead4; }
.hc-tip-ico svg { width: 100%; height: 100%; }
.hc-tip p { margin: 0; font-size: 0.88rem; line-height: 1.6; color: var(--muted); }
.hc-tip b { color: #fff; }
.hc-faq { max-width: none; }
.hc-faq summary > span { flex: 1; }
.hc-faq .faq-a a { color: #ffb07a; font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(255, 176, 122, 0.35); }
.hc-faq .faq-a a:hover { color: #ffd3b0; border-color: #ffd3b0; }

.hc-empty {
    max-width: 620px;
    margin: 0 auto;
    padding: 2.6rem 1.5rem;
    text-align: center;
    border-radius: 20px;
    background: rgba(8, 14, 27, 0.93);
    border: 1px dashed rgba(255, 176, 122, 0.35);
}
.hc-empty-ico { display: inline-block; width: 56px; height: 56px; color: #ffb07a; }
.hc-empty-ico svg { width: 100%; height: 100%; }
.hc-empty h3 { margin: 1rem 0 0.5rem; font-family: var(--font-brand); font-size: 1.25rem; color: #fff; }
.hc-empty p { margin: 0 auto 1.5rem; max-width: 420px; font-size: 0.92rem; line-height: 1.6; color: var(--muted); }

/* ---------- İletişim ---------- */
.hc-contact-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; }
.hc-cc {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 1.8rem 1.6rem 1.6rem;
    border-radius: 20px;
    background: rgba(9, 15, 29, 0.93);
    border: 1px solid var(--line);
}
.hc-cc--main {
    border-color: rgba(255, 138, 61, 0.42);
    background: radial-gradient(ellipse 80% 60% at 20% 0%, rgba(255, 138, 61, 0.2), transparent 70%), rgba(10, 15, 28, 0.95);
    box-shadow: 0 0 0 1px rgba(255, 138, 61, 0.08), 0 24px 60px rgba(0, 0, 0, 0.4);
}
.hc-cc-badge { position: absolute; top: 1.3rem; right: 1.3rem; }
.hc-cc--main .hc-cc-ico { color: #2a1204; background: #ffd3b0; }
.hc-cc--main .hc-cc-ico::before { background: linear-gradient(180deg, #ffb87e, #ff8a3d 55%, #ea6420); }
.hc-cc-ico--discord { color: #5eead4; background: rgba(94, 234, 212, 0.45); }
.hc-cc-ico--discord::before { background: linear-gradient(180deg, #0f2a2a, #0b1720); }
.hc-cc-ico--discord svg { width: 26px; height: 26px; }
.hc-cc h3 { margin: 1.1rem 0 0.45rem; font-family: var(--font-brand); font-size: 1.22rem; font-weight: 700; letter-spacing: 0.02em; color: #fff; }
.hc-cc h3 code { font-size: 0.78em; letter-spacing: 0; }
.hc-cc > p { flex: 1; margin: 0; font-size: 0.92rem; line-height: 1.6; color: var(--muted); }
.hc-mail { display: block; margin-top: 0.35rem; font-family: var(--font-mono); font-size: 0.92rem; font-weight: 600; color: #ffd3b0; }
.hc-cc-facts { width: 100%; margin: 1.2rem 0 1.4rem; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.hc-cc-facts li { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.6rem 0; border-bottom: 1px solid var(--line); font-size: 0.84rem; }
.hc-cc-facts span { color: var(--faint); }
.hc-cc-facts b { display: inline-flex; align-items: center; gap: 0.45rem; font-weight: 600; color: #fff; }
.hc-cc-facts b .live-dot + span { font-family: var(--font-mono); }
.hc-cc .btn-ghost-px { border: 0; cursor: pointer; }

/* ---------- Duyarlı ---------- */
@media (max-width: 1000px) {
    .hc-services { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .hc-svc:last-child { grid-column: span 2; }
    .hc-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hc-read-grid { grid-template-columns: minmax(0, 1fr); gap: 3rem; }
    .hc-contact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hc-cc--main { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
    .hc-search { height: 58px; }
    .hc-search-ico { left: 1.05rem; width: 20px; height: 20px; }
    .hc-search-input { padding: 0 3.2rem 0 3.1rem; font-size: 0.95rem; }
    .hc-search-clear { right: 0.8rem; }
    .hc-kbd { display: none; }
    .hc-chips { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; margin-inline: -1rem; padding: 0.2rem 1rem 0.4rem; scrollbar-width: none; }
    .hc-chips::-webkit-scrollbar { display: none; }
    .hc-chip { flex-shrink: 0; }
    .hc-status { padding: 1.1rem 1rem 1.1rem; }
    .hc-status-head { grid-template-columns: auto minmax(0, 1fr); gap: 0.85rem; }
    .hc-status-light { width: 40px; height: 40px; }
    .hc-status-txt h2 { font-size: 1.08rem; }
    .hc-status-uptime { grid-column: 1 / -1; flex-direction: row; align-items: baseline; gap: 0.5rem; padding-top: 0.8rem; border-top: 1px solid var(--line); }
    .hc-status-uptime b { font-size: 1.1rem; }
    .hc-services { grid-template-columns: minmax(0, 1fr); }
    .hc-svc:last-child { grid-column: auto; }
    .hc-svc { padding: 0.85rem 0.95rem; }
    .hc-bars { height: 14px; gap: 1.5px; }
    .hc-cats { grid-template-columns: minmax(0, 1fr); }
    .hc-cat { padding: 1.3rem 1.2rem 1.2rem; }
    .hc-pop { grid-template-columns: 38px minmax(0, 1fr); gap: 0.8rem; padding: 0.9rem 1rem; }
    .hc-pop-n { width: 38px; height: 38px; font-size: 0.85rem; }
    .hc-pop-go { display: none; }
    .hc-contact-grid { grid-template-columns: minmax(0, 1fr); }
    .hc-cc { padding: 1.5rem 1.25rem 1.35rem; }
    .hc-cc-btn { align-self: stretch; }
}
@media (prefers-reduced-motion: reduce) {
    .hc-status-light i, .hc-svc.is-warn .hc-dot { animation: none; }
    .hc-cat, .hc-cat-links a, .hc-pop-go, .hc-search { transition: none; }
}

/* ===== yasal.css ===== */
/* =========================================================
   Yasal sayfalar — KVKK, Kullanım Şartları, Gizlilik
   Önek: .lg-   (bkz. _src/kvkk.main.html, kullanim-sartlari.main.html, gizlilik.main.html)
   ========================================================= */
.lg-page {
    --lg-w: 1150px;
    --lg-paper: rgba(8, 13, 25, 0.95);
    --lg-body: #cfd5e4;
    overflow-x: clip;
}

/* ---------- Başlık alanı ---------- */
.lg-page .page-hero { padding-bottom: 2.2rem; }
.lg-page .page-lead { max-width: 600px; }
.lg-meta { display: flex; justify-content: center; flex-wrap: wrap; gap: 0.5rem; margin: 1.6rem 0 0; padding: 0; list-style: none; }
.lg-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    height: 34px;
    padding: 0 0.85rem;
    border-radius: 9px;
    font-size: 0.8rem;
    color: var(--muted);
    background: rgba(8, 14, 27, 0.92);
    border: 1px solid var(--line);
    white-space: nowrap;
}
.lg-chip svg { width: 14px; height: 14px; flex-shrink: 0; color: #ffb07a; }
.lg-chip b { font-weight: 600; color: #fff; }
.lg-chip--teal svg { color: #5eead4; }

.lg-switch { margin-top: 1.3rem; }
.lg-switch .tab { display: inline-flex; align-items: center; gap: 0.45rem; text-decoration: none; }
.lg-switch .tab svg { width: 15px; height: 15px; opacity: 0.8; }

/* ---------- Üst bant: örnek metin uyarısı + Kısaca ---------- */
.lg-shell { max-width: var(--lg-w); margin: 0 auto; padding: 0 1.5rem; }
.lg-sample {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.85rem 1.1rem;
    border-radius: 14px;
    background: rgba(30, 17, 8, 0.95);
    border: 1px dashed rgba(255, 138, 61, 0.6);
    font-size: 0.9rem;
    line-height: 1.55;
    color: #ffe2cc;
}
.lg-sample svg { width: 20px; height: 20px; flex-shrink: 0; color: #ff9a52; }
.lg-sample p { margin: 0; flex: 1; }
.lg-tag {
    flex-shrink: 0;
    display: inline-grid;
    place-items: center;
    height: 24px;
    padding: 0 0.6rem;
    font-family: var(--font-mono);
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: #2a1204;
    background: #ff9a52;
    clip-path: var(--px-sm);
}

.lg-tldr {
    margin-top: 1rem;
    padding: 1.7rem 1.8rem 1.8rem;
    background:
        radial-gradient(ellipse 60% 80% at 0% 0%, rgba(255, 138, 61, 0.13), transparent 60%),
        rgba(8, 14, 27, 0.95);
}
.lg-tldr-head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 0.8rem 2rem; margin-bottom: 1.3rem; }
.lg-kicker { display: block; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.22em; color: #f2b48c; }
.lg-tldr-title { margin: 0.35rem 0 0; font-family: var(--font-brand); font-size: 1.75rem; font-weight: 700; line-height: 1.1; letter-spacing: 0.02em; color: #fff; }
.lg-tldr-note { max-width: 380px; margin: 0; font-size: 0.84rem; line-height: 1.55; color: var(--muted); }
.lg-tldr-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; margin: 0; padding: 0; list-style: none; }
.lg-tldr-item { display: flex; align-items: flex-start; gap: 0.9rem; padding: 1.05rem 1.1rem; border-radius: 14px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--line); }
.lg-tldr-item b { display: block; margin: 0.1rem 0 0.25rem; font-size: 0.96rem; font-weight: 600; color: #fff; }
.lg-tldr-item p { margin: 0; font-size: 0.88rem; line-height: 1.6; color: #c3cada; }
.lg-tldr-item a { color: #ffb07a; }

/* Piksel köşeli ikon kutusu */
.lg-ico {
    position: relative;
    isolation: isolate;
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    color: #ffd3b0;
    background: rgba(255, 138, 61, 0.55);
    clip-path: var(--px-sm);
}
.lg-ico::before { content: ''; position: absolute; inset: 1.5px; z-index: -1; background: linear-gradient(180deg, #2a1a10, #140d0a); clip-path: var(--px-sm); }
.lg-ico svg { width: 18px; height: 18px; }
.lg-ico--teal { color: #99f6e4; background: rgba(94, 234, 212, 0.5); }
.lg-ico--teal::before { background: linear-gradient(180deg, #0f2a2a, #0a1719); }

/* ---------- Düzen ---------- */
.lg-layout { max-width: var(--lg-w); grid-template-columns: 262px minmax(0, 1fr); gap: 1.75rem; margin-top: 1.75rem; }
.lg-main { min-width: 0; }

/* İçindekiler */
.lg-side.side-sticky { top: 96px; z-index: 5; }
.lg-toc { overflow: hidden; border-radius: 18px; background: rgba(8, 14, 27, 0.95); border: 1px solid var(--line); }
.lg-toc-sum { display: block; padding: 1.1rem 1.15rem 1rem; list-style: none; border-bottom: 1px solid var(--line); cursor: default; }
.lg-toc-sum::-webkit-details-marker { display: none; }
.lg-toc-row { display: flex; align-items: center; gap: 0.6rem; }
.lg-toc-label { font-family: var(--font-brand); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: #ffb07a; }
.lg-toc-current { display: none; }
.lg-toc-chev { display: none; }
.lg-pct { margin-left: auto; font-family: var(--font-mono); font-size: 0.74rem; font-weight: 600; color: #fff; }

/* Piksel okuma çubuğu: 6px dolu + 2px boşluk segmentler */
.lg-bar { position: relative; height: 8px; margin-top: 0.75rem; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.1) 0 6px, transparent 6px 8px); }
.lg-bar-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: repeating-linear-gradient(90deg, #ff8a3d 0 6px, transparent 6px 8px); filter: drop-shadow(0 0 5px rgba(255, 138, 61, 0.75)); transition: width 0.15s linear; }
.lg-bar-fill::after { content: ''; position: absolute; right: 2px; top: 0; bottom: 0; width: 6px; background: #ffe2cc; }
.lg-bar-fill[style*="width: 0px"]::after { display: none; }

.lg-toc-list { margin: 0; padding: 0.55rem; list-style: none; max-height: calc(100vh - 290px); overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(255, 138, 61, 0.35) transparent; }
.lg-toc-list a {
    position: relative;
    display: flex;
    gap: 0.65rem;
    padding: 0.5rem 0.65rem;
    border-radius: 9px;
    font-size: 0.86rem;
    line-height: 1.4;
    color: var(--muted);
    text-decoration: none;
    transition: color 0.2s var(--ease), background 0.2s var(--ease);
}
.lg-toc-list a:hover { color: #fff; background: rgba(255, 255, 255, 0.04); }
.lg-toc-n { flex-shrink: 0; min-width: 1.35rem; padding-top: 0.08rem; font-family: var(--font-mono); font-size: 0.72rem; font-weight: 600; color: var(--faint); transition: color 0.2s var(--ease); }
.lg-toc-list a.is-read .lg-toc-n { color: #5eead4; }
.lg-toc-list a.is-active { color: #ffe2cc; background: rgba(255, 138, 61, 0.11); }
.lg-toc-list a.is-active .lg-toc-n { color: #ff9a52; }
.lg-toc-list a.is-active::before { content: ''; position: absolute; left: -0.55rem; top: 0.55rem; bottom: 0.55rem; width: 3px; background: #ff8a3d; box-shadow: 0 0 10px rgba(255, 138, 61, 0.8); }
.lg-toc-foot { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; padding: 0.8rem 1.15rem; border-top: 1px solid var(--line); font-size: 0.74rem; color: var(--faint); }
.lg-mini-btn { display: inline-flex; align-items: center; gap: 0.4rem; height: 30px; padding: 0 0.7rem; border: 1px solid var(--line-strong); border-radius: 8px; background: rgba(255, 255, 255, 0.03); color: var(--muted); font-size: 0.76rem; font-weight: 600; cursor: pointer; transition: color 0.2s var(--ease), border-color 0.2s var(--ease); }
.lg-mini-btn:hover { color: #ffd3b0; border-color: rgba(255, 138, 61, 0.45); }
.lg-mini-btn svg { width: 14px; height: 14px; }

/* ---------- Makale ---------- */
.lg-doc {
    padding: 2.7rem 3rem 2.9rem;
    border-radius: 22px;
    background: var(--lg-paper);
    border: 1px solid var(--line);
    font-size: 1.02rem;
    line-height: 1.8;
    color: var(--lg-body);
}
.lg-doc-intro { margin: 0 0 2.2rem; padding-bottom: 2rem; border-bottom: 1px solid var(--line); font-size: 1.06rem; color: #dde2ee; }
.lg-doc-intro p:last-child { margin-bottom: 0; }
.lg-doc p { max-width: 72ch; margin: 0 0 1.15rem; }
.lg-doc strong { color: #fff; font-weight: 600; }
.lg-doc a { color: #ffb07a; text-decoration: underline; text-decoration-color: rgba(255, 176, 122, 0.4); text-underline-offset: 3px; transition: color 0.2s var(--ease), text-decoration-color 0.2s var(--ease); }
.lg-doc a:hover { color: #ffd3b0; text-decoration-color: currentColor; }
.lg-doc code { padding: 0.08rem 0.35rem; border-radius: 5px; font-family: var(--font-mono); font-size: 0.86em; color: #ffe2cc; background: rgba(255, 255, 255, 0.06); }
.lg-sec + .lg-sec { margin-top: 2.6rem; padding-top: 2.4rem; border-top: 1px solid var(--line); }
.lg-sec > :last-child { margin-bottom: 0; }

.lg-doc h2 {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin: 0 0 1.15rem;
    font-family: var(--font-brand);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: 0.01em;
    color: #fff;
    scroll-margin-top: 104px;
}
.lg-doc h3 {
    position: relative;
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    margin: 1.9rem 0 0.6rem;
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1.4;
    color: #fff;
    scroll-margin-top: 104px;
}
.lg-num {
    flex-shrink: 0;
    display: inline-grid;
    place-items: center;
    min-width: 2.4rem;
    height: 2.1rem;
    padding: 0 0.5rem;
    font-family: var(--font-mono);
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0;
    color: #2a1204;
    background: linear-gradient(180deg, #ffb87e, #ff8a3d);
    clip-path: var(--px-sm);
}
.lg-doc h3 .lg-num { display: inline; min-width: 0; height: auto; padding: 0; font-size: 0.92rem; color: #ff9a52; background: none; clip-path: none; }

/* Başlık bağlantısı (JS ekler) */
.lg-anchor {
    position: relative;
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    display: inline-grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--faint);
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s var(--ease), color 0.2s var(--ease), background 0.2s var(--ease);
    align-self: center;
}
.lg-anchor svg { width: 16px; height: 16px; }
.lg-doc h2:hover .lg-anchor, .lg-doc h3:hover .lg-anchor, .lg-anchor:focus-visible, .lg-anchor.is-copied { opacity: 1; }
.lg-anchor:hover { color: #ffd3b0; background: rgba(255, 138, 61, 0.12); }
.lg-anchor:focus-visible { outline: 2px solid #5eead4; outline-offset: 1px; }
.lg-anchor::after {
    content: attr(data-tip);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 6px);
    transform: translate(-50%, 4px);
    padding: 0.3rem 0.55rem;
    border-radius: 6px;
    font-family: 'Inter', sans-serif;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0;
    white-space: nowrap;
    color: #04120c;
    background: #6ee7b7;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
}
.lg-anchor.is-copied { color: #6ee7b7; }
.lg-anchor.is-copied::after { opacity: 1; transform: translate(-50%, 0); }
@media (hover: none) { .lg-anchor { opacity: 0.55; } }

/* Listeler */
.lg-doc ul { margin: 0 0 1.3rem; padding: 0; list-style: none; }
.lg-doc ul > li { position: relative; max-width: 72ch; margin: 0.4rem 0; padding-left: 1.45rem; }
.lg-doc ul > li::before { content: ''; position: absolute; left: 0.25rem; top: 0.72em; width: 6px; height: 6px; background: #ff8a3d; box-shadow: 0 0 8px rgba(255, 138, 61, 0.55); }
.lg-doc ol.lg-steps { margin: 1rem 0 1.5rem; padding: 0; list-style: none; counter-reset: lgstep; }
.lg-steps > li { position: relative; max-width: 72ch; min-height: 2rem; margin: 0 0 0.9rem; padding-left: 3rem; counter-increment: lgstep; }
.lg-steps > li::before {
    content: counter(lgstep);
    position: absolute;
    left: 0;
    top: 0.1rem;
    width: 2rem;
    height: 2rem;
    display: grid;
    place-items: center;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    font-weight: 600;
    color: #ffd3b0;
    background: rgba(255, 138, 61, 0.14);
    box-shadow: inset 0 0 0 1px rgba(255, 138, 61, 0.45);
    clip-path: var(--px-sm);
}
.lg-steps > li b { color: #fff; }

/* Tanım listesi */
.lg-dl { display: grid; grid-template-columns: minmax(150px, 210px) minmax(0, 1fr); margin: 1.2rem 0 1.6rem; overflow: hidden; border-radius: 14px; border: 1px solid var(--line); }
.lg-dl dt, .lg-dl dd { margin: 0; padding: 0.85rem 1.1rem; border-top: 1px solid var(--line); }
.lg-dl dt:first-of-type, .lg-dl dt:first-of-type + dd { border-top: 0; }
.lg-dl dt { font-size: 0.9rem; font-weight: 600; line-height: 1.55; color: #fff; background: rgba(255, 255, 255, 0.03); }
.lg-dl dd { font-size: 0.96rem; line-height: 1.65; }
.lg-dl dd small { display: block; margin-top: 0.2rem; font-size: 0.82rem; color: var(--faint); }

/* Tablo */
.lg-table-wrap { margin: 1.2rem 0 1.6rem; overflow-x: auto; border-radius: 14px; border: 1px solid var(--line); background: rgba(5, 9, 18, 0.6); }
.lg-table { width: 100%; min-width: 620px; border-collapse: collapse; font-size: 0.9rem; line-height: 1.6; }
.lg-table th { padding: 0.8rem 1rem; text-align: left; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap; color: #ffb07a; background: rgba(255, 138, 61, 0.07); border-bottom: 1px solid rgba(255, 138, 61, 0.2); }
.lg-table td { padding: 0.85rem 1rem; vertical-align: top; color: #d3d8e6; border-bottom: 1px solid var(--line); }
.lg-table tr:last-child td { border-bottom: 0; }
.lg-table td:first-child { font-weight: 600; color: #fff; }
.lg-table tbody tr:nth-child(even) td { background: rgba(255, 255, 255, 0.018); }
.lg-yes, .lg-no, .lg-opt { display: inline-flex; align-items: center; gap: 0.35rem; font-weight: 600; white-space: nowrap; }
.lg-yes { color: #6ee7b7; }
.lg-no { color: #fca5a5; }
.lg-opt { color: #ffd3b0; }

/* Bilgi kutuları */
.lg-note {
    display: flex;
    align-items: flex-start;
    gap: 0.95rem;
    max-width: 78ch;
    margin: 1.5rem 0;
    padding: 1.05rem 1.2rem;
    border-radius: 14px;
    background: rgba(94, 234, 212, 0.07);
    border: 1px solid rgba(94, 234, 212, 0.28);
    font-size: 0.95rem;
    line-height: 1.7;
    color: #d6f5ef;
}
.lg-note p { max-width: none; margin: 0; }
.lg-note p + p { margin-top: 0.5rem; }
.lg-note b.lg-note-title { display: block; margin-bottom: 0.2rem; font-size: 0.98rem; color: #fff; }
.lg-note .lg-ico { width: 34px; height: 34px; }
.lg-note .lg-ico svg { width: 16px; height: 16px; }
.lg-note--warn { background: rgba(255, 138, 61, 0.08); border-color: rgba(255, 138, 61, 0.35); color: #ffe7d6; }
.lg-note--key { position: relative; overflow: hidden; background: linear-gradient(135deg, rgba(255, 138, 61, 0.14), rgba(94, 234, 212, 0.06)); border-color: rgba(255, 176, 122, 0.4); color: #fff1e6; }
.lg-note--key::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(#ff8a3d, #5eead4); }

/* Hak kartları (KVKK m.11 vb.) */
.lg-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.65rem; margin: 1.2rem 0 1.6rem; padding: 0; list-style: none; }
.lg-doc .lg-cards > li { display: flex; gap: 0.8rem; max-width: none; margin: 0; padding: 0.9rem 1rem; border-radius: 12px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--line); font-size: 0.93rem; line-height: 1.6; }
.lg-doc .lg-cards > li::before { content: none; }
.lg-key { flex-shrink: 0; width: 1.9rem; height: 1.9rem; display: grid; place-items: center; font-family: var(--font-mono); font-size: 0.8rem; font-weight: 600; color: #99f6e4; background: rgba(94, 234, 212, 0.1); box-shadow: inset 0 0 0 1px rgba(94, 234, 212, 0.35); clip-path: var(--px-sm); }

/* ---------- Alt kutu: iletişim + belgeler + yazdır ---------- */
.lg-foot {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: 2rem;
    margin-top: 1.25rem;
    padding: 1.9rem 2rem;
    border-radius: 22px;
    background:
        radial-gradient(ellipse 55% 90% at 100% 100%, rgba(255, 138, 61, 0.16), transparent 70%),
        rgba(8, 14, 27, 0.95);
    border: 1px solid rgba(255, 138, 61, 0.3);
}
.lg-foot-title { margin: 0.4rem 0 0.5rem; font-family: var(--font-brand); font-size: 1.45rem; font-weight: 700; line-height: 1.2; color: #fff; }
.lg-foot-main > p { max-width: 52ch; margin: 0; font-size: 0.93rem; line-height: 1.7; color: var(--muted); }
.lg-contact { display: grid; gap: 0.6rem; margin: 1.2rem 0 0; padding: 0; list-style: none; }
.lg-contact li { display: flex; align-items: center; gap: 0.85rem; padding: 0.7rem 0.85rem; border-radius: 12px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--line); }
.lg-contact small { display: block; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); }
.lg-contact b, .lg-contact a { display: block; font-size: 0.92rem; font-weight: 600; line-height: 1.45; color: #fff; text-decoration: none; }
.lg-contact a { font-family: var(--font-mono); font-size: 0.88rem; color: #ffd3b0; }
.lg-contact a:hover { color: #fff; }
.lg-contact .lg-ico { width: 34px; height: 34px; }
.lg-contact .lg-ico svg { width: 16px; height: 16px; }
.lg-foot-side h3 { margin: 0.2rem 0 0.8rem; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--faint); }
.lg-docs { display: grid; gap: 0.5rem; }
.lg-docs a { display: flex; align-items: center; gap: 0.8rem; padding: 0.75rem 0.9rem; border-radius: 12px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.025); color: inherit; text-decoration: none; transition: border-color 0.2s var(--ease), transform 0.2s var(--ease), background 0.2s var(--ease); }
.lg-docs a:hover { border-color: rgba(255, 138, 61, 0.45); transform: translateX(3px); }
.lg-docs a[aria-current] { border-color: rgba(255, 138, 61, 0.5); background: rgba(255, 138, 61, 0.1); }
.lg-docs b { display: block; font-size: 0.92rem; font-weight: 600; color: #fff; }
.lg-docs small { display: block; font-size: 0.78rem; color: var(--muted); }
.lg-docs .lg-here { margin-left: auto; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.12em; color: #ffb07a; }
.lg-docs .lg-go { margin-left: auto; color: var(--faint); transition: color 0.2s var(--ease); }
.lg-docs a:hover .lg-go { color: #ffd3b0; }
.lg-docs svg.lg-doc-ico { width: 18px; height: 18px; flex-shrink: 0; color: #ffb07a; }
.lg-foot-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.1rem; }
.lg-foot-actions .btn-gold, .lg-foot-actions .btn-ghost-px { flex: 1; min-width: 150px; height: 44px; border: 0; cursor: pointer; }
.lg-foot-actions svg { width: 16px; height: 16px; }

/* ---------- Yukarı çık ---------- */
.lg-top {
    position: fixed;
    right: 1.5rem;
    bottom: 1.5rem;
    z-index: 40;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    height: 44px;
    padding: 0 1rem 0 0.85rem;
    border: 0;
    color: #ffd3b0;
    background: rgba(255, 138, 61, 0.7);
    clip-path: var(--px-sm);
    font-family: var(--font-brand);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0.3s, filter 0.2s var(--ease);
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.5));
}
.lg-top::before { content: ''; position: absolute; inset: 1.5px; z-index: -1; background: #0a1222; clip-path: var(--px-sm); }
.lg-top svg { width: 16px; height: 16px; }
.lg-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.lg-top:hover { filter: brightness(1.15) drop-shadow(0 10px 20px rgba(0, 0, 0, 0.5)); }

/* ---------- Tablet ---------- */
@media (max-width: 1000px) {
    .lg-tldr-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lg-layout { grid-template-columns: minmax(0, 1fr); gap: 1rem; margin-top: 1.25rem; }

    /* İçindekiler: yapışkan açılır çubuk */
    .lg-side.side-sticky { position: sticky; top: 72px; z-index: 30; }
    .lg-toc { border-radius: 14px; background: rgba(8, 14, 27, 0.97); border-color: rgba(255, 138, 61, 0.3); box-shadow: 0 14px 40px rgba(0, 0, 0, 0.45); }
    .lg-toc-sum { padding: 0.8rem 1rem 0.75rem; border-bottom: 0; cursor: pointer; }
    .lg-toc[open] .lg-toc-sum { border-bottom: 1px solid var(--line); }
    .lg-toc-label { font-size: 0.72rem; }
    .lg-toc-current { display: block; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.84rem; font-weight: 500; color: #fff; }
    .lg-pct { margin-left: 0; }
    .lg-toc-chev { display: block; width: 16px; height: 16px; flex-shrink: 0; color: #ffb07a; transition: transform 0.25s var(--ease); }
    .lg-toc[open] .lg-toc-chev { transform: rotate(180deg); }
    .lg-bar { margin-top: 0.6rem; height: 6px; background-size: 8px 6px; }
    .lg-toc-list { max-height: 55vh; }
    .lg-toc-foot { display: none; }

    .lg-doc { padding: 2.2rem 2.2rem 2.4rem; }
    .lg-doc h2, .lg-doc h3 { scroll-margin-top: 150px; }
    .lg-foot { grid-template-columns: 1fr; }
}

/* ---------- Mobil ---------- */
@media (max-width: 640px) {
    .lg-page .page-hero { padding-bottom: 1.6rem; }
    .lg-meta { gap: 0.4rem; }
    .lg-chip { height: 30px; padding: 0 0.65rem; font-size: 0.74rem; }
    .lg-switch { display: flex; flex-wrap: nowrap; max-width: 100%; }
    .lg-switch .tab { flex: 1 1 auto; justify-content: center; height: 34px; padding: 0 0.6rem; font-size: 0.78rem; }
    .lg-switch .tab svg { display: none; }
    .lg-shell { padding: 0 1rem; }
    .lg-sample { align-items: flex-start; flex-wrap: wrap; gap: 0.6rem 0.8rem; padding: 0.85rem 0.95rem; font-size: 0.86rem; }
    .lg-sample p { flex-basis: 100%; }
    .lg-tldr { padding: 1.3rem 1.1rem 1.2rem; }
    .lg-tldr-title { font-size: 1.45rem; }
    .lg-tldr-list { grid-template-columns: 1fr; gap: 0.55rem; }
    .lg-tldr-item { padding: 0.9rem 0.95rem; }

    .lg-doc { padding: 1.6rem 1.2rem 1.8rem; border-radius: 18px; font-size: 0.99rem; line-height: 1.78; }
    .lg-doc-intro { font-size: 1rem; margin-bottom: 1.8rem; padding-bottom: 1.6rem; }
    .lg-sec + .lg-sec { margin-top: 2.1rem; padding-top: 1.9rem; }
    .lg-doc h2 { gap: 0.65rem; font-size: 1.22rem; }
    .lg-num { min-width: 2.1rem; height: 1.9rem; font-size: 0.84rem; }
    .lg-doc h3 { font-size: 1.02rem; }
    .lg-dl { grid-template-columns: 1fr; }
    .lg-dl dt { padding-bottom: 0.3rem; }
    .lg-dl dd { padding-top: 0.2rem; border-top: 0; background: rgba(255, 255, 255, 0.03); }
    .lg-dl dt { background: rgba(255, 255, 255, 0.03); }
    .lg-cards { grid-template-columns: 1fr; }
    .lg-note { gap: 0.75rem; padding: 0.95rem 1rem; font-size: 0.92rem; }
    .lg-note .lg-ico { width: 30px; height: 30px; }

    /* Tablolar: JS başlıkları data-label olarak ekler, satırlar karta dönüşür */
    .lg-table-wrap:has(.is-stack) { overflow: visible; border: 0; background: none; }
    .lg-table.is-stack { min-width: 0; }
    .lg-table.is-stack thead { display: none; }
    .lg-table.is-stack, .lg-table.is-stack tbody, .lg-table.is-stack tr, .lg-table.is-stack td { display: block; width: 100%; }
    .lg-table.is-stack tr { margin-bottom: 0.6rem; overflow: hidden; border-radius: 12px; border: 1px solid var(--line); background: rgba(5, 9, 18, 0.6); }
    .lg-table.is-stack tbody tr:nth-child(even) td { background: none; }
    .lg-table.is-stack td { padding: 0.55rem 0.95rem; border-bottom: 1px solid var(--line); }
    .lg-table.is-stack td::before { content: attr(data-label); display: block; margin-bottom: 0.1rem; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #ffb07a; }
    .lg-table.is-stack td:first-child { padding-top: 0.75rem; font-size: 0.98rem; background: rgba(255, 138, 61, 0.07); }
    .lg-table.is-stack td:first-child::before { display: none; }

    .lg-foot { gap: 1.5rem; padding: 1.4rem 1.15rem; border-radius: 18px; }
    .lg-foot-title { font-size: 1.25rem; }
    .lg-contact a { word-break: break-all; }
    .lg-top { right: 1rem; bottom: 1rem; width: 44px; padding: 0; justify-content: center; }
    .lg-top span { display: none; }
}

/* ---------- Yazdırma ---------- */
@media print {
    body:has(.lg-page) { background: #fff !important; color: #000 !important; }
    body:has(.lg-page) .cosmos-bg,
    body:has(.lg-page) .site-header,
    body:has(.lg-page) .mobile-menu,
    body:has(.lg-page) .site-footer { display: none !important; }
    .lg-page .page-hero::before, .lg-page .breadcrumb, .lg-switch, .lg-side, .lg-top,
    .lg-foot-actions, .lg-anchor, .lg-foot-side { display: none !important; }
    .lg-page, .lg-page * {
        color: #000 !important;
        background: transparent !important;
        box-shadow: none !important;
        text-shadow: none !important;
        filter: none !important;
        -webkit-text-fill-color: currentColor !important;
    }
    .lg-page .reveal, .lg-page .reveal-scroll { opacity: 1 !important; transform: none !important; animation: none !important; }
    .lg-page .page-hero { padding: 0 0 1rem; text-align: left; }
    .lg-page .page-title { font-size: 24pt; }
    .lg-meta { justify-content: flex-start; }
    .lg-chip, .lg-sample, .lg-tldr, .lg-tldr-item, .lg-doc, .lg-dl, .lg-dl dt, .lg-dl dd, .lg-table-wrap, .lg-table th, .lg-table td, .lg-note, .lg-cards > li, .lg-foot, .lg-contact li { border-color: #bbb !important; }
    .lg-shell, .lg-layout { max-width: none; padding: 0; }
    .lg-layout { display: block; margin-top: 1rem; }
    .lg-doc { padding: 0; border: 0; font-size: 10.5pt; line-height: 1.6; }
    .lg-ico, .lg-num, .lg-key, .lg-tag { clip-path: none !important; }
    .lg-ico::before { display: none; }
    .lg-doc ul > li::before { background: #000 !important; }
    .lg-table { min-width: 0; }
    .lg-doc h2, .lg-doc h3 { break-after: avoid; }
    .lg-table tr, .lg-note, .lg-dl, .lg-tldr-item, .lg-cards > li { break-inside: avoid; }
    .lg-doc a { text-decoration: underline; }
    .lg-foot { display: block; margin-top: 1.5rem; padding: 1rem; border: 1px solid #bbb; }
}

/* İade listeleri: yapılır (✓) / yapılmaz (✕) */
.lg-doc ul.lg-list-ok, .lg-doc ul.lg-list-no { margin: 1rem 0 1.4rem; padding: 0; list-style: none; }
.lg-doc ul.lg-list-ok > li, .lg-doc ul.lg-list-no > li { position: relative; max-width: 72ch; margin: 0 0 0.7rem; padding: 0.75rem 1rem 0.75rem 3rem; border-radius: 12px; background: rgba(255, 255, 255, 0.025); border: 1px solid var(--line); }
.lg-doc ul.lg-list-ok > li::before, .lg-doc ul.lg-list-no > li::before { transform: none; box-shadow: none; position: absolute; left: 0.9rem; top: 0.8rem; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 6px; font-size: 0.8rem; font-weight: 800; }
.lg-doc ul.lg-list-ok > li::before { content: '✓'; color: #042f2e; background: #5eead4; }
.lg-doc ul.lg-list-no > li::before { content: '✕'; color: #fff; background: rgba(248, 113, 113, 0.75); }
.lg-doc ul.lg-list-ok > li { border-color: rgba(94, 234, 212, 0.22); }
.lg-doc ul.lg-list-no > li { border-color: rgba(248, 113, 113, 0.22); }

/* ===== yayincilar.css ===== */
/* =========================================================
   Yayıncılar & Medya (yayincilar.html) — önek: sm-
   ========================================================= */
.sm-page [hidden] { display: none !important; }
.sm-page code { font-family: var(--font-mono); font-size: 0.84em; color: #ffd3b0; background: rgba(255, 138, 61, 0.1); padding: 0.05rem 0.35rem; border-radius: 5px; }
.sm-page button.btn-gold { border: 0; cursor: pointer; }
html.sm-lock { overflow: hidden; }

/* Piksel ikonlar (platform işaretleri currentColor ile boyanır) */
.sm-pxi { display: block; width: 100%; height: 100%; }
.sm-px-a { fill: currentColor; }
.sm-pf { display: inline-block; flex-shrink: 0; width: 14px; height: 14px; }
.sm-pf--tw { color: #a970ff; }
.sm-pf--yt { color: #ff4e45; }
.sm-pf--kick { color: #53fc18; }
.sm-mini { display: block; margin: 0 0 0.65rem; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.2em; color: #f2b48c; }
.sm-dot { display: inline-block; width: 3px; height: 3px; background: var(--faint); }

/* Kapak kırpmaları: aynı görsellerden farklı kareler */
.sm-crop-a { object-position: 50% 40%; }
.sm-crop-b { object-position: 40% 30%; }
.sm-crop-c { object-position: 60% 55%; }
.sm-crop-d { object-position: 50% 30%; }
.sm-crop-e { object-position: 50% 45%; }
.sm-crop-f { object-position: 70% 50%; }
.sm-crop-g { object-position: 20% 70%; }
.sm-crop-h { object-position: 80% 60%; }
.sm-crop-i { object-position: 20% 30%; }

/* ---------- Hero ---------- */
.sm-onair {
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    height: 40px;
    padding: 0 1.1rem;
    font-size: 0.86rem;
    color: var(--text);
    text-decoration: none;
    background: rgba(248, 113, 113, 0.5);
    clip-path: var(--px-sm);
    transition: filter 0.2s var(--ease);
}
.sm-onair::before { content: ''; position: absolute; inset: 1px; z-index: -1; clip-path: var(--px-sm); background: rgba(8, 14, 27, 0.94); }
.sm-onair:hover { filter: brightness(1.15); }
.sm-onair b { color: #fff; font-weight: 700; }
.sm-rec { width: 9px; height: 9px; background: #f43f5e; box-shadow: 0 0 10px rgba(244, 63, 94, 0.9); animation: sm-blink 1.2s steps(2) infinite; }
.sm-onair-sep { width: 1px; height: 14px; background: var(--line-strong); }
.sm-onair-views { color: var(--muted); }
.sm-onair-arrow { color: #fca5a5; transition: transform 0.2s var(--ease); }
.sm-onair:hover .sm-onair-arrow { transform: translateX(3px); }
.sm-hero .page-title { margin-top: 1.1rem; }
.sm-hero-ghost { height: 60px; padding: 0 1.8rem; }
@keyframes sm-blink { 50% { opacity: 0.3; } }

.sm-hero-stats { display: grid; grid-template-columns: repeat(4, 1fr); max-width: 820px; margin: 2.8rem auto 0; overflow: hidden; border-radius: 18px; border: 1px solid var(--line); background: var(--glass-strong); }
.sm-hero-stats > div { display: flex; flex-direction: column-reverse; gap: 0.2rem; padding: 1.1rem 1rem; }
.sm-hero-stats > div + div { border-left: 1px solid var(--line); }
.sm-hero-stats dt { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); }
.sm-hero-stats dd { margin: 0; font-family: var(--font-brand); font-size: 1.5rem; font-weight: 700; color: #fff; }

/* ---------- Canlı yayınlar ---------- */
.sm-refresh { display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.5rem 0.85rem; border-radius: 10px; font-size: 0.8rem; color: var(--muted); background: var(--glass-strong); border: 1px solid var(--line); }
.sm-live { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 1.1rem; }
.sm-lcard { display: flex; flex-direction: column; min-width: 0; overflow: hidden; border-radius: 20px; background: var(--glass-strong); border: 1px solid var(--line); transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease), translate 0.25s var(--ease); }
.sm-lcard:hover { translate: 0 -3px; border-color: rgba(255, 138, 61, 0.35); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4); }
.sm-lcard--main { grid-row: span 2; }
.sm-thumb { position: relative; display: block; aspect-ratio: 16 / 7; overflow: hidden; background: #0a1222; }
.sm-lcard--main .sm-thumb { flex: 1; aspect-ratio: auto; min-height: 320px; }
.sm-thumb-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.sm-thumb::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5, 10, 20, 0.35) 0%, transparent 30%, transparent 60%, rgba(5, 10, 20, 0.75) 100%); pointer-events: none; }
.sm-lcard:hover .sm-thumb-img { transform: scale(1.04); }
.sm-livebadge {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    height: 26px;
    padding: 0 0.7rem;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    color: #fff;
    background: #e11d48;
    clip-path: var(--px-sm);
    animation: sm-onair 1.6s ease-in-out infinite;
}
.sm-livebadge i { width: 7px; height: 7px; background: #fff; animation: sm-blink 1.2s steps(2) infinite; }
@keyframes sm-onair { 50% { background: #fb4a6c; } }
.sm-thumb-pf { position: absolute; top: 14px; right: 14px; z-index: 2; width: 32px; height: 32px; padding: 8px; border-radius: 8px; background: rgba(5, 10, 20, 0.88); border: 1px solid rgba(255, 255, 255, 0.12); }
.sm-thumb-stats { position: absolute; left: 14px; bottom: 14px; z-index: 2; display: flex; gap: 0.45rem; }
.sm-viewers, .sm-uptime { display: inline-flex; align-items: center; gap: 0.4rem; height: 26px; padding: 0 0.6rem; border-radius: 7px; font-family: var(--font-mono); font-size: 0.74rem; color: #fff; background: rgba(5, 10, 20, 0.88); }
.sm-viewers svg { width: 14px; height: 14px; color: #fca5a5; }
.sm-viewers b { font-weight: 600; }
.sm-uptime { color: var(--muted); }
.sm-thumb-play { position: absolute; inset: 0; z-index: 2; width: 64px; height: 64px; margin: auto; padding: 20px 17px 20px 23px; color: #2a1204; background: rgba(255, 138, 61, 0.95); clip-path: var(--px-lg); opacity: 0; transform: scale(0.85); transition: opacity 0.25s var(--ease), transform 0.25s var(--ease); }
.sm-lcard:hover .sm-thumb-play, .sm-thumb:focus-visible .sm-thumb-play { opacity: 1; transform: none; }
.sm-lbody { display: flex; align-items: center; gap: 0.85rem; padding: 0.95rem 1.1rem; }
.sm-lhead { width: 40px; height: 40px; }
.sm-lcard--main .sm-lhead { width: 46px; height: 46px; }
.sm-lmeta { flex: 1; min-width: 0; }
.sm-ltitle { margin: 0; overflow: hidden; font-size: 0.95rem; font-weight: 700; line-height: 1.35; color: #fff; white-space: nowrap; text-overflow: ellipsis; }
.sm-lcard--main .sm-ltitle { font-size: 1.12rem; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.sm-lmeta p { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; margin: 0.25rem 0 0; font-size: 0.8rem; color: var(--muted); }
.sm-lmeta p b { color: #fff; }
.sm-watch { flex-shrink: 0; }
.sm-watch-ico { display: block; width: 9px; height: 9px; }

.sm-upcoming { display: grid; grid-template-columns: 220px minmax(0, 1fr); align-items: center; gap: 1.4rem; margin-top: 1.1rem; padding: 1.1rem 1.3rem; border-radius: 18px; background: var(--glass-strong); border: 1px solid var(--line); }
.sm-up-note { display: block; font-size: 0.82rem; line-height: 1.5; color: var(--muted); }
.sm-up-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.7rem; margin: 0; padding: 0; list-style: none; }
.sm-up { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; grid-template-areas: 'time head txt pf' 'btn btn btn btn'; align-items: center; gap: 0.7rem 0.65rem; padding: 0.75rem; border-radius: 14px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--line); }
.sm-up-time { grid-area: time; padding: 0.3rem 0.45rem; border-radius: 6px; font-family: var(--font-mono); font-size: 0.78rem; font-weight: 700; color: #ffb07a; background: rgba(255, 138, 61, 0.12); }
.sm-up .mc-head { grid-area: head; width: 34px; height: 34px; }
.sm-up-txt { grid-area: txt; min-width: 0; }
.sm-up-txt b { display: block; font-size: 0.88rem; color: #fff; }
.sm-up-txt small { display: block; overflow: hidden; font-size: 0.75rem; color: var(--muted); white-space: nowrap; text-overflow: ellipsis; }
.sm-up .sm-pf { grid-area: pf; }
.sm-remind { grid-area: btn; display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; height: 32px; border-radius: 8px; border: 1px solid var(--line-strong); background: transparent; color: var(--muted); font: inherit; font-size: 0.76rem; font-weight: 600; cursor: pointer; transition: background 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease); }
.sm-remind svg { width: 14px; height: 14px; }
.sm-remind:hover { color: #fff; border-color: rgba(255, 255, 255, 0.28); }
.sm-remind.is-on { color: #2a1204; background: #ffb07a; border-color: #ffb07a; }

/* ---------- Partner kartları ---------- */
.sm-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem; }
.sm-card { position: relative; min-width: 0; overflow: hidden; border-radius: 20px; background: var(--glass-strong); border: 1px solid var(--line); transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease), translate 0.25s var(--ease); }
.sm-card:hover { translate: 0 -3px; border-color: rgba(255, 138, 61, 0.3); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4); }
.sm-card-banner { position: relative; height: 88px; overflow: hidden; background: #0a1222; }
.sm-card-banner img { width: 100%; height: 100%; object-fit: cover; opacity: 0.6; transition: transform 0.6s var(--ease); }
.sm-card-banner::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 14, 27, 0.1), rgba(8, 14, 27, 0.95)); }
.sm-card:hover .sm-card-banner img { transform: scale(1.05); }
.sm-card-top { position: relative; z-index: 1; display: flex; align-items: flex-end; gap: 0.9rem; margin-top: -40px; padding: 0 1.2rem; }
.sm-card-avatar { position: relative; flex-shrink: 0; }
.sm-card-avatar .mc-head { width: 64px; height: 64px; border-radius: 12px; box-shadow: 0 0 0 3px #0b1426, 0 10px 24px rgba(0, 0, 0, 0.5); }
.sm-card.is-live .sm-card-avatar .mc-head { box-shadow: 0 0 0 3px #0b1426, 0 0 0 5px #e11d48, 0 10px 24px rgba(0, 0, 0, 0.5); animation: sm-ring 2s ease-in-out infinite; }
@keyframes sm-ring { 50% { box-shadow: 0 0 0 3px #0b1426, 0 0 0 5px #fb4a6c, 0 0 22px rgba(244, 63, 94, 0.55); } }
.sm-card-live { position: absolute; left: 50%; bottom: -9px; transform: translateX(-50%); padding: 0.12rem 0.4rem; border-radius: 4px; font-size: 0.55rem; font-weight: 800; letter-spacing: 0.12em; color: #fff; background: #e11d48; box-shadow: 0 0 0 2px #0b1426; }
.sm-card-id { min-width: 0; padding-bottom: 0.15rem; }
.sm-card-id h3 { margin: 0; overflow: hidden; font-family: var(--font-brand); font-size: 1.2rem; font-weight: 700; color: #fff; text-overflow: ellipsis; }
.sm-handle { display: flex; align-items: center; gap: 0.4rem; margin-top: 0.2rem; overflow: hidden; font-size: 0.78rem; color: var(--muted); white-space: nowrap; text-overflow: ellipsis; }
.sm-handle .sm-pf { width: 13px; height: 13px; }
.sm-card-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 1.15rem 1.2rem 0; border-radius: 12px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.02); }
.sm-card-stats > div { min-width: 0; padding: 0.6rem 0.7rem; }
.sm-card-stats > div + div { border-left: 1px solid var(--line); }
.sm-card-stats dt { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); }
.sm-card-stats dd { margin: 0.2rem 0 0; overflow: hidden; font-size: 0.84rem; font-weight: 700; color: #fff; white-space: nowrap; text-overflow: ellipsis; }
.sm-card-stats > div:first-child dd { font-family: var(--font-mono); font-size: 0.9rem; color: #ffd3b0; }
.sm-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; padding: 1rem 1.2rem 1.2rem; }
.sm-code { display: inline-flex; align-items: stretch; height: 36px; padding: 0; overflow: hidden; border-radius: 9px; border: 1px dashed rgba(255, 176, 122, 0.55); background: rgba(255, 138, 61, 0.08); color: inherit; font: inherit; cursor: pointer; transition: background 0.2s var(--ease), border-color 0.2s var(--ease); }
.sm-code:hover { background: rgba(255, 138, 61, 0.16); }
.sm-code-k { display: grid; place-items: center; padding: 0 0.5rem; font-size: 0.58rem; font-weight: 800; letter-spacing: 0.14em; color: #2a1204; background: #ffb07a; transition: background 0.2s; }
.sm-code-v { display: grid; place-items: center; padding: 0 0.65rem; font-family: var(--font-mono); font-size: 0.86rem; font-weight: 700; letter-spacing: 0.06em; color: #fff; }
.sm-code-l { display: grid; place-items: center; padding: 0 0.65rem; font-size: 0.72rem; font-weight: 600; color: #ffb07a; border-left: 1px dashed rgba(255, 176, 122, 0.35); }
.sm-code.is-copied { border-color: rgba(52, 211, 153, 0.7); background: rgba(16, 185, 129, 0.1); }
.sm-code.is-copied .sm-code-k { background: #34d399; }
.sm-code.is-copied .sm-code-l { color: #6ee7b7; }
.sm-social { display: flex; gap: 0.35rem; }
.sm-social a { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; color: var(--muted); background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line); transition: border-color 0.2s var(--ease), color 0.2s var(--ease); }
.sm-social a:hover { color: #fff; border-color: var(--line-strong); }
.sm-social svg { width: 16px; height: 16px; }

/* ---------- Yayıncı kodu ---------- */
.sm-code-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 440px; align-items: center; gap: 3.2rem; max-width: 1120px; margin: 0 auto; }
.sm-code-lead { margin: 1rem 0 0; font-size: 1rem; line-height: 1.7; color: #c6cedd; text-shadow: 0 1px 2px rgba(5, 10, 20, 0.9), 0 0 18px rgba(5, 10, 20, 0.85); }
.sm-how { display: grid; gap: 0.7rem; margin: 1.6rem 0 0; padding: 0; list-style: none; }
.sm-how li { display: flex; align-items: flex-start; gap: 0.95rem; padding: 0.95rem 1.05rem; border-radius: 14px; background: var(--glass-strong); border: 1px solid var(--line); }
.sm-how-n { display: grid; flex-shrink: 0; place-items: center; width: 34px; height: 34px; clip-path: var(--px-sm); font-family: var(--font-brand); font-weight: 700; color: #2a1204; background: linear-gradient(180deg, #ffb87e, #ff8a3d 60%, #dd6320); }
.sm-how b { font-size: 0.95rem; color: #fff; }
.sm-how p { margin: 0.2rem 0 0; font-size: 0.86rem; line-height: 1.5; color: var(--muted); }
.sm-how strong { color: #ffd3b0; }
.sm-code-note { display: flex; align-items: center; gap: 0.55rem; margin: 1.1rem 0 0; font-size: 0.84rem; color: #99f6e4; text-shadow: 0 1px 2px rgba(5, 10, 20, 0.9), 0 0 18px rgba(5, 10, 20, 0.85); }
.sm-code-note svg { flex-shrink: 0; width: 16px; height: 16px; }

.sm-checkout { position: relative; padding: 1.4rem; border-radius: 22px; background: rgba(8, 14, 27, 0.96); border: 1px solid rgba(255, 138, 61, 0.35); box-shadow: 0 0 0 1px rgba(255, 138, 61, 0.08), 0 30px 80px rgba(0, 0, 0, 0.45); }
.sm-checkout::before { content: ''; position: absolute; top: 0; left: 1.4rem; width: 110px; height: 3px; background: repeating-linear-gradient(90deg, #ff8a3d 0 6px, transparent 6px 10px); }
.sm-co-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.9rem; }
.sm-co-head .sm-mini { margin: 0; }
.sm-co-item { display: flex; align-items: center; gap: 0.85rem; padding: 0.75rem; border-radius: 14px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--line); }
.sm-co-thumb { width: 54px; height: 54px; object-fit: cover; border-radius: 10px; }
.sm-co-item b { display: block; font-size: 0.95rem; color: #fff; }
.sm-co-item small { font-size: 0.76rem; color: var(--faint); }
.sm-co-price { margin-left: auto; font-family: var(--font-mono); font-weight: 700; color: #fff; }
.sm-co-field { margin-top: 1.1rem; }
.sm-co-inrow { display: flex; gap: 0.5rem; }
.sm-co-inrow .input-group { flex: 1; min-width: 0; }
.sm-co-input { font-family: var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; }
.sm-co-input::placeholder { text-transform: none; letter-spacing: 0; }
.sm-co-apply { height: 48px; }
.sm-co-try { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; font-size: 0.76rem; color: var(--faint); }
.sm-co-try button { padding: 0.2rem 0.5rem; border-radius: 6px; border: 1px solid var(--line-strong); background: transparent; color: #ffd3b0; font-family: var(--font-mono); font-size: 0.72rem; cursor: pointer; }
.sm-co-try button:hover { border-color: rgba(255, 176, 122, 0.5); }
.sm-co-status { display: flex; align-items: center; gap: 0.75rem; min-height: 60px; margin-top: 1rem; padding: 0.7rem 0.9rem; border-radius: 12px; font-size: 0.84rem; line-height: 1.45; color: var(--muted); background: rgba(255, 255, 255, 0.03); border: 1px dashed var(--line-strong); transition: background 0.25s var(--ease), border-color 0.25s var(--ease); }
.sm-co-status .mc-head { width: 36px; height: 36px; }
.sm-co-status b { color: #fff; }
.sm-co-status small { display: block; font-size: 0.74rem; color: #6ee7b7; }
.sm-co-status.is-ok { color: #d1fae5; background: rgba(16, 185, 129, 0.08); border-style: solid; border-color: rgba(52, 211, 153, 0.4); }
.sm-co-status.is-bad { color: #fca5a5; border-color: rgba(248, 113, 113, 0.45); }
.sm-co-totals { display: grid; gap: 0.45rem; margin: 1rem 0 0; }
.sm-co-totals > div { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.86rem; color: var(--muted); }
.sm-co-totals dd { margin: 0; font-family: var(--font-mono); color: #fff; }
.sm-co-disc { opacity: 0.45; transition: opacity 0.25s var(--ease); }
.sm-co-disc.is-on { opacity: 1; }
.sm-co-disc.is-on dd { color: #6ee7b7; }
.sm-co-total { margin-top: 0.2rem; padding-top: 0.65rem; border-top: 1px dashed var(--line-strong); }
.sm-co-total dt { font-weight: 700; color: #fff; }
.sm-co-total dd { font-size: 1.15rem; font-weight: 700; color: #ffd3b0; }
.sm-co-share { margin-top: 1rem; padding: 0.85rem 0.9rem; border-radius: 12px; background: rgba(255, 138, 61, 0.07); border: 1px solid rgba(255, 138, 61, 0.22); }
.sm-co-share-top { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.82rem; color: var(--muted); }
.sm-co-share-top b { font-family: var(--font-mono); color: #ffd3b0; }
.sm-co-bar { height: 14px; margin: 0.55rem 0 0.45rem; padding: 2px; border-radius: 3px; background: #050a14; border: 1px solid var(--line-strong); }
.sm-co-bar span { display: block; width: 0; height: 100%; background: repeating-linear-gradient(90deg, #ff8a3d 0 8px, transparent 8px 10px); filter: drop-shadow(0 0 5px rgba(255, 138, 61, 0.6)); transition: width 0.8s steps(10); }
.sm-co-share small { font-size: 0.74rem; color: var(--faint); }

/* ---------- Klipler ---------- */
.sm-clips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem; transition: opacity 0.2s var(--ease); }
.sm-clips.is-swap { opacity: 0.25; }
.sm-clip { display: flex; flex-direction: column; min-width: 0; padding: 0; overflow: hidden; border-radius: 18px; border: 1px solid var(--line); background: var(--glass-strong); color: inherit; font: inherit; text-align: left; cursor: pointer; transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease), translate 0.25s var(--ease); }
.sm-clip:hover, .sm-clip:focus-visible { translate: 0 -3px; border-color: rgba(255, 138, 61, 0.4); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4); outline: none; }
.sm-clip:first-child { grid-column: span 2; grid-row: span 2; }
.sm-clip-media { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #0a1222; }
.sm-clip:first-child .sm-clip-media { flex: 1; aspect-ratio: auto; min-height: 260px; }
.sm-clip-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.sm-clip-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(5, 10, 20, 0.7)); }
.sm-clip:hover .sm-clip-media img { transform: scale(1.05); }
.sm-clip-play { position: absolute; left: 50%; top: 50%; z-index: 1; width: 54px; height: 54px; padding: 17px 14px 17px 19px; color: #2a1204; background: rgba(255, 138, 61, 0.95); clip-path: var(--px-lg); transform: translate(-50%, -50%); transition: transform 0.25s var(--ease); }
.sm-clip:first-child .sm-clip-play { width: 78px; height: 78px; padding: 25px 21px 25px 28px; }
.sm-clip:hover .sm-clip-play { transform: translate(-50%, -50%) scale(1.1); }
.sm-clip-dur { position: absolute; right: 10px; bottom: 10px; z-index: 1; padding: 0.15rem 0.45rem; border-radius: 5px; font-family: var(--font-mono); font-size: 0.72rem; color: #fff; background: rgba(5, 10, 20, 0.9); }
.sm-clip-rank { position: absolute; left: 10px; top: 10px; z-index: 1; padding: 0.22rem 0.5rem; border-radius: 5px; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.08em; color: #fff; background: rgba(5, 10, 20, 0.88); border: 1px solid rgba(255, 255, 255, 0.12); }
.sm-clip:first-child .sm-clip-rank { color: #2a1204; background: #ffb07a; border-color: #ffb07a; }
.sm-clip-body { display: block; padding: 0.85rem 1rem 1rem; }
.sm-clip-title { display: block; overflow: hidden; font-size: 0.94rem; line-height: 1.35; color: #fff; white-space: nowrap; text-overflow: ellipsis; }
.sm-clip:first-child .sm-clip-title { font-family: var(--font-brand); font-size: 1.3rem; white-space: normal; }
.sm-clip-meta { display: flex; align-items: center; gap: 0.45rem; margin-top: 0.45rem; font-size: 0.78rem; color: var(--muted); }
.sm-clip-meta .mc-head { width: 20px; height: 20px; border-radius: 5px; }

/* Oynatıcı penceresi */
.sm-modal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 1.5rem; }
.sm-modal-back { position: absolute; inset: 0; background: rgba(3, 6, 12, 0.85); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.sm-modal-box { position: relative; width: min(920px, 100%); overflow: hidden; border-radius: 20px; background: #0a1222; border: 1px solid rgba(255, 138, 61, 0.35); box-shadow: 0 40px 120px rgba(0, 0, 0, 0.6); animation: sm-pop 0.35s var(--ease); }
@keyframes sm-pop { from { opacity: 0; transform: translateY(12px) scale(0.97); } to { opacity: 1; transform: none; } }
.sm-modal-x { position: absolute; top: 12px; right: 12px; z-index: 3; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.18); background: rgba(5, 10, 20, 0.85); color: #fff; cursor: pointer; }
.sm-modal-x svg { width: 18px; height: 18px; }
.sm-player { position: relative; aspect-ratio: 16 / 9; background: #000; }
.sm-player img { width: 100%; height: 100%; object-fit: cover; }
.sm-player-big { position: absolute; left: 50%; top: 50%; width: 84px; height: 84px; padding: 27px 22px 27px 30px; color: #2a1204; background: rgba(255, 138, 61, 0.95); clip-path: var(--px-lg); transform: translate(-50%, -50%); }
.sm-player-ui { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 1rem; padding: 1.4rem 1.2rem 1rem; background: linear-gradient(transparent, rgba(0, 0, 0, 0.85)); }
.sm-player-bar { flex: 1; height: 8px; background: rgba(255, 255, 255, 0.18); }
.sm-player-bar span { display: block; width: 0; height: 100%; background: repeating-linear-gradient(90deg, #ff8a3d 0 6px, #ffa564 6px 8px); transition: width 1s linear; }
.sm-player-time { font-family: var(--font-mono); font-size: 0.8rem; color: #fff; }
.sm-modal-info { display: flex; align-items: center; gap: 0.9rem; padding: 1rem 1.2rem; }
.sm-modal-info h3 { margin: 0; font-size: 1.05rem; color: #fff; }
.sm-modal-info p { margin: 0.15rem 0 0; font-size: 0.82rem; color: var(--muted); }
.sm-modal-info p b { color: #fff; }
.sm-modal-info .btn-gold { flex-shrink: 0; margin-left: auto; }

/* ---------- Medya rütbesi ---------- */
.sm-tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem; max-width: 1180px; margin: 0 auto; }
.sm-tier { --tc: #5eead4; position: relative; display: flex; flex-direction: column; min-width: 0; padding: 2rem 1.5rem 1.6rem; border-radius: 22px; background: var(--glass-strong); border: 1px solid var(--line); }
.sm-tier::before { content: ''; position: absolute; top: 0; left: 1.5rem; width: 96px; height: 3px; background: repeating-linear-gradient(90deg, var(--tc) 0 6px, transparent 6px 10px); }
.sm-tier--2 { --tc: #ffb07a; }
.sm-tier--3 { --tc: #ff8a3d; border-color: rgba(255, 138, 61, 0.45); background: linear-gradient(180deg, rgba(46, 23, 10, 0.95), rgba(8, 14, 27, 0.95) 55%); box-shadow: 0 0 0 1px rgba(255, 138, 61, 0.1), 0 30px 80px rgba(0, 0, 0, 0.4); }
.sm-tier-ribbon { position: absolute; top: 0; right: 1.4rem; padding: 0.35rem 0.6rem 0.4rem; border-radius: 0 0 6px 6px; font-size: 0.6rem; font-weight: 800; letter-spacing: 0.14em; color: #2a1204; background: #ffb07a; }
.sm-tier-chat { display: flex; align-items: center; gap: 0.45rem; padding: 0.55rem 0.7rem; overflow: hidden; border-radius: 8px; font-family: var(--font-mono); font-size: 0.74rem; color: #d5dbe8; white-space: nowrap; background: #03060c; border: 1px solid var(--line); }
.sm-tier-chat b { color: #fff; }
.sm-tag { flex-shrink: 0; padding: 0.1rem 0.35rem; border-radius: 3px; font-size: 0.64rem; font-weight: 800; letter-spacing: 0.06em; color: #03060c; background: var(--tc); }
.sm-tier-name { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-top: 1.2rem; }
.sm-tier-name h3 { margin: 0; font-family: var(--font-brand); font-size: 1.6rem; font-weight: 700; color: #fff; }
.sm-tier-lvl { font-family: var(--font-mono); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.16em; color: var(--tc); }
.sm-tier-desc { margin: 0.35rem 0 0; font-size: 0.88rem; line-height: 1.5; color: var(--muted); }
.sm-tier-meter { height: 14px; margin: 1.1rem 0 1.3rem; padding: 2px; border-radius: 3px; background: #050a14; border: 1px solid var(--line-strong); }
.sm-tier-fill { display: block; height: 100%; background: repeating-linear-gradient(90deg, var(--tc) 0 8px, transparent 8px 10px); filter: drop-shadow(0 0 5px var(--tc)); }
.sm-tier-fill--1 { width: 24%; }
.sm-tier-fill--2 { width: 58%; }
.sm-tier-fill--3 { width: 100%; }
.sm-req { display: grid; margin: 0; padding: 0; list-style: none; }
.sm-req li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.5rem 0; font-size: 0.85rem; color: var(--muted); border-bottom: 1px dashed var(--line); }
.sm-req b { font-family: var(--font-mono); font-size: 0.82rem; color: #fff; text-align: right; white-space: nowrap; }
.sm-req + .sm-mini { margin-top: 1.4rem; }
.sm-perks { display: grid; gap: 0.55rem; margin: 0; padding: 0; list-style: none; }
.sm-perks li { position: relative; padding-left: 1.55rem; font-size: 0.87rem; line-height: 1.45; color: var(--text); }
.sm-perks li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.2em;
    width: 13px;
    height: 11px;
    background: var(--tc);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 11' shape-rendering='crispEdges'%3E%3Cpath d='M10 0h3v3h-3zM8 3h3v2H8zM6 5h3v2H6zM0 4h3v3H0zM2 7h5v2H2zM4 9h2v2H4z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 11' shape-rendering='crispEdges'%3E%3Cpath d='M10 0h3v3h-3zM8 3h3v2H8zM6 5h3v2H6zM0 4h3v3H0zM2 7h5v2H2zM4 9h2v2H4z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.sm-perks b { color: #fff; }

.sm-apply { display: flex; align-items: center; gap: 1.4rem; max-width: 1180px; margin: 1.6rem auto 0; padding: 1.3rem 1.5rem; border-radius: 20px; background: linear-gradient(90deg, rgba(46, 23, 10, 0.95), rgba(8, 14, 27, 0.95) 70%); border: 1px solid rgba(255, 138, 61, 0.35); }
.sm-apply-heads { display: flex; flex-shrink: 0; padding-left: 12px; }
.sm-apply-heads .mc-head { width: 40px; height: 40px; margin-left: -12px; box-shadow: 0 0 0 2px #1d130d, 0 6px 14px rgba(0, 0, 0, 0.4); }
.sm-apply-txt { flex: 1; min-width: 0; }
.sm-apply-txt h3 { margin: 0; font-family: var(--font-brand); font-size: 1.2rem; font-weight: 700; color: #fff; }
.sm-apply-txt p { margin: 0.3rem 0 0; font-size: 0.88rem; line-height: 1.55; color: var(--muted); }
.sm-apply-txt b { color: #fff; }
.sm-apply .play-btn { flex-shrink: 0; }

/* ---------- Duyarlı ---------- */
@media (max-width: 1000px) {
    .sm-live { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sm-lcard--main { grid-column: 1 / -1; grid-row: auto; }
    .sm-lcard--main .sm-thumb { flex: none; aspect-ratio: 16 / 8; min-height: 0; }
    .sm-thumb { aspect-ratio: 16 / 9; }
    .sm-upcoming { grid-template-columns: 1fr; gap: 0.9rem; }
    .sm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sm-code-wrap { grid-template-columns: 1fr; gap: 2rem; }
    .sm-checkout { width: 100%; max-width: 560px; margin: 0 auto; }
    .sm-clips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sm-clip:first-child { grid-row: auto; }
    .sm-clip:first-child .sm-clip-media { flex: none; aspect-ratio: 16 / 8; min-height: 0; }
    .sm-tiers { grid-template-columns: 1fr; max-width: 620px; }
}
@media (max-width: 760px) {
    .sm-up-list { grid-template-columns: 1fr; }
    .sm-up { grid-template-columns: auto auto minmax(0, 1fr) auto auto; grid-template-areas: 'time head txt pf btn'; }
    .sm-remind { padding: 0 0.65rem; }
}
@media (max-width: 640px) {
    .sm-onair { gap: 0.55rem; padding: 0 0.9rem; font-size: 0.8rem; }
    .sm-onair-arrow { display: none; }
    .page-actions .play-btn--lg, .sm-hero-ghost { width: 100%; }
    .sm-hero-ghost { height: 48px; }
    .sm-hero-stats { grid-template-columns: repeat(2, 1fr); margin-top: 2rem; }
    .sm-hero-stats > div { padding: 0.9rem 0.8rem; }
    .sm-hero-stats > div:nth-child(3) { border-left: 0; }
    .sm-hero-stats > div:nth-child(n + 3) { border-top: 1px solid var(--line); }
    .sm-hero-stats dd { font-size: 1.25rem; }
    .sm-live { grid-template-columns: 1fr; }
    .sm-lcard--main .sm-thumb, .sm-thumb { aspect-ratio: 16 / 9; }
    .sm-lcard--main .sm-ltitle { font-size: 1rem; }
    .sm-lbody { padding: 0.85rem 0.9rem; gap: 0.7rem; }
    .sm-watch { padding: 0 0.9rem; }
    .sm-upcoming { padding: 1rem; }
    .sm-up { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: 'time txt btn'; padding: 0.65rem; }
    .sm-up .mc-head, .sm-up .sm-pf { display: none; }
    .sm-remind span { display: none; }
    .sm-remind { width: 34px; padding: 0; }
    .sm-grid { grid-template-columns: 1fr; }
    .sm-card-foot { flex-wrap: wrap; }
    .sm-checkout { padding: 1.1rem; }
    .sm-co-item { gap: 0.7rem; }
    .sm-clips { grid-template-columns: 1fr; }
    .sm-clip:first-child { grid-column: auto; }
    .sm-clip:first-child .sm-clip-media { aspect-ratio: 16 / 9; }
    .sm-clip:first-child .sm-clip-title { font-size: 1.1rem; }
    .sm-modal { padding: 0.75rem; }
    .sm-modal-info { flex-wrap: wrap; }
    .sm-modal-info .btn-gold { width: 100%; margin-left: 0; }
    .sm-tier { padding: 1.9rem 1.15rem 1.3rem; }
    .sm-apply { flex-direction: column; align-items: flex-start; padding: 1.2rem; }
    .sm-apply .play-btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .sm-rec, .sm-livebadge, .sm-livebadge i, .sm-card.is-live .sm-card-avatar .mc-head, .sm-modal-box { animation: none; }
    .sm-lcard, .sm-card, .sm-clip, .sm-thumb-img, .sm-clip-media img, .sm-card-banner img, .sm-co-bar span, .sm-player-bar span { transition: none; }
}

/* ===== yonetim-bakim.css ===== */
/* Yönetim → Sistem sağlığı (yonetim-bakim.js) */
.bk-bas { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.bk-bas p { margin: 0; font-size: 0.85rem; color: var(--muted); }
.bk-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
@media (max-width: 1000px) { .bk-grid { grid-template-columns: minmax(0, 1fr); } }
.bk-grid .ad-sets li > div { min-width: 0; }
.bk-grid .ad-sets b { word-break: break-word; }
.bk-log details { margin-top: 0.35rem; }
.bk-log summary { cursor: pointer; font-size: 0.78rem; color: var(--muted); }
.bk-log pre { margin: 0.4rem 0 0; padding: 0.6rem 0.7rem; max-height: 180px; overflow: auto; white-space: pre-wrap; word-break: break-word; font-size: 0.75rem; color: #b7c0da; background: #070d19; border-radius: 8px; }
.bk-not { margin: 0.8rem 0 0; font-size: 0.8rem; color: var(--faint); }
.bk-uyari { margin: 0 0 0.7rem; padding: 0.55rem 0.75rem; font-size: 0.82rem; line-height: 1.45; color: #ffd9d2; background: rgba(229, 72, 55, 0.12); border: 1px solid rgba(229, 72, 55, 0.4); border-radius: 10px; }

/* ===== yonetim-discord.css ===== */
/* Yönetim → Discord (yonetim-discord.js) */
.dc-bas { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; margin-bottom: 1rem; }
.dc-bas p { margin: 0; font-size: 0.88rem; color: var(--muted); }
.dc-bas p b { color: #fff; }
.dc-bas small { display: block; margin-top: 0.3rem; font-size: 0.78rem; color: var(--faint); }
.dc-uyari { margin: 0 0 1rem; padding: 0.8rem 1rem; border: 1px solid rgba(251, 191, 36, 0.35); border-radius: 12px; background: rgba(251, 191, 36, 0.08); font-size: 0.85rem; line-height: 1.55; color: #fde7b0; word-break: break-word; }
.dc-uyari--hata { border-color: rgba(239, 68, 68, 0.4); background: rgba(239, 68, 68, 0.08); color: #fecaca; }
.dc-uyari code, .dc-kanal code { padding: 0.05rem 0.35rem; border-radius: 5px; font-size: 0.74rem; color: #ffb07a; background: #070d19; }
.dc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; margin-bottom: 16px; }
@media (max-width: 1000px) { .dc-grid { grid-template-columns: minmax(0, 1fr); } }
.dc-grid .ad-sets li > div { min-width: 0; }
.dc-kanal small { line-height: 1.6; }
.dc-kanal .ad-acts { flex-shrink: 0; }
.dc-hata { color: #fca5a5; word-break: break-word; }
.dc-kilit { font-size: 0.75rem; opacity: 0.8; }
.dc-alt { margin: 1.3rem 0 0.6rem; font-size: 0.74rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.dc-roller { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.dc-roller li { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.3rem 0.55rem; border: 1px solid var(--line); border-radius: 9px; font-size: 0.8rem; }
.dc-not { margin: 1rem 0 0; font-size: 0.8rem; color: var(--faint); }
.dc-filtre { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }
.dc-sec { height: 36px; min-width: 11rem; }
.dc-etiket { margin-left: 0.4rem; padding: 0.05rem 0.4rem; border-radius: 6px; font-size: 0.66rem; font-weight: 700; color: #7dd3fc; background: rgba(56, 189, 248, 0.12); }
.dc-kuyruk td small { display: block; color: var(--faint); word-break: break-word; }
.dc-det { margin-top: 0.3rem; font-size: 0.75rem; }
.dc-det summary { cursor: pointer; color: #fca5a5; }
.dc-det p { margin: 0.3rem 0 0; color: #fecaca; word-break: break-word; }

/* ===== yonetim-icerik.css ===== */
/* Yönetim paneli — İçerik eklentisi (Etkinlikler, Yayıncılar). Temel sınıflar yonetim.css / piksora-ui.css'ten gelir. */
.yi-row { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
.yi-panel [hidden] { display: none !important; }
.yi-form .yi-genis { grid-column: 1 / -1; }
.yi-form .input { height: 42px; font-size: 0.88rem; }
.yi-form textarea.input { height: auto; min-height: 84px; padding: 0.65rem 0.9rem; line-height: 1.5; resize: vertical; }
.yi-form .field { gap: 0.35rem; min-width: 0; }
.yi-form .field .hint { margin: 0; }
.yi-form .field .hint:empty { display: none; }
.yi-form .ad-form-foot { padding-top: 0.2rem; }
.yi-bitis { display: flex; align-items: center; height: 42px; margin: 0; font-size: 0.88rem; color: var(--muted); }
.yi-checks { display: flex; flex-wrap: wrap; gap: 0.6rem 1.4rem; }
.yi-gunler { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.yi-gun { position: relative; }
.yi-gun input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.yi-gun span { display: inline-flex; align-items: center; justify-content: center; min-width: 46px; height: 34px; padding: 0 0.6rem; border: 1px solid var(--line); border-radius: 8px; font-size: 0.78rem; font-weight: 600; color: var(--muted); background: rgba(255, 255, 255, 0.03); transition: color 0.15s, background 0.15s, border-color 0.15s; }
.yi-gun input:checked + span { color: #2a1204; background: #ff8a3d; border-color: #ff8a3d; }
.yi-gun input:focus-visible + span { outline: 2px solid #ffb07a; outline-offset: 2px; }
.yi-list li > div { flex: 1; min-width: 0; }
.yi-list li > img { flex-shrink: 0; border-radius: 6px; image-rendering: pixelated; }
.yi-list li.is-sel { background: rgba(255, 138, 61, 0.07); box-shadow: inset 3px 0 0 #ff8a3d; padding-left: 0.6rem; }
.yi-list small a { color: #ffb07a; text-decoration: none; }
.yi-list small a:hover { text-decoration: underline; }
.yi-list .badge { flex-shrink: 0; }
.yi-rozetler { display: flex; flex-wrap: wrap; gap: 0.3rem; justify-content: flex-end; }
.yi-yildiz { color: #fbbf24; font-weight: 400; }
.chip .yi-n { margin-left: 0.2rem; font-size: 0.72em; opacity: 0.7; }

@media (max-width: 1000px) {
    .yi-row { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
    .yi-list li { flex-wrap: wrap; }
    .yi-list li > div { flex-basis: calc(100% - 3rem); }
    .yi-list b { white-space: normal; }
    .yi-list .ad-acts { width: 100%; justify-content: flex-start; }
    .yi-rozetler { justify-content: flex-start; }
    .yi-form .ad-form-foot .btn-gold { flex: 1 1 auto; }
}

/* ===== yonetim-kilit.css ===== */
/* Yönetim paneli kilidi (yonetim-kilit.js) — kod kutuları giriş sayfasındaki .au-otp / .au-totp stillerini kullanır */
html.pk-acik { overflow: hidden; }

.pk-kilit {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: grid;
    place-items: center;
    padding: 1.2rem;
    overflow-y: auto;
    background:
        radial-gradient(ellipse 55% 45% at 50% 28%, rgba(255, 138, 61, 0.16), transparent 70%),
        radial-gradient(ellipse 40% 35% at 50% 85%, rgba(94, 234, 212, 0.06), transparent 70%),
        rgba(4, 8, 17, 0.88);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    animation: pk-in 0.25s var(--ease) both;
}
.pk-kilit.is-cikis { animation: pk-out 0.2s ease both; }

.pk-kart {
    position: relative;
    width: min(100%, 430px);
    padding: 2rem 1.8rem 1.35rem;
    text-align: center;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(17, 26, 48, 0.97), rgba(9, 15, 29, 0.98));
    border: 1px solid rgba(255, 176, 122, 0.22);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    animation: pk-pop 0.35s var(--ease) both;
}
.pk-kart::before { content: ''; position: absolute; left: 18%; right: 18%; top: -1px; height: 2px; background: linear-gradient(90deg, transparent, #ff8a3d, transparent); }

.pk-ikon { position: relative; width: 84px; height: 92px; margin: 0 auto 0.85rem; display: grid; place-items: center; }
.pk-kalkan { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 0 14px rgba(255, 138, 61, 0.45)); }
.pk-anka { position: relative; width: 38px; height: 38px; margin-top: -4px; filter: drop-shadow(0 0 8px rgba(255, 138, 61, 0.55)); }

.pk-ust { display: inline-block; font-size: 0.64rem; font-weight: 800; letter-spacing: 0.2em; color: #ffb07a; }
.pk-baslik { margin: 0.35rem 0 0; font-family: var(--font-brand); font-size: 1.45rem; font-weight: 700; line-height: 1.25; letter-spacing: 0.02em; color: #fff; }
.pk-metin { max-width: 36ch; margin: 0.6rem auto 1.3rem; font-size: 0.87rem; line-height: 1.6; color: var(--muted); }

.pk-form .au-otp input { height: 58px; font-size: 1.5rem; }
.pk-form .au-otp input[disabled] { opacity: 0.6; }
.pk-form .au-totp { margin-top: 0.85rem; }
.pk-hint { min-height: 1.35em; margin: 0.7rem 0 0; font-size: 0.8rem; text-align: center; }
.pk-hint a { color: #ffb07a; font-weight: 600; }
.pk-ac { width: 100%; height: 44px; margin-top: 0.9rem; border: 0; font: inherit; font-weight: 700; cursor: pointer; }
.pk-ac svg { width: 16px; height: 16px; }
.pk-ac[disabled] { opacity: 0.6; cursor: default; transform: none; }

.pk-link { margin-top: 0.95rem; padding: 0; border: 0; background: none; font: inherit; font-size: 0.84rem; font-weight: 600; color: #ffb07a; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.pk-link:hover { color: #ffd3b0; }
.pk-yedek { display: grid; gap: 0.45rem; margin-top: 0.8rem; padding-top: 0.9rem; text-align: left; border-top: 1px solid var(--line); }
.pk-yedek[hidden] { display: none; }
.pk-yedek-row { display: flex; gap: 0.5rem; }
.pk-yedek-row .input { flex: 1; min-width: 0; height: 38px; letter-spacing: 0.08em; text-transform: uppercase; }
.pk-yedek-row .ad-btn { height: 38px; }
.pk-yedek .hint { margin: 0; font-size: 0.74rem; }

.pk-alt { display: flex; justify-content: center; gap: 0.6rem; margin-top: 1.2rem; font-size: 0.78rem; color: var(--faint); }
.pk-alt a, .pk-alt button { padding: 0; border: 0; background: none; font: inherit; color: var(--muted); text-decoration: none; cursor: pointer; }
.pk-alt a:hover, .pk-alt button:hover { color: #fff; }

.pk-kilit :focus-visible { outline: 2px solid #ff8a3d; outline-offset: 2px; }
.pk-kilit .au-otp input:focus-visible { outline: none; }

/* Üst çubuk: kalan süre + Kilitle */
.pk-bar { display: inline-flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }
.pk-bar[hidden] { display: none; }
.pk-sure { display: inline-flex; align-items: center; gap: 0.4rem; height: 32px; padding: 0 0.65rem; border-radius: 9px; font-family: var(--font-mono); font-size: 0.78rem; font-weight: 600; white-space: nowrap; color: #ffd3b0; background: rgba(255, 138, 61, 0.08); border: 1px solid rgba(255, 138, 61, 0.28); }
.pk-sure svg { width: 13px; height: 13px; }
.pk-sure.is-az { color: #fecaca; background: rgba(248, 113, 113, 0.1); border-color: rgba(248, 113, 113, 0.5); }
.pk-sure.is-kilitli { color: var(--faint); background: rgba(255, 255, 255, 0.03); border-color: var(--line); }
.pk-kilitle { display: inline-flex; align-items: center; gap: 0.35rem; }
.pk-kilitle svg { width: 13px; height: 13px; }
.pk-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@keyframes pk-in { from { opacity: 0; } }
@keyframes pk-out { to { opacity: 0; } }
@keyframes pk-pop { from { opacity: 0; transform: translateY(12px) scale(0.98); } }

@media (max-width: 720px) {
    .pk-kart { padding: 1.6rem 1.05rem 1.15rem; }
    .pk-form .au-otp { gap: 0.4rem; }
    .pk-form .au-otp input { height: 50px; font-size: 1.3rem; }
    .pk-kilitle span { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .pk-kilit, .pk-kilit.is-cikis, .pk-kart { animation: none; }
}

/* ===== yonetim-onay.css ===== */
/* Yönetim → Onay bekleyen işlemler (yonetim-onay.js) */
[data-ad-pane="onaylar"] .panel + .panel { margin-top: 16px; }
.on-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.on-kart { display: grid; gap: 0.35rem; padding: 0.8rem 0.95rem; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 12px; background: rgba(255, 255, 255, 0.02); }
.on-kart.is-bekliyor { border-color: rgba(251, 191, 36, 0.45); background: rgba(251, 191, 36, 0.06); }
.on-ust { display: flex; align-items: center; gap: 0.5rem; }
.on-ust small { color: var(--muted); font-size: 0.78rem; }
.on-ozet { font-size: 0.95rem; word-break: break-word; }
.on-alt { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; color: var(--muted); font-size: 0.8rem; }
.on-alt .ad-user img { width: 18px; height: 18px; }
.on-not { margin: 0; font-size: 0.8rem; color: var(--faint); }
.on-hata { margin: 0; font-size: 0.8rem; color: #ffb4a8; }
.on-dugmeler { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 0.3rem; }
.on-dugmeler .input { flex: 1 1 200px; min-width: 0; }
.on-onay { border-color: rgba(34, 197, 94, 0.6); }
.on-ret { border-color: rgba(239, 68, 68, 0.6); }

/* ===== yonetim-siparis.css ===== */
/* Yönetim paneli — Siparişler bölümü (yonetim-siparis.js) */
.ys-toolbar { flex-wrap: wrap; gap: 0.6rem; }
.ys-dates { display: flex; gap: 0.5rem; }
.ys-dates label { display: flex; flex-direction: column; gap: 0.15rem; font-size: 0.7rem; color: var(--faint); }
.ys-dates .input { padding: 0.35rem 0.5rem; font-size: 0.8rem; width: 9.5rem; }
.ad-table .data-table td small.ad-dim { display: block; }
.ys-detail { margin-top: 1rem; }
.ys-h { font-size: 0.82rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--faint); margin: 1.2rem 0 0.4rem; }
.ys-list li { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; }
.ys-list li > div { min-width: 0; }
.ys-list li small { display: block; }
.ys-cmd { display: block; font-size: 0.78rem; word-break: break-all; }
.ys-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.7rem; margin-top: 1.2rem; }
.ys-iade { display: flex; gap: 0.5rem; flex: 1 1 22rem; }
.ys-iade .input { flex: 1; min-width: 0; }
@media (max-width: 640px) {
    .ys-dates { width: 100%; }
    .ys-dates label, .ys-dates .input { flex: 1; width: auto; }
    .ys-iade { flex-direction: column; }
}

/* ===== yonetim-sistem.css ===== */
/* =========================================================
   Yönetim — Sistem durumu + Hazır yanıtlar (yonetim-sistem.js)
   Temel görünüm yonetim.css sınıflarından gelir; burada yalnız ekler var.
   ========================================================= */
.sy-note { padding: 0.85rem 1rem; border-radius: 12px; font-size: 0.86rem; line-height: 1.55; color: #fde68a; background: rgba(251, 191, 36, 0.06); border: 1px dashed rgba(251, 191, 36, 0.35); }
.sy-note b { color: #fef3c7; }
.sy-note .ad-btn { margin-left: 0.4rem; }
.sy-hint { margin: 0.6rem 0 0; line-height: 1.55; }
.sy-hint code, .sy-note code { font-family: var(--font-mono); font-size: 0.78rem; color: #ffd3b0; }
.sy-err { margin: 0; }
.sy-err:empty { display: none; }

/* Servis satırları */
.sy-svcs li { flex-wrap: wrap; }
.sy-svcs li > div { flex: 1 1 240px; min-width: 0; }
.sy-svcs li > div > b { display: inline; }
.sy-svcs .badge { vertical-align: 1px; }
.sy-svcs small { display: block; margin-top: 0.2rem; overflow-wrap: anywhere; }
.sy-svc-acts { flex-wrap: wrap; align-items: center; }
.sy-not { width: 210px; height: 30px; padding: 0 0.6rem; border-radius: 7px; font-size: 0.78rem; }

/* Olay formu */
.sy-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 0.5rem 1rem; }
.sy-form .textarea { min-height: 120px; }
.sy-form .textarea.is-error, .sy-form .input.is-error { border-color: rgba(248, 113, 113, 0.7); }
.sy-ek { justify-self: start; align-self: flex-start; margin-top: 0.2rem; }

/* Olay listesi */
.sy-olaylar li { flex-wrap: wrap; align-items: flex-start; margin: 0 -0.5rem; padding: 0.75rem 0.5rem; border-radius: 10px; }
.sy-olaylar li > div:first-child { flex: 1 1 260px; }
.sy-olaylar li > div > b { white-space: normal; }
.sy-olaylar li.is-sel { background: rgba(255, 138, 61, 0.07); box-shadow: inset 2px 0 0 #ff8a3d; }
.sy-olaylar .ad-text { max-height: 7.8em; overflow: hidden; font-size: 0.8rem; color: var(--muted); }
.sy-olaylar .ad-acts { flex-wrap: wrap; }

/* Hazır yanıtlar */
.sy-hy { display: grid; gap: 0.8rem; margin-top: 1rem; }
.sy-hy-item.is-error { border-color: rgba(248, 113, 113, 0.5); }
.sy-hy-item .input.is-error, .sy-hy-item .ad-ta.is-error { border-color: rgba(248, 113, 113, 0.7); }
.sy-hy-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.sy-hy-head > b { font-family: var(--font-mono); font-size: 0.8rem; color: var(--faint); }
.sy-hy-head .ad-acts { margin-left: auto; }
.sy-hy-foot { position: sticky; bottom: 0; z-index: 2; margin-top: 1rem; padding: 0.8rem 0 0.2rem; background: #0b1324; border-top: 1px solid var(--line); }
.sy-hy-oku li > div > b { white-space: normal; }

@media (max-width: 640px) {
    .sy-svc-acts { width: 100%; justify-content: flex-start; }
    .sy-not { flex: 1 1 140px; width: auto; }
    .sy-olaylar .ad-acts { width: 100%; justify-content: flex-start; }
    .sy-hy-head .ad-acts { margin-left: 0; width: 100%; }
    .sy-checks { grid-template-columns: minmax(0, 1fr); }
}

/* ===== yonetim.css ===== */
/* =========================================================
   Yönetim paneli (ad-) — duzen="yonetim", site menüsü yok
   ========================================================= */
.ad-app { position: relative; z-index: 1; display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: 100vh; background: #070c17; }
.ad-mono { font-family: var(--font-mono); font-size: 0.8rem; }
.ad-dim { color: var(--faint); }

/* Kenar menü */
.ad-side { position: sticky; top: 0; display: flex; flex-direction: column; height: 100vh; overflow-y: auto; padding: 1.1rem 0.8rem; background: #050912; border-right: 1px solid var(--line); }
.ad-brand { display: flex; align-items: center; gap: 0.65rem; padding: 0.2rem 0.5rem 0.6rem; text-decoration: none; }
.ad-brand svg { width: 34px; height: 34px; }
.ad-brand b { display: block; font-family: var(--font-brand); font-size: 0.95rem; letter-spacing: 0.14em; color: #fff; }
.ad-brand small { font-size: 0.58rem; font-weight: 800; letter-spacing: 0.2em; color: #ffb07a; }
.ad-group { margin-top: 1.1rem; }
.ad-group > span { display: block; padding: 0 0.7rem 0.4rem; font-size: 0.6rem; font-weight: 800; letter-spacing: 0.16em; color: var(--faint); }
.ad-nav { display: flex; align-items: center; gap: 0.65rem; width: 100%; height: 38px; padding: 0 0.7rem; border: 0; border-radius: 9px; background: none; color: var(--muted); font: inherit; font-size: 0.86rem; font-weight: 600; text-align: left; cursor: pointer; transition: color 0.15s, background 0.15s; }
.ad-nav svg { width: 17px; height: 17px; flex-shrink: 0; }
.ad-nav:hover { color: #fff; background: rgba(255, 255, 255, 0.04); }
.ad-nav.is-active { color: #fff; background: rgba(255, 138, 61, 0.13); box-shadow: inset 2px 0 0 #ff8a3d; }
.ad-nav.is-active svg { color: #ffb07a; }
.ad-nav em { min-width: 20px; margin-left: auto; padding: 0 0.35rem; border-radius: 6px; font-size: 0.68rem; font-style: normal; font-weight: 800; line-height: 18px; text-align: center; color: #2a1204; background: #ff8a3d; }
.ad-me { display: flex; align-items: center; gap: 0.6rem; margin-top: auto; padding: 0.7rem; border-radius: 12px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--line); }
.ad-me img { width: 34px; height: 34px; border-radius: 8px; image-rendering: pixelated; }
.ad-me b { display: block; font-size: 0.86rem; color: #fff; }
.ad-me small { font-size: 0.72rem; font-weight: 600; color: #fca5a5; }
.ad-me a { margin-left: auto; color: var(--faint); }
.ad-me a:hover { color: #fff; }
.ad-me svg { width: 17px; height: 17px; }
.ad-scrim { display: none; }

/* Üst çubuk */
.ad-main { display: flex; flex-direction: column; min-width: 0; }
.ad-top { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 0.9rem; height: 62px; padding: 0 1.6rem; background: rgba(7, 12, 23, 0.94); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.ad-top h1 { margin: 0; font-size: 1.15rem; color: #fff; }
.ad-burger { display: none; width: 38px; height: 38px; place-items: center; border: 1px solid var(--line); border-radius: 9px; background: none; color: #fff; cursor: pointer; }
.ad-burger svg { width: 18px; height: 18px; }
.ad-demo, .ad-maint-flag { height: 24px; padding: 0 0.55rem; border-radius: 6px; font-size: 0.62rem; font-weight: 800; letter-spacing: 0.12em; line-height: 24px; color: #fde68a; background: rgba(251, 191, 36, 0.1); border: 1px solid rgba(251, 191, 36, 0.35); }
.ad-maint-flag { display: none; color: #fecaca; background: rgba(248, 113, 113, 0.14); border-color: rgba(248, 113, 113, 0.5); animation: ad-blink 1.6s ease-in-out infinite; }
.ad-app.is-maint .ad-maint-flag { display: inline-block; }
@keyframes ad-blink { 50% { opacity: 0.55; } }
.ad-search { position: relative; width: 320px; margin-left: auto; }
.ad-search svg { position: absolute; left: 0.75rem; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); color: var(--faint); pointer-events: none; }
.ad-search .input { height: 38px; padding-left: 2.2rem; padding-right: 4rem; }
.ad-search kbd { position: absolute; right: 0.6rem; top: 50%; transform: translateY(-50%); padding: 0.05rem 0.35rem; border-radius: 5px; font-family: var(--font-mono); font-size: 0.66rem; color: var(--faint); border: 1px solid var(--line); }
.ad-search--in { width: 300px; margin: 0; }
.ad-search--in .input { padding-right: 0.8rem; }
.ad-pill { display: inline-flex; align-items: center; gap: 0.45rem; height: 32px; padding: 0 0.75rem; border-radius: 9px; font-size: 0.76rem; font-weight: 600; white-space: nowrap; color: #6ee7b7; background: rgba(52, 211, 153, 0.08); border: 1px solid rgba(52, 211, 153, 0.3); }
.ad-pill .live-dot { width: 7px; height: 7px; }

/* İçerik */
.ad-content { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; padding: 1.5rem 1.6rem 2.5rem; }
.ad-pane { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
.ad-content .panel { padding: 1.25rem; border-radius: 16px; background: #0b1324; }
.panel-title small { margin-left: auto; font-size: 0.76rem; font-weight: 500; color: var(--faint); }
.ad-row { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.ad-row--flip { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }

/* KPI */
.ad-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.ad-kpi { padding: 1rem 1.1rem 0.6rem; border-radius: 16px; background: #0b1324; border: 1px solid var(--line); }
.ad-kpi small { font-size: 0.72rem; font-weight: 600; color: var(--muted); }
.ad-kpi-row { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; margin-top: 0.3rem; }
.ad-kpi b { font-family: var(--font-mono); font-size: 1.6rem; font-weight: 600; color: #fff; }
.ad-kpi em { font-size: 0.74rem; font-style: normal; font-weight: 700; }
.ad-kpi em.is-up { color: #6ee7b7; }
.ad-kpi em.is-down { color: #fca5a5; }
.ad-spark { display: block; width: 100%; height: 36px; margin-top: 0.4rem; }

/* Grafik */
.ad-chart { display: flex; align-items: flex-end; gap: 6px; height: 210px; padding-top: 1.2rem; background: repeating-linear-gradient(180deg, transparent 0 41px, rgba(255, 255, 255, 0.05) 41px 42px); }
.ad-bar { position: relative; flex: 1; height: var(--h); border-radius: 5px 5px 0 0; background: linear-gradient(180deg, rgba(255, 138, 61, 0.75), rgba(255, 138, 61, 0.25)); transition: background 0.15s; }
.ad-bar.is-now { background: linear-gradient(180deg, #ffb07a, #ff8a3d); box-shadow: 0 0 20px rgba(255, 138, 61, 0.4); }
.ad-bar:hover { background: linear-gradient(180deg, #ffd3b0, #ff9a52); }
.ad-bar:hover::after { content: attr(data-v); position: absolute; bottom: calc(100% + 6px); left: 50%; padding: 0.2rem 0.45rem; transform: translateX(-50%); border-radius: 6px; font-family: var(--font-mono); font-size: 0.7rem; font-style: normal; white-space: nowrap; color: #fff; background: #111b31; border: 1px solid var(--line-strong); }
.ad-chart-x { display: flex; justify-content: space-between; margin-top: 0.5rem; font-size: 0.72rem; color: var(--faint); }

/* Bekleyen işler */
.ad-todo { margin: 0; padding: 0; list-style: none; }
.ad-todo li { display: flex; align-items: center; gap: 0.8rem; padding: 0.7rem 0; }
.ad-todo li + li { border-top: 1px solid var(--line); }
.ad-todo b { width: 34px; height: 34px; display: grid; place-items: center; flex-shrink: 0; font-family: var(--font-mono); color: #2a1204; background: #ffb07a; clip-path: var(--px-sm); }
.ad-todo li.is-warn b { color: #fff; background: #f87171; }
.ad-todo span { flex: 1; min-width: 0; font-size: 0.86rem; font-weight: 600; color: #fff; }
.ad-todo small { display: block; font-size: 0.74rem; font-weight: 500; color: var(--faint); }

/* Tablo ve düğmeler */
.ad-table .data-table td { vertical-align: middle; font-size: 0.84rem; }
.ad-user { display: flex; align-items: center; gap: 0.55rem; }
.ad-user img { width: 26px; height: 26px; border-radius: 6px; image-rendering: pixelated; }
.ad-user b { font-weight: 600; color: #fff; }
.ad-select { height: 30px; padding: 0 0.5rem; border-radius: 7px; background: #0a1222; border: 1px solid var(--line); color: #fff; font: inherit; font-size: 0.78rem; }
.ad-btn { height: 30px; padding: 0 0.7rem; border: 1px solid var(--line); border-radius: 7px; background: rgba(255, 255, 255, 0.04); color: var(--muted); font: inherit; font-size: 0.76rem; font-weight: 600; white-space: nowrap; cursor: pointer; transition: color 0.15s, border-color 0.15s; }
.ad-btn:hover:not([disabled]) { color: #fff; border-color: var(--line-strong); }
.ad-btn[disabled] { opacity: 0.4; cursor: default; }
.ad-btn--r { color: #fca5a5; border-color: rgba(248, 113, 113, 0.3); }
.ad-acts { display: flex; gap: 0.35rem; justify-content: flex-end; }
.ad-toolbar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.8rem; margin-bottom: 1rem; }
.ad-toolbar-r { display: flex; gap: 0.5rem; }
.ad-chip-n { margin-left: 0.3rem; padding: 0 0.3rem; border-radius: 5px; font-size: 0.66rem; font-style: normal; font-weight: 800; color: #2a1204; background: #fbbf24; }
.ad-pager { display: flex; justify-content: space-between; align-items: center; margin-top: 1rem; font-size: 0.8rem; color: var(--faint); }
.ad-state { font-size: 0.8rem; color: var(--muted); }
tr.is-on .ad-state { color: #6ee7b7; }
tr.is-muted .ad-state { color: #fde68a; }
tr.is-ban .ad-state { color: #fca5a5; }
tr.is-ban .ad-user b { text-decoration: line-through; color: var(--faint); }

/* En çok satan + sunucu */
.ad-topsell { margin: 0 0 1rem; padding: 0; list-style: none; }
.ad-topsell li { display: flex; align-items: center; gap: 0.7rem; padding: 0.55rem 0; }
.ad-topsell li + li { border-top: 1px solid var(--line); }
.ad-top-ico { width: 32px; height: 32px; display: grid; place-items: center; flex-shrink: 0; border-radius: 8px; color: #ffb07a; background: rgba(255, 138, 61, 0.1); }
.ad-top-ico svg { width: 16px; height: 16px; }
.ad-topsell span:nth-child(2) { flex: 1; min-width: 0; }
.ad-topsell b { display: block; font-size: 0.86rem; color: #fff; }
.ad-topsell small { font-size: 0.72rem; color: var(--faint); }
.ad-topsell em { font-family: var(--font-mono); font-size: 0.8rem; font-style: normal; color: #ffd3b0; }
.ad-server { display: grid; gap: 0.6rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.ad-server div { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 0.7rem; font-size: 0.76rem; }
.ad-server small { font-weight: 700; color: var(--faint); }
.ad-server b { font-family: var(--font-mono); font-weight: 600; color: var(--muted); }
.ad-meter { height: 8px; background: rgba(255, 255, 255, 0.07); clip-path: var(--px-sm); }
.ad-meter span { display: block; height: 100%; background: #5eead4; }

/* Formlar */
.ad-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem; }
.ad-form .btn-gold { grid-column: 1 / -1; justify-self: start; height: 44px; }
.ad-form--1 { grid-template-columns: minmax(0, 1fr); }
.ad-form-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem; }
.ad-form-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 0.7rem; }
.ad-form-foot .btn-gold { height: 42px; }
.ad-form-foot .hint { margin: 0; }
.ad-checks { display: grid; gap: 0.5rem; }
.ad-gen { margin-top: 1.2rem; padding: 1rem; border-radius: 12px; background: #070d19; border: 1px dashed var(--line-strong); }
.ad-gen-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.7rem; }
.ad-gen-head b { font-size: 0.86rem; color: #6ee7b7; }
.ad-gen ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.35rem 1rem; margin: 0; padding: 0 0 0 1.4rem; font-family: var(--font-mono); font-size: 0.84rem; color: #ffd3b0; }
.ad-editor { overflow: hidden; border-radius: 12px; border: 1px solid var(--line); background: rgba(5, 10, 20, 0.8); }
.ad-tools { display: flex; align-items: center; gap: 0.25rem; padding: 0.35rem; border-bottom: 1px solid var(--line); }
.ad-tools button { width: 30px; height: 30px; display: grid; place-items: center; border: 0; border-radius: 7px; background: none; color: var(--muted); cursor: pointer; }
.ad-tools button:hover { color: #fff; background: rgba(255, 255, 255, 0.06); }
.ad-tools svg { width: 15px; height: 15px; }
.ad-tools span { margin-left: auto; padding-right: 0.4rem; font-size: 0.72rem; color: var(--faint); }
.ad-ta { width: 100%; min-height: 110px; padding: 0.8rem 0.9rem; border: 0; resize: vertical; font: inherit; font-size: 0.88rem; line-height: 1.6; color: #e5e9f0; background: transparent; }
.ad-ta:focus { outline: none; }
.panel > .ad-ta, .ad-reply .ad-ta { border-radius: 12px; border: 1px solid var(--line); background: rgba(5, 10, 20, 0.8); }
.ad-editor .ad-ta { min-height: 180px; }
.ad-prev { overflow: hidden; border-radius: 16px; background: var(--glass-strong); border: 1px solid var(--line); }
.ad-prev img { display: block; width: 100%; aspect-ratio: 16 / 7; object-fit: cover; }
.ad-prev > div { padding: 1.1rem 1.2rem; }
.ad-prev h3 { margin: 0.6rem 0 0.4rem; font-family: var(--font-brand); font-size: 1.3rem; color: #fff; }
.ad-prev p { margin: 0 0 0.8rem; font-size: 0.9rem; line-height: 1.6; color: var(--muted); }
.ad-prev small { font-size: 0.76rem; color: var(--faint); }

/* Destek */
.ad-desk { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.ad-tks ul { margin: 0; padding: 0; list-style: none; }
.ad-tk { position: relative; display: flex; align-items: center; gap: 0.7rem; margin: 0 -0.5rem; padding: 0.7rem 0.5rem; border-radius: 10px; cursor: pointer; }
.ad-tk:hover { background: rgba(255, 255, 255, 0.04); }
.ad-tk.is-active { background: rgba(255, 138, 61, 0.1); box-shadow: inset 2px 0 0 #ff8a3d; }
.ad-tk img { width: 30px; height: 30px; border-radius: 7px; image-rendering: pixelated; }
.ad-tk span { flex: 1; min-width: 0; }
.ad-tk b { display: block; overflow: hidden; font-size: 0.84rem; text-overflow: ellipsis; white-space: nowrap; color: #fff; }
.ad-tk small { font-size: 0.72rem; color: var(--faint); }
.ad-tk time { font-size: 0.72rem; color: var(--faint); }
.ad-tk.is-new b::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 0.4rem; border-radius: 50%; background: #ff8a3d; vertical-align: 1px; }
.ad-th-head { display: flex; align-items: center; gap: 0.8rem; padding-bottom: 1rem; border-bottom: 1px solid var(--line); }
.ad-th-head img { width: 40px; height: 40px; border-radius: 9px; image-rendering: pixelated; }
.ad-th-head div { flex: 1; min-width: 0; }
.ad-th-head b { display: block; color: #fff; }
.ad-th-head small { font-size: 0.76rem; color: var(--faint); }
.ad-msgs { display: grid; gap: 0.7rem; padding: 1rem 0; }
.ad-msg { max-width: 80%; padding: 0.8rem 1rem; border-radius: 4px 14px 14px 14px; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line); }
.ad-msg p { margin: 0; font-size: 0.88rem; line-height: 1.55; color: #dbe2ee; }
.ad-msg time { display: block; margin-top: 0.3rem; font-size: 0.7rem; color: var(--faint); }
.ad-msg--note { max-width: 100%; border-radius: 10px; background: rgba(251, 191, 36, 0.06); border: 1px dashed rgba(251, 191, 36, 0.35); }
.ad-msg--note p { font-size: 0.8rem; color: #fde68a; }
.ad-msg--me { justify-self: end; border-radius: 14px 4px 14px 14px; background: rgba(255, 138, 61, 0.12); border-color: rgba(255, 138, 61, 0.35); }
.ad-reply { display: grid; gap: 0.7rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.ad-quick { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.ad-reply .ad-form-foot { justify-content: space-between; }

/* Ayarlar + kayıt */
.ad-sets { margin: 0; padding: 0; list-style: none; }
.ad-sets li { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.85rem 0; }
.ad-sets li + li { border-top: 1px solid var(--line); }
.ad-sets b { display: block; font-size: 0.9rem; color: #fff; }
.ad-sets small { font-size: 0.78rem; color: var(--faint); }
.ad-sw { position: relative; display: inline-block; flex-shrink: 0; width: 40px; height: 22px; }
.ad-sw input { position: absolute; inset: 0; z-index: 1; margin: 0; opacity: 0; cursor: pointer; }
.ad-sw span { position: absolute; inset: 0; border-radius: 999px; background: rgba(255, 255, 255, 0.1); border: 1px solid var(--line); transition: background 0.2s; }
.ad-sw span::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #9aa6bd; transition: transform 0.2s var(--ease), background 0.2s; }
.ad-sw input:checked + span { background: #ff8a3d; border-color: #ff8a3d; }
.ad-sw input:checked + span::after { transform: translateX(18px); background: #fff; }
.ad-sw input[data-ad-maint]:checked + span { background: #ef4444; border-color: #ef4444; }
.ad-sw input:focus-visible + span { outline: 2px solid #ffb07a; outline-offset: 2px; }
.ad-log { margin: 0; padding: 0; list-style: none; }
.ad-log li { display: flex; gap: 1rem; padding: 0.65rem 0; font-size: 0.86rem; color: var(--muted); }
.ad-log li + li { border-top: 1px solid var(--line); }
.ad-log time { width: 48px; flex-shrink: 0; font-family: var(--font-mono); font-size: 0.8rem; color: var(--faint); }
.ad-log b { color: #fff; font-weight: 600; }
.ad-log .is-warn span::before, .ad-log .is-ok span::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 0.5rem; background: #fbbf24; vertical-align: 1px; }
.ad-log .is-ok span::before { background: #34d399; }

/* Duyarlı */
@media (max-width: 1200px) {
    .ad-search { width: 220px; }
    .ad-pill { display: none; }
}
@media (max-width: 1000px) {
    .ad-app { grid-template-columns: minmax(0, 1fr); }
    .ad-side { position: fixed; left: 0; top: 0; bottom: 0; z-index: 30; width: 260px; transform: translateX(-100%); transition: transform 0.25s var(--ease); }
    .ad-app.is-menu .ad-side { transform: none; box-shadow: 20px 0 60px rgba(0, 0, 0, 0.6); }
    .ad-app.is-menu .ad-scrim { display: block; position: fixed; inset: 0; z-index: 20; background: rgba(0, 0, 0, 0.5); }
    .ad-burger { display: grid; }
    .ad-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ad-row, .ad-row--flip, .ad-desk { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
    .ad-top { padding: 0 1rem; gap: 0.6rem; }
    .ad-search:not(.ad-search--in), .ad-demo { display: none; }
    .ad-content { padding: 1rem 1rem 2rem; }
    .ad-kpi b { font-size: 1.25rem; }
    .ad-form, .ad-form-2 { grid-template-columns: minmax(0, 1fr); }
    .ad-search--in { width: 100%; }
    .ad-gen ol { grid-template-columns: minmax(0, 1fr); }
    .ad-msg { max-width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .ad-maint-flag { animation: none; } }

/* Tablo taşma düzeltmeleri */
.ad-table .data-table .ad-mono, .ad-table .data-table td.num { white-space: nowrap; }
[data-ad-pane="kodlar"] .ad-row--flip { grid-template-columns: 380px minmax(0, 1fr); }
[data-ad-pane="kodlar"] .ad-acts .ad-btn { padding: 0 0.55rem; }
@media (max-width: 1000px) { [data-ad-pane="kodlar"] .ad-row--flip { grid-template-columns: minmax(0, 1fr); } }

/* Gerçek mod (yonetim.js → gercekYonetim): boş/yakında durumları, detay kutuları, listeler */
.ad-empty { display: grid; justify-items: center; gap: 0.55rem; padding: 2.2rem 1rem; text-align: center; font-size: 0.88rem; color: var(--muted); }
.ad-empty b { font-size: 1rem; color: #fff; }
.ad-empty p { max-width: 52ch; margin: 0; }
.ad-empty .btn-gold { height: 42px; display: inline-flex; align-items: center; }
.ad-soon { padding: 0.15rem 0.5rem; border-radius: 6px; font-size: 0.62rem; font-weight: 800; letter-spacing: 0.14em; color: #fde68a; background: rgba(251, 191, 36, 0.1); border: 1px solid rgba(251, 191, 36, 0.35); }
.ad-gate { width: min(560px, 100%); margin: 8vh auto 0; }
.ad-ev { justify-self: center; font-size: 0.74rem; color: var(--faint); text-align: center; }
.ad-msg-by { display: block; margin-bottom: 0.25rem; font-size: 0.72rem; font-weight: 700; color: var(--muted); }
.ad-msg p + p { margin-top: 0.4rem; }
.ad-th-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.ad-th-head { flex-wrap: wrap; }
.ad-kv { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 0.7rem 1rem; margin: 1rem 0 0; }
.ad-kv div { min-width: 0; }
.ad-kv dt { font-size: 0.7rem; font-weight: 700; color: var(--faint); }
.ad-kv dd { margin: 0.15rem 0 0; font-size: 0.86rem; color: #fff; overflow-wrap: anywhere; }
.ad-boxes { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; margin-top: 1.1rem; }
.ad-box { display: grid; align-content: start; gap: 0.55rem; padding: 0.95rem; border-radius: 12px; background: rgba(255, 255, 255, 0.02); border: 1px solid var(--line); }
.ad-box h3 { margin: 0; font-size: 0.88rem; color: #fff; }
.ad-box .input { height: 36px; }
.ad-box .hint { margin: 0; }
.ad-box .ad-btn { justify-self: start; }
.ad-list { margin: 0; padding: 0; list-style: none; }
.ad-list li { display: flex; align-items: center; gap: 0.8rem; padding: 0.65rem 0; font-size: 0.84rem; }
.ad-list li + li { border-top: 1px solid var(--line); }
.ad-list li > div:first-child { flex: 1; min-width: 0; }
.ad-list b { display: block; overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; color: #fff; }
.ad-list small { font-size: 0.74rem; color: var(--faint); }
.ad-text { margin: 0.2rem 0 0; font-size: 0.86rem; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; color: #dbe2ee; }
.ad-sec { margin: 1.1rem 0 0.35rem; font-size: 0.74rem; font-weight: 800; letter-spacing: 0.1em; color: var(--faint); }
.ad-sets--grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); column-gap: 1.5rem; }
.ad-sets--grid li + li { border-top: 0; }
.ad-sets--grid li { border-bottom: 1px solid var(--line); }
.ad-num { width: 120px; height: 34px; }
.ad-tk-chips { margin-bottom: 0.7rem; }
.ad-more { margin-top: 0.9rem; }
.ad-detail-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem; }
.ad-detail-head img { width: 48px; height: 48px; border-radius: 10px; image-rendering: pixelated; }
.ad-detail-head > div { flex: 1; min-width: 0; }
.ad-detail-head b { display: block; font-size: 1.05rem; color: #fff; }
.ad-table tr.is-sel td { background: rgba(255, 138, 61, 0.07); }
.ad-table td small { display: block; font-size: 0.72rem; }
.ad-box .ad-ta { min-height: 70px; border-radius: 10px; border: 1px solid var(--line); background: rgba(5, 10, 20, 0.8); }
.ad-box .label { margin: 0.2rem 0 0; }
.ad-box .btn-gold { justify-self: start; height: 40px; }