* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html { scroll-behavior: smooth; }

body {
    font-family: 'Inter', Arial, sans-serif;
    background: #0a1220;
    color: #e4ecf7;
    line-height: 1.6;
    overflow-x: hidden;
}

.container {
    width: min(1180px, calc(100% - 40px));
    margin: auto;
}


/* ============ NAVBAR ============ */
.navbar {
    position: sticky;
    top: 0;
    z-index: 1000;
    height: 82px;
    background: rgba(10, 18, 32, .85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(78, 154, 255, .12);
    box-shadow: 0 4px 18px rgba(31, 42, 55, .07);
}

.nav-inner {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.navbar::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: linear-gradient(90deg,
        transparent,
        #4e9aff 25%,
        #7c3aed 50%,
        #4e9aff 75%,
        transparent);
    opacity: .8;
}

/* ==================================================
   ACTIVE NAVIGATION
================================================== */

nav a.active {
    color: #1f3652;
}

nav a.active::after {
    width: 100%;
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: #fff;
    flex-shrink: 0;
}

.brand-logo {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: linear-gradient(135deg, #0d6efd, #4e9aff);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    box-shadow: 0 4px 20px rgba(13, 110, 253, .35);
    overflow: hidden;
}

.brand-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 8px;
    background: #fff;
}

.brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.brand-text strong {
    font-size: 16px;
    font-weight: 800;
    letter-spacing: .5px;
}

.brand-text span {
    color: #4e9aff;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: .5px;
}

.brand-text small {
    color: #7a8ca3;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .3px;
    margin-top: 3px;
}

nav {
    display: flex;
    align-items: center;
    gap: 28px;
}

nav a {
    color: #b8c5d6;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    transition: color .2s;
    position: relative;
}

nav a::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 0;
    width: 0;
    height: 2px;
    background: #4e9aff;
    transition: width .3s;
}

