/**
 * ZipWeb Modern Panel CSS
 * Modern Customer Dashboard Styles
 * Target: body#muspanel (clientArea-type: 2)
 * Updated: 2025-12-02 - Icon-Only Buttons v2.1
 */

/* ========================================
   CSS Variables
   ======================================== */
:root {
    --panel-primary: #667eea;
    --panel-secondary: #764ba2;
    --panel-accent: #f093fb;
    --panel-dark: #1a1a2e;
    --panel-darker: #16213e;
    --panel-card: rgba(255, 255, 255, 0.03);
    --panel-border: rgba(255, 255, 255, 0.1);
    --panel-text: #e4e4e7;
    --panel-text-muted: #a1a1aa;
    --panel-success: #10b981;
    --panel-warning: #f59e0b;
    --panel-danger: #ef4444;
    --panel-info: #3b82f6;
    --panel-glow: rgba(102, 126, 234, 0.3);
    --panel-radius: 16px;
    --panel-radius-sm: 8px;
    --panel-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ========================================
   Body & Background
   ======================================== */
body#muspanel {
    background: linear-gradient(135deg, #0f0f1a 0%, #1a1a2e 50%, #16213e 100%) !important;
    min-height: 100vh !important;
    color: var(--panel-text) !important;
    overflow-x: hidden !important;
}

body#muspanel::before {
    content: '' !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: 
        radial-gradient(ellipse at 20% 20%, rgba(102, 126, 234, 0.15) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 80%, rgba(118, 75, 162, 0.15) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 50%, rgba(240, 147, 251, 0.05) 0%, transparent 70%) !important;
    pointer-events: none !important;
    z-index: 0 !important;
}

/* ========================================
   Rotating Universe/Galaxy Background
   ======================================== */
body#muspanel .fullwidthhead::after {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    left: 15% !important;
    width: 500px !important;
    height: 500px !important;
    transform: translate(-50%, -50%) !important;
    background: 
        radial-gradient(ellipse at center, rgba(102, 126, 234, 0.4) 0%, transparent 40%),
        radial-gradient(ellipse at center, rgba(118, 75, 162, 0.3) 0%, transparent 50%),
        conic-gradient(from 0deg at 50% 50%, 
            transparent 0deg, 
            rgba(102, 126, 234, 0.3) 30deg, 
            transparent 60deg,
            rgba(118, 75, 162, 0.2) 90deg,
            transparent 120deg,
            rgba(240, 147, 251, 0.2) 150deg,
            transparent 180deg,
            rgba(102, 126, 234, 0.25) 210deg,
            transparent 240deg,
            rgba(118, 75, 162, 0.15) 270deg,
            transparent 300deg,
            rgba(59, 130, 246, 0.2) 330deg,
            transparent 360deg
        ) !important;
    border-radius: 50% !important;
    animation: rotateUniverse 60s linear infinite !important;
    pointer-events: none !important;
    z-index: 1 !important;
    filter: blur(30px) !important;
}

/* Stars Layer 1 - Small Stars */
body#muspanel .fullwidthhead .col-lg-7::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-image: 
        radial-gradient(2px 2px at 20px 30px, rgba(255,255,255,0.8), transparent),
        radial-gradient(2px 2px at 40px 70px, rgba(255,255,255,0.6), transparent),
        radial-gradient(1px 1px at 90px 40px, rgba(255,255,255,0.9), transparent),
        radial-gradient(2px 2px at 130px 80px, rgba(255,255,255,0.5), transparent),
        radial-gradient(1px 1px at 160px 120px, rgba(255,255,255,0.7), transparent),
        radial-gradient(2px 2px at 200px 50px, rgba(255,255,255,0.6), transparent),
        radial-gradient(1px 1px at 240px 90px, rgba(255,255,255,0.8), transparent),
        radial-gradient(2px 2px at 280px 140px, rgba(255,255,255,0.5), transparent),
        radial-gradient(1px 1px at 320px 60px, rgba(255,255,255,0.9), transparent),
        radial-gradient(2px 2px at 360px 100px, rgba(255,255,255,0.6), transparent),
        radial-gradient(1px 1px at 400px 30px, rgba(255,255,255,0.7), transparent),
        radial-gradient(2px 2px at 50px 150px, rgba(255,255,255,0.5), transparent),
        radial-gradient(1px 1px at 100px 180px, rgba(255,255,255,0.8), transparent),
        radial-gradient(2px 2px at 150px 200px, rgba(255,255,255,0.6), transparent),
        radial-gradient(1px 1px at 200px 170px, rgba(255,255,255,0.7), transparent),
        radial-gradient(2px 2px at 250px 220px, rgba(255,255,255,0.5), transparent),
        radial-gradient(1px 1px at 300px 190px, rgba(255,255,255,0.9), transparent),
        radial-gradient(2px 2px at 350px 240px, rgba(255,255,255,0.6), transparent) !important;
    background-size: 420px 260px !important;
    animation: twinkleStars 4s ease-in-out infinite alternate !important;
    pointer-events: none !important;
    z-index: 2 !important;
    opacity: 0.8 !important;
}

/* Rotating Galaxy Core */
body#muspanel .helloleft {
    position: absolute !important;
    top: 50% !important;
    left: 10% !important;
    transform: translate(-50%, -50%) !important;
    width: 350px !important;
    height: 350px !important;
    z-index: 3 !important;
    pointer-events: none !important;
}

body#muspanel .helloleft img {
    display: none !important;
}

body#muspanel .helloleft::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: 
        radial-gradient(ellipse 100% 60% at 50% 50%, rgba(102, 126, 234, 0.6) 0%, transparent 50%),
        radial-gradient(ellipse 60% 100% at 50% 50%, rgba(118, 75, 162, 0.5) 0%, transparent 50%),
        conic-gradient(from 0deg at 50% 50%,
            rgba(102, 126, 234, 0.4) 0deg,
            rgba(118, 75, 162, 0.3) 45deg,
            rgba(240, 147, 251, 0.3) 90deg,
            rgba(59, 130, 246, 0.3) 135deg,
            rgba(102, 126, 234, 0.4) 180deg,
            rgba(118, 75, 162, 0.3) 225deg,
            rgba(240, 147, 251, 0.3) 270deg,
            rgba(59, 130, 246, 0.3) 315deg,
            rgba(102, 126, 234, 0.4) 360deg
        ) !important;
    border-radius: 50% !important;
    animation: rotateGalaxy 40s linear infinite !important;
    filter: blur(15px) !important;
}

body#muspanel .helloleft::after {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 60px !important;
    height: 60px !important;
    background: radial-gradient(circle at center, 
        rgba(255, 255, 255, 0.9) 0%, 
        rgba(102, 126, 234, 0.8) 30%, 
        rgba(118, 75, 162, 0.4) 60%,
        transparent 70%) !important;
    border-radius: 50% !important;
    box-shadow: 
        0 0 40px rgba(102, 126, 234, 0.8),
        0 0 80px rgba(118, 75, 162, 0.6),
        0 0 120px rgba(240, 147, 251, 0.4) !important;
    animation: pulseCore 3s ease-in-out infinite !important;
}

/* Spiral Arms */
body#muspanel .col-lg-7::after {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    left: 10% !important;
    width: 400px !important;
    height: 400px !important;
    transform: translate(-50%, -50%) !important;
    background: 
        conic-gradient(from 0deg at 50% 50%,
            transparent 0deg,
            rgba(102, 126, 234, 0.15) 20deg,
            transparent 40deg,
            rgba(118, 75, 162, 0.1) 60deg,
            transparent 80deg,
            rgba(240, 147, 251, 0.1) 100deg,
            transparent 120deg,
            rgba(59, 130, 246, 0.15) 140deg,
            transparent 160deg,
            rgba(102, 126, 234, 0.1) 180deg,
            transparent 200deg,
            rgba(118, 75, 162, 0.15) 220deg,
            transparent 240deg,
            rgba(240, 147, 251, 0.1) 260deg,
            transparent 280deg,
            rgba(59, 130, 246, 0.1) 300deg,
            transparent 320deg,
            rgba(102, 126, 234, 0.15) 340deg,
            transparent 360deg
        ) !important;
    border-radius: 50% !important;
    animation: rotateSpiralArms 80s linear infinite reverse !important;
    pointer-events: none !important;
    z-index: 2 !important;
    filter: blur(10px) !important;
}

/* Orbiting Planets/Objects */
body#muspanel .banner-text::before {
    content: '' !important;
    position: absolute !important;
    top: 30% !important;
    left: -100px !important;
    width: 20px !important;
    height: 20px !important;
    background: radial-gradient(circle at 30% 30%, 
        rgba(59, 130, 246, 0.9), 
        rgba(37, 99, 235, 0.7)) !important;
    border-radius: 50% !important;
    box-shadow: 
        0 0 20px rgba(59, 130, 246, 0.6),
        inset -3px -3px 6px rgba(0, 0, 0, 0.3) !important;
    animation: orbitPlanet1 25s linear infinite !important;
    z-index: 5 !important;
}

body#muspanel .banner-text::after {
    content: '' !important;
    position: absolute !important;
    top: 60% !important;
    left: -150px !important;
    width: 12px !important;
    height: 12px !important;
    background: radial-gradient(circle at 30% 30%, 
        rgba(240, 147, 251, 0.9), 
        rgba(118, 75, 162, 0.7)) !important;
    border-radius: 50% !important;
    box-shadow: 0 0 15px rgba(240, 147, 251, 0.5) !important;
    animation: orbitPlanet2 18s linear infinite !important;
    z-index: 5 !important;
}

/* Shooting Stars */
body#muspanel .ustaciks::before {
    content: '' !important;
    position: absolute !important;
    top: 20% !important;
    left: -50px !important;
    width: 100px !important;
    height: 2px !important;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(255, 255, 255, 0.8) 50%, 
        rgba(102, 126, 234, 0.6) 100%) !important;
    border-radius: 50% !important;
    animation: shootingStar 8s ease-in-out infinite !important;
    z-index: 10 !important;
    opacity: 0 !important;
}

body#muspanel .ustaciks::after {
    content: '' !important;
    position: absolute !important;
    top: 70% !important;
    right: -50px !important;
    width: 80px !important;
    height: 2px !important;
    background: linear-gradient(270deg, 
        transparent 0%, 
        rgba(255, 255, 255, 0.8) 50%, 
        rgba(240, 147, 251, 0.6) 100%) !important;
    border-radius: 50% !important;
    animation: shootingStar2 12s ease-in-out infinite 4s !important;
    z-index: 10 !important;
    opacity: 0 !important;
}

/* Keyframe Animations */
@keyframes rotateUniverse {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes rotateGalaxy {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes rotateSpiralArms {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes pulseCore {
    0%, 100% { 
        transform: translate(-50%, -50%) scale(1);
        box-shadow: 
            0 0 40px rgba(102, 126, 234, 0.8),
            0 0 80px rgba(118, 75, 162, 0.6),
            0 0 120px rgba(240, 147, 251, 0.4);
    }
    50% { 
        transform: translate(-50%, -50%) scale(1.2);
        box-shadow: 
            0 0 60px rgba(102, 126, 234, 1),
            0 0 100px rgba(118, 75, 162, 0.8),
            0 0 150px rgba(240, 147, 251, 0.6);
    }
}

@keyframes twinkleStars {
    0% { opacity: 0.5; }
    100% { opacity: 1; }
}

@keyframes orbitPlanet1 {
    0% { 
        transform: rotate(0deg) translateX(180px) rotate(0deg);
        opacity: 0.8;
    }
    50% { 
        opacity: 1;
    }
    100% { 
        transform: rotate(360deg) translateX(180px) rotate(-360deg);
        opacity: 0.8;
    }
}

@keyframes orbitPlanet2 {
    0% { 
        transform: rotate(0deg) translateX(220px) rotate(0deg);
        opacity: 0.7;
    }
    50% { 
        opacity: 1;
    }
    100% { 
        transform: rotate(-360deg) translateX(220px) rotate(360deg);
        opacity: 0.7;
    }
}

@keyframes shootingStar {
    0%, 90%, 100% { 
        opacity: 0;
        transform: translateX(0) translateY(0);
    }
    92% { 
        opacity: 1;
    }
    95% { 
        opacity: 1;
        transform: translateX(300px) translateY(50px);
    }
    96% {
        opacity: 0;
        transform: translateX(350px) translateY(60px);
    }
}

@keyframes shootingStar2 {
    0%, 85%, 100% { 
        opacity: 0;
        transform: translateX(0) translateY(0);
    }
    87% { 
        opacity: 1;
    }
    92% { 
        opacity: 1;
        transform: translateX(-280px) translateY(40px);
    }
    94% {
        opacity: 0;
        transform: translateX(-330px) translateY(50px);
    }
}

/* Nebula Cloud Effect */
body#muspanel .gvsc::before {
    content: '' !important;
    position: absolute !important;
    top: -100px !important;
    left: -200px !important;
    width: 400px !important;
    height: 300px !important;
    background: radial-gradient(ellipse at center,
        rgba(102, 126, 234, 0.2) 0%,
        rgba(118, 75, 162, 0.1) 40%,
        transparent 70%) !important;
    filter: blur(40px) !important;
    animation: nebulaFloat 20s ease-in-out infinite !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

@keyframes nebulaFloat {
    0%, 100% { 
        transform: translateY(0) translateX(0) scale(1);
        opacity: 0.6;
    }
    33% { 
        transform: translateY(-20px) translateX(30px) scale(1.1);
        opacity: 0.8;
    }
    66% { 
        transform: translateY(15px) translateX(-20px) scale(0.95);
        opacity: 0.5;
    }
}

/* Hide helloright image as well */
body#muspanel .helloright {
    display: none !important;
}

/* ========================================
   Left Sidebar - Modern Glassmorphism
   ======================================== */
body#muspanel .leftbar {
    background: linear-gradient(180deg, rgba(26, 26, 46, 0.95) 0%, rgba(22, 33, 62, 0.98) 100%) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-right: 1px solid var(--panel-border) !important;
    box-shadow: 4px 0 30px rgba(0, 0, 0, 0.3) !important;
    position: relative !important;
    z-index: 100 !important;
}

body#muspanel .leftbar::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 200px !important;
    background: linear-gradient(180deg, rgba(102, 126, 234, 0.1) 0%, transparent 100%) !important;
    pointer-events: none !important;
}

/* Sidebar Profile Section */
body#muspanel .leftbar .lefttop {
    background: transparent !important;
    padding: 30px 20px !important;
    text-align: center !important;
    border-bottom: 1px solid var(--panel-border) !important;
    position: relative !important;
}

body#muspanel .leftbar .lefttop .avatar,
body#muspanel .leftbar .lefttop img {
    width: 80px !important;
    height: 80px !important;
    border-radius: 50% !important;
    border: 3px solid transparent !important;
    background: linear-gradient(135deg, var(--panel-primary), var(--panel-secondary)) border-box !important;
    padding: 3px !important;
    box-shadow: 0 0 30px var(--panel-glow) !important;
    transition: var(--panel-transition) !important;
}

body#muspanel .leftbar .lefttop .avatar:hover,
body#muspanel .leftbar .lefttop img:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 0 40px var(--panel-glow) !important;
}

body#muspanel .leftbar .lefttop .name,
body#muspanel .leftbar .lefttop h4 {
    color: #fff !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    margin-top: 15px !important;
    margin-bottom: 5px !important;
}

body#muspanel .leftbar .lefttop .email,
body#muspanel .leftbar .lefttop span {
    color: var(--panel-text-muted) !important;
    font-size: 13px !important;
}

/* Sidebar Navigation Menu */
body#muspanel .leftbar .leftmenu,
body#muspanel .leftbar nav,
body#muspanel .leftbar .menu {
    padding: 20px 15px !important;
}

body#muspanel .leftbar .leftmenu ul,
body#muspanel .leftbar nav ul,
body#muspanel .leftbar .menu ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

body#muspanel .leftbar .leftmenu ul li,
body#muspanel .leftbar nav ul li,
body#muspanel .leftbar .menu ul li {
    margin-bottom: 5px !important;
}

body#muspanel .leftbar .leftmenu ul li a,
body#muspanel .leftbar nav ul li a,
body#muspanel .leftbar .menu ul li a {
    display: flex !important;
    align-items: center !important;
    padding: 12px 16px !important;
    color: var(--panel-text-muted) !important;
    text-decoration: none !important;
    border-radius: var(--panel-radius-sm) !important;
    transition: var(--panel-transition) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    position: relative !important;
    overflow: hidden !important;
    background: transparent !important;
}

body#muspanel .leftbar .leftmenu ul li a::before,
body#muspanel .leftbar nav ul li a::before,
body#muspanel .leftbar .menu ul li a::before {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 3px !important;
    background: linear-gradient(180deg, var(--panel-primary), var(--panel-secondary)) !important;
    opacity: 0 !important;
    transition: var(--panel-transition) !important;
    border-radius: 0 3px 3px 0 !important;
}

body#muspanel .leftbar .leftmenu ul li a:hover,
body#muspanel .leftbar nav ul li a:hover,
body#muspanel .leftbar .menu ul li a:hover {
    background: rgba(102, 126, 234, 0.1) !important;
    color: #fff !important;
    transform: translateX(5px) !important;
}

body#muspanel .leftbar .leftmenu ul li a:hover::before,
body#muspanel .leftbar nav ul li a:hover::before,
body#muspanel .leftbar .menu ul li a:hover::before {
    opacity: 1 !important;
}

body#muspanel .leftbar .leftmenu ul li.active a,
body#muspanel .leftbar nav ul li.active a,
body#muspanel .leftbar .menu ul li.active a,
body#muspanel .leftbar .leftmenu ul li a.active,
body#muspanel .leftbar nav ul li a.active,
body#muspanel .leftbar .menu ul li a.active {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.2), rgba(118, 75, 162, 0.2)) !important;
    color: #fff !important;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.2) !important;
}

body#muspanel .leftbar .leftmenu ul li.active a::before,
body#muspanel .leftbar nav ul li.active a::before,
body#muspanel .leftbar .menu ul li.active a::before,
body#muspanel .leftbar .leftmenu ul li a.active::before,
body#muspanel .leftbar nav ul li a.active::before,
body#muspanel .leftbar .menu ul li a.active::before {
    opacity: 1 !important;
}

body#muspanel .leftbar .leftmenu ul li a i,
body#muspanel .leftbar nav ul li a i,
body#muspanel .leftbar .menu ul li a i {
    margin-right: 12px !important;
    font-size: 18px !important;
    width: 24px !important;
    text-align: center !important;
    background: linear-gradient(135deg, var(--panel-primary), var(--panel-secondary)) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

/* ========================================
   Main Content Area
   ======================================== */
body#muspanel .rightpanel,
body#muspanel .main-content,
body#muspanel .content-area {
    background: transparent !important;
    position: relative !important;
    z-index: 1 !important;
    padding: 30px !important;
}

/* ========================================
   Page Header
   ======================================== */
body#muspanel .page-header,
body#muspanel .content-header {
    margin-bottom: 30px !important;
}

body#muspanel .page-header h1,
body#muspanel .page-header h2,
body#muspanel .content-header h1,
body#muspanel .content-header h2 {
    color: #fff !important;
    font-size: 28px !important;
    font-weight: 700 !important;
    background: linear-gradient(135deg, #fff 0%, var(--panel-text-muted) 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

/* ========================================
   Cards & Panels
   ======================================== */
body#muspanel .card,
body#muspanel .panel,
body#muspanel .box,
body#muspanel .widget {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1px solid var(--panel-border) !important;
    border-radius: var(--panel-radius) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2) !important;
    transition: var(--panel-transition) !important;
    overflow: hidden !important;
    margin-bottom: 20px !important;
}

body#muspanel .card:hover,
body#muspanel .panel:hover,
body#muspanel .box:hover,
body#muspanel .widget:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3), 0 0 30px var(--panel-glow) !important;
    border-color: rgba(102, 126, 234, 0.3) !important;
}

body#muspanel .card-header,
body#muspanel .panel-heading,
body#muspanel .box-header {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%) !important;
    border-bottom: 1px solid var(--panel-border) !important;
    padding: 20px !important;
    color: #fff !important;
}

body#muspanel .card-header h3,
body#muspanel .card-header h4,
body#muspanel .panel-heading h3,
body#muspanel .panel-heading h4,
body#muspanel .panel-title,
body#muspanel .box-header h3,
body#muspanel .box-header h4 {
    color: #fff !important;
    font-weight: 600 !important;
    margin: 0 !important;
    font-size: 16px !important;
}

body#muspanel .card-body,
body#muspanel .panel-body,
body#muspanel .box-body {
    padding: 20px !important;
    color: var(--panel-text) !important;
}

body#muspanel .card-footer,
body#muspanel .panel-footer,
body#muspanel .box-footer {
    background: rgba(0, 0, 0, 0.2) !important;
    border-top: 1px solid var(--panel-border) !important;
    padding: 15px 20px !important;
}

/* ========================================
   Stats Cards / Dashboard Widgets
   ======================================== */
body#muspanel .stat-card,
body#muspanel .info-box,
body#muspanel .small-box,
body#muspanel .dashboard-widget {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%) !important;
    border: 1px solid var(--panel-border) !important;
    border-radius: var(--panel-radius) !important;
    padding: 25px !important;
    position: relative !important;
    overflow: hidden !important;
    transition: var(--panel-transition) !important;
}

body#muspanel .stat-card::before,
body#muspanel .info-box::before,
body#muspanel .small-box::before {
    content: '' !important;
    position: absolute !important;
    top: -50% !important;
    right: -50% !important;
    width: 100% !important;
    height: 100% !important;
    background: radial-gradient(circle, rgba(102, 126, 234, 0.1) 0%, transparent 70%) !important;
    pointer-events: none !important;
}

body#muspanel .stat-card:hover,
body#muspanel .info-box:hover,
body#muspanel .small-box:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 15px 40px rgba(102, 126, 234, 0.2) !important;
}

body#muspanel .stat-card .stat-value,
body#muspanel .info-box .info-box-number,
body#muspanel .small-box h3 {
    font-size: 32px !important;
    font-weight: 700 !important;
    color: #fff !important;
    margin-bottom: 5px !important;
}

body#muspanel .stat-card .stat-label,
body#muspanel .info-box .info-box-text,
body#muspanel .small-box p {
    color: var(--panel-text-muted) !important;
    font-size: 14px !important;
}

body#muspanel .stat-card .stat-icon,
body#muspanel .info-box .info-box-icon,
body#muspanel .small-box .icon {
    font-size: 48px !important;
    background: linear-gradient(135deg, var(--panel-primary), var(--panel-secondary)) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    opacity: 0.8 !important;
}

/* ========================================
   Buttons
   ======================================== */
body#muspanel .btn,
body#muspanel button,
body#muspanel input[type="submit"],
body#muspanel input[type="button"] {
    border-radius: var(--panel-radius-sm) !important;
    font-weight: 600 !important;
    padding: 12px 24px !important;
    transition: var(--panel-transition) !important;
    border: none !important;
    cursor: pointer !important;
    font-size: 14px !important;
    text-transform: none !important;
    letter-spacing: 0.5px !important;
}

body#muspanel .btn-primary,
body#muspanel .btn-main {
    background: linear-gradient(135deg, var(--panel-primary) 0%, var(--panel-secondary) 100%) !important;
    color: #fff !important;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4) !important;
}

body#muspanel .btn-primary:hover,
body#muspanel .btn-main:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.5) !important;
}

body#muspanel .btn-success {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    color: #fff !important;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4) !important;
}

body#muspanel .btn-success:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(16, 185, 129, 0.5) !important;
}

body#muspanel .btn-danger {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
    color: #fff !important;
    box-shadow: 0 4px 15px rgba(239, 68, 68, 0.4) !important;
}

body#muspanel .btn-danger:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(239, 68, 68, 0.5) !important;
}

body#muspanel .btn-warning {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
    color: #fff !important;
    box-shadow: 0 4px 15px rgba(245, 158, 11, 0.4) !important;
}

body#muspanel .btn-warning:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(245, 158, 11, 0.5) !important;
}

body#muspanel .btn-info {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
    color: #fff !important;
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4) !important;
}

body#muspanel .btn-info:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(59, 130, 246, 0.5) !important;
}

body#muspanel .btn-secondary,
body#muspanel .btn-default {
    background: rgba(255, 255, 255, 0.1) !important;
    color: var(--panel-text) !important;
    border: 1px solid var(--panel-border) !important;
}

body#muspanel .btn-secondary:hover,
body#muspanel .btn-default:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}

body#muspanel .btn-outline-primary {
    background: transparent !important;
    color: var(--panel-primary) !important;
    border: 2px solid var(--panel-primary) !important;
}

body#muspanel .btn-outline-primary:hover {
    background: var(--panel-primary) !important;
    color: #fff !important;
}

/* ========================================
   Forms & Inputs
   ======================================== */
body#muspanel .form-control,
body#muspanel input[type="text"],
body#muspanel input[type="email"],
body#muspanel input[type="password"],
body#muspanel input[type="number"],
body#muspanel input[type="tel"],
body#muspanel input[type="url"],
body#muspanel input[type="search"],
body#muspanel textarea,
body#muspanel select {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid var(--panel-border) !important;
    border-radius: var(--panel-radius-sm) !important;
    color: var(--panel-text) !important;
    padding: 12px 16px !important;
    font-size: 14px !important;
    transition: var(--panel-transition) !important;
    width: 100% !important;
}

body#muspanel .form-control:focus,
body#muspanel input[type="text"]:focus,
body#muspanel input[type="email"]:focus,
body#muspanel input[type="password"]:focus,
body#muspanel input[type="number"]:focus,
body#muspanel input[type="tel"]:focus,
body#muspanel input[type="url"]:focus,
body#muspanel input[type="search"]:focus,
body#muspanel textarea:focus,
body#muspanel select:focus {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: var(--panel-primary) !important;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2) !important;
    outline: none !important;
}

body#muspanel .form-control::placeholder,
body#muspanel input::placeholder,
body#muspanel textarea::placeholder {
    color: var(--panel-text-muted) !important;
    opacity: 0.7 !important;
}

body#muspanel label,
body#muspanel .form-label,
body#muspanel .control-label {
    color: var(--panel-text) !important;
    font-weight: 500 !important;
    margin-bottom: 8px !important;
    display: block !important;
    font-size: 14px !important;
}

body#muspanel .form-group {
    margin-bottom: 20px !important;
}

body#muspanel .input-group {
    display: flex !important;
    align-items: stretch !important;
}

body#muspanel .input-group-addon,
body#muspanel .input-group-text {
    background: rgba(102, 126, 234, 0.2) !important;
    border: 1px solid var(--panel-border) !important;
    color: var(--panel-text) !important;
    padding: 12px 16px !important;
    border-radius: var(--panel-radius-sm) 0 0 var(--panel-radius-sm) !important;
}

body#muspanel .input-group .form-control {
    border-radius: 0 var(--panel-radius-sm) var(--panel-radius-sm) 0 !important;
}

/* ========================================
   Tables
   ======================================== */
body#muspanel table,
body#muspanel .table {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    background: transparent !important;
}

body#muspanel table thead,
body#muspanel .table thead {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.15) 0%, rgba(118, 75, 162, 0.15) 100%) !important;
}

body#muspanel table thead th,
body#muspanel .table thead th {
    color: #fff !important;
    font-weight: 600 !important;
    padding: 15px 20px !important;
    text-align: left !important;
    border-bottom: 1px solid var(--panel-border) !important;
    font-size: 13px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

body#muspanel table tbody tr,
body#muspanel .table tbody tr {
    transition: var(--panel-transition) !important;
}

body#muspanel table tbody tr:hover,
body#muspanel .table tbody tr:hover {
    background: rgba(102, 126, 234, 0.1) !important;
}

body#muspanel table tbody td,
body#muspanel .table tbody td {
    padding: 15px 20px !important;
    border-bottom: 1px solid var(--panel-border) !important;
    color: var(--panel-text) !important;
    vertical-align: middle !important;
}

