/* portal/assets/css/portal.css */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: Verdana, Helvetica, Arial, sans-serif;
}

body {
    background: radial-gradient(circle at top, #111827 0, #020617 45%, #000 100%);
    color: #e5e7eb;
}

a {
    color: inherit;
    text-decoration: none;
}

.portal-wrapper {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* HEADER */

.portal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 24px;
    background: rgba(15,23,42,0.95);
    border-bottom: 1px solid rgba(148,163,184,0.25);
    backdrop-filter: blur(10px);
}

.portal-logo-text {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: 3px;
    color: #38bdf8;
}

.portal-nav {
    display: flex;
    gap: 16px;
}

.nav-link {
    font-size: 13px;
    padding: 6px 10px;
    border-radius: 999px;
    color: #e5e7eb;
    opacity: 0.85;
}

.nav-link:hover {
    background: rgba(15,118,110,0.35);
    opacity: 1;
}

.portal-user-area {
    display: flex;
    align-items: center;
    gap: 8px;
}

.user-box {
    display: flex;
    align-items: center;
    gap: 8px;
}

.user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 999px;
    border: 1px solid #38bdf8;
    object-fit: cover;
}

.user-name {
    font-size: 13px;
    font-weight: 600;
}

/* BUTONLAR */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 13px;
    border: none;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.btn-primary {
    background: linear-gradient(135deg,#0ea5e9,#22c55e);
    color: #0b1120;
    font-weight: 700;
}

.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 0 18px rgba(34,197,94,0.6);
}

.btn-outline {
    background: transparent;
    border: 1px solid #38bdf8;
    color: #e5e7eb;
}

.btn-outline:hover {
    background: rgba(56,189,248,0.12);
}

.btn-ghost {
    background: transparent;
    color: #e5e7eb;
    opacity: 0.85;
}

.btn-ghost:hover {
    opacity: 1;
}

.btn-disabled {
    background: #4b5563;
    color: #9ca3af;
    cursor: not-allowed;
}

.btn-xs {
    padding: 3px 8px;
    font-size: 11px;
}

.w-100 {
    width: 100%;
}

/* CONTENT */

.portal-content {
    flex: 1;
    padding: 24px;
    max-width: 1100px;
    margin: 0 auto;
}

/* HERO */

.hero-section {
    display: grid;
    grid-template-columns: minmax(0,2fr) minmax(0,1.3fr);
    gap: 24px;
    margin-bottom: 32px;
}

.hero-text h1 {
    font-size: 28px;
    margin-bottom: 10px;
}

.hero-text p {
    font-size: 14px;
    color: #cbd5f5;
    max-width: 520px;
    margin-bottom: 16px;
}

.hero-buttons {
    display: flex;
    gap: 10px;
}

.hero-side {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.hero-info-box {
    padding: 12px 14px;
    border-radius: 12px;
    background: rgba(15,23,42,0.85);
    border: 1px solid rgba(56,189,248,0.3);
    font-size: 13px;
}

/* GENEL SECTION */

.section {
    margin-bottom: 32px;
}

.section h2 {
    font-size: 20px;
    margin-bottom: 8px;
}

.section p {
    font-size: 13px;
    color: #cbd5f5;
    margin-bottom: 10px;
}

.section.narrow {
    max-width: 420px;
    margin: 0 auto 32px;
}

/* UNIVERSE CARDS */

.universe-list {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(260px,1fr));
    gap: 16px;
    margin-top: 12px;
}