nav a:hover { color: #fff; }
nav a:hover::after { width: 100%; }

.nav-contact {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

/* Kullanıcı Girişi */
.nav-login {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;

    background: linear-gradient(135deg, #315f8d, #477eaf);
    color: #fff;

    text-decoration: none;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 700;

    box-shadow: 0 4px 14px rgba(49, 95, 141, .20);
    transition: all .2s ease;
}

.nav-login:hover {
    transform: translateY(-2px);
    box-shadow: 0 7px 20px rgba(49, 95, 141, .30);
}

/* Kayıt Ol */
.nav-register {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;

    background: transparent;
    color: #315f8d;

    border: 1px solid #7799b9;
    text-decoration: none;
    border-radius: 9px;

    font-size: 13px;
    font-weight: 700;

    transition: all .2s ease;
}

.nav-register:hover {
    background: #315f8d;
    border-color: #315f8d;
    color: #fff;
    transform: translateY(-2px);
}

.nav-phone {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 16px;
    background: linear-gradient(135deg, #0d6efd, #4e9aff);
    color: #fff;
    text-decoration: none;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    box-shadow: 0 4px 20px rgba(13, 110, 253, .35);
    transition: transform .2s, box-shadow .2s;
}

.nav-phone:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(13, 110, 253, .5);
}

.nav-mail {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: rgba(78, 154, 255, .1);
    border: 1px solid rgba(78, 154, 255, .25);
    color: #4e9aff;
    text-decoration: none;
    transition: all .2s;
}

.nav-mail:hover {
    background: rgba(78, 154, 255, .2);
    transform: translateY(-2px);
}

/* ============ HERO ============ */
.hero {
    position: relative;
    overflow: hidden;
    background: radial-gradient(ellipse at top, #12233f 0%, #0a1220 60%);
    padding: 100px 0 90px;
}

.hero-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.hero-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: .35;
}

.glow-1 {
    width: 500px; height: 500px;
    background: #0d6efd;
    top: -150px; right: -100px;
    animation: glowPulse 8s ease-in-out infinite;
}

.glow-2 {
    width: 400px; height: 400px;
    background: #7c3aed;
    bottom: -150px; left: -100px;
    animation: glowPulse 10s ease-in-out infinite reverse;
}

@keyframes glowPulse {
    0%, 100% { opacity: .25; transform: scale(1); }
    50% { opacity: .45; transform: scale(1.15); }
}

.grid-overlay {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(78, 154, 255, .05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(78, 154, 255, .05) 1px, transparent 1px);
    background-size: 50px 50px;
    mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
}

.hero-grid {
    position: relative;
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    align-items: center;
    gap: 60px;
    z-index: 2;
}

.eyebrow {
    display: inline-flex;
    gap: 9px;
    align-items: center;
    color: #4e9aff;
    background: rgba(78, 154, 255, .1);
    border: 1px solid rgba(78, 154, 255, .2);
    padding: 7px 14px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .6px;
}

.eyebrow i { font-size: 7px; animation: blink 1.5s infinite; }

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: .3; }
}

.hero h1 {
    margin-top: 24px;
    font-size: clamp(42px, 5vw, 66px);
    line-height: 1.05;
    letter-spacing: -2.5px;
    color: #fff;
    font-weight: 900;
}

.gradient-text {
    display: block;
    background: linear-gradient(120deg, #4e9aff, #7c3aed, #06b6d4, #4e9aff);
    background-size: 300% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradientMove 6s linear infinite;
}

@keyframes gradientMove {
    0% { background-position: 0% 50%; }
    100% { background-position: 300% 50%; }
}

.hero-content > p {
    max-width: 620px;
    margin-top: 24px;
    font-size: 17px;
    color: #8fa1ba;
}

.hero-actions {
    display: flex;
    gap: 14px;
    margin-top: 34px;
    flex-wrap: wrap;
}

.btn-primary, .btn-secondary {
    padding: 14px 22px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 700;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    transition: all .25s;
}

.btn-primary {
    background: linear-gradient(135deg, #0d6efd, #4e9aff);
    color: #fff;
    box-shadow: 0 6px 25px rgba(13, 110, 253, .4);
}

.btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 35px rgba(13, 110, 253, .6);
}

.btn-primary i { transition: transform .25s; }
.btn-primary:hover i { transform: translateX(4px); }

.btn-secondary {
    border: 1px solid rgba(78, 154, 255, .3);
    background: rgba(78, 154, 255, .06);
    color: #b8c5d6;
}

.btn-secondary:hover {
    background: rgba(78, 154, 255, .12);
    border-color: rgba(78, 154, 255, .6);
    color: #fff;
    transform: translateY(-3px);
}

.hero-features {
    display: flex;
    gap: 25px;
    margin-top: 30px;
    font-size: 13px;
    color: #8fa1ba;
    flex-wrap: wrap;
}

.hero-features i {
    color: #22c55e;
    margin-right: 6px;
}

/* ============ HERO VISUAL ============ */
.hero-visual {
    position: relative;
    min-height: 480px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Dönen Dünya */
.globe-wrap {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 0;
}

.globe {
    position: relative;
    width: 320px;
    height: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.globe-ring {
    position: absolute;
    border: 1px solid rgba(78, 154, 255, .3);
    border-radius: 50%;
    border-top-color: #4e9aff;
    border-right-color: transparent;
}

.ring-1 {
    width: 320px; height: 320px;
    animation: spin 20s linear infinite;
}

.ring-2 {
    width: 240px; height: 240px;
    border-color: rgba(124, 58, 237, .3);
    border-top-color: #7c3aed;
    animation: spin 14s linear infinite reverse;
}

.ring-3 {
    width: 160px; height: 160px;
    border-color: rgba(6, 182, 212, .3);
    border-top-color: #06b6d4;
    animation: spin 10s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.globe-icon {
    font-size: 100px;
    background: linear-gradient(135deg, #4e9aff, #7c3aed);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 30px rgba(78, 154, 255, .5));
    animation: floatIcon 6s ease-in-out infinite;
}

@keyframes floatIcon {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-12px) rotate(8deg); }
}

.orbit-dot {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #4e9aff;
    box-shadow: 0 0 15px #4e9aff;
}

.dot-1 { top: 0; left: 50%; animation: orbitDot1 8s linear infinite; }
.dot-2 { top: 50%; right: 0; background: #7c3aed; box-shadow: 0 0 15px #7c3aed; animation: orbitDot2 6s linear infinite; }
.dot-3 { bottom: 0; left: 50%; background: #06b6d4; box-shadow: 0 0 15px #06b6d4; animation: orbitDot3 10s linear infinite; }

@keyframes orbitDot1 {
    0% { transform: rotate(0deg) translateY(-160px) rotate(0deg); }
    100% { transform: rotate(360deg) translateY(-160px) rotate(-360deg); }
}
@keyframes orbitDot2 {
    0% { transform: rotate(0deg) translateX(120px) rotate(0deg); }
    100% { transform: rotate(360deg) translateX(120px) rotate(-360deg); }
}
@keyframes orbitDot3 {
    0% { transform: rotate(0deg) translateY(80px) rotate(0deg); }
    100% { transform: rotate(360deg) translateY(80px) rotate(-360deg); }
}

/* Kod Penceresi */
.code-window {
    position: relative;
    width: 380px;
    background: linear-gradient(180deg, #0f1a2e, #0a1220);
    border: 1px solid rgba(78, 154, 255, .18);
    border-radius: 14px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .6), 0 0 60px rgba(13, 110, 253, .1);
    overflow: hidden;
    z-index: 2;
    backdrop-filter: blur(10px);
    animation: floatCard 6s ease-in-out infinite;
}

@keyframes floatCard {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.code-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: rgba(78, 154, 255, .05);
    border-bottom: 1px solid rgba(78, 154, 255, .12);
}

.dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
}

.dot.red { background: #ff5f57; }
.dot.yellow { background: #febc2e; }
.dot.green { background: #28c840; }

.code-title {
    margin-left: auto;
    font-size: 11px;
    color: #64748b;
    font-family: monospace;
}

.code-body {
    padding: 20px;
    font-family: 'Courier New', monospace;
    font-size: 13px;
    line-height: 1.8;
    color: #cbd5e1;
    overflow: hidden;
}

.code-body code { white-space: pre; }

.c-key { color: #c084fc; }
.c-var { color: #60a5fa; }
.c-prop { color: #4ade80; }
.c-str { color: #fbbf24; }
.c-bool { color: #f472b6; }
.c-fn { color: #22d3ee; }

/* Floating Kartlar */
.floating-card {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 12px 16px;
    background: rgba(15, 26, 46, .9);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(78, 154, 255, .2);
    border-radius: 12px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, .4);
    z-index: 3;
    transition: transform .3s;
}

.floating-card:hover { transform: scale(1.08) !important; }

.floating-card i {
    font-size: 20px;
    color: #4e9aff;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(78, 154, 255, .12);
    border-radius: 8px;
}

.floating-card div {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.floating-card strong {
    font-size: 13px;
    color: #fff;
    font-weight: 700;
}

.floating-card small {
    font-size: 10px;
    color: #7a8ca3;
}

.card-code {
    top: 20px;
    left: -10px;
    animation: floatCard 5s ease-in-out infinite;
}

.card-cloud {
    bottom: 30px;
    right: -10px;
    animation: floatCard 7s ease-in-out infinite reverse;
}

.card-cloud i { color: #7c3aed; background: rgba(124, 58, 237, .12); }

.card-status {
    bottom: 20px;
    left: 0;
    animation: floatCard 6s ease-in-out infinite;
}

.pulse-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 0 rgba(34, 197, 94, .7);
    animation: pulse 2s infinite;
    flex-shrink: 0;
}

@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, .7); }
    70% { box-shadow: 0 0 0 12px rgba(34, 197, 94, 0); }
    100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

/* Matrix Şerit */
.matrix-strip {
    position: relative;
    margin-top: 80px;
    padding: 18px 0;
    border-top: 1px solid rgba(78, 154, 255, .12);
    border-bottom: 1px solid rgba(78, 154, 255, .12);
    background: rgba(13, 110, 253, .03);
    overflow: hidden;
    mask-image: linear-gradient(90deg, transparent, black 15%, black 85%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, black 15%, black 85%, transparent);
}

.matrix-track {
    display: flex;
    gap: 40px;
    width: max-content;
    animation: scrollMatrix 30s linear infinite;
}

.matrix-track span {
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 2px;
    color: #4e9aff;
    font-family: monospace;
    opacity: .7;
    white-space: nowrap;
}

.matrix-track span:nth-child(even) {
    color: #7c3aed;
    font-size: 10px;
}

@keyframes scrollMatrix {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

/* ============ LIGHT CORPORATE SECTIONS ============ */

/* Hero koyu ve güçlü kalır; içerik bölümleri göz yormayan açık mavi-gri tona geçer. */
.services {
    position: relative;
    padding: 105px 0;
    background:
        radial-gradient(circle at 10% 0%, rgba(78,154,255,.09), transparent 28%),
        linear-gradient(180deg, #f5f8fc 0%, #edf3f9 100%);
    color: #172033;
}

.section-head {
    max-width: 760px;
    margin: 0 auto 54px;
    text-align: center;
}

.section-head > span,
.section-label {
    display: inline-block;
    color: #1769d2;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.8px;
    margin-bottom: 14px;
}

.section-head h2,
.solutions h2 {
    color: #152238;
    font-size: clamp(32px, 4vw, 46px);
    line-height: 1.15;
    letter-spacing: -1.6px;
    font-weight: 800;
}

.section-head h2 strong,
.solutions h2 span { color: #287ee8; }

.section-head p,
.solutions-grid > div:first-child > p {
    color: #64748b;
    font-size: 16px;
    margin-top: 18px;
}

/* p içindeki span mavi */
.section-head p span,
.solutions-grid > div:first-child > p span {
    color: #287ee8;
}

.service-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.service-card {
    position: relative;
    min-height: 265px;
    padding: 30px;
    background: rgba(255,255,255,.86);
    border: 1px solid #dce6f1;
    border-radius: 18px;
    box-shadow: 0 12px 35px rgba(31, 55, 88, .07);
    transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
    overflow: hidden;
}

.service-card::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg, #0d6efd, #4e9aff, #7c3aed);
    opacity: 0;
    transition: opacity .28s ease;
}

.service-card:hover {
    transform: translateY(-7px);
    border-color: #bfd6f3;
    box-shadow: 0 20px 45px rgba(31, 55, 88, .13);
}
.service-card:hover::before { opacity: 1; }

.service-icon {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 22px;
    border-radius: 14px;
    color: #1769d2;
    font-size: 21px;
    background: linear-gradient(135deg, #e9f2ff, #f0edff);
    border: 1px solid #d8e7fa;
}

.service-card h3 {
    color: #18263a;
    font-size: 19px;
    margin-bottom: 10px;
}

.service-card p {
    color: #66758a;
    font-size: 14px;
    min-height: 68px;
}

.service-card a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 20px;
    color: #1769d2;
    text-decoration: none;
    font-size: 13px;
    font-weight: 800;
}
.service-card a i { transition: transform .2s; }
.service-card a:hover i { transform: translateX(4px); }

.solutions {
    padding: 105px 0;
    background: #e8eff7;
    color: #172033;
    border-top: 1px solid #dbe5f0;
    border-bottom: 1px solid #dbe5f0;
}

.solutions-grid {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 80px;
    align-items: center;
}

.advantages {
    display: grid;
    gap: 16px;
}

.advantages > div {
    display: flex;
    gap: 20px;
    align-items: center;
    padding: 24px 26px;
    background: rgba(255,255,255,.72);
    border: 1px solid #d5e1ee;
    border-radius: 16px;
    box-shadow: 0 8px 28px rgba(31,55,88,.05);
    transition: transform .25s, background .25s, box-shadow .25s;
}

.advantages > div:hover {
    transform: translateX(7px);
    background: #fff;
    box-shadow: 0 14px 34px rgba(31,55,88,.10);
}

.advantages > div > i {
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    color: #1769d2;
    background: #e8f2ff;
    font-size: 21px;
}

.advantages section { background: transparent; padding: 0; }
.advantages h3 { color: #1b293d; font-size: 17px; margin-bottom: 4px; }
.advantages p { color: #6b7a8f; font-size: 14px; }

.cta {
    padding: 88px 0;
    background: linear-gradient(135deg, #f5f8fc 0%, #edf4fb 55%, #e7f0fa 100%);
    color: #172033;
}

.cta-inner {
    padding: 46px;
    border-radius: 24px;
    background:
        radial-gradient(circle at 90% 10%, rgba(78,154,255,.14), transparent 32%),
        #ffffff;
    border: 1px solid #d8e4f0;
    box-shadow: 0 18px 55px rgba(31,55,88,.09);
}

.cta-text { max-width: 780px; margin-bottom: 32px; }
.cta-text > span {
    color: #1769d2;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.8px;
}
.cta-text h2 {
    color: #17253a;
    font-size: clamp(28px, 3.4vw, 42px);
    line-height: 1.2;
    letter-spacing: -1.2px;
    margin-top: 10px;
}

.cta-contacts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.contact-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px;
    border-radius: 14px;
    text-decoration: none;
    background: #f5f8fc;
    border: 1px solid #dde7f1;
    transition: transform .22s, box-shadow .22s, background .22s;
}
.contact-card:hover { transform: translateY(-4px); background: #fff; box-shadow: 0 10px 25px rgba(31,55,88,.10); }
.contact-icon {
    width: 42px; height: 42px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 11px;
    color: #1769d2;
    background: #e4effd;
}
.contact-card small { display: block; color: #7a899c; font-size: 11px; }
.contact-card strong { display: block; color: #26364b; font-size: 13px; }
.contact-card.whatsapp .contact-icon { color: #159447; background: #e4f7eb; }

footer {
    padding: 28px 0;
    background: #dfe8f2;
    border-top: 1px solid #d1dde9;
    color: #65758a;
}
.footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 25px; }
.footer-brand .brand-text strong { color: #17253a; }
.footer-brand .brand-text span { color: #287ee8; }
footer p { font-size: 12px; }

/* Hero ile açık içerik arasında daha yumuşak geçiş */
.hero::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 70px;
    pointer-events: none;
    background: linear-gradient(to bottom, transparent, rgba(19,35,61,.35));
}

@media (max-width: 980px) {
    nav { display: none; }
    .hero-grid { grid-template-columns: 1fr; gap: 30px; }
    .hero-content { text-align: center; }
    .hero-content > p { margin-left: auto; margin-right: auto; }
    .hero-actions, .hero-features { justify-content: center; }
    .hero-visual { min-height: 430px; }
    .service-grid { grid-template-columns: repeat(2, 1fr); }
    .solutions-grid { grid-template-columns: 1fr; gap: 42px; }
    .cta-contacts { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    .container { width: min(100% - 28px, 1180px); }
    .navbar { height: 72px; }
    .brand-text small, .nav-phone span, .nav-mail { display: none; }
    .nav-phone { width: 42px; height: 42px; padding: 0; justify-content: center; }
    .hero { padding: 72px 0 55px; }
    .hero h1 { font-size: 40px; letter-spacing: -1.7px; }
    .hero-visual { min-height: 360px; transform: scale(.86); margin: -25px -20px; }
    .matrix-strip { margin-top: 45px; }
    .services, .solutions { padding: 72px 0; }
    .service-grid { grid-template-columns: 1fr; }
    .service-card { min-height: auto; }
    .service-card p { min-height: auto; }
    .cta { padding: 62px 0; }
    .cta-inner { padding: 28px 22px; }
    .footer-inner { flex-direction: column; text-align: center; }
}

/* 23.09.2026 - Navbar ve hero bir ton daha acik */
.navbar {
    background: rgba(20, 39, 67, .90);
    border-bottom-color: rgba(112, 174, 255, .20);
}

.hero {
    background: radial-gradient(ellipse at top, #213d68 0%, #162b4a 58%, #132640 100%);
}

.hero-glow { opacity: .30; }

/* Acik bolumlere gecisi yeni hero tonuyla yumusat */
.hero::after {
    background: linear-gradient(to bottom, transparent, rgba(28, 52, 87, .24));
}

/* ===== V3 — ÜST ALAN RENK UYUMU ===== */
/* Taş/bej navbar + daha yumuşak slate-blue hero */
body { background: #f2f4f6; }

.navbar {
    background: #dfe8f2;
    border-bottom: 1px solid #d1dde9;
    box-shadow: 0 4px 18px rgba(31, 42, 55, .07);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.brand { color: #243247; }
.brand-text strong { color: #243247; }
.brand-text span { color: #2f6fae; }
.brand-text small { color: #7b7b75; }
nav a { color: #566274; }
nav a:hover { color: #1f3652; }
nav a::after { background: #3f78ae; }
.nav-mail {
    background: rgba(47,111,174,.08);
    border-color: rgba(47,111,174,.22);
    color: #2f6fae;
}
.nav-mail:hover { background: rgba(47,111,174,.14); }
.nav-phone {
    background: linear-gradient(135deg, #315f8d, #477eaf);
    box-shadow: 0 4px 16px rgba(49,95,141,.22);
}
.nav-phone:hover { box-shadow: 0 8px 24px rgba(49,95,141,.30); }

.hero {
    background:
        radial-gradient(circle at 78% 15%, rgba(93,137,181,.26), transparent 34%),
        linear-gradient(135deg, #43566d 0%, #34475e 48%, #293c52 100%);
}
.glow-1 { background: #79a9d3; opacity: .20; }
.glow-2 { background: #8d92c9; opacity: .14; }
.grid-overlay {
    background-image:
        linear-gradient(rgba(220,232,244,.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(220,232,244,.055) 1px, transparent 1px);
}
.hero-content > p, .hero-features { color: #c7d2de; }
.btn-secondary {
    color: #e2e9f0;
    background: rgba(255,255,255,.07);
    border-color: rgba(255,255,255,.18);
}
.eyebrow {
    color: #d7e9fb;
    background: rgba(255,255,255,.08);
    border-color: rgba(255,255,255,.14);
}
.hero::after {
    height: 85px;
    background: linear-gradient(to bottom, transparent, rgba(232,239,247,.08));
}

/* ===== V4 — Navbar V3 kalsin, hero orijinal koyu renge donsun ===== */
.hero {
    background: radial-gradient(ellipse at top, #12233f 0%, #0a1220 60%);
}
.glow-1 { background: #0d6efd; opacity: .20; }
.glow-2 { background: #7c3aed; opacity: .14; }
.grid-overlay {
    background-image:
        linear-gradient(rgba(78,154,255,.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(78,154,255,.045) 1px, transparent 1px);
}
.hero-content > p, .hero-features { color: #a8b5c7; }
.hero::after {
    height: 70px;
    background: linear-gradient(to bottom, transparent, rgba(19,35,61,.35));
}

/* Marka adı tek satır, alt yazı altta */
.brand-text {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 5px;
    line-height: 1.1;
}
.brand-text small {
    flex-basis: 100%;   /* alt satıra zorla */
}

/* ==================================================
   CONTACT PAGE
================================================== */

.contact-hero {
    position: relative;
    padding: 75px 0 70px;
    overflow: hidden;
    text-align: center;

    background:
        radial-gradient(circle at 75% 10%,
            rgba(78,154,255,.18),
            transparent 30%),
        radial-gradient(circle at 20% 80%,
            rgba(124,58,237,.12),
            transparent 30%),
        #0a1220;

    border-bottom: 1px solid rgba(78,154,255,.15);
}

.contact-hero::before {
    content: '';
    position: absolute;
    inset: 0;

    background-image:
        linear-gradient(rgba(78,154,255,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(78,154,255,.04) 1px, transparent 1px);

    background-size: 50px 50px;
}

.contact-hero .container {
    position: relative;
    z-index: 2;
}

.contact-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    padding: 7px 14px;

    border: 1px solid rgba(78,154,255,.25);
    border-radius: 30px;

    background: rgba(78,154,255,.08);
    color: #7db4ff;

    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.contact-badge i {
    font-size: 6px;
    color: #4e9aff;
}

.contact-hero h1 {
    margin-top: 20px;

    color: #fff;
    font-size: clamp(38px, 5vw, 58px);
    line-height: 1.1;
    letter-spacing: -2px;
}

.contact-hero h1 span {
    background: linear-gradient(
        120deg,
        #4e9aff,
        #7c3aed,
        #06b6d4
    );

    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.contact-hero p {
    max-width: 650px;
    margin: 20px auto 0;

    color: #9cabc0;
    font-size: 16px;
}


/* ==================================================
   CONTACT CONTENT
================================================== */

.contact-page {
    padding: 90px 0 105px;

    background:
        radial-gradient(circle at 5% 0%,
            rgba(78,154,255,.08),
            transparent 25%),
        #edf3f9;

    color: #172033;
}

.contact-layout {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 70px;
    align-items: start;
}


/* SOL TARAF */

.contact-info h2 {
    margin-top: 10px;

    color: #17253a;
    font-size: clamp(30px, 4vw, 43px);
    line-height: 1.15;
    letter-spacing: -1.4px;
}

.contact-info h2 span {
    color: #287ee8;
}

.contact-description {
    max-width: 520px;

    margin-top: 18px;

    color: #66758a;
    font-size: 15px;
    line-height: 1.8;
}


.contact-info-list {
    display: grid;
    gap: 13px;

    margin-top: 35px;
}

.contact-info-card {
    position: relative;

    display: flex;
    align-items: center;
    gap: 16px;

    padding: 18px;

    text-decoration: none;

    background: rgba(255,255,255,.78);

    border: 1px solid #d8e4f0;
    border-radius: 15px;

    transition:
        transform .25s,
        box-shadow .25s,
        border-color .25s,
        background .25s;
}

.contact-info-card:hover {
    transform: translateX(6px);

    background: #fff;

    border-color: #b9d2ee;

    box-shadow:
        0 14px 35px rgba(31,55,88,.10);
}

.contact-info-icon {
    width: 48px;
    height: 48px;

    flex: 0 0 48px;

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

    border-radius: 13px;

    color: #1769d2;
    background: #e6f0fd;

    font-size: 18px;
}

.contact-info-card > div:nth-child(2) {
    display: flex;
    flex-direction: column;
}

.contact-info-card small {
    color: #8492a5;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .7px;
}

.contact-info-card strong {
    margin-top: 2px;

    color: #26364b;
    font-size: 14px;
}

.contact-info-card span {
    margin-top: 2px;

    color: #7c8999;
    font-size: 11px;
}

.contact-arrow {
    margin-left: auto;

    color: #9badc1;
    font-size: 12px;

    transition: transform .2s;
}

.contact-info-card:hover .contact-arrow {
    transform: translateX(4px);
    color: #1769d2;
}


/* WhatsApp */

.contact-info-card.whatsapp .contact-info-icon {
    color: #159447;
    background: #e3f7ea;
}


/* Güven alanı */

.contact-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;

    margin-top: 30px;
}

.contact-trust div {
    display: flex;
    align-items: center;
    gap: 7px;

    color: #68788d;
    font-size: 11px;
    font-weight: 600;
}

.contact-trust i {
    color: #287ee8;
}


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

.contact-form-wrapper {
    padding: 32px;

    background: rgba(255,255,255,.92);

    border: 1px solid #d8e4f0;
    border-radius: 20px;

    box-shadow:
        0 20px 55px rgba(31,55,88,.10);
}

.contact-form-head {
    display: flex;
    align-items: center;
    gap: 15px;

    padding-bottom: 24px;
    margin-bottom: 25px;

    border-bottom: 1px solid #e5ebf2;
}

.form-icon {
    width: 48px;
    height: 48px;

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

    flex: 0 0 48px;

    border-radius: 13px;

    background:
        linear-gradient(135deg, #315f8d, #477eaf);

    color: #fff;

    box-shadow:
        0 6px 18px rgba(49,95,141,.22);
}

.contact-form-head h3 {
    color: #1b293d;
    font-size: 19px;
}

.contact-form-head p {
    margin-top: 2px;

    color: #7a899c;
    font-size: 12px;
}


/* INPUT */

.contact-form {
    display: grid;
    gap: 18px;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.form-group label {
    color: #43536a;

    font-size: 11px;
    font-weight: 700;
}

.input-wrap {
    position: relative;
}

.input-wrap > i {
    position: absolute;

    left: 14px;
    top: 50%;

    transform: translateY(-50%);

    color: #8496ab;
    font-size: 12px;

    pointer-events: none;
}

.input-wrap input,
.input-wrap select,
.input-wrap textarea {
    width: 100%;

    padding: 13px 14px 13px 40px;

    font-family: inherit;
    font-size: 13px;

    color: #25364c;

    background: #f5f8fc;

    border: 1px solid #dce5ef;
    border-radius: 10px;

    outline: none;

    transition:
        border-color .2s,
        box-shadow .2s,
        background .2s;
}

.input-wrap input:focus,
.input-wrap select:focus,
.input-wrap textarea:focus {
    background: #fff;

    border-color: #6da6e5;

    box-shadow:
        0 0 0 3px rgba(78,154,255,.10);
}

.textarea-wrap > i {
    top: 17px;
    transform: none;
}

.input-wrap textarea {
    resize: vertical;
    min-height: 130px;
}


/* BUTTON */

.contact-submit {
    width: 100%;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    padding: 14px 20px;

    border: 0;
    border-radius: 10px;

    cursor: pointer;

    background:
        linear-gradient(135deg, #0d6efd, #4e9aff);

    color: #fff;

    font-family: inherit;
    font-size: 13px;
    font-weight: 800;

    box-shadow:
        0 7px 22px rgba(13,110,253,.28);

    transition:
        transform .2s,
        box-shadow .2s;
}

.contact-submit:hover {
    transform: translateY(-2px);

    box-shadow:
        0 12px 28px rgba(13,110,253,.38);
}

.contact-submit i {
    transition: transform .2s;
}

.contact-submit:hover i {
    transform: translateX(4px);
}

.form-security {
    text-align: center;

    color: #8a97a8;

    font-size: 10px;
}

.form-security i {
    margin-right: 4px;
    color: #52a66c;
}


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

@media (max-width: 900px) {

    .contact-layout {
        grid-template-columns: 1fr;
        gap: 50px;
    }

}

@media (max-width: 600px) {

    .contact-hero {
        padding: 55px 0;
    }

    .contact-page {
        padding: 60px 0;
    }

    .contact-form-wrapper {
        padding: 22px;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    .contact-trust {
        gap: 12px;
    }

}

/* ==================================================
   CONTACT MAP CARD
================================================== */

.contact-map {
    padding: 0 0 100px;
    background: #edf3f9;
}


/* Ana Kart */
.map-card {
    padding: 30px;

    background: rgba(255,255,255,.92);

    border: 1px solid #d8e4f0;
    border-radius: 20px;

    box-shadow:
        0 20px 55px rgba(31,55,88,.10);
}


/* ==================================================
   CARD HEADER
================================================== */

.map-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 30px;

    padding-bottom: 24px;
    margin-bottom: 25px;

    border-bottom: 1px solid #e5ebf2;
}


.map-card-title {
    display: flex;
    align-items: center;
    gap: 15px;
}


/* Konum İkonu */

.map-card-icon {
    width: 50px;
    height: 50px;

    flex: 0 0 50px;

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

    border-radius: 13px;

    background:
        linear-gradient(
            135deg,
            #315f8d,
            #477eaf
        );

    color: #fff;

    font-size: 18px;

    box-shadow:
        0 6px 18px rgba(49,95,141,.22);
}


/* Küçük KONUMUMUZ yazısı */

.map-card-title span {
    display: block;

    margin-bottom: 3px;

    color: #287ee8;

    font-size: 9px;
    font-weight: 800;

    letter-spacing: 1.3px;
}


/* Başlık */

.map-card-title h3 {
    color: #1b293d;

    font-size: 19px;

    margin: 0;
}


/* Adres */

.map-card-title p {
    margin-top: 4px;

    color: #7a899c;

    font-size: 11px;
}


/* ==================================================
   YOL TARİFİ BUTONU
================================================== */

.map-route-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    flex-shrink: 0;

    padding: 11px 16px;

    border-radius: 9px;

    background: #edf4fb;

    border: 1px solid #d1e0ef;

    color: #315f8d;

    text-decoration: none;

    font-size: 11px;
    font-weight: 700;

    transition: all .2s ease;
}


.map-route-btn:hover {
    color: #fff;

    background:
        linear-gradient(
            135deg,
            #315f8d,
            #477eaf
        );

    border-color: #315f8d;

    transform: translateY(-2px);

    box-shadow:
        0 7px 18px rgba(49,95,141,.20);
}


/* ==================================================
   MAP
================================================== */

.map-wrapper {
    position: relative;

    width: 100%;
    height: 390px;

    overflow: hidden;

    border-radius: 14px;

    border: 1px solid #dce5ee;

    background: #eef3f8;
}


/* Üstte ince teknoloji çizgisi */

.map-wrapper::before {
    content: '';

    position: absolute;

    z-index: 2;

    top: 0;
    left: 40px;
    right: 40px;

    height: 3px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #4e9aff,
            #7c3aed,
            #06b6d4,
            transparent
        );

    pointer-events: none;
}


.map-wrapper iframe {
    display: block;

    width: 100%;
    height: 100%;

    border: 0;
}


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

@media (max-width: 700px) {

    .map-card {
        padding: 20px;
    }

    .map-card-head {
        flex-direction: column;
        align-items: flex-start;

        gap: 18px;
    }

    .map-route-btn {
        width: 100%;
    }

    .map-wrapper {
        height: 320px;
    }

}

/* ==================================================
   SERVICES CENTER PAGE
================================================== */


/* HERO */

.services-center-hero {
    position: relative;

    padding: 90px 0 85px;

    overflow: hidden;

    text-align: center;

    background:
        radial-gradient(
            circle at 75% 15%,
            rgba(40,126,232,.22),
            transparent 30%
        ),
        radial-gradient(
            circle at 20% 80%,
            rgba(124,58,237,.14),
            transparent 30%
        ),
        #0a1220;

    color: #fff;
}


.services-center-grid {
    position: absolute;
    inset: 0;

    background-image:
        linear-gradient(
            rgba(78,154,255,.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(78,154,255,.035) 1px,
            transparent 1px
        );

    background-size: 50px 50px;

    pointer-events: none;
}


.services-center-glow {
    position: absolute;

    width: 350px;
    height: 350px;

    border-radius: 50%;

    filter: blur(110px);

    pointer-events: none;
}

.services-center-glow.glow-a {
    left: -150px;
    top: -100px;

    background: rgba(37,99,235,.18);
}

.services-center-glow.glow-b {
    right: -150px;
    bottom: -180px;

    background: rgba(124,58,237,.15);
}


.services-center-hero-inner {
    position: relative;
    z-index: 2;
}


.services-center-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    padding: 7px 14px;

    border-radius: 30px;

    border:
        1px solid rgba(78,154,255,.25);

    background:
        rgba(78,154,255,.08);

    color: #82b7ff;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 1.4px;
}


.services-center-badge i {
    font-size: 6px;

    color: #4e9aff;
}


.services-center-hero h1 {
    max-width: 850px;

    margin: 22px auto 0;

    font-size:
        clamp(40px, 5vw, 62px);

    line-height: 1.08;

    letter-spacing: -2.5px;
}


.services-center-hero h1 span {
    display: block;

    background:
        linear-gradient(
            120deg,
            #4e9aff,
            #7c3aed,
            #06b6d4
        );

    -webkit-background-clip: text;
    background-clip: text;

    -webkit-text-fill-color: transparent;
}


.services-center-hero p {
    max-width: 720px;

    margin: 22px auto 0;

    color: #9eacc0;

    font-size: 15px;
    line-height: 1.8;
}


.services-center-features {
    display: flex;

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

    flex-wrap: wrap;

    gap: 30px;

    margin-top: 30px;
}


.services-center-features div {
    display: flex;

    align-items: center;

    gap: 7px;

    color: #b2bfd0;

    font-size: 11px;
}


.services-center-features i {
    color: #22c55e;

    font-size: 10px;
}


/* ==================================================
   MAIN
================================================== */

.services-center {
    padding: 95px 0 105px;

    background:
        radial-gradient(
            circle at 5% 0%,
            rgba(78,154,255,.08),
            transparent 25%
        ),
        #edf3f9;
}


.services-center-heading {
    display: grid;

    grid-template-columns:
        1fr .65fr;

    align-items: end;

    gap: 70px;

    margin-bottom: 45px;
}


.services-center-heading h2 {
    max-width: 650px;

    margin-top: 8px;

    color: #17253a;

    font-size:
        clamp(31px, 4vw, 44px);

    line-height: 1.15;

    letter-spacing: -1.5px;
}


.services-center-heading h2 span {
    color: #287ee8;
}


.services-center-heading > p {
    color: #68788d;

    font-size: 13px;

    line-height: 1.8;
}


/* ==================================================
   SERVICE LIST
================================================== */

.services-center-list {
    display: grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap: 20px;
}


.service-center-card {
    position: relative;

    display: grid;

    grid-template-columns:
        65px 1fr auto;

    align-items: center;

    gap: 20px;

    min-height: 205px;

    padding: 28px;

    overflow: hidden;

    background:
        rgba(255,255,255,.86);

    border:
        1px solid #d9e4ef;

    border-radius: 18px;

    box-shadow:
        0 10px 35px
        rgba(31,55,88,.055);

    transition:
        transform .25s ease,
        border-color .25s ease,
        box-shadow .25s ease,
        background .25s ease;
}


.service-center-card::before {
    content: '';

    position: absolute;

    top: 0;
    left: 0;

    width: 3px;
    height: 100%;

    opacity: 0;

    background:
        linear-gradient(
            #0d6efd,
            #7c3aed,
            #06b6d4
        );

    transition: opacity .25s;
}


.service-center-card:hover {
    transform:
        translateY(-5px);

    background: #fff;

    border-color: #bad1e9;

    box-shadow:
        0 18px 45px
        rgba(31,55,88,.11);
}


.service-center-card:hover::before {
    opacity: 1;
}


/* NUMBER */

.service-center-number {
    position: absolute;

    right: 18px;
    top: 8px;

    color:
        rgba(31,72,115,.045);

    font-size: 62px;

    font-weight: 900;

    line-height: 1;

    pointer-events: none;
}


/* ICON */

.service-center-icon {
    width: 60px;
    height: 60px;

    display: flex;

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

    border-radius: 15px;

    background:
        linear-gradient(
            135deg,
            #e7f2ff,
            #f0edff
        );

    border:
        1px solid #d6e6f7;

    color: #1769d2;

    font-size: 22px;

    transition:
        transform .25s;
}


.service-center-card:hover
.service-center-icon {

    transform:
        scale(1.06);
}


/* CONTENT */

.service-center-content {
    position: relative;

    z-index: 2;
}


.service-center-type {
    color: #4084d2;

    font-size: 8px;

    font-weight: 800;

    letter-spacing: 1.2px;
}


.service-center-content h3 {
    margin-top: 4px;

    color: #1b2b40;

    font-size: 19px;

    letter-spacing: -.4px;
}


.service-center-content p {
    max-width: 430px;

    margin-top: 7px;

    color: #6d7c90;

    font-size: 12px;

    line-height: 1.65;
}


/* TAGS */

.service-center-tags {
    display: flex;

    flex-wrap: wrap;

    gap: 6px;

    margin-top: 12px;
}


.service-center-tags span {
    padding: 4px 8px;

    border-radius: 20px;

    background: #edf3f9;

    border:
        1px solid #e0e9f2;

    color: #748398;

    font-size: 8px;

    font-weight: 600;
}


/* LINK */

.service-center-link {
    position: relative;

    z-index: 3;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 8px;

    color: #64768b;

    text-decoration: none;

    font-size: 9px;

    font-weight: 700;

    white-space: nowrap;
}


.service-center-link div {
    width: 38px;
    height: 38px;

    display: flex;

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

    border-radius: 50%;

    background: #edf4fb;

    border:
        1px solid #d5e3f1;

    color: #287ee8;

    transition:
        background .2s,
        color .2s,
        transform .2s;
}


.service-center-link:hover div {
    background: #287ee8;

    color: #fff;

    transform:
        translateX(3px);
}


/* ==================================================
   CTA
================================================== */

.services-center-cta {
    padding: 0 0 95px;

    background: #edf3f9;
}


.services-center-cta-box {
    display: flex;

    align-items: center;

    gap: 25px;

    padding: 40px;

    border-radius: 20px;

    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(78,154,255,.18),
            transparent 35%
        ),
        #101d31;

    border:
        1px solid
        rgba(78,154,255,.15);

    box-shadow:
        0 20px 50px
        rgba(31,55,88,.14);
}


.services-center-cta-icon {
    width: 65px;
    height: 65px;

    flex: 0 0 65px;

    display: flex;

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

    border-radius: 16px;

    background:
        rgba(78,154,255,.10);

    border:
        1px solid
        rgba(78,154,255,.18);

    color: #62a5ff;

    font-size: 23px;
}


.services-center-cta-content {
    flex: 1;
}


.services-center-cta-content > span {
    color: #5e9df0;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 1.3px;
}


.services-center-cta h2 {
    margin-top: 5px;

    color: #fff;

    font-size: 25px;

    letter-spacing: -.7px;
}


.services-center-cta p {
    margin-top: 6px;

    color: #8fa0b7;

    font-size: 12px;
}


.services-center-cta-btn {
    display: inline-flex;

    align-items: center;

    gap: 10px;

    flex-shrink: 0;

    padding: 13px 17px;

    border-radius: 10px;

    background:
        linear-gradient(
            135deg,
            #0d6efd,
            #4e9aff
        );

    color: #fff;

    text-decoration: none;

    font-size: 11px;

    font-weight: 800;

    box-shadow:
        0 7px 22px
        rgba(13,110,253,.3);

    transition:
        transform .2s,
        box-shadow .2s;
}


.services-center-cta-btn:hover {
    transform:
        translateY(-2px);

    box-shadow:
        0 12px 28px
        rgba(13,110,253,.4);
}


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

@media (max-width: 1000px) {

    .services-center-list {
        grid-template-columns: 1fr;
    }

}


@media (max-width: 800px) {

    .services-center-heading {
        grid-template-columns: 1fr;

        gap: 18px;
    }

    .services-center-cta-box {
        align-items: flex-start;

        flex-direction: column;
    }

}


@media (max-width: 600px) {

    .services-center-hero {
        padding:
            60px 0;
    }

    .services-center {
        padding:
            65px 0;
    }

    .service-center-card {
        grid-template-columns:
            52px 1fr;

        padding:
            22px 18px;
    }

    .service-center-icon {
        width: 50px;
        height: 50px;

        font-size: 18px;
    }

    .service-center-link {
        grid-column: 2;

        flex-direction: row;

        justify-self: start;

        margin-top: 5px;
    }

    .service-center-link div {
        width: 30px;
        height: 30px;
    }

    .services-center-features {
        gap: 15px;
    }

    .services-center-cta-box {
        padding: 27px 22px;
    }

}

/* ==================================================
   ARTICLE DETAIL
================================================== */


/* ==================================================
   HERO
================================================== */

.article-detail-hero {
    position: relative;

    width: 100%;

    padding: 65px 0 75px;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 80% 10%,
            rgba(78,154,255,.22),
            transparent 30%
        ),
        radial-gradient(
            circle at 15% 100%,
            rgba(124,58,237,.14),
            transparent 30%
        ),
        #0a1220;

    color: #fff;
}


.article-detail-grid {
    position: absolute;
    inset: 0;

    background-image:
        linear-gradient(
            rgba(78,154,255,.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(78,154,255,.035) 1px,
            transparent 1px
        );

    background-size: 50px 50px;

    pointer-events: none;
}


.article-detail-glow {
    position: absolute;

    width: 350px;
    height: 350px;

    border-radius: 50%;

    filter: blur(110px);

    pointer-events: none;
}


.article-detail-glow-one {
    right: -130px;
    top: -150px;

    background:
        rgba(37,99,235,.18);
}


.article-detail-glow-two {
    left: -150px;
    bottom: -200px;

    background:
        rgba(124,58,237,.14);
}


.article-detail-hero-inner {
    position: relative;

    z-index: 2;
}


/* Breadcrumb */

.article-detail-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;

    margin-top: -60px; /* yukarı kaldırır */
    margin-bottom: 57px;

    font-size: 14px;
}


.article-detail-breadcrumb a {
    display: inline-flex;

    align-items: center;

    gap: 6px;

    color: #8194ac;

    text-decoration: none;

    transition: color .2s;
}


.article-detail-breadcrumb a:hover {
    color: #6ba9fa;
}


.article-detail-breadcrumb > i {
    color: #4c6079;

    font-size: 6px;
}


.article-detail-breadcrumb span {
    color: #aebdd0;
}


/* Label */

.article-detail-label {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 7px 13px;

    border-radius: 30px;

    background:
        rgba(78,154,255,.08);

    border:
        1px solid
        rgba(78,154,255,.23);

    color: #7db3fb;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 1.2px;
}


.article-detail-label i {
    color: #4e9aff;

    font-size: 5px;
}


/* Title */

.article-detail-hero h1 {
    max-width: 950px;

    margin-top: 17px;

    color: #fff;

    font-size:
        clamp(38px, 5vw, 58px);

    line-height: 1.1;

    letter-spacing: -2px;
}


/* Description */

.article-detail-hero-inner > p {
    max-width: 750px;

    margin-top: 17px;

    color: #9aaabe;

    font-size: 14px;

    line-height: 1.8;
}



/* ==================================================
   CONTENT SECTION
================================================== */

.article-detail-section {
    width: 100%;

    padding: 70px 0 50px;

    background:
        radial-gradient(
            circle at 5% 0%,
            rgba(78,154,255,.07),
            transparent 25%
        ),
        #edf3f9;
}


/* CARD */

.article-detail-card {
    width: 100%;

    padding: 42px 46px;

    background:
        rgba(255,255,255,.95);

    border:
        1px solid #d7e3ef;

    border-radius: 20px;

    box-shadow:
        0 18px 50px
        rgba(31,55,88,.08);
}


/* CARD HEADER */

.article-detail-card-top {
    display: flex;

    align-items: center;

    gap: 16px;
}


.article-detail-card-icon {
    width: 52px;
    height: 52px;

    flex: 0 0 52px;

    display: flex;

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

    border-radius: 13px;

    background:
        linear-gradient(
            135deg,
            #315f8d,
            #477eaf
        );

    color: #fff;

    font-size: 18px;

    box-shadow:
        0 7px 18px
        rgba(49,95,141,.20);
}


.article-detail-card-top span {
    display: block;

    margin-bottom: 3px;

    color: #3e83d1;

    font-size: 8px;

    font-weight: 800;

    letter-spacing: 1.2px;
}


.article-detail-card-top h2 {
    margin: 0;

    color: #1b2a3e;

    font-size: 22px;

    letter-spacing: -.5px;
}


.article-detail-divider {
    height: 1px;

    margin: 27px 0 32px;

    background:
        linear-gradient(
            90deg,
            #dce5ef,
            #edf2f7,
            transparent
        );
}



/* ==================================================
   SQL CONTENT
================================================== */

.article-detail-content {
    width: 100%;

    color: #526276;

    font-size: 14px;

    line-height: 1.9;
}


.article-detail-content > *:first-child {
    margin-top: 0;
}


.article-detail-content > *:last-child {
    margin-bottom: 0;
}


.article-detail-content p {
    margin:
        0 0 19px;
}


.article-detail-content h1,
.article-detail-content h2,
.article-detail-content h3,
.article-detail-content h4,
.article-detail-content h5 {

    color: #1c2c41;

    line-height: 1.3;

    letter-spacing: -.5px;
}


.article-detail-content h2 {
    margin:
        36px 0 15px;

    font-size: 26px;
}


.article-detail-content h3 {
    margin:
        29px 0 12px;

    font-size: 20px;
}


.article-detail-content h4 {
    margin:
        24px 0 10px;

    font-size: 17px;
}


.article-detail-content strong {
    color: #293b52;

    font-weight: 700;
}


.article-detail-content a {
    color: #1769d2;

    text-decoration: none;

    font-weight: 600;
}


.article-detail-content a:hover {
    text-decoration: underline;
}


/* LIST */

.article-detail-content ul,
.article-detail-content ol {

    margin:
        17px 0 22px 22px;
}


.article-detail-content li {
    margin-bottom: 8px;

    padding-left: 3px;
}


.article-detail-content li::marker {
    color: #287ee8;
}


/* IMAGE */

.article-detail-content img {
    display: block;

    max-width: 100%;

    height: auto;

    margin:
        27px auto;

    border-radius: 14px;

    box-shadow:
        0 12px 35px
        rgba(31,55,88,.10);
}


/* TABLE */

.article-detail-content table {
    width: 100%;

    margin:
        25px 0;

    border-collapse: collapse;

    overflow: hidden;

    background: #fff;

    border:
        1px solid #dce5ee;

    border-radius: 10px;
}


.article-detail-content th,
.article-detail-content td {

    padding:
        12px 14px;

    border:
        1px solid #e0e7ef;

    text-align: left;
}


.article-detail-content th {
    background: #edf4fb;

    color: #263a52;

    font-weight: 700;
}


/* BLOCKQUOTE */

.article-detail-content blockquote {
    position: relative;

    margin:
        27px 0;

    padding:
        20px 24px;

    background: #f1f6fb;

    border-left:
        3px solid #287ee8;

    border-radius:
        0 11px 11px 0;

    color: #53657b;
}



/* ==================================================
   CTA
================================================== */

.article-detail-cta {
    width: 100%;

    padding: 0 0 90px;

    background: #edf3f9;
}


.article-detail-cta-box {
    display: flex;

    align-items: center;

    gap: 25px;

    padding: 38px 40px;

    border-radius: 20px;

    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(78,154,255,.18),
            transparent 35%
        ),
        #101d31;

    border:
        1px solid
        rgba(78,154,255,.15);

    box-shadow:
        0 20px 50px
        rgba(31,55,88,.14);
}


.article-detail-cta-icon {
    width: 60px;
    height: 60px;

    flex: 0 0 60px;

    display: flex;

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

    border-radius: 15px;

    background:
        rgba(78,154,255,.10);

    border:
        1px solid
        rgba(78,154,255,.17);

    color: #65a7ff;

    font-size: 21px;
}


.article-detail-cta-text {
    flex: 1;
}


.article-detail-cta-text > span {
    color: #5899ed;

    font-size: 8px;

    font-weight: 800;

    letter-spacing: 1.2px;
}


.article-detail-cta-text h2 {
    margin-top: 5px;

    color: #fff;

    font-size: 23px;

    line-height: 1.3;

    letter-spacing: -.5px;
}


.article-detail-cta-text p {
    margin-top: 6px;

    color: #8fa0b7;

    font-size: 11px;
}


.article-detail-contact {
    display: inline-flex;

    align-items: center;

    gap: 9px;

    flex-shrink: 0;

    padding:
        12px 17px;

    border-radius: 9px;

    background:
        linear-gradient(
            135deg,
            #0d6efd,
            #4e9aff
        );

    color: #fff;

    text-decoration: none;

    font-size: 10px;

    font-weight: 800;

    box-shadow:
        0 7px 20px
        rgba(13,110,253,.28);

    transition:
        transform .2s,
        box-shadow .2s;
}


.article-detail-contact:hover {
    transform:
        translateY(-2px);

    box-shadow:
        0 11px 27px
        rgba(13,110,253,.38);
}



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

@media (max-width: 800px) {

    .article-detail-card {
        padding:
            30px 25px;
    }


    .article-detail-cta-box {
        align-items:
            flex-start;

        flex-direction:
            column;
    }

}


@media (max-width: 600px) {

    .article-detail-hero {
        padding:
            50px 0 55px;
    }


    .article-detail-section {
        padding:
            45px 0 35px;
    }


    .article-detail-card {
        padding:
            24px 18px;

        border-radius:
            15px;
    }


    .article-detail-card-top h2 {
        font-size: 18px;
    }


    .article-detail-content {
        font-size: 13px;
    }


    .article-detail-cta-box {
        padding:
            27px 22px;
    }

}

/* ==================================================
   ARTICLE SQL CONTENT
================================================== */

.article-sql-content {
    color: #526276;
    font-size: 15px;
    line-height: 1.85;
}

/* Normal metin */
.article-sql-content p,
.article-sql-content div,
.article-sql-content span,
.article-sql-content li {
    color: #526276;
}

/* Başlıklar */
.article-sql-content h1,
.article-sql-content h2,
.article-sql-content h3,
.article-sql-content h4,
.article-sql-content h5,
.article-sql-content h6 {
    color: #17253a;
    line-height: 1.3;
    margin: 28px 0 12px;
}

/* SQL içeriğindeki ana H2 */
.article-sql-content h2 {
    font-size: 27px;
}

/* H3 */
.article-sql-content h3 {
    font-size: 21px;
}

/* Paragraflar */
.article-sql-content p {
    margin: 0 0 18px;
}

/* Liste */
.article-sql-content ul,
.article-sql-content ol {
    margin: 15px 0 22px;
    padding-left: 24px;
}

.article-sql-content li {
    margin-bottom: 7px;
}

/* Link */
.article-sql-content a {
    color: #287ee8;
    font-weight: 600;
}

/* Kalın */
.article-sql-content strong,
.article-sql-content b {
    color: #26364b;
}

/* Resimler */
.article-sql-content img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    margin: 20px 0;
}

.article-content-section {
    padding: 80px 0 100px;
    background: #edf3f9;
    color: #172033;
}

.article-content-card {
    padding: 42px 46px;
    background: rgba(255,255,255,.92);
    border: 1px solid #d8e4f0;
    border-radius: 20px;
    box-shadow: 0 20px 55px rgba(31,55,88,.10);
}

.article-content-heading {
    margin-bottom: 35px;
    padding-bottom: 30px;
    border-bottom: 1px solid #e2e9f1;
}

.article-content-heading h2 {
    color: #17253a;
    font-size: clamp(28px, 3vw, 38px);
    line-height: 1.2;
}

.article-content-heading h2 span {
    color: #287ee8;
}

.article-content-heading > p {
    max-width: 700px;
    margin-top: 14px;
    color: #66758a;
    font-size: 14px;
    line-height: 1.75;
}

.article-content-heading p {
    color: #64748b;
    font-size: 16px;
    margin-top: 18px;
}

.article-content-heading p span {
    color: #287ee8;
}

/* ==================================================
   404 PAGE
================================================== */

.error-404 {
    position: relative;
    min-height: calc(100vh - 82px);
    display: flex;
    align-items: center;
    overflow: hidden;
    padding: 90px 0 110px;

    background:
        radial-gradient(
            circle at 25% 30%,
            rgba(78,154,255,.15),
            transparent 30%
        ),
        radial-gradient(
            circle at 80% 65%,
            rgba(124,58,237,.13),
            transparent 30%
        ),
        #0a1220;
}


/* ==================================================
   GRID BACKGROUND
================================================== */

.error-404-grid {
    position: absolute;
    inset: 0;

    background-image:
        linear-gradient(
            rgba(78,154,255,.04) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(78,154,255,.04) 1px,
            transparent 1px
        );

    background-size: 48px 48px;

    mask-image:
        radial-gradient(
            ellipse at center,
            black 20%,
            transparent 75%
        );

    -webkit-mask-image:
        radial-gradient(
            ellipse at center,
            black 20%,
            transparent 75%
        );

    pointer-events: none;
}


/* ==================================================
   GLOW
================================================== */

.error-glow {
    position: absolute;

    width: 420px;
    height: 420px;

    border-radius: 50%;

    filter: blur(120px);

    pointer-events: none;
}

.error-glow-one {
    top: -180px;
    right: -100px;

    background: #0d6efd;
    opacity: .18;
}

.error-glow-two {
    bottom: -200px;
    left: -120px;

    background: #7c3aed;
    opacity: .14;
}


/* ==================================================
   CONTENT
================================================== */

.error-404-inner {
    position: relative;
    z-index: 2;

    max-width: 850px;

    text-align: center;
}


/* ==================================================
   ICON
================================================== */

.error-icon-wrap {
    position: relative;

    width: 100px;
    height: 100px;

    margin: 0 auto 25px;

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

.error-icon {
    position: relative;
    z-index: 3;

    width: 64px;
    height: 64px;

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

    border-radius: 18px;

    background:
        linear-gradient(
            135deg,
            rgba(78,154,255,.18),
            rgba(124,58,237,.15)
        );

    border:
        1px solid rgba(78,154,255,.28);

    color: #6ba9ff;

    font-size: 25px;

    box-shadow:
        0 15px 45px rgba(0,0,0,.25),
        0 0 35px rgba(78,154,255,.12);
}

.error-icon-ring {
    position: absolute;

    border-radius: 50%;

    border:
        1px solid rgba(78,154,255,.20);
}

.error-icon-ring.ring-one {
    width: 85px;
    height: 85px;

    animation: errorSpin 12s linear infinite;

    border-top-color: #4e9aff;
}

.error-icon-ring.ring-two {
    width: 100px;
    height: 100px;

    border-color: rgba(124,58,237,.15);
    border-bottom-color: #7c3aed;

    animation: errorSpin 18s linear infinite reverse;
}

@keyframes errorSpin {

    to {
        transform: rotate(360deg);
    }

}


/* ==================================================
   404 NUMBER
================================================== */

.error-code {
    display: flex;
    align-items: center;
    justify-content: center;

    margin-top: 5px;

    font-size: clamp(100px, 15vw, 180px);
    line-height: .95;

    font-weight: 900;

    letter-spacing: -12px;

    color: #ffffff;

    text-shadow:
        0 15px 45px rgba(0,0,0,.30);
}

.error-code span {
    display: inline-block;
}

.error-code .error-zero {

    background:
        linear-gradient(
            135deg,
            #4e9aff,
            #7c3aed,
            #06b6d4
        );

    -webkit-background-clip: text;
    background-clip: text;

    -webkit-text-fill-color: transparent;

    margin: 0 5px;
}


/* ==================================================
   TITLE
================================================== */

.error-404 h1 {

    margin-top: 20px;

    color: #ffffff;

    font-size: clamp(30px, 4vw, 44px);

    line-height: 1.15;

    letter-spacing: -1.5px;

    font-weight: 800;
}

.error-404 h1 span {
    color: #5ba2ff;
}


/* ==================================================
   DESCRIPTION
================================================== */

.error-description {

    max-width: 620px;

    margin: 20px auto 0;

    color: #9aabc0;

    font-size: 15px;

    line-height: 1.8;
}


/* ==================================================
   SYSTEM MESSAGE
================================================== */

.error-system-message {

    width: fit-content;

    margin: 28px auto 0;

    display: flex;
    align-items: center;

    gap: 9px;

    padding: 9px 15px;

    border-radius: 30px;

    background:
        rgba(78,154,255,.07);

    border:
        1px solid rgba(78,154,255,.16);

    font-family:
        "Courier New",
        monospace;
}

.error-system-dot {

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #4e9aff;

    box-shadow:
        0 0 12px rgba(78,154,255,.8);
}

.error-system-message span {

    color: #75b3ff;

    font-size: 11px;

    font-weight: 700;
}

.error-system-message small {

    color: #667b95;

    font-size: 10px;
}


/* ==================================================
   BUTTONS
================================================== */

.error-actions {

    display: flex;

    justify-content: center;

    gap: 12px;

    flex-wrap: wrap;

    margin-top: 35px;
}

.error-btn-primary,
.error-btn-secondary {

    display: inline-flex;

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

    gap: 9px;

    min-width: 165px;

    padding: 13px 20px;

    border-radius: 10px;

    text-decoration: none;

    font-size: 13px;

    font-weight: 700;

    transition:
        transform .2s,
        box-shadow .2s,
        background .2s,
        border-color .2s;
}


/* Primary */

.error-btn-primary {

    color: #fff;

    background:
        linear-gradient(
            135deg,
            #315f8d,
            #477eaf
        );

    box-shadow:
        0 7px 22px rgba(49,95,141,.28);
}

.error-btn-primary:hover {

    transform: translateY(-3px);

    box-shadow:
        0 12px 30px rgba(49,95,141,.38);
}


/* Secondary */

.error-btn-secondary {

    color: #c4d1df;

    background:
        rgba(255,255,255,.04);

    border:
        1px solid rgba(255,255,255,.13);
}

.error-btn-secondary:hover {

    transform: translateY(-3px);

    color: #fff;

    background:
        rgba(255,255,255,.08);

    border-color:
        rgba(78,154,255,.35);
}


/* ==================================================
   SMALL LINKS
================================================== */

.error-links {

    display: flex;

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

    gap: 15px;

    margin-top: 32px;
}

.error-links > span {

    width: 4px;
    height: 4px;

    border-radius: 50%;

    background: #50637b;
}

.error-links a {

    display: inline-flex;

    align-items: center;

    gap: 6px;

    color: #71859e;

    text-decoration: none;

    font-size: 11px;

    transition: color .2s;
}

.error-links a:hover {
    color: #70adff;
}


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

@media (max-width: 600px) {

    .error-404 {
        min-height: calc(100vh - 72px);
        padding: 65px 0 80px;
    }

    .error-code {
        letter-spacing: -7px;
    }

    .error-actions {
        flex-direction: column;
        align-items: center;
    }

    .error-btn-primary,
    .error-btn-secondary {
        width: min(100%, 280px);
    }

    .error-system-message small {
        display: none;
    }

}

.site-footer {
    margin-top: 70px;
    padding: 60px 0 0;
    background: linear-gradient(135deg, #172536, #1e344b);
    color: #d9e2eb;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.25fr 1fr 1.15fr 1.2fr;
    gap: 50px;
}

.footer-col h3,
.footer-col h4 {
    color: #fff;
    margin: 0 0 20px;
}

.footer-col h3 {
    font-size: 17px;
}

.footer-col h4 {
    font-size: 14px;
    margin-top: 25px;
}

.footer-brand {
    margin-bottom: 20px;
}

.footer-brand .brand-text {
    color: #fff;
}

.footer-desc {
    font-size: 13px;
    line-height: 1.8;
    color: #aebdcb;
    max-width: 300px;
}

.footer-small {
    color: #aebdcb;
    font-size: 13px;
    line-height: 1.7;
}

.footer-links {
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-links li {
    margin-bottom: 10px;
}

.footer-links a {
    color: #aebdcb;
    text-decoration: none;
    font-size: 13px;
    transition: .2s;
}

.footer-links a::before {
    content: "›";
    margin-right: 8px;
    color: #5ca2dd;
}

.footer-links a:hover {
    color: #fff;
    padding-left: 4px;
}

.footer-contact-title {
    margin-top: 32px !important;
}

.footer-contact {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: 13px;
    line-height: 1.6;
    color: #aebdcb;
}

.footer-contact i {
    color: #5ca2dd;
    margin-top: 4px;
    width: 16px;
}

.footer-newsletter {
    display: flex;
    margin-top: 18px;
}

.footer-newsletter input {
    width: 100%;
    border: 1px solid rgba(255,255,255,.15);
    background: rgba(255,255,255,.07);
    color: #fff;
    padding: 12px 14px;
    border-radius: 8px 0 0 8px;
    outline: none;
}

.footer-newsletter input::placeholder {
    color: #91a2b2;
}

.footer-newsletter button {
    width: 48px;
    border: 0;
    background: #3978ad;
    color: #fff;
    border-radius: 0 8px 8px 0;
    cursor: pointer;
}

.footer-newsletter button:hover {
    background: #4b8bc1;
}

.footer-social {
    display: flex;
    gap: 8px;
    margin-top: 22px;
}

.footer-social a {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.08);
    color: #fff;
    border-radius: 8px;
    text-decoration: none;
    transition: .2s;
}

.footer-social a:hover {
    background: #3978ad;
    transform: translateY(-2px);
}

.footer-payment {
    display: flex;
    gap: 10px;
    margin-top: 15px;
}

.footer-payment i {
    font-size: 35px;
    color: #fff;
}

.footer-certificates {
    margin-top: 28px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.footer-certificates > div {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 11px;
    line-height: 1.4;
    color: #c5d0da;
}

.footer-certificates i {
    width: 35px;
    font-size: 27px;
    color: #5ca2dd;
}

.footer-bottom {
    margin-top: 50px;
    padding: 22px 0;
    border-top: 1px solid rgba(255,255,255,.09);
    display: flex;
    justify-content: space-between;
    color: #8295a7;
    font-size: 12px;
}


/* TABLET */
@media (max-width: 1000px) {
    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}


/* MOBİL */
@media (max-width: 600px) {
    .site-footer {
        padding-top: 40px;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    .footer-bottom {
        flex-direction: column;
        gap: 8px;
        text-align: center;
    }
}

.footer-links .sub-links {
    padding-left: 15px;
    list-style: none;
}

.footer-links .sub-links li a {
    font-size: 13px;
    opacity: 0.8;
    position: relative;
}

/* Başına tire/ok koymak için */
.footer-links .sub-links li a::before {
    content: "– ";
    color: #999;
}

/* Ana linki kalın yapmak */
.footer-links .has-children > a {
    font-weight: bold;
}

/* ==================================================
   NISROC SHOWCASE
================================================== */

.nisroc-showcase {
    position: relative;
    overflow: hidden;

    padding: 115px 0;

    background:
        radial-gradient(
            circle at 78% 30%,
            rgba(78,154,255,.15),
            transparent 30%
        ),
        radial-gradient(
            circle at 20% 90%,
            rgba(124,58,237,.10),
            transparent 32%
        ),
        #0a1220;

    color: #fff;
}


/* GRID BACKGROUND */

.nisroc-bg-grid {
    position: absolute;
    inset: 0;

    background-image:
        linear-gradient(
            rgba(78,154,255,.045) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(78,154,255,.045) 1px,
            transparent 1px
        );

    background-size: 50px 50px;

    mask-image:
        radial-gradient(
            ellipse at center,
            black 20%,
            transparent 75%
        );

    -webkit-mask-image:
        radial-gradient(
            ellipse at center,
            black 20%,
            transparent 75%
        );

    pointer-events: none;
}


/* GLOW */

.nisroc-glow {
    position: absolute;

    width: 500px;
    height: 500px;

    border-radius: 50%;

    filter: blur(130px);

    pointer-events: none;
}

.nisroc-glow-one {
    top: -220px;
    right: -150px;

    background: #0d6efd;
    opacity: .18;
}

.nisroc-glow-two {
    bottom: -260px;
    left: -170px;

    background: #7c3aed;
    opacity: .12;
}


/* ==================================================
   LAYOUT
================================================== */

.nisroc-showcase-grid {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        1.05fr .95fr;

    align-items: center;

    gap: 90px;
}


/* ==================================================
   CONTENT
================================================== */

.nisroc-product-label {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 7px 13px;

    margin-bottom: 22px;

    border-radius: 30px;

    color: #79b5ff;

    background:
        rgba(78,154,255,.08);

    border:
        1px solid rgba(78,154,255,.20);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1.3px;
}

.nisroc-product-label i {
    font-size: 11px;
}


/* TITLE */

.nisroc-showcase-content h2 {
    max-width: 680px;

    color: #fff;

    font-size:
        clamp(38px, 4.5vw, 58px);

    line-height: 1.07;

    letter-spacing: -2px;

    font-weight: 850;
}

.nisroc-showcase-content h2 span {
    display: block;

    background:
        linear-gradient(
            120deg,
            #4e9aff,
            #7c3aed,
            #06b6d4
        );

    -webkit-background-clip: text;
    background-clip: text;

    -webkit-text-fill-color: transparent;
}


/* TEXT */

.nisroc-lead {
    max-width: 670px;

    margin-top: 27px;

    color: #c1ccda;

    font-size: 17px;

    line-height: 1.8;
}

.nisroc-lead strong {
    color: #fff;
}

.nisroc-description {
    max-width: 670px;

    margin-top: 15px;

    color: #8496ad;

    font-size: 14px;

    line-height: 1.8;
}


/* ==================================================
   FEATURES
================================================== */

.nisroc-features {
    display: grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap: 12px;

    margin-top: 35px;
}

.nisroc-feature {
    display: flex;

    gap: 13px;

    padding: 16px;

    background:
        rgba(255,255,255,.035);

    border:
        1px solid rgba(255,255,255,.08);

    border-radius: 13px;

    transition:
        background .25s,
        border-color .25s,
        transform .25s;
}

.nisroc-feature:hover {
    transform: translateY(-3px);

    background:
        rgba(78,154,255,.07);

    border-color:
        rgba(78,154,255,.20);
}

.nisroc-feature-icon {
    width: 38px;
    height: 38px;

    flex: 0 0 38px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 10px;

    color: #6cabff;

    background:
        rgba(78,154,255,.10);

    font-size: 14px;
}

.nisroc-feature > div:last-child {
    display: flex;

    flex-direction: column;

    gap: 3px;
}

.nisroc-feature strong {
    color: #dce6f2;

    font-size: 12px;
}

.nisroc-feature span {
    color: #73869f;

    font-size: 10px;

    line-height: 1.55;
}


/* ==================================================
   BUTTONS
================================================== */

.nisroc-actions {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 11px;

    margin-top: 32px;
}

.nisroc-btn-primary,
.nisroc-btn-secondary {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 9px;

    padding: 12px 18px;

    border-radius: 9px;

    text-decoration: none;

    font-size: 12px;

    font-weight: 700;

    transition:
        transform .2s,
        box-shadow .2s,
        background .2s;
}

.nisroc-btn-primary {
    color: #fff;

    background:
        linear-gradient(
            135deg,
            #315f8d,
            #477eaf
        );

    box-shadow:
        0 6px 20px
        rgba(49,95,141,.30);
}

.nisroc-btn-primary:hover {
    transform:
        translateY(-2px);

    box-shadow:
        0 10px 28px
        rgba(49,95,141,.42);
}

.nisroc-btn-primary i {
    transition:
        transform .2s;
}

.nisroc-btn-primary:hover i {
    transform:
        translateX(4px);
}

.nisroc-btn-secondary {
    color: #b9c7d8;

    background:
        rgba(255,255,255,.04);

    border:
        1px solid
        rgba(255,255,255,.10);
}

.nisroc-btn-secondary:hover {
    color: #fff;

    background:
        rgba(255,255,255,.08);

    transform:
        translateY(-2px);
}


/* ==================================================
   VISUAL
================================================== */

.nisroc-visual {
    position: relative;

    min-height: 520px;

    display: flex;

    align-items: center;

    justify-content: center;
}


/* ORBITS */

.nisroc-orbit {
    position: absolute;

    border-radius: 50%;

    border:
        1px solid
        rgba(78,154,255,.13);
}

.orbit-one {
    width: 410px;
    height: 410px;
}

.orbit-two {
    width: 310px;
    height: 310px;

    border-color:
        rgba(124,58,237,.15);
}


/* ==================================================
   NISROC CORE
================================================== */

.nisroc-core {
    position: relative;

    z-index: 5;

    width: 190px;
    height: 190px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 35% 30%,
            #19375d,
            #0c192b 68%
        );

    border:
        1px solid
        rgba(78,154,255,.32);

    box-shadow:
        0 0 70px
        rgba(13,110,253,.16),
        inset 0 0 35px
        rgba(78,154,255,.05);
}

.nisroc-core::before {
    content: '';

    position: absolute;

    inset: 8px;

    border-radius: 50%;

    border:
        1px dashed
        rgba(78,154,255,.20);

    animation:
        nisrocSpin 25s
        linear infinite;
}

@keyframes nisrocSpin {
    to {
        transform:
            rotate(360deg);
    }
}

.nisroc-core-icon {
    width: 47px;
    height: 47px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 9px;

    border-radius: 13px;

    color: #75b5ff;

    background:
        rgba(78,154,255,.10);

    font-size: 19px;
}

.nisroc-core > strong {
    color: #fff;

    font-size: 22px;

    letter-spacing: 2px;
}

.nisroc-core > span {
    margin-top: 2px;

    color: #71869f;

    font-size: 9px;

    text-transform: uppercase;

    letter-spacing: 1px;
}

.nisroc-status {
    display: flex;

    align-items: center;

    gap: 5px;

    margin-top: 12px;

    color: #6d829b;

    font-size: 7px;

    letter-spacing: .7px;
}

.nisroc-status i {
    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: #22c55e;

    box-shadow:
        0 0 8px #22c55e;
}


/* ==================================================
   NETWORK NODES
================================================== */

.nisroc-node {
    will-change: transform;
    
    position: absolute;

    z-index: 4;

    display: flex;

    align-items: center;

    gap: 10px;

    min-width: 135px;

    padding: 11px 13px;

    border-radius: 11px;

    background:
        rgba(15,26,46,.94);

    border:
        1px solid
        rgba(78,154,255,.16);

    box-shadow:
        0 12px 35px
        rgba(0,0,0,.28);

    backdrop-filter:
        blur(10px);
}

.nisroc-node-icon {
    width: 32px;
    height: 32px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 8px;

    color: #69aaff;

    background:
        rgba(78,154,255,.10);

    font-size: 12px;
}

.nisroc-node > div:last-child {
    display: flex;

    flex-direction: column;
}

.nisroc-node small {
    color: #5e7692;

    font-size: 7px;

    letter-spacing: .8px;
}

.nisroc-node strong {
    color: #d7e1ed;

    font-size: 11px;
}


/* NODE POSITIONS */

.node-provider {
    top: 40px;
    left: 15px;
    animation: nisrocFloatProvider 5.2s ease-in-out infinite;
}

.node-api {
    top: 75px;
    right: 0;
    animation: nisrocFloatApi 6.1s ease-in-out infinite;
}

.node-hotel {
    bottom: 70px;
    left: 0;
    animation: nisrocFloatHotel 5.7s ease-in-out infinite;
}

.node-agency {
    bottom: 40px;
    right: 25px;
    animation: nisrocFloatAgency 6.6s ease-in-out infinite;
}

/* PROVIDERS */
@keyframes nisrocFloatProvider {

    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }

}


/* API / XML */
@keyframes nisrocFloatApi {

    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(8px);
    }

}


/* HOTELS */
@keyframes nisrocFloatHotel {

    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }

}


/* AGENCIES */
@keyframes nisrocFloatAgency {

    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(11px);
    }

}


/* ==================================================
   NISROC - HAREKETLİ DATA NOKTALARI
================================================== */

.nisroc-data-dot {
    position: absolute;
    z-index: 3;

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #4e9aff;

    box-shadow:
        0 0 8px #4e9aff,
        0 0 18px rgba(78,154,255,.75);

    pointer-events: none;
}


/* 1. NOKTA */

.dot-one {
    top: 22%;
    left: 30%;

    animation:
        nisrocDataOne 4.5s ease-in-out infinite;
    filter: drop-shadow(0 0 5px rgba(78,154,255,.9));
}

@keyframes nisrocDataOne {

    0% {
        transform: translate(0, 0);
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    50% {
        transform: translate(110px, 75px);
        opacity: 1;
    }

    90% {
        opacity: 1;
    }

    100% {
        transform: translate(170px, 115px);
        opacity: 0;
    }

}


/* 2. NOKTA */

.dot-two {
    top: 34%;
    right: 17%;

    background: #7c3aed;

    box-shadow:
        0 0 8px #7c3aed,
        0 0 18px rgba(124,58,237,.75);

    animation:
        nisrocDataTwo 5.2s ease-in-out infinite;
    filter: drop-shadow(0 0 5px rgba(124,58,237,.9));
    animation-delay: .8s;
}

@keyframes nisrocDataTwo {

    0% {
        transform: translate(0, 0);
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    50% {
        transform: translate(-75px, 45px);
        opacity: 1;
    }

    90% {
        opacity: 1;
    }

    100% {
        transform: translate(-145px, 90px);
        opacity: 0;
    }

}


/* 3. NOKTA */

.dot-three {
    bottom: 18%;
    left: 25%;

    background: #06b6d4;

    box-shadow:
        0 0 8px #06b6d4,
        0 0 18px rgba(6,182,212,.75);

    animation:
        nisrocDataThree 5.8s ease-in-out infinite;
    filter: drop-shadow(0 0 5px rgba(6,182,212,.9));
    animation-delay: 1.5s;
}

@keyframes nisrocDataThree {

    0% {
        transform: translate(0, 0);
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    50% {
        transform: translate(90px, -55px);
        opacity: 1;
    }

    90% {
        opacity: 1;
    }

    100% {
        transform: translate(165px, -105px);
        opacity: 0;
    }

}

.nisroc-data-dot::after {
    content: '';

    position: absolute;

    top: 50%;
    right: 4px;

    width: 28px;
    height: 2px;

    transform: translateY(-50%);

    background: linear-gradient(
        90deg,
        transparent,
        currentColor
    );

    opacity: .45;

    filter: blur(.5px);
}

.dot-one {
    color: #4e9aff;
}

.dot-two {
    color: #7c3aed;
}

.dot-three {
    color: #06b6d4;
}

@keyframes nisrocCorePulse {

    0%, 100% {
        transform: scale(1);

        box-shadow:
            0 0 55px rgba(13,110,253,.12),
            inset 0 0 35px rgba(78,154,255,.05);
    }

    50% {
        transform: scale(1.025);

        box-shadow:
            0 0 90px rgba(13,110,253,.28),
            0 0 40px rgba(124,58,237,.10),
            inset 0 0 45px rgba(78,154,255,.08);
    }

}

@keyframes nisrocCorePulse {

    0%, 100% {
        transform: scale(1);

        box-shadow:
            0 0 55px rgba(13,110,253,.12),
            inset 0 0 35px rgba(78,154,255,.05);
    }

    50% {
        transform: scale(1.025);

        box-shadow:
            0 0 90px rgba(13,110,253,.28),
            0 0 40px rgba(124,58,237,.10),
            inset 0 0 45px rgba(78,154,255,.08);
    }

}

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

@media (max-width: 1000px) {

    .nisroc-showcase-grid {
        grid-template-columns: 1fr;

        gap: 50px;
    }

    .nisroc-showcase-content {
        text-align: center;
    }

    .nisroc-showcase-content h2,
    .nisroc-lead,
    .nisroc-description {
        margin-left: auto;
        margin-right: auto;
    }

    .nisroc-actions {
        justify-content: center;
    }

    .nisroc-feature {
        text-align: left;
    }

    .nisroc-visual {
        max-width: 600px;

        width: 100%;

        margin: auto;
    }

}


@media (max-width: 600px) {

    .nisroc-showcase {
        padding: 75px 0;
    }

    .nisroc-features {
        grid-template-columns: 1fr;
    }

    .nisroc-visual {
        min-height: 430px;

        transform: scale(.86);

        margin-top: -30px;
        margin-bottom: -30px;
    }

    .orbit-one {
        width: 340px;
        height: 340px;
    }

    .orbit-two {
        width: 255px;
        height: 255px;
    }

    .node-provider {
        left: -10px;
    }

    .node-api {
        right: -10px;
    }

    .node-hotel {
        left: -10px;
    }

    .node-agency {
        right: -10px;
    }

}

.article-sql-content {
    color: #526276;
    font-size: 15px;
    line-height: 1.85;
}

.article-sql-content p {
    margin: 0 0 20px;
    color: #526276;
}

.article-sql-content h2 {
    margin: 0 0 20px;

    color: #17253a;

    font-size: 30px;
    font-weight: 800;

    line-height: 1.25;
}

.article-sql-content h3 {
    position: relative;

    margin: 42px 0 18px;
    padding-bottom: 11px;

    color: #17253a;

    font-size: 22px;
    font-weight: 800;

    line-height: 1.3;

    border-bottom: 1px solid #e1e8f0;
}

.article-sql-content h3::after {
    content: '';

    position: absolute;

    left: 0;
    bottom: -1px;

    width: 45px;
    height: 2px;

    background: #287ee8;

    border-radius: 2px;
}

.article-sql-content strong {
    color: #26364b;
    font-weight: 700;
}

.article-sql-content p strong:first-child {
    color: #26364b;
}

.article-sql-content p strong i {
    width: 25px;

    margin-right: 5px;

    color: #287ee8;

    text-align: center;
}

.article-sql-content img {
    display: block;

    max-width: 100%;
    height: auto;

    margin-left: auto;
    margin-right: auto;
}

/* ==================================================
   MANSUR CUSTOMER AUTH
================================================== */

.customer-auth {
    position: relative;
    overflow: hidden;
    min-height: 760px;
    padding: 90px 0 105px;

    background:
        radial-gradient(circle at 75% 20%,
            rgba(78,154,255,.18),
            transparent 30%),
        radial-gradient(circle at 15% 80%,
            rgba(124,58,237,.12),
            transparent 30%),
        #0a1220;
}

.customer-auth-grid {
    position: absolute;
    inset: 0;

    background-image:
        linear-gradient(rgba(78,154,255,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(78,154,255,.04) 1px, transparent 1px);

    background-size: 50px 50px;

    mask-image:
        radial-gradient(ellipse at center, black 25%, transparent 75%);

    pointer-events: none;
}

.customer-auth-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    pointer-events: none;
}

.auth-glow-one {
    width: 400px;
    height: 400px;
    top: -180px;
    right: -100px;

    background: #0d6efd;
    opacity: .15;
}

.auth-glow-two {
    width: 350px;
    height: 350px;
    bottom: -170px;
    left: -100px;

    background: #7c3aed;
    opacity: .12;
}


/* LAYOUT */

.customer-auth-container {
    position: relative;
    z-index: 2;

    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 85px;
    align-items: center;
}


/* ==================================================
   SOL TARAF
================================================== */

.customer-auth-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    padding: 7px 14px;

    border: 1px solid rgba(78,154,255,.25);
    border-radius: 30px;

    background: rgba(78,154,255,.08);

    color: #7db4ff;

    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.4px;
}

.customer-auth-info h1 {
    margin-top: 22px;

    color: #fff;

    font-size: clamp(38px, 4.5vw, 56px);
    line-height: 1.08;
    letter-spacing: -2px;
}

.customer-auth-info h1 span {
    display: block;

    background:
        linear-gradient(
            120deg,
            #4e9aff,
            #7c3aed,
            #06b6d4
        );

    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.customer-auth-info > p {
    max-width: 530px;
    margin-top: 22px;

    color: #9cabc0;

    font-size: 15px;
    line-height: 1.8;
}


/* FEATURES */

.customer-auth-features {
    display: grid;
    gap: 14px;

    margin-top: 35px;
}

.customer-auth-features > div {
    display: flex;
    align-items: center;
    gap: 15px;

    padding: 16px;

    background: rgba(255,255,255,.035);

    border: 1px solid rgba(78,154,255,.12);
    border-radius: 13px;
}

.customer-auth-features > div > i {
    width: 42px;
    height: 42px;

    flex: 0 0 42px;

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

    color: #4e9aff;

    background: rgba(78,154,255,.10);

    border-radius: 11px;
}

.customer-auth-features span {
    color: #8496ad;
    font-size: 12px;
    line-height: 1.5;
}

.customer-auth-features strong {
    display: block;

    margin-bottom: 2px;

    color: #dbe7f5;
    font-size: 13px;
}


/* ==================================================
   FORM CARD
================================================== */

.customer-auth-card {
    padding: 34px;

    background: rgba(255,255,255,.96);

    border: 1px solid rgba(255,255,255,.25);
    border-radius: 21px;

    box-shadow:
        0 30px 80px rgba(0,0,0,.30);

    backdrop-filter: blur(15px);
}

.customer-auth-card-head {
    display: flex;
    align-items: center;
    gap: 15px;

    padding-bottom: 24px;
    margin-bottom: 25px;

    border-bottom: 1px solid #e5ebf2;
}

.customer-auth-card-icon {
    width: 50px;
    height: 50px;

    flex: 0 0 50px;

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

    border-radius: 13px;

    color: #fff;

    background:
        linear-gradient(135deg, #315f8d, #477eaf);

    box-shadow:
        0 7px 20px rgba(49,95,141,.24);
}

.customer-auth-card-head span {
    color: #287ee8;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.3px;
}

.customer-auth-card-head h2 {
    margin-top: 2px;

    color: #17253a;

    font-size: 22px;
}

.customer-auth-card-head p {
    margin-top: 2px;

    color: #7a899c;

    font-size: 11px;
}


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

.customer-auth-form {
    display: grid;
    gap: 17px;
}

.customer-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.customer-form-group {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.customer-form-group label {
    color: #43536a;

    font-size: 11px;
    font-weight: 700;
}

.customer-input {
    position: relative;
}

.customer-input > i {
    position: absolute;

    left: 14px;
    top: 50%;

    transform: translateY(-50%);

    color: #8496ab;

    font-size: 12px;

    pointer-events: none;
}

.customer-input input {
    width: 100%;

    padding: 13px 14px 13px 40px;

    color: #25364c;
    background: #f5f8fc;

    border: 1px solid #dce5ef;
    border-radius: 10px;

    outline: none;

    font-family: inherit;
    font-size: 13px;

    transition:
        border-color .2s,
        box-shadow .2s,
        background .2s;
}

.customer-input input:focus {
    background: #fff;

    border-color: #6da6e5;

    box-shadow:
        0 0 0 3px rgba(78,154,255,.10);
}


/* BUTTON */

.customer-auth-submit {
    width: 100%;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    margin-top: 5px;
    padding: 14px 20px;

    border: 0;
    border-radius: 10px;

    cursor: pointer;

    background:
        linear-gradient(135deg, #315f8d, #477eaf);

    color: #fff;

    font-family: inherit;
    font-size: 13px;
    font-weight: 800;

    box-shadow:
        0 7px 22px rgba(49,95,141,.25);

    transition:
        transform .2s,
        box-shadow .2s;
}

.customer-auth-submit:hover {
    transform: translateY(-2px);

    box-shadow:
        0 12px 28px rgba(49,95,141,.35);
}

.customer-auth-submit i {
    transition: transform .2s;
}

.customer-auth-submit:hover i {
    transform: translateX(4px);
}


/* LOGIN LINK */

.customer-auth-login {
    text-align: center;

    color: #7a899c;

    font-size: 11px;
}

.customer-auth-login a {
    margin-left: 3px;

    color: #287ee8;

    text-decoration: none;
    font-weight: 800;
}


/* ==================================================
   ALERT
================================================== */

.customer-auth-alert {
    display: flex;
    align-items: center;
    gap: 9px;

    margin-bottom: 20px;
    padding: 12px 14px;

    border-radius: 10px;

    font-size: 11px;
    font-weight: 600;
}

.customer-auth-alert.error {
    color: #a33a3a;
    background: #fff0f0;
    border: 1px solid #f2cccc;
}

.customer-auth-alert.success {
    color: #287344;
    background: #edf9f1;
    border: 1px solid #cbe8d5;
}

.customer-auth-alert a {
    margin-left: auto;

    color: inherit;

    font-weight: 800;
}


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

@media (max-width: 900px) {

    .customer-auth-container {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .customer-auth-info {
        text-align: center;
    }

    .customer-auth-info > p {
        margin-left: auto;
        margin-right: auto;
    }

    .customer-auth-features {
        max-width: 600px;
        margin-left: auto;
        margin-right: auto;
        text-align: left;
    }

}


@media (max-width: 600px) {

    .customer-auth {
        padding: 60px 0 70px;
    }

    .customer-auth-card {
        padding: 24px 20px;
    }

    .customer-form-row {
        grid-template-columns: 1fr;
    }

}

/* ==================================================
   CUSTOMER LOGIN
================================================== */

.customer-login-card {
    max-width: 540px;
    width: 100%;
    justify-self: end;
}

.customer-password-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.customer-password-label label {
    color: #43536a;
    font-size: 11px;
    font-weight: 700;
}

.customer-password-label a {
    color: #287ee8;
    font-size: 10px;
    font-weight: 700;
    text-decoration: none;
}

.customer-password-label a:hover {
    text-decoration: underline;
}

.customer-password-input input {
    padding-right: 45px;
}

.customer-password-toggle {
    position: absolute;

    right: 13px;
    top: 50%;

    transform: translateY(-50%);

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

    width: 30px;
    height: 30px;

    padding: 0;

    border: 0;
    background: transparent;

    color: #8496ab;

    cursor: pointer;
}

.customer-password-toggle:hover {
    color: #287ee8;
}

@media (max-width: 900px) {

    .customer-login-card {
        max-width: 600px;
        justify-self: center;
    }

}

/* =========================================================
   CUSTOMER DASHBOARD
========================================================= */

.customer-dashboard {
    background: #f2f5f9;
    min-height: 100vh;
}


/* HERO */

.customer-dashboard-hero {
    position: relative;
    overflow: hidden;

    padding: 60px 0;

    background:
        radial-gradient(circle at 80% 20%,
            rgba(78,154,255,.16),
            transparent 30%),
        radial-gradient(circle at 20% 100%,
            rgba(124,58,237,.10),
            transparent 30%),
        #0a1220;
}

.customer-dashboard-grid {
    position: absolute;
    inset: 0;

    background-image:
        linear-gradient(rgba(78,154,255,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(78,154,255,.035) 1px, transparent 1px);

    background-size: 45px 45px;

    pointer-events: none;
}

.customer-dashboard-hero-inner {
    position: relative;
    z-index: 2;

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

    gap: 40px;
}

.customer-dashboard-label {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    padding: 6px 12px;

    border: 1px solid rgba(78,154,255,.25);
    border-radius: 30px;

    color: #7db4ff;
    background: rgba(78,154,255,.07);

    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.2px;
}

.customer-dashboard-hero h1 {
    margin-top: 15px;

    color: #fff;

    font-size: clamp(31px, 4vw, 45px);
    line-height: 1.1;
}

.customer-dashboard-hero h1 span {
    color: #58a0f2;
}

.customer-dashboard-hero p {
    max-width: 600px;

    margin-top: 12px;

    color: #91a2b8;

    font-size: 13px;
    line-height: 1.7;
}


/* USER */

.customer-dashboard-user {
    min-width: 270px;

    display: flex;
    align-items: center;
    gap: 12px;

    padding: 13px 14px;

    background: rgba(255,255,255,.055);

    border: 1px solid rgba(255,255,255,.08);
    border-radius: 14px;

    backdrop-filter: blur(10px);
}

.customer-user-avatar {
    width: 43px;
    height: 43px;

    flex: 0 0 43px;

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

    border-radius: 11px;

    color: #fff;

    background:
        linear-gradient(135deg, #315f8d, #477eaf);

    font-size: 17px;
    font-weight: 800;
}

.customer-dashboard-user > div:nth-child(2) {
    min-width: 0;
    flex: 1;
}

.customer-dashboard-user strong {
    display: block;

    color: #e5edf7;

    font-size: 12px;
}

.customer-dashboard-user span {
    display: block;

    margin-top: 2px;

    color: #7f91a8;

    font-size: 12px;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.customer-dashboard-user > a {
    width: 34px;
    height: 34px;

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

    border-radius: 8px;

    color: #8799af;
    background: rgba(255,255,255,.04);

    text-decoration: none;

    transition: .2s;
}

.customer-dashboard-user > a:hover {
    color: #fff;
    background: rgba(255,255,255,.10);
}


/* =========================================================
   CONTENT
========================================================= */

.customer-dashboard-content {
    padding: 0 0 100px;
}


/* STAT CARDS */

.customer-dashboard-stats {
    position: relative;
    z-index: 5;

    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;

    margin-top: -25px;
    margin-bottom: 60px;
}

.customer-stat-card {
    display: flex;
    align-items: center;
    gap: 13px;

    min-height: 105px;

    padding: 18px;

    background: #fff;

    border: 1px solid #e1e8f0;
    border-radius: 14px;

    box-shadow:
        0 12px 35px rgba(31,55,88,.07);
}

.customer-stat-icon {
    width: 45px;
    height: 45px;

    flex: 0 0 45px;

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

    border-radius: 11px;

    font-size: 15px;
}

.customer-stat-icon.blue {
    color: #287ee8;
    background: #edf5ff;
}

.customer-stat-icon.purple {
    color: #7952d8;
    background: #f2effc;
}

.customer-stat-icon.cyan {
    color: #0899b2;
    background: #eaf9fb;
}

.customer-stat-icon.orange {
    color: #d58228;
    background: #fff5e9;
}

.customer-stat-card span {
    display: block;

    color: #8996a8;

    font-size: 11px;
    font-weight: 800;
    letter-spacing: .8px;
}

.customer-stat-card strong {
    display: block;

    margin-top: 3px;

    color: #17253a;

    font-size: 19px;
    line-height: 1.2;
}

.customer-stat-card small {
    display: block;

    margin-top: 3px;

    color: #9aa6b6;

    font-size: 11px;
}


/* =========================================================
   SECTIONS
========================================================= */

.customer-dashboard-section {
    margin-top: 55px;
}

.customer-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 20px;

    margin-bottom: 22px;
}

.customer-section-head > div > span {
    color: #287ee8;

    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.2px;
}

.customer-section-head h2 {
    margin-top: 4px;

    color: #17253a;

    font-size: 25px;
}

.customer-section-head p {
    margin-top: 5px;

    color: #7b899b;

    font-size: 14px;
}


/* =========================================================
   SUBSCRIPTIONS
========================================================= */

.customer-subscription-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.customer-subscription-card {
    padding: 20px;

    background: #fff;

    border: 1px solid #dfe7ef;
    border-radius: 16px;

    box-shadow:
        0 10px 30px rgba(31,55,88,.055);

    transition:
        transform .2s,
        box-shadow .2s,
        border-color .2s;
}

.customer-subscription-card:hover {
    transform: translateY(-3px);

    border-color: #c8d9ea;

    box-shadow:
        0 17px 40px rgba(31,55,88,.09);
}

.customer-subscription-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.customer-product-icon {
    width: 42px;
    height: 42px;

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

    border-radius: 10px;

    color: #287ee8;
    background: #edf5ff;

    font-size: 14px;
}

.customer-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    padding: 5px 9px;

    border-radius: 20px;

    font-size: 8px;
    font-weight: 800;
}

.customer-status i {
    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: currentColor;
}

.status-active {
    color: #298750;
    background: #edf8f1;
}

.status-pending {
    color: #b67a19;
    background: #fff7e9;
}

.status-suspended {
    color: #c06b21;
    background: #fff2e7;
}

.status-cancelled,
.status-expired {
    color: #a14b4b;
    background: #fbeeee;
}

.customer-subscription-title {
    margin-top: 18px;
}

.customer-subscription-title > span {
    color: #8795a8;

    font-size: 8px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .8px;
}

.customer-subscription-title h3 {
    margin-top: 4px;

    color: #1c2c42;

    font-size: 16px;
}

.customer-subscription-title p {
    display: flex;
    align-items: center;
    gap: 6px;

    margin-top: 7px;

    color: #738398;

    font-size: 10px;
}

.customer-subscription-title p i {
    color: #4f8ed1;
}


/* DATES */

.customer-subscription-dates {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;

    margin-top: 20px;
    padding: 13px;

    background: #f6f8fb;

    border-radius: 10px;
}

.customer-subscription-dates > div:last-child {
    text-align: right;
}

.customer-subscription-dates span {
    display: block;

    color: #94a0af;

    font-size: 8px;
}

.customer-subscription-dates strong {
    display: block;

    margin-top: 2px;

    color: #34455b;

    font-size: 10px;
}

.customer-subscription-dates > i {
    color: #a9b5c2;

    font-size: 8px;
}


/* FOOTER */

.customer-subscription-footer {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 15px;

    margin-top: 17px;
}

.customer-subscription-footer span small {
    display: block;

    color: #9aa5b4;

    font-size: 8px;
}

.customer-subscription-footer span strong {
    display: block;

    margin-top: 2px;

    color: #27384d;

    font-size: 11px;
}

.customer-subscription-footer > a {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    color: #287ee8;

    font-size: 9px;
    font-weight: 800;

    text-decoration: none;
}

.customer-subscription-footer > a:hover i {
    transform: translateX(3px);
}

.customer-subscription-footer > a i {
    transition: transform .2s;
}


/* =========================================================
   SUPPORT
========================================================= */

.customer-new-ticket {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    padding: 10px 15px;

    color: #fff;

    background:
        linear-gradient(135deg, #315f8d, #477eaf);

    border-radius: 9px;

    text-decoration: none;

    font-size: 10px;
    font-weight: 800;

    box-shadow:
        0 5px 15px rgba(49,95,141,.18);
}

.customer-ticket-list {
    overflow: hidden;

    background: #fff;

    border: 1px solid #dfe7ef;
    border-radius: 15px;

    box-shadow:
        0 10px 30px rgba(31,55,88,.05);
}

.customer-ticket {
    display: grid;
    grid-template-columns:
        40px minmax(200px,1fr) 110px 110px 20px;

    align-items: center;
    gap: 13px;

    padding: 15px 18px;

    color: inherit;

    text-decoration: none;

    border-bottom: 1px solid #edf1f5;

    transition: background .2s;
}

.customer-ticket:last-child {
    border-bottom: 0;
}

.customer-ticket:hover {
    background: #f8fafc;
}

.customer-ticket-icon {
    width: 36px;
    height: 36px;

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

    border-radius: 9px;

    color: #407ebc;
    background: #eef5fc;

    font-size: 12px;
}

.customer-ticket-main span {
    display: block;

    color: #8493a6;

    font-size: 8px;
    font-weight: 700;
}

.customer-ticket-main strong {
    display: block;

    margin-top: 2px;

    color: #26374c;

    font-size: 11px;
}

.customer-ticket-date span {
    display: block;

    color: #9aa6b5;

    font-size: 8px;
}

.customer-ticket-date strong {
    display: block;

    margin-top: 2px;

    color: #5e6d80;

    font-size: 9px;
}

.customer-ticket-status {
    justify-self: start;

    padding: 5px 9px;

    border-radius: 20px;

    font-size: 8px;
    font-weight: 800;
}

.ticket-open {
    color: #b67a19;
    background: #fff6e7;
}

.ticket-answered {
    color: #28734a;
    background: #edf8f1;
}

.ticket-customer_reply {
    color: #326fae;
    background: #edf5fd;
}

.ticket-closed {
    color: #788494;
    background: #f0f2f5;
}

.customer-ticket > i {
    color: #abb6c2;

    font-size: 8px;
}

.customer-all-tickets {
    margin-top: 12px;
    text-align: right;
}

.customer-all-tickets a {
    color: #287ee8;

    text-decoration: none;

    font-size: 9px;
    font-weight: 800;
}


/* =========================================================
   EMPTY
========================================================= */

.customer-empty-state {
    padding: 55px 25px;

    text-align: center;

    background: #fff;

    border: 1px solid #dfe7ef;
    border-radius: 15px;
}

.customer-empty-state > i {
    color: #7ca4ce;

    font-size: 30px;
}

.customer-empty-state h3 {
    margin-top: 14px;

    color: #27384d;

    font-size: 15px;
}

.customer-empty-state p {
    max-width: 500px;

    margin: 7px auto 17px;

    color: #8492a4;

    font-size: 10px;
    line-height: 1.6;
}

.customer-empty-state a {
    display: inline-flex;

    padding: 9px 14px;

    color: #fff;

    background: #315f8d;

    border-radius: 8px;

    text-decoration: none;

    font-size: 9px;
    font-weight: 800;
}


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

@media (max-width: 1000px) {

    .customer-dashboard-stats {
        grid-template-columns: repeat(2, 1fr);
    }

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

}


@media (max-width: 750px) {

    .customer-dashboard-hero-inner {
        flex-direction: column;
        align-items: flex-start;
    }

    .customer-dashboard-user {
        width: 100%;
    }

    .customer-ticket {
        grid-template-columns: 40px 1fr auto;
    }

    .customer-ticket-date {
        display: none;
    }

    .customer-ticket-status {
        grid-column: 2;
    }

    .customer-ticket > i {
        grid-column: 3;
        grid-row: 1 / 3;
    }

}


@media (max-width: 600px) {

    .customer-dashboard-stats {
        grid-template-columns: 1fr;
    }

    .customer-subscription-grid {
        grid-template-columns: 1fr;
    }

    .customer-section-head {
        align-items: flex-start;
        flex-direction: column;
    }

}

/* =========================================================
   CUSTOMER SUPPORT
========================================================= */

.customer-support-page {
    min-height: 100vh;
    background: #f2f5f9;
}

.customer-support-hero {
    position: relative;
    overflow: hidden;

    padding: 48px 0 70px;

    background:
        radial-gradient(circle at 80% 20%,
            rgba(78,154,255,.16),
            transparent 30%),
        #0a1220;
}

.customer-support-hero > .container {
    position: relative;
    z-index: 2;
}

.customer-support-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;

    margin-bottom: 28px;

    font-size: 9px;
}

.customer-support-breadcrumb a {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    color: #8296af;

    text-decoration: none;
}

.customer-support-breadcrumb a:hover {
    color: #70aaf0;
}

.customer-support-breadcrumb > i {
    color: #52657d;
    font-size: 6px;
}

.customer-support-breadcrumb span {
    color: #b7c5d5;
}

.customer-support-hero h1 {
    margin-top: 14px;

    color: #fff;

    font-size: clamp(31px, 4vw, 44px);
}

.customer-support-hero h1 span {
    color: #58a0f2;
}

.customer-support-hero > .container > p {
    max-width: 650px;

    margin-top: 10px;

    color: #91a2b8;

    font-size: 12px;
    line-height: 1.7;
}


/* CONTENT */

.customer-support-content {
    padding: 55px 0 100px;
}

.customer-support-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 310px;
    gap: 25px;
    align-items: start;
}


/* CARD */

.customer-support-card {
    padding: 30px;

    background: #fff;

    border: 1px solid #dfe7ef;
    border-radius: 17px;

    box-shadow:
        0 12px 35px rgba(31,55,88,.06);
}

.customer-support-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 27px;
    padding-bottom: 20px;

    border-bottom: 1px solid #e8edf3;
}

.customer-support-card-head span {
    color: #287ee8;

    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1px;
}

.customer-support-card-head h2 {
    margin-top: 3px;

    color: #17253a;

    font-size: 21px;
}

.customer-support-card-head > i {
    width: 42px;
    height: 42px;

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

    color: #287ee8;
    background: #edf5ff;

    border-radius: 10px;
}


/* FORM */

.customer-support-form {
    display: grid;
    gap: 19px;
}

.customer-support-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.customer-select {
    position: relative;
}

.customer-select > i {
    position: absolute;

    left: 14px;
    top: 50%;

    transform: translateY(-50%);

    z-index: 2;

    color: #8496ab;

    font-size: 11px;

    pointer-events: none;
}

.customer-select select {
    width: 100%;

    padding: 13px 38px 13px 40px;

    color: #34455a;
    background: #f5f8fc;

    border: 1px solid #dce5ef;
    border-radius: 10px;

    outline: none;

    font-family: inherit;
    font-size: 12px;

    cursor: pointer;
}

.customer-select select:focus {
    background: #fff;

    border-color: #6da6e5;

    box-shadow:
        0 0 0 3px rgba(78,154,255,.10);
}

.customer-support-form textarea {
    width: 100%;
    resize: vertical;

    min-height: 180px;

    padding: 14px;

    color: #34455a;
    background: #f5f8fc;

    border: 1px solid #dce5ef;
    border-radius: 10px;

    outline: none;

    font-family: inherit;
    font-size: 12px;
    line-height: 1.7;
}

.customer-support-form textarea:focus {
    background: #fff;

    border-color: #6da6e5;

    box-shadow:
        0 0 0 3px rgba(78,154,255,.10);
}


/* ACTIONS */

.customer-support-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;

    padding-top: 5px;
}

.customer-support-actions > a {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    color: #75859a;

    text-decoration: none;

    font-size: 10px;
    font-weight: 700;
}

.customer-support-actions button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    padding: 12px 18px;

    border: 0;
    border-radius: 9px;

    color: #fff;

    background:
        linear-gradient(135deg, #315f8d, #477eaf);

    box-shadow:
        0 6px 18px rgba(49,95,141,.20);

    font-family: inherit;
    font-size: 10px;
    font-weight: 800;

    cursor: pointer;

    transition:
        transform .2s,
        box-shadow .2s;
}

.customer-support-actions button:hover {
    transform: translateY(-2px);

    box-shadow:
        0 10px 24px rgba(49,95,141,.28);
}


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

.customer-support-side {
    display: grid;
    gap: 15px;
}

.customer-support-help {
    padding: 24px;

    color: #fff;

    background:
        linear-gradient(145deg, #172b44, #0d1b2d);

    border: 1px solid rgba(255,255,255,.06);
    border-radius: 15px;

    box-shadow:
        0 12px 30px rgba(20,40,65,.12);
}

.customer-support-help-icon {
    width: 40px;
    height: 40px;

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

    margin-bottom: 16px;

    color: #73aff5;
    background: rgba(78,154,255,.10);

    border-radius: 10px;
}

.customer-support-help h3 {
    color: #e8eff8;

    font-size: 14px;
}

.customer-support-help p {
    margin-top: 8px;

    color: #91a3b9;

    font-size: 10px;
    line-height: 1.7;
}


/* INFO */

.customer-support-info {
    overflow: hidden;

    background: #fff;

    border: 1px solid #dfe7ef;
    border-radius: 15px;
}

.customer-support-info > div {
    display: flex;
    gap: 12px;

    padding: 16px;

    border-bottom: 1px solid #edf1f5;
}

.customer-support-info > div:last-child {
    border-bottom: 0;
}

.customer-support-info > div > i {
    width: 31px;
    height: 31px;

    flex: 0 0 31px;

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

    color: #4d88c6;
    background: #eef5fc;

    border-radius: 8px;

    font-size: 10px;
}

.customer-support-info span {
    color: #8290a2;

    font-size: 9px;
    line-height: 1.55;
}

.customer-support-info strong {
    display: block;

    margin-bottom: 2px;

    color: #34455a;

    font-size: 10px;
}


/* RESPONSIVE */

@media (max-width: 900px) {

    .customer-support-layout {
        grid-template-columns: 1fr;
    }

    .customer-support-side {
        grid-template-columns: 1fr 1fr;
    }

}

@media (max-width: 650px) {

    .customer-support-card {
        padding: 22px 18px;
    }

    .customer-support-form-row {
        grid-template-columns: 1fr;
    }

    .customer-support-side {
        grid-template-columns: 1fr;
    }

    .customer-support-actions {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .customer-support-actions button {
        width: 100%;
    }

}

/* =========================================================
   CUSTOMER SUPPORT DETAIL
========================================================= */

.customer-support-detail-page {
    min-height: 100vh;
    background: #f2f5f9;
}


/* =========================================================
   HERO
========================================================= */

.customer-support-detail-hero {
    position: relative;
    overflow: hidden;

    padding: 45px 0 65px;

    background:
        radial-gradient(
            circle at 80% 20%,
            rgba(78,154,255,.16),
            transparent 30%
        ),
        radial-gradient(
            circle at 10% 100%,
            rgba(124,58,237,.08),
            transparent 30%
        ),
        #0a1220;
}

.customer-support-detail-hero > .container {
    position: relative;
    z-index: 2;
}

.customer-ticket-hero-layout {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 30px;
}

.customer-ticket-number {
    display: flex;
    align-items: center;
    gap: 7px;

    color: #74a9e8;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1px;
}

.customer-ticket-number span {
    color: #91a2b8;
}

.customer-ticket-hero-layout h1 {
    max-width: 750px;

    margin-top: 12px;

    color: #fff;

    font-size: clamp(27px, 3.5vw, 39px);
    line-height: 1.2;
}

.customer-ticket-hero-layout p {
    margin-top: 10px;

    color: #8294aa;

    font-size: 10px;
}


/* STATUS */

.customer-ticket-hero-status {
    flex: 0 0 auto;

    display: inline-flex;
    align-items: center;
    gap: 7px;

    padding: 8px 13px;

    border-radius: 25px;

    font-size: 9px;
    font-weight: 800;
}

.customer-ticket-hero-status i {
    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: currentColor;

    box-shadow: 0 0 8px currentColor;
}


/* =========================================================
   CONTENT
========================================================= */

.customer-support-detail-content {
    padding: 45px 0 100px;
}

.customer-ticket-detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 290px;
    gap: 22px;

    align-items: start;
}


/* =========================================================
   SUCCESS
========================================================= */

.customer-ticket-success {
    display: flex;
    align-items: center;
    gap: 11px;

    margin-bottom: 20px;
    padding: 13px 16px;

    color: #28734a;
    background: #edf8f1;

    border: 1px solid #cce8d6;
    border-radius: 11px;
}

.customer-ticket-success > i {
    font-size: 16px;
}

.customer-ticket-success strong {
    display: block;

    font-size: 10px;
}

.customer-ticket-success span {
    display: block;

    margin-top: 1px;

    color: #5d876e;

    font-size: 9px;
}


/* =========================================================
   CONVERSATION CARD
========================================================= */

.customer-conversation-card {
    overflow: hidden;

    background: #fff;

    border: 1px solid #dfe7ef;
    border-radius: 16px;

    box-shadow:
        0 12px 35px rgba(31,55,88,.06);
}

.customer-conversation-head {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 20px 23px;

    border-bottom: 1px solid #e8edf3;
}

.customer-conversation-head span {
    color: #287ee8;

    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1px;
}

.customer-conversation-head h2 {
    margin-top: 2px;

    color: #17253a;

    font-size: 18px;
}

.customer-conversation-count {
    display: flex;
    align-items: center;
    gap: 6px;

    padding: 6px 10px;

    color: #77889d;
    background: #f3f6f9;

    border-radius: 20px;

    font-size: 8px;
    font-weight: 700;
}


/* =========================================================
   MESSAGES
========================================================= */

.customer-conversation-messages {
    max-height: 650px;
    overflow-y: auto;

    padding: 28px 25px;

    background:
        linear-gradient(
            180deg,
            #fbfcfe,
            #f7f9fc
        );

    scroll-behavior: smooth;
}

.customer-message-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;

    margin-bottom: 24px;
}

.customer-message-row:last-child {
    margin-bottom: 0;
}


/* CUSTOMER RIGHT */

.message-customer {
    flex-direction: row-reverse;
}

.message-customer .customer-message-content {
    align-items: flex-end;
}

.message-customer .customer-message-meta {
    justify-content: flex-end;
}


/* AVATAR */

.customer-message-avatar {
    width: 34px;
    height: 34px;

    flex: 0 0 34px;

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

    color: #fff;

    background:
        linear-gradient(
            135deg,
            #315f8d,
            #477eaf
        );

    border-radius: 9px;

    font-size: 11px;
    font-weight: 800;
}

.message-admin .customer-message-avatar {
    color: #477eaf;
    background: #eaf3fc;
}


/* CONTENT */

.customer-message-content {
    display: flex;
    flex-direction: column;

    max-width: 75%;
}

.customer-message-meta {
    display: flex;
    align-items: center;
    gap: 7px;

    margin-bottom: 5px;
}

.customer-message-meta strong {
    color: #34465c;

    font-size: 9px;
}

.customer-message-meta time {
    color: #9ba7b5;

    font-size: 7px;
}

.support-team-badge {
    padding: 2px 5px;

    color: #287ee8 !important;
    background: #eaf3fd;

    border-radius: 4px;

    font-size: 6px !important;
    font-weight: 800;
    letter-spacing: .5px;
}


/* BUBBLES */

.customer-message-bubble {
    padding: 12px 14px;

    color: #536378;
    background: #fff;

    border: 1px solid #dfe7ef;
    border-radius: 4px 13px 13px 13px;

    box-shadow:
        0 4px 13px rgba(31,55,88,.035);

    font-size: 11px;
    line-height: 1.7;

    word-break: break-word;
}

.message-customer .customer-message-bubble {
    color: #fff;

    background:
        linear-gradient(
            135deg,
            #315f8d,
            #477eaf
        );

    border: 0;

    border-radius: 13px 4px 13px 13px;

    box-shadow:
        0 5px 16px rgba(49,95,141,.15);
}


/* =========================================================
   REPLY
========================================================= */

.customer-reply-area {
    padding: 22px 24px;

    border-top: 1px solid #e6ecf2;
}

.customer-reply-area form {
    display: grid;
    gap: 8px;
}

.customer-reply-area label {
    color: #43536a;

    font-size: 9px;
    font-weight: 800;
}

.customer-reply-area textarea {
    width: 100%;
    min-height: 110px;

    padding: 13px;

    resize: vertical;

    color: #34455a;
    background: #f6f8fb;

    border: 1px solid #dce5ef;
    border-radius: 10px;

    outline: none;

    font-family: inherit;
    font-size: 11px;
    line-height: 1.7;
}

.customer-reply-area textarea:focus {
    background: #fff;

    border-color: #6da6e5;

    box-shadow:
        0 0 0 3px rgba(78,154,255,.09);
}

.customer-reply-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;

    margin-top: 3px;
}

.customer-reply-footer > span {
    display: flex;
    align-items: center;
    gap: 6px;

    color: #94a0ae;

    font-size: 8px;
}

.customer-reply-footer > span i {
    color: #668fbb;
}

.customer-reply-footer button {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    padding: 10px 15px;

    border: 0;
    border-radius: 8px;

    color: #fff;

    background:
        linear-gradient(
            135deg,
            #315f8d,
            #477eaf
        );

    font-family: inherit;
    font-size: 9px;
    font-weight: 800;

    cursor: pointer;

    box-shadow:
        0 5px 15px rgba(49,95,141,.18);
}


/* =========================================================
   CLOSED
========================================================= */

.customer-ticket-closed-notice {
    display: flex;
    align-items: center;
    gap: 12px;

    margin: 20px;
    padding: 16px;

    color: #687789;
    background: #f2f4f7;

    border: 1px solid #e0e5ea;
    border-radius: 10px;
}

.customer-ticket-closed-notice > i {
    width: 35px;
    height: 35px;

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

    background: #e5e9ee;

    border-radius: 8px;
}

.customer-ticket-closed-notice strong {
    display: block;

    color: #4d5b6b;

    font-size: 10px;
}

.customer-ticket-closed-notice span {
    display: block;

    margin-top: 2px;

    font-size: 9px;
}


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

.customer-ticket-sidebar {
    display: grid;
    gap: 14px;
}


/* INFO */

.customer-ticket-info-card {
    overflow: hidden;

    background: #fff;

    border: 1px solid #dfe7ef;
    border-radius: 14px;
}

.customer-ticket-info-head {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 15px 17px;

    border-bottom: 1px solid #e9edf2;
}

.customer-ticket-info-head span {
    color: #627389;

    font-size: 8px;
    font-weight: 800;
    letter-spacing: .8px;
}

.customer-ticket-info-head i {
    color: #5590ce;
    font-size: 11px;
}

.customer-ticket-info-list {
    padding: 5px 17px;
}

.customer-ticket-info-list > div {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;

    padding: 11px 0;

    border-bottom: 1px solid #eef2f5;
}

.customer-ticket-info-list > div:last-child {
    border-bottom: 0;
}

.customer-ticket-info-list span {
    color: #909cac;

    font-size: 8px;
}

.customer-ticket-info-list strong {
    color: #45566c;

    text-align: right;

    font-size: 8px;
}


/* PRIORITY */

.priority-low {
    color: #718095 !important;
}

.priority-normal {
    color: #3977b6 !important;
}

.priority-high {
    color: #c67b23 !important;
}

.priority-urgent {
    color: #c34848 !important;
}


/* =========================================================
   SERVICE CARD
========================================================= */

.customer-ticket-service-card {
    padding: 18px;

    background: #fff;

    border: 1px solid #dfe7ef;
    border-radius: 14px;
}

.customer-ticket-service-card > span {
    color: #287ee8;

    font-size: 7px;
    font-weight: 800;
    letter-spacing: .8px;
}

.customer-ticket-service-icon {
    width: 37px;
    height: 37px;

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

    margin-top: 13px;

    color: #347fc9;
    background: #edf5fd;

    border-radius: 9px;
}

.customer-ticket-service-card h3 {
    margin-top: 11px;

    color: #27384d;

    font-size: 12px;
}

.customer-ticket-service-card p {
    margin-top: 2px;

    color: #8a97a7;

    font-size: 8px;
}

.customer-ticket-service-card > div:not(.customer-ticket-service-icon) {
    display: flex;
    align-items: center;
    gap: 6px;

    margin-top: 12px;

    color: #68798d;

    font-size: 8px;
}

.customer-ticket-service-card > div i {
    color: #4788cb;
}

.customer-ticket-service-card > a {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-top: 15px;
    padding-top: 12px;

    color: #287ee8;

    border-top: 1px solid #edf1f5;

    text-decoration: none;

    font-size: 8px;
    font-weight: 800;
}


/* BACK */

.customer-ticket-back {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    padding: 11px;

    color: #68798d;
    background: #fff;

    border: 1px solid #dfe7ef;
    border-radius: 10px;

    text-decoration: none;

    font-size: 8px;
    font-weight: 800;
}


/* EMPTY */

.customer-empty-conversation {
    padding: 50px 20px;

    text-align: center;

    color: #8795a6;
}

.customer-empty-conversation i {
    font-size: 25px;
}

.customer-empty-conversation p {
    margin-top: 8px;

    font-size: 9px;
}


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

@media (max-width: 900px) {

    .customer-ticket-detail-layout {
        grid-template-columns: 1fr;
    }

    .customer-ticket-sidebar {
        grid-template-columns: 1fr 1fr;
    }

    .customer-ticket-back {
        grid-column: 1 / -1;
    }

}

@media (max-width: 650px) {

    .customer-ticket-hero-layout {
        flex-direction: column;
        align-items: flex-start;
    }

    .customer-ticket-sidebar {
        grid-template-columns: 1fr;
    }

    .customer-ticket-back {
        grid-column: auto;
    }

    .customer-message-content {
        max-width: 85%;
    }

    .customer-message-meta {
        flex-wrap: wrap;
    }

    .customer-reply-footer {
        align-items: stretch;
        flex-direction: column;
    }

    .customer-reply-footer button {
        justify-content: center;
        width: 100%;
    }

}

/* =========================================================
   SUPPORT LIST
========================================================= */

.customer-support-list-page {
    min-height: 100vh;
    background: #f2f5f9;
}


/* HERO */

.customer-support-list-hero {
    position: relative;
    overflow: hidden;

    padding: 45px 0 70px;

    background:
        radial-gradient(
            circle at 80% 20%,
            rgba(78,154,255,.16),
            transparent 30%
        ),
        radial-gradient(
            circle at 10% 100%,
            rgba(124,58,237,.08),
            transparent 30%
        ),
        #0a1220;
}

.customer-support-list-hero > .container {
    position: relative;
    z-index: 2;
}

.customer-support-list-hero-inner {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 30px;
}

.customer-support-list-hero h1 {
    margin-top: 14px;

    color: #fff;

    font-size: clamp(31px, 4vw, 44px);
    line-height: 1.1;
}

.customer-support-list-hero h1 span {
    color: #58a0f2;
}

.customer-support-list-hero p {
    max-width: 620px;

    margin-top: 10px;

    color: #91a2b8;

    font-size: 11px;
    line-height: 1.7;
}

.customer-support-hero-button {
    flex: 0 0 auto;

    display: inline-flex;
    align-items: center;
    gap: 8px;

    padding: 12px 17px;

    color: #fff;

    background:
        linear-gradient(
            135deg,
            #315f8d,
            #477eaf
        );

    border: 1px solid rgba(255,255,255,.08);
    border-radius: 9px;

    text-decoration: none;

    font-size: 9px;
    font-weight: 800;

    box-shadow:
        0 8px 22px rgba(0,0,0,.15);

    transition: .2s;
}

.customer-support-hero-button:hover {
    transform: translateY(-2px);
}


/* =========================================================
   CONTENT
========================================================= */

.customer-support-list-content {
    padding: 0 0 100px;
}


/* STATS */

.customer-support-list-stats {
    position: relative;
    z-index: 5;

    display: grid;
    grid-template-columns: repeat(4, 1fr);

    gap: 14px;

    margin-top: -27px;
    margin-bottom: 55px;
}

.customer-support-list-stats > div {
    display: flex;
    align-items: center;
    gap: 13px;

    min-height: 90px;

    padding: 17px;

    background: #fff;

    border: 1px solid #dfe7ef;
    border-radius: 13px;

    box-shadow:
        0 12px 30px rgba(31,55,88,.07);
}

.customer-support-list-stats > div > i {
    width: 40px;
    height: 40px;

    flex: 0 0 40px;

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

    color: #377fc8;
    background: #edf5fd;

    border-radius: 10px;

    font-size: 13px;
}

.customer-support-list-stats small {
    display: block;

    color: #8e9baa;

    font-size: 7px;
    font-weight: 800;
    letter-spacing: .8px;
}

.customer-support-list-stats strong {
    display: block;

    margin-top: 2px;

    color: #17253a;

    font-size: 18px;
}


/* =========================================================
   HEAD
========================================================= */

.customer-support-list-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 25px;

    margin-bottom: 20px;
}

.customer-support-list-head > div:first-child > span {
    color: #287ee8;

    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1px;
}

.customer-support-list-head h2 {
    margin-top: 3px;

    color: #17253a;

    font-size: 24px;
}

.customer-support-list-head p {
    margin-top: 4px;

    color: #8390a1;

    font-size: 10px;
}


/* FILTER */

.customer-support-filters {
    display: flex;
    align-items: center;
    gap: 5px;

    padding: 4px;

    background: #e8edf3;

    border-radius: 9px;
}

.customer-support-filters a {
    padding: 7px 11px;

    color: #758599;

    border-radius: 6px;

    text-decoration: none;

    font-size: 8px;
    font-weight: 800;

    transition: .2s;
}

.customer-support-filters a:hover {
    color: #315f8d;
}

.customer-support-filters a.active {
    color: #315f8d;
    background: #fff;

    box-shadow:
        0 2px 7px rgba(31,55,88,.08);
}


/* =========================================================
   LIST
========================================================= */

.customer-support-ticket-list {
    overflow: hidden;

    background: #fff;

    border: 1px solid #dfe7ef;
    border-radius: 15px;

    box-shadow:
        0 10px 30px rgba(31,55,88,.05);
}

.customer-support-ticket-item {
    display: grid;

    grid-template-columns:
        42px
        minmax(250px, 1fr)
        75px
        60px
        105px
        110px
        12px;

    align-items: center;

    gap: 14px;

    padding: 17px 19px;

    color: inherit;

    text-decoration: none;

    border-bottom: 1px solid #edf1f5;

    transition:
        background .2s,
        padding-left .2s;
}

.customer-support-ticket-item:last-child {
    border-bottom: 0;
}

.customer-support-ticket-item:hover {
    background: #f8fafc;
    padding-left: 22px;
}


/* ICON */

.customer-support-ticket-icon {
    position: relative;

    width: 38px;
    height: 38px;

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

    color: #397fc5;
    background: #edf5fd;

    border-radius: 9px;

    font-size: 12px;
}

.customer-support-ticket-icon > span {
    position: absolute;

    top: -2px;
    right: -2px;

    width: 8px;
    height: 8px;

    background: #e05050;

    border: 2px solid #fff;
    border-radius: 50%;
}


/* MAIN */

.customer-support-ticket-number {
    display: flex;
    align-items: center;
    gap: 7px;

    color: #8190a3;

    font-size: 7px;
    font-weight: 800;
}

.customer-support-ticket-main h3 {
    margin-top: 3px;

    color: #28394e;

    font-size: 11px;
    font-weight: 700;
}

.customer-support-new-message {
    padding: 2px 5px;

    color: #287ee8 !important;
    background: #eaf3fd;

    border-radius: 4px;

    font-size: 6px !important;
    letter-spacing: .5px;
}

.customer-support-ticket-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 10px;

    margin-top: 6px;
}

.customer-support-ticket-meta span {
    display: inline-flex;
    align-items: center;
    gap: 4px;

    color: #93a0af;

    font-size: 7px;
}

.customer-support-ticket-meta i {
    color: #6093c8;
}


/* COLUMNS */

.customer-support-ticket-column small {
    display: block;

    color: #a0aab7;

    font-size: 6px;
    font-weight: 800;
    letter-spacing: .5px;
}

.customer-support-ticket-column strong {
    display: block;

    margin-top: 3px;

    color: #596a7e;

    font-size: 8px;
    font-weight: 700;
}

.customer-support-ticket-column strong i {
    margin-right: 3px;

    color: #6c94bd;
}


/* STATUS */

.customer-support-ticket-status-column {
    display: flex;
    justify-content: flex-start;
}

.customer-support-ticket-item > i {
    color: #a8b3c0;

    font-size: 7px;

    transition: transform .2s;
}

.customer-support-ticket-item:hover > i {
    transform: translateX(3px);
}


/* =========================================================
   EMPTY
========================================================= */

.customer-support-list-empty {
    padding: 70px 25px;

    text-align: center;

    background: #fff;

    border: 1px solid #dfe7ef;
    border-radius: 15px;
}

.customer-support-list-empty > div {
    width: 55px;
    height: 55px;

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

    margin: 0 auto;

    color: #4d8bca;
    background: #edf5fd;

    border-radius: 14px;

    font-size: 20px;
}

.customer-support-list-empty h3 {
    margin-top: 15px;

    color: #28394e;

    font-size: 15px;
}

.customer-support-list-empty p {
    max-width: 480px;

    margin: 6px auto 17px;

    color: #8492a4;

    font-size: 9px;
    line-height: 1.6;
}

.customer-support-list-empty > a {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    padding: 10px 14px;

    color: #fff;
    background: #315f8d;

    border-radius: 8px;

    text-decoration: none;

    font-size: 8px;
    font-weight: 800;
}


/* BACK */

.customer-support-list-back {
    margin-top: 17px;
}

.customer-support-list-back a {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    color: #718196;

    text-decoration: none;

    font-size: 8px;
    font-weight: 800;
}


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

@media (max-width: 1050px) {

    .customer-support-ticket-item {
        grid-template-columns:
            42px
            minmax(200px,1fr)
            70px
            90px
            12px;
    }

    .customer-support-ticket-column:nth-of-type(2) {
        display: none;
    }

    .customer-support-ticket-column:nth-of-type(3) {
        display: none;
    }

}


@media (max-width: 800px) {

    .customer-support-list-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    .customer-support-list-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .customer-support-list-hero-inner {
        align-items: flex-start;
        flex-direction: column;
    }

}


@media (max-width: 650px) {

    .customer-support-list-stats {
        grid-template-columns: 1fr 1fr;
    }

    .customer-support-ticket-item {
        grid-template-columns: 38px 1fr auto;

        gap: 10px;

        padding: 15px;
    }

    .customer-support-ticket-column {
        display: none !important;
    }

    .customer-support-ticket-status-column {
        grid-column: 2;
    }

    .customer-support-ticket-item > i {
        grid-column: 3;
        grid-row: 1 / 3;
    }

    .customer-support-filters {
        width: 100%;
        overflow-x: auto;
    }

    .customer-support-filters a {
        flex: 0 0 auto;
    }

}

/* =========================================================
   LOGOUT CONFIRM MODAL
========================================================= */

.logout-modal-overlay {
    position: fixed;
    inset: 0;

    z-index: 99999;

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

    padding: 20px;

    background: rgba(7, 15, 28, .68);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition:
        opacity .22s ease,
        visibility .22s ease;
}

.logout-modal-overlay.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}


.logout-modal {
    position: relative;

    width: 100%;
    max-width: 430px;

    padding: 38px 34px 30px;

    border: 1px solid #e3e9f0;
    border-radius: 20px;

    background: #fff;

    text-align: center;

    box-shadow:
        0 30px 80px rgba(7, 15, 28, .28);

    transform: translateY(15px) scale(.97);

    transition: transform .22s ease;
}

.logout-modal-overlay.active .logout-modal {
    transform: translateY(0) scale(1);
}


/* ICON */

.logout-modal-icon {
    width: 68px;
    height: 68px;

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

    margin: 0 auto 20px;

    border-radius: 18px;

    background:
        linear-gradient(
            135deg,
            rgba(220, 53, 69, .10),
            rgba(220, 53, 69, .18)
        );

    color: #dc3545;

    font-size: 27px;
}


/* TITLE */

.logout-modal h3 {
    margin: 0 0 10px;

    color: #17253a;

    font-size: 21px;
    font-weight: 800;
}


/* TEXT */

.logout-modal p {
    margin: 0 auto 25px;

    max-width: 330px;

    color: #6d7c8f;

    font-size: 14px;
    line-height: 1.65;
}


/* CLOSE */

.logout-modal-close {
    position: absolute;

    top: 15px;
    right: 15px;

    width: 34px;
    height: 34px;

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

    border: 0;
    border-radius: 9px;

    background: #f3f6f9;
    color: #7b8998;

    cursor: pointer;

    font-size: 15px;

    transition: all .2s ease;
}

.logout-modal-close:hover {
    background: #e9eef4;
    color: #17253a;
}


/* BUTTON AREA */

.logout-modal-actions {
    display: flex;
    gap: 12px;
}


/* CANCEL */

.logout-cancel {
    flex: 1;

    min-height: 46px;

    border: 1px solid #dce3ea;
    border-radius: 11px;

    background: #f6f8fa;
    color: #526276;

    font-family: inherit;
    font-size: 13px;
    font-weight: 700;

    cursor: pointer;

    transition: all .2s ease;
}

.logout-cancel:hover {
    background: #edf1f5;
    color: #17253a;
}


/* CONFIRM */

.logout-confirm {
    flex: 1.25;

    min-height: 46px;

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

    gap: 8px;

    border-radius: 11px;

    background:
        linear-gradient(
            135deg,
            #dc3545,
            #c82333
        );

    color: #fff;

    text-decoration: none;

    font-size: 13px;
    font-weight: 700;

    box-shadow:
        0 8px 20px rgba(220, 53, 69, .20);

    transition: all .2s ease;
}

.logout-confirm:hover {
    color: #fff;

    transform: translateY(-1px);

    box-shadow:
        0 11px 24px rgba(220, 53, 69, .28);
}


/* MOBILE */

@media (max-width: 520px) {

    .logout-modal {
        padding:
            35px
            22px
            24px;
    }

    .logout-modal-actions {
        flex-direction: column;
    }

    .logout-confirm,
    .logout-cancel {
        width: 100%;
        flex: none;
    }

}

/* =========================================================
   SUBSCRIPTION DETAIL
========================================================= */

.subscription-detail-hero {
    position: relative;
    overflow: hidden;

    padding: 54px 0 58px;

    background:
        linear-gradient(
            135deg,
            #0b1628 0%,
            #101e34 55%,
            #111a31 100%
        );
}

.subscription-detail-grid {
    position: absolute;
    inset: 0;

    opacity: .08;

    background-image:
        linear-gradient(
            rgba(255,255,255,.12) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.12) 1px,
            transparent 1px
        );

    background-size: 38px 38px;
}

.subscription-detail-glow {
    position: absolute;

    width: 500px;
    height: 500px;

    right: -150px;
    top: -250px;

    border-radius: 50%;

    background:
        rgba(63, 117, 255, .20);

    filter: blur(80px);
}

.subscription-detail-hero-inner {
    position: relative;
    z-index: 2;
}


/* BREADCRUMB */

.subscription-detail-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 9px;

    margin-bottom: 30px;

    font-size: 11px;
    font-weight: 600;
}

.subscription-detail-breadcrumb a {
    display: inline-flex;
    align-items: center;

    gap: 6px;

    color: #9aacc3;

    text-decoration: none;
}

.subscription-detail-breadcrumb a:hover {
    color: #fff;
}

.subscription-detail-breadcrumb > i {
    color: #53657d;

    font-size: 8px;
}

.subscription-detail-breadcrumb span {
    color: #dce7f5;
}


/* HERO PRODUCT */

.subscription-detail-hero-content {
    display: flex;
    align-items: center;

    gap: 22px;
}

.subscription-detail-product-icon {
    width: 76px;
    height: 76px;

    flex: 0 0 76px;

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

    border: 1px solid rgba(94, 153, 255, .22);
    border-radius: 20px;

    background:
        linear-gradient(
            135deg,
            rgba(57, 125, 255, .20),
            rgba(121, 74, 255, .14)
        );

    color: #75a9ff;

    font-size: 29px;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08);
}

.subscription-detail-title > span {
    display: block;

    margin-bottom: 6px;

    color: #6f98d2;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 1.7px;
}

.subscription-detail-title h1 {
    margin: 0 0 12px;

    color: #fff;

    font-size: clamp(27px, 4vw, 40px);
    line-height: 1.15;

    font-weight: 800;
}

.subscription-detail-hero-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 10px;
}

.subscription-detail-status {
    display: inline-flex;
    align-items: center;

    gap: 6px;

    padding: 6px 10px;

    border-radius: 20px;

    font-size: 10px;
    font-weight: 700;
}

.subscription-detail-status i {
    font-size: 6px;
}

.subscription-detail-status.is-active {
    background: rgba(38, 194, 129, .12);
    color: #67dfa9;
}

.subscription-detail-status.is-pending {
    background: rgba(245, 181, 66, .12);
    color: #f5c768;
}

.subscription-detail-status.is-suspended {
    background: rgba(244, 139, 45, .12);
    color: #f3aa67;
}

.subscription-detail-status.is-cancelled,
.subscription-detail-status.is-expired {
    background: rgba(232, 84, 101, .12);
    color: #ef8793;
}

.subscription-detail-id {
    color: #8092aa;

    font-size: 11px;
}


/* =========================================================
   PAGE
========================================================= */

.subscription-detail-section {
    padding: 52px 0 75px;

    background: #f4f6f8;
}

.subscription-detail-layout {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        330px;

    gap: 25px;

    align-items: start;
}


/* =========================================================
   MAIN CARDS
========================================================= */

.subscription-detail-main {
    display: flex;
    flex-direction: column;

    gap: 20px;
}

.subscription-detail-card {
    overflow: hidden;

    padding: 27px;

    border: 1px solid #e1e7ed;
    border-radius: 16px;

    background: #fff;

    box-shadow:
        0 8px 28px rgba(25, 39, 60, .045);
}

.subscription-detail-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    margin-bottom: 25px;
    padding-bottom: 18px;

    border-bottom: 1px solid #edf0f3;
}

.subscription-detail-card-head span {
    display: block;

    margin-bottom: 3px;

    color: #6d8eb7;

    font-size: 9px;
    font-weight: 800;

    letter-spacing: 1.5px;
}

.subscription-detail-card-head h2 {
    margin: 0;

    color: #17253a;

    font-size: 20px;
    font-weight: 800;
}

.subscription-detail-card-head > i {
    color: #90a4bc;

    font-size: 19px;
}


/* INFO GRID */

.subscription-detail-info-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 13px;
}

.subscription-detail-info {
    min-width: 0;

    display: flex;
    align-items: center;

    gap: 13px;

    padding: 16px;

    border: 1px solid #edf0f3;
    border-radius: 12px;

    background: #fafbfc;
}

.subscription-info-icon {
    width: 39px;
    height: 39px;

    flex: 0 0 39px;

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

    border-radius: 10px;

    background: #edf4ff;
    color: #397ee8;

    font-size: 14px;
}

.subscription-detail-info > div:last-child {
    min-width: 0;
}

.subscription-detail-info small {
    display: block;

    margin-bottom: 3px;

    color: #8794a4;

    font-size: 10px;
    font-weight: 600;
}

.subscription-detail-info strong {
    display: block;

    overflow-wrap: anywhere;

    color: #28384d;

    font-size: 13px;
    font-weight: 700;
}

.subscription-description {
    color: #59697d;

    font-size: 14px;
    line-height: 1.85;
}


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

.subscription-detail-sidebar {
    display: flex;
    flex-direction: column;

    gap: 17px;
}

.subscription-side-card {
    padding: 23px;

    border: 1px solid #e1e7ed;
    border-radius: 16px;

    background: #fff;

    box-shadow:
        0 8px 28px rgba(25, 39, 60, .045);
}

.subscription-side-status {
    padding-bottom: 18px;

    border-bottom: 1px solid #edf0f3;
}

.subscription-side-status > span {
    display: block;

    margin-bottom: 8px;

    color: #8b98a8;

    font-size: 9px;
    font-weight: 800;

    letter-spacing: 1.3px;
}

.subscription-side-status strong {
    display: inline-flex;
    align-items: center;

    gap: 7px;

    font-size: 14px;
}

.subscription-side-status strong i {
    font-size: 7px;
}

.subscription-side-status strong.is-active {
    color: #179f68;
}

.subscription-side-status strong.is-pending {
    color: #d5941e;
}

.subscription-side-status strong.is-suspended {
    color: #dd781d;
}

.subscription-side-status strong.is-cancelled,
.subscription-side-status strong.is-expired {
    color: #d84b5c;
}


/* REMAINING */

.subscription-renewal {
    margin: 18px 0;

    padding: 15px;

    border-radius: 11px;

    background: #f1f7ff;
}

.subscription-renewal small {
    display: block;

    margin-bottom: 3px;

    color: #75879d;

    font-size: 10px;
}

.subscription-renewal strong {
    color: #286dcc;

    font-size: 23px;
    font-weight: 800;
}

.subscription-renewal strong span {
    font-size: 11px;
    font-weight: 700;
}

.subscription-renewal.renewal-warning {
    background: #fff7e9;
}

.subscription-renewal.renewal-warning strong {
    color: #d78613;
}


/* ROW */

.subscription-side-row {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;

    padding: 13px 0;

    border-bottom: 1px solid #edf0f3;

    font-size: 11px;
}

.subscription-side-row:last-child {
    padding-bottom: 0;

    border-bottom: 0;
}

.subscription-side-row span {
    color: #8390a0;
}

.subscription-side-row strong {
    color: #344459;

    font-weight: 700;
}


/* =========================================================
   PRICE
========================================================= */

.subscription-price-card > span {
    display: block;

    margin-bottom: 8px;

    color: #8190a2;

    font-size: 9px;
    font-weight: 800;

    letter-spacing: 1.3px;
}

.subscription-price {
    color: #17253a;

    font-size: 29px;
    font-weight: 800;
}

.subscription-price small {
    color: #65768a;

    font-size: 12px;
}

.subscription-price-card p {
    margin: 4px 0 0;

    color: #8491a0;

    font-size: 11px;
}


/* =========================================================
   SUPPORT
========================================================= */

.subscription-support-card {
    padding: 25px;

    border-radius: 17px;

    background:
        linear-gradient(
            145deg,
            #101e34,
            #162944
        );

    color: #fff;
}

.subscription-support-icon {
    width: 43px;
    height: 43px;

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

    margin-bottom: 18px;

    border-radius: 11px;

    background: rgba(81, 145, 255, .15);
    color: #75a9ff;

    font-size: 17px;
}

.subscription-support-card > span {
    display: block;

    margin-bottom: 6px;

    color: #7095c5;

    font-size: 8px;
    font-weight: 800;

    letter-spacing: 1.3px;
}

.subscription-support-card h3 {
    margin: 0 0 9px;

    color: #fff;

    font-size: 17px;
    line-height: 1.4;
}

.subscription-support-card p {
    margin: 0 0 18px;

    color: #9cafc7;

    font-size: 11px;
    line-height: 1.7;
}

.subscription-support-card a {
    display: inline-flex;
    align-items: center;

    gap: 8px;

    color: #79adff;

    text-decoration: none;

    font-size: 11px;
    font-weight: 700;
}

.subscription-support-card a:hover {
    color: #fff;
}


/* BACK */

.subscription-profile-back {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    min-height: 43px;

    border: 1px solid #dce3ea;
    border-radius: 11px;

    background: #fff;

    color: #56677a;

    text-decoration: none;

    font-size: 11px;
    font-weight: 700;

    transition: all .2s ease;
}

.subscription-profile-back:hover {
    border-color: #bfcbd8;

    color: #1e3047;
}


/* =========================================================
   404
========================================================= */

.subscription-error-section {
    min-height: 65vh;

    display: flex;
    align-items: center;

    padding: 70px 0;

    background: #f4f6f8;
}

.subscription-error-card {
    max-width: 520px;

    margin: auto;
    padding: 45px 30px;

    border: 1px solid #e0e6ec;
    border-radius: 18px;

    background: #fff;

    text-align: center;

    box-shadow:
        0 15px 45px rgba(25,39,60,.07);
}

.subscription-error-icon {
    margin-bottom: 15px;

    color: #d85868;

    font-size: 40px;
}

.subscription-error-card h1 {
    margin: 0 0 10px;

    color: #17253a;

    font-size: 25px;
}

.subscription-error-card p {
    margin: 0 0 25px;

    color: #718095;

    font-size: 13px;
}

.subscription-back-button {
    display: inline-flex;
    align-items: center;

    gap: 8px;

    padding: 11px 17px;

    border-radius: 10px;

    background: #276fd3;

    color: #fff;

    text-decoration: none;

    font-size: 12px;
    font-weight: 700;
}


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

@media (max-width: 900px) {

    .subscription-detail-layout {
        grid-template-columns: 1fr;
    }

    .subscription-detail-sidebar {
        display: grid;

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

    .subscription-profile-back {
        grid-column: 1 / -1;
    }

}


@media (max-width: 650px) {

    .subscription-detail-hero {
        padding:
            38px 0
            43px;
    }

    .subscription-detail-hero-content {
        align-items: flex-start;
    }

    .subscription-detail-product-icon {
        width: 58px;
        height: 58px;

        flex-basis: 58px;

        border-radius: 15px;

        font-size: 22px;
    }

    .subscription-detail-info-grid {
        grid-template-columns: 1fr;
    }

    .subscription-detail-sidebar {
        display: flex;
    }

    .subscription-detail-card {
        padding: 21px;
    }

}

/* =========================================================
   HOSTING PANEL CARD
========================================================= */

.subscription-hosting-panel-card {
    padding: 26px;

    border: 1px solid #dfe7f0;
    border-radius: 18px;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f6f9fc
        );

    box-shadow:
        0 15px 40px
        rgba(22, 39, 63, .07);

    margin-bottom: 20px;
}


.subscription-hosting-panel-icon {
    width: 52px;
    height: 52px;

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

    margin-bottom: 18px;

    border-radius: 14px;

    background:
        linear-gradient(
            135deg,
            #287ee8,
            #6657e8
        );

    color: #fff;

    font-size: 21px;

    box-shadow:
        0 10px 24px
        rgba(40, 126, 232, .22);
}


.subscription-hosting-panel-card > span {
    display: block;

    margin-bottom: 7px;

    color: #287ee8;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 1.2px;
}


.subscription-hosting-panel-card h3 {
    margin: 0 0 10px;

    color: #17253a;

    font-size: 18px;
    font-weight: 800;
}


.subscription-hosting-panel-card p {
    margin: 0 0 20px;

    color: #68798c;

    font-size: 13px;
    line-height: 1.65;
}


.subscription-hosting-panel-button {
    width: 100%;
    min-height: 46px;

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

    gap: 9px;

    border-radius: 11px;

    background:
        linear-gradient(
            135deg,
            #287ee8,
            #6657e8
        );

    color: #fff;

    text-decoration: none;

    font-size: 13px;
    font-weight: 700;

    transition:
        transform .2s ease,
        box-shadow .2s ease;
}


.subscription-hosting-panel-button:hover {
    color: #fff;

    transform: translateY(-1px);

    box-shadow:
        0 10px 25px
        rgba(40, 126, 232, .24);
}


.hosting-panel-unavailable {
    display: flex;
    align-items: center;

    gap: 8px;

    padding: 11px 13px;

    border-radius: 9px;

    background: #f3f6f9;

    color: #738296;

    font-size: 12px;
    font-weight: 600;
}

/* ==========================================
   FOOTER ÜSTÜ BOŞLUK FIX
========================================== */

footer,
.site-footer,
.main-footer {
    margin-top: 0 !important;
}

main,
main > section:last-child {
    margin-bottom: 0 !important;
}

body > footer {
    margin-top: 0 !important;
}