body#muspanel table tbody tr:last-child td,
body#muspanel .table tbody tr:last-child td {
    border-bottom: none !important;
}

/* ========================================
   Alerts & Notifications
   ======================================== */
body#muspanel .alert {
    border-radius: var(--panel-radius-sm) !important;
    padding: 16px 20px !important;
    border: none !important;
    margin-bottom: 20px !important;
    position: relative !important;
    overflow: hidden !important;
}

body#muspanel .alert::before {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 4px !important;
}

body#muspanel .alert-success {
    background: rgba(16, 185, 129, 0.15) !important;
    color: #10b981 !important;
}

body#muspanel .alert-success::before {
    background: #10b981 !important;
}

body#muspanel .alert-danger,
body#muspanel .alert-error {
    background: rgba(239, 68, 68, 0.15) !important;
    color: #ef4444 !important;
}

body#muspanel .alert-danger::before,
body#muspanel .alert-error::before {
    background: #ef4444 !important;
}

body#muspanel .alert-warning {
    background: rgba(245, 158, 11, 0.15) !important;
    color: #f59e0b !important;
}

body#muspanel .alert-warning::before {
    background: #f59e0b !important;
}

body#muspanel .alert-info {
    background: rgba(59, 130, 246, 0.15) !important;
    color: #3b82f6 !important;
}

body#muspanel .alert-info::before {
    background: #3b82f6 !important;
}

/* ========================================
   Badges & Labels
   ======================================== */
body#muspanel .badge,
body#muspanel .label,
body#muspanel .tag {
    display: inline-block !important;
    padding: 6px 12px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    border-radius: 20px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

body#muspanel .badge-primary,
body#muspanel .label-primary {
    background: linear-gradient(135deg, var(--panel-primary), var(--panel-secondary)) !important;
    color: #fff !important;
}

body#muspanel .badge-success,
body#muspanel .label-success {
    background: rgba(16, 185, 129, 0.2) !important;
    color: #10b981 !important;
}

body#muspanel .badge-danger,
body#muspanel .label-danger {
    background: rgba(239, 68, 68, 0.2) !important;
    color: #ef4444 !important;
}

body#muspanel .badge-warning,
body#muspanel .label-warning {
    background: rgba(245, 158, 11, 0.2) !important;
    color: #f59e0b !important;
}

body#muspanel .badge-info,
body#muspanel .label-info {
    background: rgba(59, 130, 246, 0.2) !important;
    color: #3b82f6 !important;
}

/* ========================================
   Tabs & Navigation Pills
   ======================================== */
body#muspanel .nav-tabs,
body#muspanel .nav-pills {
    border-bottom: 1px solid var(--panel-border) !important;
    margin-bottom: 20px !important;
}

body#muspanel .nav-tabs li a,
body#muspanel .nav-pills li a {
    color: var(--panel-text-muted) !important;
    padding: 12px 20px !important;
    border-radius: var(--panel-radius-sm) var(--panel-radius-sm) 0 0 !important;
    transition: var(--panel-transition) !important;
    border: none !important;
    background: transparent !important;
    font-weight: 500 !important;
}

body#muspanel .nav-tabs li a:hover,
body#muspanel .nav-pills li a:hover {
    color: #fff !important;
    background: rgba(102, 126, 234, 0.1) !important;
}

body#muspanel .nav-tabs li.active a,
body#muspanel .nav-pills li.active a,
body#muspanel .nav-tabs li a.active,
body#muspanel .nav-pills li a.active {
    color: #fff !important;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.2), rgba(118, 75, 162, 0.2)) !important;
    border-bottom: 2px solid var(--panel-primary) !important;
}

/* ========================================
   Modals
   ======================================== */
body#muspanel .modal-content {
    background: linear-gradient(135deg, rgba(26, 26, 46, 0.98) 0%, rgba(22, 33, 62, 0.98) 100%) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid var(--panel-border) !important;
    border-radius: var(--panel-radius) !important;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.5) !important;
}

body#muspanel .modal-header {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%) !important;
    border-bottom: 1px solid var(--panel-border) !important;
    padding: 20px !important;
    border-radius: var(--panel-radius) var(--panel-radius) 0 0 !important;
}

body#muspanel .modal-header .modal-title {
    color: #fff !important;
    font-weight: 600 !important;
}

body#muspanel .modal-header .close,
body#muspanel .modal-header .btn-close {
    color: var(--panel-text-muted) !important;
    opacity: 1 !important;
    font-size: 24px !important;
}

body#muspanel .modal-body {
    padding: 25px !important;
    color: var(--panel-text) !important;
}

body#muspanel .modal-footer {
    background: rgba(0, 0, 0, 0.2) !important;
    border-top: 1px solid var(--panel-border) !important;
    padding: 15px 20px !important;
    border-radius: 0 0 var(--panel-radius) var(--panel-radius) !important;
}

body#muspanel .modal-backdrop {
    background: rgba(0, 0, 0, 0.7) !important;
    backdrop-filter: blur(5px) !important;
}

/* ========================================
   Dropdowns
   ======================================== */
body#muspanel .dropdown-menu {
    background: linear-gradient(135deg, rgba(26, 26, 46, 0.98) 0%, rgba(22, 33, 62, 0.98) 100%) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid var(--panel-border) !important;
    border-radius: var(--panel-radius-sm) !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4) !important;
    padding: 10px !important;
}

body#muspanel .dropdown-menu li a,
body#muspanel .dropdown-item {
    color: var(--panel-text) !important;
    padding: 10px 15px !important;
    border-radius: var(--panel-radius-sm) !important;
    transition: var(--panel-transition) !important;
}

body#muspanel .dropdown-menu li a:hover,
body#muspanel .dropdown-item:hover {
    background: rgba(102, 126, 234, 0.15) !important;
    color: #fff !important;
}

/* ========================================
   Pagination
   ======================================== */
body#muspanel .pagination {
    display: flex !important;
    gap: 5px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 20px 0 !important;
}

body#muspanel .pagination li a,
body#muspanel .pagination li span {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 40px !important;
    height: 40px !important;
    padding: 0 12px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid var(--panel-border) !important;
    border-radius: var(--panel-radius-sm) !important;
    color: var(--panel-text) !important;
    font-weight: 500 !important;
    transition: var(--panel-transition) !important;
    text-decoration: none !important;
}

body#muspanel .pagination li a:hover {
    background: rgba(102, 126, 234, 0.15) !important;
    border-color: var(--panel-primary) !important;
    color: #fff !important;
}

body#muspanel .pagination li.active a,
body#muspanel .pagination li.active span {
    background: linear-gradient(135deg, var(--panel-primary), var(--panel-secondary)) !important;
    border-color: transparent !important;
    color: #fff !important;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4) !important;
}

/* ========================================
   Progress Bars
   ======================================== */
body#muspanel .progress {
    height: 10px !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border-radius: 20px !important;
    overflow: hidden !important;
}

body#muspanel .progress-bar {
    background: linear-gradient(135deg, var(--panel-primary), var(--panel-secondary)) !important;
    border-radius: 20px !important;
    transition: width 0.6s ease !important;
}

body#muspanel .progress-bar.bg-success {
    background: linear-gradient(135deg, #10b981, #059669) !important;
}

body#muspanel .progress-bar.bg-warning {
    background: linear-gradient(135deg, #f59e0b, #d97706) !important;
}

body#muspanel .progress-bar.bg-danger {
    background: linear-gradient(135deg, #ef4444, #dc2626) !important;
}

/* ========================================
   Breadcrumbs
   ======================================== */
body#muspanel .breadcrumb {
    background: transparent !important;
    padding: 0 !important;
    margin-bottom: 20px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

body#muspanel .breadcrumb li {
    display: flex !important;
    align-items: center !important;
}

body#muspanel .breadcrumb li a {
    color: var(--panel-text-muted) !important;
    text-decoration: none !important;
    transition: var(--panel-transition) !important;
}

body#muspanel .breadcrumb li a:hover {
    color: var(--panel-primary) !important;
}

body#muspanel .breadcrumb li.active {
    color: var(--panel-text) !important;
}

body#muspanel .breadcrumb li::after {
    content: '/' !important;
    margin-left: 10px !important;
    color: var(--panel-text-muted) !important;
}

body#muspanel .breadcrumb li:last-child::after {
    display: none !important;
}

/* ========================================
   Scrollbar Styling
   ======================================== */
body#muspanel ::-webkit-scrollbar {
    width: 8px !important;
    height: 8px !important;
}

body#muspanel ::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05) !important;
}

body#muspanel ::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--panel-primary), var(--panel-secondary)) !important;
    border-radius: 4px !important;
}

body#muspanel ::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, var(--panel-secondary), var(--panel-primary)) !important;
}

/* ========================================
   Loading & Spinners
   ======================================== */
body#muspanel .spinner,
body#muspanel .loader,
body#muspanel .loading {
    border: 3px solid var(--panel-border) !important;
    border-top-color: var(--panel-primary) !important;
    border-radius: 50% !important;
    animation: spin 1s linear infinite !important;
}

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

/* ========================================
   Tooltips
   ======================================== */
body#muspanel .tooltip-inner {
    background: linear-gradient(135deg, rgba(26, 26, 46, 0.98) 0%, rgba(22, 33, 62, 0.98) 100%) !important;
    color: var(--panel-text) !important;
    padding: 8px 12px !important;
    border-radius: var(--panel-radius-sm) !important;
    font-size: 13px !important;
    border: 1px solid var(--panel-border) !important;
}

/* ========================================
   Links
   ======================================== */
body#muspanel a {
    color: var(--panel-primary) !important;
    text-decoration: none !important;
    transition: var(--panel-transition) !important;
}

body#muspanel a:hover {
    color: var(--panel-accent) !important;
}

/* ========================================
   Text Utilities
   ======================================== */
body#muspanel .text-muted {
    color: var(--panel-text-muted) !important;
}

body#muspanel .text-primary {
    color: var(--panel-primary) !important;
}

body#muspanel .text-success {
    color: var(--panel-success) !important;
}

body#muspanel .text-danger {
    color: var(--panel-danger) !important;
}

body#muspanel .text-warning {
    color: var(--panel-warning) !important;
}

body#muspanel .text-info {
    color: var(--panel-info) !important;
}

/* ========================================
   Specific Panel Elements
   ======================================== */
body#muspanel .leftbar .credit-box,
body#muspanel .leftbar .balance-box {
    margin: 15px !important;
    padding: 20px !important;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.15), rgba(118, 75, 162, 0.15)) !important;
    border-radius: var(--panel-radius) !important;
    border: 1px solid var(--panel-border) !important;
    text-align: center !important;
}

body#muspanel .leftbar .credit-box .amount,
body#muspanel .leftbar .balance-box .amount {
    font-size: 24px !important;
    font-weight: 700 !important;
    color: #fff !important;
    margin-bottom: 5px !important;
}

body#muspanel .leftbar .credit-box .label,
body#muspanel .leftbar .balance-box .label {
    font-size: 12px !important;
    color: var(--panel-text-muted) !important;
    text-transform: uppercase !important;
}

/* Service Status Cards */
body#muspanel .service-card,
body#muspanel .product-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%) !important;
    border: 1px solid var(--panel-border) !important;
    border-radius: var(--panel-radius) !important;
    padding: 20px !important;
    margin-bottom: 15px !important;
    transition: var(--panel-transition) !important;
}

body#muspanel .service-card:hover,
body#muspanel .product-card:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 10px 30px rgba(102, 126, 234, 0.15) !important;
    border-color: rgba(102, 126, 234, 0.3) !important;
}

body#muspanel .service-card .service-name,
body#muspanel .product-card .product-name {
    color: #fff !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    margin-bottom: 10px !important;
}

body#muspanel .service-card .service-details,
body#muspanel .product-card .product-details {
    color: var(--panel-text-muted) !important;
    font-size: 14px !important;
}

body#muspanel .status-active,
body#muspanel .status-online {
    color: var(--panel-success) !important;
}

body#muspanel .status-suspended,
body#muspanel .status-pending {
    color: var(--panel-warning) !important;
}

body#muspanel .status-cancelled,
body#muspanel .status-offline {
    color: var(--panel-danger) !important;
}

/* ========================================
   Top Header Bar (if exists)
   ======================================== */
body#muspanel .topbar,
body#muspanel .header-bar,
body#muspanel .top-header {
    background: linear-gradient(135deg, rgba(26, 26, 46, 0.95) 0%, rgba(22, 33, 62, 0.95) 100%) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-bottom: 1px solid var(--panel-border) !important;
    padding: 15px 25px !important;
}

body#muspanel .topbar .user-dropdown,
body#muspanel .header-bar .user-menu {
    color: var(--panel-text) !important;
}

/* ========================================
   Quick Actions / Icon Buttons
   ======================================== */
body#muspanel .quick-action,
body#muspanel .icon-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid var(--panel-border) !important;
    border-radius: 50% !important;
    color: var(--panel-text-muted) !important;
    transition: var(--panel-transition) !important;
    cursor: pointer !important;
}

body#muspanel .quick-action:hover,
body#muspanel .icon-btn:hover {
    background: rgba(102, 126, 234, 0.15) !important;
    border-color: var(--panel-primary) !important;
    color: #fff !important;
    transform: scale(1.1) !important;
}

/* ========================================
   Empty States
   ======================================== */
body#muspanel .empty-state,
body#muspanel .no-data,
body#muspanel .no-results {
    text-align: center !important;
    padding: 60px 20px !important;
    color: var(--panel-text-muted) !important;
}

body#muspanel .empty-state i,
body#muspanel .no-data i,
body#muspanel .no-results i {
    font-size: 64px !important;
    margin-bottom: 20px !important;
    opacity: 0.5 !important;
    background: linear-gradient(135deg, var(--panel-primary), var(--panel-secondary)) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

body#muspanel .empty-state h4,
body#muspanel .no-data h4,
body#muspanel .no-results h4 {
    color: var(--panel-text) !important;
    margin-bottom: 10px !important;
}

/* ========================================
   Animations
   ======================================== */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes slideInLeft {
    from { opacity: 0; transform: translateX(-20px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

@keyframes glow {
    0%, 100% { box-shadow: 0 0 20px var(--panel-glow); }
    50% { box-shadow: 0 0 40px var(--panel-glow); }
}

body#muspanel .card,
body#muspanel .panel,
body#muspanel .box {
    animation: fadeIn 0.5s ease-out !important;
}

body#muspanel .leftbar .leftmenu ul li {
    animation: slideInLeft 0.3s ease-out !important;
    animation-fill-mode: both !important;
}

body#muspanel .leftbar .leftmenu ul li:nth-child(1) { animation-delay: 0.1s !important; }
body#muspanel .leftbar .leftmenu ul li:nth-child(2) { animation-delay: 0.15s !important; }
body#muspanel .leftbar .leftmenu ul li:nth-child(3) { animation-delay: 0.2s !important; }
body#muspanel .leftbar .leftmenu ul li:nth-child(4) { animation-delay: 0.25s !important; }
body#muspanel .leftbar .leftmenu ul li:nth-child(5) { animation-delay: 0.3s !important; }
body#muspanel .leftbar .leftmenu ul li:nth-child(6) { animation-delay: 0.35s !important; }
body#muspanel .leftbar .leftmenu ul li:nth-child(7) { animation-delay: 0.4s !important; }
body#muspanel .leftbar .leftmenu ul li:nth-child(8) { animation-delay: 0.45s !important; }
body#muspanel .leftbar .leftmenu ul li:nth-child(9) { animation-delay: 0.5s !important; }
body#muspanel .leftbar .leftmenu ul li:nth-child(10) { animation-delay: 0.55s !important; }

/* ========================================
   Responsive Design
   ======================================== */
@media (max-width: 991px) {
    body#muspanel .leftbar {
        position: fixed !important;
        left: -280px !important;
        top: 0 !important;
        height: 100vh !important;
        width: 280px !important;
        z-index: 1000 !important;
        transition: left 0.3s ease !important;
    }

    body#muspanel .leftbar.open,
    body#muspanel .leftbar.active {
        left: 0 !important;
    }

    body#muspanel .rightpanel,
    body#muspanel .main-content {
        margin-left: 0 !important;
        padding: 20px !important;
    }
}

@media (max-width: 767px) {
    body#muspanel .card,
    body#muspanel .panel,
    body#muspanel .box {
        border-radius: var(--panel-radius-sm) !important;
    }

    body#muspanel .stat-card,
    body#muspanel .info-box {
        padding: 15px !important;
    }

    body#muspanel .stat-card .stat-value,
    body#muspanel .info-box .info-box-number {
        font-size: 24px !important;
    }

    body#muspanel .btn {
        padding: 10px 18px !important;
        font-size: 13px !important;
    }

    body#muspanel table thead th,
    body#muspanel table tbody td {
        padding: 10px 12px !important;
        font-size: 13px !important;
    }
}

/* ========================================
   Print Styles
   ======================================== */
@media print {
    body#muspanel {
        background: #fff !important;
        color: #000 !important;
    }

    body#muspanel .leftbar {
        display: none !important;
    }

    body#muspanel .card,
    body#muspanel .panel,
    body#muspanel .box {
        box-shadow: none !important;
        border: 1px solid #ddd !important;
    }
}

/* ========================================
   ZipWeb Dashboard Specific Styles
   ======================================== */

/* Full Width Header Background */
body#muspanel .fullwidthhead {
    background: linear-gradient(135deg, #0f0f1a 0%, #1a1a2e 50%, #16213e 100%) !important;
    background-image: none !important;
    position: relative !important;
}

body#muspanel .fullwidthhead::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: 
        radial-gradient(ellipse at 20% 20%, rgba(102, 126, 234, 0.2) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 80%, rgba(118, 75, 162, 0.2) 0%, transparent 50%) !important;
    pointer-events: none !important;
}

/* Dashboard Stats Blocks */
body#muspanel .mpanelblok {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.03) 100%) !important;
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 16px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    overflow: hidden !important;
    position: relative !important;
}

body#muspanel .mpanelblok::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, transparent 50%) !important;
    opacity: 0 !important;
    transition: opacity 0.4s ease !important;
    pointer-events: none !important;
}

body#muspanel .mpanelblok:hover {
    transform: translateY(-8px) scale(1.02) !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4), 0 0 30px rgba(102, 126, 234, 0.3) !important;
    border-color: rgba(102, 126, 234, 0.4) !important;
}

body#muspanel .mpanelblok:hover::before {
    opacity: 1 !important;
}

/* Stats Block Colors - Modern Gradient Style */
body#muspanel .mpanelblok#green {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.2) 0%, rgba(5, 150, 105, 0.15) 100%) !important;
    border-color: rgba(16, 185, 129, 0.3) !important;
}

body#muspanel .mpanelblok#green:hover {
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4), 0 0 40px rgba(16, 185, 129, 0.4) !important;
    border-color: rgba(16, 185, 129, 0.5) !important;
}

body#muspanel .mpanelblok#blue {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2) 0%, rgba(37, 99, 235, 0.15) 100%) !important;
    border-color: rgba(59, 130, 246, 0.3) !important;
}

body#muspanel .mpanelblok#blue:hover {
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4), 0 0 40px rgba(59, 130, 246, 0.4) !important;
    border-color: rgba(59, 130, 246, 0.5) !important;
}

body#muspanel .mpanelblok#red {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.2) 0%, rgba(220, 38, 38, 0.15) 100%) !important;
    border-color: rgba(239, 68, 68, 0.3) !important;
}

body#muspanel .mpanelblok#red:hover {
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4), 0 0 40px rgba(239, 68, 68, 0.4) !important;
    border-color: rgba(239, 68, 68, 0.5) !important;
}

body#muspanel .mpanelblok#gray {
    background: linear-gradient(135deg, rgba(107, 114, 128, 0.2) 0%, rgba(75, 85, 99, 0.15) 100%) !important;
    border-color: rgba(107, 114, 128, 0.3) !important;
}

body#muspanel .mpanelblok#gray:hover {
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4), 0 0 40px rgba(107, 114, 128, 0.4) !important;
    border-color: rgba(107, 114, 128, 0.5) !important;
}

body#muspanel .mpanelblok#turquise {
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.2) 0%, rgba(8, 145, 178, 0.15) 100%) !important;
    border-color: rgba(6, 182, 212, 0.3) !important;
}

body#muspanel .mpanelblok#turquise:hover {
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4), 0 0 40px rgba(6, 182, 212, 0.4) !important;
    border-color: rgba(6, 182, 212, 0.5) !important;
}

body#muspanel .mpanelblok#turquised,
body#muspanel div#turquised {
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.2) 0%, rgba(234, 88, 12, 0.15) 100%) !important;
    border-color: rgba(249, 115, 22, 0.3) !important;
}

body#muspanel .mpanelblok#turquised:hover,
body#muspanel div#turquised:hover {
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4), 0 0 40px rgba(249, 115, 22, 0.4) !important;
    border-color: rgba(249, 115, 22, 0.5) !important;
}

/* Stats Block Content */
body#muspanel .mpanelblok h1 {
    color: #fff !important;
    font-size: 36px !important;
    font-weight: 700 !important;
    margin: 10px 0 5px !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3) !important;
}

body#muspanel .mpanelblok h2 {
    color: rgba(255, 255, 255, 0.85) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    margin: 0 !important;
}

body#muspanel .mpanelblok .mpanelblokicon {
    margin-bottom: 10px !important;
}

body#muspanel .mpanelblok .mpanelblokicon i {
    font-size: 32px !important;
    color: rgba(255, 255, 255, 0.9) !important;
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.3) !important;
}

body#muspanel .mpanelblok .mblokbtn {
    margin-top: 15px !important;
}

body#muspanel .mpanelblok .mblokbtn .padding10 {
    background: rgba(255, 255, 255, 0.15) !important;
    color: #fff !important;
    padding: 10px 20px !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
    backdrop-filter: blur(5px) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

body#muspanel .mpanelblok:hover .mblokbtn .padding10 {
    background: rgba(255, 255, 255, 0.25) !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
}

body#muspanel .mpanelblok a {
    color: inherit !important;
    text-decoration: none !important;
}

/* Stats Block Icons (Floating) */
body#muspanel .mpanelblokicons {
    position: absolute !important;
    top: -20px !important;
    right: -20px !important;
    width: 80px !important;
    height: 80px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    opacity: 0.6 !important;
}

body#muspanel .mpanelblokicons i {
    font-size: 36px !important;
    color: rgba(255, 255, 255, 0.8) !important;
}

/* Welcome Card */
body#muspanel .moderncliendblock {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.03) 100%) !important;
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 20px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    padding: 30px !important;
    margin-bottom: 30px !important;
}

body#muspanel .wclientblockscon {
    position: relative !important;
    z-index: 1 !important;
}

/* Panel Info Section */
body#muspanel .mpanelinfo {
    color: #fff !important;
    padding: 20px 0 !important;
}

body#muspanel .mpanelinfo span {
    color: rgba(255, 255, 255, 0.9) !important;
    font-size: 16px !important;
}

/* Welcome Text */
body#muspanel .wclientwelcome {
    color: rgba(255, 255, 255, 0.9) !important;
    font-size: 14px !important;
    display: block !important;
    margin-bottom: 10px !important;
}

/* Panel Title */
body#muspanel .mpaneltitle {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding-bottom: 15px !important;
    margin-bottom: 20px !important;
}

body#muspanel .mpaneltitle h4 {
    color: #fff !important;
    font-weight: 600 !important;
    font-size: 18px !important;
}

body#muspanel .mpaneltitle h4 i {
    margin-right: 10px !important;
    color: var(--panel-primary) !important;
}

body#muspanel .mpaneltitle .sbtn {
    background: linear-gradient(135deg, var(--panel-primary) 0%, var(--panel-secondary) 100%) !important;
    color: #fff !important;
    border-radius: 8px !important;
    padding: 8px 16px !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
    border: none !important;
}

body#muspanel .mpaneltitle .sbtn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4) !important;
}

/* Panel Right Content */
body#muspanel .mpanelrightcon {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 16px !important;
    padding: 25px !important;
    margin-bottom: 20px !important;
    position: relative !important;
    z-index: 10 !important;
}

/* Tables in Dashboard */
body#muspanel .mpanelrightcon table,
body#muspanel .moderncliendblock table {
    background: transparent !important;
}

body#muspanel .mpanelrightcon table thead,
body#muspanel .moderncliendblock table thead {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.15) 0%, rgba(118, 75, 162, 0.15) 100%) !important;
}

body#muspanel .mpanelrightcon table thead th,
body#muspanel .moderncliendblock table thead th {
    color: #fff !important;
    font-weight: 600 !important;
    padding: 15px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    text-transform: uppercase !important;
    font-size: 12px !important;
    letter-spacing: 0.5px !important;
}

body#muspanel .mpanelrightcon table tbody td,
body#muspanel .moderncliendblock table tbody td {
    color: var(--panel-text) !important;
    padding: 15px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

body#muspanel .mpanelrightcon table tbody tr:hover,
body#muspanel .moderncliendblock table tbody tr:hover {
    background: rgba(102, 126, 234, 0.1) !important;
}

/* Product Info */
body#muspanel .productinfo {
    color: var(--panel-text-muted) !important;
    font-size: 13px !important;
}

/* Inc Ele Button */
body#muspanel .incelebtn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    background: rgba(102, 126, 234, 0.2) !important;
    border-radius: 8px !important;
    color: var(--panel-primary) !important;
    transition: all 0.3s ease !important;
}

body#muspanel .incelebtn:hover {
    background: linear-gradient(135deg, var(--panel-primary), var(--panel-secondary)) !important;
    color: #fff !important;
    transform: scale(1.1) !important;
}

/* No Entry Block */
body#muspanel .noentryblock {
    text-align: center !important;
    padding: 40px !important;
    color: var(--panel-text-muted) !important;
}

body#muspanel .noentryblock i {
    font-size: 48px !important;
    margin-bottom: 15px !important;
    opacity: 0.5 !important;
    color: var(--panel-primary) !important;
}

/* Hello Right Image */
body#muspanel .helloright {
    position: absolute !important;
    right: 0 !important;
    bottom: 0 !important;
    opacity: 0.8 !important;
}

body#muspanel .helloright img {
    max-height: 200px !important;
    filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.3)) !important;
}

/* Quick Action Dock */
body#muspanel .mpanelbtns {
    width: 100% !important;
    margin: 26px auto 32px !important;
    padding: 20px 22px !important;
    border-radius: 18px !important;
    background: rgba(10, 13, 32, 0.88) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    box-shadow: 0 18px 40px rgba(5, 6, 20, 0.45) !important;
    position: relative !important;
    overflow: hidden !important;
}

body#muspanel .mpanelbtns::before,
body#muspanel .mpanelbtns::after {
    content: '' !important;
    position: absolute !important;
    width: 160px !important;
    height: 160px !important;
    border-radius: 50% !important;
    filter: blur(50px) !important;
    opacity: 0.28 !important;
    pointer-events: none !important;
}

body#muspanel .mpanelbtns::before {
    top: -70px !important;
    left: -30px !important;
    background: rgba(102, 126, 234, 0.6) !important;
}

body#muspanel .mpanelbtns::after {
    bottom: -80px !important;
    right: -20px !important;
    background: rgba(240, 147, 251, 0.5) !important;
}

body#muspanel .mpanelbtns ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
    gap: 12px !important;
    position: relative !important;
    z-index: 1 !important;
}

body#muspanel .mpanelbtns li {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Bzuls Button */
body#muspanel .bzuls,
body#muspanel .adsdns,
body#muspanel .hstpkt {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    padding: 14px 24px !important;
    background: linear-gradient(135deg, var(--panel-primary) 0%, var(--panel-secondary) 100%) !important;
    border-radius: 12px !important;
    color: #fff !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
    border: none !important;
    cursor: pointer !important;
    margin-right: 12px !important;
    margin-bottom: 10px !important;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4) !important;
    white-space: nowrap !important;
}

body#muspanel .bzuls:hover,
body#muspanel .adsdns:hover,
body#muspanel .hstpkt:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.6) !important;
    background: linear-gradient(135deg, var(--panel-secondary) 0%, var(--panel-accent) 100%) !important;
}

