/* =========================================================
   AKILLI BARKOD SİSTEMİ - ANA TEMA
   ========================================================= */

:root {
    --bg: #050914;
    --bg-secondary: #080d1a;
    --panel: #0b1120;
    --panel-soft: #0e1526;

    --border: rgba(148, 163, 184, 0.16);
    --border-strong: rgba(148, 163, 184, 0.25);

    --text: #f8fafc;
    --text-soft: #aab2c0;
    --text-muted: #6f7a8d;

    --purple: #c026d3;
    --violet: #7c3aed;
    --blue: #1647f5;
    --green: #00e89d;

    --sidebar-width: 204px;

    --radius-sm: 8px;
    --radius: 12px;
    --radius-lg: 16px;

    --transition: 0.22s ease;
}


/* =========================================================
   RESET
   ========================================================= */

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    min-height: 100%;
}

body {
    min-height: 100vh;
    background:
        radial-gradient(
            circle at 70% 10%,
            rgba(30, 64, 175, 0.08),
            transparent 30%
        ),
        var(--bg);

    color: var(--text);

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    -webkit-font-smoothing: antialiased;
}

button,
input,
select,
textarea {
    font: inherit;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}

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


/* =========================================================
   ANA UYGULAMA
   ========================================================= */

.app-shell {
    min-height: 100vh;
}

.app-main {
    min-height: 100vh;
    margin-left: var(--sidebar-width);
    transition: margin-left var(--transition);
}

.app-content {
    padding: 20px 22px 32px;
}


/* =========================================================
   SIDEBAR
   ========================================================= */

.sidebar {
    position: fixed;
    z-index: 1000;

    top: 0;
    left: 0;
    bottom: 0;

    width: var(--sidebar-width);

    display: flex;
    flex-direction: column;

    background:
        linear-gradient(
            180deg,
            rgba(4, 8, 20, 0.99),
            rgba(5, 9, 20, 0.97)
        );

    border-right: 1px solid var(--border);

    transition: width var(--transition);
}

.sidebar-logo {
    height: 100px;

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

.logo-icon {
    position: relative;

    width: 66px;
    height: 58px;
}

.logo-icon::before {
    content: "";

    position: absolute;

    left: 14px;
    top: 11px;

    width: 36px;
    height: 36px;

    background:
        repeating-linear-gradient(
            90deg,
            #d620e6 0 3px,
            transparent 3px 6px
        );
}

.logo-icon::after {
    content: "";

    position: absolute;
    inset: 3px;

    border:
        3px solid transparent;

    border-left-color: #db22e7;
    border-right-color: #6b45ff;
}

.sidebar-nav {
    padding: 12px 16px;

    display: flex;
    flex-direction: column;

    gap: 9px;
}

.nav-item {
    position: relative;

    min-height: 56px;

    display: flex;
    align-items: center;

    gap: 14px;

    padding: 0 15px;

    border: 1px solid transparent;
    border-radius: 9px;

    color: #e3e7ef;

    transition:
        background var(--transition),
        border-color var(--transition),
        transform var(--transition);
}

.nav-item:hover {
    background: rgba(255, 255, 255, 0.045);
    border-color: var(--border);
}

.nav-item.active {
    background:
        linear-gradient(
            110deg,
            #bd20d1 0%,
            #7628e8 48%,
            #1647f5 100%
        );

    border-color: rgba(255, 255, 255, 0.15);

    box-shadow:
        0 10px 28px rgba(37, 50, 220, 0.22);
}

.nav-icon {
    width: 23px;
    height: 23px;

    flex: 0 0 23px;
}

.nav-icon svg {
    width: 100%;
    height: 100%;

    fill: none;

    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.nav-text {
    font-size: 15px;
    white-space: nowrap;
}

.sidebar-collapse {
    margin: auto auto 22px;

    width: 40px;
    height: 40px;

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

    border: 1px solid var(--border);
    border-radius: 50%;

    background: #0a1020;
    color: #e7ebf2;

    cursor: pointer;

    transition:
        background var(--transition),
        border-color var(--transition);
}

.sidebar-collapse:hover {
    background: #111a2d;
    border-color: var(--border-strong);
}


/* =========================================================
   TOPBAR
   ========================================================= */

.topbar {
    min-height: 96px;

    padding: 19px 28px 15px;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 24px;

    border-bottom: 1px solid rgba(148, 163, 184, 0.08);
}

.topbar-left {
    display: flex;
    align-items: flex-start;

    gap: 18px;
}

.page-heading h1 {
    margin: 0;

    font-size: 27px;
    line-height: 1.2;

    font-weight: 700;
    letter-spacing: -0.5px;
}

.page-heading p {
    margin: 6px 0 0;

    color: var(--text-soft);

    font-size: 14px;
}

.system-status {
    margin-top: 2px;

    min-height: 31px;

    display: flex;
    align-items: center;

    gap: 8px;

    padding: 0 12px;

    border: 1px solid rgba(0, 232, 157, 0.25);
    border-radius: 8px;

    color: var(--green);

    background: rgba(0, 232, 157, 0.025);

    font-size: 13px;
}

.status-dot {
    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: var(--green);

    box-shadow:
        0 0 12px rgba(0, 232, 157, 0.6);
}

.topbar-right {
    display: flex;
    align-items: center;

    gap: 12px;
}


/* =========================================================
   DİL SEÇİCİ
   ========================================================= */

.language-button {
    height: 44px;

    display: flex;
    align-items: center;

    gap: 8px;

    padding: 0 13px;

    border: 1px solid var(--border);
    border-radius: 10px;

    background: rgba(10, 16, 31, 0.75);

    color: var(--text);

    cursor: pointer;
}

.language-button:hover {
    border-color: var(--border-strong);
}


/* =========================================================
   KULLANICI MENÜSÜ
   ========================================================= */

.user-button {
    min-height: 50px;

    display: flex;
    align-items: center;

    gap: 11px;

    padding: 4px 10px 4px 5px;

    border: 0;

    background: transparent;
    color: var(--text);

    cursor: pointer;
}

.user-avatar {
    width: 46px;
    height: 46px;

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

    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 50%;
}

.user-avatar svg {
    width: 25px;
    height: 25px;

    fill: none;

    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.user-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    min-width: 100px;
}

.user-info strong {
    font-size: 14px;
    font-weight: 600;
}

.user-info small {
    margin-top: 3px;

    color: var(--text-soft);

    font-size: 12px;
}

.user-arrow {
    margin-left: 2px;

    color: var(--text-soft);

    font-size: 18px;
}


/* =========================================================
   ORTAK PANEL / KART ALTYAPISI
   ========================================================= */

.panel {
    background:
        linear-gradient(
            145deg,
            rgba(12, 18, 34, 0.96),
            rgba(8, 14, 27, 0.96)
        );

    border: 1px solid var(--border);

    border-radius: var(--radius);

    box-shadow:
        0 14px 35px rgba(0, 0, 0, 0.15);
}

.panel-header {
    padding: 17px 20px;

    border-bottom: 1px solid var(--border);
}

.panel-body {
    padding: 20px;
}


/* =========================================================
   FORM ALTYAPISI
   ========================================================= */

.form-control {
    width: 100%;
    min-height: 48px;

    padding: 0 14px;

    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);

    outline: none;

    background: rgba(6, 11, 23, 0.85);

    color: var(--text);

    transition:
        border-color var(--transition),
        box-shadow var(--transition);
}

.form-control::placeholder {
    color: #778196;
}

.form-control:focus {
    border-color: #6948ff;

    box-shadow:
        0 0 0 3px rgba(105, 72, 255, 0.10);
}


/* =========================================================
   ORTAK BUTON
   ========================================================= */

.btn-primary {
    min-height: 48px;

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

    padding: 0 20px;

    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-sm);

    background:
        linear-gradient(
            100deg,
            #c323ce,
            #7628e8 48%,
            #1647f5
        );

    color: #fff;

    font-weight: 600;

    cursor: pointer;

    transition:
        transform var(--transition),
        filter var(--transition);
}