.universe-card {
    background: radial-gradient(circle at top,#0b1120 0,#020617 45%,#020617 100%);
    border-radius: 14px;
    padding: 14px;
    border: 1px solid rgba(148,163,184,0.45);
    box-shadow: 0 0 20px rgba(15,23,42,0.8);
    font-size: 13px;
}

.universe-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.universe-header h3 {
    font-size: 15px;
}

.universe-desc {
    font-size: 12px;
    color: #e5e7eb;
    margin-bottom: 8px;
}

.universe-features {
    list-style: none;
    font-size: 11px;
    color: #cbd5f5;
    margin-bottom: 8px;
}

.universe-features li {
    margin-bottom: 2px;
}

.universe-actions {
    display: flex;
    justify-content: flex-end;
}

/* BADGES */

.badge {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.badge-live {
    background: rgba(22,163,74,0.2);
    color: #22c55e;
}

.badge-soon {
    background: rgba(234,179,8,0.2);
    color: #eab308;
}

/* FORMLAR */

.form-card {
    background: rgba(15,23,42,0.95);
    border-radius: 12px;
    border: 1px solid rgba(148,163,184,0.45);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.form-label {
    font-size: 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.form-input {
    padding: 7px 9px;
    border-radius: 8px;
    border: 1px solid rgba(148,163,184,0.7);
    background: rgba(15,23,42,0.8);
    color: #e5e7eb;
    font-size: 13px;
}

.form-input:focus {
    outline: none;
    border-color: #38bdf8;
    box-shadow: 0 0 0 1px rgba(56,189,248,0.4);
}

.form-bottom-text {
    font-size: 12px;
    color: #9ca3af;
    text-align: center;
}

/* PROFIL LAYOUT */

.profile-layout {
    display: grid;
    grid-template-columns: minmax(0,1.2fr) minmax(0,1.5fr);
    gap: 16px;
}

.profile-column {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.panel {
    background: rgba(15,23,42,0.95);
    border-radius: 12px;
    border: 1px solid rgba(148,163,184,0.45);
    padding: 14px;
    font-size: 13px;
}

.simple-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    margin-top: 6px;
}

.simple-table th,
.simple-table td {
    border-bottom: 1px solid rgba(55,65,81,0.9);
    padding: 6px 4px;
}

.simple-table th {
    text-align: left;
    font-weight: 600;
}

/* FOOTER */

.portal-footer {
    padding: 10px 24px;
    font-size: 11px;
    color: #9ca3af;
    border-top: 1px solid rgba(55,65,81,0.8);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #020617;
}

.footer-links a {
    margin-left: 10px;
    font-size: 11px;
    color: #9ca3af;
}

/* RESPONSIVE */

@media (max-width: 800px) {
    .portal-header {
        flex-wrap: wrap;
        gap: 8px;
    }

    .portal-nav {
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
    }

    .portal-content {
        padding: 16px;
    }

    .hero-section {
        grid-template-columns: minmax(0,1fr);
    }

    .profile-layout {
        grid-template-columns: minmax(0,1fr);
    }
}

/* === AAA COSMIC GLASS UI EKLERİ === */

/* Arka planı biraz daha “uzay” ve katmanlı hale getir */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    background:
        radial-gradient(circle at 10% 20%, rgba(56,189,248,0.16), transparent 55%),
        radial-gradient(circle at 80% 0%, rgba(129,140,248,0.18), transparent 55%);
    opacity: 0.9;
    pointer-events: none;
    z-index: -1;
}

/* HERO BLOĞU – cam panel + neon vurgular */

.hero-main-block {
    position: relative;
    padding: 22px 22px 20px;
    border-radius: 18px;
    background: radial-gradient(circle at top left, rgba(56,189,248,0.18), rgba(15,23,42,0.95));
    border: 1px solid rgba(148,163,184,0.4);
    box-shadow:
        0 0 30px rgba(15,23,42,0.9),
        0 0 45px rgba(56,189,248,0.24);
    overflow: hidden;
}

.hero-main-block::before {
    content: "";
    position: absolute;
    inset: -40%;
    background: conic-gradient(
        from 210deg,
        rgba(56,189,248,0.22),
        rgba(129,140,248,0.14),
        transparent,
        rgba(34,197,94,0.16),
        transparent
    );
    opacity: 0.45;
    filter: blur(38px);
    z-index: -1;
}

.hero-kicker {
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #a5b4fc;
    margin-bottom: 6px;
    opacity: 0.85;
}

.hero-text h1 {
    font-size: 30px;
    margin-bottom: 10px;
    background: linear-gradient(135deg,#e0f2fe,#38bdf8);
    -webkit-background-clip: text;
    color: transparent;
}

.hero-text p {
    font-size: 14px;
    color: #cbd5ff;
    max-width: 540px;
    margin-bottom: 18px;
}

/* CTA butonları biraz daha “launcher” havasında dursun */
.hero-cta-main {
    padding-inline: 18px;
}

.hero-cta-secondary {
    padding-inline: 16px;
}

/* Hero altı meta pill’ler */

.hero-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}

.hero-meta-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(15,23,42,0.85);
    border: 1px solid rgba(148,163,184,0.6);
    font-size: 11px;
    color: #e5e7eb;
}

.hero-dot {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    display: inline-block;
}

.hero-dot-live {
    background: #22c55e;
    box-shadow: 0 0 10px rgba(34,197,94,0.9);
}

.hero-pill-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #9ca3af;
}

.hero-pill-value {
    font-size: 11px;
}

/* Sağ taraftaki “orbit” kartı */

.hero-orbit-card {
    position: relative;
    padding: 18px 16px 16px;
    border-radius: 18px;
    background: radial-gradient(circle at 20% 0%, rgba(56,189,248,0.22), rgba(15,23,42,0.96));
    border: 1px solid rgba(129,140,248,0.7);
    box-shadow:
        0 0 30px rgba(15,23,42,0.9),
        0 0 35px rgba(129,140,248,0.4);
    overflow: hidden;
}

.orbit-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    border-radius: 999px;
    border: 1px solid rgba(56,189,248,0.6);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #e0f2fe;
    margin-bottom: 10px;
    background: rgba(15,23,42,0.9);
}

.orbit-title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 6px;
}

.orbit-text {
    font-size: 12px;
    color: #c7d2fe;
    margin-bottom: 12px;
}

.orbit-stats {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 8px;
    margin-bottom: 10px;
}

.orbit-stat {
    padding: 7px 8px;
    border-radius: 10px;
    background: rgba(15,23,42,0.92);
    border: 1px solid rgba(148,163,184,0.5);
    font-size: 11px;
}