body#muspanel .bzuls svg,
body#muspanel .adsdns svg,
body#muspanel .hstpkt svg {
    width: 20px !important;
    height: 20px !important;
    stroke-width: 2 !important;
    flex-shrink: 0 !important;
}

/* Column Styling */
body#muspanel .col-lg-5.sgtrf {
    position: relative !important;
}

body#muspanel .col-lg-7 {
    position: relative !important;
    z-index: 1 !important;
}

/* Affiliate Banner */
body#muspanel .affiliate-banner2 {
    background: linear-gradient(135deg, rgba(26, 26, 46, 0.95) 0%, rgba(22, 33, 62, 0.95) 100%) !important;
    border-radius: 20px !important;
    overflow: visible !important;
    position: relative !important;
    z-index: 1 !important;
}

body#muspanel .affiliate-banner2::before {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%) !important;
    opacity: 1 !important;
}

body#muspanel .affiliate-banner2 .banner-text {
    background: transparent !important;
}

body#muspanel .affiliate-banner2 .banner-text h1 {
    color: #fff !important;
    font-weight: 700 !important;
}

body#muspanel .affiliate-banner2 .banner-text p {
    color: var(--panel-text-muted) !important;
}

/* Bottom Navigation Bar */
body#muspanel .bottom-nav,
body#muspanel .mobile-bottom-nav {
    background: linear-gradient(135deg, rgba(26, 26, 46, 0.98) 0%, rgba(22, 33, 62, 0.98) 100%) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 -5px 30px rgba(0, 0, 0, 0.3) !important;
}

body#muspanel .bottom-nav a,
body#muspanel .mobile-bottom-nav a {
    color: var(--panel-text-muted) !important;
    transition: all 0.3s ease !important;
}

body#muspanel .bottom-nav a:hover,
body#muspanel .mobile-bottom-nav a:hover,
body#muspanel .bottom-nav a.active,
body#muspanel .mobile-bottom-nav a.active {
    color: var(--panel-primary) !important;
}

body#muspanel .bottom-nav a i,
body#muspanel .mobile-bottom-nav a i {
    font-size: 20px !important;
    margin-bottom: 5px !important;
}

/* DataTables Styling */
body#muspanel .dataTables_wrapper {
    color: var(--panel-text) !important;
}

body#muspanel .dataTables_info {
    color: var(--panel-text-muted) !important;
}

body#muspanel .dataTables_paginate .paginate_button {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: var(--panel-text) !important;
    border-radius: 6px !important;
    margin: 0 3px !important;
    transition: all 0.3s ease !important;
}

body#muspanel .dataTables_paginate .paginate_button:hover {
    background: rgba(102, 126, 234, 0.2) !important;
    border-color: var(--panel-primary) !important;
    color: #fff !important;
}

body#muspanel .dataTables_paginate .paginate_button.current {
    background: linear-gradient(135deg, var(--panel-primary), var(--panel-secondary)) !important;
    border-color: transparent !important;
    color: #fff !important;
}

/* Links in Panel */
body#muspanel .mpanelrightcon a,
body#muspanel .moderncliendblock a {
    color: var(--panel-primary) !important;
    transition: all 0.3s ease !important;
}

body#muspanel .mpanelrightcon a:hover,
body#muspanel .moderncliendblock a:hover {
    color: var(--panel-accent) !important;
}

/* ========================================
   Account Action Grid (clientAreaMenus-2)
   ======================================== */
body#muspanel ul#clientAreaMenus-2 {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: grid !important;
    position: relative !important;
    z-index: 100 !important;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
    gap: 12px !important;
}

body#muspanel ul#clientAreaMenus-2 > li {
    list-style: none !important;
    position: relative !important;
}

body#muspanel ul#clientAreaMenus-2 > li > a {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    padding: 14px 16px !important;
    border-radius: 14px !important;
    text-decoration: none !important;
    color: var(--panel-text) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
    background: rgba(10, 13, 32, 0.82) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    box-shadow: 0 16px 32px rgba(4, 5, 15, 0.4) !important;
    position: relative !important;
    overflow: hidden !important;
    isolation: isolate !important;
    transition: transform 0.28s ease, border-color 0.28s ease !important;
}

body#muspanel ul#clientAreaMenus-2 > li > a::after {
    content: '' !important;
    position: absolute !important;
    inset: -2px !important;
    border-radius: inherit !important;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.65), rgba(240, 147, 251, 0.65)) !important;
    opacity: 0 !important;
    transition: opacity 0.35s ease !important;
    z-index: 0 !important;
}

body#muspanel ul#clientAreaMenus-2 > li > a span {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    position: relative !important;
    z-index: 1 !important;
}

body#muspanel ul#clientAreaMenus-2 > li > a span i {
    width: 40px !important;
    height: 40px !important;
    border-radius: 14px !important;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.3), rgba(118, 75, 162, 0.3)) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 18px !important;
    color: #fff !important;
    flex-shrink: 0 !important;
    transition: transform 0.3s ease, background 0.3s ease !important;
}

body#muspanel ul#clientAreaMenus-2 > li > a small {
    display: block !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    color: var(--panel-text-muted) !important;
}

body#muspanel ul#clientAreaMenus-2 > li > a:hover,
body#muspanel ul#clientAreaMenus-2 > li > a:focus {
    transform: translateY(-4px) !important;
    border-color: transparent !important;
}

body#muspanel ul#clientAreaMenus-2 > li > a:hover::after,
body#muspanel ul#clientAreaMenus-2 > li > a:focus::after,
body#muspanel ul#clientAreaMenus-2 > li > a#active::after,
body#muspanel ul#clientAreaMenus-2 > li > a.active::after {
    opacity: 1 !important;
}

body#muspanel ul#clientAreaMenus-2 > li > a#active,
body#muspanel ul#clientAreaMenus-2 > li > a.active {
    border-color: transparent !important;
    color: #fff !important;
}

body#muspanel ul#clientAreaMenus-2 > li > a#active span i,
body#muspanel ul#clientAreaMenus-2 > li > a.active span i,
body#muspanel ul#clientAreaMenus-2 > li > a:hover span i {
    background: linear-gradient(135deg, var(--panel-primary), var(--panel-accent)) !important;
    transform: scale(1.03) !important;
}

/* Dropdown Parent - position relative */
body#muspanel ul#clientAreaMenus-2 > li {
    position: relative !important;
}

/* Dropdown Submenu in Account Grid - Kapalı durum */
body#muspanel ul#clientAreaMenus-2 > li > ul.inner,
body#muspanel ul#clientAreaMenus-2 li ul.inner,
body#muspanel ul#clientAreaMenus-2 .inner,
#clientAreaMenus-2 .inner,
ul#clientAreaMenus-2 .inner {
    display: none !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    background: rgba(15, 18, 35, 0.98) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 10px !important;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.5) !important;
    padding: 8px !important;
    min-width: 200px !important;
    z-index: 999999 !important;
    margin-top: 5px !important;
    list-style: none !important;
}

/* Dropdown açık durumu - .show class'ı ile */
body#muspanel ul#clientAreaMenus-2 > li > ul.inner.show,
body#muspanel ul#clientAreaMenus-2 li ul.inner.show,
body#muspanel ul#clientAreaMenus-2 .inner.show,
#clientAreaMenus-2 .inner.show,
ul#clientAreaMenus-2 .inner.show {
    display: block !important;
}

/* Dropdown ok işareti */
body#muspanel ul#clientAreaMenus-2 .inner::after {
    content: '' !important;
    position: absolute !important;
    top: -10px !important;
    left: 32px !important;
    border-left: 10px solid transparent !important;
    border-right: 10px solid transparent !important;
    border-bottom: 10px solid rgba(15, 18, 35, 0.98) !important;
}

body#muspanel ul#clientAreaMenus-2 .inner li {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

body#muspanel ul#clientAreaMenus-2 .inner li a,
body#muspanel ul#clientAreaMenus-2 .inner li a.toggle {
    display: block !important;
    padding: 10px 14px !important;
    border-radius: 6px !important;
    color: rgba(255, 255, 255, 0.7) !important;
    text-decoration: none !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    transition: all 0.2s ease !important;
    white-space: nowrap !important;
}

body#muspanel ul#clientAreaMenus-2 .inner li a:hover,
body#muspanel ul#clientAreaMenus-2 .inner li a.toggle:hover {
    background: rgba(102, 126, 234, 0.15) !important;
    color: #fff !important;
    padding-left: 18px !important;
}

body#muspanel ul#clientAreaMenus-2 .inner li a i {
    display: none !important;
}

@media (max-width: 992px) {
    body#muspanel .mpanelbtns {
        padding: 18px !important;
        margin: 24px auto 28px !important;
    }

    body#muspanel ul#clientAreaMenus-2 {
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important;
        gap: 12px !important;
    }
}

@media (max-width: 640px) {
    body#muspanel .mpanelbtns {
        padding: 16px !important;
        margin: 18px auto 24px !important;
    }

    body#muspanel ul#clientAreaMenus-2 {
        grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)) !important;
        gap: 10px !important;
    }

    body#muspanel ul#clientAreaMenus-2 > li > a {
        min-height: 82px !important;
        padding: 12px 14px !important;
    }
}

@media (max-width: 480px) {
    body#muspanel ul#clientAreaMenus-2 {
        grid-template-columns: 1fr !important;
    }
}

/* mpanelbtns Container */
body#muspanel .mpanelbtns {
    width: 100% !important;
}

/* ========================================
   Modern Client Menu (Sidebar)
   ======================================== */
body#muspanel .modernclientmenu {
    padding: 15px !important;
}

body#muspanel .modernclientmenu ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

body#muspanel .modernclientmenu ul li {
    margin-bottom: 3px !important;
}

body#muspanel .modernclientmenu ul li a {
    display: flex !important;
    align-items: center !important;
    padding: 12px 15px !important;
    color: var(--panel-text-muted) !important;
    text-decoration: none !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    border-radius: 10px !important;
    transition: all 0.3s ease !important;
    position: relative !important;
}

body#muspanel .modernclientmenu ul li a::before {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 3px !important;
    height: 0 !important;
    background: linear-gradient(180deg, var(--panel-primary), var(--panel-secondary)) !important;
    border-radius: 0 3px 3px 0 !important;
    transition: height 0.3s ease !important;
}

body#muspanel .modernclientmenu ul li a:hover {
    background: rgba(102, 126, 234, 0.1) !important;
    color: #fff !important;
    transform: translateX(5px) !important;
}

body#muspanel .modernclientmenu ul li a:hover::before {
    height: 60% !important;
}

body#muspanel .modernclientmenu ul li a#active,
body#muspanel .modernclientmenu ul li a.active {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.15) 0%, rgba(118, 75, 162, 0.15) 100%) !important;
    color: #fff !important;
}

body#muspanel .modernclientmenu ul li a#active::before,
body#muspanel .modernclientmenu ul li a.active::before {
    height: 70% !important;
}

body#muspanel .modernclientmenu ul li a i {
    margin-right: 12px !important;
    font-size: 18px !important;
    width: 24px !important;
    text-align: center !important;
    background: linear-gradient(135deg, var(--panel-primary), var(--panel-secondary)) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

body#muspanel .modernclientmenu ul li a span {
    flex: 1 !important;
}

body#muspanel .modernclientmenu .inner {
    margin-left: 20px !important;
    border-left: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding-left: 10px !important;
    margin-top: 5px !important;
}

body#muspanel .modernclientmenu .inner li a {
    padding: 10px 15px !important;
    font-size: 13px !important;
}

/* Company Logo */
body#muspanel .companylogo {
    padding: 25px 20px !important;
    text-align: center !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

body#muspanel .companylogo img {
    max-width: 150px !important;
    filter: drop-shadow(0 0 10px rgba(102, 126, 234, 0.3)) !important;
    transition: all 0.3s ease !important;
}

body#muspanel .companylogo img:hover {
    filter: drop-shadow(0 0 20px rgba(102, 126, 234, 0.5)) !important;
    transform: scale(1.05) !important;
}

/* Client Welcome */
body#muspanel .wclientwelcome {
    display: block !important;
    padding: 15px 20px !important;
    color: var(--panel-text) !important;
    font-size: 14px !important;
    text-align: center !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%) !important;
}

/* Collapse Icons */
body#muspanel .kps1,
body#muspanel .acs1 {
    display: none !important;
}

body#muspanel .kps1:hover,
body#muspanel .acs1:hover {
    color: var(--panel-primary) !important;
}

body#muspanel .kps1 svg,
body#muspanel .acs1 svg {
    width: 24px !important;
    height: 24px !important;
}

/* New Order Button */
body#muspanel .neworderbtn a {
    background: linear-gradient(135deg, var(--panel-primary) 0%, var(--panel-secondary) 100%) !important;
    color: #fff !important;
    border-radius: 10px !important;
    margin: 10px 0 !important;
}

body#muspanel .neworderbtn a:hover {
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4) !important;
    transform: translateX(0) scale(1.02) !important;
}

/* Mobile Menu Close Button */
body#muspanel .mobmenuclose {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(0, 0, 0, 0.7) !important;
    backdrop-filter: blur(5px) !important;
    z-index: 999 !important;
    display: none !important;
}

body#muspanel .mobmenuclose.active {
    display: block !important;
}

/* Mobile Sidebar Close Icon */
body#muspanel .mobile-sidebar-close {
    position: absolute !important;
    top: 15px !important;
    right: 15px !important;
    width: 40px !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(239, 68, 68, 0.2) !important;
    border-radius: 50% !important;
    color: #ef4444 !important;
    font-size: 18px !important;
    transition: all 0.3s ease !important;
    z-index: 10 !important;
}

body#muspanel .mobile-sidebar-close:hover {
    background: rgba(239, 68, 68, 0.3) !important;
    transform: rotate(90deg) !important;
}

/* Mobile Menu Toggle Button */
body#muspanel .mclientmobbtn,
body#muspanel .mobile-menu-toggle {
    display: none !important;
    position: fixed !important;
    bottom: 20px !important;
    left: 20px !important;
    width: 50px !important;
    height: 50px !important;
    background: linear-gradient(135deg, var(--panel-primary), var(--panel-secondary)) !important;
    border-radius: 50% !important;
    color: #fff !important;
    font-size: 20px !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 5px 20px rgba(102, 126, 234, 0.5) !important;
    z-index: 998 !important;
    transition: all 0.3s ease !important;
}

body#muspanel .mclientmobbtn:hover,
body#muspanel .mobile-menu-toggle:hover {
    transform: scale(1.1) !important;
    box-shadow: 0 8px 30px rgba(102, 126, 234, 0.6) !important;
}

@media (max-width: 991px) {
    body#muspanel .mclientmobbtn,
    body#muspanel .mobile-menu-toggle {
        display: flex !important;
    }
    
    body#muspanel ul#clientAreaMenus-2 {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        justify-content: flex-start !important;
        padding: 0 10px !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    body#muspanel ul#clientAreaMenus-2::-webkit-scrollbar {
        display: none !important;
    }
    
    body#muspanel ul#clientAreaMenus-2 > li > a {
        padding: 12px 15px !important;
        min-width: 80px !important;
        font-size: 11px !important;
    }
    
    body#muspanel ul#clientAreaMenus-2 > li > a i {
        font-size: 18px !important;
        margin-bottom: 5px !important;
    }
}

@media (max-width: 767px) {
    body#muspanel ul#clientAreaMenus-2 > li > a {
        padding: 10px 12px !important;
        min-width: 70px !important;
        font-size: 10px !important;
    }
    
    body#muspanel ul#clientAreaMenus-2 > li > a i {
        font-size: 16px !important;
    }
}

/* ========================================
   Left Sidebar - Campaign Cards
   ======================================== */
body#muspanel .yanleft {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
    padding: 0 !important;
}

body#muspanel .start-offer {
    width: 100% !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
}

/* =============================================
   PROMOSYON KUTULARI - HER BİRİ FARKLI RENK
   ============================================= */

body#muspanel .start-offer .inner {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    border: none !important;
    border-radius: 16px !important;
    padding: 24px !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 8px 32px rgba(102, 126, 234, 0.3) !important;
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
    overflow: hidden !important;
}

/* Dekoratif arka plan efekti */
body#muspanel .start-offer .inner::before {
    content: '' !important;
    position: absolute !important;
    top: -50% !important;
    right: -50% !important;
    width: 100% !important;
    height: 100% !important;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%) !important;
    pointer-events: none !important;
}

/* 1. Kutu - Mor/Mavi (Kurumsal Hosting) */
body#muspanel .start-offer:nth-child(1) .inner {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    box-shadow: 0 8px 32px rgba(102, 126, 234, 0.4) !important;
}

/* 2. Kutu - Yeşil (Ekonomik Hosting) */
body#muspanel .start-offer:nth-child(2) .inner {
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%) !important;
    box-shadow: 0 8px 32px rgba(17, 153, 142, 0.4) !important;
}

/* 3. Kutu - Turuncu (Yazılım & Hizmetler) */
body#muspanel .start-offer:nth-child(3) .inner {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%) !important;
    box-shadow: 0 8px 32px rgba(245, 87, 108, 0.4) !important;
}

/* 4. Kutu - Mavi (E-Ticaret Paketleri) */
body#muspanel .start-offer:nth-child(4) .inner {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%) !important;
    box-shadow: 0 8px 32px rgba(79, 172, 254, 0.4) !important;
}

/* 5. Kutu - Altın (Varsa ekstra) */
body#muspanel .start-offer:nth-child(5) .inner {
    background: linear-gradient(135deg, #f7971e 0%, #ffd200 100%) !important;
    box-shadow: 0 8px 32px rgba(247, 151, 30, 0.4) !important;
}

/* 1. Kutu - Mor/Mavi (Kurumsal Hosting) - wbrk1 */
body#muspanel .inner.wbrk1,
body#muspanel .start-offer .inner.wbrk1 {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    box-shadow: 0 8px 32px rgba(102, 126, 234, 0.4) !important;
}

/* 2. Kutu - Yeşil (Ekonomik Hosting) - wbrrk2 */
body#muspanel .inner.wbrrk2,
body#muspanel .start-offer .inner.wbrrk2 {
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%) !important;
    box-shadow: 0 8px 32px rgba(17, 153, 142, 0.4) !important;
}

/* 3. Kutu - Pembe/Kırmızı (Yazılım & Hizmetler) - wbrk3 */
body#muspanel .inner.wbrk3,
body#muspanel .start-offer .inner.wbrk3 {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%) !important;
    box-shadow: 0 8px 32px rgba(245, 87, 108, 0.4) !important;
}

/* 4. Kutu - Mavi/Cyan (E-Ticaret) - wbrk4 */
body#muspanel .inner.wbrk4,
body#muspanel .start-offer .inner.wbrk4 {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%) !important;
    box-shadow: 0 8px 32px rgba(79, 172, 254, 0.4) !important;
}

/* 5. Kutu - Altın (Varsa) - wbrk5 */
body#muspanel .inner.wbrk5,
body#muspanel .start-offer .inner.wbrk5 {
    background: linear-gradient(135deg, #f7971e 0%, #ffd200 100%) !important;
    box-shadow: 0 8px 32px rgba(247, 151, 30, 0.4) !important;
}

/* 6. Kutu - Kırmızı (Varsa) - wbrk6 */
body#muspanel .inner.wbrk6,
body#muspanel .start-offer .inner.wbrk6 {
    background: linear-gradient(135deg, #eb3349 0%, #f45c43 100%) !important;
    box-shadow: 0 8px 32px rgba(235, 51, 73, 0.4) !important;
}

body#muspanel .start-offer .inner:hover,
body#muspanel .inner.wbrk1:hover,
body#muspanel .inner.wbrrk2:hover,
body#muspanel .inner.wbrk3:hover,
body#muspanel .inner.wbrk4:hover {
    transform: translateY(-8px) scale(1.02) !important;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.3) !important;
}

/* Başlık */
body#muspanel .start-offer .title,
body#muspanel .inner.wbrk1 .title,
body#muspanel .inner.wbrrk2 .title,
body#muspanel .inner.wbrk3 .title,
body#muspanel .inner.wbrk4 .title {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    margin-bottom: 8px !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}

/* İndirim Etiketi */
body#muspanel .start-offer h5,
body#muspanel .inner.wbrk1 h5,
body#muspanel .inner.wbrrk2 h5,
body#muspanel .inner.wbrk3 h5,
body#muspanel .inner.wbrk4 h5 {
    margin: 0 0 12px 0 !important;
    color: rgba(255, 255, 255, 0.95) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    background: rgba(255, 255, 255, 0.2) !important;
    display: inline-block !important;
    padding: 4px 12px !important;
    border-radius: 20px !important;
}

body#muspanel .start-offer h5 small,
body#muspanel .inner.wbrk1 h5 small,
body#muspanel .inner.wbrrk2 h5 small,
body#muspanel .inner.wbrk3 h5 small,
body#muspanel .inner.wbrk4 h5 small {
    font-size: 13px !important;
    color: #ffffff !important;
}

/* Açıklama */
body#muspanel .start-offer .inner-content,
body#muspanel .inner.wbrk1 .inner-content,
body#muspanel .inner.wbrrk2 .inner-content,
body#muspanel .inner.wbrk3 .inner-content,
body#muspanel .inner.wbrk4 .inner-content {
    font-size: 14px !important;
    color: rgba(255, 255, 255, 0.85) !important;
    line-height: 1.6 !important;
    margin-bottom: 16px !important;
}

/* Önceki Fiyat */
body#muspanel .start-offer span,
body#muspanel .inner.wbrk1 span,
body#muspanel .inner.wbrrk2 span,
body#muspanel .inner.wbrk3 span,
body#muspanel .inner.wbrk4 span {
    color: rgba(255, 255, 255, 0.7) !important;
    font-size: 13px !important;
}

body#muspanel .start-offer del,
body#muspanel .inner.wbrk1 del,
body#muspanel .inner.wbrrk2 del,
body#muspanel .inner.wbrk3 del,
body#muspanel .inner.wbrk4 del,
body#muspanel .start-offer del.c-pink,
body#muspanel .inner.wbrk1 del.c-pink,
body#muspanel .inner.wbrrk2 del.c-pink,
body#muspanel .inner.wbrk3 del.c-pink,
body#muspanel .inner.wbrk4 del.c-pink {
    color: rgba(255, 255, 255, 0.6) !important;
    text-decoration: line-through !important;
}

/* Şimdi Fiyatı */
body#muspanel .start-offer h5.m-0,
body#muspanel .inner.wbrk1 h5.m-0,
body#muspanel .inner.wbrrk2 h5.m-0,
body#muspanel .inner.wbrk3 h5.m-0,
body#muspanel .inner.wbrk4 h5.m-0 {
    margin: 8px 0 16px 0 !important;
    font-size: 16px !important;
    color: #ffffff !important;
    background: transparent !important;
    padding: 0 !important;
}

body#muspanel .start-offer h5.m-0 b,
body#muspanel .start-offer h5.m-0 b.c-pink,
body#muspanel .inner.wbrk1 h5.m-0 b,
body#muspanel .inner.wbrrk2 h5.m-0 b,
body#muspanel .inner.wbrk3 h5.m-0 b,
body#muspanel .inner.wbrk4 h5.m-0 b,
body#muspanel .inner.wbrk1 h5.m-0 b.c-pink,
body#muspanel .inner.wbrrk2 h5.m-0 b.c-pink,
body#muspanel .inner.wbrk3 h5.m-0 b.c-pink,
body#muspanel .inner.wbrk4 h5.m-0 b.c-pink {
    color: #ffffff !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}

/* Buton */
body#muspanel .start-offer .btn,
body#muspanel .inner.wbrk1 .btn,
body#muspanel .inner.wbrrk2 .btn,
body#muspanel .inner.wbrk3 .btn,
body#muspanel .inner.wbrk4 .btn {
    width: 100% !important;
    padding: 14px 20px !important;
    background: rgba(255, 255, 255, 0.25) !important;
    border: 2px solid rgba(255, 255, 255, 0.4) !important;
    border-radius: 10px !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
    display: inline-block !important;
    text-align: center !important;
    font-size: 15px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

body#muspanel .start-offer .btn:hover,
body#muspanel .inner.wbrk1 .btn:hover,
body#muspanel .inner.wbrrk2 .btn:hover,
body#muspanel .inner.wbrk3 .btn:hover,
body#muspanel .inner.wbrk4 .btn:hover {
    background: #ffffff !important;
    color: #333333 !important;
    border-color: #ffffff !important;
    transform: scale(1.05) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2) !important;
}
body#muspanel .start-offer del {
    color: rgba(255, 255, 255, 0.7) !important;
    font-size: 13px !important;
}

body#muspanel .start-offer del.c-pink {
    color: rgba(255, 255, 255, 0.6) !important;
    text-decoration: line-through !important;
}

/* Şimdi Fiyatı */
body#muspanel .start-offer h5.m-0 {
    margin: 8px 0 16px 0 !important;
    font-size: 16px !important;
    color: #ffffff !important;
    background: transparent !important;
    padding: 0 !important;
}

body#muspanel .start-offer h5.m-0 b,
body#muspanel .start-offer h5.m-0 b.c-pink {
    color: #ffffff !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}

/* Buton */
body#muspanel .start-offer .btn {
    width: 100% !important;
    padding: 14px 20px !important;
    background: rgba(255, 255, 255, 0.25) !important;
    border: 2px solid rgba(255, 255, 255, 0.4) !important;
    border-radius: 10px !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
    display: inline-block !important;
    text-align: center !important;
    font-size: 15px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    backdrop-filter: blur(5px) !important;
}

body#muspanel .start-offer .btn:hover {
    background: #ffffff !important;
    color: #333333 !important;
    border-color: #ffffff !important;
    transform: scale(1.05) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2) !important;
}

/* ========================================
   Tables - Responsive & Modern
   ======================================== */
body#muspanel table {
    width: 100% !important;
    border-collapse: collapse !important;
    font-size: 13px !important;
}

body#muspanel table thead th {
    background: rgba(102, 126, 234, 0.15) !important;
    border-bottom: 2px solid var(--panel-border) !important;
    padding: 14px 10px !important;
    color: var(--panel-text) !important;
    font-weight: 600 !important;
    text-align: left !important;
}

body#muspanel table tbody tr {
    border-bottom: 1px solid var(--panel-border) !important;
    transition: var(--panel-transition) !important;
}

body#muspanel table tbody tr:hover {
    background: rgba(102, 126, 234, 0.08) !important;
}

body#muspanel table tbody td {
    padding: 12px 10px !important;
    color: var(--panel-text) !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
}

body#muspanel table .productinfo {
    font-size: 12px !important;
    color: var(--panel-text-muted) !important;
}

body#muspanel table a {
    color: var(--panel-accent) !important;
    text-decoration: none !important;
    transition: var(--panel-transition) !important;
}

body#muspanel table a:hover {
    color: var(--panel-primary) !important;
    text-decoration: underline !important;
}

/* ========================================
   Panel Container - Responsive Layout
   ======================================== */
body#muspanel .wclientblockscon {
    display: grid !important;
    grid-template-columns: 1fr 2.5fr !important;
    gap: 30px !important;
    max-width: 100% !important;
}

body#muspanel .wclientblockscon.dashboard-full {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
}

body#muspanel .wclientblockscon.dashboard-full .moderncliendblock {
    grid-column: auto !important;
    margin: 0 0 20px 0 !important;
    max-width: 100% !important;
}

body#muspanel .yanleft {
    grid-column: 1 !important;
}

body#muspanel .moderncliendblock {
    grid-column: 2 !important;
    overflow-x: auto !important;
}

@media (max-width: 1200px) {
    body#muspanel .wclientblockscon {
        grid-template-columns: 1fr 2fr !important;
        gap: 20px !important;
    }
}

@media (max-width: 992px) {
    body#muspanel .wclientblockscon {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
    
    body#muspanel .yanleft {
        grid-column: 1 !important;
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important;
        gap: 15px !important;
    }
    
    body#muspanel .moderncliendblock {
        grid-column: 1 !important;
    }
}