.btn-primary:hover {
    filter: brightness(1.08);
}

.btn-primary:active {
    transform: translateY(1px);
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 900px) {

    :root {
        --sidebar-width: 76px;
    }

    .sidebar-logo {
        height: 82px;
    }

    .sidebar-nav {
        padding-left: 10px;
        padding-right: 10px;
    }

    .nav-item {
        justify-content: center;

        padding-left: 0;
        padding-right: 0;
    }

    .nav-text {
        display: none;
    }

    .topbar {
        padding-left: 18px;
        padding-right: 18px;
    }

    .user-info {
        display: none;
    }
}


@media (max-width: 650px) {

    :root {
        --sidebar-width: 64px;
    }

    .app-content {
        padding: 14px;
    }

    .topbar {
        min-height: auto;

        padding: 14px;

        align-items: center;
    }

    .topbar-left {
        gap: 10px;
    }

    .page-heading h1 {
        font-size: 20px;
    }

    .page-heading p {
        display: none;
    }

    .system-status {
        display: none;
    }

    .language-switcher {
        display: none;
    }

    .user-avatar {
        width: 40px;
        height: 40px;
    }

    .sidebar-collapse {
        display: none;
    }
}

/* =========================================================
   TEMEL LAYOUT V1 - ORTAK MASAÜSTÜ / MOBİL KABUK
   Barkod motorundan bağımsızdır.
   ========================================================= */
:root {
    --sidebar-width: 204px;
    --content-max: 1680px;
}

html { overflow-x: hidden; }
body { overflow-x: hidden; }

