/* ==========================================================================
   UMUTNET - Umutnet Yazılım & Web Tasarım DESIGN SYSTEM
   ========================================================================== */

:root {
    --site-primary: #0052cc;
    --site-primary-hover: #0747a6;
    --site-primary-light: #ebf3ff;
    --site-secondary: #0a2540;
    --site-accent: #00b8d9;
    --site-text: #2c3e50;
    --site-muted: #64748b;
    --site-light: #f8fafc;
    --site-border: #e2e8f0;
    --site-white: #ffffff;
    --site-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --site-heading-font: 'Manrope', 'Inter', sans-serif;
    --site-radius-sm: 8px;
    --site-radius-md: 12px;
    --site-radius-lg: 16px;
    --site-radius-xl: 24px;
    --site-shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
    --site-shadow-md: 0 4px 12px -2px rgba(0,0,0,0.08), 0 2px 6px -1px rgba(0,0,0,0.04);
    --site-shadow-lg: 0 12px 28px -4px rgba(10,37,64,0.12), 0 4px 12px -2px rgba(10,37,64,0.06);
    --site-shadow-hover: 0 20px 35px -8px rgba(0,82,204,0.15), 0 8px 16px -4px rgba(10,37,64,0.08);
}

/* Base Reset & Typography */
body.site-body {
    font-family: var(--site-font) !important;
    color: var(--site-text);
    background-color: var(--site-white);
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

.site-container {
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
}

/* ==========================================================================
   TOP BAR (Umutnet Corporate Topbar)
   ========================================================================== */
.site-topbar {
    background: #0d1e38;
    color: #94a3b8;
    font-size: 13px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    line-height: 38px;
}
.site-topbar-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.topbar-left, .topbar-right {
    display: flex;
    align-items: center;
    gap: 16px;
}
.topbar-badge {
    background: rgba(0,184,217,0.15);
    color: #38bdf8;
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 600;
    font-size: 11px;
}
.topbar-link {
    color: #cbd5e1;
    text-decoration: none;
    transition: color 0.2s ease;
}
.topbar-link:hover {
    color: #ffffff;
    text-decoration: none;
}
.topbar-text {
    color: #94a3b8;
}
.text-whatsapp {
    color: #25d366 !important;
}
.topbar-divider {
    display: inline-block;
    width: 1px;
    height: 14px;
    background: rgba(255,255,255,0.15);
}
.topbar-status {
    color: #94a3b8;
    display: flex;
    align-items: center;
    gap: 6px;
}
.status-pulse {
    width: 8px;
    height: 8px;
    background: #10b981;
    border-radius: 50%;
    display: inline-block;
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
    animation: pulseGlow 2s infinite;
}
@keyframes pulseGlow {
    0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
    70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

/* ==========================================================================
   MAIN HEADER (Umutnet Lagom Sticky Nav)
   ========================================================================== */
.site-header {
    background: var(--site-white);
    border-bottom: 1px solid var(--site-border);
    position: sticky;
    top: 0;
    z-index: 1030;
    box-shadow: var(--site-shadow-sm);
}
.site-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 74px;
}
.site-brand {
    text-decoration: none;
    display: flex;
    align-items: center;
}
.brand-logo-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
}
.brand-symbol {
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, var(--site-primary) 0%, #0080ff 100%);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    font-size: 20px;
    box-shadow: 0 4px 10px rgba(0,82,204,0.3);
}
.brand-text {
    display: flex;
    flex-direction: column;
}
.brand-name {
    font-family: var(--site-heading-font);
    font-weight: 800;
    font-size: 20px;
    color: var(--site-secondary);
    letter-spacing: -0.5px;
    line-height: 1.1;
}
.brand-name span {
    color: var(--site-primary);
}
.brand-tag {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.8px;
    color: var(--site-muted);
}

/* Menu */
.site-menu {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
}
.menu-item {
    position: relative;
}
.menu-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    font-size: 15px;
    font-weight: 600;
    color: var(--site-secondary);
    text-decoration: none;
    border-radius: var(--site-radius-sm);
    transition: all 0.2s ease;
}
.menu-link i {
    font-size: 11px;
    color: var(--site-muted);
    transition: transform 0.2s;
}
.menu-link:hover, .menu-item.has-dropdown:hover > .menu-link {
    color: var(--site-primary);
    background: var(--site-primary-light);
    text-decoration: none;
}
.menu-item.has-dropdown:hover > .menu-link i {
    transform: rotate(180deg);
}

/* Dropdown */
.dropdown-pane {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 300px;
    background: #ffffff;
    border: 1px solid var(--site-border);
    border-radius: var(--site-radius-md);
    box-shadow: var(--site-shadow-lg);
    padding: 12px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.2s ease;
    z-index: 1050;
}
.menu-item.has-dropdown:hover .dropdown-pane {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.drop-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 12px;
    border-radius: var(--site-radius-sm);
    text-decoration: none;
    transition: background 0.15s ease;
}
.drop-item:hover {
    background: var(--site-light);
    text-decoration: none;
}
.drop-icon {
    width: 36px;
    height: 36px;
    background: var(--site-primary-light);
    color: var(--site-primary);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}
.drop-title {
    font-weight: 600;
    font-size: 14px;
    color: var(--site-secondary);
    line-height: 1.2;
}
.drop-desc {
    font-size: 12px;
    color: var(--site-muted);
    margin-top: 2px;
}

/* Header Actions */
.site-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}
.btn-cart {
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--site-light);
    border: 1px solid var(--site-border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--site-secondary);
    text-decoration: none;
    transition: all 0.2s;
}
.btn-cart:hover {
    background: #e2e8f0;
    color: var(--site-primary);
    text-decoration: none;
}
.cart-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: var(--site-primary);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #fff;
}
.btn-login {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    font-size: 14px;
    font-weight: 600;
    color: var(--site-secondary);
    background: var(--site-light);
    border: 1px solid var(--site-border);
    border-radius: var(--site-radius-sm);
    text-decoration: none;
    transition: all 0.2s;
}
.btn-login:hover {
    background: #e2e8f0;
    color: var(--site-primary);
    text-decoration: none;
}
.btn-register, .btn-account {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    font-size: 14px;
    font-weight: 600;
    color: #ffffff;
    background: var(--site-primary);
    border-radius: var(--site-radius-sm);
    text-decoration: none;
    transition: all 0.2s;
    box-shadow: 0 2px 6px rgba(0,82,204,0.25);
}
.btn-register:hover, .btn-account:hover {
    background: var(--site-primary-hover);
    color: #fff;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(0,82,204,0.35);
}
.mobile-toggle {
    width: 40px;
    height: 40px;
    border: 1px solid var(--site-border);
    background: var(--site-light);
    border-radius: 8px;
    font-size: 18px;
    color: var(--site-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

/* Mobile Drawer */
.mobile-drawer {
    position: fixed;
    top: 0;
    right: -100%;
    width: 300px;
    height: 100%;
    background: #ffffff;
    box-shadow: -4px 0 20px rgba(0,0,0,0.15);
    z-index: 2000;
    transition: right 0.3s ease;
    display: flex;
    flex-direction: column;
}
.mobile-drawer.active {
    right: 0;
}
.drawer-header {
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--site-border);
}
.drawer-close {
    background: none;
    border: none;
    font-size: 20px;
    color: var(--site-muted);
    cursor: pointer;
}
.drawer-body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow-y: auto;
}
.drawer-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 8px;
    color: var(--site-secondary);
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
}
.drawer-link:hover {
    background: var(--site-light);
    color: var(--site-primary);
    text-decoration: none;
}

/* ==========================================================================
   HERO BANNER (Umutnet Lagom Type-1 Style)
   ========================================================================== */
.umutnet-hero {
    background: linear-gradient(180deg, #f0f4f9 0%, #ffffff 100%);
    padding: 60px 0 70px 0;
    position: relative;
    border-bottom: 1px solid var(--site-border);
}
.hero-grid {
    display: grid;
    grid-template-columns: 1.25fr 0.95fr;
    gap: 40px;
    align-items: center;
}
.hero-tag-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    background: #e0eaff;
    border: 1px solid #bfdbfe;
    border-radius: 30px;
    font-size: 13px;
    font-weight: 700;
    color: var(--site-primary);
    margin-bottom: 18px;
}
.badge-dot {
    width: 8px;
    height: 8px;
    background: var(--site-primary);
    border-radius: 50%;
}
.hero-title {
    font-family: var(--site-heading-font);
    font-size: 44px;
    font-weight: 800;
    color: var(--site-secondary);
    line-height: 1.18;
    margin: 0 0 16px 0;
    letter-spacing: -1px;
}
.text-highlight {
    color: var(--site-primary);
    position: relative;
}
.hero-desc {
    font-size: 17px;
    color: var(--site-muted);
    line-height: 1.6;
    margin-bottom: 30px;
    max-width: 580px;
}

/* Domain Search Bar */
.hero-domain-box {
    background: #ffffff;
    border: 1px solid var(--site-border);
    border-radius: var(--site-radius-lg);
    box-shadow: var(--site-shadow-md);
    padding: 16px;
    margin-bottom: 24px;
}
.domain-input-group {
    display: flex;
    align-items: center;
    background: var(--site-light);
    border: 1px solid var(--site-border);
    border-radius: var(--site-radius-md);
    padding: 4px 6px 4px 16px;
    transition: all 0.2s;
}
.domain-input-group:focus-within {
    border-color: var(--site-primary);
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(0,82,204,0.15);
}
.search-icon {
    color: var(--site-muted);
    font-size: 18px;
    margin-right: 12px;
}
.domain-input {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 16px;
    font-weight: 500;
    color: var(--site-secondary);
    outline: none;
    padding: 12px 0;
}
.btn-domain-search {
    background: var(--site-primary);
    color: #ffffff;
    border: none;
    padding: 12px 24px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s;
}
.btn-domain-search:hover {
    background: var(--site-primary-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,82,204,0.3);
}

.domain-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px dashed var(--site-border);
}
.d-badge-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--site-light);
    border: 1px solid var(--site-border);
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 13px;
}
.d-ext {
    font-weight: 800;
    color: var(--site-secondary);
}
.d-price {
    font-weight: 700;
    color: var(--site-primary);
}
.d-tag {
    background: #e0f2fe;
    color: #0284c7;
    font-size: 10px;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
}

/* Trust Bar */
.hero-trust-bar {
    display: flex;
    gap: 20px;
    color: var(--site-muted);
    font-size: 14px;
    font-weight: 600;
}
.trust-item i {
    color: #10b981;
    margin-right: 6px;
}

/* Hero Visual Card Stack */
.hero-visual {
    position: relative;
}
.hero-card-stack {
    position: relative;
    padding: 20px;
}
.hero-stat-card.card-main {
    background: #ffffff;
    border: 1px solid var(--site-border);
    border-radius: var(--site-radius-xl);
    padding: 36px 32px;
    box-shadow: var(--site-shadow-lg);
    position: relative;
    z-index: 2;
}
.hero-stat-card .stat-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(0,82,204,0.08);
    color: var(--site-primary);
    font-size: 12px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px;
    margin-bottom: 14px;
}
.hero-stat-card h3 {
    font-family: var(--site-heading-font);
    font-size: 26px;
    font-weight: 800;
    color: var(--site-secondary);
    margin: 0 0 10px 0;
}
.hero-stat-card p {
    color: var(--site-muted);
    font-size: 15px;
    line-height: 1.5;
    margin-bottom: 20px;
}
.mini-speed-bar {
    background: #f1f5f9;
    height: 10px;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 10px;
}
.mini-speed-bar .bar-fill {
    background: linear-gradient(90deg, #10b981, #00b8d9);
    height: 100%;
    border-radius: 10px;
}
.speed-label {
    font-size: 13px;
    font-weight: 700;
    color: var(--site-secondary);
}

.hero-stat-card.card-floating {
    position: absolute;
    bottom: -15px;
    right: 0px;
    background: #ffffff;
    border: 1px solid var(--site-border);
    border-radius: var(--site-radius-md);
    padding: 14px 20px;
    display: flex;
    align-items: center;
    gap: 14px;
    box-shadow: var(--site-shadow-hover);
    z-index: 3;
}
.card-floating .float-icon {
    width: 44px;
    height: 44px;
    background: #ecfdf5;
    color: #10b981;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}
.card-floating strong {
    display: block;
    font-size: 15px;
    color: var(--site-secondary);
}
.card-floating p {
    margin: 0;
    font-size: 12px;
    color: var(--site-muted);
}

/* ==========================================================================
   SERVICES NAV (Türkiye'nin Güvenilir Hizmetleri)
   ========================================================================== */
.section-services-nav {
    padding: 80px 0;
    background: #ffffff;
}
.section-heading {
    margin-bottom: 50px;
}
.sec-subtitle {
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--site-primary);
    display: inline-block;
    margin-bottom: 8px;
}
.sec-title {
    font-family: var(--site-heading-font);
    font-size: 36px;
    font-weight: 800;
    color: var(--site-secondary);
    margin: 0 0 12px 0;
    letter-spacing: -0.5px;
}
.sec-desc {
    font-size: 16px;
    color: var(--site-muted);
    max-width: 620px;
    margin: 0 auto;
    line-height: 1.6;
}

.services-nav-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 20px;
}
.srv-nav-card {
    background: #ffffff;
    border: 1px solid var(--site-border);
    border-radius: var(--site-radius-lg);
    padding: 28px 20px;
    text-decoration: none;
    color: var(--site-secondary);
    transition: all 0.25s ease;
    display: flex;
    flex-direction: column;
    box-shadow: var(--site-shadow-sm);
}
.srv-nav-card:hover {
    transform: translateY(-6px);
    border-color: #bfdbfe;
    box-shadow: var(--site-shadow-hover);
    text-decoration: none;
}
.srv-icon {
    width: 52px;
    height: 52px;
    background: var(--site-light);
    border: 1px solid var(--site-border);
    color: var(--site-primary);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin-bottom: 18px;
    transition: all 0.25s ease;
}
.srv-nav-card:hover .srv-icon {
    background: var(--site-primary);
    color: #ffffff;
    border-color: var(--site-primary);
}
.srv-title {
    font-family: var(--site-heading-font);
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 8px 0;
    color: var(--site-secondary);
}
.srv-desc {
    font-size: 13px;
    color: var(--site-muted);
    line-height: 1.5;
    margin: 0 0 16px 0;
    flex: 1;
}
.srv-link {
    font-size: 13px;
    font-weight: 700;
    color: var(--site-primary);
    display: flex;
    align-items: center;
    gap: 6px;
    transition: gap 0.2s ease;
}
.srv-nav-card:hover .srv-link {
    gap: 10px;
}

/* ==========================================================================
   STATS COUNTER BAND
   ========================================================================== */
.section-stats-band {
    background: #0a2540;
    color: #ffffff;
    padding: 55px 0;
}
.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    text-align: center;
}
.stat-col {
    padding: 0 15px;
    border-right: 1px solid rgba(255,255,255,0.1);
}
.stat-col:last-child {
    border-right: none;
}
.stat-num {
    font-family: var(--site-heading-font);
    font-size: 48px;
    font-weight: 800;
    color: #ffffff;
    line-height: 1;
    margin-bottom: 8px;
}
.stat-num .plus {
    color: #00b8d9;
}
.stat-label {
    font-size: 16px;
    font-weight: 700;
    color: #e2e8f0;
    margin-bottom: 4px;
}
.stat-sub {
    font-size: 13px;
    color: #94a3b8;
    margin: 0;
}

/* ==========================================================================
   HOSTING PACKAGES
   ========================================================================== */
.section-packages {
    padding: 90px 0;
    background: #f8fafc;
}
.packages-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    align-items: stretch;
}
.pkg-card {
    background: #ffffff;
    border: 1px solid var(--site-border);
    border-radius: var(--site-radius-xl);
    padding: 40px 32px;
    display: flex;
    flex-direction: column;
    box-shadow: var(--site-shadow-sm);
    transition: all 0.3s ease;
    position: relative;
}
.pkg-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--site-shadow-lg);
    border-color: #cbd5e1;
}
.pkg-card.popular {
    border: 2px solid var(--site-primary);
    box-shadow: var(--site-shadow-hover);
    transform: scale(1.02);
}
.pkg-card.popular:hover {
    transform: scale(1.02) translateY(-8px);
}
.popular-ribbon {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--site-primary);
    color: #ffffff;
    font-size: 12px;
    font-weight: 800;
    padding: 4px 18px;
    border-radius: 20px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}
.pkg-header {
    margin-bottom: 24px;
}
.pkg-badge {
    display: inline-block;
    background: var(--site-light);
    color: var(--site-muted);
    font-size: 12px;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 20px;
    margin-bottom: 12px;
}
.badge-popular {
    background: #ebf3ff;
    color: var(--site-primary);
}
.pkg-name {
    font-family: var(--site-heading-font);
    font-size: 24px;
    font-weight: 800;
    color: var(--site-secondary);
    margin: 0 0 8px 0;
}
.pkg-desc {
    font-size: 14px;
    color: var(--site-muted);
    line-height: 1.5;
    margin: 0 0 20px 0;
    min-height: 42px;
}
.pkg-price {
    display: flex;
    align-items: baseline;
    gap: 4px;
    margin-bottom: 10px;
}
.pkg-price .currency {
    font-size: 24px;
    font-weight: 700;
    color: var(--site-secondary);
}
.pkg-price .amount {
    font-family: var(--site-heading-font);
    font-size: 46px;
    font-weight: 800;
    color: var(--site-secondary);
    line-height: 1;
}
.pkg-price .period {
    font-size: 14px;
    color: var(--site-muted);
    font-weight: 600;
}

.pkg-features {
    flex: 1;
    margin: 20px 0 30px 0;
    border-top: 1px solid var(--site-border);
    padding-top: 24px;
}
.pkg-features ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.pkg-features li {
    font-size: 14px;
    color: var(--site-text);
    display: flex;
    align-items: center;
    gap: 10px;
}
.pkg-features li i {
    color: #10b981;
    font-size: 14px;
    flex-shrink: 0;
}

.btn-pkg {
    display: block;
    width: 100%;
    text-align: center;
    padding: 14px 20px;
    font-size: 15px;
    font-weight: 700;
    border-radius: var(--site-radius-md);
    background: var(--site-light);
    color: var(--site-secondary);
    border: 1px solid var(--site-border);
    text-decoration: none;
    transition: all 0.2s;
    box-sizing: border-box;
}
.btn-pkg:hover {
    background: var(--site-secondary);
    color: #ffffff;
    text-decoration: none;
}
.btn-pkg-popular {
    background: var(--site-primary);
    color: #ffffff;
    border-color: var(--site-primary);
    box-shadow: 0 4px 14px rgba(0,82,204,0.3);
}
.btn-pkg-popular:hover {
    background: var(--site-primary-hover);
    color: #ffffff;
}

/* ==========================================================================
   SPLIT SECTIONS (Umutnet Enterprise Layout)
   ========================================================================== */