@media (max-width: 768px) {
    body#muspanel .yanleft {
        grid-template-columns: 1fr !important;
    }
    
    body#muspanel .start-offer .inner {
        padding: 16px !important;
    }
    
    body#muspanel table {
        font-size: 12px !important;
    }
    
    body#muspanel table thead th {
        padding: 10px 6px !important;
    }
    
    body#muspanel table tbody td {
        padding: 8px 6px !important;
    }
}

/* ========================================
   Modern Sidebar Menu - FERAH & SADE TASARIM
   ======================================== */
body#muspanel .leftbar {
    background: rgba(24, 28, 40, 0.85) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border: 1px solid rgba(255, 255, 255, 0.04) !important;
    border-radius: 16px !important;
    padding: 24px 0 !important;
    margin-bottom: 25px !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15) !important;
    position: relative !important;
}

/* Company Logo */
body#muspanel .companylogo {
    text-align: center !important;
    margin-bottom: 24px !important;
    padding: 0 20px 20px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
}

body#muspanel .companylogo a img {
    max-width: 130px !important;
    height: auto !important;
    transition: all 0.3s ease !important;
    opacity: 0.85 !important;
}

body#muspanel .companylogo a img:hover {
    opacity: 1 !important;
}

/* Welcome Message */
body#muspanel .wclientwelcome {
    display: block !important;
    text-align: center !important;
    color: rgba(255, 255, 255, 0.45) !important;
    font-size: 11px !important;
    font-weight: 400 !important;
    letter-spacing: 0.3px !important;
    margin-bottom: 20px !important;
    padding: 0 20px !important;
    line-height: 1.5 !important;
}

/* Modern Client Menu */
body#muspanel .modernclientmenu {
    position: relative !important;
}

body#muspanel ul#clientAreaMenus-1 {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 12px !important;
}

/* ======================================
   SIDEBAR MENÜ - Ferah & Temiz Tasarım
   clientAreaMenus-1 (Sol menü)
   ====================================== */

/* Sidebar menü gizleme - Çağrı merkezi ve WhatsApp */
body#muspanel ul#clientAreaMenus-1 > li:has(> a[href*="cagri-merkezini-ara"]),
body#muspanel ul#clientAreaMenus-1 > li:has(> a[href*="whatsapp"]) {
    display: none !important;
}

/* Sidebar menü container */
body#muspanel ul#clientAreaMenus-1 {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 8px !important;
}

/* Sidebar menü öğeleri */
body#muspanel ul#clientAreaMenus-1 > li {
    margin: 3px 0 !important;
    padding: 0 !important;
}

body#muspanel ul#clientAreaMenus-1 > li > a.toggle {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 12px 14px !important;
    color: rgba(255, 255, 255, 0.55) !important;
    text-decoration: none !important;
    font-size: 13px !important;
    font-weight: 450 !important;
    letter-spacing: 0.2px !important;
    transition: all 0.2s ease !important;
    border-radius: 8px !important;
    margin: 0 !important;
    position: relative !important;
    background: transparent !important;
    border: none !important;
    overflow: hidden !important;
}

body#muspanel ul#clientAreaMenus-1 > li > a.toggle:hover {
    color: rgba(255, 255, 255, 0.85) !important;
    background: rgba(255, 255, 255, 0.04) !important;
    padding-left: 18px !important;
}

body#muspanel ul#clientAreaMenus-1 > li > a.toggle#active {
    color: rgba(255, 255, 255, 0.95) !important;
    background: transparent !important;
    font-weight: 500 !important;
    position: relative !important;
}

body#muspanel ul#clientAreaMenus-1 > li > a.toggle#active::after {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 3px !important;
    height: 50% !important;
    background: linear-gradient(180deg, #6b8cff, #94a8ff) !important;
    border-radius: 0 3px 3px 0 !important;
    opacity: 1 !important;
}

/* Sidebar ikonları */
body#muspanel ul#clientAreaMenus-1 > li > a.toggle i {
    font-size: 13px !important;
    width: 0 !important;
    min-width: 0 !important;
    opacity: 0 !important;
    transition: all 0.2s ease !important;
    color: rgba(255, 255, 255, 0.5) !important;
    overflow: hidden !important;
}

body#muspanel ul#clientAreaMenus-1 > li > a.toggle:hover i {
    width: 14px !important;
    min-width: 14px !important;
    opacity: 0.7 !important;
}

body#muspanel ul#clientAreaMenus-1 > li > a.toggle#active i {
    width: 14px !important;
    min-width: 14px !important;
    opacity: 0.85 !important;
    color: #94a8ff !important;
}

/* Sidebar alt menüler */
body#muspanel ul#clientAreaMenus-1 li ul.inner {
    display: none !important;
    list-style: none !important;
    padding: 6px 0 6px 16px !important;
    margin: 4px 8px 4px 12px !important;
    background: transparent !important;
    border-left: 2px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: 0 !important;
}

body#muspanel ul#clientAreaMenus-1 li ul.inner.show {
    display: block !important;
}

body#muspanel ul#clientAreaMenus-1 li ul.inner li {
    margin: 2px 0 !important;
}

body#muspanel ul#clientAreaMenus-1 li ul.inner li a.toggle {
    padding: 9px 12px !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    color: rgba(255, 255, 255, 0.45) !important;
    border-radius: 6px !important;
    margin: 0 !important;
    background: transparent !important;
}

body#muspanel ul#clientAreaMenus-1 li ul.inner li a.toggle:hover {
    color: rgba(255, 255, 255, 0.75) !important;
    background: rgba(255, 255, 255, 0.03) !important;
    padding-left: 16px !important;
}

body#muspanel ul#clientAreaMenus-1 li ul.inner li a.toggle#active {
    color: rgba(255, 255, 255, 0.85) !important;
    background: transparent !important;
    font-weight: 500 !important;
}

body#muspanel ul#clientAreaMenus-1 li ul.inner li a.toggle#active::before {
    content: '' !important;
    position: absolute !important;
    left: -16px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 5px !important;
    height: 5px !important;
    background: #94a8ff !important;
    border-radius: 50% !important;
}

/* Sidebar Yeni Sipariş */
body#muspanel ul#clientAreaMenus-1 li.neworderbtn {
    margin-top: 12px !important;
    padding-top: 12px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.04) !important;
}

body#muspanel ul#clientAreaMenus-1 li.neworderbtn a.toggle {
    background: rgba(100, 160, 255, 0.08) !important;
    border: 1px solid rgba(100, 160, 255, 0.12) !important;
    color: #7eb3ff !important;
    font-weight: 500 !important;
    margin: 0 !important;
    padding: 12px 14px !important;
    text-align: center !important;
    justify-content: center !important;
}

body#muspanel ul#clientAreaMenus-1 li.neworderbtn a.toggle:hover {
    background: rgba(100, 160, 255, 0.12) !important;
    border-color: rgba(100, 160, 255, 0.2) !important;
    padding-left: 14px !important;
}

body#muspanel ul#clientAreaMenus-1 li.neworderbtn a.toggle i {
    width: 14px !important;
    min-width: 14px !important;
    opacity: 1 !important;
    color: #7eb3ff !important;
}

body#muspanel ul#clientAreaMenus-1 li.neworderbtn a.toggle#active::after {
    display: none !important;
}

/* Sidebar Çıkış Butonu */
body#muspanel ul#clientAreaMenus-1 > li:has(> a[href*="/cikis-yap"]),
body#muspanel ul#clientAreaMenus-1 > li:last-child {
    margin-top: 12px !important;
    padding-top: 12px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.04) !important;
}

body#muspanel ul#clientAreaMenus-1 > li:has(> a[href*="/cikis-yap"]) > a.toggle,
body#muspanel ul#clientAreaMenus-1 > li:last-child > a.toggle {
    color: rgba(255, 120, 120, 0.7) !important;
    justify-content: center !important;
    padding: 12px 14px !important;
}

body#muspanel ul#clientAreaMenus-1 > li:has(> a[href*="/cikis-yap"]) > a.toggle span,
body#muspanel ul#clientAreaMenus-1 > li:last-child > a.toggle span {
    display: none !important;
}

body#muspanel ul#clientAreaMenus-1 > li:has(> a[href*="/cikis-yap"]) > a.toggle i,
body#muspanel ul#clientAreaMenus-1 > li:last-child > a.toggle i {
    width: auto !important;
    min-width: auto !important;
    font-size: 16px !important;
    opacity: 1 !important;
    color: rgba(255, 120, 120, 0.8) !important;
}

body#muspanel ul#clientAreaMenus-1 > li:has(> a[href*="/cikis-yap"]) > a.toggle:hover,
body#muspanel ul#clientAreaMenus-1 > li:last-child > a.toggle:hover {
    color: rgba(255, 120, 120, 0.95) !important;
    background: rgba(255, 100, 100, 0.08) !important;
    padding: 12px 14px !important;
}

body#muspanel ul#clientAreaMenus-1 > li:has(> a[href*="/cikis-yap"]) > a.toggle:hover i,
body#muspanel ul#clientAreaMenus-1 > li:last-child > a.toggle:hover i {
    color: rgba(255, 150, 150, 0.95) !important;
}

body#muspanel ul#clientAreaMenus-1 > li:has(> a[href*="/cikis-yap"]) > a.toggle#active::after,
body#muspanel ul#clientAreaMenus-1 > li:last-child > a.toggle#active::after {
    display: none !important;
}

/* ======================================
   HEADER MENÜ STİLLERİ
   clientAreaMenus-2 (Üst menü) - MİNİMAL
   ====================================== */

/* Header menü gizleme - Çağrı merkezi ve WhatsApp */
body#muspanel ul#clientAreaMenus-2 > li:has(> a[href*="cagri-merkezini-ara"]),
body#muspanel ul#clientAreaMenus-2 > li:has(> a[href*="whatsapp"]) {
    display: none !important;
}

/* Header menü container */
body#muspanel ul#clientAreaMenus-2 {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
    align-items: center !important;
}

/* Header menü öğeleri */
body#muspanel ul#clientAreaMenus-2 > li {
    margin: 0 !important;
    padding: 0 !important;
}

body#muspanel ul#clientAreaMenus-2 > li > a.toggle {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 10px 12px !important;
    color: rgba(255, 255, 255, 0.55) !important;
    text-decoration: none !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    letter-spacing: 0px !important;
    transition: all 0.15s ease !important;
    border: none !important;
    background: transparent !important;
    border-radius: 0 !important;
    white-space: nowrap !important;
}

body#muspanel ul#clientAreaMenus-2 > li > a.toggle:hover {
    color: rgba(255, 255, 255, 0.85) !important;
    background: transparent !important;
}

body#muspanel ul#clientAreaMenus-2 > li > a.toggle#active {
    color: rgba(255, 255, 255, 0.9) !important;
    background: transparent !important;
    font-weight: 500 !important;
    border-bottom: 2px solid #6b8cff !important;
    padding-bottom: 8px !important;
}

/* Header menü ikonları - Gizli */
body#muspanel ul#clientAreaMenus-2 > li > a.toggle i {
    display: none !important;
}

/* Header ana menü */
body#muspanel ul#clientAreaMenus-2 > li {
    position: relative !important;
}

body#muspanel ul#clientAreaMenus-2 > li > a.toggle {
    color: rgba(255, 255, 255, 0.8) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    transition: color 0.2s ease !important;
}

body#muspanel ul#clientAreaMenus-2 > li > a.toggle:hover {
    color: #fff !important;
}

/* Header alt menüler */
body#muspanel ul#clientAreaMenus-2 li ul.inner {
    display: none !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    min-width: 200px !important;
    background: rgba(15, 18, 35, 0.98) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 8px !important;
    padding: 8px 0 !important;
    margin-top: 8px !important;
    list-style: none !important;
    z-index: 99999 !important;
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.5) !important;
}

body#muspanel ul#clientAreaMenus-2 li ul.inner.show {
    display: block !important;
}

body#muspanel ul#clientAreaMenus-2 li ul.inner li {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

body#muspanel ul#clientAreaMenus-2 li ul.inner li a.toggle {
    display: block !important;
    padding: 10px 14px !important;
    font-size: 12px !important;
    border-radius: 0 !important;
    color: rgba(255, 255, 255, 0.7) !important;
    font-weight: 500 !important;
    transition: all 0.2s ease !important;
}

body#muspanel ul#clientAreaMenus-2 li ul.inner li a.toggle:hover {
    background: rgba(102, 126, 234, 0.2) !important;
    color: #fff !important;
    padding-left: 18px !important;
}
    gap: 0 !important;
}

body#muspanel ul#clientAreaMenus-2 li ul.inner li a.toggle:hover {
    background: rgba(255, 255, 255, 0.06) !important;
}

/* Header yeni sipariş butonu */
body#muspanel ul#clientAreaMenus-2 li.neworderbtn > a.toggle {
    background: rgba(100, 160, 255, 0.08) !important;
    border: 1px solid rgba(100, 160, 255, 0.12) !important;
    color: #7eb3ff !important;
    font-weight: 500 !important;
    border-radius: 5px !important;
    margin: 0 4px !important;
    padding: 9px 11px !important;
    font-size: 11px !important;
}

body#muspanel ul#clientAreaMenus-2 li.neworderbtn > a.toggle:hover {
    background: rgba(100, 160, 255, 0.12) !important;
}

/* Header çıkış butonu - Minimal */
body#muspanel ul#clientAreaMenus-2 > li:has(> a[href*="/cikis-yap"]) > a.toggle {
    color: rgba(255, 120, 120, 0.6) !important;
}

body#muspanel ul#clientAreaMenus-2 > li:has(> a[href*="/cikis-yap"]) > a.toggle:hover {
    color: rgba(255, 120, 120, 0.9) !important;
}

/* ======================================
   RESPONSIVE - Header Menü Mobil
   ====================================== */
@media (max-width: 992px) {
    body#muspanel ul#clientAreaMenus-2 > li > a.toggle {
        padding: 8px 10px !important;
        font-size: 11px !important;
    }
}

@media (max-width: 768px) {
    body#muspanel ul#clientAreaMenus-2 {
        flex-direction: column !important;
        gap: 0 !important;
    }
    
    body#muspanel ul#clientAreaMenus-2 > li {
        width: 100% !important;
    }
    
    body#muspanel ul#clientAreaMenus-2 > li > a.toggle {
        width: 100% !important;
        padding: 10px 12px !important;
        border-bottom: none !important;
    }
    
    body#muspanel ul#clientAreaMenus-2 > li > a.toggle#active {
        border-bottom: none !important;
        border-left: 3px solid #6b8cff !important;
        padding-left: 9px !important;
    }
    
    body#muspanel ul#clientAreaMenus-2 li ul.inner {
        position: static !important;
        background: rgba(0, 0, 0, 0.15) !important;
        border: none !important;
        margin-top: 0 !important;
        padding-left: 14px !important;
    }
}

/* İletişim Butonları - Sidebar altına taşındı (Sadece İkon) */
body#muspanel .sidebar-contact-buttons {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 12px 12px !important;
    margin-top: 12px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.04) !important;
}

body#muspanel .sidebar-contact-buttons a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    font-size: 0 !important;
    text-decoration: none !important;
    border-radius: 8px !important;
    transition: all 0.25s ease !important;
    border: 1px solid transparent !important;
}

body#muspanel .sidebar-contact-buttons a i {
    font-size: 16px !important;
    width: auto !important;
}

body#muspanel .sidebar-contact-buttons .btn-call {
    background: rgba(76, 175, 80, 0.1) !important;
    border: 1px solid rgba(76, 175, 80, 0.14) !important;
    color: #81c784 !important;
}

body#muspanel .sidebar-contact-buttons .btn-call:hover {
    background: rgba(76, 175, 80, 0.16) !important;
    border-color: rgba(76, 175, 80, 0.22) !important;
    transform: scale(1.1) !important;
}

body#muspanel .sidebar-contact-buttons .btn-whatsapp {
    background: rgba(37, 211, 102, 0.1) !important;
    border: 1px solid rgba(37, 211, 102, 0.14) !important;
    color: #69f0ae !important;
}

body#muspanel .sidebar-contact-buttons .btn-whatsapp:hover {
    background: rgba(37, 211, 102, 0.16) !important;
    border-color: rgba(37, 211, 102, 0.22) !important;
    transform: scale(1.1) !important;
}

/* ======================================
   MENÜ BÖLÜM AYIRICILARI
   ====================================== */
body#muspanel ul#clientAreaMenus-1 > li:nth-child(4),
body#muspanel ul#clientAreaMenus-1 > li:nth-child(7) {
    margin-top: 12px !important;
    padding-top: 12px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.03) !important;
}

/* Menü Grup Başlığı Stili */
body#muspanel .menu-section-label {
    display: block !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    color: rgba(255, 255, 255, 0.25) !important;
    padding: 16px 18px 8px !important;
    margin-top: 8px !important;
}

/* ======================================
   MOBİL MENÜ BUTONLARI
   ====================================== */
body#muspanel .mclientmobbtn,
body#muspanel .mobile-menu-toggle {
    display: none !important;
    background: rgba(24, 28, 40, 0.9) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    color: rgba(255, 255, 255, 0.7) !important;
    padding: 14px 20px !important;
    border-radius: 10px !important;
    cursor: pointer !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    transition: all 0.2s ease !important;
    text-align: center !important;
}

body#muspanel .mclientmobbtn:hover,
body#muspanel .mobile-menu-toggle:hover {
    background: rgba(34, 38, 50, 0.95) !important;
    color: rgba(255, 255, 255, 0.9) !important;
}

body#muspanel .mobile-sidebar-close {
    display: none !important;
}



/* ======================================
   RESPONSIVE TASARIM
   ====================================== */
@media (max-width: 992px) {
    body#muspanel .leftbar {
        margin-bottom: 20px !important;
        padding: 20px 0 !important;
    }
    
    body#muspanel ul#clientAreaMenus-1 {
        padding: 0 10px !important;
    }
    
    body#muspanel ul#clientAreaMenus-1 > li > a.toggle {
        padding: 12px 14px !important;
        font-size: 12px !important;
    }
}

@media (max-width: 768px) {
    body#muspanel .mclientmobbtn,
    body#muspanel .mobile-menu-toggle {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 10px !important;
        margin-bottom: 15px !important;
        width: 100% !important;
    }
    
    body#muspanel .leftbar {
        max-height: 0 !important;
        overflow: hidden !important;
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
        opacity: 0 !important;
        transition: all 0.35s ease !important;
    }
    
    body#muspanel .leftbar.active {
        max-height: 900px !important;
        padding: 20px 0 !important;
        border: 1px solid rgba(255, 255, 255, 0.06) !important;
        opacity: 1 !important;
        margin-bottom: 15px !important;
    }
    
    body#muspanel .mobile-sidebar-close {
        display: block !important;
        position: absolute !important;
        top: 12px !important;
        right: 12px !important;
        background: rgba(255, 255, 255, 0.04) !important;
        border: none !important;
        color: rgba(255, 255, 255, 0.5) !important;
        padding: 8px 12px !important;
        border-radius: 8px !important;
        cursor: pointer !important;
        font-size: 14px !important;
        transition: all 0.2s ease !important;
    }
    
    body#muspanel .mobile-sidebar-close:hover {
        background: rgba(255, 100, 100, 0.1) !important;
        color: rgba(255, 150, 150, 0.8) !important;
    }
    
    body#muspanel .mobmenuclose {
        display: none !important;
    }
    
    body#muspanel .mobmenuclose.active {
        display: block !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        background: rgba(0, 0, 0, 0.5) !important;
        z-index: 998 !important;
    }
    
    /* Mobilde ikonları her zaman göster */
    body#muspanel ul#clientAreaMenus-1 > li > a.toggle i {
        width: 16px !important;
        min-width: 16px !important;
        opacity: 0.6 !important;
    }
}

@media (max-width: 480px) {
    body#muspanel ul#clientAreaMenus-1 {
        padding: 0 8px !important;
    }
    
    body#muspanel ul#clientAreaMenus-1 > li > a.toggle {
        padding: 11px 12px !important;
        font-size: 12px !important;
        gap: 10px !important;
    }
    
    body#muspanel ul#clientAreaMenus-1 > li > a.toggle i {
        font-size: 12px !important;
    }
    
    body#muspanel .companylogo a img {
        max-width: 110px !important;
    }
    
    body#muspanel .wclientwelcome {
        font-size: 10px !important;
        padding: 0 15px !important;
    }
    
    body#muspanel ul#clientAreaMenus-1 li ul.inner {
        padding: 6px 0 6px 15px !important;
        margin-left: 8px !important;
    }
    
    body#muspanel ul#clientAreaMenus-1 li ul.inner li a.toggle {
        padding: 8px 12px !important;
        font-size: 11px !important;
    }
}

/* ========================================
   Dashboard Stats Widgets / Özet Kartları
   ======================================== */
.dashboard-stats-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 28px;
    padding: 0 !important;
}

.dashboard-stat-card {
    background: rgba(24, 28, 40, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--panel-radius-sm);
    padding: 24px 20px;
    text-align: center;
    transition: var(--panel-transition);
    cursor: default;
    position: relative;
    overflow: hidden;
}

.dashboard-stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(107, 140, 255, 0.1) 0%, rgba(118, 75, 162, 0.05) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.dashboard-stat-card:hover {
    border-color: rgba(107, 140, 255, 0.3);
    background: rgba(24, 28, 40, 0.7);
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(107, 140, 255, 0.15);
}

.dashboard-stat-card:hover::before {
    opacity: 1;
}

.dashboard-stat-card .stat-icon {
    font-size: 28px;
    color: rgba(107, 140, 255, 0.8);
    margin-bottom: 12px;
    display: inline-block;
    transition: color 0.3s ease;
}

.dashboard-stat-card:nth-child(2) .stat-icon {
    color: rgba(16, 185, 129, 0.8);
}

.dashboard-stat-card:nth-child(3) .stat-icon {
    color: rgba(245, 158, 11, 0.8);
}

.dashboard-stat-card:nth-child(4) .stat-icon {
    color: rgba(240, 147, 251, 0.8);
}

.dashboard-stat-card .stat-label {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
    font-weight: 600;
}

.dashboard-stat-card .stat-value {
    font-size: 32px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.95);
    line-height: 1;
}

.dashboard-stat-card .stat-subtitle {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.35);
    margin-top: 8px;
}

/* Mobil görünüm */
@media only screen and (max-width: 768px) {
    .dashboard-stats-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        margin-bottom: 20px;
    }
    
    .dashboard-stat-card {
        padding: 16px 12px;
    }
    
    .dashboard-stat-card .stat-icon {
        font-size: 24px;
    }
    
    .dashboard-stat-card .stat-value {
        font-size: 24px;
    }
}

/* ========================================
   Modern Table Styling (Tablo Modernizasyonu)
   ======================================== */
body#muspanel table {
    width: 100% !important;
    border-collapse: collapse !important;
}

body#muspanel table thead {
    background: rgba(24, 28, 40, 0.3);
    border-bottom: 1px solid rgba(107, 140, 255, 0.2);
}

body#muspanel table thead tr {
    border: none !important;
}

body#muspanel table thead th {
    padding: 14px 12px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: rgba(255, 255, 255, 0.7) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
    background: transparent !important;
    border: none !important;
}

body#muspanel table tbody tr {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    background: transparent !important;
    transition: background 0.2s ease;
}

body#muspanel table tbody tr:hover {
    background: rgba(107, 140, 255, 0.08) !important;
}

body#muspanel table tbody tr:nth-child(even) {
    background: transparent !important;
}

body#muspanel table tbody td {
    padding: 14px 12px !important;
    color: rgba(255, 255, 255, 0.8) !important;
    font-size: 13px !important;
    border: none !important;
}

body#muspanel table tbody td a {
    color: rgba(107, 140, 255, 0.9);
    text-decoration: none;
    transition: color 0.2s ease;
}

body#muspanel table tbody td a:hover {
    color: rgba(107, 140, 255, 1);
    text-decoration: underline;
}

/* ========================================
   Status Badges / Modern Durum Rozetleri
   ======================================== */
.status-badge {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    transition: all 0.2s ease;
    border: 1px solid transparent;
}

/* Active / Aktif */
.status-badge.active,
.status-badge.status-active {
    background: rgba(16, 185, 129, 0.2);
    color: #69f0ae;
    border-color: rgba(105, 240, 174, 0.3);
}

.status-badge.active:hover,
.status-badge.status-active:hover {
    background: rgba(16, 185, 129, 0.3);
    border-color: rgba(105, 240, 174, 0.5);
    box-shadow: 0 0 12px rgba(105, 240, 174, 0.3);
}

/* Cancelled / İptal */
.status-badge.cancelled,
.status-badge.status-cancelled {
    background: rgba(255, 120, 120, 0.2);
    color: #ff9999;
    border-color: rgba(255, 120, 120, 0.3);
}

.status-badge.cancelled:hover,
.status-badge.status-cancelled:hover {
    background: rgba(255, 120, 120, 0.3);
    border-color: rgba(255, 120, 120, 0.5);
    box-shadow: 0 0 12px rgba(255, 120, 120, 0.3);
}

/* Pending / Beklemede */
.status-badge.pending,
.status-badge.status-pending,
.status-badge.waiting,
.status-badge.status-waiting {
    background: rgba(245, 158, 11, 0.2);
    color: #ffd700;
    border-color: rgba(255, 215, 0, 0.3);
}

.status-badge.pending:hover,
.status-badge.status-pending:hover,
.status-badge.waiting:hover,
.status-badge.status-waiting:hover {
    background: rgba(245, 158, 11, 0.3);
    border-color: rgba(255, 215, 0, 0.5);
    box-shadow: 0 0 12px rgba(255, 215, 0, 0.3);
}

/* Suspended / Askıya */
.status-badge.suspended,
.status-badge.status-suspended,
.status-badge.inprocess,
.status-badge.status-inprocess {
    background: rgba(59, 130, 246, 0.2);
    color: #87ceeb;
    border-color: rgba(135, 206, 235, 0.3);
}

.status-badge.suspended:hover,
.status-badge.status-suspended:hover,
.status-badge.inprocess:hover,
.status-badge.status-inprocess:hover {
    background: rgba(59, 130, 246, 0.3);
    border-color: rgba(135, 206, 235, 0.5);
    box-shadow: 0 0 12px rgba(135, 206, 235, 0.3);
}

/* ========================================
   Empty State / Boş Durumlar
   ======================================== */
.noentryblock {
    padding: 40px 20px;
    text-align: center;
    background: rgba(24, 28, 40, 0.3);
    border: 1px dashed rgba(107, 140, 255, 0.2);
    border-radius: var(--panel-radius-sm);
}

.noentryblock i {
    font-size: 48px;
    color: rgba(107, 140, 255, 0.3);
    margin-bottom: 16px;
    display: block;
}

.noentryblock h2 {
    font-size: 18px;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 8px;
    font-weight: 600;
}

.noentryblock h4 {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.4);
    margin-bottom: 20px;
}

/* Positive Empty State */
.noentryblock.positive {
    background: rgba(16, 185, 129, 0.1);
    border-color: rgba(16, 185, 129, 0.2);
}

.noentryblock.positive i {
    color: rgba(105, 240, 174, 0.5);
}

.noentryblock.positive h2 {
    color: rgba(105, 240, 174, 0.9);
}

.noentryblock.positive h4 {
    color: rgba(105, 240, 174, 0.6);
}

/* ========================================
   Quick Support Center / Hızlı Destek
   ======================================== */
.quick-support-container {
    padding: 40px 24px;
    text-align: center;
    background: linear-gradient(135deg, #f0fdf4 0%, #ecfeff 100%);
    border: 1px solid #d1fae5;
    border-radius: 12px;
    position: static !important;
    overflow: visible !important;
    margin: 0;
    float: none;
    clear: both;
}

.quick-support-container::before {
    display: none !important;
}

.quick-support-icon {
    font-size: 64px;
    color: #10b981;
    margin-bottom: 20px;
    display: block;
    position: static !important;
}

.quick-support-title {
    font-size: 22px;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 12px;
    position: static !important;
}

.quick-support-text {
    font-size: 14px;
    color: #6b7280;
    margin-bottom: 28px;
    line-height: 1.6;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    position: static !important;
}

.quick-support-buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    position: static !important;
    z-index: auto;
}