.orbit-stat-label {
    display: block;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #9ca3af;
    margin-bottom: 2px;
}

.orbit-stat-value {
    font-size: 11px;
    color: #e5e7eb;
}

.orbit-footer-pill {
    display: inline-flex;
    align-items: center;
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(22,163,74,0.16);
    color: #bbf7d0;
    font-size: 11px;
}

/* Hero’daki ikinci info box biraz daha sakin olsun */

.hero-info-secondary {
    margin-top: 6px;
}

/* SECTION HEADER */

.section-header {
    margin-bottom: 16px;
}

.section-eyebrow {
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #a5b4fc;
    margin-bottom: 4px;
    opacity: 0.9;
}

.section-header h2 {
    font-size: 22px;
    margin-bottom: 4px;
}

/* Evren kartlarını AAA launcher kartına çevirme */

.universe-card {
    position: relative;
    overflow: hidden;
    background: radial-gradient(circle at top,#020617 0,#020617 50%,#020617 100%);
    border-radius: 16px;
    padding: 15px 14px 14px;
    border: 1px solid rgba(148,163,184,0.65);
    box-shadow:
        0 0 25px rgba(15,23,42,0.95),
        0 0 35px rgba(15,23,42,0.9);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.universe-card-primary {
    border-color: rgba(34,197,94,0.7);
}

.universe-card-secondary {
    border-color: rgba(129,140,248,0.7);
}

.universe-card:hover {
    transform: translateY(-3px);
    box-shadow:
        0 0 30px rgba(15,23,42,1),
        0 0 45px rgba(56,189,248,0.45);
}

/* Kart arkası glow effect */

.universe-glow {
    position: absolute;
    inset: -40%;
    background: radial-gradient(circle at 10% 0%, rgba(34,197,94,0.25), transparent 55%);
    opacity: 0.6;
    filter: blur(38px);
    z-index: -1;
}

.glow-secondary {
    background: radial-gradient(circle at 10% 0%, rgba(129,140,248,0.3), transparent 55%);
}

.universe-subtitle {
    font-size: 11px;
    color: #9ca3af;
}

/* Alt metalar */

.universe-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}

.universe-pill {
    padding: 4px 9px;
    border-radius: 999px;
    background: rgba(15,23,42,0.9);
    border: 1px solid rgba(148,163,184,0.6);
    font-size: 11px;
}

.universe-pill-soon {
    border-color: rgba(234,179,8,0.7);
    color: #fde68a;
}

.universe-dot-live {
    font-size: 11px;
    color: #bbf7d0;
}

/* Universe butonları */

.btn-universe {
    min-width: 150px;
}

/* Daha iyi mobil uyum için bazı ek düzeltmeler */

@media (max-width: 800px) {
    .hero-main-block {
        padding: 18px 14px 16px;
    }

    .hero-meta-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .orbit-stats {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }

    .hero-orbit-visual {
        opacity: 0.5;
    }
}
/* === FULL AAA COSMIC GLASS UPGRADE === */

/* HEADER DAHA AAA DURSUN */
.portal-header {
    background: radial-gradient(circle at top left, rgba(37,99,235,0.25), rgba(15,23,42,0.98));
    border-bottom: 1px solid rgba(148,163,184,0.35);
    box-shadow:
        0 8px 30px rgba(15,23,42,0.9),
        0 0 25px rgba(56,189,248,0.25);
}

.portal-logo-text {
    letter-spacing: 0.35em;
    font-size: 20px;
    text-transform: uppercase;
    background: linear-gradient(135deg,#38bdf8,#a5b4fc);
    -webkit-background-clip: text;
    color: transparent;
}

/* NAV LINK – ALTTA NEON ÇİZGİ VE HOVER GLOW */
.nav-link {
    position: relative;
    font-size: 13px;
    padding: 7px 12px;
    border-radius: 999px;
    opacity: 0.85;
    transition: color 0.15s ease, opacity 0.15s ease, background 0.15s ease;
}

.nav-link::after {
    content: "";
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 3px;
    height: 1px;
    border-radius: 999px;
    background: linear-gradient(90deg,rgba(56,189,248,0),rgba(56,189,248,0.9),rgba(56,189,248,0));
    opacity: 0;
    transform: translateY(2px);
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.nav-link:hover {
    background: rgba(15,23,42,0.8);
    opacity: 1;
}

.nav-link:hover::after {
    opacity: 1;
    transform: translateY(0);
}

/* İstersen aktif sayfanın linkine bu class'ı eklersen sabit neon çizgi olur */
.nav-link-active {
    background: rgba(15,23,42,0.9);
    opacity: 1;
}
.nav-link-active::after {
    opacity: 1;
    transform: translateY(0);
}

/* HERO TIPOGRAFİ – DAHA BÜYÜK VE AAA */
.hero-main-block {
    padding: 26px 26px 22px;
}

.hero-text h1 {
    font-size: 34px;
    line-height: 1.15;
    margin-bottom: 12px;
}

.hero-text p {
    font-size: 15px;
    line-height: 1.6;
}

/* ORBİT GEZEGENİ – HEM DÖNME HEM YÖRÜNGE HAREKETİ */
.orbit-planet {
    animation: orbitMotion 16s ease-in-out infinite;
    transform-origin: center center;
}

@keyframes orbitMotion {
    0% {
        transform: translate(0px, 0px) rotate(0deg);
    }
    25% {
        transform: translate(6px, -4px) rotate(120deg);
    }
    50% {
        transform: translate(10px, 3px) rotate(200deg);
    }
    75% {
        transform: translate(4px, 6px) rotate(290deg);
    }
    100% {
        transform: translate(0px, 0px) rotate(360deg);
    }
}

/* ARKA PLANDA EK GALAKSİ KATMANI */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    background:
        radial-gradient(circle at 75% 80%, rgba(15,118,110,0.24), transparent 60%),
        radial-gradient(circle at 5% 90%, rgba(56,189,248,0.22), transparent 55%);
    opacity: 0.8;
}

/* EVREN KARTLARI – DAHA FAZLA GLOW + HOVER HAREKETİ */
.universe-card {
    backdrop-filter: blur(10px);
}

.universe-card:hover {
    transform: translateY(-4px) scale(1.01);
    border-color: rgba(56,189,248,0.9);
    box-shadow:
        0 0 35px rgba(15,23,42,1),
        0 0 55px rgba(56,189,248,0.6);
}

/* KART BAŞINDA HAFİF ÜST PARLAK ŞERİT */
.universe-card::before {
    content: "";
    position: absolute;
    left: -20%;
    right: -20%;
    top: 0;
    height: 2px;
    background: linear-gradient(
        90deg,
        rgba(56,189,248,0),
        rgba(56,189,248,0.85),
        rgba(34,197,94,0.85),
        rgba(56,189,248,0)
    );
    opacity: 0.7;
}

/* EVREN İSTATİSTİKLERİNE EMOJİ İKONLAR (HTML'E DOKUNMADAN) */
.universe-features li {
    position: relative;
    padding-left: 18px;
}

.universe-features li::before {
    position: absolute;
    left: 0;
    top: 0;
    font-size: 11px;
}

.universe-card-primary .universe-features li:nth-child(1)::before,
.universe-card-secondary .universe-features li:nth-child(1)::before {
    content: "🚀";
}
.universe-card-primary .universe-features li:nth-child(2)::before,
.universe-card-secondary .universe-features li:nth-child(2)::before {
    content: "💰";
}
.universe-card-primary .universe-features li:nth-child(3)::before,
.universe-card-secondary .universe-features li:nth-child(3)::before {
    content: "🔬";
}
.universe-card-primary .universe-features li:nth-child(4)::before,
.universe-card-secondary .universe-features li:nth-child(4)::before {
    content: "☄";
}

/* ALT META SATIRI BİRAZ DAHA OKUNUR OLSUN */
.universe-meta-row {
    margin-top: 4px;
}

/* BUTONLARDA HAFİF SHINE EFEKTİ */
.btn-primary {
    position: relative;
    overflow: hidden;
}

.btn-primary::before {
    content: "";
    position: absolute;
    top: -120%;
    left: -40%;
    width: 60%;
    height: 300%;
    background: linear-gradient(
        120deg,
        rgba(255,255,255,0),
        rgba(255,255,255,0.55),
        rgba(255,255,255,0)
    );
    transform: translateX(-120%);
    opacity: 0.0;
    pointer-events: none;
}

.btn-primary:hover::before {
    animation: btnShine 0.85s ease-out forwards;
}

@keyframes btnShine {
    0% {
        transform: translateX(-120%);
        opacity: 0.0;
    }
    40% {
        opacity: 0.9;
    }
    100% {
        transform: translateX(260%);
        opacity: 0;
    }
}

/* HERO META PILL HOVER DAHA CANLI OLSUN */
.hero-meta-pill {
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.hero-meta-pill:hover {
    border-color: rgba(56,189,248,0.9);
    background: rgba(15,23,42,0.95);
    box-shadow: 0 0 14px rgba(56,189,248,0.6);
}

/* MOBİLDE BİRAZ DAHA SIKI GÖRÜNTÜ */
@media (max-width: 800px) {
    .hero-main-block {
        padding: 20px 15px 18px;
    }

    .hero-text h1 {
        font-size: 26px;
    }

    .hero-text p {
        font-size: 14px;
    }

    .hero-section {
        gap: 18px;
    }
}
/* ================================================
   FULL AAA LAUNCHER UPGRADE
   ================================================ */

/* ------------------------------
   1) HEADER – Premium Navigation
--------------------------------*/
.portal-header {
    background: rgba(15,23,42,0.65);
    backdrop-filter: blur(18px) saturate(160%);
    border-bottom: 1px solid rgba(148,163,184,0.35);
    box-shadow:
        0 8px 25px rgba(0,0,0,0.45),
        0 0 35px rgba(56,189,248,0.28);
    position: sticky;
    top: 0;
    z-index: 50;
}

.portal-header::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 2px;
    background: linear-gradient(
        90deg,
        rgba(56,189,248,0),
        rgba(56,189,248,0.55),
        rgba(129,140,248,0.55),
        rgba(56,189,248,0)
    );
    opacity: .7;
}

.nav-link {
    position: relative;
    padding: 7px 14px;
    border-radius: 10px;
    transition: 0.20s;
}

.nav-link:hover {
    background: rgba(56,189,248,0.12);
}

.nav-link::after {
    content: "";
    position: absolute;
    left: 14px; right: 14px;
    bottom: 4px;
    height: 1px;
    background: linear-gradient(
        90deg,
        rgba(56,189,248,0),
        rgba(56,189,248,0.8),
        rgba(56,189,248,0)
    );
    opacity: 0;
    transition: 0.2s;
}

.nav-link:hover::after {
    opacity: 1;
}

/* Aktif menü için */
.nav-link-active {
    background: rgba(56,189,248,0.18) !important;
}
.nav-link-active::after { opacity: 1 !important; }

/* ------------------------------
   2) ORBIT PANEL – God Rays + Ultra Glow
--------------------------------*/
.hero-orbit-card {
    position: relative;
    overflow: hidden;
}

.hero-orbit-card::after {
    content: "";
    position: absolute;
    inset: -30%;
    background: conic-gradient(
        from 120deg,
        rgba(56,189,248,0.35),
        rgba(129,140,248,0.22),
        transparent,
        rgba(56,189,248,0.25)
    );
    filter: blur(65px);
    opacity: 0.55;
    z-index: -1;
}

/* Gezegen hem dönsün hem salınsın */
.orbit-planet {
    animation: planetSpin 18s linear infinite,
               planetFloat 6s ease-in-out infinite;
    transform-origin: center center;
}

@keyframes planetSpin {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
@keyframes planetFloat {
    0%   { transform: translate(0,-2px); }
    50%  { transform: translate(4px,4px); }
    100% { transform: translate(0,-2px); }
}

/* ------------------------------
   3) HERO META-PILL – Premium icon + glow
--------------------------------*/
.hero-meta-pill {
    position: relative;
    padding-left: 26px;
}

.hero-meta-pill::before {
    content: "✦";
    font-size: 12px;
    color: #38bdf8;
    position: absolute;
    left: 9px;
    top: 6px;
    opacity: 0.85;
}

.hero-meta-pill:hover {
    background: rgba(15,23,42,0.92);
    border-color: rgba(56,189,248,0.95);
    box-shadow: 0 0 20px rgba(56,189,248,0.65);
}

/* ------------------------------
   4) EVREN KARTLARI – Nebula layers
--------------------------------*/
.universe-card {
    backdrop-filter: blur(14px) saturate(160%);
    background: rgba(7,12,22,0.72);
    position: relative;
}

/* Nebula layer */
.universe-card::after {
    content: "";
    position: absolute;
    inset: -40%;
    background:
        radial-gradient(circle at 20% 20%,
            rgba(56,189,248,0.22), transparent 55%),
        radial-gradient(circle at 80% 50%,
            rgba(129,140,248,0.25), transparent 65%);
    filter: blur(45px);
    opacity: .55;
    z-index: -1;
}

/* Hover parallax */
.universe-card:hover {
    transform: translateY(-5px) scale(1.015);
    box-shadow:
        0 0 50px rgba(56,189,248,0.45),
        0 0 70px rgba(34,197,94,0.35);
}

/* ------------------------------
   5) PAGE TRANSITION – Fade In
--------------------------------*/
.portal-content {
    animation: fadeIn 0.55s ease;
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ------------------------------
   6) FOOTER – Premium cosmic line
--------------------------------*/
.portal-footer {
    background: rgba(7,11,20,0.92);
    border-top: 1px solid rgba(148,163,184,0.3);
    box-shadow: 0 -6px 18px rgba(0,0,0,0.4);
}

.portal-footer::before {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 2px;
    background: linear-gradient(
        90deg,
        rgba(56,189,248,0),
        rgba(56,189,248,0.45),
        rgba(129,140,248,0.45),
        rgba(56,189,248,0)
    );
    opacity: .8;
}

/* ------------------------------
   7) GLOBAL BACKGROUND – Triple Nebula
--------------------------------*/
body::before {
    background:
        radial-gradient(circle at 10% 20%, rgba(56,189,248,0.18), transparent 55%),
        radial-gradient(circle at 90% 80%, rgba(15,118,110,0.18), transparent 60%),
        radial-gradient(circle at 50% 90%, rgba(129,140,248,0.22), transparent 55%);
    opacity: 1 !important;
    /* ======================================================
   STABLE AAA EFFECT PACK  (bozulma yapmayan sürüm)
   ====================================================== */

/* 1) Aktif menü highlight (bozulmaz) */
.nav-link-active {
    background: rgba(56,189,248,0.15);
    border-radius: 10px;
    color: #fff !important;
}
.nav-link-active::after {
    opacity: 1;
}

/* 2) Orbit Gezegen animasyonu (safe) */
.orbit-planet {
    animation: spinPlanet 18s linear infinite,
               floatPlanet 6s ease-in-out infinite;
}
@keyframes spinPlanet {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
@keyframes floatPlanet {
    0%   { transform: translate(0,0); }
    50%  { transform: translate(3px,4px); }
    100% { transform: translate(0,0); }
}

/* 3) Hero meta-pill premium hover (mobil bozulmaz) */
.hero-meta-pill {
    transition: 0.2s;
}
.hero-meta-pill:hover {
    border-color: rgba(56,189,248,0.8);
    background: rgba(15,23,42,0.9);
    box-shadow: 0 0 12px rgba(56,189,248,0.5);
}

/* 4) Universe kartları hover (safe glows) */
.universe-card {
    transition: transform .25s, border-color .25s, box-shadow .25s;
}
.universe-card:hover {
    transform: translateY(-4px);
    border-color: rgba(56,189,248,0.4);
    box-shadow: 0 0 25px rgba(56,189,248,0.25);
}

/* 5) Universe özellik ikonları */
.universe-features li {
    padding-left: 20px;
}
.universe-features li::before {
    position: absolute;
    left: 0;
    top: 1px;
    font-size: 12px;
}
.universe-card-primary .universe-features li:nth-child(1)::before,
.universe-card-secondary .universe-features li:nth-child(1)::before {
    content: "🚀";
}
.universe-card-primary .universe-features li:nth-child(2)::before,
.universe-card-secondary .universe-features li:nth-child(2)::before {
    content: "💰";
}
.universe-card-primary .universe-features li:nth-child(3)::before,
.universe-card-secondary .universe-features li:nth-child(3)::before {
    content: "🔬";
}
.universe-card-primary .universe-features li:nth-child(4)::before,
.universe-card-secondary .universe-features li:nth-child(4)::before {
    content: "☄";
}

/* 6) Footer neon çizgi (stabil sürüm) */
.portal-footer {
    position: relative;
}
.portal-footer::before {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 2px;
    background: linear-gradient(
        90deg,
        rgba(56,189,248,0),
        rgba(56,189,248,0.45),
        rgba(129,140,248,0.45),
        rgba(56,189,248,0)
    );
    opacity: .5;
}
}
/* HEADER PREMIUM SHINE LINE */
.portal-header {
    position: relative;
}

.portal-header::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 2px;
    background: linear-gradient(
        90deg,
        rgba(56,189,248,0),
        rgba(56,189,248,0.45),
        rgba(129,140,248,0.55),
        rgba(56,189,248,0)
    );
    opacity: 0.8;
    pointer-events: none;
}
/* HERO EPIC TITLE UPGRADE */
.hero-text h1 {
    font-size: 40px !important;
    font-weight: 800;
    letter-spacing: 0.5px;
    color: #e8f3ff;
    background: linear-gradient(180deg,#ffffff 0%, #b9dfff 60%, #7acbff 100%);
    -webkit-background-clip: text;
    color: transparent;
}
/* =======================================================
   PORTAL HEADER ALT BANNER – LOGO + ANİMASYONLU GEZEGEN
   ======================================================= */

.portal-banner {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 20px;
    margin-top: 6px;
    position: relative;
    z-index: 5;
}

/* SOLDAKİ LOGO */
.banner-logo {
    height: 90px;
    object-fit: contain;
    filter: drop-shadow(0 0 6px rgba(56,189,248,0.45));
}

/* SAĞDAKİ GEZEGEN */
.banner-right {
    width: 60px;
    height: 60px;
    position: relative;
}

.banner-planet {
    width: 60px;
    height: 60px;
    border-radius: 999px;
    background: radial-gradient(circle at 30% 30%, #ffe39a, #ffb84a, #d68522);
    box-shadow:
        0 0 18px rgba(255,189,80,0.6),
        0 0 35px rgba(255,189,80,0.35);
    animation: bannerPlanetSpin 14s linear infinite,
               bannerPlanetFloat 6s ease-in-out infinite;
}

@keyframes bannerPlanetSpin {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes bannerPlanetFloat {
    0%   { transform: translate(0,0); }
    50%  { transform: translate(3px,3px); }
    100% { transform: translate(0,0); }
}

/* Mobil uyum */
@media(max-width: 800px){
    .portal-banner {
        padding: 10px 14px;
    }
    .banner-logo {
        height: 80px;
    }
    .banner-right {
        width: 48px;
        height: 48px;
    }
    .banner-planet {
        width: 48px;
        height: 48px;
    }
}
.banner-planet {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #ffe39a, #ffbf59, #d68722);
    box-shadow:
        0 0 20px rgba(255,189,80,0.7),
        0 0 40px rgba(255,189,80,0.4);

    animation: spinPlanet 14s linear infinite,
               floatPlanet 6s ease-in-out infinite;
}

@keyframes spinPlanet {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes floatPlanet {
    0% { transform: translate(0,0); }
    50% { transform: translate(3px,3px); }
    100% { transform: translate(0,0); }
}
/* ===============================
   BANNER GEZEGEN - AAA VERSİYON
   =============================== */

.banner-right {
    position: relative;
    width: 80px;
    height: 80px;
}

.banner-planet {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 48px;
    height: 48px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #ffe5a8, #ffbf59, #d88922);
    box-shadow:
        0 0 20px rgba(255,200,120,0.8),
        0 0 40px rgba(255,200,120,0.45),
        inset 0 0 14px rgba(255,255,255,0.35);
    animation: planetSpin 8s linear infinite,
               planetFloat 6s ease-in-out infinite;
}

/* HALKA 1 */
.banner-ring-1 {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 90px;
    height: 90px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 2px solid rgba(255,200,120,0.25);
    box-shadow: 0 0 20px rgba(255,200,120,0.25);
    animation: ringPulse 4s ease-in-out infinite;
}

/* HALKA 2 (daha geniş ve daha soft) */
.banner-ring-2 {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120px;
    height: 120px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 1px solid rgba(255,200,120,0.15);
    box-shadow: 0 0 30px rgba(255,200,120,0.20);
}

/* ANİMASYONLAR */
@keyframes planetSpin {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes planetFloat {
    0% { transform: translate(-50%, -50%) translateY(0); }
    50% { transform: translate(-50%, -50%) translateY(-4px); }
    100% { transform: translate(-50%, -50%) translateY(0); }
}

@keyframes ringPulse {
    0%   { opacity: 0.35; transform: translate(-50%, -50%) scale(1); }
    50%  { opacity: 0.6; transform: translate(-50%, -50%) scale(1.05); }
    100% { opacity: 0.35; transform: translate(-50%, -50%) scale(1); }
}
/* =============================
   PREMIUM PROFILE TOP CARD
   ============================= */

.profile-topcard {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 22px 26px;
    background: radial-gradient(circle at top left, #102033 0%, #08121f 70%);
    border: 1px solid rgba(56,189,248,0.25);
    border-radius: 16px;
    box-shadow: 0 0 25px rgba(0,0,0,0.4);
    margin-bottom: 28px;
    position: relative;
}

.ptc-avatar {
    position: relative;
}

.ptc-avatar img {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid rgba(56,189,248,0.65);
    box-shadow: 0 0 18px rgba(56,189,248,0.4);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.ptc-avatar img:hover {
    transform: scale(1.04);
    box-shadow: 0 0 28px rgba(56,189,248,0.8);
}

.avatar-edit-btn {
    position: absolute;
    right: 0;
    bottom: 4px;
    background: linear-gradient(135deg, #0ea5e9, #22c55e);
    color: #0b1120;
    padding: 6px 10px;
    border-radius: 50%;
    font-size: 13px;
    cursor: pointer;
    box-shadow: 0 0 12px rgba(0,0,0,0.5);
    transition: transform .2s ease;
}

.avatar-edit-btn:hover {
    transform: scale(1.1);
}

.ptc-info {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ptc-name {
    font-size: 26px;
    font-weight: 700;
    color: #e0f6ff;
}

.ptc-meta {
    display: flex;
    gap: 8px;
}

.ptc-pill {
    background: rgba(56,189,248,0.18);
    border: 1px solid rgba(56,189,248,0.35);
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    color: #cfeaff;
}
/* ---------------- PROFILE TABS ---------------- */

.profile-tabs {
    display: flex;
    gap: 12px;
    margin: 18px 0 16px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(148,163,184,0.3);
}

.tab-btn {
    padding: 7px 16px;
    background: transparent;
    border: none;
    border-radius: 999px;
    color: #9fb6d9;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.tab-btn:hover {
    background: rgba(148,163,184,0.16);
    color: #e5f0ff;
}

.tab-btn.active {
    background: rgba(56,189,248,0.2);
    color: #f9fafb;
    box-shadow: 0 0 10px rgba(56,189,248,0.6);
}

/* Tab içerikleri */
.tab-content {
    display: none;
    animation: fadeInTab 0.25s ease;
}

.tab-content.active {
    display: block;
}

@keyframes fadeInTab {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}
/* =============================
   AAA HESAP AYAR PANELİ
   ============================= */

.account-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px 20px;
    margin-top: 12px;
}

/* Mobil uyum */
@media(max-width: 700px) {
    .account-grid {
        grid-template-columns: 1fr;
    }
}

/* İkonlu input alanları */
.icon-field {
    position: relative;
}

.icon-field input {
    padding-left: 34px; /* Ikon alanı */
}
/* Panelin AAA görünmesi için ek güçlendirme */
.panel h3 {
    margin-bottom: 12px;
    font-size: 17px;
    color: #d3ecff;
}
/* ============================================
   AAA ICON ALIGN SYSTEM — Perfect Vertical Align
   ============================================ */
/* Input ikon alanı */
.icon-field {
    position: relative;
}

/* Input içerisine boşluk bırak */
.icon-field input {
    padding-left: 42px !important;
    height: 44px;            /* tüm inputlar eşit hizada olsun */
    line-height: 44px;
}

/* İkonu otomatik dikey ortala */
.icon-field::before {
    content: "";
    position: absolute;
    left: 12px;
    top: 10px;
    height: 100%;
    width: 20px;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 18px;
    opacity: 0.8;
    pointer-events: none;
    transition: 0.2s;
}

/* Focus olduğunda ikon parlaması */
.icon-field input:focus + .dummy,
.icon-field input:focus ~ ::before {
    opacity: 1;
}
.user-icon::before {
    content: "👤";
}

.email-icon::before {
    content: "✉️";
}

.lock-icon::before {
    content: "🔒";
}
/* === AVATAR PANEL AAA STYLE === */

.avatar-panel {
    text-align: center;
}

.avatar-wrapper {
    position: relative;
    display: inline-block;
    margin-bottom: 20px;
}

.avatar-frame {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    padding: 2px;
    background: radial-gradient(circle at 50% 50%, #4dd0ff 0%, #005f89 70%);
    box-shadow: 0 0 18px rgba(0, 200, 255, 0.5);
    overflow: hidden;
    transition: 0.3s ease;
}

.avatar-frame:hover {
    box-shadow: 0 0 28px rgba(0, 200, 255, 0.8);
    transform: scale(1.05);
}

.avatar-img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    animation: avatarRotate 28s linear infinite;
    filter: brightness(1.05);
}

/* Değiştir butonu */
.avatar-change-btn {
    position: absolute;
    bottom: 0;
    right: 0;
    background: #38bdf8;
    color: #0a0f1a;
    border-radius: 50%;
    width: 42px;
    height: 42px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    cursor: pointer;
    box-shadow: 0 0 12px rgba(56, 189, 248, 0.8);
    transition: 0.25s ease;
}

.avatar-change-btn:hover {
    background: #4fe3ff;
    transform: scale(1.12);
}
.avatar-change-btn {
    position: absolute;
    bottom: 5px;
    right: 5px;
    width: 38px;
    height: 38px;
    background: linear-gradient(135deg, #3dbbff, #0077ff);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 0 12px rgba(0, 180, 255, 0.6);
    transition: 0.25s ease;
    border: 2px solid rgba(255,255,255,0.2);
}

.avatar-change-btn i {
    font-size: 18px;
    color: #fff;
}

.avatar-change-btn:hover {
    transform: scale(1.15);
    box-shadow: 0 0 18px rgba(0, 200, 255, 0.8);
}
/* ===============================
   EVREN HESAPLARIM — AAA KARTLAR
   =============================== */

.universe-account-card {
    background: rgba(15,23,42,0.75);
    border: 1px solid rgba(56,189,248,0.28);
    padding: 16px;
    border-radius: 14px;
    margin-bottom: 18px;
    box-shadow: 0 0 12px rgba(0,0,0,0.4);
}

.uac-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.uac-header h4 {
    margin: 0;
    font-size: 17px;
    font-weight: 600;
    color: #e8f7ff;
}

.uac-sub {
    font-size: 12px;
    color: #8faeca;
}

.uac-desc {
    margin: 8px 0 12px;
    color: #cdd8e5;
    font-size: 13px;
}

.uac-status-active {
    color: #22c55e;
    font-weight: 600;
}

.uac-status-soon {
    color: #eab308;
    font-weight: 600;
}

.uac-status-closed {
    color: #ef4444;
    font-weight: 600;
}

.uac-actions {
    margin-top: 10px;
}

.btn-xs {
    padding: 5px 10px;
    font-size: 11px;
    border-radius: 6px;
}
/* ===============================
   EVREN HESAPLARIM — AAA KART
   =============================== */

.universe-account-card {
    background: radial-gradient(circle at top left, rgba(56,189,248,0.06), rgba(15,23,42,0.7));
    border: 1px solid rgba(56,189,248,0.25);
    padding: 22px;
    border-radius: 16px;
    margin-bottom: 22px;
    box-shadow: 0 0 18px rgba(0,0,0,0.45);
    transition: 0.25s ease;
}

.universe-account-card:hover {
    transform: translateY(-3px);
    border-color: rgba(56,189,248,0.45);
    box-shadow: 0 0 22px rgba(56,189,248,0.35);
}

.uac-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.uac-header h4 {
    margin: 0;
    font-size: 19px;
    font-weight: 600;
    color: #e8f7ff;
}

.uac-sub {
    font-size: 13px;
    color: #94b4d1;
    margin-top: 4px;
}

.uac-desc {
    margin: 12px 0 18px;
    color: #cdd8e5;
    font-size: 14px;
    line-height: 1.45;
}

.uac-status {
    font-weight: 700;
    font-size: 13px;
}

.uac-status-active { color: #22c55e; }
.uac-status-soon   { color: #eab308; }
.uac-status-closed { color: #ef4444; }

.uac-actions .btn-primary {
    padding: 8px 18px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
}