.section-split-umutnet {
    padding: 90px 0;
    background: #ffffff;
}
.section-split-umutnet.bg-alt {
    background: #f8fafc;
}
.split-grid {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 60px;
    align-items: center;
}
.split-grid.reverse {
    grid-template-columns: 1.1fr 1fr;
}
.split-tag {
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--site-primary);
    display: inline-block;
    margin-bottom: 8px;
}
.split-title {
    font-family: var(--site-heading-font);
    font-size: 34px;
    font-weight: 800;
    color: var(--site-secondary);
    line-height: 1.25;
    margin: 0 0 16px 0;
}
.split-desc {
    font-size: 16px;
    color: var(--site-muted);
    line-height: 1.6;
    margin-bottom: 28px;
}
.split-points {
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.point-item {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}
.point-item .p-icon {
    width: 44px;
    height: 44px;
    background: #ebf3ff;
    color: var(--site-primary);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}
.point-item strong {
    display: block;
    font-size: 16px;
    color: var(--site-secondary);
    margin-bottom: 2px;
}
.point-item p {
    font-size: 13px;
    color: var(--site-muted);
    margin: 0;
    line-height: 1.4;
}

.btn-umutnet-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 28px;
    font-size: 15px;
    font-weight: 700;
    background: var(--site-primary);
    color: #ffffff;
    border-radius: var(--site-radius-md);
    text-decoration: none;
    transition: all 0.2s;
    box-shadow: 0 4px 12px rgba(0,82,204,0.25);
}
.btn-umutnet-primary:hover {
    background: var(--site-primary-hover);
    color: #ffffff;
    text-decoration: none;
}

/* Visual Mockups */
.infra-illustration {
    background: linear-gradient(135deg, #0a2540 0%, #1e3a8a 100%);
    border-radius: var(--site-radius-xl);
    padding: 40px;
    box-shadow: var(--site-shadow-lg);
    color: #ffffff;
    position: relative;
}
.infra-server-box {
    display: flex;
    align-items: center;
    gap: 20px;
}
.server-rack-icon {
    width: 60px;
    height: 60px;
    background: rgba(255,255,255,0.1);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: #38bdf8;
}
.server-data h4 {
    margin: 0 0 6px 0;
    font-size: 20px;
    font-weight: 700;
}
.server-data p {
    margin: 0;
    font-size: 14px;
    color: #94a3b8;
}
.infra-speed-chip {
    margin-top: 30px;
    background: rgba(0,184,217,0.2);
    border: 1px solid rgba(0,184,217,0.4);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 700;
    color: #38bdf8;
}

.webdesign-mockup {
    background: #ffffff;
    border: 1px solid var(--site-border);
    border-radius: var(--site-radius-xl);
    overflow: hidden;
    box-shadow: var(--site-shadow-lg);
}
.mockup-header {
    background: #f1f5f9;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid var(--site-border);
}
.mock-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}
.mock-dot.red { background: #ef4444; }
.mock-dot.yellow { background: #f59e0b; }
.mock-dot.green { background: #10b981; }
.mock-url {
    background: #ffffff;
    border: 1px solid var(--site-border);
    padding: 2px 14px;
    border-radius: 12px;
    font-size: 11px;
    color: var(--site-muted);
    margin-left: 12px;
}
.mockup-screen {
    padding: 24px;
}
.mock-hero {
    background: #f8fafc;
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 20px;
}
.mock-line {
    height: 12px;
    background: #e2e8f0;
    border-radius: 6px;
    margin-bottom: 10px;
}
.mock-line.title { width: 60%; height: 16px; background: #cbd5e1; }
.mock-line.sub { width: 85%; }
.mock-btn { width: 100px; height: 28px; background: var(--site-primary); border-radius: 6px; margin-top: 14px; }
.mock-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}
.mock-box {
    background: #f1f5f9;
    height: 60px;
    border-radius: 8px;
}

/* ==========================================================================
   WHY US SECTION
   ========================================================================== */
.section-whyus {
    padding: 90px 0;
}
.section-whyus.bg-alt {
    background: #f8fafc;
}
.whyus-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.why-card {
    background: #ffffff;
    border: 1px solid var(--site-border);
    border-radius: var(--site-radius-lg);
    padding: 32px 24px;
    box-shadow: var(--site-shadow-sm);
    transition: all 0.25s ease;
}
.why-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--site-shadow-md);
    border-color: #cbd5e1;
}
.why-icon {
    width: 48px;
    height: 48px;
    background: #ebf3ff;
    color: var(--site-primary);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    margin-bottom: 16px;
}
.why-title {
    font-family: var(--site-heading-font);
    font-size: 18px;
    font-weight: 700;
    color: var(--site-secondary);
    margin: 0 0 8px 0;
}
.why-desc {
    font-size: 14px;
    color: var(--site-muted);
    line-height: 1.5;
    margin: 0;
}

/* ==========================================================================
   FAQ SECTION
   ========================================================================== */
.section-faq {
    padding: 90px 0;
    background: #ffffff;
}
.faq-container {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.faq-item {
    background: #f8fafc;
    border: 1px solid var(--site-border);
    border-radius: var(--site-radius-md);
    overflow: hidden;
    transition: all 0.2s;
}
.faq-item.active {
    background: #ffffff;
    border-color: #bfdbfe;
    box-shadow: var(--site-shadow-md);
}
.faq-question {
    padding: 20px 24px;
    font-family: var(--site-heading-font);
    font-size: 16px;
    font-weight: 700;
    color: var(--site-secondary);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    user-select: none;
}
.faq-question i {
    color: var(--site-primary);
    font-size: 14px;
    transition: transform 0.2s;
}
.faq-answer {
    padding: 0 24px 20px 24px;
    font-size: 15px;
    color: var(--site-muted);
    line-height: 1.6;
    display: none;
    border-top: 1px dashed var(--site-border);
    padding-top: 16px;
}
.faq-item.active .faq-answer {
    display: block;
}

/* ==========================================================================
   FOOTER (Umutnet Corporate Footer)
   ========================================================================== */
.umutnet-footer {
    background: #0a2540;
    color: #ffffff;
}

/* CTA Band */
.footer-cta-band {
    background: linear-gradient(90deg, #0052cc 0%, #0080ff 100%);
    padding: 45px 0;
}
.cta-band-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}
.cta-subtitle {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: #e0f2fe;
    display: inline-block;
    margin-bottom: 6px;
}
.cta-title {
    font-family: var(--site-heading-font);
    font-size: 28px;
    font-weight: 800;
    color: #ffffff;
    margin: 0 0 6px 0;
}
.cta-desc {
    font-size: 15px;
    color: #e0eaff;
    margin: 0;
    max-width: 650px;
}
.cta-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
}
.btn-umutnet-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 24px;
    font-size: 15px;
    font-weight: 700;
    background: #ffffff;
    color: var(--site-primary);
    border-radius: var(--site-radius-md);
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    transition: all 0.2s;
}
.btn-umutnet-cta:hover {
    background: #f1f5f9;
    color: var(--site-primary-hover);
    text-decoration: none;
}
.cta-phone-link {
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px;
}
.cta-phone-link:hover {
    color: #e0f2fe;
    text-decoration: underline;
}

/* Footer Main */
.footer-main {
    padding: 70px 0 50px 0;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
    gap: 40px;
}
.footer-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}
.footer-brand .brand-symbol {
    width: 36px;
    height: 36px;
    font-size: 16px;
}
.footer-brand .brand-text {
    font-family: var(--site-heading-font);
    font-weight: 800;
    font-size: 18px;
    color: #ffffff;
}
.footer-brand .brand-text span {
    color: #38bdf8;
}
.brand-desc {
    font-size: 14px;
    color: #94a3b8;
    line-height: 1.6;
    margin-bottom: 20px;
}
.footer-cert {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: rgba(255,255,255,0.05);
    padding: 12px 14px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.1);
}
.footer-cert i {
    color: #38bdf8;
    font-size: 20px;
    margin-top: 2px;
}
.footer-cert strong {
    display: block;
    font-size: 13px;
    color: #e2e8f0;
}
.footer-cert p {
    font-size: 12px;
    color: #94a3b8;
    margin: 2px 0 0 0;
}

.col-title {
    font-family: var(--site-heading-font);
    font-size: 16px;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 18px 0;
    letter-spacing: 0.3px;
}
.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.footer-links li a {
    color: #94a3b8;
    font-size: 14px;
    text-decoration: none;
    transition: color 0.2s;
}
.footer-links li a:hover {
    color: #ffffff;
    text-decoration: none;
}

.contact-box {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.c-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13px;
    color: #94a3b8;
    line-height: 1.4;
}
.c-item i {
    color: #38bdf8;
    font-size: 14px;
    margin-top: 3px;
}
.c-item a {
    color: #cbd5e1;
    text-decoration: none;
}
.c-item a:hover {
    color: #ffffff;
}

/* Footer Bottom */
.footer-bottom {
    padding: 24px 0;
    font-size: 13px;
    color: #94a3b8;
}
.footer-bottom-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
}
.footer-badges {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.badge-item {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    color: #cbd5e1;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
}

/* ==========================================================================
   RESPONSIVE BREAKPOINTS (Zero Horizontal Scroll Guarantee)
   ========================================================================== */
@media (max-width: 1199px) {
    .services-nav-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 991px) {
    .hero-grid {
        grid-template-columns: 1fr;
    }
    .hero-visual {
        order: -1;
    }
    .hero-title {
        font-size: 34px;
    }
    .packages-grid {
        grid-template-columns: 1fr;
    }
    .pkg-card.popular {
        transform: none;
    }
    .pkg-card.popular:hover {
        transform: translateY(-8px);
    }
    .split-grid, .split-grid.reverse {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .stat-col {
        border-right: none;
        border-bottom: 1px solid rgba(255,255,255,0.1);
        padding-bottom: 20px;
    }
    .stat-col:nth-last-child(-n+2) {
        border-bottom: none;
        padding-bottom: 0;
    }
    .cta-band-inner {
        flex-direction: column;
        text-align: center;
    }
    .cta-actions {
        flex-direction: column;
        width: 100%;
    }
    .btn-umutnet-cta {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 767px) {
    .services-nav-grid {
        grid-template-columns: 1fr;
    }
    .whyus-grid {
        grid-template-columns: 1fr;
    }
    .footer-grid {
        grid-template-columns: 1fr;
    }
    .domain-input-group {
        flex-direction: column;
        padding: 10px;
    }
    .domain-input {
        width: 100%;
        text-align: center;
    }
    .btn-domain-search {
        width: 100%;
        justify-content: center;
    }
    .footer-bottom-inner {
        flex-direction: column;
        text-align: center;
    }
    .footer-badges {
        justify-content: center;
    }
}
/* ==========================================================================
   OPTIMIZED Umutnet MEGA MENU & DROPDOWN ENHANCEMENTS
   ========================================================================== */
.site-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 76px;
}
.site-menu {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 0;
    padding: 0;
}
.menu-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    font-size: 14.5px;
    font-weight: 600;
    color: #1e293b;
    text-decoration: none;
    border-radius: 8px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
}
.menu-link i {
    font-size: 10px;
    color: #94a3b8;
    transition: transform 0.25s ease;
}
.menu-link:hover, .menu-item.has-dropdown:hover > .menu-link {
    color: var(--site-primary);
    background: #f0f7ff;
    text-decoration: none;
}
.menu-item.has-dropdown:hover > .menu-link i {
    transform: rotate(180deg);
    color: var(--site-primary);
}

/* Dropdown Base */
.dropdown-pane {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    box-shadow: 0 20px 40px -10px rgba(10,37,64,0.18), 0 4px 16px -2px rgba(10,37,64,0.06);
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px) scale(0.98);
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 1060;
}
.menu-item.has-dropdown:hover .dropdown-pane {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}


.dropdown-pane.mega-pane {
    width: 760px;
    left: -120px;
}
.dropdown-pane.domain-pane {
    width: 380px;
}
.dropdown-pane.server-pane {
    width: 680px;
    left: -180px;
}

.mega-grid {
    display: grid;
    grid-template-columns: 1.15fr 1fr 200px;
    gap: 20px;
}
.mega-grid.two-col {
    grid-template-columns: 1fr 1fr;
}
.mega-col {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.mega-heading {
    font-size: 11.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #64748b;
    margin-bottom: 8px;
    padding-left: 10px;
}

.drop-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    text-decoration: none;
    transition: all 0.15s ease;
}
.drop-item:hover {
    background: #f8fafc;
    transform: translateX(3px);
    text-decoration: none;
}
.drop-icon {
    width: 38px;
    height: 38px;
    background: #ebf5ff;
    color: var(--site-primary);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
    transition: all 0.2s ease;
}
.drop-item:hover .drop-icon {
    background: var(--site-primary);
    color: #ffffff;
}
.drop-title {
    font-weight: 700;
    font-size: 14px;
    color: #0f172a;
    line-height: 1.25;
    display: flex;
    align-items: center;
    gap: 6px;
}
.drop-desc {
    font-size: 12px;
    color: #64748b;
    margin-top: 3px;
    line-height: 1.35;
}
.badge-new {
    background: #dcfce7;
    color: #15803d;
    font-size: 10px;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
}


.mega-promo {
    background: linear-gradient(135deg, #0a2540 0%, #1e3a8a 100%);
    border-radius: 12px;
    padding: 20px 16px;
    color: #ffffff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}
.promo-badge {
    background: rgba(56, 189, 248, 0.2);
    color: #38bdf8;
    font-size: 10.5px;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 12px;
    display: inline-block;
    margin: 0 auto 10px auto;
    text-transform: uppercase;
}
.mega-promo h4 {
    font-size: 17px;
    font-weight: 800;
    margin: 0 0 6px 0;
}
.mega-promo p {
    font-size: 12px;
    color: #cbd5e1;
    margin: 0 0 12px 0;
    line-height: 1.4;
}
.promo-price {
    font-size: 24px;
    font-weight: 800;
    color: #38bdf8;
    margin-bottom: 12px;
}
.promo-price span {
    font-size: 12px;
    color: #cbd5e1;
}
.btn-promo {
    background: #ffffff;
    color: var(--site-primary);
    font-weight: 700;
    font-size: 12px;
    padding: 8px 14px;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.2s ease;
}
.btn-promo:hover {
    background: #f1f5f9;
    color: var(--site-primary-hover);
    text-decoration: none;
}

/* Drawer Accordion Navigation */
.drawer-accordion-group {
    border-bottom: 1px solid #f1f5f9;
    padding-bottom: 6px;
}
.drawer-accordion-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    font-weight: 700;
    font-size: 15px;
    color: #1e293b;
    border-radius: 8px;
    cursor: pointer;
    user-select: none;
    transition: background 0.15s;
}
.drawer-accordion-toggle:hover {
    background: #f8fafc;
    color: var(--site-primary);
}
.drawer-accordion-toggle i.arrow {
    font-size: 11px;
    color: #94a3b8;
    transition: transform 0.25s ease;
}
.drawer-accordion-group.active .drawer-accordion-toggle i.arrow {
    transform: rotate(180deg);
    color: var(--site-primary);
}
.drawer-accordion-content {
    display: none;
    padding: 4px 10px 10px 32px;
    flex-direction: column;
    gap: 8px;
}
.drawer-accordion-group.active .drawer-accordion-content {
    display: flex;
}
.drawer-accordion-content a {
    font-size: 13.5px;
    color: #475569;
    text-decoration: none;
    padding: 6px 0;
    font-weight: 500;
    transition: color 0.15s;
}
.drawer-accordion-content a:hover {
    color: var(--site-primary);
}

.drawer-footer-actions {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #e2e8f0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.btn-drawer-account, .btn-drawer-register {
    background: var(--site-primary);
    color: #ffffff;
    padding: 12px;
    border-radius: 8px;
    text-align: center;
    font-weight: 700;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.btn-drawer-login {
    background: #f1f5f9;
    color: #1e293b;
    padding: 12px;
    border-radius: 8px;
    text-align: center;
    font-weight: 700;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.btn-drawer-logout {
    color: #ef4444;
    text-align: center;
    font-weight: 600;
    text-decoration: none;
    font-size: 14px;
    padding: 8px;
}
/* ==========================================================================
   AGENCY & WEB DESIGN FOCUS ENHANCEMENTS
   ========================================================================== */
.btn-teklif-al {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: linear-gradient(135deg, #0052cc 0%, #0080ff 100%);
    color: #ffffff !important;
    font-size: 14px;
    font-weight: 700;
    border-radius: 8px;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(0,82,204,0.25);
    transition: all 0.2s ease;
}
.btn-teklif-al:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(0,82,204,0.35);
    text-decoration: none;
}

.agency-hero-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}
.btn-agency-primary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    background: #0052cc;
    color: #ffffff !important;
    font-size: 15px;
    font-weight: 700;
    border-radius: 10px;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(0,82,204,0.3);
    transition: all 0.2s ease;
}
.btn-agency-primary:hover {
    background: #0747a6;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0,82,204,0.4);
    text-decoration: none;
}
.btn-agency-whatsapp {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 24px;
    background: #25d366;
    color: #ffffff !important;
    font-size: 15px;
    font-weight: 700;
    border-radius: 10px;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(37,211,102,0.25);
    transition: all 0.2s ease;
}
.btn-agency-whatsapp:hover {
    background: #1eb857;
    transform: translateY(-2px);
    text-decoration: none;
}

.tech-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}
.tech-pill {
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    color: #1e293b;
    font-size: 12px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 6px;
}

.btn-umutnet-secondary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 22px;
    font-size: 15px;
    font-weight: 700;
    background: #f1f5f9;
    color: #1e293b;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    text-decoration: none;
    transition: all 0.2s;
}
.btn-umutnet-secondary:hover {
    background: #e2e8f0;
    color: #0052cc;
    text-decoration: none;
}
/* ==========================================================================
   ULTRA MODERN NAVIGATION & MEGA MENU REDESIGN (2026 UI/UX)
   ========================================================================== */

/* Top Bar Enhancement */
.site-topbar {
    background: #08162b;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    line-height: 40px;
    font-size: 13px;
}
.badge-glow-dot {
    width: 6px;
    height: 6px;
    background: #38bdf8;
    border-radius: 50%;
    display: inline-block;
    box-shadow: 0 0 8px #38bdf8;
    margin-right: 6px;
}
.topbar-badge {
    background: rgba(56, 189, 248, 0.12);
    color: #7dd3fc;
    padding: 3px 10px;
    border-radius: 20px;
    font-weight: 600;
    font-size: 11.5px;
    border: 1px solid rgba(56, 189, 248, 0.2);
}
.topbar-cta-link {
    color: #38bdf8 !important;
    font-weight: 700;
}
.topbar-cta-link:hover {
    color: #bae6fd !important;
}