.quick-support-btn {
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    position: static !important;
}

.quick-support-btn.primary {
    background: linear-gradient(135deg, #10b981 0%, #34d399 100%);
    color: white;
    border: none;
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.3);
}

.quick-support-btn.primary:hover {
    background: linear-gradient(135deg, #059669 0%, #10b981 100%);
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4);
    transform: translateY(-2px);
}

.quick-support-btn.secondary {
    background: #ffffff;
    color: #6366f1;
    border: 2px solid #e0e7ff;
}

.quick-support-btn.secondary:hover {
    background: #eef2ff;
    border-color: #6366f1;
    transform: translateY(-2px);
}

/* Mobil */
@media only screen and (max-width: 768px) {
    .quick-support-container {
        padding: 30px 16px;
        position: static !important;
    }
    
    .quick-support-icon {
        font-size: 48px;
        position: static !important;
    }
    
    .quick-support-title {
        font-size: 18px;
        position: static !important;
    }
    
    .quick-support-buttons {
        flex-direction: column;
        position: static !important;
    }
    
    .quick-support-btn {
        width: 100%;
        justify-content: center;
        position: static !important;
    }
}

/* ========================================
   Smart Suggestion / Akıllı Öneriler
   ======================================== */
.smart-suggestion-container {
    padding: 24px;
    background: linear-gradient(135deg, rgba(107, 140, 255, 0.15) 0%, rgba(118, 75, 162, 0.1) 100%);
    border: 1px solid rgba(107, 140, 255, 0.2);
    border-radius: var(--panel-radius-sm);
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease;
}

.smart-suggestion-container::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -10%;
    width: 250px;
    height: 250px;
    background: radial-gradient(circle, rgba(107, 140, 255, 0.2) 0%, transparent 70%);
    border-radius: 50%;
    animation: pulse-glow 4s ease-in-out infinite;
}

@keyframes pulse-glow {
    0%, 100% { transform: scale(1); opacity: 0.6; }
    50% { transform: scale(1.1); opacity: 1; }
}

.smart-suggestion-container:hover {
    border-color: rgba(107, 140, 255, 0.4);
    background: linear-gradient(135deg, rgba(107, 140, 255, 0.2) 0%, rgba(118, 75, 162, 0.15) 100%);
    box-shadow: 0 12px 32px rgba(107, 140, 255, 0.2);
    transform: translateY(-4px);
}

.smart-suggestion-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.smart-suggestion-label {
    font-size: 11px;
    color: rgba(107, 140, 255, 0.8);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

.smart-suggestion-badge {
    background: rgba(16, 185, 129, 0.3);
    color: #69f0ae;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
}

.smart-suggestion-content {
    position: relative;
    z-index: 2;
}

.smart-suggestion-icon {
    font-size: 32px;
    color: rgba(107, 140, 255, 0.7);
    margin-bottom: 12px;
}

.smart-suggestion-title {
    font-size: 16px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.95);
    margin-bottom: 8px;
}

.smart-suggestion-desc {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.5;
    margin-bottom: 16px;
}

.smart-suggestion-features {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.smart-suggestion-feature {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: rgba(107, 140, 255, 0.8);
    background: rgba(107, 140, 255, 0.1);
    padding: 4px 8px;
    border-radius: 4px;
}

.smart-suggestion-feature i {
    font-size: 10px;
}

.smart-suggestion-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: linear-gradient(135deg, rgba(107, 140, 255, 0.8) 0%, rgba(118, 75, 162, 0.6) 100%);
    color: white;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
}

.smart-suggestion-cta:hover {
    background: linear-gradient(135deg, rgba(107, 140, 255, 1) 0%, rgba(118, 75, 162, 0.8) 100%);
    box-shadow: 0 8px 20px rgba(107, 140, 255, 0.3);
    transform: translateX(2px);
}

/* Mobil */
@media only screen and (max-width: 768px) {
    .smart-suggestion-container {
        padding: 16px;
    }
    
    .smart-suggestion-icon {
        font-size: 28px;
    }
    
    .smart-suggestion-title {
        font-size: 14px;
    }
}

/* =============================================
   DROPDOWN FIX - En güçlü override
   ============================================= */
#clientAreaMenus-2 .inner {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    background: #0d1020 !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 8px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6) !important;
    padding: 8px 0 !important;
    min-width: 180px !important;
    z-index: 9999999 !important;
    margin-top: 8px !important;
    list-style: none !important;
}

#clientAreaMenus-2 .inner.show {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

#clientAreaMenus-2 .inner li {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

#clientAreaMenus-2 .inner li a,
#clientAreaMenus-2 .inner li a.toggle {
    display: block !important;
    padding: 10px 16px !important;
    color: rgba(255, 255, 255, 0.75) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    transition: all 0.15s ease !important;
    border-radius: 0 !important;
}

#clientAreaMenus-2 .inner li a:hover,
#clientAreaMenus-2 .inner li a.toggle:hover {
    background: rgba(102, 126, 234, 0.2) !important;
    color: #fff !important;
    padding-left: 20px !important;
}

#clientAreaMenus-2 > li {
    position: relative !important;
}

/* =============================================
   DROPDOWN FIX - EN SON VE EN YÜKSEK ÖNCELİK
   ============================================= */
html body #clientAreaMenus-2 ul.inner,
html body ul#clientAreaMenus-2 ul.inner,
html body #clientAreaMenus-2 .inner,
#clientAreaMenus-2 .inner {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    min-width: 220px !important;
    background: #0a0e1f !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 8px !important;
    padding: 8px 0 !important;
    margin-top: 8px !important;
    list-style: none !important;
    z-index: 2147483647 !important;
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.7) !important;
}

html body #clientAreaMenus-2 ul.inner.show,
html body ul#clientAreaMenus-2 ul.inner.show,
html body #clientAreaMenus-2 .inner.show,
#clientAreaMenus-2 .inner.show {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

#clientAreaMenus-2 .inner li {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

#clientAreaMenus-2 .inner li a {
    display: block !important;
    padding: 10px 16px !important;
    color: rgba(255, 255, 255, 0.75) !important;
    font-size: 13px !important;
    text-decoration: none !important;
}

#clientAreaMenus-2 .inner li a:hover {
    background: rgba(102, 126, 234, 0.25) !important;
    color: #fff !important;
}

/* =============================================
   Z-INDEX DÜZELTMESİ - DİĞER ELEMENTLERİ DÜŞÜR
   ============================================= */
/* Reklam banner'ları düşük z-index */
.affiliate-banner2,
.mpanelblok,
.mpanelbtns::before,
.mpanelbtns::after,
.col-lg-5.sgtrf,
.col-lg-7,
.banner-text {
    z-index: 1 !important;
}

/* Menü container'ı yükselt */
.mpanelbtns {
    overflow: visible !important;
    z-index: 50 !important;
}

/* Menü parent li yükselt */
#clientAreaMenus-2,
ul#clientAreaMenus-2 {
    overflow: visible !important;
    z-index: 100 !important;
}

#clientAreaMenus-2 > li {
    z-index: 200 !important;
}

/* Dropdown en yüksek */
#clientAreaMenus-2 .inner,
#clientAreaMenus-2 ul.inner {
    z-index: 2147483647 !important;
}

/* =============================================
   ÜRÜN/HİZMET DETAY SAYFASI - TEMİZ BEYAZ TASARIM
   ============================================= */

/* Tab Menü - Beyaz Arka Plan */
body#muspanel ul.tab {
    list-style: none;
    margin: 0 0 25px 0;
    padding: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}

body#muspanel ul.tab li {
    list-style: none;
}

body#muspanel ul.tab li a.tablinks {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    color: #555;
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    border-radius: 6px;
    transition: all 0.2s ease;
    background: #f5f5f5;
    border: 1px solid #e0e0e0;
    cursor: pointer;
}

body#muspanel ul.tab li a.tablinks:hover {
    background: #667eea;
    color: #fff;
    border-color: #667eea;
}

body#muspanel ul.tab li a.tablinks.active {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    border-color: transparent;
}

body#muspanel ul.tab li a.tablinks i {
    font-size: 14px;
}

body#muspanel .orderidno {
    margin-left: auto;
    background: #f0f0f0;
    padding: 8px 14px;
    border-radius: 6px;
    color: #666;
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 5px;
}

body#muspanel .orderidno strong {
    color: #333;
}

/* Tab Content - JavaScript ile kontrol edilir, CSS display:none KULLANMA */
body#muspanel .tabcontent {
    /* display JavaScript tarafından kontrol edilir */
}

/* Hizmet Blokları - Beyaz Arka Plan */
body#muspanel #ozet .hizmetblok,
body#muspanel .tabcontent .hizmetblok {
    display: inline-block;
    vertical-align: top;
    width: 48%;
    margin-right: 2%;
    margin-bottom: 20px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    overflow: hidden;
    box-sizing: border-box;
    box-shadow: 0 2px 10px rgba(0,0,0,0.06);
}

body#muspanel #ozet .hizmetblok:nth-child(2n),
body#muspanel .tabcontent .hizmetblok:nth-child(2n) {
    margin-right: 0;
}

/* Host Server Blok */
body#muspanel #hostserverblok {
    text-align: center;
    padding: 25px;
    background: linear-gradient(135deg, #f8f9ff 0%, #f0f3ff 100%);
}

body#muspanel #hostserverblok img {
    max-width: 200px;
    height: auto;
    margin-bottom: 15px;
}

body#muspanel #hostserverblok i {
    color: #667eea;
}

body#muspanel #detial_domain {
    font-size: 18px;
    color: #222;
    margin: 15px 0;
}

body#muspanel #detial_domain strong {
    color: #222;
}

body#muspanel #server_features {
    color: #555;
}

/* Panel Butonları */
body#muspanel #order-service-detail-btns {
    display: block;
}

body#muspanel #panel_buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 15px;
}

body#muspanel #panel_buttons a {
    display: block;
    padding: 12px 20px;
    border-radius: 8px;
    text-align: center;
    font-weight: 600;
    font-size: 14px;
    color: #fff;
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
}

body#muspanel #panel_buttons a:first-child {
    background: linear-gradient(135deg, #f44336 0%, #d32f2f 100%);
}

body#muspanel #panel_buttons a:nth-child(2) {
    background: linear-gradient(135deg, #2196F3 0%, #1976D2 100%);
}

body#muspanel #panel_buttons a:nth-child(3) {
    background: linear-gradient(135deg, #4CAF50 0%, #388E3C 100%);
}

body#muspanel #panel_buttons a:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

/* Yenileme */
body#muspanel #renewal_list {
    margin: 15px 0;
}

body#muspanel #renewal_list select {
    width: 100%;
    padding: 12px;
    background: #fff;
    border: 1px solid #ddd;
    color: #333;
    border-radius: 8px;
    font-size: 14px;
}

/* Renkli Butonlar */
body#muspanel .yesilbtn,
body#muspanel a.yesilbtn {
    background: linear-gradient(135deg, #4CAF50 0%, #388E3C 100%);
    color: #fff;
    padding: 10px 20px;
    border-radius: 8px;
    display: inline-block;
    cursor: pointer;
    text-decoration: none;
}

body#muspanel .mavibtn,
body#muspanel a.mavibtn {
    background: linear-gradient(135deg, #2196F3 0%, #1976D2 100%);
    color: #fff;
    padding: 10px 20px;
    border-radius: 8px;
    display: inline-block;
    cursor: pointer;
    text-decoration: none;
}

body#muspanel .turuncbtn,
body#muspanel a.turuncbtn {
    background: linear-gradient(135deg, #FF9800 0%, #F57C00 100%);
    color: #fff;
    padding: 10px 20px;
    border-radius: 8px;
    display: inline-block;
    cursor: pointer;
    text-decoration: none;
}

body#muspanel .graybtn,
body#muspanel a.graybtn {
    background: linear-gradient(135deg, #607D8B 0%, #455A64 100%);
    color: #fff;
    padding: 10px 20px;
    border-radius: 8px;
    display: inline-block;
    cursor: pointer;
    text-decoration: none;
}

body#muspanel .yesilbtn:hover,
body#muspanel .mavibtn:hover,
body#muspanel .turuncbtn:hover,
body#muspanel .graybtn:hover {
    opacity: 0.9;
    transform: translateY(-2px);
}

/* =============================================
   TÜM BUTONLAR - BEYAZ YAZI GARANTİSİ
   ============================================= */

/* Panel Butonları (WHM, Webmail vs) */
body#muspanel #panel_buttons a,
body#muspanel #panel_buttons a.yesilbtn,
body#muspanel #panel_buttons a.mavibtn,
body#muspanel #panel_buttons a.turuncbtn,
body#muspanel #panel_buttons a.graybtn {
    color: #ffffff !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    text-decoration: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 12px 20px !important;
    border-radius: 8px !important;
}

body#muspanel #panel_buttons a i,
body#muspanel #panel_buttons a .fa,
body#muspanel #panel_buttons a .ion {
    color: #ffffff !important;
}

/* Gönder Butonu */
body#muspanel .gonderbtn,
body#muspanel a.gonderbtn {
    color: #ffffff !important;
    font-weight: 600 !important;
    display: block !important;
    text-align: center !important;
    padding: 12px 20px !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    cursor: pointer !important;
}

body#muspanel .gonderbtn i,
body#muspanel a.gonderbtn i {
    color: #ffffff !important;
    margin-right: 8px !important;
}

/* Yenile/Uzat Butonu */
body#muspanel #renewal_list_btn,
body#muspanel a#renewal_list_btn {
    background: linear-gradient(135deg, #2196F3 0%, #1976D2 100%) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    padding: 12px 20px !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

body#muspanel #renewal_list_btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 5px 15px rgba(33, 150, 243, 0.4) !important;
}

body#muspanel #renewal_list_btn i,
body#muspanel a#renewal_list_btn i {
    color: #ffffff !important;
}

/* Yeşil Buton */
body#muspanel .yesilbtn,
body#muspanel a.yesilbtn,
body#muspanel button.yesilbtn {
    background: linear-gradient(135deg, #4CAF50 0%, #388E3C 100%) !important;
    color: #ffffff !important;
    padding: 12px 20px !important;
    border-radius: 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    cursor: pointer !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    border: none !important;
}

body#muspanel .yesilbtn i,
body#muspanel a.yesilbtn i {
    color: #ffffff !important;
}

/* Mavi Buton */
body#muspanel .mavibtn,
body#muspanel a.mavibtn,
body#muspanel button.mavibtn {
    background: linear-gradient(135deg, #2196F3 0%, #1976D2 100%) !important;
    color: #ffffff !important;
    padding: 12px 20px !important;
    border-radius: 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    cursor: pointer !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    border: none !important;
}

body#muspanel .mavibtn i,
body#muspanel a.mavibtn i {
    color: #ffffff !important;
}

/* Turuncu Buton */
body#muspanel .turuncbtn,
body#muspanel a.turuncbtn,
body#muspanel button.turuncbtn {
    background: linear-gradient(135deg, #FF9800 0%, #F57C00 100%) !important;
    color: #ffffff !important;
    padding: 12px 20px !important;
    border-radius: 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    cursor: pointer !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    border: none !important;
}

body#muspanel .turuncbtn i,
body#muspanel a.turuncbtn i {
    color: #ffffff !important;
}

/* Gri Buton */
body#muspanel .graybtn,
body#muspanel a.graybtn,
body#muspanel button.graybtn {
    background: linear-gradient(135deg, #607D8B 0%, #455A64 100%) !important;
    color: #ffffff !important;
    padding: 12px 20px !important;
    border-radius: 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    cursor: pointer !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    border: none !important;
}

body#muspanel .graybtn i,
body#muspanel a.graybtn i {
    color: #ffffff !important;
}

/* Tüm buton hover */
body#muspanel .yesilbtn:hover,
body#muspanel .mavibtn:hover,
body#muspanel .turuncbtn:hover,
body#muspanel .graybtn:hover,
body#muspanel .gonderbtn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2) !important;
}

/* Kullanım Göstergeleri */
body#muspanel .use-progressbar {
    display: block;
    width: 100%;
    text-align: center;
    padding: 25px;
    background: #fff;
}

body#muspanel .use-progressbar > div {
    display: inline-block;
    margin: 15px 30px;
    text-align: center;
}

body#muspanel .use-progressbar h5 {
    color: #333;
    font-size: 14px;
    margin-bottom: 10px;
}

body#muspanel .use-progressbar strong {
    color: #222;
}

body#muspanel .use-progressbar span {
    color: #444;
}

body#muspanel .progress-circle span {
    color: #333 !important;
    font-weight: 600;
}

body#muspanel .bar-loading {
    color: #666;
}

body#muspanel #updownbtn {
    display: inline-block;
    margin-top: 20px;
}

/* Tablo Stilleri - Beyaz Tema */
body#muspanel .hizmetblok table {
    width: 100%;
    border-collapse: collapse;
}

body#muspanel .hizmetblok table tr:first-child td {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 15px 20px;
    font-weight: 600;
    color: #fff;
}

body#muspanel .hizmetblok table tr:first-child td strong {
    color: #fff;
}

body#muspanel .hizmetblok table tr td {
    padding: 12px 20px;
    color: #333;
    border-bottom: 1px solid #eee;
    background: #fff;
}

body#muspanel .hizmetblok table tr td strong {
    color: #222;
    font-weight: 600;
}

body#muspanel .hizmetblok table tr td a {
    color: #667eea;
}

body#muspanel .hizmetblok table tr.tutartd td {
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.15) 0%, rgba(56, 142, 60, 0.15) 100%);
    color: #2E7D32;
    font-weight: 600;
    text-align: center;
}

body#muspanel .hizmetblok table tr[bgcolor] td,
body#muspanel .hizmetblok table tr td[bgcolor] {
    background: #f5f7ff !important;
    color: #333;
}

/* Status Badge */
body#muspanel .statusonline {
    background: linear-gradient(135deg, #4CAF50 0%, #388E3C 100%);
    color: #fff;
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 12px;
    display: inline-block;
}

/* Module Details */
body#muspanel #block_module_details_con {
    width: 100%;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.06);
    color: #333;
}

body#muspanel #block_module_details_con strong {
    color: #222;
}

body#muspanel #block_module_details_con a {
    color: #667eea;
}

body#muspanel #block_module_details_con table td {
    color: #333;
}

body#muspanel .block_module_details {
    clear: both;
    width: 100%;
    color: #333;
}

/* Form Alanları - Beyaz Tema */
body#muspanel .formcon {
    display: flex;
    align-items: flex-start;
    padding: 15px 0;
    border-bottom: 1px solid #eee;
    color: #333;
}

body#muspanel .formcon strong {
    color: #222;
}

body#muspanel .yuzde30 {
    width: 30%;
    color: #444;
    padding-top: 10px;
    font-weight: 500;
}

body#muspanel .yuzde50 {
    width: 50%;
    color: #333;
}

body#muspanel .yuzde70 {
    width: 70%;
    color: #333;
}

body#muspanel .formcon input[type="text"],
body#muspanel .formcon input[type="password"],
body#muspanel .formcon input[type="number"],
body#muspanel .formcon select,
body#muspanel .formcon textarea {
    width: 100%;
    background: #fff;
    border: 1px solid #ccc;
    color: #222;
    padding: 12px 15px;
    border-radius: 8px;
}

body#muspanel .formcon input:focus,
body#muspanel .formcon select:focus {
    border-color: #667eea;
    outline: none;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.15);
}

/* Clear */
body#muspanel .clear {
    clear: both;
}

/* Accordion - Beyaz Tema */
body#muspanel .ui-accordion-header {
    background: #f8f9fa;
    border: 1px solid #ddd;
    color: #222;
    padding: 15px 20px;
    border-radius: 10px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 500;
}

body#muspanel .ui-accordion-header:hover {
    background: #f0f3ff;
    border-color: #667eea;
}

body#muspanel .ui-accordion-header.ui-state-active {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    border-color: transparent;
    border-radius: 10px 10px 0 0;
    margin-bottom: 0;
}

body#muspanel .ui-accordion-content {
    background: #fff;
    border: 1px solid #ddd;
    border-top: none;
    border-radius: 0 0 10px 10px;
    padding: 20px;
    margin-bottom: 8px;
    color: #333;
}

body#muspanel .ui-accordion-content strong {
    color: #222;
}

body#muspanel .ui-accordion-content a {
    color: #667eea;
}

/* NS Server Info */
body#muspanel #nserverinfo,
body#muspanel .nserverinfo {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    padding: 15px 20px;
    border-radius: 8px;
    font-weight: 600;
    margin-bottom: 10px;
}

/* Resource Limits Tablosu */
body#muspanel #resource_limits table tr td {
    color: #333;
    background: #fff;
}

body#muspanel #resource_limits table tr td strong {
    color: #222;
}

/* General Info */
body#muspanel .hizmetblok h5 {
    color: #333;
}

body#muspanel .hizmetblok strong {
    color: #222;
}

body#muspanel .hizmetblok span {
    color: #444;
}

body#muspanel .hizmetblok p {
    color: #333;
}

/* Loader */
body#muspanel .load-wrapp {
    text-align: center;
    padding: 40px;
    color: #555;
}

/* Mobil Responsive */
@media (max-width: 992px) {
    body#muspanel #ozet .hizmetblok,
    body#muspanel .tabcontent .hizmetblok {
        display: block;
        width: 100%;
        margin-right: 0;
    }
    
    body#muspanel ul.tab {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
    }
    
    body#muspanel .formcon {
        flex-direction: column;
    }
    
    body#muspanel .yuzde30,
    body#muspanel .yuzde50,
    body#muspanel .yuzde70 {
        width: 100%;
        padding-top: 0;
        margin-bottom: 8px;
    }
}

/* Renk Sınıfları */
body#muspanel .text-success { color: #4CAF50; }
body#muspanel .text-danger { color: #f44336; }
body#muspanel .text-warning { color: #FF9800; }
body#muspanel .text-info { color: #2196F3; }

/* incelebtn */
body#muspanel .incelebtn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 8px 15px;
    background: #f0f3ff;
    color: #667eea;
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.3s ease;
}

body#muspanel .incelebtn:hover {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
}

/* =============================================
   GENEL YAZI RENKLERİ - KOYU TEMA (AÇIK ARKAPLAN İÇİN)
   ============================================= */

/* Genel Metin Renkleri */
body#muspanel .mpanelrightcon,
body#muspanel .mpanelrightcon * {
    color: #333;
}

body#muspanel .mpanelrightcon h1,
body#muspanel .mpanelrightcon h2,
body#muspanel .mpanelrightcon h3,
body#muspanel .mpanelrightcon h4,
body#muspanel .mpanelrightcon h5,
body#muspanel .mpanelrightcon h6 {
    color: #222;
}

body#muspanel .mpanelrightcon strong,
body#muspanel .mpanelrightcon b {
    color: #222;
}

body#muspanel .mpanelrightcon a {
    color: #667eea;
}

body#muspanel .mpanelrightcon a:hover {
    color: #764ba2;
}

/* Tabcontent içeriği */
body#muspanel .tabcontent {
    color: #333;
}

body#muspanel .tabcontent strong {
    color: #222;
}

body#muspanel .tabcontent h5 {
    color: #333;
}

/* Hizmet Blok içeriği */
body#muspanel .hizmetblok {
    color: #333;
}

/* Select option renkleri */
body#muspanel select option {
    background: #fff;
    color: #333;
}

/* Panel title */
body#muspanel .mpaneltitle h4 {
    color: #222;
}

body#muspanel .mpaneltitle h4 strong {
    color: #222;
}

body#muspanel .sayfayolu,
body#muspanel .sayfayolu a {
    color: #666;
}

body#muspanel .sayfayolu a:hover {
    color: #667eea;
}

/* Renewal list */
body#muspanel #renewal_list {
    color: #333;
}

body#muspanel #renewal_list select {
    color: #333;
    background: #fff;
}

/* Copy butonları */
body#muspanel .copybtn {
    color: #667eea;
    cursor: pointer;
}

/* Badge ve etiketler */
body#muspanel .badge {
    color: #fff;
}

/* Alert/Uyarı kutuları */
body#muspanel .alert {
    color: #333;
}

body#muspanel .alert-success {
    background: #d4edda;
    border-color: #c3e6cb;
    color: #155724;
}

body#muspanel .alert-danger {
    background: #f8d7da;
    border-color: #f5c6cb;
    color: #721c24;
}

body#muspanel .alert-warning {
    background: #fff3cd;
    border-color: #ffeeba;
    color: #856404;
}

body#muspanel .alert-info {
    background: #d1ecf1;
    border-color: #bee5eb;
    color: #0c5460;
}

/* Input placeholder */
body#muspanel input::placeholder,
body#muspanel textarea::placeholder {
    color: #999;
}

/* Disabled inputs */
body#muspanel input:disabled,
body#muspanel select:disabled,
body#muspanel textarea:disabled {
    background: #f5f5f5;
    color: #666;
}

/* İkon renkleri */
body#muspanel .hizmetblok i,
body#muspanel .tabcontent i {
    color: #667eea;
}

body#muspanel .fa-check,
body#muspanel .ion-checkmark {
    color: #4CAF50;
}

body#muspanel .fa-times,
body#muspanel .ion-close {
    color: #f44336;
}

/* =============================================
   HİZMETLERİMİZ SAYFASI - TABLO STİLLERİ
   ============================================= */

/* Ana Tablo Container */
body#muspanel .mpanelrightcon #products,
body#muspanel .mpanelrightcon table.table {
    width: 100% !important;
    background: #fff !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.08) !important;
    border-collapse: collapse !important;
}

/* Tablo Başlık */
body#muspanel .mpanelrightcon #products thead,
body#muspanel .mpanelrightcon table.table thead {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
}

body#muspanel .mpanelrightcon #products thead tr th,
body#muspanel .mpanelrightcon table.table thead tr th,
body#muspanel .mpanelrightcon #products thead tr td,
body#muspanel .mpanelrightcon table.table thead tr td {
    background: transparent !important;
    color: #fff !important;
    padding: 15px 18px !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    border: none !important;
}

/* Tablo Body */
body#muspanel .mpanelrightcon #products tbody tr,
body#muspanel .mpanelrightcon table.table tbody tr {
    background: #fff !important;
    transition: all 0.2s ease !important;
}

body#muspanel .mpanelrightcon #products tbody tr:nth-child(even),
body#muspanel .mpanelrightcon table.table tbody tr:nth-child(even) {
    background: #f9fafb !important;
}

body#muspanel .mpanelrightcon #products tbody tr:hover,
body#muspanel .mpanelrightcon table.table tbody tr:hover {
    background: #f0f4ff !important;
}

body#muspanel .mpanelrightcon #products tbody tr td,
body#muspanel .mpanelrightcon table.table tbody tr td {
    color: #333 !important;
    padding: 14px 18px !important;
    font-size: 14px !important;
    border-bottom: 1px solid #eee !important;
    vertical-align: middle !important;
    background: transparent !important;
}

body#muspanel .mpanelrightcon #products tbody tr td strong,
body#muspanel .mpanelrightcon table.table tbody tr td strong {
    color: #222 !important;
    font-weight: 600 !important;
}

body#muspanel .mpanelrightcon #products tbody tr td a,
body#muspanel .mpanelrightcon table.table tbody tr td a {
    color: #667eea !important;
}

body#muspanel .mpanelrightcon #products tbody tr td a:hover,
body#muspanel .mpanelrightcon table.table tbody tr td a:hover {
    color: #764ba2 !important;
}

/* İncele Butonu - Tablo İçinde */
body#muspanel .mpanelrightcon #products .incelebtn,
body#muspanel .mpanelrightcon table.table .incelebtn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 8px 16px !important;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: #fff !important;
    border-radius: 6px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    transition: all 0.3s ease !important;
    width: auto !important;
    height: auto !important;
}

body#muspanel .mpanelrightcon #products .incelebtn:hover,
body#muspanel .mpanelrightcon table.table .incelebtn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4) !important;
}