.app-shell { width: 100%; min-height: 100vh; }
.app-main {
    width: calc(100% - var(--sidebar-width));
    margin-left: var(--sidebar-width);
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.app-content {
    width: 100%;
    min-width: 0;
    flex: 1 0 auto;
}
.content-frame {
    width: 100%;
    max-width: var(--content-max);
    margin: 0 auto;
    min-width: 0;
}
.content-frame > * { min-width: 0; max-width: 100%; }

.topbar {
    width: 100%;
    min-width: 0;
}
.desktop-topbar-left,
.desktop-topbar-right { display: flex; }
.desktop-topbar-left { align-items: flex-start; gap: 18px; }
.desktop-topbar-right { align-items: center; gap: 12px; }
.mobile-topbar { display: none; }

.sidebar-backdrop { display: none; }
.mobile-sidebar-close { display: none; }

.app-footer {
    padding: 18px 24px 22px;
    color: var(--text-muted);
    font-size: 12px;
    text-align: center;
    border-top: 1px solid rgba(148,163,184,.07);
}

/* Büyük ekran: referans görseldeki gibi solda sabit menü, sağda tam çalışma alanı */
@media (min-width: 901px) {
    .sidebar { width: var(--sidebar-width); }
    .app-main { margin-left: var(--sidebar-width); }
}

/* Tablet ve mobil: sidebar artık içerikten tek piksel bile çalmaz. */
@media (max-width: 900px) {
    :root { --sidebar-width: 0px; }

    .app-main {
        width: 100%;
        margin-left: 0;
    }

    .sidebar {
        width: min(82vw, 300px);
        transform: translateX(-105%);
        box-shadow: 18px 0 50px rgba(0,0,0,.42);
        transition: transform .24s ease;
        z-index: 3000;
    }
    body.mobile-menu-open .sidebar { transform: translateX(0); }

    .sidebar-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 2990;
        background: rgba(1,5,14,.72);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity .22s ease, visibility .22s ease;
    }
    body.mobile-menu-open .sidebar-backdrop {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .sidebar-logo {
        position: relative;
        height: 88px;
    }
    .mobile-sidebar-close {
        display: grid;
        place-items: center;
        position: absolute;
        right: 14px;
        top: 14px;
        width: 38px;
        height: 38px;
        border: 1px solid var(--border);
        border-radius: 10px;
        background: rgba(10,16,31,.88);
        color: var(--text);
        font-size: 25px;
        cursor: pointer;
    }
    .sidebar-nav { padding: 8px 14px 18px; }
    .nav-item {
        justify-content: flex-start;
        padding: 0 15px;
    }
    .nav-text { display: inline; }
    .sidebar-collapse { display: none; }

    .topbar {
        min-height: 72px;
        padding: 0 16px;
        align-items: center;
        border-bottom: 1px solid var(--border);
        background: rgba(5,9,20,.96);
        position: sticky;
        top: 0;
        z-index: 1200;
    }
    .desktop-topbar-left,
    .desktop-topbar-right { display: none; }

    .mobile-topbar {
        width: 100%;
        display: grid;
        grid-template-columns: 48px 1fr 48px;
        align-items: center;
    }
    .mobile-menu-button,
    .mobile-user-button {
        width: 44px;
        height: 44px;
        border: 1px solid rgba(124,58,237,.55);
        border-radius: 12px;
        background: #0a1020;
        color: var(--text);
        cursor: pointer;
    }
    .mobile-menu-button {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 5px;
    }
    .mobile-menu-button span {
        width: 20px;
        height: 2px;
        border-radius: 2px;
        background: currentColor;
    }
    .mobile-user-button {
        justify-self: end;
        padding: 0;
        border-color: var(--border-strong);
    }
    .mobile-user-button .user-avatar {
        width: 42px;
        height: 42px;
        border: 0;
    }

    .mobile-brand {
        justify-self: center;
        width: 58px;
        height: 48px;
        display: grid;
        place-items: center;
    }
    .mobile-brand-icon {
        width: 48px;
        height: 40px;
        position: relative;
        background: repeating-linear-gradient(90deg,#d620e6 0 3px,transparent 3px 6px);
        background-size: 32px 30px;
        background-repeat: no-repeat;
        background-position: center;
    }
    .mobile-brand-icon::before,
    .mobile-brand-icon::after {
        content:"";
        position:absolute;
        top:3px;
        bottom:3px;
        width:8px;
        border-top:2px solid #d620e6;
        border-bottom:2px solid #6b45ff;
    }
    .mobile-brand-icon::before { left:0; border-left:2px solid #d620e6; }
    .mobile-brand-icon::after { right:0; border-right:2px solid #6b45ff; }

    .app-content { padding: 14px; }
    .app-footer { padding: 16px 14px 20px; }
}

@media (max-width: 520px) {
    .topbar { padding-left: 10px; padding-right: 10px; }
    .app-content { padding: 10px; }
    .panel { max-width: 100%; }
}

/* Menü açıkken arka sayfa mobilde kaymasın. */
body.mobile-menu-open { overflow: hidden; }


/* =========================================================
   TEMEL LAYOUT V1.1 - KESİN RESPONSIVE DÜZELTME
   ========================================================= */

/* Desktop: mobil elemanları kesin gizle. */
@media (min-width: 901px) {
    .mobile-topbar,
    .mobile-sidebar-close,
    .sidebar-backdrop {
        display: none !important;
    }

    .sidebar {
        display: flex !important;
        width: 204px !important;
        transform: none !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .app-main {
        width: calc(100% - 204px) !important;
        margin-left: 204px !important;
        min-width: 0 !important;
    }

    .desktop-topbar-left,
    .desktop-topbar-right {
        display: flex !important;
    }
}

/* Tablet + telefon: sidebar içerikten tamamen çıkar. */
@media (max-width: 900px) {
    html,
    body {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    .app-shell {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .app-main {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        margin-left: 0 !important;
        padding: 0 !important;
        transform: none !important;
    }

    .app-content {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    .content-frame {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 auto !important;
    }

    .sidebar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        bottom: 0 !important;
        z-index: 3000 !important;

        display: flex !important;
        width: min(84vw, 300px) !important;
        min-width: 0 !important;
        max-width: 300px !important;

        margin: 0 !important;
        transform: translate3d(-110%, 0, 0) !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;

        transition:
            transform .24s ease,
            opacity .18s ease,
            visibility .18s ease !important;
    }

    body.mobile-menu-open .sidebar {
        transform: translate3d(0, 0, 0) !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    .sidebar-backdrop {
        display: block !important;
        position: fixed !important;
        inset: 0 !important;
        z-index: 2990 !important;
        background: rgba(1, 5, 14, .68) !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    body.mobile-menu-open .sidebar-backdrop {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    .mobile-sidebar-close {
        display: grid !important;
    }

    .topbar {
        position: sticky !important;
        top: 0 !important;
        z-index: 1200 !important;
        width: 100% !important;
        min-height: 64px !important;
        height: 64px !important;
        padding: 0 10px !important;
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
        background: rgba(5, 9, 20, .98) !important;
    }

    .desktop-topbar-left,
    .desktop-topbar-right {
        display: none !important;
    }

    .mobile-topbar {
        display: grid !important;
        width: 100% !important;
        grid-template-columns: 48px minmax(0,1fr) 48px !important;
        align-items: center !important;
    }

    .app-footer {
        width: 100% !important;
        box-sizing: border-box !important;
    }
}

@media (max-width: 520px) {
    .app-content {
        padding: 10px !important;
    }

    .content-frame,
    .content-frame > * {
        max-width: 100% !important;
        min-width: 0 !important;
    }
}


/* =========================================================
   MEMBERSHIP V1 - AUTH / ADMIN / ACCOUNT
   ========================================================= */

.auth-page {
    min-height: calc(100vh - 190px);
    display: grid;
    place-items: center;
    padding: 28px 0 48px;
}

.auth-card,
.admin-panel {
    width: min(100%, 620px);
    border: 1px solid var(--border-strong);
    border-radius: 18px;
    background:
        radial-gradient(circle at 85% 0%, rgba(37, 99, 235, .09), transparent 32%),
        linear-gradient(180deg, rgba(14, 21, 38, .98), rgba(8, 13, 26, .98));
    box-shadow: 0 24px 80px rgba(0, 0, 0, .22);
}

.auth-card {
    padding: 28px;
}

.auth-card-wide {
    width: min(100%, 760px);
}

.auth-card-head {
    margin-bottom: 24px;
}

.auth-kicker {
    display: inline-flex;
    margin-bottom: 9px;
    color: #8fb1ff;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.auth-card h2,
.admin-panel h2,
.admin-panel h3 {
    margin: 0;
    color: #fff;
}

.auth-card-head p,
.admin-panel-head p,
.admin-note {
    margin: 8px 0 0;
    color: var(--text-soft);
    line-height: 1.6;
}

.auth-form,
.admin-form {
    display: grid;
    gap: 12px;
}

.field-label {
    margin-top: 4px;
    color: #d7deea;
    font-size: 13px;
    font-weight: 700;
}

.field-label span {
    color: var(--text-muted);
    font-weight: 500;
}

.theme-input {
    width: 100%;
    min-height: 50px;
    padding: 0 15px;
    border: 1px solid var(--border-strong);
    border-radius: 11px;
    outline: 0;
    background: #070d19;
    color: #fff;
    transition: border-color .18s ease, box-shadow .18s ease;
}

.theme-input:focus {
    border-color: rgba(99, 102, 241, .9);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, .13);
}

.auth-grid-two {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.remember-row {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    width: max-content;
    margin: 4px 0 6px;
    color: var(--text-soft);
    font-size: 13px;
}

.remember-row input {
    width: 17px;
    height: 17px;
    accent-color: #6d4aff;
}

.gradient-button {
    border: 0;
    border-radius: 11px;
    background: linear-gradient(90deg, #c321d1, #7c32ef 50%, #1f55ff);
    color: #fff;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 10px 28px rgba(37, 99, 235, .13);
}

.auth-submit,
.admin-save {
    min-height: 52px;
    margin-top: 8px;
}

.auth-footer-line {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 22px;
    color: var(--text-soft);
    font-size: 13px;
}

.auth-footer-line a {
    color: #86a8ff;
    font-weight: 700;
}

.theme-alert {
    margin-bottom: 16px;
    padding: 12px 14px;
    border-radius: 10px;
    font-size: 13px;
}

.theme-alert.danger {
    border: 1px solid rgba(239, 68, 68, .35);
    background: rgba(127, 29, 29, .18);
    color: #fecaca;
}

.theme-alert.success {
    border: 1px solid rgba(16, 185, 129, .32);
    background: rgba(6, 78, 59, .18);
    color: #a7f3d0;
}

.global-toast-message {
    margin: 0 0 16px;
    padding: 12px 15px;
    border: 1px solid rgba(16, 185, 129, .28);
    border-radius: 10px;
    background: rgba(6, 78, 59, .16);
    color: #a7f3d0;
    font-size: 13px;
}

.guest-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.header-login,
.header-register {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 15px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 750;
}

.header-login {
    border: 1px solid var(--border-strong);
    color: #dce3ef;
}

.header-register {
    border: 1px solid rgba(99, 102, 241, .45);
    background: linear-gradient(90deg, rgba(192,38,211,.85), rgba(37,99,235,.9));
    color: #fff;
}

.account-menu {
    position: relative;
}

.account-menu > summary {
    list-style: none;
}

.account-menu > summary::-webkit-details-marker {
    display: none;
}

.account-dropdown {
    position: absolute;
    z-index: 1200;
    right: 0;
    top: calc(100% + 10px);
    width: 230px;
    overflow: hidden;
    border: 1px solid var(--border-strong);
    border-radius: 12px;
    background: #080e1b;
    box-shadow: 0 20px 55px rgba(0,0,0,.38);
}

.account-dropdown-head {
    display: grid;
    gap: 4px;
    padding: 14px;
    border-bottom: 1px solid var(--border);
}

.account-dropdown-head strong {
    overflow: hidden;
    color: #fff;
    font-size: 12px;
    text-overflow: ellipsis;
}

.account-dropdown-head small {
    color: var(--text-muted);
}

.account-dropdown-link {
    width: 100%;
    min-height: 43px;
    display: flex;
    align-items: center;
    padding: 0 14px;
    border: 0;
    background: transparent;
    color: #dfe6f2;
    font-size: 13px;
    text-align: left;
    cursor: pointer;
}

.account-dropdown-link:hover {
    background: rgba(255,255,255,.045);
}

.account-logout {
    color: #fca5a5;
}

.admin-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(260px, .8fr);
    gap: 18px;
}

.admin-panel {
    width: 100%;
    padding: 24px;
}

.admin-panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 22px;
}

.admin-badge {
    display: inline-flex;
    padding: 6px 9px;
    border: 1px solid rgba(0,232,157,.28);
    border-radius: 8px;
    background: rgba(0,232,157,.08);
    color: #5ff0bd;
    font-size: 11px;
    font-weight: 800;
}

.quota-setting {
    display: grid;
    grid-template-columns: 1fr 150px;
    align-items: center;
    gap: 20px;
    padding: 16px 0;
    border-bottom: 1px solid var(--border);
}

.quota-setting strong,
.quota-setting small {
    display: block;
}

.quota-setting strong {
    margin-bottom: 5px;
    color: #f3f6fb;
}

.quota-setting small {
    color: var(--text-muted);
    line-height: 1.45;
}

.quota-input {
    text-align: center;
    font-size: 17px;
    font-weight: 800;
}

.admin-info-panel {
    align-self: start;
}

.admin-checks {
    display: grid;
    gap: 10px;
    margin-top: 18px;
}

.admin-checks span {
    color: #cbd5e1;
    font-size: 13px;
}

.admin-note {
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid var(--border);
    font-size: 12px;
}

@media (max-width: 900px) {
    .admin-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .auth-page {
        min-height: 0;
        padding: 6px 0 24px;
    }

    .auth-card,
    .admin-panel {
        border-radius: 14px;
    }

    .auth-card {
        padding: 18px 15px;
    }

    .auth-grid-two {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .quota-setting {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .quota-input {
        text-align: left;
    }

    .guest-actions {
        display: none;
    }

    .admin-panel {
        padding: 18px 15px;
    }
}


/* =========================================================
   MEMBERSHIP V1.1 - GERÇEK KOTA MODALI
   ========================================================= */

html.quota-modal-open,
html.quota-modal-open body {
    overflow: hidden;
}

.quota-modal[hidden] {
    display: none !important;
}

.quota-modal {
    position: fixed;
    z-index: 5000;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 20px;
}

.quota-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(1, 5, 14, .72);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.quota-modal-card {
    position: relative;
    z-index: 1;
    width: min(100%, 520px);
    padding: 28px;
    border: 1px solid rgba(91, 116, 170, .42);
    border-radius: 20px;
    background:
        radial-gradient(circle at 90% 0%, rgba(73, 56, 255, .16), transparent 34%),
        linear-gradient(180deg, #0d1628, #070d19);
    box-shadow:
        0 30px 90px rgba(0, 0, 0, .48),
        0 0 0 1px rgba(255, 255, 255, .02);
    color: #fff;
}

.quota-modal-close {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border: 1px solid var(--border-strong);
    border-radius: 10px;
    background: #0a1120;
    color: #aab6ca;
    font-size: 24px;
    cursor: pointer;
}

.quota-modal-icon {
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    margin-bottom: 18px;
    border: 1px solid rgba(245, 158, 11, .32);
    border-radius: 16px;
    background: rgba(245, 158, 11, .10);
    color: #fbbf24;
    font-size: 28px;
    font-weight: 900;
}

.quota-modal-kicker {
    color: #8fb1ff;
    font-size: 11px;
    font-weight: 850;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.quota-modal-copy h2 {
    margin: 7px 0 10px;
    color: #fff;
    font-size: clamp(22px, 4vw, 30px);
}

.quota-modal-copy p {
    margin: 0;
    color: #aebbd0;
    line-height: 1.65;
}

.quota-modal-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 24px;
}

.quota-modal-actions[hidden] {
    display: none !important;
}

.quota-button {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 16px;
    border: 0;
    border-radius: 11px;
    font: inherit;
    font-size: 13px;
    font-weight: 850;
    text-decoration: none;
    cursor: pointer;
}

.quota-button-primary {
    background: linear-gradient(90deg, #c321d1, #7337ee 50%, #2454ff);
    color: #fff;
}

.quota-button-secondary {
    border: 1px solid var(--border-strong);
    background: #09111f;
    color: #e5ebf5;
}

.quota-low-badge {
    position: fixed;
    z-index: 4200;
    right: 18px;
    bottom: 18px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 0 13px;
    border: 1px solid rgba(245, 158, 11, .28);
    border-radius: 999px;
    background: rgba(8, 14, 27, .94);
    box-shadow: 0 12px 35px rgba(0,0,0,.24);
    color: #f8d27d;
    font-size: 12px;
    font-weight: 800;
}

.quota-low-badge[hidden] {
    display: none !important;
}

.quota-low-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #f59e0b;
    box-shadow: 0 0 10px rgba(245, 158, 11, .55);
}

@media (max-width: 760px) {
    .quota-modal {
        padding: 14px;
    }

    .quota-modal-card {
        padding: 22px 18px 18px;
        border-radius: 16px;
    }

    .quota-modal-actions {
        grid-template-columns: 1fr;
    }

    .quota-low-badge {
        right: 12px;
        bottom: calc(78px + env(safe-area-inset-bottom));
    }
}


/* MEMBERSHIP V1.2.1 - Paket yönlendirme kabuğu */
.packages-shell {
    display: grid;
    gap: 22px;
}

.packages-intro {
    padding: 26px;
    border: 1px solid var(--border-strong);
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(14,21,38,.98), rgba(8,13,26,.98));
}

.packages-intro h2 {
    margin: 0 0 8px;
    color: #fff;
}

.packages-intro p {
    margin: 0;
    color: var(--text-soft);
    line-height: 1.6;
}

.packages-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.package-card {
    padding: 24px;
    border: 1px solid var(--border-strong);
    border-radius: 18px;
    background: #0b1324;
}

.package-card-featured {
    border-color: rgba(99,102,241,.55);
    box-shadow: 0 0 0 3px rgba(79,70,229,.08);
}

.package-label {
    color: #8fb1ff;
    font-size: 12px;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.package-card h3 {
    margin: 10px 0 8px;
    color: #fff;
}

.package-card p {
    color: var(--text-soft);
    line-height: 1.6;
}

.package-button {
    width: 100%;
    min-height: 50px;
    margin-top: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 12px;
    opacity: 1;
    cursor: pointer;
    pointer-events: auto;
    color: #fff;
    text-decoration: none;
    font-weight: 900;
    background: linear-gradient(
        90deg,
        #c321d1 0%,
        #7c32ef 52%,
        #245cff 100%
    );
    box-shadow:
        0 12px 30px rgba(65,72,255,.18),
        inset 0 1px 0 rgba(255,255,255,.10);
    transition:
        transform .16s ease,
        filter .16s ease,
        box-shadow .16s ease;
}

.package-button:hover {
    transform: translateY(-2px);
    filter: brightness(1.08);
    box-shadow:
        0 16px 34px rgba(65,72,255,.26),
        inset 0 1px 0 rgba(255,255,255,.14);
}

.package-button:active {
    transform: translateY(0);
}

.package-button:focus-visible {
    outline: 3px solid rgba(96,165,250,.42);
    outline-offset: 3px;
}

@media (max-width: 760px) {
    .packages-grid {
        grid-template-columns: 1fr;
    }
}


/* =========================================================
   MEMBERSHIP V1.3 - MODÜLER PAKET / ÖDEME
   ========================================================= */
.membership-active-banner,
.payment-summary-card,
.bank-transfer-card,
.payment-status-card {
    border: 1px solid var(--border-strong);
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(14,21,38,.98), rgba(8,13,26,.98));
    box-shadow: 0 20px 60px rgba(0,0,0,.18);
}

.membership-active-banner {
    display:flex;align-items:center;justify-content:space-between;gap:18px;padding:18px 22px;
}
.membership-active-banner div{display:grid;gap:4px}
.membership-active-banner strong{color:#fff;font-size:18px}
.membership-active-banner small{color:var(--text-soft)}
.membership-active-pill{padding:6px 10px;border-radius:999px;background:rgba(16,185,129,.12);color:#6ee7b7;font-weight:800;font-size:12px}

.package-price{margin:14px 0;color:#fff;font-size:30px;font-weight:900}
.package-button{display:flex;align-items:center;justify-content:center;text-decoration:none}

.payment-flow-shell,.bank-transfer-shell,.payment-status-shell,.payment-admin-shell,.payment-detail-shell,.admin-billing-shell{display:grid;gap:18px}
.payment-summary-card{padding:24px;display:grid;gap:7px}
.payment-summary-card h2{margin:0;color:#fff}
.payment-summary-card>strong{color:#fff;font-size:28px}
.payment-summary-card>small{color:var(--text-soft)}

.payment-method-grid{display:grid;gap:12px}
.payment-method-card{
    display:grid;grid-template-columns:52px 1fr auto;align-items:center;gap:14px;
    padding:16px 18px;border:1px solid var(--border-strong);border-radius:14px;
    background:#0a1222;color:#fff;text-decoration:none;transition:.16s ease
}
.payment-method-card:hover{border-color:rgba(99,102,241,.65);transform:translateY(-1px)}
.payment-method-icon{width:46px;height:46px;display:grid;place-items:center;border-radius:12px;background:rgba(99,102,241,.12);color:#9bb5ff;font-weight:900}
.payment-method-card div{display:grid;gap:4px}
.payment-method-card small{color:var(--text-soft);line-height:1.45}
.payment-method-arrow{font-size:28px;color:#8290a8}

.bank-transfer-card,.payment-status-card{padding:26px}
.bank-transfer-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px}
.bank-transfer-head h2{margin:0;color:#fff}
.bank-transfer-head p{color:var(--text-soft);line-height:1.6}
.payment-status-pill{display:inline-flex;padding:6px 10px;border-radius:999px;font-size:11px;font-weight:900;text-transform:uppercase}
.payment-status-pill.pending{background:rgba(245,158,11,.12);color:#fbbf24}
.payment-status-pill.approved{background:rgba(16,185,129,.12);color:#6ee7b7}
.payment-status-pill.rejected{background:rgba(239,68,68,.12);color:#fca5a5}

.payment-reference-box{
    margin:20px 0;padding:18px;border:1px solid rgba(245,158,11,.38);border-radius:14px;
    background:rgba(120,53,15,.13);display:grid;gap:6px;text-align:center
}
.payment-reference-box span{color:#fbbf24;font-size:11px;font-weight:900;letter-spacing:.08em}
.payment-reference-box strong{color:#fff;font-size:30px;letter-spacing:.08em}
.payment-reference-box small{color:#d8c292;line-height:1.5}

.bank-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.bank-detail{padding:14px;border:1px solid var(--border);border-radius:11px;background:#070d19;display:grid;gap:6px}
.bank-detail span{color:var(--text-muted);font-size:11px;text-transform:uppercase}
.bank-detail strong{color:#fff;word-break:break-word}
.bank-detail-wide{grid-column:1/-1}
.iban-value{font-size:18px;letter-spacing:.04em}
.bank-transfer-note,.payment-note-box,.payment-admin-note{margin-top:14px;padding:13px 14px;border-radius:11px;background:rgba(59,130,246,.08);color:#cbd5e1;line-height:1.55}
.theme-textarea{width:100%;padding:12px 14px;border:1px solid var(--border-strong);border-radius:11px;background:#070d19;color:#fff;resize:vertical}
.bank-transfer-form{display:grid;gap:10px;margin-top:18px}
.bank-notify-button{min-height:52px}
.payment-pending-box{margin-top:18px;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px;border:1px solid rgba(245,158,11,.25);border-radius:12px;background:rgba(120,53,15,.08)}
.payment-pending-box div{display:grid;gap:3px}
.payment-pending-box span{color:var(--text-soft);font-size:12px}

.payment-status-card{max-width:720px;display:grid;gap:14px}
.payment-status-card h2{margin:0;color:#fff}
.payment-status-amount{font-size:30px;color:#fff}
.payment-reference-inline{padding:12px 14px;border:1px solid rgba(245,158,11,.28);border-radius:10px;color:#d7c08b;background:rgba(120,53,15,.08)}
.payment-status-card p{color:var(--text-soft);line-height:1.65}

.admin-billing-form{display:grid;gap:18px}
.admin-billing-fields{display:grid;gap:10px}
.admin-billing-save{min-height:52px}
.admin-switch{display:flex;align-items:center;gap:8px;color:#dbe4f3;font-size:13px;font-weight:700}
.admin-switch input{width:18px;height:18px;accent-color:#6d4aff}

.payment-filter-row{display:flex;flex-wrap:wrap;gap:8px}
.payment-filter-row a{padding:8px 12px;border:1px solid var(--border);border-radius:9px;color:#cbd5e1;text-decoration:none;font-size:12px}
.payment-filter-row a.active{border-color:rgba(99,102,241,.6);background:rgba(79,70,229,.12);color:#fff}

.payment-detail-card{width:100%!important}
.payment-detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.payment-detail-grid>div{padding:13px;border:1px solid var(--border);border-radius:10px;background:#070d19;display:grid;gap:5px}
.payment-detail-grid span{color:var(--text-muted);font-size:11px;text-transform:uppercase}
.payment-detail-grid strong{color:#fff}
.reference-highlight{color:#fbbf24!important;font-size:21px}
.payment-admin-actions{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:18px}
.payment-admin-actions form{display:grid;gap:10px;padding:14px;border:1px solid var(--border);border-radius:12px}
.payment-approve-button{min-height:48px}
.payment-reject-button{min-height:48px;border:1px solid rgba(239,68,68,.5);border-radius:11px;background:rgba(127,29,29,.32);color:#fecaca;font-weight:800;cursor:pointer}

@media(max-width:760px){
    .bank-transfer-head{display:grid}
    .bank-detail-grid,.payment-detail-grid,.payment-admin-actions{grid-template-columns:1fr}
    .payment-pending-box{display:grid}
}


/* =========================================================
   MEMBERSHIP V1.3.3 - TWO STEP BANK TRANSFER
   ========================================================= */

.bank-confirm-shell {
    display: grid;
    place-items: center;
    min-height: 55vh;
}

.bank-confirm-card {
    width: min(100%, 720px);
    padding: 30px;
    border: 1px solid var(--border-strong);
    border-radius: 20px;
    background:
        radial-gradient(circle at 90% 0%, rgba(74, 60, 255, .14), transparent 34%),
        linear-gradient(180deg, #0d1628, #070d19);
    box-shadow: 0 24px 70px rgba(0,0,0,.24);
}

.bank-confirm-icon,
.bank-selected-success-icon {
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(16, 185, 129, .13);
    color: #6ee7b7;
    border: 1px solid rgba(16,185,129,.38);
    font-weight: 950;
}

.bank-confirm-icon {
    width: 58px;
    height: 58px;
    margin-bottom: 18px;
    font-size: 28px;
}

.bank-confirm-card h2 {
    margin: 6px 0 18px;
    color: #fff;
}

.bank-confirm-card > p {
    margin: 18px 0;
    color: var(--text-soft);
    line-height: 1.65;
}

.bank-confirm-summary {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.bank-confirm-summary > div {
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 11px;
    background: #070d19;
    display: grid;
    gap: 5px;
}

.bank-confirm-summary span {
    color: var(--text-muted);
    font-size: 11px;
    text-transform: uppercase;
}

.bank-confirm-summary strong {
    color: #fff;
    font-size: 18px;
}

.bank-confirm-button {
    width: 100%;
    min-height: 54px;
}

.bank-confirm-back {
    display: block;
    margin-top: 14px;
    color: #92a3bf;
    text-align: center;
    text-decoration: none;
}

.bank-selected-success {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 22px;
    padding: 15px 16px;
    border: 1px solid rgba(16,185,129,.33);
    border-radius: 13px;
    background: rgba(6,78,59,.13);
}

.bank-selected-success-icon {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    font-size: 21px;
}

.bank-selected-success > div {
    display: grid;
    gap: 3px;
}

.bank-selected-success strong {
    color: #a7f3d0;
}

.bank-selected-success span {
    color: #8fcdb7;
    font-size: 12px;
}

.bank-notification-area {
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
}

.bank-notification-warning {
    display: grid;
    gap: 4px;
    padding: 13px 14px;
    border: 1px solid rgba(245,158,11,.25);
    border-radius: 11px;
    background: rgba(120,53,15,.08);
}

.bank-notification-warning strong {
    color: #fbbf24;
}

.bank-notification-warning span {
    color: #d8c292;
    font-size: 12px;
    line-height: 1.5;
}

.payment-member-identity {
    display: grid;
    grid-template-columns: .65fr 1fr 1.5fr;
    gap: 12px;
    margin: 18px 0;
}

.payment-member-identity > div {
    padding: 15px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: #070d19;
    display: grid;
    gap: 5px;
}

.payment-member-identity span {
    color: var(--text-muted);
    font-size: 11px;
    text-transform: uppercase;
}

.payment-member-identity strong {
    color: #fff;
}

.payment-member-identity small {
    color: var(--text-soft);
}

@media (max-width: 760px) {
    .bank-confirm-summary,
    .payment-member-identity {
        grid-template-columns: 1fr;
    }

    .bank-confirm-card {
        padding: 22px 18px;
    }
}


/* =========================================================
   MEMBERSHIP V1.3.4 - DEVAM EDEN ÖDEME / MEVCUT PAKET
   ========================================================= */

.membership-payment-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 18px 22px;
    border: 1px solid rgba(245, 158, 11, .30);
    border-radius: 16px;
    background:
        linear-gradient(
            180deg,
            rgba(120, 53, 15, .12),
            rgba(8, 13, 26, .98)
        );
}

.membership-payment-banner > div {
    display: grid;
    gap: 4px;
}

.membership-payment-banner strong {
    color: #fff;
    font-size: 18px;
}

.membership-payment-banner small {
    color: #d5c294;
    line-height: 1.5;
}

.package-card-current {
    border-color: rgba(245, 158, 11, .58) !important;
    box-shadow:
        0 0 0 3px rgba(245, 158, 11, .08),
        0 18px 50px rgba(0,0,0,.16);
}

.package-current-button {
    background:
        linear-gradient(
            90deg,
            #8a5a14,
            #ba7a17,
            #7d5a1c
        ) !important;
}

.payment-status-pill.draft {
    background: rgba(59, 130, 246, .12);
    color: #93c5fd;
}

@media (max-width: 760px) {
    .membership-payment-banner {
        display: grid;
    }
}


/* =========================================================
   MEMBERSHIP V1.4 - ÜYE ABONELİKLERİ / ADMIN SİPARİŞLER
   ========================================================= */

.member-subscriptions-shell {
    display: grid;
    gap: 20px;
}

.member-plan-hero {
    display: grid;
    grid-template-columns: 1.25fr .75fr;
    gap: 20px;
    padding: 28px;
    border: 1px solid rgba(16,185,129,.32);
    border-radius: 20px;
    background:
        radial-gradient(circle at 95% 0%, rgba(16,185,129,.12), transparent 34%),
        linear-gradient(180deg,#0d1728,#070d19);
}

.member-plan-main {
    display: grid;
    gap: 12px;
}

.member-plan-kicker {
    color: #6ee7b7;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .08em;
}

.member-plan-main h2 {
    margin: 0;
    color: #fff;
    font-size: 30px;
}

.member-plan-countdown {
    display: flex;
    align-items: baseline;
    gap: 9px;
}

.member-plan-countdown strong {
    color: #fff;
    font-size: 48px;
    line-height: 1;
}

.member-plan-countdown span {
    color: #9fb0c8;
    font-size: 18px;
}

.member-plan-dates {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.member-plan-dates > div {
    display: grid;
    gap: 4px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: rgba(4,9,18,.62);
}

.member-plan-dates span,
.subscription-history-card small {
    color: var(--text-muted);
    font-size: 12px;
}

.member-plan-dates strong {
    color: #fff;
}

.member-plan-renew {
    display: grid;
    align-content: center;
    gap: 14px;
    padding: 20px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: rgba(4,9,18,.55);
}

.member-plan-renew p {
    margin: 0;
    color: var(--text-soft);
    line-height: 1.6;
}

.member-no-plan,
.member-payment-process {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 16px;
    padding: 20px;
    border: 1px solid var(--border-strong);
    border-radius: 16px;
    background: #0b1425;
}

.member-no-plan-icon {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: rgba(245,158,11,.12);
    color: #fbbf24;
    font-size: 28px;
    font-weight: 900;
}

.member-no-plan h2,
.member-payment-process h3 {
    margin: 3px 0;
    color: #fff;
}

.member-no-plan p,
.member-payment-process p,
.member-payment-process small {
    margin: 0;
    color: var(--text-soft);
    line-height: 1.5;
}

.member-payment-process {
    border-color: rgba(245,158,11,.34);
    background: rgba(120,53,15,.09);
}

.subscription-section {
    display: grid;
    gap: 13px;
}

.subscription-section-head h3 {
    margin: 4px 0 0;
    color: #fff;
}

.subscription-card-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 12px;
}

.subscription-history-card {
    position: relative;
    display: grid;
    gap: 8px;
    min-height: 130px;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 13px;
    background: #080f1d;
}

.subscription-history-card > strong {
    color: #fff;
    font-size: 17px;
}

.subscription-state {
    justify-self: start;
    padding: 5px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
}

.subscription-state.active {
    background: rgba(16,185,129,.12);
    color: #6ee7b7;
}
.subscription-state.upcoming {
    background: rgba(59,130,246,.12);
    color: #93c5fd;
}
.subscription-state.expired {
    background: rgba(100,116,139,.14);
    color: #a8b3c5;
}
.subscription-state.cancelled {
    background: rgba(239,68,68,.12);
    color: #fca5a5;
}

.subscription-reference {
    color: #fbbf24;
    font-size: 12px;
    font-weight: 800;
}

.empty-subscriptions {
    grid-column: 1 / -1;
    padding: 22px;
    border: 1px dashed var(--border);
    border-radius: 12px;
    color: var(--text-muted);
    text-align: center;
}

.orders-info-banner {
    display: grid;
    gap: 4px;
    padding: 14px 16px;
    border: 1px solid rgba(59,130,246,.26);
    border-radius: 11px;
    background: rgba(30,64,175,.08);
}

.orders-info-banner strong {
    color: #bfdbfe;
}

.orders-info-banner span {
    color: #9eb4d7;
    line-height: 1.5;
    font-size: 12px;
}

.payment-status-pill.draft {
    background: rgba(59,130,246,.12);
    color: #93c5fd;
}

@media(max-width:900px) {
    .member-plan-hero {
        grid-template-columns: 1fr;
    }

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

@media(max-width:640px) {
    .member-plan-dates,
    .subscription-card-grid {
        grid-template-columns: 1fr;
    }

    .member-no-plan,
    .member-payment-process {
        grid-template-columns: 1fr;
    }

    .member-plan-countdown strong {
        font-size: 40px;
    }
}


/* =========================================================
   MEMBERSHIP V1.4.1 - ÜYE SİPARİŞLERİ / ADMIN ABONELER
   ========================================================= */

.member-orders-head p {
    margin: 5px 0 0;
    color: var(--text-soft);
    line-height: 1.55;
}

.member-order-list {
    display: grid;
    gap: 10px;
}

.member-order-card {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    padding: 15px 16px;
    border: 1px solid var(--border);
    border-radius: 13px;
    background: #080f1d;
}

.member-order-card.draft {
    border-color: rgba(59, 130, 246, .28);
}

.member-order-card.pending {
    border-color: rgba(245, 158, 11, .30);
}

.member-order-card.approved {
    border-color: rgba(16, 185, 129, .25);
}

.member-order-card.rejected {
    border-color: rgba(239, 68, 68, .25);
}

.member-order-id,
.member-order-info {
    display: grid;
    gap: 5px;
}

.member-order-id span {
    color: var(--text-muted);
    font-size: 11px;
    text-transform: uppercase;
}

.member-order-id strong {
    color: #fff;
    font-size: 20px;
}

.member-order-info > strong {
    color: #fff;
    font-size: 16px;
}

.member-order-info small {
    color: var(--text-soft);
}

.member-order-reference strong {
    color: #fbbf24;
}

.admin-members-shell,
.admin-member-detail-shell {
    display: grid;
    gap: 18px;
}

.admin-members-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
}

.admin-member-search {
    display: flex;
    gap: 8px;
    width: min(100%, 680px);
}

.admin-member-search .theme-input {
    flex: 1;
}

.admin-members-count {
    color: var(--text-soft);
    font-size: 13px;
}

.admin-account-label {
    color: #6ee7b7 !important;
    font-weight: 800;
}

.admin-member-profile,
.admin-member-active-plan {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 22px;
    border: 1px solid var(--border-strong);
    border-radius: 16px;
    background: #0b1425;
}

.admin-member-profile h2,
.admin-member-active-plan h3 {
    margin: 4px 0;
    color: #fff;
}

.admin-member-profile p,
.admin-member-profile small {
    margin: 0;
    color: var(--text-soft);
}

.admin-member-active-plan > div:first-child {
    display: grid;
    gap: 5px;
}

.admin-member-active-plan > div:first-child > strong {
    color: #6ee7b7;
    font-size: 20px;
}

@media (max-width: 760px) {
    .member-order-card {
        grid-template-columns: 1fr;
    }

    .member-order-actions .quota-button {
        width: 100%;
    }

    .admin-members-toolbar,
    .admin-member-profile,
    .admin-member-active-plan {
        display: grid;
    }

    .admin-member-search {
        width: 100%;
    }
}


/* =========================================================
   V1.4.2 - SİPARİŞ GÖRÜNÜRLÜĞÜ
   ========================================================= */

.member-order-package-meta > strong {
    color: #93c5fd;
}

.bank-order-created {
    margin: 16px 0 6px;
    padding: 14px 16px;
    display: grid;
    gap: 4px;
    border: 1px solid rgba(59,130,246,.30);
    border-radius: 12px;
    background: rgba(30,64,175,.08);
}

.bank-order-created > span {
    color: #93c5fd;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .07em;
}

.bank-order-created > strong {
    color: #fff;
    font-size: 24px;
}

.bank-order-created > small {
    color: #9eb4d7;
    line-height: 1.5;
}


/* =========================================================
   V1.4.3 - KOTA / ABONELİK AKIŞI
   ========================================================= */

.member-subscription-quickbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 17px 19px;
    border: 1px solid rgba(99,102,241,.32);
    border-radius: 14px;
    background:
        linear-gradient(
            135deg,
            rgba(88,28,135,.10),
            rgba(30,64,175,.08)
        );
}

.member-subscription-quickbar > div {
    display: grid;
    gap: 4px;
}

.member-subscription-quickbar strong {
    color: #fff;
    font-size: 16px;
}

.member-subscription-quickbar small {
    color: var(--text-soft);
    line-height: 1.5;
}

.member-subscription-quickbar .gradient-button {
    flex: 0 0 auto;
    white-space: nowrap;
    text-decoration: none;
}

@media(max-width:700px) {
    .member-subscription-quickbar {
        display: grid;
    }

    .member-subscription-quickbar .gradient-button {
        width: 100%;
        display: flex;
        justify-content: center;
    }
}


/* =========================================================
   V1.4.8 - ADMIN ÖDEME BİLDİRİMLERİ + 50'LİK ÜYE SAYFALAMA
   ========================================================= */

.nav-notification-badge {
    margin-left: auto;
    min-width: 25px;
    height: 25px;
    padding: 0 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #ef4444;
    color: #fff;
    font-size: 12px;
    font-weight: 900;
    line-height: 1;
    box-shadow: 0 0 0 4px rgba(239,68,68,.12);
}

.admin-unread-payment-panel {
    padding: 18px;
    border: 1px solid rgba(239,68,68,.5);
    border-radius: 18px;
    background:
        linear-gradient(135deg, rgba(127,29,29,.22), rgba(11,20,37,.96));
    box-shadow: 0 16px 40px rgba(127,29,29,.12);
}

.admin-unread-payment-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.admin-unread-payment-heading > div:first-child {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 3px 12px;
}

.admin-unread-payment-heading strong {
    color: #fff;
    font-size: 18px;
}

.admin-unread-payment-heading small {
    grid-column: 2;
    color: var(--text-soft);
}

.admin-unread-payment-count,
.payment-unread-badge {
    min-width: 38px;
    height: 38px;
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #ef4444;
    color: #fff;
    font-weight: 900;
    box-shadow: 0 0 0 5px rgba(239,68,68,.12);
}

.admin-unread-payment-list {
    margin-top: 14px;
    display: grid;
    gap: 8px;
}

.admin-unread-payment-item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 11px;
    padding: 12px 14px;
    border: 1px solid rgba(239,68,68,.22);
    border-radius: 12px;
    background: rgba(2,8,23,.55);
}

.admin-unread-payment-item:hover {
    border-color: rgba(239,68,68,.55);
    background: rgba(127,29,29,.14);
}

.admin-unread-payment-item strong {
    color: #fff;
}

.admin-unread-payment-item small {
    display: block;
    margin-top: 3px;
    color: var(--text-soft);
}

.admin-unread-payment-item b {
    color: #fca5a5;
    font-size: 13px;
}

.admin-unread-dot,
.payment-row-new-dot {
    width: 9px;
    height: 9px;
    display: inline-block;
    border-radius: 999px;
    background: #ef4444;
    box-shadow: 0 0 0 4px rgba(239,68,68,.13);
}

.payment-unread-summary {
    margin-bottom: 14px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 14px;
    border: 1px solid rgba(239,68,68,.45);
    border-radius: 14px;
    background: rgba(127,29,29,.15);
}

.payment-unread-summary strong {
    display: block;
    color: #fff;
}

.payment-unread-summary small {
    display: block;
    margin-top: 3px;
    color: var(--text-soft);
}

.payment-row-unread {
    background: rgba(127,29,29,.10);
}

.payment-status-pill.unread {
    background: rgba(239,68,68,.15);
    color: #fca5a5;
    border: 1px solid rgba(239,68,68,.28);
}

@media (max-width: 760px) {
    .admin-unread-payment-heading {
        display: grid;
    }

    .admin-unread-payment-heading .quota-button {
        width: 100%;
    }

    .admin-unread-payment-item {
        grid-template-columns: auto 1fr;
    }

    .admin-unread-payment-item b {
        grid-column: 2;
    }
}


/* =========================================================
   V1.4.9 - SIDEBAR + ABONELER + YENİ PAKET BUTONU
   ========================================================= */

/* SIDEBAR: kısa butonlar, kendi içinde scroll, son menü görünür */
.sidebar {
    overflow: hidden;
}

.sidebar-logo {
    height: 74px;
    min-height: 74px;
}

.sidebar-nav {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 8px 12px 14px;
    gap: 5px;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(148,163,184,.28) transparent;
}

.sidebar-nav::-webkit-scrollbar {
    width: 5px;
}

.sidebar-nav::-webkit-scrollbar-track {
    background: transparent;
}

.sidebar-nav::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(148,163,184,.24);
}

.nav-item {
    min-height: 45px;
    flex: 0 0 45px;
    padding: 0 12px;
    gap: 11px;
    border-radius: 10px;
}

.nav-icon {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
}

.nav-text {
    font-size: 14px;
}

.sidebar-collapse {
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    margin: 7px auto 12px;
}

/* ABONELER: her üye belirgin ayrı satır/kart */
.admin-members-shell .table-wrapper {
    border: 0;
    background: transparent;
    overflow-x: auto;
}

.admin-members-table {
    width: 100%;
    min-width: 1120px;
    border-collapse: separate;
    border-spacing: 0 10px;
}

.admin-members-table thead th {
    padding: 0 14px 8px;
    border: 0;
    background: transparent;
    color: #dbe5f7;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .035em;
    text-align: left;
    white-space: nowrap;
}

.admin-members-table tbody td {
    padding: 14px;
    vertical-align: middle;
    border-top: 1px solid rgba(100,116,139,.25);
    border-bottom: 1px solid rgba(100,116,139,.25);
    background: linear-gradient(180deg, rgba(13,23,42,.94), rgba(7,14,28,.96));
}

.admin-members-table tbody td:first-child {
    border-left: 1px solid rgba(100,116,139,.25);
    border-radius: 14px 0 0 14px;
}

.admin-members-table tbody td:last-child {
    border-right: 1px solid rgba(100,116,139,.25);
    border-radius: 0 14px 14px 0;
}

.admin-members-table tbody tr:hover td {
    background: linear-gradient(180deg, rgba(19,31,58,.98), rgba(10,19,37,.98));
    border-top-color: rgba(99,102,241,.50);
    border-bottom-color: rgba(99,102,241,.50);
}

.admin-members-table tbody tr:hover td:first-child {
    border-left-color: rgba(99,102,241,.50);
}

.admin-members-table tbody tr:hover td:last-child {
    border-right-color: rgba(99,102,241,.50);
}

.admin-member-identity {
    min-width: 250px;
    white-space: nowrap;
}

.admin-member-id-badge {
    min-width: 48px;
    height: 31px;
    margin-right: 10px;
    padding: 0 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    border: 1px solid rgba(99,102,241,.32);
    border-radius: 9px;
    background: rgba(79,70,229,.11);
    color: #a5b4fc;
    font-size: 12px;
    font-weight: 900;
}

.admin-member-main {
    display: inline-flex;
    max-width: calc(100% - 66px);
    vertical-align: middle;
    flex-direction: column;
    gap: 3px;
    white-space: normal;
}

.admin-member-main strong {
    color: #fff;
    font-size: 15px;
}

.admin-member-main small {
    color: #9eafc8;
    font-size: 12px;
}

.admin-member-main .admin-account-label {
    width: fit-content;
    margin-top: 2px;
}

.admin-member-company {
    min-width: 140px;
    color: #e5eaf4;
    font-weight: 650;
}

.admin-member-actions {
    width: 92px;
    text-align: right;
}

.admin-member-detail-button {
    min-height: 39px !important;
    padding: 0 15px !important;
    border-radius: 10px !important;
    white-space: nowrap;
}

.admin-members-count {
    padding: 8px 11px;
    border: 1px solid rgba(100,116,139,.18);
    border-radius: 10px;
    background: rgba(15,23,42,.48);
}

/* YENİ PAKET AL: görünür, gerçek buton hissi ve güçlü tıklama alanı */
.member-no-plan .member-new-package-button {
    min-width: 170px;
    min-height: 50px;
    padding: 0 22px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 4;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 12px;
    background: linear-gradient(90deg, #c321d1 0%, #7c32ef 52%, #245cff 100%);
    color: #fff !important;
    text-decoration: none !important;
    font-size: 15px;
    font-weight: 900;
    line-height: 1;
    cursor: pointer !important;
    pointer-events: auto !important;
    opacity: 1 !important;
    box-shadow:
        0 12px 28px rgba(60,68,255,.18),
        inset 0 1px 0 rgba(255,255,255,.12);
    transition:
        transform .16s ease,
        box-shadow .16s ease,
        filter .16s ease;
}

.member-no-plan .member-new-package-button:hover {
    transform: translateY(-2px);
    filter: brightness(1.08);
    box-shadow:
        0 15px 32px rgba(60,68,255,.27),
        inset 0 1px 0 rgba(255,255,255,.15);
}

.member-no-plan .member-new-package-button:active {
    transform: translateY(0);
}

.member-no-plan .member-new-package-button:focus-visible {
    outline: 3px solid rgba(96,165,250,.42);
    outline-offset: 3px;
}

@media (max-width: 760px) {
    .sidebar-logo {
        height: 66px;
        min-height: 66px;
    }

    .nav-item {
        min-height: 43px;
        flex-basis: 43px;
    }

    .member-no-plan .member-new-package-button {
        width: 100%;
        min-width: 0;
    }

    .admin-members-count {
        white-space: normal;
    }
}


/* V1.4.10 - Mevcut/bekleyen paket butonu ayrı görünüm */
.package-current-button {
    opacity: 1 !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    color: #fff !important;
}

.package-card-current .package-current-button {
    background: linear-gradient(
        90deg,
        #8a5a14 0%,
        #c4871e 55%,
        #8b651d 100%
    ) !important;
    border-color: rgba(245,158,11,.34);
}

.package-card-current .package-current-button:hover {
    filter: brightness(1.08);
}


/* =========================================================
   V1.4.14 - SERIAL GERÇEK 50'LİK SAYFALAMA
   ========================================================= */
.serial-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 18px 18px;
    border-top: 1px solid rgba(100,116,139,.20);
}

.serial-pagination-info {
    color: #93a4bf;
    font-size: 13px;
}

.serial-pagination-actions {
    display: flex;
    align-items: center;
    gap: 9px;
}

.serial-page-button {
    min-height: 38px;
    padding: 0 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(100,116,139,.30);
    border-radius: 10px;
    background: rgba(15,23,42,.72);
    color: #e5eaf4;
    text-decoration: none;
    font-size: 13px;
    font-weight: 850;
    cursor: pointer;
    transition: .15s ease;
}

.serial-page-button:hover {
    border-color: rgba(99,102,241,.55);
    background: rgba(30,41,59,.90);
    transform: translateY(-1px);
}

.serial-page-button.primary {
    border-color: rgba(99,102,241,.45);
    background: linear-gradient(90deg, #8b2be2, #3457ff);
    color: #fff;
}

.serial-page-button.disabled {
    opacity: .35;
    cursor: default;
    pointer-events: none;
}

@media (max-width: 720px) {
    .serial-pagination {
        align-items: stretch;
        flex-direction: column;
    }

    .serial-pagination-actions {
        width: 100%;
    }

    .serial-page-button {
        flex: 1 1 0;
    }
}