/* Glassmorphic Sticky Header */
.site-header {
    background: rgba(255, 255, 255, 0.94) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(226, 232, 240, 0.8);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.site-header.scrolled {
    box-shadow: 0 10px 30px -10px rgba(10, 37, 64, 0.1);
}
.site-nav {
    height: 78px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Brand Logo */
.brand-symbol {
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, #0052cc 0%, #00a3ff 100%);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    font-size: 20px;
    box-shadow: 0 8px 18px -4px rgba(0, 82, 204, 0.4);
    transition: transform 0.3s ease;
}
.site-brand:hover .brand-symbol {
    transform: rotate(-5deg) scale(1.05);
}
.brand-name {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 800;
    font-size: 21px;
    letter-spacing: -0.5px;
    color: #0a2540;
}
.brand-name span {
    color: #0052cc;
}
.brand-tag {
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 1px;
    color: #64748b;
}

/* Modern Nav Items */
.site-menu {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 0;
}
.menu-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 15px;
    font-size: 14.5px;
    font-weight: 700;
    color: #1e293b;
    border-radius: 10px;
    text-decoration: none;
    position: relative;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.menu-link i {
    font-size: 10px;
    color: #94a3b8;
    transition: transform 0.25s ease;
}
.menu-link:hover, .menu-item.has-dropdown:hover > .menu-link {
    color: #0052cc;
    background: #f0f7ff;
    text-decoration: none;
}
.menu-item.has-dropdown:hover > .menu-link i {
    transform: rotate(180deg);
    color: #0052cc;
}
.menu-link-secondary {
    color: #64748b !important;
}

/* Modern Dropdown Panes */
.modern-mega-pane {
    position: absolute;
    top: calc(100% + 6px);
    left: -140px;
    width: 820px;
    background: #ffffff;
    border: 1px solid rgba(226, 232, 240, 0.9);
    border-radius: 20px;
    box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.18), 0 0 0 1px rgba(0, 0, 0, 0.02);
    padding: 24px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(14px) scale(0.98);
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 1060;
}
.menu-item.has-dropdown:hover .modern-mega-pane {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}
.two-col-pane {
    width: 660px;
    left: -160px;
}


.mega-inner-grid {
    display: grid;
    grid-template-columns: 1.35fr 1fr 220px;
    gap: 22px;
}
.mega-inner-grid.two-col {
    grid-template-columns: 1fr 1fr;
}
.mega-column {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.mega-label {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.8px;
    color: #94a3b8;
    margin-bottom: 6px;
    padding-left: 8px;
}

/* Modern Interactive Dropdown Cards */
.modern-drop-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 12px 14px;
    border-radius: 12px;
    background: transparent;
    text-decoration: none;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    border: 1px solid transparent;
}
.modern-drop-card:hover {
    background: #f8fafc;
    border-color: #e2e8f0;
    transform: translateX(4px);
    text-decoration: none;
    box-shadow: 0 4px 12px -2px rgba(0,0,0,0.05);
}
.card-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}
.modern-drop-card:hover .card-icon {
    transform: scale(1.08);
}
.icon-blue { background: #eff6ff; color: #2563eb; }
.icon-green { background: #ecfdf5; color: #059669; }
.icon-purple { background: #faf5ff; color: #9333ea; }
.icon-cyan { background: #ecfeff; color: #0891b2; }
.icon-orange { background: #fff7ed; color: #ea580c; }
.icon-indigo { background: #eef2ff; color: #4f46e5; }
.icon-emerald { background: #f0fdf4; color: #16a34a; }

.card-title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 14.5px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.25;
    display: flex;
    align-items: center;
    gap: 8px;
}
.card-sub {
    font-size: 12px;
    color: #64748b;
    margin: 3px 0 0 0;
    line-height: 1.4;
}
.pill-badge {
    background: #dbeafe;
    color: #1d4ed8;
    font-size: 10px;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 12px;
}

/* Info Card in Dropdown */
.modern-info-card {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.info-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.info-item i {
    font-size: 16px;
    margin-top: 2px;
}
.info-item strong {
    display: block;
    font-size: 13px;
    color: #0f172a;
}
.info-item p {
    font-size: 11.5px;
    color: #64748b;
    margin: 1px 0 0 0;
}

/* Promo Box in Dropdown */
.mega-promo-box {
    background: linear-gradient(135deg, #0a2540 0%, #1e40af 100%);
    border-radius: 14px;
    padding: 22px 18px;
    color: #ffffff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.promo-tag {
    background: rgba(56, 189, 248, 0.2);
    color: #38bdf8;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.8px;
    padding: 3px 8px;
    border-radius: 20px;
    display: inline-block;
    margin: 0 auto 10px auto;
}
.mega-promo-box h4 {
    font-size: 18px;
    font-weight: 800;
    margin: 0 0 4px 0;
    color: #ffffff;
}
.mega-promo-box p {
    font-size: 12px;
    color: #cbd5e1;
    margin: 0 0 14px 0;
}
.promo-price-val {
    font-size: 26px;
    font-weight: 800;
    color: #38bdf8;
    line-height: 1;
    margin-bottom: 14px;
}
.promo-price-val span {
    font-size: 11px;
    color: #94a3b8;
    display: block;
    margin-top: 4px;
}
.btn-promo-action {
    background: #ffffff;
    color: #0052cc !important;
    font-size: 12.5px;
    font-weight: 800;
    padding: 10px 16px;
    border-radius: 8px;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.btn-promo-action:hover {
    background: #f8fafc;
    transform: translateY(-2px);
    text-decoration: none;
}

/* Modern Action Buttons */
.site-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}
.btn-action-teklif {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 22px;
    background: linear-gradient(135deg, #0052cc 0%, #0080ff 100%);
    color: #ffffff !important;
    font-size: 14px;
    font-weight: 800;
    border-radius: 30px;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(0, 82, 204, 0.35);
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden;
}
.btn-action-teklif:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(0, 82, 204, 0.45);
    text-decoration: none;
}
.btn-glow-point {
    width: 6px;
    height: 6px;
    background: #ffffff;
    border-radius: 50%;
    box-shadow: 0 0 8px #ffffff;
    animation: glowPoint 2s infinite;
}
@keyframes glowPoint {
    0%, 100% { opacity: 0.6; transform: scale(0.9); }
    50% { opacity: 1; transform: scale(1.3); }
}

.btn-action-icon {
    position: relative;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1e293b;
    text-decoration: none;
    transition: all 0.2s ease;
}
.btn-action-icon:hover {
    background: #f1f5f9;
    color: #0052cc;
    border-color: #cbd5e1;
    text-decoration: none;
}
.cart-badge-pill {
    position: absolute;
    top: -4px;
    right: -4px;
    background: #0052cc;
    color: #ffffff;
    font-size: 10px;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 10px;
    border: 2px solid #ffffff;
    line-height: 1;
}

.btn-action-login, .btn-action-user {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 16px;
    font-size: 13.5px;
    font-weight: 700;
    background: #f8fafc;
    color: #1e293b;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    text-decoration: none;
    transition: all 0.2s ease;
}
.btn-action-login:hover, .btn-action-user:hover {
    background: #f1f5f9;
    color: #0052cc;
    border-color: #cbd5e1;
    text-decoration: none;
}

/* Modern Hamburger Icon */
.mobile-toggle-modern {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    cursor: pointer;
    padding: 0;
}
.hamburger-bar {
    width: 20px;
    height: 2px;
    background: #1e293b;
    border-radius: 2px;
    transition: all 0.25s ease;
}


/* ==========================================================================
   CLEAN & RESPONSIVE MOBILE DRAWER NAVIGATION (FINAL ROBUST VERSION)
   ========================================================================== */

/* Hamburger Button */
.mobile-toggle-modern {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 42px !important;
    height: 42px !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    color: #0f172a !important;
    font-size: 20px !important;
    cursor: pointer !important;
    padding: 0 !important;
    margin: 0 !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    -webkit-tap-highlight-color: transparent !important;
    touch-action: manipulation !important;
    z-index: 100 !important;
}

.mobile-toggle-modern:active {
    background: #e2e8f0 !important;
    transform: scale(0.94) !important;
}

@media (min-width: 992px) {
    .mobile-toggle-modern {
        display: none !important;
    }
}

/* Backdrop Overlay */
.mobile-drawer-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    background: rgba(15, 23, 42, 0.65) !important;
    backdrop-filter: blur(5px) !important;
    -webkit-backdrop-filter: blur(5px) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.3s !important;
    z-index: 99998 !important;
}

.mobile-drawer-overlay.active {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

/* Slide-out Drawer Panel */
.mobile-drawer-modern {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    width: 86vw !important;
    max-width: 360px !important;
    height: 100vh !important;
    height: 100dvh !important;
    background: #ffffff !important;
    display: flex !important;
    flex-direction: column !important;
    transform: translateX(105%) !important;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
    z-index: 99999 !important;
    box-shadow: -10px 0 35px rgba(0, 0, 0, 0.25) !important;
    visibility: hidden !important;
    pointer-events: none !important;
    overflow: hidden !important;
}

.mobile-drawer-modern.active {
    transform: translateX(0) !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

/* Drawer Header */
.drawer-header-modern {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 16px 20px !important;
    border-bottom: 1px solid #f1f5f9 !important;
    background: #ffffff !important;
    flex-shrink: 0 !important;
}

.brand-logo-wrap {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.brand-symbol {
    width: 36px !important;
    height: 36px !important;
    border-radius: 9px !important;
    background: linear-gradient(135deg, #2563eb 0%, #0284c7 100%) !important;
    color: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 16px !important;
    box-shadow: 0 4px 10px rgba(37, 99, 235, 0.25) !important;
}

.brand-text {
    display: flex !important;
    flex-direction: column !important;
}

.brand-name {
    font-size: 16px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    letter-spacing: -0.3px !important;
    line-height: 1.1 !important;
}

.brand-name span {
    color: #2563eb !important;
}

.brand-tag {
    font-size: 10px !important;
    font-weight: 700 !important;
    color: #94a3b8 !important;
    letter-spacing: 0.6px !important;
    margin-top: 2px !important;
}

.drawer-close-modern {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 9px !important;
    border: none !important;
    background: #f1f5f9 !important;
    color: #64748b !important;
    font-size: 16px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    -webkit-tap-highlight-color: transparent !important;
}

.drawer-close-modern:active {
    background: #e2e8f0 !important;
    color: #0f172a !important;
}

/* Drawer Body */
.drawer-body-modern {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 14px 16px !important;
    overscroll-behavior: contain !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}

/* Single Nav Link */
.drawer-nav-item {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 12px 14px !important;
    border-radius: 10px !important;
    color: #1e293b !important;
    font-size: 14.5px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: background 0.15s ease !important;
    -webkit-tap-highlight-color: transparent !important;
}

.drawer-nav-item i {
    width: 20px !important;
    color: #2563eb !important;
    font-size: 15px !important;
    text-align: center !important;
}

.drawer-nav-item:active,
.drawer-nav-item:hover {
    background: #f8fafc !important;
    color: #2563eb !important;
}

/* Accordion Item */
.drawer-accordion-item {
    border-radius: 10px !important;
    overflow: hidden !important;
    background: transparent !important;
    transition: background 0.2s ease !important;
}

.drawer-accordion-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    padding: 12px 14px !important;
    border-radius: 10px !important;
    border: none !important;
    background: transparent !important;
    color: #1e293b !important;
    font-size: 14.5px !important;
    font-weight: 600 !important;
    text-align: left !important;
    cursor: pointer !important;
    transition: background 0.15s ease !important;
    -webkit-tap-highlight-color: transparent !important;
}

.drawer-accordion-btn span {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.drawer-accordion-btn span i {
    width: 20px !important;
    color: #2563eb !important;
    font-size: 15px !important;
    text-align: center !important;
}

.drawer-accordion-btn .arrow-icon {
    font-size: 12px !important;
    color: #94a3b8 !important;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.drawer-accordion-item.active .drawer-accordion-btn {
    background: #f1f5f9 !important;
    color: #2563eb !important;
}

.drawer-accordion-item.active .arrow-icon {
    transform: rotate(180deg) !important;
    color: #2563eb !important;
}

/* Accordion Dropdown Submenu */
.drawer-accordion-dropdown {
    display: none !important;
    flex-direction: column !important;
    gap: 2px !important;
    padding: 4px 0 6px 32px !important;
}

.drawer-accordion-item.active .drawer-accordion-dropdown {
    display: flex !important;
}

.drawer-accordion-dropdown a {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px 12px !important;
    border-radius: 8px !important;
    color: #475569 !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    transition: all 0.15s ease !important;
    -webkit-tap-highlight-color: transparent !important;
}

.drawer-accordion-dropdown a i {
    font-size: 11px !important;
    color: #94a3b8 !important;
}

.drawer-accordion-dropdown a:active,
.drawer-accordion-dropdown a:hover {
    background: #eff6ff !important;
    color: #2563eb !important;
}

.drawer-accordion-dropdown a:active i,
.drawer-accordion-dropdown a:hover i {
    color: #2563eb !important;
}

/* Bottom CTA Area inside Drawer */
.drawer-cta-wrapper {
    margin-top: 16px !important;
    padding-top: 16px !important;
    border-top: 1px solid #f1f5f9 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    flex-shrink: 0 !important;
}

.btn-drawer-teklif {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
    padding: 12px !important;
    border-radius: 10px !important;
    background: linear-gradient(135deg, #2563eb 0%, #0284c7 100%) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    text-decoration: none !important;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25) !important;
    -webkit-tap-highlight-color: transparent !important;
}

.btn-drawer-wa {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
    padding: 10px !important;
    border-radius: 10px !important;
    background: #16a34a !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    text-decoration: none !important;
    box-shadow: 0 4px 12px rgba(22, 163, 74, 0.2) !important;
    -webkit-tap-highlight-color: transparent !important;
}

.btn-drawer-client {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
    padding: 10px !important;
    border-radius: 10px !important;
    background: #f1f5f9 !important;
    color: #334155 !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    text-decoration: none !important;
    border: 1px solid #e2e8f0 !important;
    -webkit-tap-highlight-color: transparent !important;
}



/* ==========================================================================
   ULTRA-MODERN FLOATING NAVBAR & REDESIGNED NAVIGATION (2026 EDITION)
   ========================================================================== */

/* Topbar is now completely removed as requested */
.site-topbar {
    display: none !important;
}

/* Header Container */
.site-header-v4 {
    position: sticky !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    background: rgba(255, 255, 255, 0.92) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    border-bottom: 1px solid rgba(226, 232, 240, 0.8) !important;
    box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.04) !important;
    z-index: 1020 !important;
    transition: all 0.25s ease !important;
}

.site-header-v4.scrolled {
    background: rgba(255, 255, 255, 0.98) !important;
    box-shadow: 0 10px 25px -3px rgba(15, 23, 42, 0.08) !important;
}

.site-navbar-inner {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    height: 74px !important;
    padding: 0 8px !important;
}

/* Brand Identity */
.brand-link {
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
}

.brand-box {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.brand-icon {
    width: 40px !important;
    height: 40px !important;
    border-radius: 11px !important;
    background: linear-gradient(135deg, #1d4ed8 0%, #0284c7 100%) !important;
    color: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 18px !important;
    box-shadow: 0 6px 16px -2px rgba(29, 78, 216, 0.35) !important;
    transition: transform 0.2s ease !important;
}

.brand-link:hover .brand-icon {
    transform: translateY(-1px) scale(1.04) !important;
}

.brand-info {
    display: flex !important;
    flex-direction: column !important;
}

.brand-title {
    font-size: 19px !important;
    font-weight: 800 !important;
    letter-spacing: -0.5px !important;
    color: #0f172a !important;
    line-height: 1.15 !important;
}

.brand-title span {
    color: #2563eb !important;
}

.brand-subtitle {
    font-size: 10.5px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.6px !important;
    color: #94a3b8 !important;
    margin-top: 1px !important;
}

/* Desktop Navigation Menu */
.desktop-nav-menu {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.nav-item-dropdown,
.nav-item-direct {
    position: relative !important;
}

.nav-menu-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 9px 14px !important;
    border-radius: 9px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #334155 !important;
    text-decoration: none !important;
    transition: all 0.18s ease !important;
}

.nav-menu-link .nav-arrow {
    font-size: 10.5px !important;
    color: #94a3b8 !important;
    transition: transform 0.2s ease, color 0.2s ease !important;
}

.nav-menu-link .nav-link-icon {
    font-size: 13.5px !important;
    color: #2563eb !important;
}

.nav-menu-link:hover,
.nav-item-dropdown:hover > .nav-menu-link {
    background: #f1f5f9 !important;
    color: #0f172a !important;
}

.nav-item-dropdown:hover > .nav-menu-link .nav-arrow {
    transform: rotate(180deg) !important;
    color: #2563eb !important;
}

/* Floating Dropdowns */
.nav-floating-dropdown {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    left: 0 !important;
    background: #ffffff !important;
    border: 1px solid rgba(226, 232, 240, 0.9) !important;
    border-radius: 16px !important;
    box-shadow: 0 20px 45px -10px rgba(15, 23, 42, 0.14), 0 0 1px rgba(15, 23, 42, 0.08) !important;
    padding: 14px !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(10px) !important;
    transition: opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1), transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.22s !important;
    z-index: 1050 !important;
}

.nav-item-dropdown:hover .nav-floating-dropdown {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
}

.nav-floating-dropdown.mega-compact {
    width: 370px !important;
}

.nav-floating-dropdown.single-col {
    width: 330px !important;
}

.dropdown-head-tag {
    font-size: 10.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.8px !important;
    color: #94a3b8 !important;
    text-transform: uppercase !important;
    padding: 4px 8px 10px 8px !important;
    margin-bottom: 4px !important;
    border-bottom: 1px solid #f8fafc !important;
}

.dropdown-links-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}

.dropdown-item-card {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    padding: 10px 10px !important;
    border-radius: 10px !important;
    text-decoration: none !important;
    transition: background 0.15s ease, transform 0.15s ease !important;
}

.dropdown-item-card:hover {
    background: #f8fafc !important;
    transform: translateX(3px) !important;
}

.item-icon-box {
    width: 38px !important;
    height: 38px !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 15px !important;
    flex-shrink: 0 !important;
}

.bg-icon-blue { background: #eff6ff !important; color: #2563eb !important; }
.bg-icon-green { background: #f0fdf4 !important; color: #16a34a !important; }
.bg-icon-purple { background: #faf5ff !important; color: #9333ea !important; }
.bg-icon-cyan { background: #ecfeff !important; color: #0891b2 !important; }
.bg-icon-orange { background: #fff7ed !important; color: #ea580c !important; }

.item-text-box {
    display: flex !important;
    flex-direction: column !important;
}

.item-title {
    font-size: 13.5px !important;
    font-weight: 700 !important;
    color: #1e293b !important;
    line-height: 1.25 !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.dropdown-item-card:hover .item-title {
    color: #2563eb !important;
}

.badge-mini {
    font-size: 9.5px !important;
    font-weight: 700 !important;
    padding: 1px 6px !important;
    border-radius: 6px !important;
    background: #eff6ff !important;
    color: #2563eb !important;
}

.badge-mini-green {
    font-size: 9.5px !important;
    font-weight: 700 !important;
    padding: 1px 6px !important;
    border-radius: 6px !important;
    background: #f0fdf4 !important;
    color: #16a34a !important;
}

.item-desc {
    font-size: 11.5px !important;
    color: #64748b !important;
    line-height: 1.35 !important;
    margin: 2px 0 0 0 !important;
}

/* Navbar Right Actions */
.navbar-right-actions {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.action-btn-circle {
    position: relative !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 10px !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #334155 !important;
    font-size: 15px !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}

.action-btn-circle:hover {
    background: #f1f5f9 !important;
    color: #0f172a !important;
    transform: translateY(-1px) !important;
}

.cart-count-badge {
    position: absolute !important;
    top: -5px !important;
    right: -5px !important;
    background: #ef4444 !important;
    color: #ffffff !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    width: 18px !important;
    height: 18px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 2px solid #ffffff !important;
}

.action-btn-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 9px 16px !important;
    border-radius: 10px !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.btn-client-pill {
    background: #f1f5f9 !important;
    border: 1px solid #e2e8f0 !important;
    color: #334155 !important;
}

.btn-client-pill:hover {
    background: #e2e8f0 !important;
    color: #0f172a !important;
}

.btn-primary-pill {
    background: linear-gradient(135deg, #2563eb 0%, #0284c7 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.28) !important;
}

.btn-primary-pill:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 18px rgba(37, 99, 235, 0.35) !important;
    color: #ffffff !important;
}

/* Modern Hamburger Button */
.mobile-hamburger-btn {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4.5px !important;
    width: 42px !important;
    height: 42px !important;
    border-radius: 10px !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    cursor: pointer !important;
    padding: 0 !important;
    transition: all 0.2s ease !important;
    -webkit-tap-highlight-color: transparent !important;
}

.mobile-hamburger-btn:active {
    background: #e2e8f0 !important;
    transform: scale(0.94) !important;
}

.bar-line {
    display: block !important;
    width: 19px !important;
    height: 2px !important;
    background: #0f172a !important;
    border-radius: 2px !important;
    transition: all 0.2s ease !important;
}



/* ==========================================================================
   OPTION 4: CREATIVE FULL-SCREEN STUDIO OVERLAY MENU
   ========================================================================== */

.fullscreen-menu-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    background: #090d16 !important;
    color: #ffffff !important;
    z-index: 999999 !important;
    display: flex !important;
    flex-direction: column !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: scale(0.97) translateY(12px) !important;
    transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.3s !important;
    overflow: hidden !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

.fullscreen-menu-overlay.active {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: scale(1) translateY(0) !important;
}

.fs-menu-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 18px 24px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    flex-shrink: 0 !important;
}

.fs-menu-header .brand-title {
    color: #ffffff !important;
}

.fs-menu-header .brand-subtitle {
    color: rgba(255, 255, 255, 0.45) !important;
}

.fs-menu-close {
    width: 44px !important;
    height: 44px !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #ffffff !important;
    font-size: 19px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease !important;
    -webkit-tap-highlight-color: transparent !important;
}

.fs-menu-close:active {
    background: rgba(255, 255, 255, 0.2) !important;
    transform: scale(0.92) !important;
}

.fs-menu-body {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 24px 24px 30px 24px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    gap: 24px !important;
    overscroll-behavior: contain !important;
}

.fs-nav-links {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

.fs-nav-row {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    padding: 10px 4px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent !important;
}

.fs-num {
    font-size: 12px !important;
    font-weight: 800 !important;
    color: #38bdf8 !important;
    font-family: monospace !important;
    letter-spacing: 1px !important;
}

.fs-link {
    font-size: 22px !important;
    font-weight: 700 !important;
    color: #f8fafc !important;
    text-decoration: none !important;
    letter-spacing: -0.4px !important;
    transition: color 0.2s ease, transform 0.2s ease !important;
}

.fs-nav-row:hover .fs-link,
.fs-nav-row:active .fs-link {
    color: #38bdf8 !important;
    transform: translateX(4px) !important;
}

.fs-chevron {
    margin-left: auto !important;
    font-size: 13px !important;
    color: rgba(255, 255, 255, 0.3) !important;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), color 0.2s !important;
}

.fs-nav-item-acc.active .fs-chevron {
    transform: rotate(180deg) !important;
    color: #38bdf8 !important;
}

.fs-sublinks {
    display: none !important;
    flex-direction: column !important;
    gap: 8px !important;
    padding: 10px 0 12px 34px !important;
}

.fs-nav-item-acc.active .fs-sublinks {
    display: flex !important;
}

.fs-sublinks a {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: rgba(255, 255, 255, 0.65) !important;
    text-decoration: none !important;
    padding: 5px 0 !important;
    transition: color 0.2s ease, transform 0.2s ease !important;
    -webkit-tap-highlight-color: transparent !important;
}

.fs-sublinks a:active,
.fs-sublinks a:hover {
    color: #ffffff !important;
    transform: translateX(3px) !important;
}

/* Footer & Actions */
.fs-menu-footer {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    padding-top: 18px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.fs-action-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
}

.btn-fs-primary {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 13px !important;
    border-radius: 12px !important;
    background: linear-gradient(135deg, #2563eb 0%, #0284c7 100%) !important;
    color: #ffffff !important;
    font-size: 14.5px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    box-shadow: 0 4px 16px rgba(37, 99, 235, 0.4) !important;
    -webkit-tap-highlight-color: transparent !important;
}

.btn-fs-wa {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 13px !important;
    border-radius: 12px !important;
    background: #16a34a !important;
    color: #ffffff !important;
    font-size: 14.5px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    box-shadow: 0 4px 16px rgba(22, 163, 74, 0.3) !important;
    -webkit-tap-highlight-color: transparent !important;
}

.fs-quick-bar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 6px 4px 0 4px !important;
}

.fs-client-link,
.fs-tel-link {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: rgba(255, 255, 255, 0.6) !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    transition: color 0.2s ease !important;
}

.fs-client-link:hover,
.fs-tel-link:hover {
    color: #ffffff !important;
}



/* ==========================================================================
   OPTION A: NATIVE MOBILE APP BOTTOM BAR & BOTTOM SHEET MODAL
   ========================================================================== */

/* 1. Mobile App Bottom Bar */
.app-bottom-bar {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 64px !important;
    background: rgba(255, 255, 255, 0.96) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border-top: 1px solid rgba(226, 232, 240, 0.85) !important;
    box-shadow: 0 -4px 20px rgba(15, 23, 42, 0.07) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-around !important;
    padding: 0 4px !important;
    z-index: 99990 !important;
    box-sizing: border-box !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
}

@media (min-width: 992px) {
    .app-bottom-bar {
        display: none !important;
    }
}

.app-bar-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 1 !important;
    height: 100% !important;
    text-decoration: none !important;
    background: transparent !important;
    border: none !important;
    color: #64748b !important;
    padding: 4px 0 !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent !important;
    transition: all 0.15s ease !important;
}

.app-bar-item:active {
    transform: scale(0.92) !important;
}

.app-bar-icon-wrap {
    font-size: 18px !important;
    height: 22px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: color 0.15s ease !important;
}

.app-bar-label {
    font-size: 10.5px !important;
    font-weight: 700 !important;
    margin-top: 3px !important;
    letter-spacing: -0.2px !important;
    transition: color 0.15s ease !important;
}

.app-bar-item.active,
.app-bar-item:hover {
    color: #2563eb !important;
}

.app-bar-item.active .app-bar-icon-wrap {
    color: #2563eb !important;
}

.app-bar-whatsapp .app-bar-icon-wrap {
    color: #16a34a !important;
}

/* Raised Center CTA Button */
.app-bar-item.app-bar-cta {
    position: relative !important;
    top: -12px !important;
}

.cta-circle-btn {
    width: 48px !important;
    height: 48px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #2563eb 0%, #0284c7 100%) !important;
    color: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 19px !important;
    box-shadow: 0 6px 18px rgba(37, 99, 235, 0.45) !important;
    border: 3.5px solid #ffffff !important;
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.app-bar-cta:active .cta-circle-btn {
    transform: scale(0.9) !important;
}

.cta-label {
    font-weight: 800 !important;
    color: #2563eb !important;
    margin-top: 2px !important;
}

/* 2. Bottom Sheet Backdrop Overlay */
.app-bottom-sheet-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    background: rgba(15, 23, 42, 0.6) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.3s !important;
    z-index: 99995 !important;
}

.app-bottom-sheet-overlay.active {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

/* 3. Bottom Sheet Modal Panel */
.app-bottom-sheet {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    max-height: 85vh !important;
    background: #ffffff !important;
    border-radius: 24px 24px 0 0 !important;
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.2) !important;
    z-index: 99996 !important;
    transform: translateY(105%) !important;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 16px) !important;
}

.app-bottom-sheet.active {
    transform: translateY(0) !important;
}

.sheet-drag-handle-wrap {
    padding: 10px 0 4px 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent !important;
}

.sheet-drag-handle {
    width: 40px !important;
    height: 4.5px !important;
    background: #cbd5e1 !important;
    border-radius: 3px !important;
}

.sheet-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 10px 20px 14px 20px !important;
    border-bottom: 1px solid #f1f5f9 !important;
}

.sheet-brand {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.sheet-title {
    font-size: 16px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    line-height: 1.1 !important;
}

.sheet-title span {
    color: #2563eb !important;
}

.sheet-sub {
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #94a3b8 !important;
    margin-top: 1px !important;
}

.sheet-close-btn {
    width: 34px !important;
    height: 34px !important;
    border-radius: 50% !important;
    border: none !important;
    background: #f1f5f9 !important;
    color: #64748b !important;
    font-size: 14px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background 0.15s ease !important;
}

.sheet-close-btn:active {
    background: #e2e8f0 !important;
    color: #0f172a !important;
}

.sheet-content {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 16px 18px 24px 18px !important;
    overscroll-behavior: contain !important;
}

.sheet-section-title {
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 0.8px !important;
    color: #94a3b8 !important;
    margin: 6px 0 12px 2px !important;
    text-transform: uppercase !important;
}

/* Service Cards Grid (3x2 or 2x3) */
.sheet-cards-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 10px !important;
    margin-bottom: 20px !important;
}

.sheet-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    padding: 14px 6px !important;
    border-radius: 14px !important;
    background: #f8fafc !important;
    border: 1px solid #f1f5f9 !important;
    text-decoration: none !important;
    transition: transform 0.15s ease, background 0.15s ease !important;
    -webkit-tap-highlight-color: transparent !important;
}

.sheet-card:active {
    background: #eff6ff !important;
    transform: scale(0.95) !important;
}

.sheet-card-icon {
    width: 40px !important;
    height: 40px !important;
    border-radius: 11px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 17px !important;
    margin-bottom: 8px !important;
}

.icon-blue { background: #dbeafe !important; color: #1d4ed8 !important; }
.icon-green { background: #dcfce7 !important; color: #15803d !important; }
.icon-orange { background: #ffedd5 !important; color: #c2410c !important; }
.icon-cyan { background: #cffafe !important; color: #0e7490 !important; }
.icon-purple { background: #f3e8ff !important; color: #7e22ce !important; }
.icon-teal { background: #ccfbf1 !important; color: #0f766e !important; }

.sheet-card-label {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #1e293b !important;
    line-height: 1.2 !important;
}

.sheet-card-sub {
    font-size: 9.5px !important;
    font-weight: 500 !important;
    color: #94a3b8 !important;
    margin-top: 2px !important;
}

/* Links List */
.sheet-links-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
}

.sheet-list-item {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 12px 14px !important;
    border-radius: 12px !important;
    background: #f8fafc !important;
    border: 1px solid #f1f5f9 !important;
    text-decoration: none !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: #1e293b !important;
    transition: background 0.15s ease !important;
    -webkit-tap-highlight-color: transparent !important;
}

.sheet-list-item:active {
    background: #f1f5f9 !important;
}

.sheet-list-item .arrow {
    margin-left: auto !important;
    font-size: 12px !important;
    color: #cbd5e1 !important;
}

/* Bottom Body Padding for Mobile so content is never covered by the bar */
@media (max-width: 991px) {
    body {
        padding-bottom: 70px !important;
    }
}



/* ==========================================================================
   KURUMSAL SABİT LOGOLU MOBİL MENÜ SİSTEMİ (UMUTNET ENTERPRISE)
   ========================================================================== */

/* 1. Header Logo Sizing */
.corporate-brand-logo {
    height: 40px !important;
    width: auto !important;
    max-width: 190px !important;
    object-fit: contain !important;
    display: block !important;
}

@media (max-width: 576px) {
    .corporate-brand-logo {
        height: 35px !important;
        max-width: 165px !important;
    }
}

/* 2. Backdrop Overlay */
.corporate-drawer-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    background: rgba(15, 23, 42, 0.6) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.3s !important;
    z-index: 99998 !important;
}

.corporate-drawer-overlay.active {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

/* 3. Slide-out Drawer Panel */
.corporate-drawer-panel {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    width: 86vw !important;
    max-width: 360px !important;
    height: 100vh !important;
    height: 100dvh !important;
    background: #ffffff !important;
    display: flex !important;
    flex-direction: column !important;
    transform: translateX(105%) !important;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
    z-index: 99999 !important;
    box-shadow: -10px 0 35px rgba(0, 0, 0, 0.22) !important;
    visibility: hidden !important;
    pointer-events: none !important;
    overflow: hidden !important;
}

.corporate-drawer-panel.active {
    transform: translateX(0) !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

/* Drawer Header */
.corp-drawer-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 16px 20px !important;
    border-bottom: 1px solid #f1f5f9 !important;
    background: #ffffff !important;
    flex-shrink: 0 !important;
}

.corp-drawer-logo {
    height: 34px !important;
    width: auto !important;
    max-width: 160px !important;
    object-fit: contain !important;
}

.corp-drawer-close {
    width: 38px !important;
    height: 38px !important;
    border-radius: 10px !important;
    border: none !important;
    background: #f1f5f9 !important;
    color: #64748b !important;
    font-size: 16px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease !important;
    -webkit-tap-highlight-color: transparent !important;
}

.corp-drawer-close:active {
    background: #e2e8f0 !important;
    color: #0f172a !important;
}

/* Drawer Body */
.corp-drawer-body {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 16px 18px !important;
    overscroll-behavior: contain !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}

.corp-nav-section-title {
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 0.8px !important;
    color: #94a3b8 !important;
    text-transform: uppercase !important;
    margin: 10px 0 6px 4px !important;
}

.corp-drawer-nav {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}

.corp-nav-link {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 12px 14px !important;
    border-radius: 10px !important;
    color: #1e293b !important;
    font-size: 14.5px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: background 0.15s ease !important;
    -webkit-tap-highlight-color: transparent !important;
}

.corp-nav-link i.fa-fw {
    width: 20px !important;
    color: #2563eb !important;
    font-size: 15px !important;
    text-align: center !important;
}

.corp-nav-link:active,
.corp-nav-link:hover,
.corp-nav-link.active {
    background: #f8fafc !important;
    color: #2563eb !important;
}

/* Accordion */
.corp-nav-acc-item {
    border-radius: 10px !important;
    overflow: hidden !important;
}

.corp-acc-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    padding: 12px 14px !important;
    border-radius: 10px !important;
    border: none !important;
    background: transparent !important;
    color: #1e293b !important;
    font-size: 14.5px !important;
    font-weight: 600 !important;
    text-align: left !important;
    cursor: pointer !important;
    transition: background 0.15s ease !important;
    -webkit-tap-highlight-color: transparent !important;
}

.corp-acc-btn .btn-title {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.corp-acc-btn .btn-title i.fa-fw {
    width: 20px !important;
    color: #2563eb !important;
    font-size: 15px !important;
    text-align: center !important;
}

.corp-acc-btn .chevron {
    font-size: 12px !important;
    color: #94a3b8 !important;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.corp-nav-acc-item.active .corp-acc-btn {
    background: #f1f5f9 !important;
    color: #2563eb !important;
}

.corp-nav-acc-item.active .chevron {
    transform: rotate(180deg) !important;
    color: #2563eb !important;
}

.corp-acc-dropdown {
    display: none !important;
    flex-direction: column !important;
    gap: 2px !important;
    padding: 4px 0 6px 36px !important;
}

.corp-nav-acc-item.active .corp-acc-dropdown {
    display: flex !important;
}

.corp-acc-dropdown a {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px 12px !important;
    border-radius: 8px !important;
    color: #475569 !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    transition: all 0.15s ease !important;
    -webkit-tap-highlight-color: transparent !important;
}

.corp-acc-dropdown a:active,
.corp-acc-dropdown a:hover {
    background: #eff6ff !important;
    color: #2563eb !important;
}

/* Quick Links */
.corp-quick-links {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}

.corp-quick-item {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 10px 14px !important;
    border-radius: 10px !important;
    background: #f8fafc !important;
    border: 1px solid #f1f5f9 !important;
    color: #334155 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    -webkit-tap-highlight-color: transparent !important;
}

.corp-quick-item:active {
    background: #e2e8f0 !important;
}

/* Footer CTAs */
.corp-drawer-footer {
    padding: 14px 18px !important;
    border-top: 1px solid #f1f5f9 !important;
    background: #ffffff !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    flex-shrink: 0 !important;
}

.btn-corp-teklif {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
    padding: 12px !important;
    border-radius: 10px !important;
    background: linear-gradient(135deg, #2563eb 0%, #0284c7 100%) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    text-decoration: none !important;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.28) !important;
    -webkit-tap-highlight-color: transparent !important;
}

.btn-corp-wa {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
    padding: 11px !important;
    border-radius: 10px !important;
    background: #16a34a !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 13.5px !important;
    text-decoration: none !important;
    box-shadow: 0 4px 14px rgba(22, 163, 74, 0.22) !important;
    -webkit-tap-highlight-color: transparent !important;
}

/* Hide old bottom bar if present */
.app-bottom-bar,
.app-bottom-sheet,
.app-bottom-sheet-overlay {
    display: none !important;
}

/* Reset body padding-bottom */
body {
    padding-bottom: 0px !important;
}



/* ==========================================================================
   STRICT RESPONSIVE DESKTOP VS MOBILE NAV VISIBILITY FIX
   ========================================================================== */

/* Masaüstü menüsü kesinlikle sadece geniş ekranlarda görünür (>= 1200px) */
@media (max-width: 1199px) {
    .desktop-nav-menu,
    nav.desktop-nav-menu,
    .site-menu {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        height: 0 !important;
        overflow: hidden !important;
    }

    .mobile-hamburger-btn {
        display: flex !important;
    }
}

@media (min-width: 1200px) {
    .desktop-nav-menu {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    .mobile-hamburger-btn {
        display: none !important;
    }
}

/* Mobilde Navbar Düzeni: Yalnızca Kurumsal Logo (Sol) ve Hamburger (Sağ) */
@media (max-width: 991px) {
    .site-navbar-inner {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        height: 64px !important;
        padding: 0 16px !important;
    }

    .corporate-brand-logo {
        height: 34px !important;
        width: auto !important;
        max-width: 160px !important;
    }

    .navbar-right-actions {
        display: flex !important;
        align-items: center !important;
        gap: 0 !important;
    }

    .navbar-right-actions > a {
        display: none !important;
    }

    .mobile-hamburger-btn {
        display: flex !important;
        margin: 0 !important;
    }
}



/* ==========================================================================
   HERO BANNER & TAG BADGE SPACING & RESPONSIVE OPTIMIZATION
   ========================================================================== */

/* Menü ile Hero Arasındaki Üst Boşluğu Azalt */
.umutnet-hero,
.agency-hero {
    padding: 32px 0 45px 0 !important;
}

@media (max-width: 991px) {
    .umutnet-hero,
    .agency-hero {
        padding: 20px 0 35px 0 !important;
    }
}

/* Hero Grid Tek Sütun Tam Genişlik (Sağ kutu kalktığı için ortalı/dengeli) */
.hero-grid {
    display: block !important;
    max-width: 860px !important;
    margin: 0 auto !important;
}

/* "İzmir / Urla Kurumsal Yazılım & Dijital Tasarım Ajansı" Rozetinin Boşluğu & Responsive Ayarı */
.hero-tag-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 6px 14px !important;
    background: #eff6ff !important;
    border: 1px solid #bfdbfe !important;
    border-radius: 30px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #1d4ed8 !important;
    margin-top: 0 !important;
    margin-bottom: 14px !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.hero-tag-badge span {
    line-height: 1.3 !important;
}

@media (max-width: 768px) {
    .hero-tag-badge {
        font-size: 11.5px !important;
        padding: 5px 12px !important;
        margin-bottom: 12px !important;
    }

    .hero-title {
        font-size: 28px !important;
        line-height: 1.25 !important;
        margin-bottom: 12px !important;
    }

    .hero-desc {
        font-size: 14.5px !important;
        line-height: 1.5 !important;
        margin-bottom: 20px !important;
    }

    .agency-hero-actions {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        width: 100% !important;
    }

    .btn-agency-primary,
    .btn-agency-whatsapp {
        width: 100% !important;
        justify-content: center !important;
        padding: 12px 18px !important;
    }
}



/* ==========================================================================
   OFFICIAL UMUTNET LOGO HIGHLIGHT & RESPONSIVE ACTION BUTTONS
   ========================================================================== */

/* Logo Highlight & Sizing */
.brand-highlight-logo {
    display: block !important;
    height: 48px !important;
    width: auto !important;
    max-width: 210px !important;
    object-fit: contain !important;
    filter: drop-shadow(0 2px 8px rgba(13, 148, 136, 0.15)) !important;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), filter 0.25s ease !important;
}

.brand-link:hover .brand-highlight-logo {
    transform: translateY(-1px) scale(1.02) !important;
    filter: drop-shadow(0 4px 14px rgba(13, 148, 136, 0.28)) !important;
}

/* Navbar Flex Layout */
.site-navbar-inner {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    height: 76px !important;
    padding: 0 16px !important;
}

.navbar-right-actions {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

/* Action Buttons Styling */
.action-btn-pill {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 8px 14px !important;
    border-radius: 9px !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    -webkit-tap-highlight-color: transparent !important;
}

.btn-client-pill {
    background: #f1f5f9 !important;
    border: 1px solid #e2e8f0 !important;
    color: #334155 !important;
}

.btn-client-pill:hover,
.btn-client-pill:active {
    background: #e2e8f0 !important;
    color: #0f172a !important;
    transform: translateY(-1px) !important;
}

.btn-primary-pill {
    background: linear-gradient(135deg, #2563eb 0%, #0284c7 100%) !important;
    color: #ffffff !important;
    border: 1px solid transparent !important;
    box-shadow: 0 3px 12px rgba(37, 99, 235, 0.28) !important;
}

.btn-primary-pill:hover,
.btn-primary-pill:active {
    background: linear-gradient(135deg, #1d4ed8 0%, #0369a1 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 5px 16px rgba(37, 99, 235, 0.38) !important;
    transform: translateY(-1px) !important;
}

/* Responsive Breakpoints for Mobile & Tablet */
@media (max-width: 991px) {
    .site-navbar-inner {
        height: 66px !important;
        padding: 0 12px !important;
    }

    .brand-highlight-logo {
        height: 38px !important;
        max-width: 155px !important;
    }

    .navbar-right-actions {
        gap: 6px !important;
    }

    .action-btn-pill {
        padding: 7px 11px !important;
        font-size: 12.5px !important;
        border-radius: 8px !important;
    }

    .mobile-hamburger-btn {
        width: 38px !important;
        height: 38px !important;
        border-radius: 8px !important;
        margin-left: 2px !important;
    }
}

/* Extra Small Phones (< 400px) */
@media (max-width: 420px) {
    .brand-highlight-logo {
        height: 33px !important;
        max-width: 130px !important;
    }

    .action-btn-pill {
        padding: 6px 9px !important;
        font-size: 11.5px !important;
        gap: 4px !important;
    }

    .action-btn-pill i {
        font-size: 12px !important;
    }
}



/* ==========================================================================
   LOGO %50 ENLARGE, TRANSPARENCY & REMOVE BLUE STRIP (ALERT-INFO)
   ========================================================================== */

/* 1. Mavi Şeriti (Boş Alert-Info) Tasarımdan Tamamen Kaldır */
.site-main > .alert,
.site-main > .alert-info,
.alert:empty {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}

/* 2. Logoyu %50 Büyüt ve Şeffaf / Ferah Yap */
.brand-link {
    display: inline-flex !important;
    align-items: center !important;
    background: transparent !important;
}

/* Masaüstü: Normal 48px -> %50 büyütülerek 72px yapıldı */
.brand-highlight-logo {
    display: block !important;
    height: 72px !important;
    width: auto !important;
    max-width: 310px !important;
    object-fit: contain !important;
    background: transparent !important;
    opacity: 0.95 !important;
    filter: drop-shadow(0 2px 10px rgba(13, 148, 136, 0.2)) !important;
    transition: opacity 0.2s ease, transform 0.2s ease !important;
}

.brand-link:hover .brand-highlight-logo {
    opacity: 1 !important;
    transform: translateY(-1px) scale(1.02) !important;
}

/* Navbar Yüksekliği ve Boşluk Düzeni (Büyük logo için 86px) */
.site-navbar-inner {
    height: 86px !important;
}

/* 3. Mobilde Logo Boyutlandırma (%50 Büyütme: 38px -> 56px) */
@media (max-width: 991px) {
    .site-navbar-inner {
        height: 74px !important;
        padding: 0 14px !important;
    }

    .brand-highlight-logo {
        height: 56px !important;
        max-width: 210px !important;
    }

    .corp-drawer-logo {
        height: 50px !important;
        max-width: 200px !important;
        background: transparent !important;
    }
}

@media (max-width: 420px) {
    .site-navbar-inner {
        height: 68px !important;
        padding: 0 10px !important;
    }

    .brand-highlight-logo {
        height: 48px !important;
        max-width: 175px !important;
    }
}



/* ==========================================================================
   PERFECT PROPORTIONED TRANSPARENT LOGO & ENTERPRISE NAVBAR SIZING
   ========================================================================== */

/* Navbar Container: Estetik, Ferah ve Dengeli Yükseklik */
.site-navbar-inner {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    height: 78px !important;
    padding: 0 16px !important;
}

/* Şeffaf ve Tasarımla Kusursuz Orantılı Logo */
.brand-link {
    display: inline-flex !important;
    align-items: center !important;
    background: transparent !important;
    text-decoration: none !important;
}

.brand-highlight-logo {
    display: block !important;
    height: 52px !important;
    width: auto !important;
    max-width: 230px !important;
    object-fit: contain !important;
    background: transparent !important;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.06)) !important;
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.brand-link:hover .brand-highlight-logo {
    transform: translateY(-1px) scale(1.02) !important;
}

/* Mobil Çekmecedeki Logo */
.corp-drawer-logo {
    display: block !important;
    height: 44px !important;
    width: auto !important;
    max-width: 180px !important;
    object-fit: contain !important;
    background: transparent !important;
}

/* Tablet & Mobil Görünüm Boyutlandırması */
@media (max-width: 991px) {
    .site-navbar-inner {
        height: 66px !important;
        padding: 0 12px !important;
    }

    .brand-highlight-logo {
        height: 42px !important;
        max-width: 175px !important;
    }

    .action-btn-pill {
        padding: 7px 11px !important;
        font-size: 12px !important;
    }

    .mobile-hamburger-btn {
        width: 38px !important;
        height: 38px !important;
    }
}

@media (max-width: 420px) {
    .site-navbar-inner {
        height: 62px !important;
        padding: 0 8px !important;
    }

    .brand-highlight-logo {
        height: 36px !important;
        max-width: 145px !important;
    }

    .action-btn-pill {
        padding: 6px 8px !important;
        font-size: 11px !important;
    }
}



/* ==========================================================================
   STICKY SCROLL HEADER & BULLETPROOF MOBILE TOUCH BUTTONS
   ========================================================================== */

/* Sayfa Kaydırıldığında Üst Menünün Sabit Kalması (Sticky Navigation) */
html, body {
    overflow-x: hidden !important;
}

body.drawer-open {
    overflow: hidden !important;
}

.site-header-v4 {
    position: sticky !important;
    position: -webkit-sticky !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    background: rgba(255, 255, 255, 0.98) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    border-bottom: 1px solid rgba(226, 232, 240, 0.85) !important;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05) !important;
    z-index: 10000 !important;
    transition: box-shadow 0.25s ease, background 0.25s ease !important;
}

/* Dokunmatik Butonların Yanıt Verme Hassasiyeti (Touch Feedback) */
.mobile-hamburger-btn {
    cursor: pointer !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
    z-index: 10001 !important;
    position: relative !important;
}

.mobile-hamburger-btn:active {
    background: #e2e8f0 !important;
    transform: scale(0.92) !important;
}

.corp-drawer-close {
    cursor: pointer !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
}

.corp-drawer-close:active {
    background: #e2e8f0 !important;
    transform: scale(0.92) !important;
}

.corp-acc-btn {
    cursor: pointer !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
}

.corp-acc-btn:active {
    background: #f1f5f9 !important;
}

.corp-nav-link {
    cursor: pointer !important;
    touch-action: manipulation !important;
}

.corp-nav-link:active {
    background: #eff6ff !important;
    color: #2563eb !important;
}

/* Çekmece Z-Index ve Dokunma Güvenliği */
.corporate-drawer-overlay {
    z-index: 99998 !important;
    touch-action: manipulation !important;
}

.corporate-drawer-panel {
    z-index: 99999 !important;
}


/* ==========================================================================
   ALTTTAKİ MAVİ ŞERİT / HERO GRADIENT TEMİZLİĞİ VE BEYAZ KURUMSAL ZEMİN
   ========================================================================== */
.umutnet-hero,
.agency-hero,
section.umutnet-hero,
section.agency-hero {
    background: #ffffff !important;
    background-image: none !important;
    border-top: none !important;
}

.site-header-v4 {
    border-bottom: 1px solid #f1f5f9 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03) !important;
}


/* ==========================================================================
   UMUTNET SERVICE DETAIL PAGES & PRICING STYLES
   ========================================================================== */

.service-detail-wrapper {
    background-color: #f8fafc;
    min-height: 80vh;
}

/* Service Detail Hero */
.service-detail-hero {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0369a1 100%);
    color: #ffffff;
    padding: 70px 0 60px 0;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.service-detail-hero::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: radial-gradient(circle at 50% 20%, rgba(2, 132, 199, 0.25) 0%, transparent 70%);
    pointer-events: none;
}

.service-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 6px 18px;
    border-radius: 50px;
    font-size: 13.5px;
    font-weight: 700;
    color: #38bdf8;
    margin-bottom: 20px;
    letter-spacing: 0.5px;
}

.service-hero-title {
    font-size: 42px;
    font-weight: 800;
    line-height: 1.25;
    margin-bottom: 18px;
    color: #ffffff;
    letter-spacing: -0.5px;
}

.service-hero-desc {
    max-width: 780px;
    margin: 0 auto 30px auto;
    font-size: 17px;
    line-height: 1.65;
    color: #cbd5e1;
}

.service-hero-actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px;
}

.btn-srv-action {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 13px 26px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 15px;
    text-decoration: none;
    transition: all 0.25s ease;
}

.btn-srv-primary {
    background: #0284c7;
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(2, 132, 199, 0.4);
}
.btn-srv-primary:hover {
    background: #0369a1;
    color: #ffffff;
    transform: translateY(-2px);
}

.btn-srv-secondary {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.25);
}
.btn-srv-secondary:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
    transform: translateY(-2px);
}

.btn-srv-wa {
    background: #25d366;
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(37, 211, 102, 0.3);
}
.btn-srv-wa:hover {
    background: #1eb956;
    color: #ffffff;
    transform: translateY(-2px);
}

/* Highlights Band */
.service-highlights-band {
    background: #ffffff;
    border-bottom: 1px solid #e2e8f0;
    padding: 24px 0;
}

.highlights-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.highlight-item {
    display: flex;
    align-items: center;
    gap: 15px;
}

.highlight-item i {
    font-size: 26px;
    color: #0284c7;
    background: #e0f2fe;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    flex-shrink: 0;
}

.highlight-item strong {
    display: block;
    font-size: 14.5px;
    color: #0f172a;
    font-weight: 700;
}

.highlight-item span {
    font-size: 12.5px;
    color: #64748b;
}

/* Service Content Section */
.service-content-section {
    padding: 70px 0;
}

.sec-heading-center {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 50px auto;
}

.sub-pill {
    display: inline-block;
    background: #e0f2fe;
    color: #0369a1;
    font-size: 13px;
    font-weight: 700;
    padding: 5px 14px;
    border-radius: 20px;
    margin-bottom: 14px;
    letter-spacing: 0.5px;
}

.sec-heading-center h2 {
    font-size: 32px;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 12px;
    letter-spacing: -0.5px;
}

.sec-heading-center p {
    font-size: 16px;
    color: #64748b;
    line-height: 1.6;
}

/* Triple Grid */
.features-triple-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.feat-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 35px 28px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.02);
}

.feat-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 32px -4px rgba(0,0,0,0.08);
    border-color: #cbd5e1;
}

.f-icon {
    width: 60px;
    height: 60px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin-bottom: 22px;
}

.f-icon.bg-blue { background: #e0f2fe; color: #0284c7; }
.f-icon.bg-green { background: #dcfce7; color: #16a34a; }
.f-icon.bg-purple { background: #f3e8ff; color: #9333ea; }
.f-icon.bg-cyan { background: #cffafe; color: #0891b2; }
.f-icon.bg-orange { background: #ffedd5; color: #ea580c; }

.feat-card h3 {
    font-size: 20px;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 12px;
}

.feat-card p {
    font-size: 14.5px;
    color: #64748b;
    line-height: 1.65;
    margin: 0;
}

/* Pricing Grid */
.service-pricing-section {
    padding: 70px 0 90px 0;
    background: #f1f5f9;
}

.service-pricing-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 35px;
    max-width: 980px;
    margin: 0 auto;
}

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

.srv-price-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    padding: 36px 32px;
    position: relative;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.03);
    transition: all 0.3s ease;
}

.srv-price-card.popular {
    border: 2px solid #0284c7;
    box-shadow: 0 16px 36px -4px rgba(2, 132, 199, 0.15);
}

.popular-tag {
    position: absolute;
    top: -14px;
    right: 28px;
    background: #0284c7;
    color: #ffffff;
    font-size: 12px;
    font-weight: 800;
    padding: 4px 14px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.p-header {
    border-bottom: 1px solid #f1f5f9;
    padding-bottom: 24px;
    margin-bottom: 24px;
}

.p-type {
    display: inline-block;
    font-size: 12.5px;
    font-weight: 700;
    text-transform: uppercase;
    color: #0284c7;
    margin-bottom: 8px;
    letter-spacing: 0.5px;
}

.p-header h3 {
    font-size: 23px;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 8px;
}

.p-header p {
    font-size: 14px;
    color: #64748b;
    line-height: 1.5;
    margin-bottom: 18px;
    min-height: 42px;
}

.p-amount {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.p-amount .cur {
    font-size: 22px;
    font-weight: 700;
    color: #0f172a;
}

.p-amount .val {
    font-size: 38px;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -1px;
}

.p-amount .term {
    font-size: 13px;
    color: #64748b;
    font-weight: 500;
}

.p-specs {
    list-style: none;
    padding: 0;
    margin: 0 0 30px 0;
    flex-grow: 1;
}

.p-specs li {
    display: flex;
    align-items: center;
    gap: 11px;
    font-size: 14.5px;
    color: #334155;
    margin-bottom: 12px;
}

.p-specs li i {
    color: #10b981;
    font-size: 15px;
    flex-shrink: 0;
}

.p-actions {
    display: flex;
    gap: 10px;
    margin-top: auto;
}

.btn-srv-buy {
    flex: 1;
    background: #0f172a;
    color: #ffffff;
    text-align: center;
    padding: 13px 18px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 14.5px;
    text-decoration: none;
    transition: all 0.2s ease;
}

.btn-srv-buy:hover {
    background: #1e293b;
    color: #ffffff;
}

.btn-srv-buy.btn-popular {
    background: #0284c7;
    box-shadow: 0 4px 14px rgba(2, 132, 199, 0.35);
}

.btn-srv-buy.btn-popular:hover {
    background: #0369a1;
}

.btn-srv-inquire {
    padding: 13px 18px;
    border-radius: 12px;
    background: #f1f5f9;
    color: #334155;
    font-weight: 700;
    font-size: 14.5px;
    text-decoration: none;
    border: 1px solid #cbd5e1;
    transition: all 0.2s ease;
}

.btn-srv-inquire:hover {
    background: #e2e8f0;
    color: #0f172a;
}

/* CTA Custom Box */
.cta-custom-box {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    border-radius: 20px;
    padding: 50px 45px;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}

.cta-custom-box h3 {
    font-size: 28px;
    font-weight: 800;
    margin-bottom: 12px;
    color: #ffffff;
}

.cta-custom-box p {
    font-size: 16px;
    color: #cbd5e1;
    margin: 0;
    max-width: 600px;
    line-height: 1.6;
}

.btn-cta-giant {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: #0284c7;
    color: #ffffff;
    font-weight: 800;
    font-size: 16px;
    padding: 16px 30px;
    border-radius: 14px;
    text-decoration: none;
    box-shadow: 0 6px 20px rgba(2, 132, 199, 0.4);
    transition: all 0.25s ease;
    white-space: nowrap;
}

.btn-cta-giant:hover {
    background: #0369a1;
    color: #ffffff;
    transform: translateY(-2px);
}

/* Responsive Media Queries */
@media (max-width: 991px) {
    .highlights-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .features-triple-grid {
        grid-template-columns: 1fr;
    }
    .service-pricing-grid,
    .service-pricing-grid-3 {
        grid-template-columns: 1fr;
        max-width: 480px;
    }
    .cta-custom-box {
        flex-direction: column;
        text-align: center;
    }
    .btn-cta-giant {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 640px) {
    .service-hero-title {
        font-size: 30px;
    }
    .highlights-grid {
        grid-template-columns: 1fr;
    }
    .btn-srv-action {
        width: 100%;
        justify-content: center;
    }
}
`;


/* ==========================================================================
   UMUTNET TAKSİT SEÇENEKLERİ ÖZEL SAYFA STİLLERİ
   ========================================================================== */

.un-taksit-page-wrapper {
    background-color: #f8fafc;
    color: #1e293b;
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* HERO SECTION */
.un-taksit-hero {
    background: linear-gradient(135deg, #090e1a 0%, #0f172a 45%, #0369a1 100%);
    color: #ffffff;
    padding: 80px 0 70px 0;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.un-taksit-hero::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: radial-gradient(circle at 50% 20%, rgba(56, 189, 248, 0.18) 0%, transparent 75%);
    pointer-events: none;
}

.hero-inner-box {
    max-width: 900px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(8px);
    padding: 7px 20px;
    border-radius: 50px;
    font-size: 13.5px;
    font-weight: 700;
    color: #38bdf8;
    margin-bottom: 24px;
}

.badge-dot-pulse {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #38bdf8;
    box-shadow: 0 0 10px #38bdf8;
    animation: pulseGlow 1.8s infinite;
}

@keyframes pulseGlow {
    0% { transform: scale(0.95); opacity: 0.8; }
    50% { transform: scale(1.3); opacity: 1; }
    100% { transform: scale(0.95); opacity: 0.8; }
}

.hero-headline {
    font-size: 46px;
    font-weight: 800;
    line-height: 1.22;
    margin-bottom: 20px;
    color: #ffffff;
    letter-spacing: -0.6px;
}

.text-gradient {
    background: linear-gradient(135deg, #38bdf8 0%, #7dd3fc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-subtext {
    font-size: 17.5px;
    line-height: 1.7;
    color: #cbd5e1;
    margin-bottom: 35px;
}

.hero-trust-row {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
}

.trust-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.12);
    padding: 8px 16px;
    border-radius: 10px;
    font-size: 13.5px;
    font-weight: 600;
    color: #e2e8f0;
}

.trust-pill i {
    color: #38bdf8;
    font-size: 15px;
}

/* CALCULATOR & INTERACTIVE SECTION */
.un-calc-section {
    padding: 60px 0 70px 0;
    margin-top: -30px;
    position: relative;
    z-index: 10;
}

.un-calc-card {
    background: #ffffff;
    border-radius: 20px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 20px 45px -10px rgba(15, 23, 42, 0.08);
    overflow: hidden;
}

.calc-header-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
    padding: 30px 35px;
    background: #ffffff;
    border-bottom: 1px solid #f1f5f9;
}

.calc-title-box {
    display: flex;
    align-items: center;
    gap: 18px;
}

.calc-title-box .icon-wrap {
    width: 54px;
    height: 54px;
    background: #e0f2fe;
    color: #0284c7;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
}

.calc-title-box h3 {
    font-size: 22px;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 4px 0;
}

.calc-title-box p {
    font-size: 14px;
    color: #64748b;
    margin: 0;
}

.amount-quick-picker {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.picker-label {
    font-size: 13.5px;
    font-weight: 700;
    color: #475569;
    margin-right: 4px;
}

.btn-quick-amount {
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    color: #334155;
    font-size: 13px;
    font-weight: 700;
    padding: 7px 16px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-quick-amount:hover {
    background: #e2e8f0;
    color: #0f172a;
}

.btn-quick-amount.active {
    background: #0284c7;
    border-color: #0284c7;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(2, 132, 199, 0.3);
}

/* Input Row */
.calc-input-row {
    padding: 20px 35px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 15px;
}

.input-group-modern {
    display: flex;
    align-items: center;
    position: relative;
    max-width: 420px;
    width: 100%;
}

.currency-symbol {
    position: absolute;
    left: 16px;
    font-size: 18px;
    font-weight: 700;
    color: #64748b;
    pointer-events: none;
    z-index: 2;
}

.calc-input {
    width: 100%;
    padding: 12px 16px 12px 38px;
    border: 1px solid #cbd5e1;
    border-radius: 12px 0 0 12px;
    font-size: 16px;
    font-weight: 700;
    color: #0f172a;
    outline: none;
    transition: border-color 0.2s;
    background: #ffffff;
}

.calc-input:focus {
    border-color: #0284c7;
    box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.15);
}

.btn-calc-update {
    background: #0f172a;
    color: #ffffff;
    border: none;
    padding: 0 22px;
    height: 48px;
    border-radius: 0 12px 12px 0;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    transition: background 0.2s;
}

.btn-calc-update:hover {
    background: #0284c7;
}

.calc-info-pill {
    font-size: 13px;
    color: #64748b;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.calc-info-pill i {
    color: #0284c7;
}

/* PayTR Display Frame */
.paytr-display-frame {
    padding: 35px;
    background: #ffffff;
    min-height: 250px;
    position: relative;
}

.paytr-loading-spinner {
    text-align: center;
    padding: 40px;
    font-size: 16px;
    font-weight: 700;
    color: #0284c7;
}

/* BANKS SHOWCASE STRIP */
.un-banks-strip {
    padding: 70px 0;
    background: #ffffff;
    border-top: 1px solid #e2e8f0;
    border-bottom: 1px solid #e2e8f0;
}

.strip-header {
    max-width: 650px;
    margin: 0 auto 40px auto;
}

.sub-badge {
    display: inline-block;
    background: #e0f2fe;
    color: #0369a1;
    font-size: 12.5px;
    font-weight: 800;
    padding: 5px 14px;
    border-radius: 30px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
}

.strip-header h3 {
    font-size: 28px;
    font-weight: 800;
    color: #0f172a;
}

.banks-grid-showcase {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.bank-card-item {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 24px 20px;
    text-align: center;
    transition: all 0.25s ease;
}

.bank-card-item:hover {
    transform: translateY(-4px);
    background: #ffffff;
    border-color: #38bdf8;
    box-shadow: 0 12px 24px -4px rgba(2, 132, 199, 0.12);
}

.bank-logo-wrap {
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
}

.bank-logo-wrap img {
    max-height: 32px;
    max-width: 130px;
    object-fit: contain;
}

.bank-card-item strong {
    display: block;
    font-size: 16px;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 4px;
}

.bank-card-item span {
    font-size: 12.5px;
    color: #64748b;
    line-height: 1.4;
    display: block;
}

/* PROCESS & FEATURES */
.un-features-section {
    padding: 80px 0;
}

.sec-h2 {
    font-size: 34px;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 30px;
    letter-spacing: -0.5px;
}

.steps-vertical {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.step-v-item {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

.step-num {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #0284c7;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 800;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(2, 132, 199, 0.35);
}

.step-text h4 {
    font-size: 17px;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 6px 0;
}

.step-text p {
    font-size: 14.5px;
    color: #64748b;
    margin: 0;
    line-height: 1.6;
}

/* Security Card Box */
.security-card-box {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    padding: 38px 34px;
    box-shadow: 0 10px 30px -5px rgba(0,0,0,0.04);
}

.sec-box-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-bottom: 24px;
    border-bottom: 1px solid #f1f5f9;
    margin-bottom: 24px;
}

.sec-shield-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: #dcfce7;
    color: #16a34a;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}

.sec-box-header h3 {
    font-size: 21px;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 4px 0;
}

.sec-box-header p {
    font-size: 13.5px;
    color: #64748b;
    margin: 0;
}

.sec-checklist {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.check-row {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.check-row i {
    color: #16a34a;
    font-size: 18px;
    margin-top: 3px;
    flex-shrink: 0;
}

.check-row strong {
    display: block;
    font-size: 15px;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 3px;
}

.check-row span {
    font-size: 13.5px;
    color: #64748b;
    line-height: 1.5;
}

/* FAQ ACCORDION */
.un-faq-section {
    padding: 70px 0 80px 0;
    background: #f1f5f9;
}

.faq-accordion-wrap {
    max-width: 820px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.un-faq-item {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    overflow: hidden;
    transition: all 0.2s ease;
}

.un-faq-item summary {
    padding: 20px 24px;
    font-size: 16px;
    font-weight: 700;
    color: #0f172a;
    cursor: pointer;
    list-style: none;
    position: relative;
    user-select: none;
}

.un-faq-item summary::-webkit-details-marker {
    display: none;
}

.un-faq-item summary::after {
    content: '+';
    position: absolute;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
    color: #0284c7;
    font-weight: 800;
}

.un-faq-item[open] summary::after {
    content: '−';
}

.faq-answer {
    padding: 0 24px 22px 24px;
    font-size: 14.5px;
    line-height: 1.65;
    color: #64748b;
}

.faq-answer p {
    margin: 0;
}

/* BOTTOM CTA BANNER */
.un-cta-banner {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    color: #ffffff;
    padding: 60px 0;
    text-align: center;
}

.cta-banner-content h2 {
    font-size: 32px;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 12px;
}

.cta-banner-content p {
    font-size: 16px;
    color: #cbd5e1;
    max-width: 600px;
    margin: 0 auto 30px auto;
}

.cta-actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
}

.btn-cta-light, .btn-cta-blue, .btn-cta-wa {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 13px 26px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 15px;
    text-decoration: none;
    transition: all 0.25s ease;
}

.btn-cta-light {
    background: #ffffff;
    color: #0f172a;
}
.btn-cta-light:hover {
    background: #f1f5f9;
    color: #0f172a;
    transform: translateY(-2px);
}

.btn-cta-blue {
    background: #0284c7;
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(2, 132, 199, 0.4);
}
.btn-cta-blue:hover {
    background: #0369a1;
    color: #ffffff;
    transform: translateY(-2px);
}

.btn-cta-wa {
    background: #25d366;
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(37, 211, 102, 0.3);
}
.btn-cta-wa:hover {
    background: #1eb956;
    color: #ffffff;
    transform: translateY(-2px);
}

/* RESPONSIVE BREAKPOINTS */
@media (max-width: 991px) {
    .hero-headline {
        font-size: 34px;
    }
    .banks-grid-showcase {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .hero-headline {
        font-size: 28px;
    }
    .hero-subtext {
        font-size: 15px;
    }
    .calc-header-bar {
        padding: 20px;
    }
    .calc-input-row {
        padding: 16px 20px;
    }
    .paytr-display-frame {
        padding: 20px 14px;
    }
    .banks-grid-showcase {
        grid-template-columns: 1fr;
    }
    .input-group-modern {
        flex-direction: column;
    }
    .calc-input {
        border-radius: 12px;
        margin-bottom: 8px;
    }
    .btn-calc-update {
        width: 100%;
        border-radius: 12px;
        justify-content: center;
    }
}
`;


/* ==========================================================================
   UMUTNET LEGAL PAGES STYLING (PAYTR COMPLIANT)
   ========================================================================== */

.legal-doc-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    padding: 50px 45px;
    box-shadow: 0 10px 30px -5px rgba(15, 23, 42, 0.04);
    max-width: 960px;
    margin: 0 auto;
}

.legal-header {
    border-bottom: 2px solid #f1f5f9;
    padding-bottom: 25px;
    margin-bottom: 35px;
}

.legal-header h1 {
    font-size: 32px;
    font-weight: 800;
    color: #0f172a;
    margin: 12px 0 6px 0;
    letter-spacing: -0.5px;
}

.legal-content h3 {
    font-size: 19px;
    font-weight: 700;
    color: #0f172a;
    margin: 28px 0 12px 0;
}

.legal-content p {
    font-size: 15px;
    line-height: 1.75;
    color: #475569;
    margin-bottom: 16px;
}

.legal-content ul {
    margin: 10px 0 20px 20px;
    padding: 0;
}

.legal-content ul li {
    font-size: 15px;
    line-height: 1.75;
    color: #475569;
    margin-bottom: 10px;
}

.legal-content a {
    color: #0284c7;
    font-weight: 600;
    text-decoration: underline;
}

@media (max-width: 768px) {
    .legal-doc-card {
        padding: 30px 20px;
    }
    .legal-header h1 {
        font-size: 25px;
    }
}


/* ==========================================================================
   LAGOM 2 MODERN STYLE & DEFAULT LAYOUT SYSTEM (CLONE FOR UMUTNET)
   Inspired by RS Studio Lagom Modern Theme
   ========================================================================== */

:root {
    /* Lagom Brand & Accents */
    --lagom-primary: #065CFE;
    --lagom-primary-hover: #004ecc;
    --lagom-primary-light: #EBF2FE;
    --lagom-primary-border: #C2D6FF;
    --lagom-secondary: #0f172a;
    
    /* Neutrals & Grays */
    --lagom-bg: #F8FAFC;
    --lagom-card-bg: #FFFFFF;
    --lagom-border: #E2E8F0;
    --lagom-border-light: #F1F5F9;
    --lagom-text-main: #1E293B;
    --lagom-text-muted: #64748B;
    --lagom-text-light: #94A3B8;

    /* Shadows & Radii */
    --lagom-radius-sm: 8px;
    --lagom-radius: 12px;
    --lagom-radius-lg: 16px;
    --lagom-radius-xl: 20px;
    --lagom-shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.05), 0 1px 2px 0 rgba(0, 0, 0, 0.03);
    --lagom-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
    --lagom-shadow-lg: 0 10px 25px -5px rgba(0, 0, 0, 0.06), 0 8px 10px -6px rgba(0, 0, 0, 0.03);
    --lagom-shadow-hover: 0 14px 28px rgba(6, 92, 254, 0.12), 0 10px 10px rgba(0, 0, 0, 0.04);
}

/* Base Body Application */
body {
    background-color: var(--lagom-bg) !important;
    color: var(--lagom-text-main) !important;
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    -webkit-font-smoothing: antialiased;
}

/* ==========================================================================
   1. LAGOM DEFAULT NAVBAR / HEADER
   ========================================================================== */
.site-header-v4 {
    background: #ffffff !important;
    border-bottom: 1px solid var(--lagom-border) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03) !important;
    padding: 12px 0 !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
}

.site-navbar-inner {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

/* Nav Menu Links (Lagom Style) */
.desktop-nav-menu .nav-menu-link {
    color: var(--lagom-text-main) !important;
    font-size: 14.5px !important;
    font-weight: 600 !important;
    padding: 8px 16px !important;
    border-radius: var(--lagom-radius-sm) !important;
    transition: all 0.2s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.desktop-nav-menu .nav-menu-link:hover {
    color: var(--lagom-primary) !important;
    background: var(--lagom-primary-light) !important;
}

.desktop-nav-menu .nav-arrow {
    font-size: 11px !important;
    color: var(--lagom-text-muted) !important;
    transition: transform 0.2s ease !important;
}

.nav-item-dropdown:hover .nav-arrow {
    transform: rotate(180deg) !important;
    color: var(--lagom-primary) !important;
}

/* Dropdown Menu (Lagom Float Card) */
.nav-floating-dropdown {
    background: #ffffff !important;
    border: 1px solid var(--lagom-border) !important;
    border-radius: var(--lagom-radius-lg) !important;
    box-shadow: var(--lagom-shadow-lg) !important;
    padding: 20px !important;
    margin-top: 10px !important;
}

.dropdown-head-tag {
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 0.8px !important;
    color: var(--lagom-text-light) !important;
    text-transform: uppercase !important;
    margin-bottom: 14px !important;
}

.dropdown-item-card {
    padding: 10px 14px !important;
    border-radius: var(--lagom-radius) !important;
    transition: all 0.2s ease !important;
    border: 1px solid transparent !important;
}

.dropdown-item-card:hover {
    background: var(--lagom-bg) !important;
    border-color: var(--lagom-border) !important;
    transform: translateX(4px) !important;
}

.dropdown-item-card .item-title {
    color: var(--lagom-text-main) !important;
    font-weight: 700 !important;
    font-size: 14px !important;
}

.dropdown-item-card .item-desc {
    color: var(--lagom-text-muted) !important;
    font-size: 12.5px !important;
}

/* Navbar Buttons (Lagom Modern Style) */
.btn-client-pill {
    background: #ffffff !important;
    border: 1px solid var(--lagom-border) !important;
    color: var(--lagom-text-main) !important;
    font-weight: 700 !important;
    font-size: 13.5px !important;
    border-radius: var(--lagom-radius-sm) !important;
    padding: 8px 18px !important;
    transition: all 0.2s ease !important;
}

.btn-client-pill:hover {
    border-color: var(--lagom-primary) !important;
    color: var(--lagom-primary) !important;
    background: var(--lagom-primary-light) !important;
}

.btn-primary-pill {
    background: var(--lagom-primary) !important;
    border: 1px solid var(--lagom-primary) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 13.5px !important;
    border-radius: var(--lagom-radius-sm) !important;
    padding: 8px 20px !important;
    box-shadow: 0 4px 12px rgba(6, 92, 254, 0.25) !important;
    transition: all 0.2s ease !important;
}

.btn-primary-pill:hover {
    background: var(--lagom-primary-hover) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 16px rgba(6, 92, 254, 0.35) !important;
}

/* ==========================================================================
   2. LAGOM MODERN HERO (PORTAL HOME BANNER)
   ========================================================================== */
.umutnet-hero.agency-hero {
    background: linear-gradient(135deg, #090e1a 0%, #0c1730 60%, #065CFE 100%) !important;
    padding: 80px 0 70px 0 !important;
    color: #ffffff !important;
    position: relative !important;
    overflow: hidden !important;
}

.agency-hero .hero-tag-badge {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 30px !important;
    padding: 6px 18px !important;
    color: #38bdf8 !important;
    font-weight: 700 !important;
    font-size: 13px !important;
}

.agency-hero .hero-title {
    color: #ffffff !important;
    font-size: 44px !important;
    font-weight: 800 !important;
    letter-spacing: -0.6px !important;
    line-height: 1.25 !important;
    margin: 20px 0 15px 0 !important;
}

.agency-hero .hero-title .text-highlight {
    color: #38bdf8 !important;
    background: linear-gradient(90deg, #38bdf8, #60a5fa);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.agency-hero .hero-desc {
    color: #cbd5e1 !important;
    font-size: 17px !important;
    line-height: 1.6 !important;
}

.agency-hero .trust-item {
    color: #cbd5e1 !important;
}

.agency-hero .trust-item i {
    color: #34d399 !important;
}

.agency-hero .btn-agency-primary {
    background: var(--lagom-primary) !important;
    border-radius: var(--lagom-radius) !important;
    padding: 14px 28px !important;
    font-weight: 700 !important;
    box-shadow: 0 6px 20px rgba(6, 92, 254, 0.4) !important;
}

.agency-hero .btn-agency-primary:hover {
    background: var(--lagom-primary-hover) !important;
    transform: translateY(-2px) !important;
}

/* ==========================================================================
   3. LAGOM CARDS & SERVICE PACKAGES
   ========================================================================== */
.srv-nav-card.agency-card,
.pkg-card,
.srv-price-card {
    background: #ffffff !important;
    border: 1px solid var(--lagom-border) !important;
    border-radius: var(--lagom-radius-lg) !important;
    box-shadow: var(--lagom-shadow-sm) !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.srv-nav-card.agency-card:hover,
.pkg-card:hover,
.srv-price-card:hover {
    transform: translateY(-4px) !important;
    border-color: var(--lagom-primary-border) !important;
    box-shadow: var(--lagom-shadow-hover) !important;
}

.pkg-card.popular,
.srv-price-card.popular {
    border: 2px solid var(--lagom-primary) !important;
    box-shadow: 0 10px 30px -5px rgba(6, 92, 254, 0.15) !important;
}

.popular-ribbon,
.popular-tag {
    background: var(--lagom-primary) !important;
    color: #ffffff !important;
    font-weight: 800 !important;
    border-radius: 20px !important;
    font-size: 11.5px !important;
}

.btn-pkg,
.btn-srv-buy {
    background: var(--lagom-secondary) !important;
    border-radius: var(--lagom-radius) !important;
    font-weight: 700 !important;
    transition: all 0.2s ease !important;
}

.btn-pkg:hover,
.btn-srv-buy:hover {
    background: var(--lagom-primary) !important;
}

.btn-pkg-popular,
.btn-srv-buy.btn-popular {
    background: var(--lagom-primary) !important;
    box-shadow: 0 4px 14px rgba(6, 92, 254, 0.35) !important;
}

.btn-pkg-popular:hover,
.btn-srv-buy.btn-popular:hover {
    background: var(--lagom-primary-hover) !important;
}

/* ==========================================================================
   4. LAGOM MODERN CHECKOUT (SEPET VE ODEME FORMU)
   ========================================================================== */
.order-form,
.view-cart-items,
.checkout-form {
    font-family: inherit !important;
}

/* Lagom Style Checkout Panels */
.sub-heading {
    border-bottom: 2px solid var(--lagom-border-light) !important;
    padding-bottom: 12px !important;
    margin-bottom: 20px !important;
}

.sub-heading span {
    font-size: 18px !important;
    font-weight: 800 !important;
    color: var(--lagom-text-main) !important;
    letter-spacing: -0.3px !important;
}

/* Form inputs Lagom style */
.form-control,
.form-group input,
.form-group select,
.form-group textarea {
    border-radius: var(--lagom-radius-sm) !important;
    border: 1px solid var(--lagom-border) !important;
    padding: 10px 14px !important;
    font-size: 14.5px !important;
    color: var(--lagom-text-main) !important;
    background-color: #ffffff !important;
    transition: all 0.2s ease !important;
    box-shadow: none !important;
}

.form-control:focus,
.form-group input:focus,
.form-group select:focus {
    border-color: var(--lagom-primary) !important;
    box-shadow: 0 0 0 3px rgba(6, 92, 254, 0.12) !important;
    outline: none !important;
}

/* Payment Gateway Radios into Lagom Selectable Cards */
.radio-inline {
    background: #ffffff !important;
    border: 2px solid var(--lagom-border) !important;
    border-radius: var(--lagom-radius) !important;
    padding: 16px 20px !important;
    margin: 8px 10px 8px 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    cursor: pointer !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    color: var(--lagom-text-main) !important;
    transition: all 0.2s ease !important;
    box-shadow: var(--lagom-shadow-sm) !important;
}

.radio-inline:hover {
    border-color: var(--lagom-primary-border) !important;
    background: var(--lagom-primary-light) !important;
}

.radio-inline input[type="radio"]:checked + span,
.radio-inline:has(input[type="radio"]:checked) {
    border-color: var(--lagom-primary) !important;
    background: #ffffff !important;
    box-shadow: 0 0 0 2px var(--lagom-primary), 0 8px 16px rgba(6, 92, 254, 0.1) !important;
    color: var(--lagom-primary) !important;
}

/* Lagom Sticky Order Summary Sidebar */
.order-summary,
#orderSummary {
    background: #ffffff !important;
    border: 1px solid var(--lagom-border) !important;
    border-radius: var(--lagom-radius-lg) !important;
    box-shadow: var(--lagom-shadow) !important;
    padding: 24px !important;
}

#btnCompleteOrder {
    background: var(--lagom-primary) !important;
    border: none !important;
    border-radius: var(--lagom-radius) !important;
    padding: 16px 24px !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    box-shadow: 0 6px 20px rgba(6, 92, 254, 0.35) !important;
    transition: all 0.25s ease !important;
}

#btnCompleteOrder:hover {
    background: var(--lagom-primary-hover) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 24px rgba(6, 92, 254, 0.45) !important;
}

/* ==========================================================================
   5. LAGOM MODERN FOOTER
   ========================================================================== */
.umutnet-footer {
    background: #ffffff !important;
    border-top: 1px solid var(--lagom-border) !important;
    color: var(--lagom-text-muted) !important;
    padding-top: 50px !important;
}

.footer-cta-band {
    background: linear-gradient(135deg, #090e1a 0%, #065CFE 100%) !important;
    border-radius: var(--lagom-radius-xl) !important;
    margin-bottom: 50px !important;
}

.footer-col .col-title {
    color: var(--lagom-text-main) !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    margin-bottom: 18px !important;
    letter-spacing: -0.3px !important;
}

.footer-links li a {
    color: var(--lagom-text-muted) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    transition: all 0.2s ease !important;
}

.footer-links li a:hover {
    color: var(--lagom-primary) !important;
    transform: translateX(3px) !important;
}
`;


/* Floating Dropdowns - Lagom 2 Style & Continuous Hover Bridge */
.nav-item-dropdown {
    position: relative !important;
}

.nav-floating-dropdown {
    position: absolute !important;
    top: 100% !important;
    margin-top: 0 !important;
    padding-top: 10px !important;
    left: 0 !important;
    background: #ffffff !important;
    border: 1px solid rgba(226, 232, 240, 0.95) !important;
    border-radius: 16px !important;
    box-shadow: 0 20px 45px -10px rgba(15, 23, 42, 0.16), 0 0 1px rgba(15, 23, 42, 0.1) !important;
    padding: 14px !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(6px) !important;
    transition: opacity 0.18s cubic-bezier(0.16, 1, 0.3, 1), transform 0.18s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.18s !important;
    z-index: 1080 !important;
}

/* Invisible Hover Bridge: ensures cursor never drops hover state */
.nav-floating-dropdown::before {
    content: "" !important;
    position: absolute !important;
    top: -16px !important;
    left: 0 !important;
    right: 0 !important;
    height: 20px !important;
    background: transparent !important;
    pointer-events: auto !important;
}

.nav-item-dropdown:hover .nav-floating-dropdown,
.nav-floating-dropdown:hover {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
}

.nav-floating-dropdown.mega-compact {
    width: 380px !important;
}

.nav-floating-dropdown.single-col {
    width: 340px !important;
}

.dropdown-head-tag {
    font-size: 10.5px !important;
    font-weight: 800 !important;
    color: #94a3b8 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    margin-bottom: 8px !important;
    padding: 0 4px !important;
}

.dropdown-links-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}

.dropdown-item-card {
    position: relative !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    padding: 10px !important;
    border-radius: 12px !important;
    text-decoration: none !important;
    transition: background 0.15s ease, transform 0.15s ease !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    z-index: 1090 !important;
}

.dropdown-item-card:hover {
    background: #f1f5f9 !important;
    transform: translateX(3px) !important;
}

.dropdown-item-card * {
    pointer-events: none !important;
}



/* ==========================================================================
   Lagom 2 Modern Theme System Integration - Umutnet
   ========================================================================== */

:root {
    --primary: #2563eb;
    --primary-hover: #1d4ed8;
    --primary-light: #eff6ff;
    --text-main: #0f172a;
    --text-muted: #64748b;
    --border-color: #e2e8f0;
    --surface-bg: #ffffff;
    --body-bg: #f8fafc;
    --card-radius: 14px;
    --card-shadow: 0 4px 18px -2px rgba(15, 23, 42, 0.06), 0 0 1px rgba(15, 23, 42, 0.08);
    --card-shadow-hover: 0 16px 32px -8px rgba(15, 23, 42, 0.12), 0 0 1px rgba(15, 23, 42, 0.1);
}

body {
    background-color: var(--body-bg) !important;
    color: var(--text-main) !important;
    font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    -webkit-font-smoothing: antialiased;
}

/* Global Cards & Panels (Client Area, Invoices, Services, Tickets) */
.card, .panel, .well, .tile, .table-container, .login-container {
    background: var(--surface-bg) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--card-radius) !important;
    box-shadow: var(--card-shadow) !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.card:hover, .tile:hover {
    box-shadow: var(--card-shadow-hover) !important;
}

.card-header, .panel-heading {
    background: transparent !important;
    border-bottom: 1px solid var(--border-color) !important;
    font-weight: 700 !important;
    color: var(--text-main) !important;
    padding: 16px 20px !important;
}

/* Modern Lagom Tables */
.table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
    width: 100% !important;
}

.table th {
    background: #f8fafc !important;
    color: var(--text-muted) !important;
    font-weight: 700 !important;
    font-size: 12px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    border-bottom: 1px solid var(--border-color) !important;
    padding: 12px 16px !important;
}

.table td {
    padding: 14px 16px !important;
    border-bottom: 1px solid var(--border-color) !important;
    vertical-align: middle !important;
    color: var(--text-main) !important;
    font-size: 14px !important;
}

.table tbody tr:hover td {
    background: #f8fafc !important;
}

/* Modern Form Controls */
.form-control {
    height: 44px !important;
    border-radius: 10px !important;
    border: 1px solid var(--border-color) !important;
    background: #ffffff !important;
    font-size: 14px !important;
    padding: 10px 14px !important;
    transition: border-color 0.18s ease, box-shadow 0.18s ease !important;
}

.form-control:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14) !important;
    outline: none !important;
}

/* Buttons */
.btn-primary, .btn-primary:focus {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
    color: #ffffff !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
    padding: 10px 20px !important;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.22) !important;
    transition: all 0.2s ease !important;
}

.btn-primary:hover {
    background-color: var(--primary-hover) !important;
    border-color: var(--primary-hover) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 18px rgba(37, 99, 235, 0.3) !important;
}

.btn-default, .btn-secondary {
    background: #ffffff !important;
    border: 1px solid var(--border-color) !important;
    color: #334155 !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
    padding: 10px 18px !important;
}

.btn-default:hover, .btn-secondary:hover {
    background: #f1f5f9 !important;
    color: #0f172a !important;
}

/* Badges */
.badge, .label {
    border-radius: 8px !important;
    padding: 5px 10px !important;
    font-weight: 700 !important;
    font-size: 11.5px !important;
}

.badge-success, .label-success {
    background: #ecfdf5 !important;
    color: #059669 !important;
    border: 1px solid rgba(5, 150, 105, 0.2) !important;
}

.badge-danger, .label-danger {
    background: #fef2f2 !important;
    color: #dc2626 !important;
    border: 1px solid rgba(220, 38, 38, 0.2) !important;
}

.badge-warning, .label-warning {
    background: #fffbeb !important;
    color: #d97706 !important;
    border: 1px solid rgba(217, 119, 6, 0.2) !important;
}

.badge-info, .label-info {
    background: #eff6ff !important;
    color: #2563eb !important;
    border: 1px solid rgba(37, 99, 235, 0.2) !important;
}



/* ==========================================================================
   Full Responsive & Corporate Branding Rules (Mobile, Tablet, Desktop)
   ========================================================================== */

/* Logo Visual Optimization across Header, Drawer & Footer */
.corporate-brand-logo,
.corp-drawer-logo,
.footer-brand-logo {
    object-fit: contain !important;
    image-rendering: -webkit-optimize-contrast;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.brand-link:hover .corporate-brand-logo,
.footer-brand a:hover .footer-brand-logo {
    transform: scale(1.02);
    opacity: 0.95;
}

/* Base Responsive Container */
.site-container {
    width: 100% !important;
    max-width: 1280px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
}

/* Header & Navbar Responsiveness */
.site-header-v4 {
    height: 72px !important;
    position: sticky !important;
    top: 0 !important;
    background: rgba(255, 255, 255, 0.96) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border-bottom: 1px solid rgba(226, 232, 240, 0.8) !important;
    z-index: 1000 !important;
}

.site-navbar-inner {
    height: 72px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
}

.corporate-brand-logo {
    max-height: 44px !important;
    width: auto !important;
    display: block !important;
}

/* Tablet & Mobile Breakpoints */
@media (max-width: 991px) {
    .site-header-v4 {
        height: 64px !important;
    }
    .site-navbar-inner {
        height: 64px !important;
    }
    .corporate-brand-logo {
        max-height: 38px !important;
    }
    .site-container {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    
    /* Header action pills on mobile: icon only with clean compact padding */
    .action-btn-pill {
        padding: 8px 12px !important;
        font-size: 13px !important;
    }
    .btn-text-responsive {
        display: none !important;
    }
    .action-btn-pill i {
        font-size: 14px !important;
        margin: 0 !important;
    }
    
    /* Hero Section Responsive */
    .hero-v4 {
        padding: 36px 0 40px !important;
    }
    .hero-v4 .hero-title {
        font-size: 28px !important;
        line-height: 1.25 !important;
    }
    .hero-v4 .hero-lead {
        font-size: 15px !important;
        margin-bottom: 24px !important;
    }
    .hero-v4 .hero-search-box {
        flex-direction: column !important;
        padding: 8px !important;
        border-radius: 14px !important;
    }
    .hero-v4 .hero-search-box input {
        width: 100% !important;
        height: 46px !important;
        padding: 0 12px !important;
    }
    .hero-v4 .hero-search-box button {
        width: 100% !important;
        height: 44px !important;
        justify-content: center !important;
    }
}

@media (max-width: 576px) {
    .corporate-brand-logo {
        max-height: 34px !important;
    }
    .navbar-right-actions {
        gap: 6px !important;
    }
    .action-btn-pill {
        padding: 7px 10px !important;
    }
}

/* Global Grid System Responsiveness (Cards, Products, Features) */
@media (max-width: 768px) {
    .grid-2, .grid-3, .grid-4, .row-cards, .services-grid, .pricing-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
    .card, .panel, .tile {
        padding: 16px !important;
        border-radius: 12px !important;
    }
    .footer-main .site-container {
        grid-template-columns: 1fr !important;
        gap: 32px !important;
    }
    .footer-bottom-inner {
        flex-direction: column !important;
        gap: 12px !important;
        text-align: center !important;
    }
}

/* Mobile Slide-Out Drawer Styles */
.corporate-drawer-panel {
    position: fixed !important;
    top: 0 !important;
    right: -100% !important;
    width: 320px !important;
    max-width: 85vw !important;
    height: 100% !important;
    background: #ffffff !important;
    z-index: 2000 !important;
    box-shadow: -8px 0 24px rgba(15, 23, 42, 0.15) !important;
    display: flex !important;
    flex-direction: column !important;
    transition: right 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    overflow-y: auto !important;
}

.corporate-drawer-panel.active {
    right: 0 !important;
}

.corporate-drawer-overlay {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(15, 23, 42, 0.45) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    z-index: 1999 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 0.3s ease, visibility 0.3s ease !important;
}

.corporate-drawer-overlay.active {
    opacity: 1 !important;
    visibility: visible !important;
}

.corp-drawer-header {
    height: 64px !important;
    padding: 0 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    border-bottom: 1px solid #e2e8f0 !important;
}

.corp-drawer-logo {
    max-height: 36px !important;
    width: auto !important;
}

.corp-drawer-close {
    background: none !important;
    border: none !important;
    font-size: 20px !important;
    color: #64748b !important;
    cursor: pointer !important;
    padding: 8px !important;
}



/* ==========================================================================
   Pricing Package & Service Buttons - High Contrast & Clean Style
   ========================================================================== */
.btn-pkg,
.btn-srv-buy {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    padding: 13px 20px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    border-radius: 10px !important;
    background: #f1f5f9 !important;
    color: #0f172a !important;
    border: 1px solid #cbd5e1 !important;
    text-decoration: none !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05) !important;
}

.btn-pkg:hover,
.btn-srv-buy:hover {
    background: #2563eb !important;
    color: #ffffff !important;
    border-color: #2563eb !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 18px rgba(37, 99, 235, 0.25) !important;
    text-decoration: none !important;
}

.btn-pkg-popular,
.btn-srv-buy.btn-popular {
    background: #2563eb !important;
    color: #ffffff !important;
    border-color: #2563eb !important;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35) !important;
}

.btn-pkg-popular:hover,
.btn-srv-buy.btn-popular:hover {
    background: #1d4ed8 !important;
    color: #ffffff !important;
    border-color: #1d4ed8 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 24px rgba(37, 99, 235, 0.4) !important;
}



/* ==========================================================================
   Full Corporate Dark Footer & CTA Band System Fix
   ========================================================================== */
footer,
.umutnet-footer {
    background-color: #071326 !important;
    color: #ffffff !important;
    position: relative !important;
    width: 100% !important;
    display: block !important;
    overflow: hidden !important;
}

/* Footer CTA Band (Haydi Başlayalım!) */
.footer-cta-band {
    background: linear-gradient(135deg, #090e1a 0%, #0c1730 60%, #065CFE 100%) !important;
    padding: 40px 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.cta-band-inner {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 30px !important;
    flex-wrap: wrap !important;
}

.cta-title {
    color: #ffffff !important;
    font-size: 26px !important;
    font-weight: 800 !important;
    margin: 4px 0 8px 0 !important;
}

.cta-desc {
    color: #94a3b8 !important;
    font-size: 14.5px !important;
    margin: 0 !important;
}

.cta-actions {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
}

.btn-cta-contact {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: #ffffff !important;
    color: #0f172a !important;
    font-weight: 700 !important;
    padding: 12px 24px !important;
    border-radius: 10px !important;
    text-decoration: none !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15) !important;
    transition: all 0.2s ease !important;
}

.btn-cta-contact:hover {
    background: #f1f5f9 !important;
    color: #0284c7 !important;
    transform: translateY(-2px) !important;
}

.cta-phone-link {
    color: #e2e8f0 !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.cta-phone-link:hover {
    color: #38bdf8 !important;
}

/* Footer Main Links & Columns */
.footer-main {
    background-color: #071326 !important;
    padding: 60px 0 40px 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.footer-grid {
    display: grid !important;
    grid-template-columns: 1.4fr 1fr 1fr 1.2fr !important;
    gap: 40px !important;
}

.col-title {
    color: #ffffff !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    margin-bottom: 18px !important;
    letter-spacing: -0.2px !important;
}

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

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

.footer-links li a {
    color: #94a3b8 !important;
    font-size: 14px !important;
    text-decoration: none !important;
    transition: color 0.15s ease, transform 0.15s ease !important;
    display: inline-block !important;
}

.footer-links li a:hover {
    color: #38bdf8 !important;
    transform: translateX(3px) !important;
}

.brand-desc {
    color: #94a3b8 !important;
    font-size: 13.5px !important;
    line-height: 1.6 !important;
    margin: 14px 0 18px 0 !important;
}

.footer-cert {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 10px !important;
    padding: 12px 14px !important;
    color: #cbd5e1 !important;
}

.footer-cert i {
    color: #38bdf8 !important;
    font-size: 20px !important;
}

.footer-cert strong {
    color: #ffffff !important;
    display: block !important;
    font-size: 13px !important;
}

.footer-cert p {
    color: #94a3b8 !important;
    font-size: 12px !important;
    margin: 2px 0 0 0 !important;
}

.contact-item {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    margin-bottom: 12px !important;
    color: #94a3b8 !important;
    font-size: 13.5px !important;
}

.contact-item i {
    color: #38bdf8 !important;
    margin-top: 3px !important;
}

.contact-item a {
    color: #cbd5e1 !important;
    text-decoration: none !important;
}

.contact-item a:hover {
    color: #38bdf8 !important;
}

/* Footer Bottom Copyright & Badges */
.footer-bottom {
    background-color: #040c1a !important;
    padding: 24px 0 !important;
    font-size: 13px !important;
    color: #64748b !important;
}

.footer-bottom-inner {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 16px !important;
}

.footer-bottom-links a {
    color: #94a3b8 !important;
    text-decoration: none !important;
    margin-left: 16px !important;
}

.footer-bottom-links a:hover {
    color: #ffffff !important;
}

@media (max-width: 991px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 30px !important;
    }
}

@media (max-width: 576px) {
    .footer-grid {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }
}



/* ==========================================================================
   FINAL BULLETPROOF FOOTER STYLES & CONTRAST
   ========================================================================== */
footer,
footer.umutnet-footer,
.umutnet-footer {
    background-color: #071326 !important;
    color: #ffffff !important;
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
    z-index: 10 !important;
}

/* CTA Band */
.footer-cta-band {
    background: linear-gradient(135deg, #090e1a 0%, #0c1730 60%, #065CFE 100%) !important;
    padding: 36px 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    width: 100% !important;
}

.btn-umutnet-cta,
.btn-cta-contact {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: #ffffff !important;
    color: #0f172a !important;
    font-weight: 700 !important;
    font-size: 14.5px !important;
    padding: 12px 24px !important;
    border-radius: 10px !important;
    text-decoration: none !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2) !important;
    transition: all 0.2s ease !important;
    border: none !important;
}

.btn-umutnet-cta:hover,
.btn-cta-contact:hover {
    background: #f8fafc !important;
    color: #2563eb !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25) !important;
}

.cta-phone-link {
    color: #ffffff !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.cta-phone-link:hover {
    color: #38bdf8 !important;
}

/* Footer Main Body */
.footer-main {
    background-color: #071326 !important;
    padding: 55px 0 40px 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    width: 100% !important;
}

.footer-grid {
    display: grid !important;
    grid-template-columns: 1.4fr 1fr 1fr 1.2fr !important;
    gap: 36px !important;
}

.footer-col .col-title {
    color: #ffffff !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    margin-bottom: 18px !important;
    letter-spacing: -0.2px !important;
}

.footer-links li a {
    color: #94a3b8 !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    text-decoration: none !important;
    transition: color 0.15s ease, transform 0.15s ease !important;
    display: inline-block !important;
}

.footer-links li a:hover {
    color: #38bdf8 !important;
    transform: translateX(3px) !important;
}

.contact-box .c-item {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    font-size: 13.5px !important;
    color: #94a3b8 !important;
    margin-bottom: 12px !important;
}

.contact-box .c-item i {
    color: #38bdf8 !important;
    font-size: 14px !important;
    margin-top: 3px !important;
}

.contact-box .c-item a {
    color: #cbd5e1 !important;
    text-decoration: none !important;
}

.contact-box .c-item a:hover {
    color: #38bdf8 !important;
}

/* Bottom Bar */
.footer-bottom {
    background-color: #030a16 !important;
    padding: 22px 0 !important;
    color: #64748b !important;
    font-size: 13px !important;
    width: 100% !important;
}

.footer-bottom .copyright-text {
    color: #94a3b8 !important;
}

.footer-bottom .copyright-text strong {
    color: #ffffff !important;
}

.footer-badges .badge-item {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    color: #cbd5e1 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 6px !important;
    padding: 4px 10px !important;
    font-size: 11.5px !important;
    margin-left: 6px !important;
}



/* Footer Logo High Visibility on Dark Background */
.footer-brand-logo {
    filter: brightness(0) invert(1) !important;
    max-height: 40px !important;
    width: auto !important;
    display: block !important;
    opacity: 0.95 !important;
    transition: opacity 0.2s ease !important;
}

.footer-brand a:hover .footer-brand-logo {
    opacity: 1 !important;
}



/* ==========================================================================
   Comprehensive Mobile & Tablet Responsive Architecture for Footer
   ========================================================================== */

/* Tablet & Mobile Breakpoints for Footer */
@media (max-width: 991px) {
    .footer-cta-band {
        padding: 30px 0 !important;
    }
    
    .cta-band-inner {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 20px !important;
    }
    
    .cta-copy {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .cta-title {
        font-size: 22px !important;
        line-height: 1.3 !important;
    }
    
    .cta-actions {
        width: 100% !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        flex-wrap: wrap !important;
        gap: 14px !important;
    }

    .footer-main {
        padding: 40px 0 30px 0 !important;
    }

    .footer-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 32px 24px !important;
    }
    
    .footer-col.col-brand {
        grid-column: span 2 !important;
    }

    .footer-bottom-inner {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 16px !important;
    }

    .footer-badges {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 6px !important;
    }
    
    .footer-badges .badge-item {
        margin: 0 !important;
    }
}

@media (max-width: 640px) {
    .footer-cta-band {
        padding: 24px 0 !important;
    }
    
    .cta-title {
        font-size: 19px !important;
    }
    
    .cta-desc {
        font-size: 13.5px !important;
    }
    
    .cta-actions {
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100% !important;
        gap: 12px !important;
    }
    
    .btn-umutnet-cta,
    .btn-cta-contact {
        width: 100% !important;
        justify-content: center !important;
        padding: 12px 18px !important;
    }
    
    .cta-phone-link {
        justify-content: center !important;
        padding: 6px 0 !important;
    }

    .footer-grid {
        grid-template-columns: 1fr !important;
        gap: 28px !important;
    }

    .footer-col.col-brand {
        grid-column: span 1 !important;
    }
    
    .footer-col .col-title {
        font-size: 16px !important;
        margin-bottom: 14px !important;
        padding-bottom: 6px !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    }
    
    .footer-links li a {
        padding: 4px 0 !important;
        font-size: 14px !important;
    }

    .footer-bottom {
        padding: 20px 0 !important;
    }
    
    .copyright-text {
        font-size: 12.5px !important;
    }
}



/* ==========================================================================
   Knowledgebase Article Page Typography & Visual Styling
   ========================================================================== */
.kb-article-body h1, .kb-article-body h2, .kb-article-body h3 {
    color: #0f172a !important;
    font-weight: 800 !important;
    letter-spacing: -0.3px !important;
    margin-top: 24px !important;
    margin-bottom: 12px !important;
}

.kb-article-body p {
    color: #334155 !important;
    line-height: 1.8 !important;
    margin-bottom: 16px !important;
}

.kb-article-body ul, .kb-article-body ol {
    padding-left: 24px !important;
    margin-bottom: 20px !important;
}

.kb-article-body li {
    margin-bottom: 8px !important;
    color: #334155 !important;
}

.kb-article-body code {
    background: #f1f5f9 !important;
    color: #0284c7 !important;
    padding: 3px 8px !important;
    border-radius: 6px !important;
    font-size: 14px !important;
}

.kb-article-body pre {
    background: #0f172a !important;
    color: #e2e8f0 !important;
    padding: 16px !important;
    border-radius: 12px !important;
    overflow-x: auto !important;
}


/* ==============================================================================
   HERO FLUSH ALIGNMENT WITH NAVBAR & RESPONSIVE BADGE (ZERO GAP)
   ============================================================================== */
.site-home .umutnet-hero,
.umutnet-hero.agency-hero {
    padding-top: 28px !important;
    margin-top: 0 !important;
}

@media (max-width: 991.98px) {
    .site-home .umutnet-hero,
    .umutnet-hero.agency-hero {
        padding-top: 18px !important;
        padding-bottom: 36px !important;
    }
}

@media (max-width: 576px) {
    .site-home .umutnet-hero,
    .umutnet-hero.agency-hero {
        padding-top: 14px !important;
        padding-bottom: 28px !important;
    }
}

/* Hero Tag Badge Responsive Sizing & Auto Wrap */
.hero-tag-badge {
    display: inline-flex !important;
    align-items: center !important;
    max-width: 100% !important;
    white-space: normal !important;
    word-break: break-word !important;
    line-height: 1.4 !important;
    font-size: 13px !important;
    padding: 6px 14px !important;
    margin-bottom: 16px !important;
    border-radius: 30px !important;
}

@media (max-width: 768px) {
    .hero-tag-badge {
        font-size: 12px !important;
        padding: 5px 12px !important;
        margin-bottom: 12px !important;
        gap: 6px !important;
    }
    .hero-tag-badge .badge-dot {
        width: 7px !important;
        height: 7px !important;
        flex-shrink: 0 !important;
    }
}

@media (max-width: 480px) {
    .hero-tag-badge {
        font-size: 11px !important;
        padding: 4px 10px !important;
        border-radius: 20px !important;
    }
    .hero-title {
        font-size: 26px !important;
        line-height: 1.25 !important;
        letter-spacing: -0.5px !important;
    }
    .hero-desc {
        font-size: 14.5px !important;
        line-height: 1.55 !important;
    }
    .agency-hero-actions {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
    }
    .agency-hero-actions .btn-agency-primary,
    .agency-hero-actions .btn-agency-whatsapp {
        width: 100% !important;
        text-align: center !important;
        justify-content: center !important;
    }
}


/* ==============================================================================
   UMUTNET KURUMSAL KİMLİK RENK PALETİ VE ALT BOŞLUK GÜVENCESİ (V24)
   Resmi Kurumsal Renkler:
   - Primary: #0284c7 (Sky Cyan) / #0369a1 (Deep Sky)
   - Secondary: #090e1a / #0c1730 (Navy Night)
   - Accent Gradient: linear-gradient(135deg, #090e1a 0%, #0c1730 55%, #065CFE 100%)
   ============================================================================== */

:root {
    --site-primary: #0284c7 !important;
    --site-primary-hover: #0369a1 !important;
    --site-primary-light: #f0f9ff !important;
    --site-secondary: #090e1a !important;
    --site-accent: #38bdf8 !important;
    --site-shadow-hover: 0 20px 35px -8px rgba(2, 132, 199, 0.2), 0 8px 16px -4px rgba(9, 14, 26, 0.1) !important;
}

/* 1. Footer CTA Band & Buton Uyumu */
.footer-cta-band {
    background: linear-gradient(135deg, #090e1a 0%, #0c1730 50%, #0284c7 100%) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    position: relative;
    z-index: 2;
}

.footer-cta-band .btn-cta-contact {
    background: #0284c7 !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    box-shadow: 0 6px 20px rgba(2, 132, 199, 0.35) !important;
    font-weight: 700 !important;
    border-radius: 12px !important;
}

.footer-cta-band .btn-cta-contact:hover {
    background: #0369a1 !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 24px rgba(2, 132, 199, 0.45) !important;
}

.footer-cta-band .cta-phone-link {
    color: #ffffff !important;
    font-weight: 700 !important;
    background: rgba(255, 255, 255, 0.1) !important;
    padding: 10px 20px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}

.footer-cta-band .cta-phone-link:hover {
    background: rgba(255, 255, 255, 0.18) !important;
    color: #38bdf8 !important;
}

/* 2. Tüm Ana Butonlarda ve Vurgularda Kurumsal Degrade / Mavi Uyumu */
.btn-agency-primary,
.btn-pkg-popular,
.btn-Umutnet-primary {
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
    border-color: #0284c7 !important;
    color: #ffffff !important;
    box-shadow: 0 6px 18px rgba(2, 132, 199, 0.3) !important;
}

.btn-agency-primary:hover,
.btn-pkg-popular:hover,
.btn-Umutnet-primary:hover {
    background: linear-gradient(135deg, #0369a1 0%, #0284c7 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 24px rgba(2, 132, 199, 0.4) !important;
}

/* 3. İletişim Sayfası ve WHMCS Form Butonları */
.contact-page-wrapper .btn-primary,
.login-form .btn-primary,
.card-footer .btn-primary {
    background: #0284c7 !important;
    border-color: #0284c7 !important;
    box-shadow: 0 4px 14px rgba(2, 132, 199, 0.35) !important;
}

.contact-page-wrapper .btn-primary:hover,
.login-form .btn-primary:hover {
    background: #0369a1 !important;
    border-color: #0369a1 !important;
}

/* 4. MOBİLDE BUTONLARIN VE CTA'NIN ÜST ÜSTE BİNMESİNİ KESİN ÖNLEME (ANTI-OVERLAP) */
@media (max-width: 991.98px) {
    /* Gövde altına yeterli alan açarak hiçbir içeriğin CTA altında kalmamasını sağla */
    body.site-body {
        padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px)) !important;
    }

    /* Footer CTA bandına ve tüm form kartlarına alt boşluk */
    .footer-cta-band {
        padding-bottom: 50px !important;
    }
    
    .footer-main {
        padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)) !important;
    }

    .contact-page-wrapper,
    .page-inner-wrap,
    .client-home-cards,
    .section-packages,
    .section-split-Umutnet,
    .section-datacenter-security {
        margin-bottom: 24px !important;
    }

    /* Form submit butonlarının mobil CTA'ya yapışmasını engelle */
    form button[type="submit"] {
        margin-bottom: 20px !important;
    }
}


/* ==========================================================================
   UMUTNET MODERN ORDERFORM & CART REFINEMENT
   ========================================================================== */
.view-cart-items-header {
    background: #090e1a !important;
    border-radius: 8px 8px 0 0 !important;
    color: #ffffff !important;
}
.order-summary, .view-cart-sidebar {
    border-radius: 12px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.06) !important;
    border: 1px solid #e2e8f0 !important;
    background: #ffffff !important;
    overflow: hidden !important;
}
.order-summary .btn-checkout {
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
    border: none !important;
    font-weight: 700 !important;
    padding: 14px 20px !important;
    border-radius: 8px !important;
    font-size: 16px !important;
    box-shadow: 0 4px 14px rgba(2, 132, 199, 0.35) !important;
    transition: all 0.2s ease !important;
}
.order-summary .btn-checkout:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(2, 132, 199, 0.45) !important;
}
/* Fix prepend-icon overlapping in promo code input */
#applyPromo .form-group.prepend-icon {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
}
#applyPromo .form-group.prepend-icon .field-icon {
    position: absolute !important;
    left: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
    z-index: 5 !important;
    color: #64748b !important;
    pointer-events: none !important;
}
#applyPromo input#inputPromotionCode.form-control {
    padding-left: 42px !important;
    height: 44px !important;
    border-radius: 8px !important;
    border: 1px solid #cbd5e1 !important;
    font-size: 14px !important;
}
#applyPromo button[name="validatepromo"] {
    margin-top: 8px !important;
    border-radius: 8px !important;
    height: 42px !important;
    font-weight: 600 !important;
    background: #f1f5f9 !important;
    border: 1px solid #cbd5e1 !important;
    color: #1e293b !important;
    transition: all 0.2s ease !important;
}
#applyPromo button[name="validatepromo"]:hover {
    background: #e2e8f0 !important;
    color: #0f172a !important;
}
/* Modern Sidebar Menu on Cart / Client Area */
.sidebar .panel, .sidebar .card {
    border-radius: 10px !important;
    border: 1px solid #e2e8f0 !important;
    overflow: hidden !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.03) !important;
}
.sidebar .panel-heading, .sidebar .card-header {
    background: #f8fafc !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    border-bottom: 1px solid #e2e8f0 !important;
}
.sidebar .list-group-item.active {
    background-color: #0284c7 !important;
    border-color: #0284c7 !important;
}

/* Logout & Admin Return Buttons in Header */
.btn-logout-pill {
    background: #fef2f2 !important;
    border: 1px solid #fecaca !important;
    color: #dc2626 !important;
}
.btn-logout-pill:hover {
    background: #fee2e2 !important;
    border-color: #fca5a5 !important;
    color: #b91c1c !important;
    transform: translateY(-1px) !important;
}
.btn-admin-pill {
    background: #fffbeb !important;
    border: 1px solid #fde68a !important;
    color: #b45309 !important;
}
.btn-admin-pill:hover {
    background: #fef3c7 !important;
    color: #92400e !important;
    transform: translateY(-1px) !important;
}

/* ==========================================================================
   PAYTR BRANDING & PAYMENT ENHANCEMENTS
   ========================================================================== */
.footer-badges {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
}

.badge-item.badge-paytr {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    padding: 4px 10px !important;
    border-radius: 6px !important;
}

.paytr-footer-logo {
    height: 18px !important;
    width: auto !important;
    display: block !important;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3));
}

.badge-subtext {
    font-size: 11px !important;
    color: #94a3b8 !important;
    font-weight: 500 !important;
}

/* Checkout Payment Methods */
.paytr-enhanced-gateways {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    margin-top: 14px !important;
}

.payment-gateway-card {
    display: flex !important;
    align-items: center !important;
    background: #ffffff !important;
    border: 2px solid #e2e8f0 !important;
    border-radius: 12px !important;
    padding: 14px 18px !important;
    margin: 0 !important;
    cursor: pointer !important;
    transition: all 0.2s ease-in-out !important;
}

.payment-gateway-card:hover {
    border-color: #3b82f6 !important;
    background: #f8fafc !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06) !important;
}

.payment-gateway-card.active, 
.payment-gateway-card:has(input:checked) {
    border-color: #065cfe !important;
    background: #f0f7ff !important;
    box-shadow: 0 4px 16px rgba(6, 92, 254, 0.12) !important;
}

.payment-gateway-card input[type="radio"] {
    margin: 0 14px 0 0 !important;
    width: 18px !important;
    height: 18px !important;
    accent-color: #065cfe !important;
}

.gateway-info-wrap {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    flex: 1 !important;
}

.gateway-title-row {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
}

.paytr-checkout-logo {
    height: 22px !important;
    width: auto !important;
    display: block !important;
}

.gateway-icon-bank {
    font-size: 18px !important;
    color: #64748b !important;
}

.gateway-title-text {
    font-size: 15px !important;
    color: #0f172a !important;
    font-weight: 700 !important;
}

.badge-taksit-pill {
    background: #dbeafe !important;
    color: #1e40af !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    padding: 2px 8px !important;
    border-radius: 999px !important;
    display: inline-block !important;
}

.gateway-sub-desc {
    font-size: 12px !important;
    color: #64748b !important;
    margin-top: 2px !important;
}

/* Invoice Page PayTR Header */
.paytr-invoice-badge-wrap {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    padding: 8px 18px !important;
    border-radius: 30px !important;
    margin-bottom: 14px !important;
}

.paytr-invoice-logo {
    height: 20px !important;
    width: auto !important;
}

.paytr-trust-text {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #475569 !important;
}