body#muspanel .mpanelrightcon #products .incelebtn i,
body#muspanel .mpanelrightcon table.table .incelebtn i {
    color: #fff !important;
}

/* Durum Etiketleri */
body#muspanel .mpanelrightcon .statusActive,
body#muspanel .mpanelrightcon .status-active,
body#muspanel .mpanelrightcon .durum-aktif {
    display: inline-block !important;
    padding: 5px 12px !important;
    background: linear-gradient(135deg, #28a745 0%, #20963d 100%) !important;
    color: #fff !important;
    border-radius: 20px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
}

body#muspanel .mpanelrightcon .statusPending,
body#muspanel .mpanelrightcon .status-pending,
body#muspanel .mpanelrightcon .durum-bekliyor {
    display: inline-block !important;
    padding: 5px 12px !important;
    background: linear-gradient(135deg, #ffc107 0%, #e6ad06 100%) !important;
    color: #333 !important;
    border-radius: 20px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
}

body#muspanel .mpanelrightcon .statusSuspended,
body#muspanel .mpanelrightcon .status-suspended,
body#muspanel .mpanelrightcon .durum-askida {
    display: inline-block !important;
    padding: 5px 12px !important;
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%) !important;
    color: #fff !important;
    border-radius: 20px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
}

body#muspanel .mpanelrightcon .statusCancelled,
body#muspanel .mpanelrightcon .status-cancelled,
body#muspanel .mpanelrightcon .durum-iptal {
    display: inline-block !important;
    padding: 5px 12px !important;
    background: linear-gradient(135deg, #6c757d 0%, #5a6268 100%) !important;
    color: #fff !important;
    border-radius: 20px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
}

/* DataTables Uyumu */
body#muspanel .dataTables_wrapper {
    color: #333 !important;
}

body#muspanel .dataTables_wrapper .dataTables_length,
body#muspanel .dataTables_wrapper .dataTables_filter,
body#muspanel .dataTables_wrapper .dataTables_info,
body#muspanel .dataTables_wrapper .dataTables_paginate {
    color: #333 !important;
    padding: 10px 0 !important;
}

body#muspanel .dataTables_wrapper .dataTables_length label,
body#muspanel .dataTables_wrapper .dataTables_filter label {
    color: #333 !important;
}

body#muspanel .dataTables_wrapper .dataTables_length select,
body#muspanel .dataTables_wrapper .dataTables_filter input {
    background: #fff !important;
    color: #333 !important;
    border: 1px solid #ddd !important;
    border-radius: 6px !important;
    padding: 6px 12px !important;
}

body#muspanel .dataTables_wrapper .dataTables_paginate .paginate_button {
    background: #fff !important;
    color: #333 !important;
    border: 1px solid #ddd !important;
    border-radius: 6px !important;
    padding: 6px 12px !important;
    margin: 0 3px !important;
}

body#muspanel .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: #667eea !important;
    color: #fff !important;
    border-color: #667eea !important;
}

body#muspanel .dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: #fff !important;
    border-color: transparent !important;
}

/* Boş Liste Mesajı */
body#muspanel #orders-none {
    text-align: center !important;
    padding: 50px 20px !important;
    color: #666 !important;
    font-size: 15px !important;
    background: #f9fafb !important;
    border-radius: 12px !important;
    border: 1px dashed #ddd !important;
}

/* =============================================
   HİZMET DETAY SAYFASI - TABLO RENKLERİ
   ============================================= */

/* Hizmet Blokları İçindeki Tüm Tablolar */
body#muspanel .hizmetblok table,
body#muspanel #ozet .hizmetblok table,
body#muspanel .tabcontent .hizmetblok table {
    width: 100% !important;
    border-collapse: collapse !important;
    background: #fff !important;
}

/* İlk Satır = Başlık (Gradient Mor) */
body#muspanel .hizmetblok table tr:first-child td,
body#muspanel .hizmetblok table thead td,
body#muspanel .hizmetblok table thead th {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: #fff !important;
    padding: 15px 20px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    border: none !important;
}

body#muspanel .hizmetblok table tr:first-child td strong,
body#muspanel .hizmetblok table thead td strong,
body#muspanel .hizmetblok table thead th strong {
    color: #fff !important;
}

/* Normal Satırlar - Beyaz/Koyu Metin */
body#muspanel .hizmetblok table tr td {
    background: #fff !important;
    color: #333 !important;
    padding: 12px 20px !important;
    font-size: 14px !important;
    border-bottom: 1px solid #eee !important;
}

body#muspanel .hizmetblok table tr:nth-child(even) td {
    background: #f9fafb !important;
}

body#muspanel .hizmetblok table tr td strong {
    color: #222 !important;
    font-weight: 600 !important;
}

body#muspanel .hizmetblok table tr td span {
    color: #333 !important;
}

body#muspanel .hizmetblok table tr td a {
    color: #667eea !important;
}

body#muspanel .hizmetblok table tr td a:hover {
    color: #764ba2 !important;
}

/* Bgcolor olan satırlar (eski stil) */
body#muspanel .hizmetblok table tr[bgcolor] td,
body#muspanel .hizmetblok table tr td[bgcolor],
body#muspanel .hizmetblok table tr td[style*="background"] {
    background: #f5f7ff !important;
    color: #333 !important;
}

/* Tutar Satırı (Yeşil) */
body#muspanel .hizmetblok table tr.tutartd td {
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.15) 0%, rgba(56, 142, 60, 0.15) 100%) !important;
    color: #2E7D32 !important;
    font-weight: 600 !important;
    text-align: center !important;
}

body#muspanel .hizmetblok table tr.tutartd td strong {
    color: #2E7D32 !important;
}

/* NS Server Bilgileri */
body#muspanel #nserverinfo,
body#muspanel .nserverinfo,
body#muspanel [id*="nserver"],
body#muspanel [class*="nserver"] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: #fff !important;
    padding: 15px 20px !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    margin-bottom: 10px !important;
}

/* FTP Bilgileri - Özel Stil */
body#muspanel .hizmetblok table tr td:first-child {
    background: #f8f9fa !important;
    color: #555 !important;
    font-weight: 500 !important;
    width: 40% !important;
}

body#muspanel .hizmetblok table tr td:last-child {
    background: #fff !important;
    color: #333 !important;
    font-weight: 600 !important;
}

/* Status Online */
body#muspanel .statusonline {
    background: linear-gradient(135deg, #4CAF50 0%, #388E3C 100%) !important;
    color: #fff !important;
    padding: 5px 15px !important;
    border-radius: 20px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    display: inline-block !important;
}

/* Module Details İçeriği */
body#muspanel #block_module_details_con,
body#muspanel .block_module_details {
    background: #fff !important;
    color: #333 !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 12px !important;
    padding: 20px !important;
}

body#muspanel #block_module_details_con table td,
body#muspanel .block_module_details table td {
    background: #fff !important;
    color: #333 !important;
    padding: 10px 15px !important;
    border-bottom: 1px solid #eee !important;
}

body#muspanel #block_module_details_con table td strong,
body#muspanel .block_module_details table td strong {
    color: #222 !important;
}

body#muspanel #block_module_details_con a,
body#muspanel .block_module_details a {
    color: #667eea !important;
}

/* Özellikler Bölümü - Accordion İçi */
body#muspanel .ui-accordion-content table td {
    background: #fff !important;
    color: #333 !important;
    padding: 10px 15px !important;
    border-bottom: 1px solid #eee !important;
}

body#muspanel .ui-accordion-content table td strong {
    color: #222 !important;
}

/* Progress Bar / Kullanım Bilgisi */
body#muspanel .use-progressbar {
    background: #fff !important;
}

body#muspanel .use-progressbar h5,
body#muspanel .use-progressbar strong,
body#muspanel .use-progressbar span,
body#muspanel .use-progressbar p {
    color: #333 !important;
}

body#muspanel .progress-circle span {
    color: #333 !important;
    font-weight: 700 !important;
}

/* Tümünü Göster Butonu */
body#muspanel .hizmetblok a.incelebtn,
body#muspanel .hizmetblok .incelebtn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 8px 15px !important;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: #fff !important;
    border-radius: 6px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
}

body#muspanel .hizmetblok a.incelebtn i,
body#muspanel .hizmetblok .incelebtn i {
    color: #fff !important;
}

/* Copy Butonları */
body#muspanel .copybtn,
body#muspanel [class*="copy"] {
    color: #667eea !important;
    cursor: pointer !important;
}

body#muspanel .copybtn:hover {
    color: #764ba2 !important;
}

/* =============================================
   GLOBAL RENK OVERRIDE - EN YÜKSEK ÖNCELİK
   Tüm hizmet detay sayfası tablo renkleri
   ============================================= */

/* GENEL BİLGİLER, ÖZELLİKLER, FTP, NS TABLOLARI */
body#muspanel #ozet table,
body#muspanel #general-info table,
body#muspanel #resource_limits table,
body#muspanel .hizmetblok table,
body#muspanel .tabcontent table,
body#muspanel #block_module_details_con table {
    width: 100% !important;
    border-collapse: collapse !important;
    background: #ffffff !important;
}

/* BAŞLIK SATIRLARI - bgcolor="#ebebeb" olanlar */
body#muspanel table tr td[bgcolor],
body#muspanel table tr td[bgcolor="#ebebeb"],
body#muspanel table tr td[bgcolor="ebebeb"],
body#muspanel table thead td,
body#muspanel table thead th,
body#muspanel #general-info table tr:first-child td,
body#muspanel #resource_limits table tr:first-child td,
body#muspanel .hizmetblok table tr:first-child td {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: #ffffff !important;
    padding: 15px 20px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    border: none !important;
}

body#muspanel table tr td[bgcolor] strong,
body#muspanel table tr td[bgcolor="#ebebeb"] strong,
body#muspanel #general-info table tr:first-child td strong,
body#muspanel #resource_limits table tr:first-child td strong,
body#muspanel .hizmetblok table tr:first-child td strong {
    color: #ffffff !important;
}

body#muspanel table tr td[bgcolor] span,
body#muspanel table tr td[bgcolor="#ebebeb"] span,
body#muspanel #general-info table tr:first-child td span,
body#muspanel .hizmetblok table tr:first-child td span {
    color: #ffffff !important;
}

body#muspanel table tr td[bgcolor] a,
body#muspanel table tr td[bgcolor="#ebebeb"] a,
body#muspanel #general-info table tr:first-child td a {
    color: #ffffff !important;
    text-decoration: underline !important;
}

/* NORMAL SATIRLAR - VERİ HÜCRELERİ */
body#muspanel #general-info table tr:not(:first-child) td,
body#muspanel #resource_limits table tr:not(:first-child) td,
body#muspanel .hizmetblok table tr:not(:first-child) td,
body#muspanel #block_module_details_con table tr td {
    background: #ffffff !important;
    color: #333333 !important;
    padding: 12px 20px !important;
    font-size: 14px !important;
    border-bottom: 1px solid #eeeeee !important;
    line-height: 1.5 !important;
}

/* Çift satırlar için zebra efekti */
body#muspanel #general-info table tr:nth-child(even):not(:first-child) td,
body#muspanel #resource_limits table tr:nth-child(even):not(:first-child) td,
body#muspanel .hizmetblok table tr:nth-child(even):not(:first-child) td {
    background: #f9fafb !important;
}

/* Strong etiketleri */
body#muspanel #general-info table tr:not(:first-child) td strong,
body#muspanel #resource_limits table tr:not(:first-child) td strong,
body#muspanel .hizmetblok table tr:not(:first-child) td strong,
body#muspanel #block_module_details_con table tr td strong {
    color: #222222 !important;
    font-weight: 600 !important;
}

/* Linkler */
body#muspanel #general-info table tr:not(:first-child) td a,
body#muspanel #resource_limits table tr:not(:first-child) td a,
body#muspanel .hizmetblok table tr:not(:first-child) td a,
body#muspanel #block_module_details_con table tr td a {
    color: #667eea !important;
}

body#muspanel #general-info table tr:not(:first-child) td a:hover,
body#muspanel #resource_limits table tr:not(:first-child) td a:hover,
body#muspanel .hizmetblok table tr:not(:first-child) td a:hover {
    color: #764ba2 !important;
}

/* TUTAR SATIRI */
body#muspanel table tr.tutartd td,
body#muspanel .hizmetblok table tr.tutartd td,
body#muspanel #general-info table tr.tutartd td {
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.15) 0%, rgba(56, 142, 60, 0.15) 100%) !important;
    color: #2E7D32 !important;
    font-weight: 600 !important;
    text-align: center !important;
}

body#muspanel table tr.tutartd td strong,
body#muspanel .hizmetblok table tr.tutartd td strong,
body#muspanel #general-info table tr.tutartd td strong {
    color: #2E7D32 !important;
}

body#muspanel table tr.tutartd td a,
body#muspanel .hizmetblok table tr.tutartd td a {
    color: #2E7D32 !important;
}

/* NS SERVER INFO - ÖNCELİKLİ */
body#muspanel #nserverinfo,
body#muspanel td#nserverinfo,
body#muspanel table tr td#nserverinfo {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: #ffffff !important;
    padding: 15px 20px !important;
    font-weight: 600 !important;
}

body#muspanel #nserverinfo strong,
body#muspanel td#nserverinfo strong {
    color: #ffffff !important;
}

/* FTP BİLGİLERİ TABLOSU */
body#muspanel .hizmetblok table tr td:first-child:not([bgcolor]):not([colspan]) {
    background: #f8f9fa !important;
    color: #555555 !important;
    font-weight: 500 !important;
    border-right: 1px solid #eeeeee !important;
}

/* STATUS ONLINE */
body#muspanel .statusonline {
    background: linear-gradient(135deg, #4CAF50 0%, #388E3C 100%) !important;
    color: #ffffff !important;
    padding: 5px 15px !important;
    border-radius: 20px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    display: inline-block !important;
    animation: shadow-pulse 1s infinite !important;
}

/* MODAL İÇİ TABLOLAR (Tümünü Göster popup) */
body#muspanel #otherLimits table tr td,
body#muspanel .iziModal-content table tr td,
body#muspanel [data-izimodal-title] table tr td {
    background: #ffffff !important;
    color: #333333 !important;
    padding: 12px 15px !important;
    border-bottom: 1px solid #eeeeee !important;
}

body#muspanel #otherLimits table tr td strong,
body#muspanel .iziModal-content table tr td strong {
    color: #222222 !important;
}

/* USE-PROGRESSBAR - KULLANIM BİLGİSİ */
body#muspanel .use-progressbar {
    background: #ffffff !important;
    padding: 25px !important;
}

body#muspanel .use-progressbar h5 {
    color: #333333 !important;
    font-size: 16px !important;
}

body#muspanel .use-progressbar h5 strong {
    color: #222222 !important;
}

body#muspanel .use-progressbar .progress-circle span {
    color: #333333 !important;
    font-weight: 700 !important;
}

body#muspanel .use-progressbar .bar-loading {
    color: #666666 !important;
}

/* BLOCK MODULE DETAILS */
body#muspanel #block_module_details_con {
    background: #ffffff !important;
    color: #333333 !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 12px !important;
    padding: 20px !important;
    margin-bottom: 20px !important;
}

body#muspanel #block_module_details_con * {
    color: #333333 !important;
}

body#muspanel #block_module_details_con strong {
    color: #222222 !important;
}

body#muspanel #block_module_details_con a {
    color: #667eea !important;
}

/* RESOURCE LIMITS */
body#muspanel #resource_limits {
    background: #ffffff !important;
}

body#muspanel #resource_limits table {
    background: #ffffff !important;
}

/* BLOCK ITEM */
body#muspanel .block-item {
    background: #ffffff !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 12px !important;
    margin-bottom: 20px !important;
}

body#muspanel .block-item .block_module_details-title {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: #ffffff !important;
    padding: 15px 20px !important;
}

body#muspanel .block-item .block_module_details-title h4 {
    color: #ffffff !important;
    margin: 0 !important;
}

body#muspanel .block-item-desc {
    background: #ffffff !important;
    color: #333333 !important;
    padding: 15px !important;
}

/* FORM CON */
body#muspanel .formcon {
    color: #333333 !important;
}

body#muspanel .formcon strong {
    color: #222222 !important;
}

body#muspanel .yuzde30,
body#muspanel .yuzde50,
body#muspanel .yuzde70 {
    color: #333333 !important;
}

/* INPUT VE SELECT */
body#muspanel input[type="text"],
body#muspanel input[type="password"],
body#muspanel input[type="email"],
body#muspanel input[type="number"],
body#muspanel select,
body#muspanel textarea {
    background: #ffffff !important;
    color: #333333 !important;
    border: 1px solid #cccccc !important;
}

body#muspanel select option {
    background: #ffffff !important;
    color: #333333 !important;
}

/* =============================================
   DASHBOARD / ANA SAYFA - TABLO VE DURUM STİLLERİ
   ============================================= */

/* Dashboard Blokları */
body#muspanel .wclientblockscon .moderncliendblock {
    background: #ffffff !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
    padding: 25px !important;
    margin-bottom: 25px !important;
}

/* Dashboard Blok Başlıkları */
body#muspanel .moderncliendblock .mpaneltitle,
body#muspanel .wclientblockscon .mpaneltitle {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    margin: -25px -25px 20px -25px !important;
    padding: 18px 25px !important;
    border-radius: 16px 16px 0 0 !important;
    border-bottom: none !important;
}

body#muspanel .moderncliendblock .mpaneltitle h4,
body#muspanel .wclientblockscon .mpaneltitle h4 {
    color: #ffffff !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    margin: 0 !important;
}

body#muspanel .moderncliendblock .mpaneltitle h4 i {
    color: #ffffff !important;
    margin-right: 10px !important;
}

body#muspanel .moderncliendblock .mpaneltitle a,
body#muspanel .moderncliendblock .mpaneltitle .sbtn {
    background: rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
    padding: 8px 16px !important;
    border-radius: 6px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
}

body#muspanel .moderncliendblock .mpaneltitle a:hover,
body#muspanel .moderncliendblock .mpaneltitle .sbtn:hover {
    background: rgba(255, 255, 255, 0.3) !important;
}

/* Dashboard Tabloları */
body#muspanel .moderncliendblock table,
body#muspanel .wclientblockscon table {
    width: 100% !important;
    border-collapse: collapse !important;
    background: #ffffff !important;
}

body#muspanel .moderncliendblock table thead,
body#muspanel .wclientblockscon table thead {
    background: #f8f9fa !important;
}

body#muspanel .moderncliendblock table thead th,
body#muspanel .moderncliendblock table thead td,
body#muspanel .wclientblockscon table thead th {
    background: #f8f9fa !important;
    color: #555555 !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding: 12px 15px !important;
    border-bottom: 2px solid #e0e0e0 !important;
    text-align: left !important;
}

body#muspanel .moderncliendblock table tbody tr,
body#muspanel .wclientblockscon table tbody tr {
    background: #ffffff !important;
    transition: all 0.2s ease !important;
}

body#muspanel .moderncliendblock table tbody tr:nth-child(even),
body#muspanel .wclientblockscon table tbody tr:nth-child(even) {
    background: #fafbfc !important;
}

body#muspanel .moderncliendblock table tbody tr:hover,
body#muspanel .wclientblockscon table tbody tr:hover {
    background: #f0f4ff !important;
}

body#muspanel .moderncliendblock table tbody td,
body#muspanel .wclientblockscon table tbody td {
    color: #333333 !important;
    padding: 14px 15px !important;
    border-bottom: 1px solid #eeeeee !important;
    font-size: 14px !important;
    vertical-align: middle !important;
}

body#muspanel .moderncliendblock table tbody td strong,
body#muspanel .wclientblockscon table tbody td strong {
    color: #222222 !important;
    font-weight: 600 !important;
    display: block !important;
}

body#muspanel .moderncliendblock table tbody td a,
body#muspanel .wclientblockscon table tbody td a {
    color: #667eea !important;
}

body#muspanel .moderncliendblock table tbody td a:hover,
body#muspanel .wclientblockscon table tbody td a:hover {
    color: #764ba2 !important;
}

/* Alt Domain/Ürün Bilgisi */
body#muspanel .moderncliendblock table tbody td span,
body#muspanel .wclientblockscon table tbody td span {
    color: #666666 !important;
    font-size: 13px !important;
}

/* DURUM ETİKETLERİ - AKTİF / İPTAL / BEKLEMEDE */
body#muspanel .moderncliendblock .statusActive,
body#muspanel .moderncliendblock .status-active,
body#muspanel .wclientblockscon .statusActive,
body#muspanel .wclientblockscon .status-active,
body#muspanel table .statusActive,
body#muspanel table .status-active,
body#muspanel .statusonline {
    display: inline-block !important;
    padding: 6px 14px !important;
    background: linear-gradient(135deg, #28a745 0%, #20963d 100%) !important;
    color: #ffffff !important;
    border-radius: 20px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
    box-shadow: 0 2px 8px rgba(40, 167, 69, 0.3) !important;
}

body#muspanel .moderncliendblock .statusCancelled,
body#muspanel .moderncliendblock .status-cancelled,
body#muspanel .wclientblockscon .statusCancelled,
body#muspanel .wclientblockscon .status-cancelled,
body#muspanel table .statusCancelled,
body#muspanel table .status-cancelled {
    display: inline-block !important;
    padding: 6px 14px !important;
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%) !important;
    color: #ffffff !important;
    border-radius: 20px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
    box-shadow: 0 2px 8px rgba(220, 53, 69, 0.3) !important;
}

body#muspanel .moderncliendblock .statusPending,
body#muspanel .moderncliendblock .status-pending,
body#muspanel .wclientblockscon .statusPending,
body#muspanel .wclientblockscon .status-pending,
body#muspanel table .statusPending,
body#muspanel table .status-pending {
    display: inline-block !important;
    padding: 6px 14px !important;
    background: linear-gradient(135deg, #ffc107 0%, #e0a800 100%) !important;
    color: #333333 !important;
    border-radius: 20px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
    box-shadow: 0 2px 8px rgba(255, 193, 7, 0.3) !important;
}

body#muspanel .moderncliendblock .statusSuspended,
body#muspanel .moderncliendblock .status-suspended,
body#muspanel .wclientblockscon .statusSuspended,
body#muspanel .wclientblockscon .status-suspended,
body#muspanel table .statusSuspended,
body#muspanel table .status-suspended {
    display: inline-block !important;
    padding: 6px 14px !important;
    background: linear-gradient(135deg, #fd7e14 0%, #e06c00 100%) !important;
    color: #ffffff !important;
    border-radius: 20px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
    box-shadow: 0 2px 8px rgba(253, 126, 20, 0.3) !important;
}

/* Türkçe Durum Metinleri İçin */
body#muspanel table td:contains("Aktif"),
body#muspanel .moderncliendblock td:last-child {
    font-weight: 500 !important;
}

/* İşlem Sütunu - Yönet Butonu */
body#muspanel .moderncliendblock table .incelebtn,
body#muspanel .wclientblockscon table .incelebtn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 8px 16px !important;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: #ffffff !important;
    border-radius: 6px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    width: auto !important;
    height: auto !important;
    gap: 6px !important;
}

body#muspanel .moderncliendblock table .incelebtn:hover,
body#muspanel .wclientblockscon table .incelebtn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4) !important;
}

body#muspanel .moderncliendblock table .incelebtn i,
body#muspanel .wclientblockscon table .incelebtn i {
    color: #ffffff !important;
}

/* DataTables - Kayıt Göster ve Sayfalama */
body#muspanel .moderncliendblock .dataTables_wrapper,
body#muspanel .wclientblockscon .dataTables_wrapper {
    color: #333333 !important;
}

body#muspanel .moderncliendblock .dataTables_length,
body#muspanel .moderncliendblock .dataTables_filter,
body#muspanel .moderncliendblock .dataTables_info {
    color: #555555 !important;
    padding: 10px 0 !important;
}

body#muspanel .moderncliendblock .dataTables_length label,
body#muspanel .moderncliendblock .dataTables_filter label {
    color: #555555 !important;
}

body#muspanel .moderncliendblock .dataTables_length select,
body#muspanel .moderncliendblock .dataTables_filter input {
    background: #ffffff !important;
    color: #333333 !important;
    border: 1px solid #dddddd !important;
    border-radius: 6px !important;
    padding: 6px 12px !important;
}

body#muspanel .moderncliendblock .dataTables_paginate .paginate_button {
    background: #ffffff !important;
    color: #333333 !important;
    border: 1px solid #dddddd !important;
    border-radius: 6px !important;
    padding: 8px 14px !important;
    margin: 0 3px !important;
}

body#muspanel .moderncliendblock .dataTables_paginate .paginate_button:hover {
    background: #667eea !important;
    color: #ffffff !important;
    border-color: #667eea !important;
}

body#muspanel .moderncliendblock .dataTables_paginate .paginate_button.current {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: #ffffff !important;
    border-color: transparent !important;
}

/* Tab Menüsü - Alan Adlarım (Tümü, Aktif, İşlemde...) */
body#muspanel .moderncliendblock .nav-tabs,
body#muspanel .wclientblockscon .nav-tabs,
body#muspanel .moderncliendblock ul.tab {
    background: #f5f5f5 !important;
    border-radius: 8px !important;
    padding: 8px !important;
    margin-bottom: 20px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 5px !important;
    list-style: none !important;
}

body#muspanel .moderncliendblock .nav-tabs li a,
body#muspanel .moderncliendblock ul.tab li a {
    display: inline-block !important;
    padding: 8px 16px !important;
    color: #555555 !important;
    background: transparent !important;
    border-radius: 6px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}

body#muspanel .moderncliendblock .nav-tabs li a:hover,
body#muspanel .moderncliendblock ul.tab li a:hover {
    background: #ffffff !important;
    color: #667eea !important;
}

body#muspanel .moderncliendblock .nav-tabs li.active a,
body#muspanel .moderncliendblock .nav-tabs li a.active,
body#muspanel .moderncliendblock ul.tab li a.active {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: #ffffff !important;
}

/* Boş İçerik Mesajı */
body#muspanel .moderncliendblock .noentryblock,
body#muspanel .wclientblockscon .noentryblock {
    text-align: center !important;
    padding: 40px 20px !important;
    color: #666666 !important;
    background: #f9fafb !important;
    border-radius: 12px !important;
    border: 1px dashed #dddddd !important;
}

body#muspanel .moderncliendblock .noentryblock i {
    font-size: 48px !important;
    color: #cccccc !important;
    margin-bottom: 15px !important;
    display: block !important;
}

/* Destek Talebi Oluştur Butonu */
body#muspanel .moderncliendblock a.sbtn,
body#muspanel .wclientblockscon a.sbtn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 10px 20px !important;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: #ffffff !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}

body#muspanel .moderncliendblock a.sbtn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4) !important;
}

/* İşlem Geçmişi */
body#muspanel .moderncliendblock .activitylist,
body#muspanel .wclientblockscon .activitylist {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

body#muspanel .moderncliendblock .activitylist li {
    padding: 15px !important;
    border-bottom: 1px solid #eeeeee !important;
    color: #333333 !important;
    font-size: 14px !important;
}

body#muspanel .moderncliendblock .activitylist li:last-child {
    border-bottom: none !important;
}

body#muspanel .moderncliendblock .activitylist li strong {
    color: #222222 !important;
}

body#muspanel .moderncliendblock .activitylist li span {
    color: #666666 !important;
    font-size: 13px !important;
}

/* Sayfalama Numaraları */
body#muspanel .moderncliendblock .pagination,
body#muspanel .wclientblockscon .pagination {
    display: flex !important;
    justify-content: center !important;
    gap: 5px !important;
    margin-top: 20px !important;
    padding: 10px !important;
}

body#muspanel .moderncliendblock .pagination a,
body#muspanel .moderncliendblock .pagination span {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 36px !important;
    height: 36px !important;
    padding: 0 12px !important;
    background: #ffffff !important;
    color: #333333 !important;
    border: 1px solid #dddddd !important;
    border-radius: 6px !important;
    font-size: 14px !important;
    text-decoration: none !important;
}

body#muspanel .moderncliendblock .pagination a:hover {
    background: #667eea !important;
    color: #ffffff !important;
    border-color: #667eea !important;
}

body#muspanel .moderncliendblock .pagination .active,
body#muspanel .moderncliendblock .pagination span.current {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: #ffffff !important;
    border-color: transparent !important;
}

/* ==============================================
   DESTEK TALEPLERİ SAYFASI STİLLERİ
   ============================================== */

/* Ana Container */
body#muspanel .desteksistemi {
    background: #ffffff !important;
    border-radius: 16px !important;
    padding: 25px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
    margin-top: 20px !important;
}

/* Sayfa Başlığı */
body#muspanel .mpaneltitle {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    border-radius: 16px !important;
    padding: 20px 25px !important;
    margin-bottom: 0 !important;
    flex-wrap: wrap !important;
    gap: 15px !important;
}

body#muspanel .mpaneltitle h4 {
    color: #ffffff !important;
    margin: 0 !important;
    font-size: 20px !important;
    font-weight: 600 !important;
}

body#muspanel .mpaneltitle h4 strong {
    color: #ffffff !important;
}

body#muspanel .mpaneltitle h4 i {
    color: rgba(255, 255, 255, 0.9) !important;
    margin-right: 10px !important;
}

/* Yeni Talep Butonu */
body#muspanel .mpaneltitle .destekolsbtn,
body#muspanel .mpaneltitle a.lbtn,
body#muspanel .mpaneltitle a.green {
    background: rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
    border: 2px solid rgba(255, 255, 255, 0.5) !important;
    padding: 12px 24px !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
}

body#muspanel .mpaneltitle .destekolsbtn:hover,
body#muspanel .mpaneltitle a.lbtn:hover,
body#muspanel .mpaneltitle a.green:hover {
    background: #ffffff !important;
    color: #667eea !important;
    border-color: #ffffff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2) !important;
}

/* Tickets Tablosu */
body#muspanel #tickets {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    background: #ffffff !important;
    border-radius: 12px !important;
    overflow: hidden !important;
}

body#muspanel #tickets thead {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
}

body#muspanel #tickets thead tr th {
    background: transparent !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding: 16px 15px !important;
    border: none !important;
    text-align: center !important;
}

body#muspanel #tickets tbody tr {
    background: #ffffff !important;
    transition: all 0.3s ease !important;
}

body#muspanel #tickets tbody tr:nth-child(even) {
    background: #f8f9fa !important;
}

body#muspanel #tickets tbody tr:hover {
    background: #e8f0fe !important;
    transform: scale(1.005) !important;
}

body#muspanel #tickets tbody tr td {
    padding: 16px 15px !important;
    color: #333333 !important;
    font-size: 14px !important;
    border-bottom: 1px solid #e9ecef !important;
    vertical-align: middle !important;
}

/* Talep Başlığı Linkleri */
body#muspanel #tickets tbody tr td a {
    color: #667eea !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    transition: all 0.3s ease !important;
}

body#muspanel #tickets tbody tr td a:hover {
    color: #764ba2 !important;
    text-decoration: underline !important;
}

/* Ürün/Hizmet Bilgisi */
body#muspanel #tickets .productinfo,
body#muspanel #tickets tbody tr td span.productinfo {
    display: inline-block !important;
    background: linear-gradient(135deg, #e8f0fe 0%, #f0e6ff 100%) !important;
    color: #5a6fd6 !important;
    font-size: 11px !important;
    padding: 4px 10px !important;
    border-radius: 6px !important;
    margin-top: 6px !important;
    font-weight: 500 !important;
}

/* İncele Butonu */
body#muspanel #tickets .incelebtn,
body#muspanel #tickets tbody tr td a.incelebtn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: #ffffff !important;
    padding: 8px 16px !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3) !important;
}

body#muspanel #tickets .incelebtn:hover,
body#muspanel #tickets tbody tr td a.incelebtn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(102, 126, 234, 0.4) !important;
    color: #ffffff !important;
    text-decoration: none !important;
}

/* Durum Etiketleri */
body#muspanel #tickets .label,
body#muspanel #tickets span[class*="label"],
body#muspanel .desteksistemi .label {
    display: inline-block !important;
    padding: 6px 14px !important;
    border-radius: 20px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
}

/* Açık - Yeşil */
body#muspanel #tickets .label-success,
body#muspanel #tickets .label.label-success,
body#muspanel .desteksistemi .label-success {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3) !important;
}

/* Beklemede - Sarı/Turuncu */
body#muspanel #tickets .label-warning,
body#muspanel #tickets .label.label-warning,
body#muspanel .desteksistemi .label-warning {
    background: linear-gradient(135deg, #f7971e 0%, #ffd200 100%) !important;
    color: #333333 !important;
    box-shadow: 0 4px 12px rgba(247, 151, 30, 0.3) !important;
}

/* Kapalı - Kırmızı */
body#muspanel #tickets .label-danger,
body#muspanel #tickets .label.label-danger,
body#muspanel .desteksistemi .label-danger {
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3) !important;
}

/* Bilgi - Mavi */
body#muspanel #tickets .label-info,
body#muspanel #tickets .label.label-info,
body#muspanel .desteksistemi .label-info {
    background: linear-gradient(135deg, #17a2b8 0%, #138496 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(23, 162, 184, 0.3) !important;
}

/* Varsayılan - Gri */
body#muspanel #tickets .label-default,
body#muspanel #tickets .label.label-default,
body#muspanel .desteksistemi .label-default {
    background: linear-gradient(135deg, #6c757d 0%, #495057 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(108, 117, 125, 0.3) !important;
}

/* Primary - Ana Renk */
body#muspanel #tickets .label-primary,
body#muspanel #tickets .label.label-primary,
body#muspanel .desteksistemi .label-primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3) !important;
}

/* DataTables Stilleri */
body#muspanel .desteksistemi .dataTables_wrapper {
    background: transparent !important;
}

body#muspanel .desteksistemi .dataTables_length,
body#muspanel .desteksistemi .dataTables_filter,
body#muspanel .desteksistemi .dataTables_info,
body#muspanel .desteksistemi .dataTables_paginate {
    padding: 15px 0 !important;
    color: #333333 !important;
}

body#muspanel .desteksistemi .dataTables_length label,
body#muspanel .desteksistemi .dataTables_filter label {
    color: #333333 !important;
    font-weight: 500 !important;
}

body#muspanel .desteksistemi .dataTables_length select,
body#muspanel .desteksistemi .dataTables_filter input {
    background: #ffffff !important;
    border: 2px solid #e9ecef !important;
    border-radius: 8px !important;
    padding: 8px 12px !important;
    color: #333333 !important;
    font-size: 14px !important;
    transition: all 0.3s ease !important;
}

body#muspanel .desteksistemi .dataTables_length select:focus,
body#muspanel .desteksistemi .dataTables_filter input:focus {
    border-color: #667eea !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2) !important;
}

/* DataTables Pagination */
body#muspanel .desteksistemi .dataTables_paginate .paginate_button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 36px !important;
    height: 36px !important;
    padding: 0 12px !important;
    margin: 2px !important;
    background: #ffffff !important;
    color: #333333 !important;
    border: 1px solid #dddddd !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
}

body#muspanel .desteksistemi .dataTables_paginate .paginate_button:hover {
    background: #667eea !important;
    color: #ffffff !important;
    border-color: #667eea !important;
}

body#muspanel .desteksistemi .dataTables_paginate .paginate_button.current {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: #ffffff !important;
    border-color: transparent !important;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3) !important;
}

body#muspanel .desteksistemi .dataTables_paginate .paginate_button.disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
}

/* Boş Tablo Mesajı */
body#muspanel #tickets tbody .dataTables_empty,
body#muspanel .desteksistemi .dataTables_empty {
    padding: 40px 20px !important;
    color: #6c757d !important;
    font-size: 15px !important;
    text-align: center !important;
    background: #f8f9fa !important;
}

/* Responsive Düzenlemeler */
@media (max-width: 768px) {
    body#muspanel .mpaneltitle {
        flex-direction: column !important;
        text-align: center !important;
        padding: 20px !important;
    }
    
    body#muspanel .mpaneltitle h4 {
        font-size: 18px !important;
    }
    
    body#muspanel .desteksistemi {
        padding: 15px !important;
        border-radius: 12px !important;
    }
    
    body#muspanel #tickets thead tr th {
        padding: 12px 8px !important;
        font-size: 11px !important;
    }
    
    body#muspanel #tickets tbody tr td {
        padding: 12px 8px !important;
        font-size: 13px !important;
    }
}

/* ==============================================
   DESTEK TALEBİ DETAY SAYFASI STİLLERİ
   ============================================== */

/* Ticket Bilgi Kutuları */
body#muspanel .ticketinfos {
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%) !important;
    border-radius: 16px !important;
    padding: 25px !important;
    margin: 20px 0 !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
}

body#muspanel .ticketinfos#ticketfixed {
    border: 2px solid #dc3545 !important;
    background: linear-gradient(135deg, #fff5f5 0%, #ffe0e0 100%) !important;
}

body#muspanel .ticketinfos > div {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 15px !important;
    justify-content: center !important;
}

body#muspanel .destekinfo {
    flex: 1 !important;
    min-width: 180px !important;
    max-width: 250px !important;
}

body#muspanel .destekinfocon {
    background: #ffffff !important;
    border-radius: 12px !important;
    padding: 20px !important;
    text-align: center !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06) !important;
    border: 1px solid #e9ecef !important;
    transition: all 0.3s ease !important;
    height: 100% !important;
}

body#muspanel .destekinfocon:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.15) !important;
    border-color: #667eea !important;
}

body#muspanel .destekinfocon h5 {
    color: #6c757d !important;
    font-size: 12px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin: 0 0 10px 0 !important;
    font-weight: 600 !important;
}

body#muspanel .destekinfocon h5 strong {
    color: #6c757d !important;
}

body#muspanel .destekinfocon h4 {
    color: #333333 !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    margin: 0 !important;
}

body#muspanel .destekinfocon h4 .label {
    display: inline-block !important;
    padding: 6px 16px !important;
    border-radius: 20px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
}

/* Ticket Status Butonları */
body#muspanel .ticketstatusbtn {
    display: flex !important;
    gap: 15px !important;
    justify-content: flex-end !important;
    margin: 20px 0 !important;
    flex-wrap: wrap !important;
}

body#muspanel .ticketstatusbtn .graybtn,
body#muspanel .ticketstatusbtn a.graybtn {
    background: linear-gradient(135deg, #6c757d 0%, #495057 100%) !important;
    color: #ffffff !important;
    padding: 12px 24px !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    border: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
}

body#muspanel .ticketstatusbtn .graybtn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(108, 117, 125, 0.4) !important;
}

body#muspanel .ticketstatusbtn .mavibtn,
body#muspanel .ticketstatusbtn a.mavibtn {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: #ffffff !important;
    padding: 12px 24px !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    border: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4) !important;
}

body#muspanel .ticketstatusbtn .mavibtn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.5) !important;
}

/* Ticket Detay/Cevap Formu */
body#muspanel .ticketdetail {
    background: #ffffff !important;
    border-radius: 16px !important;
    padding: 25px !important;
    margin: 20px 0 !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
}

body#muspanel .destekdetayright {
    width: 100% !important;
}

body#muspanel .destekdetayright textarea,
body#muspanel #destekcvpyaz textarea {
    width: 100% !important;
    min-height: 150px !important;
    background: #f8f9fa !important;
    border: 2px solid #e9ecef !important;
    border-radius: 12px !important;
    padding: 16px !important;
    font-size: 14px !important;
    color: #333333 !important;
    resize: vertical !important;
    transition: all 0.3s ease !important;
}

body#muspanel .destekdetayright textarea:focus,
body#muspanel #destekcvpyaz textarea:focus {
    border-color: #667eea !important;
    outline: none !important;
    box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.15) !important;
    background: #ffffff !important;
}

body#muspanel .destekdetayright textarea::placeholder {
    color: #adb5bd !important;
}

/* Dosya Yükleme Alanı */
body#muspanel .destekdosyaeki {
    background: #f8f9fa !important;
    border: 2px dashed #dee2e6 !important;
    border-radius: 12px !important;
    padding: 20px !important;
    margin: 15px 0 !important;
    transition: all 0.3s ease !important;
}

body#muspanel .destekdosyaeki:hover {
    border-color: #667eea !important;
    background: #f0f4ff !important;
}

body#muspanel .destekdosyaeki label {
    color: #495057 !important;
    font-size: 14px !important;
    cursor: pointer !important;
    display: block !important;
}

body#muspanel .destekdosyaeki input[type="file"] {
    margin: 10px 0 !important;
}

body#muspanel .destekdosyaeki span {
    color: #6c757d !important;
    display: block !important;
    margin-top: 8px !important;
}

/* Şifreleme Checkbox */
body#muspanel #encrypt_message_wrap {
    margin: 15px 0 !important;
}

body#muspanel #encrypt_message_wrap label {
    color: #495057 !important;
    cursor: pointer !important;
}

body#muspanel #encrypt_message_wrap .checktext {
    color: #333333 !important;
}

body#muspanel #encrypt_message_wrap .kinfo {
    color: #6c757d !important;
    font-size: 12px !important;
}

/* Cevap Gönder Butonu */
body#muspanel .ticketdetail .yesilbtn,
body#muspanel #destekcvpyaz .yesilbtn {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%) !important;
    color: #ffffff !important;
    padding: 14px 28px !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    border: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    box-shadow: 0 4px 15px rgba(40, 167, 69, 0.4) !important;
    margin-top: 15px !important;
}

body#muspanel .ticketdetail .yesilbtn:hover,
body#muspanel #destekcvpyaz .yesilbtn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(40, 167, 69, 0.5) !important;
}

/* Otomatik Kaydet Bildirimi */
body#muspanel .autosave {
    text-align: right !important;
    padding: 8px 0 !important;
}

body#muspanel .autosave #auto_saved {
    color: #28a745 !important;
    font-size: 12px !important;
    font-weight: 500 !important;
}

/* Ticket Cevapları/Mesajlar */
body#muspanel .destekdetayleft,
body#muspanel #detailTicketReplies {
    margin-top: 30px !important;
}

body#muspanel .destekdetayleft .reply-item,
body#muspanel #detailTicketReplies > div {
    background: #ffffff !important;
    border-radius: 16px !important;
    padding: 20px !important;
    margin-bottom: 20px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06) !important;
    border: 1px solid #e9ecef !important;
    transition: all 0.3s ease !important;
}

body#muspanel .destekdetayleft .reply-item:hover,
body#muspanel #detailTicketReplies > div:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1) !important;
}

/* Yeni Cevap Animasyonu */
body#muspanel .new-reply {
    animation: newReplyPulse 2s ease-out !important;
}

@keyframes newReplyPulse {
    0% {
        background: #e8f5e9 !important;
        box-shadow: 0 0 0 0 rgba(40, 167, 69, 0.4) !important;
    }
    100% {
        background: #ffffff !important;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06) !important;
    }
}

/* Mesaj Yazarı */
body#muspanel .reply-author,
body#muspanel .destekdetayleft .author-info {
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
    margin-bottom: 15px !important;
    padding-bottom: 15px !important;
    border-bottom: 1px solid #e9ecef !important;
}

body#muspanel .reply-author img,
body#muspanel .destekdetayleft .author-avatar {
    width: 50px !important;
    height: 50px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    border: 3px solid #667eea !important;
}

body#muspanel .reply-author .author-name,
body#muspanel .destekdetayleft .author-name {
    color: #333333 !important;
    font-weight: 600 !important;
    font-size: 15px !important;
}

body#muspanel .reply-author .reply-date,
body#muspanel .destekdetayleft .reply-date {
    color: #6c757d !important;
    font-size: 12px !important;
}

/* Mesaj İçeriği */
body#muspanel .reply-content,
body#muspanel .destekdetayleft .message-content {
    color: #333333 !important;
    font-size: 14px !important;
    line-height: 1.7 !important;
}

body#muspanel .reply-content p,
body#muspanel .destekdetayleft .message-content p {
    margin: 0 0 12px 0 !important;
    color: #333333 !important;
}

/* Ek Dosyalar */
body#muspanel .reply-attachments,
body#muspanel .destekdetayleft .attachments {
    margin-top: 15px !important;
    padding-top: 15px !important;
    border-top: 1px solid #e9ecef !important;
}

body#muspanel .reply-attachments a,
body#muspanel .destekdetayleft .attachments a {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
    color: #495057 !important;
    padding: 8px 16px !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    font-size: 13px !important;
    margin: 5px 5px 5px 0 !important;
    transition: all 0.3s ease !important;
}

body#muspanel .reply-attachments a:hover,
body#muspanel .destekdetayleft .attachments a:hover {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: #ffffff !important;
}

/* Çözüldü Mesajı */
body#muspanel #Solved_success {
    background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%) !important;
    border-radius: 16px !important;
    padding: 40px !important;
}

body#muspanel #Solved_success i {
    color: #28a745 !important;
}

body#muspanel #Solved_success h4 {
    color: #2e7d32 !important;
    font-weight: 600 !important;
}

/* Loading Spinner */
body#muspanel .lds-ring {
    display: inline-block !important;
    position: relative !important;
    width: 64px !important;
    height: 64px !important;
}

body#muspanel .lds-ring div {
    box-sizing: border-box !important;
    display: block !important;
    position: absolute !important;
    width: 51px !important;
    height: 51px !important;
    margin: 6px !important;
    border: 4px solid #667eea !important;
    border-radius: 50% !important;
    animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite !important;
    border-color: #667eea transparent transparent transparent !important;
}

@keyframes lds-ring {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Breadcrumb */
body#muspanel .sayfayolu {
    margin-bottom: 10px !important;
}

body#muspanel .sayfayolu a {
    color: rgba(255, 255, 255, 0.8) !important;
    text-decoration: none !important;
    font-size: 13px !important;
}

body#muspanel .sayfayolu a:hover {
    color: #ffffff !important;
}

body#muspanel .sayfayolu span {
    color: rgba(255, 255, 255, 0.6) !important;
}

/* Responsive */
@media (max-width: 768px) {
    body#muspanel .ticketinfos > div {
        flex-direction: column !important;
    }
    
    body#muspanel .destekinfo {
        max-width: 100% !important;
    }
    
    body#muspanel .ticketstatusbtn {
        flex-direction: column !important;
    }
    
    body#muspanel .ticketstatusbtn .graybtn,
    body#muspanel .ticketstatusbtn .mavibtn {
        width: 100% !important;
        justify-content: center !important;
    }
}

/* ==============================================
   YENİ DESTEK TALEBİ OLUŞTURMA SAYFASI
   ============================================== */

/* Destek Talebi Sayfası Başlık - Taşmayı Engelle */
body#muspanel .destektalebiolustur ~ .mpaneltitle,
body#muspanel .mpanelrightcon > .mpaneltitle {
    max-width: 100% !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    word-wrap: break-word !important;
}

body#muspanel .mpanelrightcon > .mpaneltitle {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    border-radius: 16px !important;
    padding: 20px 25px !important;
    margin-bottom: 0 !important;
    gap: 10px !important;
    max-width: 100% !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

body#muspanel .mpanelrightcon > .mpaneltitle .sayfayolu {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-size: 13px !important;
}

body#muspanel .mpanelrightcon > .mpaneltitle .sayfayolu a {
    color: rgba(255, 255, 255, 0.8) !important;
    text-decoration: none !important;
}

body#muspanel .mpanelrightcon > .mpaneltitle .sayfayolu a:hover {
    color: #ffffff !important;
}

body#muspanel .mpanelrightcon > .mpaneltitle h4 {
    color: #ffffff !important;
    margin: 0 !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    word-wrap: break-word !important;
    max-width: 100% !important;
}

body#muspanel .mpanelrightcon > .mpaneltitle h4 strong {
    color: #ffffff !important;
}

body#muspanel .mpanelrightcon > .mpaneltitle h4 i {
    color: rgba(255, 255, 255, 0.9) !important;
    margin-right: 10px !important;
}

/* Ana Container - Taşmayı Engelle */
body#muspanel .destektalebiolustur {
    background: #ffffff !important;
    border-radius: 16px !important;
    padding: 30px !important;
    margin-top: 20px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
    overflow: hidden !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

body#muspanel .destektalebiolustur form {
    max-width: 100% !important;
    overflow: hidden !important;
}

/* Form Alanları Container - 2 Sütun Grid */
body#muspanel .destektalebiolustur .ticketinfos {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 20px !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 0 25px 0 !important;
    margin: 0 !important;
    border-bottom: 1px solid #e9ecef !important;
    max-width: 100% !important;
    overflow: hidden !important;
}

/* Input ve Select Alanları - Taşmayı Engelle */
body#muspanel .destektalebiolustur .ticketinfos input[type="text"],
body#muspanel .destektalebiolustur .ticketinfos select {
    width: 100% !important;
    max-width: 100% !important;
    background: #f8f9fa !important;
    border: 2px solid #e9ecef !important;
    border-radius: 10px !important;
    padding: 14px 16px !important;
    font-size: 14px !important;
    color: #333333 !important;
    transition: all 0.3s ease !important;
    box-sizing: border-box !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
}

body#muspanel .destektalebiolustur .ticketinfos input[type="text"]:focus,
body#muspanel .destektalebiolustur .ticketinfos select:focus {
    border-color: #667eea !important;
    outline: none !important;
    box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.15) !important;
    background: #ffffff !important;
}

body#muspanel .destektalebiolustur input[type="text"]::placeholder {
    color: #adb5bd !important;
}

/* Select2 Container - Taşmayı Engelle */
body#muspanel .destektalebiolustur .select2-container {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

body#muspanel .destektalebiolustur .select2-container--default .select2-selection--single {
    background: #f8f9fa !important;
    border: 2px solid #e9ecef !important;
    border-radius: 10px !important;
    height: 50px !important;
    padding: 10px 14px !important;
    box-sizing: border-box !important;
}

body#muspanel .destektalebiolustur .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #333333 !important;
    line-height: 28px !important;
    padding: 0 !important;
}

body#muspanel .destektalebiolustur .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100% !important;
    right: 12px !important;
    top: 0 !important;
}

/* Ticket Detay (Mesaj) Alanı */
body#muspanel .destektalebiolustur .ticketdetail {
    background: transparent !important;
    box-shadow: none !important;
    padding: 25px 0 0 0 !important;
    margin: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
}

body#muspanel .destektalebiolustur .ticketdetail textarea {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 200px !important;
    background: #f8f9fa !important;
    border: 2px solid #e9ecef !important;
    border-radius: 12px !important;
    padding: 18px !important;
    font-size: 14px !important;
    color: #333333 !important;
    resize: vertical !important;
    transition: all 0.3s ease !important;
    box-sizing: border-box !important;
}

body#muspanel .destektalebiolustur .ticketdetail textarea:focus {
    border-color: #667eea !important;
    outline: none !important;
    box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.15) !important;
    background: #ffffff !important;
}

body#muspanel .destektalebiolustur .ticketdetail textarea::placeholder {
    color: #adb5bd !important;
}

/* Custom Fields Alanı */
body#muspanel #ticketCustomFields {
    margin-top: 25px !important;
    max-width: 100% !important;
    overflow: hidden !important;
}

body#muspanel .ticketCustomFields-con {
    background: #f8f9fa !important;
    border-radius: 12px !important;
    padding: 20px !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

body#muspanel .ticketCustomFields-con .blue-info {
    background: linear-gradient(135deg, #e8f4fd 0%, #d6eaff 100%) !important;
    border: 1px solid #b8daff !important;
    border-radius: 10px !important;
    margin-bottom: 20px !important;
}

body#muspanel .ticketCustomFields-con .blue-info .padding20 {
    padding: 20px !important;
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
}

body#muspanel .ticketCustomFields-con .blue-info i {
    font-size: 24px !important;
    color: #0056b3 !important;
}

body#muspanel .ticketCustomFields-con .blue-info p {
    color: #004085 !important;
    margin: 0 !important;
    font-size: 14px !important;
}

body#muspanel .department-fields {
    margin-bottom: 15px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    align-items: flex-start !important;
}

body#muspanel .department-fields .yuzde30 {
    flex: 0 0 100% !important;
    margin-bottom: 5px !important;
}

body#muspanel .department-fields .yuzde70 {
    flex: 0 0 100% !important;
}

body#muspanel .department-fields .yuzde70 input,
body#muspanel .department-fields .yuzde70 select,
body#muspanel .department-fields .yuzde70 textarea {
    width: 100% !important;
    max-width: 100% !important;
    background: #ffffff !important;
    border: 2px solid #e9ecef !important;
    border-radius: 8px !important;
    padding: 12px !important;
    font-size: 14px !important;
    color: #333333 !important;
    box-sizing: border-box !important;
}

body#muspanel .department-fields label {
    color: #333333 !important;
    font-weight: 500 !important;
    font-size: 14px !important;
}

body#muspanel .department-fields .zorunlu {
    color: #dc3545 !important;
    margin-right: 5px !important;
}

/* Dosya Yükleme */
body#muspanel .destektalebiolustur .destekdosyaeki {
    background: #f8f9fa !important;
    border: 2px dashed #dee2e6 !important;
    border-radius: 12px !important;
    padding: 25px !important;
    margin: 20px 0 !important;
    text-align: center !important;
    transition: all 0.3s ease !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

body#muspanel .destektalebiolustur .destekdosyaeki label {
    color: #495057 !important;
    font-size: 14px !important;
    display: block !important;
    word-wrap: break-word !important;
}

body#muspanel .destektalebiolustur .destekdosyaeki input[type="file"] {
    max-width: 100% !important;
    margin: 10px 0 !important;
}

body#muspanel .destektalebiolustur .destekdosyaeki span {
    color: #6c757d !important;
    display: block !important;
    margin-top: 8px !important;
    word-wrap: break-word !important;
}

body#muspanel .destektalebiolustur .destekdosyaeki:hover {
    border-color: #667eea !important;
    background: #f0f4ff !important;
}

/* Şifreleme ve Gönder Butonu Alanı */
body#muspanel .destektalebiolustur .ticketsendbtn {
    float: none !important;
    text-align: right !important;
    margin-top: 20px !important;
    padding-top: 20px !important;
    border-top: 1px solid #e9ecef !important;
}

body#muspanel #encrypt_message_wrap {
    margin-bottom: 20px !important;
    text-align: left !important;
    background: #f8f9fa !important;
    padding: 15px 20px !important;
    border-radius: 10px !important;
}

body#muspanel #encrypt_message_wrap label {
    color: #495057 !important;
    cursor: pointer !important;
}

body#muspanel #encrypt_message_wrap .checktext {
    color: #333333 !important;
}

body#muspanel #encrypt_message_wrap .kinfo {
    color: #6c757d !important;
    font-size: 12px !important;
}

/* Gönder Butonu */
body#muspanel .destektalebiolustur .ticketsendbtn .yesilbtn,
body#muspanel .destektalebiolustur .ticketsendbtn .gonderbtn,
body#muspanel .destektalebiolustur #SubmitTicketBtn {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: #ffffff !important;
    padding: 16px 40px !important;
    border-radius: 12px !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    border: none !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4) !important;
    width: auto !important;
    min-width: 200px !important;
}

body#muspanel .destektalebiolustur .ticketsendbtn .yesilbtn:hover,
body#muspanel .destektalebiolustur .ticketsendbtn .gonderbtn:hover,
body#muspanel .destektalebiolustur #SubmitTicketBtn:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 10px 30px rgba(102, 126, 234, 0.5) !important;
}

/* Bilgi Bankası Önerileri */
body#muspanel #FoundKnowloedgebase {
    margin-top: 25px !important;
    max-width: 100% !important;
    overflow: hidden !important;
}

body#muspanel .bilgibankasi {
    background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%) !important;
    border-radius: 12px !important;
    padding: 25px !important;
    text-align: center !important;
}

body#muspanel .bilgibankasi h5 {
    color: #2e7d32 !important;
    margin-bottom: 20px !important;
}

body#muspanel .bilgibankasi #list {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    justify-content: center !important;
}

body#muspanel .bilgibankasi #list a.btn {
    background: #ffffff !important;
    color: #2e7d32 !important;
    padding: 10px 20px !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    font-size: 14px !important;
    transition: all 0.3s ease !important;
    border: 1px solid #a5d6a7 !important;
}

body#muspanel .bilgibankasi #list a.btn:hover {
    background: #2e7d32 !important;
    color: #ffffff !important;
}

/* Başarılı Mesaj */
body#muspanel #CreateRequestForm_success {
    background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%) !important;
    border-radius: 16px !important;
    padding: 40px !important;
    text-align: center !important;
}

body#muspanel #CreateRequestForm_success i {
    color: #28a745 !important;
}

body#muspanel #CreateRequestForm_success h5 {
    color: #2e7d32 !important;
    font-weight: 600 !important;
    font-size: 18px !important;
}

/* Responsive */
@media (max-width: 992px) {
    body#muspanel .destektalebiolustur .ticketinfos {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 768px) {
    body#muspanel .destektalebiolustur {
        padding: 20px !important;
    }
    
    body#muspanel .destektalebiolustur .ticketinfos {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }
    
    body#muspanel .destektalebiolustur .ticketsendbtn {
        text-align: center !important;
    }
    
    body#muspanel .destektalebiolustur .ticketsendbtn .yesilbtn,
    body#muspanel .destektalebiolustur #SubmitTicketBtn {
        width: 100% !important;
    }
}

/* ==============================================
   SELECT2 DROPDOWN STİLLERİ (GLOBAL)
   ============================================== */

/* Select2 Dropdown Container - Açılan Liste */
.select2-container--default .select2-dropdown {
    background: #ffffff !important;
    border: 2px solid #e9ecef !important;
    border-radius: 10px !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15) !important;
    z-index: 99999 !important;
}

/* Arama Kutusu */
.select2-container--default .select2-search--dropdown {
    padding: 10px !important;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    background: #f8f9fa !important;
    border: 2px solid #e9ecef !important;
    border-radius: 8px !important;
    padding: 10px 14px !important;
    font-size: 14px !important;
    color: #333333 !important;
}

.select2-container--default .select2-search--dropdown .select2-search__field:focus {
    border-color: #667eea !important;
    outline: none !important;
}

/* Sonuçlar Listesi */
.select2-container--default .select2-results {
    background: #ffffff !important;
}

.select2-container--default .select2-results__options {
    max-height: 300px !important;
    overflow-y: auto !important;
}

/* Grup Başlığı (optgroup) */
.select2-container--default .select2-results__group {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    padding: 10px 14px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

/* Liste Öğeleri */
.select2-container--default .select2-results__option {
    background: #ffffff !important;
    color: #333333 !important;
    padding: 12px 16px !important;
    font-size: 14px !important;
    transition: all 0.2s ease !important;
    border-bottom: 1px solid #f1f3f4 !important;
}

/* Grup İçindeki Öğeler */
.select2-container--default .select2-results__option--group {
    padding-left: 0 !important;
}

.select2-container--default .select2-results__options--nested .select2-results__option {
    padding-left: 24px !important;
    background: #ffffff !important;
    color: #333333 !important;
}

/* Hover Durumu */
.select2-container--default .select2-results__option--highlighted,
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option:hover {
    background: linear-gradient(135deg, #e8f0fe 0%, #f0e6ff 100%) !important;
    color: #333333 !important;
}

/* Seçili Durum */
.select2-container--default .select2-results__option--selected,
.select2-container--default .select2-results__option[aria-selected=true] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: #ffffff !important;
}

/* Boş/Yok Seçeneği */
.select2-container--default .select2-results__option[aria-disabled=true] {
    color: #adb5bd !important;
    background: #f8f9fa !important;
}

/* Seçilen Değer Görünümü */
.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #333333 !important;
    font-size: 14px !important;
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: #adb5bd !important;
}

/* Select2 Focus Durumu */
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: #667eea !important;
    box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.15) !important;
}

/* Select2 Ok İkonu */
.select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: #6c757d transparent transparent transparent !important;
}

/* Çoklu Seçim */
.select2-container--default .select2-selection--multiple {
    background: #f8f9fa !important;
    border: 2px solid #e9ecef !important;
    border-radius: 10px !important;
    min-height: 50px !important;
    padding: 8px !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 6px 12px !important;
    margin: 3px !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: rgba(255, 255, 255, 0.8) !important;
    margin-right: 6px !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
    color: #ffffff !important;
}

/* ==============================================
   HİZMETLER / DOMAIN / WHOIS FİLTRE VE TABLOLAR
   ============================================== */

/* Whois Profilleri ve Nameserver Butonları */
body#muspanel .mpanelrightcon > a.lbtn,
body#muspanel .mpanelrightcon > a.green,
body#muspanel .mpanelrightcon > a.blue {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: #ffffff !important;
    padding: 12px 20px !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    margin: 15px 10px 15px 0 !important;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3) !important;
}

body#muspanel .mpanelrightcon > a.green {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%) !important;
    box-shadow: 0 4px 15px rgba(40, 167, 69, 0.3) !important;
}

body#muspanel .mpanelrightcon > a.blue {
    background: linear-gradient(135deg, #17a2b8 0%, #138496 100%) !important;
    box-shadow: 0 4px 15px rgba(23, 162, 184, 0.3) !important;
}

body#muspanel .mpanelrightcon > a.lbtn:hover,
body#muspanel .mpanelrightcon > a.green:hover,
body#muspanel .mpanelrightcon > a.blue:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4) !important;
}

/* Domain Filtre Butonları (Tümü, Aktif, Son 30 Gün, vb.) */
body#muspanel .ac-domainlist-status {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    margin: 20px 0 !important;
    padding: 20px !important;
    background: #ffffff !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06) !important;
}

body#muspanel .ac-domainlist-status a {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: #f8f9fa !important;
    color: #495057 !important;
    padding: 10px 18px !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    border: 2px solid #e9ecef !important;
}

body#muspanel .ac-domainlist-status a:hover {
    background: #e8f0fe !important;
    border-color: #667eea !important;
    color: #667eea !important;
}

body#muspanel .ac-domainlist-status a.active {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: #ffffff !important;
    border-color: transparent !important;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3) !important;
}

body#muspanel .ac-domainlist-status a strong {
    color: inherit !important;
}

/* Ürün/Hizmet Tabloları (products, table1, vb.) */
body#muspanel #products,
body#muspanel #table1,
body#muspanel .mpanelrightcon table.table {
    width: 100% !important;
    background: #ffffff !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06) !important;
    margin-top: 20px !important;
}

body#muspanel #products thead,
body#muspanel #table1 thead,
body#muspanel .mpanelrightcon table.table thead {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
}

body#muspanel #products thead tr th,
body#muspanel #table1 thead tr th,
body#muspanel .mpanelrightcon table.table thead tr th {
    background: transparent !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding: 14px 12px !important;
    border: none !important;
}

body#muspanel #products tbody tr,
body#muspanel #table1 tbody tr,
body#muspanel .mpanelrightcon table.table tbody tr {
    background: #ffffff !important;
    transition: all 0.3s ease !important;
}

body#muspanel #products tbody tr:nth-child(even),
body#muspanel #table1 tbody tr:nth-child(even),
body#muspanel .mpanelrightcon table.table tbody tr:nth-child(even) {
    background: #f8f9fa !important;
}

body#muspanel #products tbody tr:hover,
body#muspanel #table1 tbody tr:hover,
body#muspanel .mpanelrightcon table.table tbody tr:hover {
    background: #e8f0fe !important;
}

body#muspanel #products tbody tr td,
body#muspanel #table1 tbody tr td,
body#muspanel .mpanelrightcon table.table tbody tr td {
    padding: 14px 12px !important;
    color: #333333 !important;
    font-size: 13px !important;
    border-bottom: 1px solid #e9ecef !important;
    vertical-align: middle !important;
}

body#muspanel #products tbody tr td strong,
body#muspanel #table1 tbody tr td strong,
body#muspanel .mpanelrightcon table.table tbody tr td strong {
    color: #333333 !important;
}

body#muspanel #products tbody tr td a,
body#muspanel #table1 tbody tr td a,
body#muspanel .mpanelrightcon table.table tbody tr td a {
    color: #667eea !important;
    text-decoration: none !important;
}

body#muspanel #products tbody tr td a:hover,
body#muspanel #table1 tbody tr td a:hover,
body#muspanel .mpanelrightcon table.table tbody tr td a:hover {
    color: #764ba2 !important;
    text-decoration: underline !important;
}

/* DataTables Kontrolleri */
body#muspanel .mpanelrightcon .dataTables_wrapper {
    background: transparent !important;
}

body#muspanel .mpanelrightcon .dataTables_length,
body#muspanel .mpanelrightcon .dataTables_filter {
    padding: 15px 0 !important;
    color: #333333 !important;
}

body#muspanel .mpanelrightcon .dataTables_length label,
body#muspanel .mpanelrightcon .dataTables_filter label {
    color: #333333 !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

body#muspanel .mpanelrightcon .dataTables_length select,
body#muspanel .mpanelrightcon .dataTables_filter input {
    background: #ffffff !important;
    border: 2px solid #e9ecef !important;
    border-radius: 8px !important;
    padding: 8px 14px !important;
    color: #333333 !important;
    font-size: 14px !important;
    transition: all 0.3s ease !important;
}

body#muspanel .mpanelrightcon .dataTables_length select:focus,
body#muspanel .mpanelrightcon .dataTables_filter input:focus {
    border-color: #667eea !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2) !important;
}

body#muspanel .mpanelrightcon .dataTables_info {
    color: #6c757d !important;
    font-size: 13px !important;
    padding: 15px 0 !important;
}

/* DataTables Pagination */
body#muspanel .mpanelrightcon .dataTables_paginate {
    padding: 15px 0 !important;
}

body#muspanel .mpanelrightcon .dataTables_paginate .paginate_button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 36px !important;
    height: 36px !important;
    padding: 0 12px !important;
    margin: 2px !important;
    background: #ffffff !important;
    color: #333333 !important;
    border: 1px solid #dddddd !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
}

body#muspanel .mpanelrightcon .dataTables_paginate .paginate_button:hover {
    background: #667eea !important;
    color: #ffffff !important;
    border-color: #667eea !important;
}

body#muspanel .mpanelrightcon .dataTables_paginate .paginate_button.current {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: #ffffff !important;
    border-color: transparent !important;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3) !important;
}

body#muspanel .mpanelrightcon .dataTables_paginate .paginate_button.disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
}

/* Boş Tablo/Liste Mesajı */
body#muspanel #orders-none,
body#muspanel .mpanelrightcon .dataTables_empty {
    padding: 40px 20px !important;
    color: #6c757d !important;
    font-size: 15px !important;
    text-align: center !important;
    background: #f8f9fa !important;
    border-radius: 12px !important;
    margin: 20px 0 !important;
}

/* İncele/Yönet Butonu */
body#muspanel .incelebtn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: #ffffff !important;
    padding: 8px 16px !important;
    border-radius: 8px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 3px 10px rgba(102, 126, 234, 0.3) !important;
}

body#muspanel .incelebtn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4) !important;
    color: #ffffff !important;
    text-decoration: none !important;
}

/* Silme Butonu */
body#muspanel .delete,
body#muspanel a.delete {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%) !important;
    color: #ffffff !important;
    padding: 8px 16px !important;
    border-radius: 8px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
    box-shadow: 0 3px 10px rgba(220, 53, 69, 0.3) !important;
}

body#muspanel .delete:hover,
body#muspanel a.delete:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 5px 15px rgba(220, 53, 69, 0.4) !important;
    color: #ffffff !important;
}

/* Responsive */
@media (max-width: 768px) {
    body#muspanel .ac-domainlist-status {
        padding: 15px !important;
    }
    
    body#muspanel .ac-domainlist-status a {
        padding: 8px 12px !important;
        font-size: 12px !important;
    }
    
    body#muspanel .mpanelrightcon > a.lbtn,
    body#muspanel .mpanelrightcon > a.green,
    body#muspanel .mpanelrightcon > a.blue {
        width: 100% !important;
        justify-content: center !important;
        margin: 5px 0 !important;
    }
}

/* ==============================================
   WHOIS PROFİLİ OLUŞTUR / DÜZENLE SAYFASI
   ============================================== */

/* Ana Container */
body#muspanel .ModifyWhois,
body#muspanel .tabcontentcon.ModifyWhois {
    background: #ffffff !important;
    border-radius: 16px !important;
    padding: 30px !important;
    margin-top: 20px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
    overflow: hidden !important;
}

body#muspanel .ModifyWhois form {
    max-width: 100% !important;
}

/* Form Satırı */
body#muspanel .ModifyWhois .formcon {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 15px !important;
    align-items: center !important;
    margin-bottom: 20px !important;
    padding-bottom: 20px !important;
    border-bottom: 1px solid #e9ecef !important;
}

body#muspanel .ModifyWhois .formcon .yuzde30 {
    flex: 0 0 200px !important;
    color: #333333 !important;
    font-weight: 600 !important;
    font-size: 14px !important;
}

body#muspanel .ModifyWhois .formcon .yuzde70 {
    flex: 1 !important;
    min-width: 250px !important;
}

body#muspanel .ModifyWhois .formcon .yuzde70 input[type="text"] {
    width: 100% !important;
    background: #f8f9fa !important;
    border: 2px solid #e9ecef !important;
    border-radius: 10px !important;
    padding: 14px 16px !important;
    font-size: 14px !important;
    color: #333333 !important;
    transition: all 0.3s ease !important;
    box-sizing: border-box !important;
}

body#muspanel .ModifyWhois .formcon .yuzde70 input[type="text"]:focus {
    border-color: #667eea !important;
    outline: none !important;
    box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.15) !important;
    background: #ffffff !important;
}

/* Yan Yana Input Alanları (yuzde33) */
body#muspanel .ModifyWhois input.yuzde33 {
    width: calc(33.333% - 14px) !important;
    display: inline-block !important;
    background: #f8f9fa !important;
    border: 2px solid #e9ecef !important;
    border-radius: 10px !important;
    padding: 14px 16px !important;
    font-size: 14px !important;
    color: #333333 !important;
    margin: 8px 7px 8px 0 !important;
    transition: all 0.3s ease !important;
    box-sizing: border-box !important;
    vertical-align: top !important;
}

body#muspanel .ModifyWhois input.yuzde33:focus {
    border-color: #667eea !important;
    outline: none !important;
    box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.15) !important;
    background: #ffffff !important;
}

body#muspanel .ModifyWhois input.yuzde33::placeholder {
    color: #adb5bd !important;
}

/* Ayırıcı Çizgi */
body#muspanel .ModifyWhois .line {
    display: block !important;
    width: 100% !important;
    height: 1px !important;
    background: #e9ecef !important;
    margin: 20px 0 !important;
    clear: both !important;
}

/* Checkbox */
body#muspanel .ModifyWhois .checkbox-custom-label {
    color: #333333 !important;
    font-size: 14px !important;
    cursor: pointer !important;
}

/* Gönder Butonu Alanı */
body#muspanel .ModifyWhois .guncellebtn {
    float: right !important;
    margin-top: 20px !important;
}

body#muspanel .ModifyWhois .yesilbtn,
body#muspanel .ModifyWhois .gonderbtn {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: #ffffff !important;
    padding: 14px 30px !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    border: none !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4) !important;
}

body#muspanel .ModifyWhois .yesilbtn:hover,
body#muspanel .ModifyWhois .gonderbtn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.5) !important;
}

/* Responsive */
@media (max-width: 992px) {
    body#muspanel .ModifyWhois input.yuzde33 {
        width: calc(50% - 10px) !important;
        margin: 8px 5px !important;
    }
}

@media (max-width: 768px) {
    body#muspanel .ModifyWhois {
        padding: 20px !important;
    }
    
    body#muspanel .ModifyWhois input.yuzde33 {
        width: 100% !important;
        margin: 8px 0 !important;
    }
    
    body#muspanel .ModifyWhois .formcon .yuzde30 {
        flex: 0 0 100% !important;
    }
    
    body#muspanel .ModifyWhois .guncellebtn {
        float: none !important;
        width: 100% !important;
        text-align: center !important;
    }
    
    body#muspanel .ModifyWhois .yesilbtn,
    body#muspanel .ModifyWhois .gonderbtn {
        width: 100% !important;
    }
}

/* ==============================================
   FATURA DETAY SAYFASI STİLLERİ - YENİ TASARIM
   ============================================== */

/* Yeni tasarım inline CSS kullanıyor, bu bölüm sadece eski yapıları gizlemek için */
body#muspanel .invoicedesc,
body#muspanel .invoice-detail-left,
body#muspanel .invoice-detail-right,
body#muspanel .invoicestatus,
body#muspanel .invoiceidx,
body#muspanel .custbillinfo,
body#muspanel .companybillinfo,
body#muspanel .otherincoivebtns,
body#muspanel .invoicetimes {
    /* Eski yapıları gizle - yeni inline CSS kullanılıyor */
}

/* Ödeme Bölümü Stilleri */
body#muspanel #accordion {
    margin-top: 30px !important;
}

body#muspanel #accordion .ui-accordion-header {
    background: #333 !important;
    color: #fff !important;
    border: none !important;
    border-radius: 12px 12px 0 0 !important;
    padding: 16px 20px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
}

body#muspanel #accordion .ui-accordion-content {
    background: #f8f9fa !important;
    border: 1px solid #e0e0e0 !important;
    border-top: none !important;
    border-radius: 0 0 12px 12px !important;
    padding: 25px !important;
}

body#muspanel #payment_methods {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}

body#muspanel #payment_methods .checkbox-custom-label {
    display: flex !important;
    align-items: center !important;
    padding: 15px !important;
    background: #fff !important;
    border: 2px solid #e0e0e0 !important;
    border-radius: 10px !important;
    cursor: pointer !important;
    transition: all 0.3s !important;
}

body#muspanel #payment_methods .checkbox-custom-label:hover {
    border-color: #ff5722 !important;
}

body#muspanel #payment_methods .checkbox-custom:checked + .checkbox-custom-label {
    border-color: #ff5722 !important;
    background: #fff5f2 !important;
}

body#muspanel #continue_button,
body#muspanel .yesilbtn.gonderbtn {
    display: block !important;
    width: 100% !important;
    background: linear-gradient(135deg, #4caf50 0%, #388e3c 100%) !important;
    color: #fff !important;
    padding: 16px !important;
    border: none !important;
    border-radius: 10px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    text-align: center !important;
    text-decoration: none !important;
    margin-top: 20px !important;
    transition: all 0.3s !important;
}

body#muspanel #continue_button:hover,
body#muspanel .yesilbtn.gonderbtn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(76, 175, 80, 0.4) !important;
}

/* Geri Dön Linki */
body#muspanel .lbtn {
    display: inline-block !important;
    padding: 12px 24px !important;
    background: #f0f0f0 !important;
    color: #333 !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    margin-top: 15px !important;
}

body#muspanel .lbtn:hover {
    background: #e0e0e0 !important;
}

/* Fatura Durumu Rozetleri - Eski Yapı İçin Uyumluluk */
body#muspanel .invpaid {
    display: inline-block !important;
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%) !important;
    color: #ffffff !important;
    padding: 12px 30px !important;
    border-radius: 25px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    box-shadow: 0 6px 20px rgba(40, 167, 69, 0.4) !important;
}

/* Ödenmedi / İptal / İade */
body#muspanel .invnopay {
    display: inline-block !important;
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%) !important;
    color: #ffffff !important;
    padding: 12px 30px !important;
    border-radius: 25px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    box-shadow: 0 6px 20px rgba(220, 53, 69, 0.4) !important;
}

/* Beklemede */
body#muspanel .invwait {
    display: inline-block !important;
    background: linear-gradient(135deg, #f7971e 0%, #ffd200 100%) !important;
    color: #333333 !important;
    padding: 12px 30px !important;
    border-radius: 25px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    box-shadow: 0 6px 20px rgba(247, 151, 30, 0.4) !important;
}

body#muspanel .invoicepaymethod {
    display: block !important;
    color: #6c757d !important;
    font-size: 14px !important;
    margin-top: 10px !important;
}

/* Fatura Kalemleri Tablosu */
body#muspanel .invoicedesc {
    background: #ffffff !important;
    border: 2px solid #e9ecef !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    margin: 30px 0 !important;
    width: 100% !important;
}

body#muspanel .invoicedesc .formcon {
    display: table !important;
    width: 100% !important;
    table-layout: fixed !important;
    background: #ffffff !important;
    border-bottom: 1px solid #e9ecef !important;
    padding: 0 !important;
    margin: 0 !important;
}

body#muspanel .invoicedesc .formcon:first-child {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
}

body#muspanel .invoicedesc .formcon:first-child .yuzde70,
body#muspanel .invoicedesc .formcon:first-child .yuzde30 {
    color: #ffffff !important;
}

body#muspanel .invoicedesc .formcon:first-child strong {
    color: #ffffff !important;
}

body#muspanel .invoicedesc .formcon .yuzde70,
body#muspanel .invoicedesc .formcon .yuzde30 {
    display: table-cell !important;
    padding: 16px 20px !important;
    color: #333333 !important;
    font-size: 14px !important;
    vertical-align: middle !important;
    box-sizing: border-box !important;
}

body#muspanel .invoicedesc .formcon .yuzde70 {
    width: 70% !important;
    border-right: 1px solid #e9ecef !important;
}

body#muspanel .invoicedesc .formcon .yuzde30 {
    width: 30% !important;
    text-align: right !important;
}

body#muspanel .invoicedesc .formcon .yuzde70 span,
body#muspanel .invoicedesc .formcon .yuzde30 span {
    color: #333333 !important;
    display: block !important;
}

body#muspanel .invoicedesc .formcon strong {
    color: #333333 !important;
}

body#muspanel .invoicedesc .formcon:nth-child(even) {
    background: #f8f9fa !important;
}

/* Toplam Satırı */
body#muspanel #total_wrap {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
}

body#muspanel #total_wrap .yuzde70,
body#muspanel #total_wrap .yuzde30 {
    color: #ffffff !important;
}

body#muspanel #total_wrap span,
body#muspanel #total_wrap strong {
    color: #ffffff !important;
}

/* Fatura Ödendi Mesajı */
body#muspanel .faturaodenmis {
    background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%) !important;
    border-radius: 16px !important;
    padding: 30px !important;
    text-align: center !important;
    margin-top: 20px !important;
}

body#muspanel .faturaodenmis h4 {
    color: #2e7d32 !important;
    font-size: 20px !important;
    margin: 0 !important;
}

body#muspanel .faturaodenmis h4 strong {
    color: #2e7d32 !important;
}

body#muspanel .faturaodenmis h5 {
    color: #388e3c !important;
    font-size: 14px !important;
    margin: 10px 0 0 0 !important;
}

/* Fatura İndir Butonu */
body#muspanel .faturaodenmis .yesilbtn,
body#muspanel .faturaodenmis .gonderbtn {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%) !important;
    color: #ffffff !important;
    padding: 12px 24px !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    box-shadow: 0 4px 15px rgba(40, 167, 69, 0.4) !important;
    transition: all 0.3s ease !important;
}

body#muspanel .faturaodenmis .yesilbtn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(40, 167, 69, 0.5) !important;
}

body#muspanel .faturaodenmis .graybtn {
    background: #6c757d !important;
    color: #ffffff !important;
    padding: 12px 24px !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    opacity: 0.6 !important;
}

/* Ödeme Yöntemi Seçimi */
body#muspanel #accordion {
    margin-top: 30px !important;
}

body#muspanel #accordion .ui-accordion-header {
    background: #ffffff !important;
    border: 2px solid #e9ecef !important;
    border-radius: 10px !important;
    padding: 16px 20px !important;
    margin: 10px 0 !important;
    color: #333333 !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

body#muspanel #accordion .ui-accordion-header:hover {
    border-color: #667eea !important;
    background: #f8f9fa !important;
}

body#muspanel #accordion .ui-accordion-header-active {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: #ffffff !important;
    border-color: transparent !important;
}

body#muspanel #accordion .ui-accordion-content {
    background: #f8f9fa !important;
    border: 2px solid #e9ecef !important;
    border-top: none !important;
    border-radius: 0 0 10px 10px !important;
    padding: 20px !important;
    color: #333333 !important;
}

/* Ödeme Butonu */
body#muspanel #continue_button {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%) !important;
    color: #ffffff !important;
    padding: 16px 40px !important;
    border-radius: 12px !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    box-shadow: 0 6px 20px rgba(40, 167, 69, 0.4) !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
    border: none !important;
    margin-top: 20px !important;
}

body#muspanel #continue_button:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 10px 30px rgba(40, 167, 69, 0.5) !important;
}

/* Bilgi Kutuları */
body#muspanel .gray-info {
    background: #f8f9fa !important;
    border: 1px solid #e9ecef !important;
    border-radius: 8px !important;
    color: #6c757d !important;
}

body#muspanel .gray-info .padding10 {
    padding: 10px 15px !important;
}

/* Responsive */
@media (max-width: 768px) {
    body#muspanel .invoicex .padding {
        padding: 20px !important;
    }
    
    body#muspanel #exportData {
        flex-direction: column !important;
    }
    
    body#muspanel .invoice-detail-left {
        order: 2 !important;
        margin-top: 20px !important;
    }
    
    body#muspanel .invoice-detail-right {
        order: 1 !important;
    }
    
    body#muspanel .invoicedesc .formcon .yuzde70 {
        width: 60% !important;
    }
    
    body#muspanel .invoicedesc .formcon .yuzde30 {
        width: 40% !important;
    }
    
    body#muspanel .otherincoivebtns {
        flex-direction: column !important;
    }
    
    body#muspanel .otherincoivebtns .sbtn {
        width: 100% !important;
        justify-content: center !important;
    }
}

/* Print Stilleri */
@media print {
    body#muspanel {
        background: #ffffff !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
    
    body#muspanel .invoicex {
        box-shadow: none !important;
        margin: 0 !important;
        border: none !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    body#muspanel .invoicex .padding {
        padding: 20px !important;
    }
    
    body#muspanel .otherincoivebtns,
    body#muspanel #accordion,
    body#muspanel #continue_button,
    body#muspanel #selection-methods,
    body#muspanel #payment-screen,
    body#muspanel .lbtn,
    body#muspanel .cd-top {
        display: none !important;
    }
    
    body#muspanel .invoice-detail-left,
    body#muspanel .invoice-detail-right {
        width: 50% !important;
        float: left !important;
        box-sizing: border-box !important;
    }
    
    body#muspanel .invoicedesc {
        border: 1px solid #ddd !important;
        border-radius: 0 !important;
        page-break-inside: avoid !important;
    }
    
    body#muspanel .invoicedesc .formcon {
        display: table !important;
        width: 100% !important;
        border-bottom: 1px solid #ddd !important;
    }
    
    body#muspanel .invoicedesc .formcon:first-child {
        background: #333 !important;
    }
    
    body#muspanel .invoicedesc .formcon .yuzde70 {
        display: table-cell !important;
        width: 70% !important;
        padding: 10px !important;
        border-right: 1px solid #ddd !important;
    }
    
    body#muspanel .invoicedesc .formcon .yuzde30 {
        display: table-cell !important;
        width: 30% !important;
        padding: 10px !important;
        text-align: right !important;
    }
    
    body#muspanel #total_wrap {
        background: #f5f5f5 !important;
        border-top: 2px solid #333 !important;
    }
    
    body#muspanel .invoicestatus {
        page-break-inside: avoid !important;
    }
    
    body#muspanel .faturaodenmis {
        background: #e8f5e9 !important;
        page-break-inside: avoid !important;
    }
    
    body#muspanel .faturaodenmis .yesilbtn,
    body#muspanel .faturaodenmis .graybtn {
        display: none !important;
    }
    
    body#muspanel .companybillinfo img {
        max-width: 150px !important;
        height: auto !important;
    }
}