/* =============================================
   GILROY FONT FAMILY
   ============================================= */
@font-face {
    font-family: 'Gilroy';
    src: url('../fonts/gilroy/Gilroy-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gilroy';
    src: url('../fonts/gilroy/Gilroy-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gilroy';
    src: url('../fonts/gilroy/Gilroy-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gilroy';
    src: url('../fonts/gilroy/Gilroy-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gilroy';
    src: url('../fonts/gilroy/Gilroy-ExtraBold.woff2') format('woff2');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

/* ================================================================
   STYLES.CSS - CONSOLIDATED CSS (Phase 1 Complete)
   ================================================================
   
   Structure:
   0. CSS VARIABLES & RESETS (from variable.css + base.css)
      - CSS Custom Properties
      - Reset & Base Styles
      - Typography
      - Global Buttons
      - Global Badges & Cards
      - Global Forms & Tabs
      - Utility Classes
   
   1. CRITICAL - Above the Fold (loads first for initial scene)
      - Keyframe Animations
      - Section Base Styles
      - Hero Sections
      - Platform Services
      - Services Menu (Header Dropdown)
      - Platform Filters
   
   2. SECONDARY - Common Components
      - Page-specific overrides
      - Forms & Buttons
      - Kategori Header
      - Feature Cards
      - Solutions & Modals
   
   3. DEFERRED - Below the Fold
      - Comments Section
      - FAQ Section
      - App About Section
      - Ücretsiz Deneme
      - Sliders
      - Paket Adimlar
      - Customer Panel
      - Organik Paketler
      - Table Styles
      - Alerts & Utilities
   ================================================================ */
/* ================================================================
   PART 0: CSS VARIABLES & RESETS
   Source: variable.css + base.css (consolidated)
   ================================================================ */
/* ========================================
   0.1 CSS CUSTOM PROPERTIES
   ======================================== */
   :root{
    /* =========================
           PRIMARY COLORS
           ========================= */ --primary-purple: #7844E4; --primary-dark: #1E2130; --primary-light: #F0F1F9;
    /* =========================
           BACKGROUND COLORS
           ========================= */ --bg-dark: #171A26; --bg-dark-secondary: #1A1D2A; --bg-dark-tertiary: #282D40; --bg-card: #282C3C; --bg-light: #FFFFFF; --bg-light-alt: #f0f1f9; --bg: #f8f7fa;
    /* =========================
           TEXT COLORS
           ========================= */ --text-primary: #33353E; --text-secondary: #4A4A4A; --text-light: #FFFFFF; --text-muted: rgba(255, 255, 255, 0.6); --text-dark-muted: #666F94; --text-gray: #7C8499; --text-tab-inactive: #BEBEBE; --text-tab-active: #545464;
    /* =========================
           STATUS COLORS
           ========================= */ --status-success: #34D399; --status-success-dark: #065F46;
    /* =========================
           UI COLORS
           ========================= */ --ui-indicator: #7A2CC7;
    /* =========================
           SOCIAL MEDIA BRAND COLORS
           ========================= */ --instagram: #E1306C; --tiktok: #3F3357; --twitter: #1DA1F2; --youtube: #E90004; --facebook: #4267B2; --spotify: #29D266; --whatsapp: #25D366; --linkedin: #0077B5; --telegram: #0088cc; --discord: #5865F2; --pinterest: #E60023; --twitch: #9146FF; --snapchat: #FFFC00; --soundcloud: #FF5500; --kick: #52FF00; --kwai: #FF9900;
    /* Dynamic Platform Color */ --dynamic-platform-color: #7A2CC7;
    /* =========================
           PACKAGE SECTION COLORS
           ========================= */ --package-bg: #282D40; --package-border: #2A2F41; --package-dark-bg: #1E2130;
    /* =========================
           TYPOGRAPHY
           ========================= */ --font-gilroy: 'Gilroy', sans-serif;
    /* Font Sizes */ --fs-hero: 36px; --fs-section-title: 30px; --fs-card-title: 18px; --fs-body: 16px; --fs-small: 14px; --fs-xs: 12px;
    /* Font Weights */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 500; --fw-bold: 600;
    /* Line Heights */ --lh-tight: 1.2em; --lh-normal: 1.4em; --lh-relaxed: 1.6em;
    /* =========================
           SPACING SYSTEM
           ========================= */ --spacing-xs: 4px; --spacing-sm: 8px; --spacing-md: 10px; --spacing-lg: 24px; --spacing-xl: 32px; --spacing-2xl: 48px; --spacing-3xl: 60px; --spacing-4xl: 80px;
    /* Gap System */ --gap-xs: 4px; --gap-sm: 10px; --gap-md: 12px; --gap-lg: 16px; --gap-xl: 20px; --gap-xxl: 30px;
    /* Padding System */ --padding-sm: 12px; --padding-md: 16px; --padding-lg: 20px; --padding-xl: 24px; --padding-xxl: 30px;
    /* Section Padding */ --section-padding: 60px; --section-padding-lg: 80px;
    /* =========================
           BORDER RADIUS
           ========================= */ --radius-xs: 8px; --radius-sm: 10px; --radius-md: 12px; --radius-lg: 20px; --radius-xl: 24px; --radius-2xl: 24px; --radius-xxl: 30px; --radius-pill: 9999px; --radius-round: 50px;
    /* =========================
           TRANSITIONS
           ========================= */ --transition-default: 0.3s ease; --transition-fast: 0.15s ease; --transition-slow: 0.5s ease;
    /* =========================
           SHADOWS
           ========================= */ --shadow-xs: 0 2px 8px rgba(0, 0, 0, 0.05); --shadow-sm: 0 4px 16px rgba(0, 0, 0, 0.08); --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.15); --shadow-card: 0px 4px 24px rgba(0, 0, 0, 0.05); --shadow-card-hover: 0px 8px 32px rgba(0, 0, 0, 0.08); --shadow-button: 0px 4px 12px rgba(120, 68, 228, 0.2); --shadow-input-focus: 0px 0px 0px 3px rgba(120, 68, 228, 0.1);
    /* =========================
           Z-INDEX SCALE
           ========================= */ --z-dropdown: 1000; --z-sticky: 1020; --z-fixed: 1030; --z-modal-backdrop: 1040; --z-modal: 1050; --z-popover: 1060; --z-tooltip: 1070;
    /* =========================
           NOTIFICATION BADGE
           ========================= */ --notification-radius: 18px;
    /* =========================
           LEGACY VARIABLES (from variable.css)
           ========================= */ --menutxtcl: 111, 115, 145; --menutxtweight: 600; --intlinear: 90, 99, 129; --txtall: 81, 81, 81; --cl1: 141, 72, 189; --pckdf: var(--cl1); --whydf: var(--cl1); --lbds: 255, 255, 255; --lsdb: 56, 58, 70; --text: 85, 85, 85; --fixedtel: #d581b4;
    /* =========================
           HOMEPAGE VARIABLES (from homepage.css - Phase 3)
           ========================= */ --home-max-width: 1320px; --home-hero-height: 488px; --home-hero-expanded-width: 940px; --home-hero-collapsed-width: 200px; --home-border-light: #EAEAED; --home-card-border: #E9EBF5; --home-card-bg: #FBFDFF; --home-text-muted: #7A7F99; --home-surface-soft: #F9F8F8; --home-surface-muted: #F9F9F9; --home-shadow-hover: 0px 8px 32px rgba(0, 0, 0, 0.12); --home-accent-orange: #FD5501; --home-accent-orange-soft: #FDE1C3; --home-accent-blue: #0066BA; --home-accent-blue-soft: #D2E9FC; --home-accent-blue-light: #6EBDFF; --home-accent-purple-soft: #E4D8FD; --home-accent-lilac: #EDE5FF; --home-badge-lilac: #BFA0FF; --home-gray-card-bg: #E2E5F1; --home-gray-card-border: #D2D2D2;
    /* =========================
           SUBSCRIPTION PAGE VARIABLES (from subscription.css - Phase 4)
           ========================= */ --sub-purple: #7844E4; --sub-blue: #3382FA; --sub-orange: #FF5601; --sub-bg: #F4F5F9; --sub-text-dark: #1E2130; --sub-text-gray: #666F94; --sub-nice-blue: #0F7FD3; }
    /* Dark Theme Variables */
    [data-theme="dark"]{ --bg-primary: var(--bg-dark); --bg-secondary: var(--bg-dark-secondary); --text-body: var(--text-light); --text-heading: var(--text-light); }
    /* Legacy Dark Mode (from variable.css) */
    body.dark{ --bg: #26272d; --menutxtcl: 226, 226, 228; --intlinear: 45, 45, 58; --txtall: 226, 226, 228; --cl1: 192, 128, 223; --lbds: 56, 58, 70; --lsdb: 255, 255, 255; --pckdf: var(--cl1); --text: 226, 226, 228; }
    /* ========================================
         0.2 RESET & BASE STYLES
         ======================================== */
    *, *::before, *::after{ box-sizing: border-box; }
    html{ scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: visible; width: 100%; max-width: 100vw; }
    body{ font-family: var(--font-gilroy); font-size: var(--fs-body); font-weight: var(--fw-regular); line-height: var(--lh-relaxed); color: var(--text-primary); background-color: var(--bg-light-alt); margin: 0; padding: 0; overflow-x: hidden; width: 100%; max-width: 100vw; }
    main{ margin-bottom: -60px; }
    /* Hide Bootstrap's default modal backdrop */
    .modal-backdrop{ display: none !important; }
    /* Custom Modal Overlay */
    .modal-custom-overlay{ position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 1040; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; pointer-events: none; }
    .modal-custom-overlay.active{ opacity: 1; visibility: visible; pointer-events: auto; }
    /* Disable body scroll when overlay is active */
    body:has(.modal-custom-overlay.active){ overflow: hidden !important; padding-right: 0 !important; }
    /* No scroll class for modals */
    body.no-scroll{ overflow: hidden !important; }
    /* Remove default margins */
    h1, h2, h3, h4, h5, h6, p, ul, ol, figure, blockquote{ margin: 0; padding: 0; }
    /* Lists */
    ul, ol{ list-style: none; }
    /* Links */
    a{ color: inherit; text-decoration: none; transition: var(--transition-default); }
    a:hover{ color: var(--primary-purple); }
    /* Images */
    img{ max-width: 100%; height: auto; display: block; }
    /* Buttons Reset */
    button{ cursor: pointer; border: none; background: none; font-family: inherit; font-size: inherit; padding: 0; }
    /* Form Elements Reset */
    input, textarea, select{ font-family: inherit; font-size: inherit; border: none; outline: none; }
    /* ========================================
         0.3 TYPOGRAPHY STYLES
         ======================================== */
    h1, .h1{ font-size: var(--fs-hero); font-weight: var(--fw-bold); line-height: var(--lh-tight); color: var(--text-primary); margin-bottom: var(--spacing-lg); }
    h2, .h2{ font-size: var(--fs-section-title); font-weight: var(--fw-bold); line-height: var(--lh-normal); color: var(--text-primary); margin-bottom: var(--spacing-lg); }
    h3, .h3{ font-size: 24px; font-weight: var(--fw-semibold); line-height: var(--lh-normal); color: var(--text-primary); margin-bottom: var(--spacing-md); }
    h4, .h4{ font-size: 20px; font-weight: var(--fw-semibold); line-height: var(--lh-normal); color: var(--text-primary); margin-bottom: var(--spacing-md); }
    h5, .h5{ font-size: var(--fs-card-title); font-weight: var(--fw-semibold); line-height: var(--lh-normal); color: var(--text-primary); margin-bottom: var(--spacing-sm); }
    h6, .h6{ font-size: var(--fs-body); font-weight: var(--fw-semibold); color: var(--text-primary); margin-bottom: var(--spacing-sm); }
    p{ font-size: 16px; font-weight: 500; line-height: 25px; color: #33353E; }
    .lead{ font-size: 18px; font-weight: var(--fw-regular); }
    /* Heading Utilities */
    .heading-section{ font-size: 30px; font-weight: 600; line-height: var(--lh-tight); text-align: center; max-width: 820px; margin: 0; margin-bottom: 10px; }
    /* Text Body */
    .text-body{ font-size: 16px; font-weight: 400; line-height: var(--lh-tight); text-align: center; max-width: 820px; margin: 0; }
    /* Text Colors */
    .text-primary-purple{ color: var(--primary-purple) !important; }
    .text-nice-blue{ color: #0F7FD3; }
    .text-semibold{ font-weight: 600; }
    .text-dark-muted{ color: var(--text-dark-muted) !important; }
    .text-light{ color: #FFFFFF !important; }
    .text-muted{ color: rgba(255, 255, 255, 0.6) !important; }
    /* Content Typography Utilities */
    .content-title{ font-size: 36px; font-weight: 600; line-height: var(--lh-tight); letter-spacing: -0.85px; margin: 0; }
    .content-text, .paragraph-text{ display: flex; flex-direction: column; gap: 21px; }
    .content-text p{ font-size: 18px; font-weight: 600; line-height: var(--lh-normal); color: #666F94; margin: 0; }
    /* Global Title & Description */
    .title{ font-size: 30px; font-weight: 600; line-height: 25px; color: #4C5473; }
    .description{ font-weight: 500; line-height: 1.375em; color: #666F94; }
    /* ========================================
         0.4 GLOBAL BUTTON STYLES
         ======================================== */
    .btn{ font-weight: var(--fw-semibold); padding: 12px 24px; border-radius: var(--radius-md); transition: var(--transition-default); display: inline-flex; align-items: center; justify-content: center; gap: var(--spacing-sm); border: 2px solid transparent; cursor: pointer; }
    /* Primary Button */
    .btn-primary{ background-color: var(--primary-purple); color: var(--text-light); border-color: var(--primary-purple); }
    .btn-primary:hover{ background-color: #6835d3; border-color: #6835d3; transform: translateY(-2px); box-shadow: var(--shadow-button); }
    .btn-primary:active{ transform: translateY(0); }
    /* Button Sizes */
    .btn-lg{ padding: 16px 32px; font-size: 18px; }
    /* Button with Icon */
    .btn-icon{ padding: 12px; width: 44px; height: 44px; }
    /* Show More Button */
    .btn-show-more{ width: 100%; background: #282D40; border: none; border-radius: 16px; padding: 16px; font-weight: 600; line-height: var(--lh-tight); color: #FFFFFF; cursor: pointer; transition: background 0.3s ease, transform 0.2s ease; margin-top: 0; position: relative; overflow: hidden; }
    .btn-show-more::before{ content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent); transition: left 0.6s; z-index: 1; }
    .btn-show-more:hover::before{ left: 100%; }
    .btn-show-more:hover{ background: #323852; transform: translateY(-2px); }
    .btn-show-more:active{ transform: translateY(0); }
    .btn-show-more:disabled{ cursor: not-allowed; opacity: 0.7; }
    .btn-show-more.loading{ color: transparent; }
    .btn-show-more.loading::after{ content: ''; position: absolute; top: 30%; left: 50%; transform: translate(-50%, -50%); width: 20px; height: 20px; border: 3px solid rgba(255, 255, 255, 0.3); border-top-color: #FFFFFF; border-radius: 50%; animation: spin 0.8s linear infinite; z-index: 2; }
    /* ========================================
         0.5 RATING & BADGE COMPONENTS
         ======================================== */
    /* Rating Stars Component */
    .rating-stars{ display: flex; align-items: center; gap: 1.07px; background: #FE500B; border-radius: 6.583px; padding: 5.27px; flex-shrink: 0; height: fit-content; }
    .rating-stars svg{ width: 12.84px; height: 12.84px; }
    /* Badge Components */
    .badge{ display: inline-flex; align-items: center; gap: 5px; padding: 6px 10px; background: #E1E9FF; border-radius: var(--radius-pill); width: fit-content; height: 28px; transition: var(--transition-default); }
    .badge svg{ width: 15px; height: 15px; flex-shrink: 0; }
    .badge span{ font-size: 13px; font-weight: 600; line-height: var(--lh-tight); letter-spacing: -0.48px; color: rgba(51, 53, 62, 0.98); }
    /* Badge Variants */
    .badge-light{ width: 163px; height: 38px; background: rgba(255, 255, 255, 0.1); border-radius: 10px; }
    .badge-light span{ font-size: 14px; font-weight: 600; line-height: var(--lh-tight); color: #FFFFFF; }
    .badge-floating{ animation: floatingImage 4s ease-in-out infinite; }
    /* Badge Group */
    .badge-group{ display: inline-flex; align-items: center; gap: 5px; }
    .badge-group > div:not(:first-child){ width: 28px; height: 28px; border-radius: 50%; background: #E1E9FF; flex-shrink: 0; }
    /* ========================================
         0.6 GLOBAL CARD STYLES
         ======================================== */
    .card{ background-color: var(--bg-light); border-radius: var(--radius-lg); padding: var(--spacing-lg); border: 1px solid rgba(0, 0, 0, 0.1); transition: var(--transition-default); }
    .card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-card-hover); }
    /* Dark Card */
    .card-dark{ background-color: var(--bg-card); color: var(--text-light); border-color: rgba(255, 255, 255, 0.1); }
    .card-dark .card-title{ color: var(--text-light); }
    .card-dark .card-text{ color: var(--text-muted); }
    /* ========================================
         0.7 GLOBAL FORM STYLES
         ======================================== */
    .form-control, .form-select{ padding: 12px 16px; border: 1px solid #e4e7eb; border-radius: var(--radius-sm); background-color: var(--bg-light); transition: var(--transition-default); }
    .form-control:focus, .form-select:focus{ border-color: var(--primary-purple); box-shadow: var(--shadow-input-focus); outline: none; }
    /* Dark Theme Forms */
    .form-control-dark{ background-color: var(--bg-dark-tertiary); border-color: rgba(255, 255, 255, 0.1); color: var(--text-light); }
    .form-control-dark:focus{ background-color: var(--bg-dark-secondary); border-color: var(--primary-purple); }
    .form-control-dark::placeholder{ color: var(--text-muted); }
    /* Form Labels */
    .form-label{ font-weight: var(--fw-medium); margin-bottom: var(--spacing-sm); color: var(--text-primary); }
    /* ========================================
         0.7.1 AUTH INPUT COMPONENTS (Base Styles)
         Sepet, Iletisim ve diger formlarda kullanilan input stilleri
         ======================================== */
    .auth-form-group{ width: 100%; }
    .auth-input-wrapper{ display: flex; align-items: center; gap: 16px; padding: 16px; background: #FFFFFF; border: 1px solid rgba(234, 234, 237, 0.8); border-radius: 14px; min-height: 70px; transition: all 0.2s ease; }
    .auth-input-wrapper:focus-within{ border-color: #7844E4; box-shadow: 0 0 0 3px rgba(120, 68, 228, 0.1); }
    .auth-form-icon{ width: 24px; height: 24px; color: #666F94; flex-shrink: 0; }
    .auth-input-divider{ width: 1px; height: 24px; background: rgba(234, 234, 237, 0.8); flex-shrink: 0; }
    .auth-input-container{ display: flex; flex-direction: column; flex: 1; position: relative; }
    .auth-input{ border: none; background: transparent; font-weight: 600; font-size: 16px; line-height: 1.25; color: #33353E; outline: none; padding: 0; width: 100%; }
    .auth-input::placeholder{ color: transparent; }
    .auth-input-label{ position: absolute; top: 50%; transform: translateY(-50%); font-weight: 600; font-size: 16px; line-height: 1.25; color: #666F94; pointer-events: none; transition: all 0.2s ease; }
    /* Float label when focused or has value */
    .auth-input-wrapper:focus-within .auth-input-label, .auth-input-wrapper.has-value .auth-input-label{ top: 0; transform: translateY(0); font-size: 12px; opacity: 0.8; }
    .auth-input-wrapper:focus-within .auth-input, .auth-input-wrapper.has-value .auth-input{ padding-top: 12px; }
    /* ========================================
         0.8 TAB COMPONENTS
         ======================================== */
    .tabs-container{ max-width: 100%; height: 62px; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 16px; padding: 10px; display: flex; align-items: center; gap: 8px; }
    .tab{ display: flex; align-items: center; justify-content: center; padding: 12px 20px; background: transparent; border: none; border-radius: 14px; font-size: 14px; font-weight: 600; line-height: var(--lh-tight); color: #FFFFFF; cursor: pointer; transition: var(--transition-default); white-space: nowrap; flex-shrink: 0; }
    .tab:hover{ background: rgba(255, 255, 255, 0.05); }
    .tab-active{ background: #FFFFFF !important; color: #1E2130; }
    /* ========================================
         0.9 UTILITY CLASSES
         ======================================== */
    /* Display Utilities */
    .d-none{ display: none !important; }
    .d-block{ display: block !important; }
    .d-flex{ display: flex !important; }
    .d-inline-flex{ display: inline-flex !important; }
    /* Flexbox Utilities */
    .flex-column{ flex-direction: column !important; }
    .flex-row{ flex-direction: row !important; }
    .align-items-center{ align-items: center !important; }
    .align-items-start{ align-items: flex-start !important; }
    .align-items-end{ align-items: flex-end !important; }
    .justify-content-center{ justify-content: center !important; }
    .justify-content-between{ justify-content: space-between !important; }
    .justify-content-start{ justify-content: flex-start !important; }
    .justify-content-end{ justify-content: flex-end !important; }
    /* Text Alignment */
    .text-center{ text-align: center !important; }
    .text-left{ text-align: left !important; }
    .text-right{ text-align: right !important; }
    /* Visibility */
    .visible{ visibility: visible !important; }
    .invisible{ visibility: hidden !important; }
    /* Width & Height */
    .w-100{ width: 100% !important; }
    .h-100{ height: 100% !important; }
    /* ========================================
         0.10 PLATFORM BACKGROUND COLORS
         ======================================== */
    .instagram{ background-color: var(--instagram); }
    .tiktok{ background-color: var(--tiktok); }
    .twitter{ background-color: var(--twitter); }
    .youtube{ background-color: var(--youtube); }
    .facebook{ background-color: var(--facebook); }
    .spotify{ background-color: var(--spotify); }
    .whatsapp{ background-color: var(--whatsapp); }
    .linkedin{ background-color: var(--linkedin); }
    .telegram{ background-color: var(--telegram); }
    .discord{ background-color: var(--discord); }
    .pinterest{ background-color: var(--pinterest); }
    .twitch{ background-color: var(--twitch); }
    .snapchat{ background-color: var(--snapchat); }
    .soundcloud{ background-color: var(--soundcloud); }
    .kick{ background-color: var(--kick); }
    .kwai{ background-color: var(--kwai); }
    /* ========================================
         0.11 SUMMARY READ MORE/LESS
         ======================================== */
    #summary{ font-size: 14px; line-height: 1.5; }
    #summary p.collapse:not(.show){ height: 42px !important; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
    #summary p.collapsing{ min-height: 42px !important; }
    #summary a.collapsed:after{ content: '+ Read More'; }
    #summary a:not(.collapsed):after{ content: '- Read Less'; }
    /* ========================================
         0.12 BASE KEYFRAME ANIMATIONS
         ======================================== */
    @keyframes floatingImage {
    0%, 100%{ transform: translateY(0); }
    50%{ transform: translateY(-10px); } }
    @keyframes fadeInOverlay {
    from{ opacity: 0; }
    to{ opacity: 1; } }
    /* ================================================================
         PART 1: CRITICAL - ABOVE THE FOLD
         ================================================================ */
    /* ========================================
         1.0 LAYOUT - NAVIGATION & STRUCTURE
         Source: layout.css (consolidated in Phase 2)
         ======================================== */
    /* ===============================================================
         LAYOUT.CSS - Site Layout & Navigation Styles
         =============================================================== */
    /* ========================================
         1. TOP BAR SECTION
         ======================================== */
    .top-bar-section{ background: var(--primary-purple); color: var(--text-light); font-size: var(--fs-small); padding: 8px 0; position: sticky; top: 0; z-index: 1000; }
    .top-bar-content{ display: flex; align-items: center; justify-content: space-between; }
    .top-bar-left, .top-bar-right{ display: flex; align-items: center; gap: 12px; }
    .top-bar-link{ display: inline-flex; align-items: center; gap: var(--spacing-sm); color: var(--text-light); font-weight: var(--fw-medium); opacity: 0.9; padding: 8px 16px; margin: -8px -12px; border-radius: var(--radius-sm); transition: var(--transition-default); }
    .top-bar-link:hover{ opacity: 1; transform: translateY(-1px); background-color: #6A33DD; }
    .top-bar-icon{ display: inline-flex; width: 24px; height: 24px; align-items: center; justify-content: center; }
    .top-bar-icon .svg-icon{ width: 16px; height: 16px; }
    .top-bar-divider{ display: inline-block; width: 1px; height: 12px; background-color: rgba(255, 255, 255, 0.4); }
    /* ========================================
         2. NAVBAR
         ======================================== */
    .main-navbar-section{ background-color: #FFFFFF; border-bottom: 1px solid #EAEAED; height: 90px; display: flex; align-items: center; position: sticky; top: 0; z-index: 999; }
    .navbar{ position: relative; padding: 0; height: 100%; display: flex; align-items: center; justify-content: space-between; width: 100%; }
    .navbar-brand{ display: flex; justify-content: flex-start; }
    .navbar-brand, .deneme-features > div:not(:nth-child(even)), .odeme-step-badge, .musteri-membership-header{ display: flex; align-items: center; gap: 8px; }
    .navbar-logo{ width: 180px; height: 44px; object-fit: contain; }
    .navbar-nav-center{ flex: 1; gap: 30px; height: 43px; display: flex; align-items: center; justify-content: center; flex-wrap: nowrap; }
    .navbar-nav-center > li, .navbar-nav-right > li, .nav-link svg, .iletisim-submit-btn svg, .quick-list > li > div > svg, .menu-search svg, .packages-header, .menu-mobile-links a svg, .menu-mobile-links button svg, .menu-mobile-links a i, .menu-mobile-links button i{ flex-shrink: 0; }
    .navbar-nav-right{ gap: 10px; height: 56px; display: flex; align-items: center; justify-content: flex-end; flex-wrap: nowrap; }
    .navbar-nav-right > .nav-icon-pill + li{ margin-left: 5px; }
    .navbar-toggler{ border: none; padding: 0; }
    .navbar-toggler:focus{ box-shadow: none; }
    /* ========================================
         3. NAV LINKS & ICONS
         ======================================== */
    .nav-link{ display: flex; align-items: center; gap: 10px; font-weight: 600; color: #33353E; text-transform: capitalize; padding: 12px; background-color: transparent; border-radius: 16px; transition: var(--transition-default); white-space: nowrap; }
    .nav-link:hover, .nav-link:focus{ color: #33353E; background-color: #F5F7FD; }
    .nav-icon{ width: 32px; height: 32px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; }
    .nav-icon img, .iletisim-social-link svg, .hero-link-card-icon svg, .hero-link-card-arrow svg{ width: 18px; height: 18px; }
    .nav-icon-pill{ display: flex; align-items: center; height: 56px; }
    .nav-icon-pill .nav-link{ padding: 0 !important; }
    .nav-icon-button{ position: relative; display: inline-flex; align-items: center; justify-content: center; width: 50px; height: 50px; background-color: #F5F7FD; border-radius: 12px; padding: 0; }
    .nav-icon-button img, .mobile-nav-center-icon svg, .services-menu-section-icon svg, .mobile-bottom-nav-customer .mobile-nav-center-icon svg{ width: 22px; height: 22px; }
    .nav-icon-button .nav-icon{ width: 20px; height: 20px; color: #465681; transition: color 0.2s ease; }
    .nav-icon-button:hover .nav-icon{ color: var(--primary-purple); }
    .nav-pill-icon{ position: relative; display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; background-color: rgba(120, 68, 228, 0.1); border-radius: var(--radius-lg); }
    .nav-pill-icon img, .mobile-price-icon-wrapper svg, .packages-social-icon svg, .app-about-feature-icon svg, .price-btn svg, .musteri-siparis-icon-wrapper svg, .musteri-siparis-card > div:first-child > div:first-child > div:first-child svg, .transaction-left > div:first-child svg, .musteri-siparisler-service-icon-wrapper svg, .mesaj-attach-btn svg, .bakiye-list > li > div:first-child > div:first-child svg{ width: 20px; height: 20px; }
    .nav-pill-badge{ position: absolute; top: 3px; right: 6px; display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 4px; border-radius: 10px; background-color: #7844E4; border: 2px solid #F7F8FD; color: #FFFFFF; font-size: 10px; font-weight: 600; line-height: 1.5; }
    .nav-cta{ gap: 5px; height: 50px; background-color: #7844E4; border: 4px solid #E4DAFA; border-radius: 16px; }
    .nav-cta:hover{ background-color: #7844E4; border-color: #E4DAFA; }
    .nav-cta img, .package-favorite-btn svg, .kategori-card .card-header > div > div:first-child svg, .ucretsiz-deneme-task-icon svg, .iletisim-icon-wrapper svg, .card-header > div:first-child svg, .adim-bottom-bar .icon-wrapper svg, .musteri-destek-ticket-icon-wrapper svg, .musteri-siparisler-copy-btn svg, .referans-confirm-modal-body > div:first-child svg, .destek-success-modal .modal-body > div:first-child svg{ width: 24px; height: 24px; }
    .nav-cta .svg-icon{ margin-right: 6px; }
    /* ========================================
         4. NOTIFICATIONS DROPDOWN
         ======================================== */
    .notifications-wrapper, .filter-dropdown, .services-menu-section, .deneme-submit-btn.loading, .step-wrapper.step-active, .user-profile-wrapper, .musteri-siparisler-filter-wrapper, .musteri-destek-list .filter-wrapper, .musteri-destek-filter-wrapper, .stat-card-with-action .stat-content{ position: relative; }
    .notifications-dropdown{ position: fixed; top: 130px; right: calc((100vw - 1320px) / 2 + 200px); width: 371px; background: var(--bg-light); border: 1px solid var(--bg-light-alt); border-radius: 15px; box-shadow: 0px 5px 20px 0px rgba(47, 57, 82, 0.15); padding: 16px; opacity: 0; visibility: hidden; transform: translateY(-10px); transition: all 0.3s ease; z-index: 1000; }
    @media (max-width: 1399px) {
    .notifications-dropdown{ right: 200px; } }
    @media (max-width: 991px) {
    .notifications-dropdown{ right: 16px; left: 16px; width: auto; top: 120px; } }
    .notifications-dropdown.active, .musteri-siparisler-details-modal.active{ opacity: 1; visibility: visible; transform: translateY(0); z-index: 1001; }
    .notification-item{ display: flex; gap: 10px; cursor: pointer; transition: var(--transition-default); }
    .notification-item:hover, .services-menu-item:hover{ transform: translateY(-2px); }
    .notification-icon{ flex-shrink: 0; width: 40px; height: 40px; background: var(--primary-purple); border-radius: 10.67px; display: flex; align-items: center; justify-content: center; }
    .notification-content{ flex: 1; min-width: 0; }
    .notification-title{ font-weight: 600; font-size: 15px; line-height: 1em; color: var(--text-primary); margin: 0 0 5px 0; }
    .notification-text{ font-weight: 600; font-size: 14px; line-height: 1.43em; color: var(--text-dark-muted); margin: 0; }
    .notification-divider{ height: 1px; background: var(--bg-light-alt); margin: 16px 0; }
    /* Arrow pointing up */
    .notifications-dropdown::before{ content: ''; position: absolute; top: -8px; right: 20px; width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 8px solid var(--bg-light-alt); }
    .notifications-dropdown::after{ content: ''; position: absolute; top: -7px; right: 21px; width: 0; height: 0; border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 7px solid var(--bg-light); }
    /* ========================================
         5. USER PROFILE CARD & DROPDOWN
         ======================================== */
    .user-profile-card{ display: flex; align-items: center; justify-content: center; gap: 10px; padding: 0 10px; height: 50px; background: #F5F7FD; border-radius: 12px; cursor: pointer; transition: var(--transition-default); }
    .user-profile-card:hover{ background: #E8ECF8; }
    .user-avatar{ width: 30px; height: 30px; border-radius: 50%; object-fit: cover; }
    .user-info{ display: flex; flex-direction: column; width: 132px; }
    .user-name, .user-balance{ font-weight: 600; line-height: 1.2; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .user-name{ font-size: 14px; text-align: center; color: #465681; }
    header .user-name{ text-align: left; }
    .user-balance{ font-size: 12px; text-align: left; color: #7A7F99; }
    /* User Profile Dropdown */
    .user-profile-dropdown{ position: absolute; top: calc(100% + 10px); right: -5px; width: 200px; background: #FFFFFF; border: 1px solid #F0F1F9; border-radius: 15px; box-shadow: 0px 5px 20px 0px rgba(47, 57, 82, 0.15); opacity: 0; visibility: hidden; transform: translateY(-10px); transition: all 0.3s ease; z-index: 1000; }
    .user-profile-dropdown-item{ display: flex; align-items: center; gap: 9px; padding: 14px 15px; cursor: pointer; transition: background-color 0.2s ease; border-top: 1px solid #F0F1F9; }
    .user-profile-dropdown-item:first-child{ border-top: none; }
    .user-profile-dropdown-item:first-child:hover{ border-radius: 15px 15px 0 0; }
    .user-profile-dropdown-item:last-child:hover{ border-radius: 0 0 15px 15px; }
    .user-profile-dropdown-item:hover{ background-color: #F5F7FD; }
    .user-profile-dropdown-item svg{ width: 18px; height: 18px; flex-shrink: 0; }
    .user-profile-dropdown-item span{ font-weight: 600; line-height: 19px; color: #666F94; white-space: nowrap; }
    /* ===============================================================
         6. MEGA MENU SECTION
         =============================================================== */
    /* Overlay */
    .mega-menu-overlay{ position: fixed; top: 130px; left: 0; right: 0; bottom: 0; background: linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.4) 100%); z-index: 999; display: none; opacity: 0; transition: opacity 0.3s ease-in-out; backdrop-filter: blur(4px); }
    .mega-menu-overlay.active{ display: block; animation: fadeInOverlay 0.3s ease-in-out forwards; }
    @keyframes fadeInOverlay {
    from{ opacity: 0; }
    to{ opacity: 1; } }
    /* Wrapper */
    .mega-menu-wrapper{ position: absolute; left: 0; right: 0; top: 100%; display: flex; justify-content: center; z-index: 1000; pointer-events: none; max-height: 541px; }
    .mega-menu{ width: 1140px; background: #FFFFFF; box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1); border-radius: 20px; display: none; flex-direction: column; pointer-events: auto; margin-top: 20px; padding: 10px; gap: 10px; }
    .mega-menu.active{ display: flex; animation: fadeIn 0.3s ease-in-out; }
    /* Search Bar */
    .menu-search{ width: 100%; height: 44px; background: rgba(245, 247, 253, 0.6); border-radius: 14px; display: flex; align-items: center; padding: 0 16px; gap: 16px; flex-shrink: 0; }
    .menu-search input{ border: none; background: transparent; flex: 1; height: 100%; font-weight: 600; font-size: 14px; color: #4C5473; outline: none; }
    .menu-search input::placeholder{ color: #717896; }
    /* Menu Body - CSS Grid Layout */
    .menu-body{ display: grid; grid-template-columns: 1fr 2fr 1fr; column-gap: 0; flex: 1; min-height: 430px; }
    /* Menu Sidebar */
    .menu-sidebar{ display: flex; flex-direction: column; list-style: none; padding: 0; margin: 0; }
    .menu-sidebar > li{ width: 100%; height: 80px; border-radius: 16px 0px 0px 16px; display: flex; align-items: center; padding: 0 20px; gap: 10px; cursor: pointer; transition: background 0.3s; position: relative; }
    .menu-sidebar > li.active{ background: rgba(245, 247, 253, 0.6); }
    /* Curved corners */
    .menu-sidebar > li.active::before, .menu-sidebar > li.active::after{ content: ""; position: absolute; right: 0; width: 16px; height: 16px; background-color: inherit; z-index: 1; pointer-events: none; }
    .menu-sidebar > li.active::before{ top: -16px; -webkit-mask: radial-gradient(circle at top left, transparent 70%, black 71%); mask: radial-gradient(circle at top left, transparent 70%, black 71%); }
    .menu-sidebar > li.active::after{ bottom: -16px; -webkit-mask: radial-gradient(circle at bottom left, transparent 70%, black 71%); mask: radial-gradient(circle at bottom left, transparent 70%, black 71%); }
    /* Tab icon */
    .menu-sidebar > li > div:first-child{ width: 38px; height: 38px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
    .menu-sidebar > li > div:first-child i{ font-size: 22px; color: #FFFFFF; }
    /* Tab text container */
    .menu-sidebar > li > div:last-child{ display: flex; flex-direction: column; gap: 2px; }
    /* Tab text */
    .menu-sidebar > li > div:last-child > span:first-child{ font-weight: 600; font-size: 16px; line-height: 20px; color: #4C5473; }
    .menu-sidebar > li > div:last-child > span:last-child{ font-size: 14px; line-height: 16px; color: #7A7F99; }
    /* Menu Sidebar Link & Button Styles */
    .menu-sidebar li a, .menu-sidebar li button{ display: flex; align-items: center; gap: 12px; padding: 12px 16px; text-decoration: none; color: inherit; border-radius: var(--radius-sm); transition: var(--transition-default); border: none; background: transparent; cursor: pointer; font-family: inherit; font-size: inherit; width: 100%; text-align: left; }
    .menu-sidebar li a:hover, .menu-sidebar li.active a, .menu-sidebar li button:hover{ background-color: rgba(120, 68, 228, 0.08); }
    /* Sidebar icon - renk parent'tan inherit */
    .menu-sidebar li .sidebar-icon{ background-color: var(--platform-color, #68718c); }
    .sidebar-icon{ display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--radius-sm); color: #fff; flex-shrink: 0; }
    .sidebar-text{ display: flex; flex-direction: column; gap: 2px; }
    .sidebar-text span:first-child{ font-weight: 600; font-size: 15px; }
    .sidebar-text span:last-child{ font-size: 13px; color: var(--text-gray); }
    /* Packages Container */
    .menu-packages{ background: rgba(245, 247, 253, 0.6); border-radius: 16px; display: flex; flex-direction: column; padding: 20px 30px; gap: 16px; min-width: 0; margin-left: 0; margin-right: 10px; }
    /* Seamless connection */
    .menu-body.first-tab-active .menu-packages{ border-top-left-radius: 0; }
    /* Packages Panes Container */
    .packages-panes{ flex: 1; min-height: 0; position: relative; }
    /* Banner */
    .packages-banner{ display: flex; gap: 12px; padding-bottom: 10px; border-bottom: 1px dashed #D4E0FF; flex-shrink: 0; align-items: center; }
    .packages-banner > div:first-child, .packages-banner-icon{ width: 60px; height: 60px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #f8f4ff 0%, #ede4ff 100%); border-radius: 12px; }
    .packages-banner > div:first-child img{ width: 100%; height: 100%; object-fit: contain; }
    .packages-banner-icon i{ font-size: 28px; background: linear-gradient(135deg, #9B59B6, #8E44AD); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
    .packages-banner h3{ font-weight: 600; font-size: 15px; line-height: 22px; color: #4C5473; margin: 0; }
    .packages-banner p{ font-weight: 600; font-size: 12px; line-height: 20px; color: #7A7F99; margin: 0; }
    /* Header */
    .packages-header span{ font-weight: 600; font-size: 12px; line-height: 14px; text-transform: uppercase; color: rgba(76, 84, 115, 0.6); }
    /* Menu Pane */
    .menu-pane{ display: none; height: 100%; overflow-y: auto; overflow-x: hidden; }
    .menu-pane.active{ display: block; }
    .menu-pane::-webkit-scrollbar{ width: 4px; }
    .menu-pane::-webkit-scrollbar-track{ background: transparent; }
    .menu-pane::-webkit-scrollbar-thumb{ background: #ccc; border-radius: 2px; }
    .menu-pane::-webkit-scrollbar-thumb:hover{ background: rgba(120, 68, 228, 0.4); }
    /* Package item - renk parent'tan inherit */
    .menu-pane .package-item::before{ background-color: var(--platform-color, #68718c); }
    .menu-pane .package-item:hover{ border-color: var(--platform-color, #68718c); }
    /* Pane List */
    .pane-list{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px 20px; list-style: none; padding: 0; margin: 0; margin-bottom: 20px; }
    /* Package Link */
    .pane-list li a{ display: flex; align-items: center; gap: 10px; text-decoration: none; transition: transform 0.2s; }
    .pane-list li a:hover{ transform: translateX(5px); }
    /* Icon */
    .pane-list li a > div:first-child{ width: 33px; height: 33px; background: rgba(212, 224, 255, 0.3); border: 1px solid rgba(225, 233, 255, 0.8); box-shadow: inset 0px 12px 12px 1px rgba(255, 255, 255, 0.24), inset 0px 1px 0px 1px rgba(255, 255, 255, 0.32); border-radius: 9px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
    .pane-list li a > div:first-child i{ font-size: 17px; color: var(--platform-color, #4267B2); }
    /* Info */
    .pane-list li a > div:last-child{ display: flex; flex-direction: column; flex: 1; min-width: 0; }
    .pane-list li a > div:last-child > span:first-child{ font-size: 13px; line-height: 18px; color: var(--platform-color, #4267B2); font-weight: 600; }
    .pane-list li a > div:last-child > span:last-child{ font-size: 15px; line-height: 22px; font-weight: 600; color: #4C5473; }
    /* Package Item Icon */
    .package-item > div:first-child{ width: 33px; height: 33px; background: rgba(212, 224, 255, 0.3); border: 1px solid rgba(225, 233, 255, 0.8); box-shadow: inset 0px 12px 12px 1px rgba(255, 255, 255, 0.24), inset 0px 1px 0px 1px rgba(255, 255, 255, 0.32); border-radius: 9px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
    .package-item > div:first-child i{ font-size: 17px; color: var(--platform-color, #4267B2); }
    /* Package Item Info */
    .package-item > div:last-child{ display: flex; flex-direction: column; flex: 1; min-width: 0; }
    .package-item > div:last-child > span:first-child{ font-size: 13px; line-height: 18px; color: var(--platform-color, #4267B2); font-weight: 600; }
    .package-item > div:last-child > span:last-child{ font-size: 15px; line-height: 22px; font-weight: 600; color: #4C5473; }
    /* Footer */
    .packages-footer{ flex-shrink: 0; height: 30px; }
    .menu-pane:not(.active) .packages-footer{ display: none; }
    .menu-pane.active .packages-footer{ display: block; }
    .packages-footer a{ display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background: rgba(212, 224, 255, 0.3); border: 1px solid rgba(225, 233, 255, 0.8); box-shadow: inset 0px 12px 12px 1px rgba(255, 255, 255, 0.24), inset 0px 1px 0px 1px rgba(255, 255, 255, 0.32); border-radius: 9px; font-size: 12px; font-weight: 600; line-height: 22px; color: #7A7F99; text-decoration: none; transition: all 0.2s; }
    .packages-footer a:hover{ background: rgba(212, 224, 255, 0.5); color: #4C5473; }
    /* Ad/Promo */
    .menu-promo{ background: rgba(245, 247, 253, 0.6); border-radius: 16px; display: flex; flex-direction: column; padding: 30px 35px; gap: 40px; }
    .menu-promo > span{ font-weight: 600; font-size: 12px; line-height: 14px; letter-spacing: 0.873px; text-transform: uppercase; color: rgba(0, 31, 31, 0.6); }
    .promo-card{ background: #FFFFFF; border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; }
    .promo-card img{ width: 100%; height: 200px; object-fit: cover; padding: 10px; border-top-right-radius: 25px; border-top-left-radius: 25px; }
    .promo-card > div{ padding: 10px; display: flex; flex-direction: column; gap: 10px; }
    .promo-card h3{ font-weight: 600; font-size: 15px; line-height: 18px; color: #4C5473; margin: 0; }
    .ad-title{ display: block; font-size: 15px; font-weight: 600; line-height: 1.4; color: #4C5473; padding: 0px 12px; }
    .promo-card p{ font-weight: 600; font-size: 12px; line-height: 20px; color: #7A7F99; }
    /* Search Mode */
    .mega-menu.search-active .menu-pane.active{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; overflow-y: auto; height: auto; overflow: visible; }
    .mega-menu.search-active .menu-pane.active .pane-grid{ grid-template-columns: 1fr; gap: 8px; }
    .mega-menu.search-active .menu-pane.single-result{ grid-column: 1 / -1; }
    .mega-menu.search-active .menu-pane.single-result .pane-grid{ grid-template-columns: repeat(3, 1fr); gap: 10px 20px; }
    .mega-menu.search-active .menu-pane.active::before{ content: attr(data-platform-name); display: block; font-weight: 600; font-size: 12px; line-height: 14px; text-transform: uppercase; color: rgba(76, 84, 115, 0.6); margin-bottom: 16px; }
    /* Loading placeholder for AJAX menu */
    .pane-list .loading-placeholder, .pane-list .no-data{ display: flex; align-items: center; justify-content: center; padding: 40px 20px; color: #666F94; font-size: 14px; }
    .pane-list .loading-placeholder i{ margin-right: 8px; }
    /* Mobile Bottom Links (hidden on desktop) */
    .menu-mobile-links{ display: none; flex-direction: column; gap: 8px; flex-shrink: 0; }
    .menu-mobile-links > div{ display: flex; gap: 8px; }
    .menu-mobile-links a, .menu-mobile-links button{ flex: 1; background: #F9FAFE; border-radius: 10px; padding: 10px; display: flex; align-items: center; gap: 8px; text-decoration: none; transition: background 0.2s; border: none; cursor: pointer; }
    .menu-mobile-links a:hover, .menu-mobile-links button:hover{ background: rgba(245, 247, 253, 0.8); }
    .menu-mobile-links a span, .menu-mobile-links button span{ font-weight: 600; font-size: 14px; color: #666F94; }
    .menu-mobile-links a i, .menu-mobile-links button i{ color: #666F94; font-size: 14px; width: 16px; text-align: center; }
    .menu-mobile-links .svg-icon{ width: 14px; height: 14px; color: #666F94; }
    /* ===============================================================
         7. MOBILE BOTTOM NAVIGATION
         =============================================================== */
    /* Mobile Bottom Nav - Main */
    .mobile-bottom-nav{ display: none; position: fixed; bottom: 0; left: 0; right: 0; width: 100%; height: 74px; z-index: 991; justify-content: space-between; align-items: center; padding: 0; transform: translateY(0); transition: transform 0.3s ease; }
    .mobile-bottom-nav.hidden, .mobile-bottom-nav-customer.hidden{ transform: translateY(100%); }
    /* Mobile Bottom Nav - Customer Panel Variant */
    .mobile-bottom-nav-customer{ display: none; position: fixed; bottom: 0; left: 0; right: 0; width: 100%; height: 74px; z-index: 1000; justify-content: space-between; align-items: center; padding: 0; transform: translateY(0); transition: transform 0.3s ease; }
    /* Mobile Nav Background with CSS Mask */
    .mobile-nav-bg{ position: absolute; top: 0; left: 0; width: 100%; height: 74px; background: #FFFFFF; z-index: 0; --r: 50px; --s: 32px; --a: 13deg; --p: 50%; --_m: var(--r), #000 calc(100% - 1px), #0000; --_d: (var(--s) + var(--r)) * cos(var(--a)); -webkit-mask: radial-gradient(var(--r) at calc(var(--p) + var(--_d)) var(--_m)), radial-gradient(var(--r) at calc(var(--p) - var(--_d)) var(--_m)), radial-gradient(var(--s) at var(--p) calc(-1 * sin(var(--a)) * var(--s)), #0000 100%, #000 calc(100% + 1px)) 0 calc(var(--r) * (1 - sin(var(--a)))) no-repeat, linear-gradient(90deg, #000 calc(var(--p) - var(--_d)), #0000 0 calc(var(--p) + var(--_d)), #000 0); mask: radial-gradient(var(--r) at calc(var(--p) + var(--_d)) var(--_m)), radial-gradient(var(--r) at calc(var(--p) - var(--_d)) var(--_m)), radial-gradient(var(--s) at var(--p) calc(-1 * sin(var(--a)) * var(--s)), #0000 100%, #000 calc(100% + 1px)) 0 calc(var(--r) * (1 - sin(var(--a)))) no-repeat, linear-gradient(90deg, #000 calc(var(--p) - var(--_d)), #0000 0 calc(var(--p) + var(--_d)), #000 0); }
    .mobile-nav-bg-border{ position: absolute; top: -1px; left: -1px; width: calc(100% + 2px); height: calc(75px + 2px); background: #EAEAED; z-index: -1; --r: 50px; --s: 32px; --a: 13deg; --p: 50%; --_m: var(--r), #000 calc(100% - 1px), #0000; --_d: (var(--s) + var(--r)) * cos(var(--a)); -webkit-mask: radial-gradient(var(--r) at calc(var(--p) + var(--_d)) var(--_m)), radial-gradient(var(--r) at calc(var(--p) - var(--_d)) var(--_m)), radial-gradient(var(--s) at var(--p) calc(-1 * sin(var(--a)) * var(--s)), #0000 100%, #000 calc(100% + 1px)) 0 calc(var(--r) * (1 - sin(var(--a)))) no-repeat, linear-gradient(90deg, #000 calc(var(--p) - var(--_d)), #0000 0 calc(var(--p) + var(--_d)), #000 0); mask: radial-gradient(var(--r) at calc(var(--p) + var(--_d)) var(--_m)), radial-gradient(var(--r) at calc(var(--p) - var(--_d)) var(--_m)), radial-gradient(var(--s) at var(--p) calc(-1 * sin(var(--a)) * var(--s)), #0000 100%, #000 calc(100% + 1px)) 0 calc(var(--r) * (1 - sin(var(--a)))) no-repeat, linear-gradient(90deg, #000 calc(var(--p) - var(--_d)), #0000 0 calc(var(--p) + var(--_d)), #000 0); }
    /* Mobile Nav Items */
    .mobile-nav-item, .mobile-bottom-nav-customer .mobile-nav-item{ display: flex; align-items: center; justify-content: center; flex: 1; height: 100%; position: relative; transition: all 0.3s ease; z-index: 1; }
    .mobile-nav-item svg, .mobile-bottom-nav-customer .mobile-nav-item svg{ width: 24px; height: 24px; transition: all 0.3s ease; }
    .mobile-nav-item:active svg path, .payment-methods > li.active > div:first-child svg path, .mobile-bottom-nav-customer .mobile-nav-item:active svg path{ fill: var(--primary-purple); }
    /* Center button with raised icon */
    .mobile-nav-center, .mobile-bottom-nav-customer .mobile-nav-center{ position: relative; flex: 0 0 auto; width: 86px; height: 74px; z-index: 2; }
    .mobile-nav-center-icon, .mobile-bottom-nav-customer .mobile-nav-center-icon{ position: absolute; top: 2px; left: 50%; transform: translateX(-50%); width: 54px; height: 54px; background-color: #1E2130; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; box-shadow: 0px 4px 12px rgba(30, 33, 48, 0.15); }
    .mobile-nav-center:active .mobile-nav-center-icon, .mobile-bottom-nav-customer .mobile-nav-center:active .mobile-nav-center-icon{ transform: translateX(-50%) scale(0.95); background-color: var(--primary-purple); }
    /* Mobile Nav Icons */
    .mobile-nav-icon{ width: 24px; height: 24px; color: #7A7F99; }
    .mobile-nav-icon-center{ width: 22px; height: 22px; color: #FFFFFF; }
    /* Profile trigger button */
    .mobile-nav-profile-trigger{ flex: 1; display: flex; align-items: center; justify-content: center; height: 100%; cursor: pointer; background: none; border: none; padding: 0; transition: all 0.3s ease; }
    .mobile-nav-profile-avatar{ width: 35px; height: 35px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255, 255, 255, 0.2); transition: all 0.3s ease; }
    .mobile-nav-profile-trigger:active .mobile-nav-profile-avatar{ transform: scale(0.95); border-color: var(--primary-purple); }
    /* ========================================
         8. MOBILE PRICE BAR
         ======================================== */
    .mobile-price-bar{ display: none; position: fixed; bottom: 74px; left: 0; right: 0; width: 100%; height: 70px; background: #FFFFFF; z-index: 999; justify-content: space-between; align-items: center; padding: 10px 16px; box-shadow: 0px -2px 8px rgba(0, 0, 0, 0.08); transition: transform 0.3s ease; }
    .mobile-price-bar.hidden{ transform: translateY(calc(100% + 74px)); }
    .mobile-price-add-to-cart{ width: 146px; height: 50px; background: #FF5601; border: none; border-radius: 12px; display: flex; align-items: center; justify-content: center; gap: 10px; cursor: pointer; transition: var(--transition-default); flex-shrink: 0; }
    .mobile-price-add-to-cart:active{ background: #E64D01; transform: scale(0.95); }
    .mobile-price-add-to-cart svg{ width: 20px; height: 20px; flex-shrink: 0; }
    .mobile-price-add-to-cart span{ font-size: 16px; font-weight: 600; line-height: 1.19em; color: #FFFFFF; }
    .mobile-price-info{ display: flex; align-items: center; gap: 12px; flex: 1; }
    .mobile-price-icon-wrapper{ width: 40px; height: 40px; background: #7844E4; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
    .mobile-price-details{ display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
    /* ===============================================================
         10. LAYOUT RESPONSIVE STYLES
         =============================================================== */
    /* ===== LARGE DESKTOP (max-width: 1199px) ===== */
    @media (max-width: 1199px) {
    .navbar-nav{ gap: var(--spacing-sm); }
    .footer-payment{ flex-direction: row; gap: 30px; } }
    /* ===== TABLET LARGE (max-width: 1025px) ===== */
    @media (max-width: 1025px) {
    .footer-top-content{ flex-direction: column; gap: 20px; }
    .footer-address-box{ width: 100%; height: auto; }
    .footer-fast-services{ width: 100%; height: auto; min-height: 300px; } }
    /* ===== DESKTOP MEDIUM (min-width: 992px) and (max-width: 1199px) ===== */
    @media (min-width: 992px) and (max-width: 1199px) {
    .mega-menu{ width: 960px; }
    .menu-sidebar{ width: 220px; }
    .menu-sidebar > li{ height: 70px; padding: 0 16px; }
    .menu-sidebar > li > div:first-child{ width: 34px; height: 34px; }
    .menu-sidebar > li > div:first-child i{ font-size: 18px; }
    .menu-sidebar > li > div:last-child > span:first-child{ font-size: 13px; }
    .menu-packages{ padding: 16px 24px; }
    .packages-banner > div:first-child{ width: 50px; height: 50px; }
    .packages-banner h3{ font-size: 14px; }
    .menu-promo{ width: 240px; padding: 24px 28px; }
    .promo-card{ width: 184px; }
    .promo-card img{ height: 160px; } }
    /* ===== DESKTOP & ABOVE (min-width: 769px) ===== */
    @media (min-width: 769px) {
    .main-navbar-section{ top: 40px;
    /* Below top bar */ } }
    /* ===== MOBILE LARGE (max-width: 768px) ===== */
    @media (max-width: 768px) {
    /* Mobile Bottom Navigation */
    .mobile-bottom-nav, .mobile-price-bar{ display: flex; }
    .mobile-bottom-nav-customer{ display: flex; }
    /* Top Bar */
    .top-bar-section{ display: none; }
    .top-bar-content{ flex-direction: column; gap: var(--spacing-sm); align-items: stretch; }
    .top-bar-left, .top-bar-right{ gap: var(--spacing-sm); }
    .top-bar-right{ justify-content: space-between; }
    /* Navbar */
    .navbar-nav{ gap: var(--spacing-md); padding-top: var(--spacing-md); }
    /* Footer */
    .footer-payment{ flex-wrap: wrap; gap: 10px; }
    .footer-top-content{ flex-direction: column; gap: 20px; }
    .footer-address-box{ width: 100%; height: auto; }
    .footer-fast-services{ width: 100%; height: auto; min-height: 300px; }
    .footer-main{ margin-top: 40px; padding-top: 30px; }
    .app-badge{ width: 140px; } }
    /* ===== TABLET (max-width: 991px) ===== */
    @media (max-width: 991px) {
    /* Navbar Mobile Actions */
    .navbar-mobile-actions{ display: flex !important; align-items: center; gap: 5px; }
    .navbar-mobile-actions .notifications-trigger{ display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: rgba(120, 68, 228, 0.1); border-radius: 9.6px; padding: 0 !important; }
    .navbar-mobile-actions .notifications-trigger i{ color: #FFFFFF; font-size: 18px; }
    .navbar-mobile-actions .notifications-trigger img{ width: 20px; height: 20px; }
    .navbar-mobile-actions .notifications-trigger .nav-pill-badge{ position: absolute; top: 2.4px; right: 3.2px; min-width: 16px; height: 16px; padding: 0 5.6px; background: var(--primary-purple); border: 1.6px solid #F7F8FD; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 8px; line-height: 1.5em; color: white; }
    .navbar-mobile-actions .navbar-toggler{ width: 40px; height: 40px; background: #F5F7FD; border-radius: 9.6px; display: flex; align-items: center; justify-content: center; }
.desktop-only, .navbar-nav-center, .navbar-nav-right{ display: none !important; }
.main-navbar-section{ height: auto; padding: var(--spacing-md) 0; top: 12px; margin: 0 12px; width: calc(100% - 24px); border-radius: 20px; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08); }
.navbar-logo{ width: 140px; height: auto; }
    .navbar-toggler{ display: block !important; }
    /* Notifications Dropdown - Bottom Sheet */
    .notifications-dropdown{ position: fixed; top: auto; bottom: 0; left: 0; right: 0; width: 100%; border-radius: 20px 20px 0 0; max-height: 80vh; overflow-y: auto; transform: translateY(100%); }
    .notifications-dropdown.active, .user-profile-dropdown.active{ transform: translateY(0); }
    .notifications-dropdown::before, .notifications-dropdown::after{ display: none; }
    /* Mega Menu Mobile */
    .mega-menu-overlay{ top: 76px; touch-action: none; }
    .mega-menu-wrapper{ position: fixed; top: 87px; left: 12px; right: 12px; width: calc(100% - 24px); }
    .mega-menu{ width: 100%; max-width: 100%; max-height: calc(100vh - 160px); margin-top: 10px; flex-direction: column; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; border-radius: 20px; }
    .menu-mobile-links{ display: flex; order: 3; }
    .menu-search{ order: 1; }
    .menu-body{ order: 2; display: flex; flex-direction: column; gap: 10px; min-height: auto; flex: 1; }
    .menu-promo, .menu-sidebar > li.active::before, .packages-panes, .packages-banner, .packages-header, .menu-packages > .packages-footer, .mega-menu.search-active .menu-pane.active::before{ display: none; }
    .menu-sidebar{ width: 100%; flex-direction: column; gap: 10px; flex: 1; }
    .menu-content{ display: flex; flex-direction: column; width: 100%; gap: 0; }
    .menu-packages{ border-radius: 0; background: transparent; padding: 0; }
    .menu-sidebar > li{ width: 100%; height: auto; min-height: 72px; background: #F9FAFE; border-radius: 16px; padding: 16px; display: flex; align-items: center; justify-content: space-between; cursor: pointer; transition: background 0.2s; position: relative; }
    .menu-sidebar > li.active{ background: #F9FAFE; border-radius: 16px 16px 0 0; }
    .menu-sidebar > li:hover{ background: rgba(245, 247, 253, 0.8); }
    .menu-sidebar > li > div:first-child{ width: 38px; height: 38px; }
    .menu-sidebar > li > div:first-child i{ font-size: 22px; }
    .menu-sidebar > li > div:last-child{ flex: 1; }
    .menu-sidebar > li > div:last-child > span:first-child{ font-size: 18px; line-height: 20px; }
    .menu-sidebar > li > div:last-child > span:last-child{ font-size: 16px; line-height: 20px; }
    /* Arrow toggle for tablet tabs */
    .menu-sidebar > li::after{ content: '' !important; position: static !important; width: 34px !important; height: 34px !important; background: rgba(212, 224, 255, 0.3) !important; border: 1px solid rgba(225, 233, 255, 0.5) !important; box-shadow: inset 0px 12px 12px 1px rgba(255, 255, 255, 0.24), inset 0px 1px 0px 1px rgba(255, 255, 255, 0.32) !important; border-radius: 9px !important; flex-shrink: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; background-image: url("data:image/svg+xml,%3Csvg width='12' height='7' viewBox='0 0 12 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%234C5473' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: center !important; -webkit-mask: none !important; mask: none !important; right: auto !important; bottom: auto !important; top: auto !important; left: auto !important; transition: transform 0.3s ease-in-out !important; }
    .menu-sidebar > li.last-tab::after, .mega-menu:not(.mobile-initialized) .menu-sidebar > li.last-tab.active::after{ transform: rotate(-90deg) !important; }
    .menu-sidebar > li.active::after{ transform: rotate(180deg) !important; display: flex !important; }
    .menu-sidebar > li.last-tab.active::after{ transform: rotate(90deg) !important; display: flex !important; }
    .mega-menu:not(.mobile-initialized) .menu-sidebar > li.active::after{ transform: rotate(0deg) !important; }
    /* Hide original panes on tablet */
    .menu-content .menu-pane, .mega-menu.search-active .menu-sidebar, .mega-menu.search-active .menu-content .menu-pane, .mega-menu.search-active .packages-banner, .mega-menu.search-active .packages-header, .mega-menu.search-active .packages-footer, .mega-menu.search-active .menu-pane > .packages-footer{ display: none !important; }
    /* Panes moved to sidebar (cloned) */
    .menu-sidebar > .menu-pane{ display: block; width: 100%; background: #F9FAFE; border-radius: 0 0 16px 16px; padding: 10px 16px 16px 16px; margin-top: 0; }
    .mega-menu.search-active .menu-packages{ background: transparent; padding: 0; }
    .packages-panes{ flex: none; }
    .pane-list{ display: flex; flex-direction: column; gap: 20px; }
    .pane-list li a{ padding: 0; background: transparent; border-radius: 0; gap: 10px; }
    .pane-list li a:hover{ background: transparent; transform: none; }
    .pane-list li a > div:first-child{ width: 33px; height: 33px; }
    .pane-list li a > div:last-child > span:first-child{ font-size: 12px; line-height: 18px; font-weight: 600; }
    .pane-list li a > div:last-child > span:last-child{ font-size: 14px; line-height: 22px; font-weight: 600; }
    .menu-pane > .packages-footer{ display: block; height: 30px; margin-top: 20px; }
    .menu-pane > .packages-footer a{ width: 100%; height: 100%; background: rgba(212, 224, 255, 0.3); border: 1px solid rgba(225, 233, 255, 0.8); box-shadow: inset 0px 12px 12px 1px rgba(255, 255, 255, 0.24), inset 0px 1px 0px 1px rgba(255, 255, 255, 0.32); border-radius: 9px; font-size: 12px; font-weight: 600; line-height: 22px; color: #7A7F99; display: flex; align-items: center; justify-content: center; }
    .mega-menu::-webkit-scrollbar{ width: 4px; }
    .mega-menu::-webkit-scrollbar-thumb{ background: #D4E0FF; border-radius: 2px; }
    .mega-menu::-webkit-scrollbar-track{ background: transparent; }
    /* Search Mode */
    .mega-menu.search-active .menu-content{ display: flex; width: 100%; }
    .mega-menu.search-active .menu-content .menu-pane.active{ display: block !important; }
    .mega-menu.search-active .packages-panes{ display: flex; flex-direction: column; gap: 24px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
    .mega-menu.search-active .menu-pane.single-result .pane-grid{ grid-template-columns: 1fr; }
    /* Nav components mobile */
    .nav-link{ padding: 10px 12px !important; }
    .nav-icon{ background: none; }
    .nav-icon-button, .nav-pill-icon{ width: 40px; height: 40px; }
    .nav-icon-button img{ width: 20px; height: 20px; }
    /* Footer */
    .footer-payment{ flex-direction: column; gap: 30px; }
    .footer-main{ margin-top: 40px; padding-top: 30px; }
    /* User Profile Dropdown - Bottom Sheet */
    .user-profile-dropdown{ position: fixed; top: auto; bottom: 0; left: 0; right: 0; width: 100%; border-radius: 20px 20px 0 0; max-height: 50vh; transform: translateY(100%); }
    .user-profile-dropdown-item{ padding: 16px 20px; }
    .user-profile-dropdown-item:first-child:hover{ border-radius: 20px 20px 0 0; }
    .user-profile-dropdown-item:last-child:hover{ border-radius: 0; }
    /* User Profile Card */
    .user-profile-card{ padding: 0 8px; height: 45px; }
    .user-info{ width: auto; }
    .user-name{ font-size: 13px; }
    .user-balance{ font-size: 11px; } }
    /* ===== TABLET (max-width: 1025px) - Footer Fast Services ===== */
    @media (max-width: 1025px) {
    .fast-services-body{ flex-direction: column; padding-top: 0; margin: 0 16px; }
    .fast-services-header{ display: none; }
    .fast-services-sidebar{ width: 100%; flex-direction: row; overflow-x: auto; padding-bottom: 10px; padding: 0; gap: 0; justify-content: center; margin-top: 18px; }
    .fast-services-sidebar > li{ width: 122px; height: 107px; border-radius: 16px 16px 0px 0px; padding: 0; flex-direction: column; justify-content: center; align-items: center; gap: 6px; background: transparent; flex-shrink: 0; }
    .fast-services-sidebar > li.active{ background: #282C3D; }
    .fast-services-sidebar > li.active::before, .fast-services-sidebar > li.active::after{ display: none; }
    .fast-services-sidebar > li > div:first-child{ width: 40px; height: 40px; border: 1.21212px solid rgba(255, 255, 255, 0.2); border-radius: 10.9091px; }
    .fast-services-sidebar > li > div:first-child i{ font-size: 22px; }
    .fast-services-sidebar > li > div:last-child{ width: 84.5px; height: 37px; display: flex; flex-direction: row; justify-content: center; align-items: center; text-align: center; flex-wrap: wrap; }
    .fast-services-sidebar > li > div:last-child > span:first-child{ font-size: 16px; line-height: 19px; font-weight: 600; color: #FFFFFF; white-space: nowrap; }
    .fast-services-sidebar > li > div:last-child > span:last-child{ font-size: 16px; line-height: 19px; color: #FFFFFF; white-space: nowrap; }
    .fast-services-content{ padding: 20px; }
    .fast-services-grid{ grid-template-columns: repeat(2, 1fr); gap: 20px; }
    /* Footer Fast Services - Mobile View All Button */
    .fast-services-show-all{ display: flex; justify-content: center; align-items: center; width: 100%; height: 40px; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 9px; font-size: 14px; color: #FFFFFF; margin-top: 18px; cursor: pointer; }
    .fast-services-pane.expanded .fast-services-show-all{ display: none; }
    .fast-services-pane:not(.expanded) .fast-services-grid{ max-height: calc((30px + 18px) * 6); overflow: hidden; }
    .fast-services-grid li a > div:first-child{ width: 30px; height: 30px; }
    .fast-services-grid li a > div:first-child i{ font-size: 15px; } }
    /* ===== SMALL MOBILE (max-width: 480px) ===== */
    @media (max-width: 480px) {
    .footer-top-content{ gap: 20px; }
    .footer-address-box{ padding: 20px; height: auto; }
    .address-header h3{ font-size: 18px; line-height: 22px; }
    .footer-address-box p{ font-size: 13px; line-height: 20px; }
    .address-buttons{ gap: 10px; }
    .address-btn{ width: 100%; }
    .footer-fast-services{ height: auto; min-height: auto; }
    .fast-services-header{ display: none; }
    .fast-services-sidebar{ padding: 0; gap: 0; width: 100%; scrollbar-width: none; }
    .fast-services-sidebar > li{ width: 122px; height: 107px; border-radius: 16px 16px 0px 0px; padding: 0; flex-direction: column; justify-content: center; align-items: center; gap: 6px; background: transparent; }
    .fast-services-sidebar > li.active{ background: #282C3D; }
    .fast-services-sidebar > li.active::before, .fast-services-sidebar > li.active::after{ display: none; }
    .fast-services-sidebar > li > div:first-child{ width: 40px; height: 40px; border: 1.21212px solid rgba(255, 255, 255, 0.2); border-radius: 10.9091px; }
    .fast-services-sidebar > li > div:first-child i{ font-size: 22px; }
    .fast-services-sidebar > li > div:last-child{ width: 84.5px; height: 37px; display: flex; flex-direction: row; justify-content: center; align-items: center; text-align: center; flex-wrap: wrap; }
    .fast-services-sidebar > li > div:last-child > span:first-child{ font-size: 16px; line-height: 19px; font-weight: 600; color: #FFFFFF; white-space: nowrap; }
    .fast-services-content{ padding: 15px; }
    .fast-services-grid{ grid-template-columns: 1fr; gap: 15px; max-height: none; overflow: visible; }
    .fast-services-pane:not(.expanded) .fast-services-grid{ max-height: calc((30px + 18px) * 6); overflow: hidden; }
    .fast-services-show-all{ display: block; width: 100%; height: 40px; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 9px; font-size: 14px; color: #FFFFFF; margin-top: 18px; cursor: pointer; }
    .fast-services-show-all:hover{ background: rgba(255, 255, 255, 0.15); }
    .fast-services-pane.expanded .fast-services-show-all{ display: none; }
    /* Pane list small mobile */
    .pane-list{ gap: 15px; }
    .pane-list li a > div:first-child{ width: 30px; height: 30px; }
    .pane-list li a > div:first-child i{ font-size: 15px; } }
    /* ========================================
         END OF LAYOUT SECTION
         ======================================== */
    /* ========================================
         1.1 KEYFRAME ANIMATIONS
         ======================================== */
    @keyframes fadeIn {
    from{ opacity: 0; transform: translateY(20px); }
    to{ opacity: 1; transform: translateY(0); } }
    @keyframes fadeInUp {
    from{ opacity: 0; transform: translateY(30px); }
    to{ opacity: 1; transform: translateY(0); } }
    @keyframes fadeInDown {
    from{ opacity: 0; transform: translateY(-30px); }
    to{ opacity: 1; transform: translateY(0); } }
    @keyframes scaleIn {
    from{ opacity: 0; transform: scale(0.9); }
    to{ opacity: 1; transform: scale(1); } }
    @keyframes slideOutUp {
    from{ opacity: 1; transform: translateY(0); }
    to{ opacity: 0; transform: translateY(-15px); } }
    @keyframes slideInDown {
    from{ opacity: 0; transform: translateY(15px); }
    to{ opacity: 1; transform: translateY(0); } }
    @keyframes pulse {
    0%, 100%{ transform: scale(1); }
    50%{ transform: scale(1.05); } }
    @keyframes loading {
    0%{ background-position: 200% 0; }
    100%{ background-position: -200% 0; } }
    @keyframes spin {
    to{ transform: rotate(360deg); } }
    /* ========================================
         1.2 SECTION BASE STYLES
         ======================================== */
    section, .hakkimizda-section{ padding: 0; }
    .section-dark{ background-color: var(--bg-dark); color: var(--text-light); }
    .section-light-alt{ background-color: var(--bg-light-alt); }
    .section-padding{ padding: 60px 0 90px; }
    .filler-section{ height: 90vh; background: url('../images/paket-adimlar/filler-bg.png'); background-size: cover; background-position: center; background-repeat: no-repeat; }
    /* Section Headers */
    .section-header{ text-align: center; margin-bottom: 30px; }
    .section-header h2 span, .section-header h3 span, .section-title-purple{ color: var(--dynamic-platform-color); transition: color var(--transition-default); }
    .section-header p, .step-nr-inactive span, .ucretsiz-deneme-step-title-inactive, .ucretsiz-deneme-step-description-inactive, .musteri-siparisler-search-input::placeholder, .musteri-destek-search input::placeholder, .musteri-siparisler-service-status.status-light{ color: #666F94!important; }
    .section-dark .section-header p, .filter-search .search-input::placeholder, .search-box input::placeholder{ color: rgba(255, 255, 255, 0.6); }
    /* Display Utilities */
    .navbar-mobile-actions, .mobile-only, .hero-slide:not(.active) .hero-slide-content > .hero-slide-badge, .hero-slide:not(.active) .hero-slide-content > p:first-of-type, .hero-slide:not(.active) .hero-slide-content > .hero-slide-form, .hero-slide:not(.active) .hero-slide-content > .hero-link-cards, .hero-form-submit:disabled::before, .hero-slide.active .hero-slide-image img:last-child, .hero-slide:not(.active) .hero-slide-image img:first-child, .services-menu-mobile-actions, .comments-grid > li > div:first-of-type, .hakkimizda-slider .slide:not(.active) .slide-content > .slide-text p, .package-label-mobile, .menu-sidebar > li.active:first-child::before, .mega-menu.search-active .menu-sidebar, .mega-menu.search-active .packages-banner, .mega-menu.search-active .packages-header, .mega-menu.search-active .packages-footer{ display: none; }
    .desktop-only, [data-dropdown-menu] li.selected > span:last-child, .hero-slide:not(.active) .hero-minimized-click-icon, .country-dropdown-menu.active, .menu-item.active svg, .talep-dropdown.active .talep-dropdown-menu, .musteri-ayarlar-dropdown-menu.show, .menu-pane.active{ display: block; }
    /* Screen Reader Only */
    .sr-only{ position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; }
    /* ========================================
         1.3 HERO SECTIONS
         ======================================== */
    /* Hero Container Base */
    .hero-container-base{ background: transparent; padding: 20px 0; }
    /* Hero Card - Dark Style */
    .hero-card-dark{ background-color: #1E2130; background-image: url('../images/tum-hizmetler/hizmet-ara-bg.png'); background-size: auto 100%; background-repeat: no-repeat; background-position: left center; border-radius: 24px; border-right: 7px solid #7844E4; border-bottom: 7px solid #7844E4; display: flex; flex-direction: column; align-items: center; gap: 16px; position: relative; padding: 36px 0 43px 0; }
    /* Hero Badge */
    .hero-badge{ background: rgba(255, 255, 255, 0.1); border-radius: 10px; display: flex; align-items: center; justify-content: center; padding: 10px 20px; animation: floatingImage 4s ease-in-out infinite; }
    .hero-badge span{ font-size: 14px; font-weight: 600; line-height: var(--lh-tight); color: #FFFFFF; }
    /* Hero Text Container */
    .hero-text-container, .referans-confirm-text{ width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; }
    /* Hero Title - Dark */
    .hero-title-dark, .hero-container-base .hero-text-container h1, .kategori-header .hero-text-container h1{ font-size: 30px; font-weight: 600; line-height: var(--lh-tight); color: #FFFFFF; text-align: center; margin: 0; width: 100%; }
    /* Hero Description - Dark */
    .hero-description-dark, .hero-container-base .hero-text-container p, .kategori-header .hero-text-container p{ font-weight: 400; line-height: var(--lh-tight); color: rgba(255, 255, 255, 0.6); text-align: center; margin: 0; width: 100%; }
    /* Hero Icon Container */
    .hero-icon{ display: flex; align-items: center; justify-content: center; }
    .hero-icon svg, .services-grid > .service-card-link .service-card-icon svg, .services-grid > div .service-card-icon svg, .comment-quote > div:first-child svg{ width: 100%; height: 100%; }
    /* Hero Filters */
    .hero-card-dark .filters{ display: flex; align-items: center; gap: 12px; width: 100%; max-width: 1320px; padding: 0 24px; position: relative; z-index: 10; overflow: visible; }
    .hero-container-base .filter-dropdown, .service-pill span, [data-dropdown-menu] li > span:not(:last-child){ flex: 1; }
    .filter-item{ display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: rgba(255, 255, 255, 0.1); border-radius: 12px; cursor: pointer; transition: all 0.3s ease; min-width: 180px; }
    .filter-item:hover{ background: rgba(255, 255, 255, 0.15); }
    .filter-item > svg:first-child, .dropdown-option > svg:first-child, .search-box svg, .input-display-content svg, .upsell_btn_primary svg{ width: 24px; height: 24px; flex-shrink: 0; }
    .filter-item > div, .dropdown-option > div{ width: 1px; height: 20px; background: rgba(255, 255, 255, 0.2); }
    .filter-item > span, .dropdown-option > span{ flex: 1; font-size: 14px; font-weight: 600; color: #FFFFFF; }
    .filter-item > svg:last-child, .musteri-siparisler-filter-arrow, .musteri-destek-filter svg{ width: 18px; height: 18px; flex-shrink: 0; transition: transform 0.3s ease; }
    .filter-dropdown.active .filter-item > svg:last-child, .hero-form-dropdown.active .hero-dropdown-icon, .musteri-siparisler-filter.active .musteri-siparisler-filter-arrow, .musteri-destek-filter.active svg, .talep-dropdown.active > div:nth-child(4), .musteri-ayarlar-dropdown-wrapper.active .musteri-ayarlar-dropdown-icon{ transform: rotate(180deg); }
    /* Dropdown Menu */
    .dropdown-menu{ position: absolute; top: calc(100% + 8px); left: 0; right: 0; background: rgba(30, 33, 48, 0.98); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; padding: 8px; opacity: 0; visibility: hidden; transform: translateY(-10px); transition: all 0.3s ease; z-index: 1000; max-height: 300px; overflow-y: auto; display: block; }
    .filter-dropdown.active .dropdown-menu, .user-profile-dropdown.active, .musteri-siparisler-filter-dropdown.show, .musteri-destek-filter-dropdown.show{ opacity: 1; visibility: visible; transform: translateY(0); }
    .dropdown-option{ display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 8px; cursor: pointer; transition: all 0.2s ease; }
    .dropdown-option:hover{ background: rgba(255, 255, 255, 0.1); }
    .dropdown-option > svg:last-child{ width: 20px; height: 20px; flex-shrink: 0; opacity: 0; transition: opacity 0.2s ease; }
    .dropdown-option.selected > svg:last-child, .comments-grid > li.active > div:last-child, .comments-grid > li.active img, .ucretsiz-deneme-package-active .ucretsiz-deneme-package-overlay, .ucretsiz-deneme-package-active .ucretsiz-deneme-package-icon{ opacity: 1; }
    /* Filter Search */
    .filter-search{ flex: 1; min-width: auto; }
    .filter-search .search-input{ flex: 1; background: transparent; border: none; outline: none; font-size: 14px; font-weight: 600; color: #FFFFFF; }
    /* Hero Search Box */
    .hero-card-dark .search-box{ display: flex; align-items: center; gap: 19px; width: 100%; max-width: 689px; height: 62px; padding: 19px; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 16px; transition: var(--transition-default); }
    .hero-card-dark .search-box:focus-within{ background: rgba(255, 255, 255, 0.15); border-color: rgba(255, 255, 255, 0.3); }
    .search-box > div:nth-child(2){ width: 1px; height: 20px; background: rgba(255, 255, 255, 0.2); flex-shrink: 0; }
    .search-box input{ flex: 1; border: none; background: transparent; outline: none; font-size: 14px; font-weight: 600; line-height: 1.2857142857142858em; color: #FFFFFF; min-width: 0; }
    .search-box button{ width: 80px; height: 40px; padding: 10px; background: #FFFFFF; border: none; border-radius: 10px; font-size: 14px; font-weight: 600; line-height: 1.2857142857142858em; color: #1E2130; cursor: pointer; transition: var(--transition-default); white-space: nowrap; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
    .search-box button:hover{ background: rgba(255, 255, 255, 0.9); transform: translateY(-1px); }
    /* Hero Content (Ekstra Paketler) */
    .hero-content{ display: flex; flex-direction: column; align-items: center; gap: 19px; }
    .hero-content h1{ font-size: 42px; font-weight: 600; line-height: 1.5; letter-spacing: -0.48px; text-align: center; color: var(--text-primary); margin: 0; max-width: 1040px; }
    .hero-content h1 span{ background: linear-gradient(90deg, #6400d9 0%, #ff55f8 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
    .hero-content p{ font-size: 18px; font-weight: 400; line-height: 1.389; text-align: center; color: var(--text-secondary); margin: 0; max-width: 748px; }
    /* Hero Buttons */
    .app-store-badges, .hero-link-card-content, .services-menu-section-info, .ucretsiz-deneme-timer, .task-buttons, .iletisim-info-item, .account-profile, .musteri-siparisler-controls, .musteri-siparis-left, .musteri-siparis-card > div:first-child > div:first-child, .musteri-destek-controls, .musteri-destek-ticket-top, .transaction-left, .musteri-pagination-controls, .quick-list > li > div, .hero-buttons, .table-package > div:first-child{ display: flex; align-items: center; gap: 10px; }
    .hero-buttons .btn-outline{ padding: 10px 20px; border-radius: 12px; font-size: 16px; font-weight: 600; line-height: 1.5625; white-space: nowrap; background-color: var(--bg-light); border: 1px solid #CDD5DF; color: var(--text-primary); }
    .hero-buttons .btn-outline:hover{ background-color: rgba(120, 68, 228, 0.05); border-color: var(--primary-purple); color: var(--text-primary); }
    .hero-buttons .btn-primary{ padding: 10px 20px; border-radius: 12px; font-size: 16px; font-weight: 600; line-height: 1.5625; white-space: nowrap; background-color: var(--primary-purple); border: 1px solid #CDD5DF; color: var(--text-light); }
    .hero-buttons .btn-primary:hover{ background-color: rgba(120, 68, 228, 0.05); border-color: var(--primary-purple); color: var(--primary-purple); }
    .hero-avatars-container{ width: 100%; overflow: hidden; margin-top: 50px; }
    .hero-avatars{ display: flex; align-items: center; gap: 20px; transition: transform 0.5s ease-in-out; }
    .ekstra-paketler-avatar{ width: 250px; height: 250px; object-fit: cover; border-radius: 0; flex-shrink: 0; pointer-events: none; user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -webkit-user-drag: none; -moz-user-drag: none; -ms-user-drag: none; -webkit-touch-callout: none; }
    /* Hero padding */
    .ucretsiz-araclar, #section_slider, .paragraph-section, .sinirsiz-servis, .musteriler-bag-kurun-section, .hero{ padding: 20px 0; }
    /* ========================================
         1.3.1 HERO SLIDER (Homepage)
         Source: homepage.css (consolidated in Phase 3)
         ======================================== */
    /* Hero Slider Container */
    .hero-slider-container{ display: flex; justify-content: center; align-items: center; gap: 15px; max-width: var(--home-max-width); margin: 0 auto; padding: 0 24px;
    /* CLS fix: Sabit yukseklik ile layout kaymasi onlenir */ min-height: var(--home-hero-height); }
    /* Hero Slide Base - PERFORMANS ODAKLI */
    .hero-slide{ position: relative; background-color: var(--bg-light); border-radius: 30px; overflow: hidden; display: flex; height: var(--home-hero-height); transform-origin: center;
    /* PERFORMANS: Sadece gerekli property'leri animate et */ transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1),
          opacity 0.25s ease-out,
          transform 0.25s ease-out,
          box-shadow 0.2s ease-out;
    /* PERFORMANS: GPU acceleration + layout containment */ contain: layout style; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
    /* will-change sadece hover'da aktif - GPU bellegi optimizasyonu */
    .hero-slide:hover{ will-change: width, transform, opacity; }
    /* Active (Expanded) Slide - Exact Figma dimensions */
    .hero-slide.active{ width: var(--home-hero-expanded-width); height: var(--home-hero-height); cursor: default; flex-direction: row; align-items: stretch; background-color: var(--bg-light); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12); transform: scale(1); opacity: 1; z-index: 2; overflow: visible; }
    /* Inactive (Minimized) Slides */
    .hero-slide:not(.active){ width: var(--home-hero-collapsed-width); cursor: pointer; flex-direction: column; align-items: center; justify-content: space-between; opacity: 0.95; transform: scale(0.98); z-index: 1; }
    .hero-slide:not(.active):hover, .hakkimizda-slider .slide:not(.active):hover{ transform: scale(1) translateY(-4px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15); opacity: 1; }
    /* Slide Color Backgrounds - Only for minimized state */
    .hero-slide:is(.hero-slide-purple, .hero-slide-blue, .hero-slide-orange):not(.active){ background: var(--bg-light); }
    /* Slide Content */
    .hero-slide-content{ position: relative; z-index: 2; flex: 1; }
    /* Expanded Content - Left side form/content area */
    .hero-slide.active .hero-slide-content{ padding: 30px; padding-top: 28px; width: 421px; flex-shrink: 0; }
    /* Minimized Content - Takes full width, centered */
    .hero-slide:not(.active) .hero-slide-content{ padding: 45px 10px 20px; width: fit-content; flex: 0 0 auto; }
    /* Expanded Content - Show when active */
    .hero-slide.active .hero-slide-content > .hero-slide-badge, .hero-slide.active .hero-slide-content > .hero-slide-form, .hero-slide.active .hero-slide-content > .hero-link-cards{ display: flex; opacity: 1; transform: translateX(0); }
    /* BASE = INACTIVE stilleri (ilk renderda dogru font icin) */
    .hero-slide-content > span:first-of-type{ font-size: 16px; font-weight: 600; line-height: 1.25; color: var(--text-primary); margin: 0; text-align: center; display: block; opacity: 1; transform: none; }
    .hero-slide-content > span:first-of-type > span{ font-size: 24px; font-weight: 600; line-height: 1.25; color: var(--slide-color, var(--primary-purple)); display: block; }
    /* ACTIVE icin override */
    .hero-slide.active .hero-slide-content > span:first-of-type{ font-size: 24px; line-height: 1.39; margin-bottom: 6px; text-align: left; opacity: 1; transform: translate3d(0, 0, 0); transition: opacity 0.25s ease-out 0.08s,
          transform 0.25s ease-out 0.08s; }
    .hero-slide.active .hero-slide-content > span:first-of-type > span{ font-size: 30px; display: inline; }
    /* BASE = INACTIVE p stilleri */
    .hero-slide-content > p:first-of-type{ font-size: 14px; font-weight: 600; line-height: 1.375; color: var(--home-text-muted); margin: 0; text-align: center; display: none; opacity: 1; transform: none; }
    /* ACTIVE p icin override */
    .hero-slide.active .hero-slide-content > p:first-of-type{ display: block; font-size: 16px; margin-bottom: 16px; text-align: left; opacity: 1; transform: translate3d(0, 0, 0); transition: opacity 0.25s ease-out 0.12s,
          transform 0.25s ease-out 0.12s; }
    .hakkimizda-slider .slide.active .slide-text p{ animation: slideInUp 0.4s ease 0.15s forwards; }
    /* Hero Form */
    .hero-slide-form, .odeme-info-field{ display: flex; flex-direction: column; gap: 12px; }
    /* Fast Order Wrapper - display:contents ile layout'u bozmaz */
    .hero-fast-order{ display: contents; }
    /* ================================================
         CASCADE REVEAL - Yukaridan asagi sirayla gelme
         ================================================ */
    /* Temel keyframe - yukaridan asagi */
    @keyframes cascadeDown {
    0%{ opacity: 0; transform: translateY(-20px); }
    100%{ opacity: 1; transform: translateY(0); } }
    /* Hero slide aktif oldugunda tum icerikler gizli baslar */
    .hero-slide.active .hero-slide-content > .hero-slide-badge, .hero-slide.active .hero-slide-content > span:first-of-type, .hero-slide.active .hero-slide-content > p:first-of-type, .hero-slide.active .hero-slide-content > .hero-slide-form, .hero-slide.active .hero-slide-content > .hero-link-cards{ opacity: 0; animation: cascadeDown 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; }
    /* 1. Badge - ilk gelir */
    .hero-slide.active .hero-slide-content > .hero-slide-badge{ animation-delay: 0.05s; padding-left: 0px !important; margin-left: 0px !important; }
    /* 2. Baslik - ikinci gelir */
    .hero-slide.active .hero-slide-content > span:first-of-type{ animation-delay: 0.12s; }
    /* 3. Aciklama - ucuncu gelir */
    .hero-slide.active .hero-slide-content > p:first-of-type{ animation-delay: 0.20s; }
    /* 4. Form/Butonlar - dorduncu gelir */
    .hero-slide.active .hero-slide-content > .hero-slide-form, .hero-slide.active .hero-slide-content > .hero-link-cards{ animation-delay: 0.28s; }
    /* Form icindeki her eleman da sirayla */
    .hero-slide.active .hero-slide-form > *{ opacity: 0; animation: cascadeDown 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; }
    .hero-slide.active .hero-slide-form > *:nth-child(1){ animation-delay: 0.30s; }
    .hero-slide.active .hero-slide-form > *:nth-child(2){ animation-delay: 0.36s; }
    .hero-slide.active .hero-slide-form > *:nth-child(3){ animation-delay: 0.42s; }
    .hero-slide.active .hero-slide-form > *:nth-child(4){ animation-delay: 0.48s; }
    /* Link kartlari da sirayla */
    .hero-slide.active .hero-link-cards .hero-link-card{ opacity: 0; animation: cascadeDown 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; }
    .hero-slide.active .hero-link-card:nth-child(1){ animation-delay: 0.30s; }
    .hero-slide.active .hero-link-card:nth-child(2){ animation-delay: 0.36s; }
    .hero-slide.active .hero-link-card:nth-child(3){ animation-delay: 0.42s; }
    .hero-slide.active .hero-link-card:nth-child(4){ animation-delay: 0.48s; }
    .paragraph-item:nth-child(2) .paragraph-image img, .sinirsiz-servis-tag-row:nth-child(2) .sinirsiz-servis-tag:nth-child(1){ animation-delay: 0.45s; }
    /* Dropdown Wrapper */
    .hero-form-dropdown-wrapper{ position: relative; z-index: 1; }
    .hero-form-dropdown-wrapper:has(.hero-form-dropdown.active){ z-index: 100; }
    /* Dropdown Button */
    .hero-form-dropdown{ background-color: var(--bg-light); border: 1px solid var(--home-border-light); border-radius: 14px; padding: 10px 13px; display: flex; justify-content: space-between; align-items: center; height: 50px; cursor: pointer; transition: all 0.3s ease; }
    .hero-form-dropdown:hover:not(.disabled), .hero-form-dropdown.active, .eposta-input-wrapper:focus-within{ border-color: var(--primary-purple); }
    .hero-form-dropdown.disabled{ opacity: 0.5; cursor: not-allowed; background-color: var(--home-surface-muted); }
    .hero-form-dropdown.disabled > span{ color: #b0b0b0; }
    .hero-form-dropdown > span{ font-size: 15px; font-weight: 600; line-height: 1.19; color: var(--text-dark-muted); transition: color 0.3s ease; }
    .hero-form-dropdown.active > span, .hero-form-dropdown.selected > span{ color: var(--text-primary); }
    .hero-dropdown-icon{ width: 30px; height: 30px; background-color: rgba(102, 111, 148, 0.1); border-radius: 8px; display: flex; align-items: center; justify-content: center; transition: transform 0.3s ease; }
    /* Dropdown Menu */
    [data-dropdown-menu]{ position: absolute; top: calc(100% + 5px); left: 0; right: 0; background-color: var(--home-surface-soft); border: 1px solid var(--primary-light); border-radius: 10px; max-height: 0; overflow: hidden; opacity: 0; visibility: hidden; transition: all 0.3s ease; z-index: 10; padding: 0; margin: 0; }
    [data-dropdown-menu].active{ max-height: 200px; overflow-y: auto; opacity: 1; visibility: visible; }
    [data-dropdown-menu] li{ padding: 10px 15px; font-weight: 600; line-height: 1.25; color: var(--text-dark-muted); cursor: pointer; transition: all 0.2s ease; border-bottom: 1px solid var(--primary-light); display: flex; align-items: center; gap: 8px; }
    [data-dropdown-menu] li:last-child{ border-bottom: 0; }
    [data-dropdown-menu] li:hover, [data-dropdown-menu] li.selected{ background-color: var(--bg-light); color: var(--text-primary); }
    [data-dropdown-menu] li > i{ width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; font-size: 18px; color: var(--text-dark-muted); flex-shrink: 0; margin-right: 8px; }
    [data-dropdown-menu] li > span:last-child{ width: 20px; height: 20px; display: none; flex-shrink: 0; flex: 0 0 20px; }
    /* Custom scrollbar for dropdown */
    [data-dropdown-menu]::-webkit-scrollbar, .menu-pane::-webkit-scrollbar{ width: 4px; }
    [data-dropdown-menu]::-webkit-scrollbar-track{ background: transparent; }
    .packages-social-icon:not(.packages-social-icon-active){ background: transparent; }
    [data-dropdown-menu]::-webkit-scrollbar-thumb{ background: rgba(120, 68, 228, 0.2); border-radius: 2px; }
    [data-dropdown-menu]::-webkit-scrollbar-thumb:hover{ background: rgba(120, 68, 228, 0.4); }
    .hero-form-submit{ background-color: var(--primary-purple); color: var(--text-light); border: none; border-radius: 16px; padding: 8px; font-size: 15px; font-weight: 600; height: 50px; cursor: pointer; transition: all 0.3s ease; position: relative; overflow: hidden; }
    .hero-form-submit:hover:not(:disabled){ background-color: #6837c9; box-shadow: 0 4px 12px rgba(120, 68, 228, 0.3); }
    .hero-form-submit:disabled{ background-color: #d1d1d6; color: #8e8e93; cursor: not-allowed; box-shadow: none; }
    /* Hero Link Cards (for blue and orange slides) */
    .hero-link-cards{ display: flex; flex-direction: column; gap: 12px; margin-top: 24px; }
    .hero-link-card{ background-color: color-mix(in srgb, var(--slide-color, var(--primary-purple)) 11%, white); border: 1px solid color-mix(in srgb, var(--slide-color, var(--primary-purple)) 20%, white); border-radius: 14px; height: 50px; display: flex; align-items: center; justify-content: space-between; padding: 0 10px; cursor: pointer; transition: all 0.3s ease; }
    .hero-link-card:hover{ border-color: var(--slide-color, var(--primary-purple)); background-color: color-mix(in srgb, var(--slide-color, var(--primary-purple)) 18%, white); transform: translateX(4px); }
    .hero-link-card-icon{ width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background-color: var(--slide-color, var(--primary-purple)); }
    .hero-link-card-icon i{ color: var(--text-light); font-size: 14px; }
    .hero-link-card-content > span{ font-size: 15px; font-weight: 600; color: var(--slide-color, var(--primary-purple)); line-height: 1.19; }
    .hero-link-card-arrow{ width: 30px; height: 30px; background-color: color-mix(in srgb, var(--slide-color, var(--primary-purple)) 15%, white); border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
    .hero-link-card-arrow svg path{ stroke: var(--slide-color, var(--primary-purple)); }
    /* Minimized Content - Show when inactive */
    .hero-slide:not(.active) .hero-slide-content{ display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; }
    /* Minimized stiller artik BASE'de tanimli - burada sadece ek ayarlar */
    .hero-slide:not(.active) .hero-slide-content > span:first-of-type > span{ color: var(--slide-color, var(--primary-purple)); }
    /* Click icon - positioned inside hero-slide (Desktop: right side) */
    .hero-minimized-click-icon{ display: none; font-size: 24px; color: var(--home-text-muted); opacity: 0.6; position: absolute; right: 40%; top: 20px; transform: translateY(-50%); animation: clickIconPulse 2s ease-in-out infinite; }
    @keyframes clickIconPulse {
    0%, 100%{ transform: translateY(-50%) translateX(0); opacity: 0.6; }
    50%{ transform: translateY(-50%) translateX(-8px); opacity: 1; } }
    /* Slide Images */
    .hero-slide-image{ position: relative; z-index: 1; pointer-events: none; display: flex; align-items: flex-end; justify-content: center; }
    /* Expanded State - Image on right side */
    .hero-slide.active .hero-slide-image{ flex: 1; position: relative; }
    /* Minimized State - Image at bottom */
    .hero-slide:not(.active) .hero-slide-image{ width: 100%; flex: 0 0 auto; position: relative; display: flex; justify-content: center; align-items: flex-end; }
    .hero-slide-image img{ transition: opacity 0.3s ease-out,
          transform 0.3s ease-out; transform: translate3d(0, 0, 0); backface-visibility: hidden; -webkit-backface-visibility: hidden; }
    /* Show/Hide Images Based on State */
    .hero-slide.active .hero-slide-image img:first-child{ position: absolute; bottom: 0; right: 0; z-index: 1; opacity: 1; transform: translate3d(0, 0, 0) scale(1); animation: slideInImage 0.35s ease-out 0.1s both; padding: 10px; }
    .hero-slide:not(.active) .hero-slide-image img:last-child{ display: block; position: relative; opacity: 1; transform: translate3d(0, 0, 0) scale(1); animation: fadeInScale 0.3s ease-out 0.05s both; padding: 10px; }
    /* Keyframe Animations for Hero Slider */
    @keyframes slideInUp {
    0%{ opacity: 0; transform: translate3d(0, 12px, 0); }
    100%{ opacity: 1; transform: translate3d(0, 0, 0); } }
    @keyframes slideInImage {
    0%{ opacity: 0; transform: translate3d(15px, 0, 0) scale(0.96); }
    100%{ opacity: 1; transform: translate3d(0, 0, 0) scale(1); } }
    @keyframes fadeInScale {
    0%{ opacity: 0; transform: translate3d(0, 0, 0) scale(0.9); }
    100%{ opacity: 1; transform: translate3d(0, 0, 0) scale(1); } }
    /* Hero Slide Images - Exact Figma positioning */
    .hero-slide:is(.hero-slide-purple, .hero-slide-blue, .hero-slide-orange).active .hero-slide-image img:first-child{ object-fit: contain; right: 15px; bottom: 15px; }
    .hero-slide:is(.hero-slide-purple, .hero-slide-blue, .hero-slide-orange):not(.active) .hero-slide-image img:last-child{ width: 160px; height: auto; max-height: 400px; bottom: 15px; }
    /* Badge Styles (Desktop) */
    .hero-slide-badge{ display: flex; align-items: center; gap: 6px; padding: 5px 10px 5px 0px; background-color: var(--bg-light); border: 1px solid var(--home-border-light); border-radius: 8px; height: 30px; width: fit-content; margin-bottom: 14px; margin-left: 14px; position: relative; opacity: 0; transform: translateX(-20px); transition: opacity 0.5s ease 0.2s, transform 0.5s ease 0.2s; }
    .hero-badge-icon{ width: 44px; height: 44px; position: absolute; left: -24px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; background: var(--slide-color); border-radius: 50%; }
    .hero-badge-icon i{ font-size: 18px; color: var(--text-light); }
    .hero-slide-badge h1{ font-size: 14px; font-weight: 600; line-height: 1.57; color: var(--primary-purple); margin: 0; }
    /* Hero Slider SVG Icons */
    .hero-badge-icon .svg-icon{ width: 20px; height: 20px; color: var(--text-light); }
    .hero-link-card-arrow .svg-icon{ width: 18px; height: 18px; color: var(--text-dark-muted); transition: color 0.2s ease; }
    .hero-link-card:hover .hero-link-card-arrow .svg-icon{ color: var(--slide-color, var(--primary-purple)); }
    .hero-minimized-click-icon.svg-icon{ width: 24px; display: none; height: 24px; opacity: 0.8; }
    @media (max-width: 1024px) {
    .hero-slider-container{ flex-direction: column; gap: 12px; padding: 0 16px; min-height: auto; }
    .hero-slide{ width: 100% !important; height: auto; }
    .hero-slide.active{ min-height: 400px; flex-direction: column; border-radius: 30px; }
    .hero-slide:not(.active){ height: 97px; flex-direction: row; justify-content: space-between; align-items: center; padding: 0; }
    .hero-slide.active .hero-slide-content{ width: 100%; padding: 24px; order: 2; flex: 0 0 auto; }
    .hero-slide-badge{ margin-bottom: 10px; margin-left: 14px; }
    .hero-slide:not(.active) .hero-slide-content{ padding: 24px; width: 264px; flex: 0 0 auto; flex-direction: column; justify-content: center; align-items: flex-start; text-align: left; gap: 0; }
    .hero-slide.active .hero-slide-content > span:first-of-type{ font-size: 24px; font-weight: 600; line-height: 1.21; margin-bottom: 10px; }
    .hero-slide.active .hero-slide-content > span:first-of-type > span{ font-size: 28px; }
    .hero-slide.active .hero-slide-content > p:first-of-type{ font-size: 16px; font-weight: 600; line-height: 1.38; margin-bottom: 12px; margin-top: 10px; }
    .hero-slide:not(.active) .hero-slide-content > span:first-of-type{ font-size: 15px; font-weight: 600; line-height: 1.1; text-align: left; }
    .hero-slide:not(.active) .hero-slide-content > span:first-of-type > span{ font-size: 24px; font-weight: 600; line-height: 1.1; text-align: left; }
    .hero-minimized-click-icon{ right: 30px; top: 50px; }
    .hero-slide:not(.active) .hero-slide-content > span:first-of-type br{ display: none; }
    .hero-slide-form{ gap: 12px; margin-bottom: 0; }
    .hero-form-dropdown-wrapper{ width: 100%; }
    .hero-link-cards{ gap: 12px; margin-top: 12px; }
    .hero-slide-image{ display: none !important; } }
    .platform-services{ background: transparent; padding: 0 0 90px 0; }
    .platform-grid{ display: grid; grid-template-columns: repeat(5, max-content); gap: 10px; justify-content: center; }
    /* Platform Card Base */
    .platform-card{ width: 208px; height: 90px; display: block; }
    .platform-card-inner{ position: relative; width: 100%; height: 100%; border-radius: 18px; display: flex; align-items: center; overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease; }
    .platform-card-inner::before{ content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent); transition: left 0.6s; z-index: 1; pointer-events: none; }
    .platform-card:hover .platform-card-inner{ transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15); }
    .submit-btn:hover::before, .platform-card:hover .platform-card-inner::before, .platform-filter:hover::before, .deneme-submit-btn:hover::before, .odeme-submit-btn:hover::before{ left: 100%; }
    .card-text{ position: absolute; left: 20px; top: 27px; display: flex; flex-direction: column; gap: 0; z-index: 2; }
    .card-text span:first-child{ font-size: 18px; font-weight: 600; line-height: var(--lh-tight); color: #FFFFFF; }
    .card-text span:last-child, .platform-service{ font-weight: 400; line-height: var(--lh-tight); color: #FFFFFF; }
    .platform-card-inner > div:last-child{ position: absolute; right: 17px; top: 17px; width: 56px; height: 56px; background: rgba(255, 255, 255, 0.15); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 15px; backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; color: #FFFFFF; font-size: 26px; z-index: 2; }
    .threads-icon{ font-size: 26px; font-weight: 900; line-height: var(--lh-tight); color: #FFFFFF; }
    /* Platform-Specific Background Colors */
    .platform-card-instagram, .services-menu-item .instagram, .instagram-filter, .service-card:has(.platform-card-instagram) .service-item > div:first-child > div:first-child{ background-color: #E1306C; }
    .platform-card-tiktok, .services-menu-item .tiktok, .tiktok-filter{ background-color: #3F3357; }
    .platform-card-twitter, .services-menu-item .twitter, .twitter-filter, .software-filter, .service-card:has(.platform-card-twitter) .service-item > div:first-child > div:first-child{ background-color: #1DA1F2; }
    .platform-card-youtube, .services-menu-item .youtube, .youtube-filter{ background-color: #E90004; }
    .platform-card-facebook, .services-menu-item .facebook, .facebook-filter, .service-card:has(.platform-card-facebook) .service-item > div:first-child > div:first-child{ background-color: #1877F2; }
    .platform-card-spotify, .services-menu-item .spotify, .service-card:has(.platform-card-spotify) .service-item > div:first-child > div:first-child{ background-color: #29D266; }
    .platform-card-telegram, .services-menu-item .telegram{ background-color: #18A4EA; }
    .platform-card-soundcloud, .services-menu-item .soundcloud{ background-color: #F97637; }
    .platform-card-twitch, .services-menu-item .twitch, .service-card:has(.platform-card-twitch) .service-item > div:first-child > div:first-child{ background-color: #9752FF; }
    .platform-card-kick, .services-menu-item .kick{ background-color: #00E701; }
    .platform-card-discord, .services-menu-item .discord, .service-card:has(.platform-card-discord) .service-item > div:first-child > div:first-child{ background-color: #5562EA; }
    .platform-card-threads, .services-menu-item .threads{ background-color: #23272A; }
    .platform-card-linkedin, .services-menu-item .linkedin{ background-color: #168CCD; }
    .platform-card-google, .services-menu-item .google{ background-color: #5594FD; }
    .platform-card-pinterest, .services-menu-item .pinterest, .service-card:has(.platform-card-pinterest) .service-item > div:first-child > div:first-child{ background-color: #E00022; }
    /* Platform Section (Servisler page) */
    .platform-section{ padding: 10px 0 80px 0; }
    .service-card{ display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; max-width: 443px; margin: 0 auto; background: #FFFFFF; border-top: 4px solid transparent; border-radius: 20px; padding: 20px; }
    .service-card:has(.platform-card-instagram){ border-top-color: #E1306C; }
    .service-card:has(.platform-card-twitter){ border-top-color: #1DA1F2; }
    .service-card:has(.platform-card-spotify){ border-top-color: #29D266; }
    .service-card:has(.platform-card-facebook){ border-top-color: #1877F2; }
    .service-card:has(.platform-card-twitch){ border-top-color: #9752FF; }
    .service-card:has(.platform-card-discord){ border-top-color: #5562EA; }
    .service-card:has(.platform-card-pinterest){ border-top-color: #E00022; }
    .service-header{ position: relative; display: flex; align-items: center; justify-content: flex-start; width: 100%; height: 88px; border-radius: 18px; padding: 20px; }
    .service-header > div:first-child{ position: absolute; left: 16px; top: 16px; width: 56px; height: 56px; background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(4px); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 15px; display: flex; align-items: center; justify-content: center; }
    .service-header h3{ font-weight: 600; font-size: 18px; line-height: 1.19; color: #FFFFFF; margin: 0; text-align: left; position: absolute; left: 84px; top: 50%; transform: translateY(-50%); }
    .service-header h3 .platform-service{ display: block; font-size: 15px; }
    .service-body, .price-table{ display: flex; flex-direction: column; gap: 10px; width: 100%; }
    .hidden-items{ display: flex; flex-direction: column; gap: 10px; max-height: 0; overflow: hidden; transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
    .service-body.expanded .hidden-items{ max-height: 1500px; }
    .service-item{ display: flex; justify-content: space-between; align-items: center; padding: 14px; background: #F6F7FB; border: 1px solid rgba(234, 234, 237, 0.5); border-radius: 15px; cursor: pointer; transition: var(--transition-default); }
    .service-item:hover{ background: #EBEDF5; border-color: rgba(120, 68, 228, 0.2); }
    .service-item > div:first-child, .price-package-info{ display: flex; align-items: center; gap: 12px; }
    .service-item > div:first-child > div:first-child{ width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 18px; color: #FFFFFF; }
    .service-item span{ font-weight: 600; font-size: 14px; line-height: 1.29; color: #33353E; }
    .show-more{ display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px; background: transparent; border: none; font-weight: 600; font-size: 14px; color: #666F94; cursor: pointer; transition: var(--transition-default); }
    .show-more:hover svg path{ stroke: var(--primary-purple); }
    .service-body.expanded .show-more svg{ transform: rotate(180deg); }
    /* ----------------------------------------
         1.4.1 SERVICES GRID (Homepage)
         Source: homepage.css (consolidated in Phase 3)
         ---------------------------------------- */
    /* Section Container */
    .services-section, #platform-section{ padding: 0 0 var(--section-padding) 0; }
    /* Section Header */
    .services-header{ text-align: center; margin-bottom: 30px; }
    /* Title & Description */
    .text-primary-orange{ color: #F45100; }
    .text-dark{ color: var(--text-primary); }
    /* Grid Container */
    .services-grid{ display: flex; justify-content: center; align-items: center; gap: 10px; max-width: 1370px; margin: 0 auto; --service-card-width: 220px; --service-card-height: 90px; }
    .services-grid > :is(.service-card-link, div){ width: var(--service-card-width); height: var(--service-card-height); border-radius: 18px; overflow: hidden; cursor: pointer; transition: var(--transition-default); display: flex; align-items: center; justify-content: space-between; padding: 20px; text-decoration: none; }
    .services-grid > :is(.service-card-link, div):hover{ transform: translateY(-2px); box-shadow: var(--home-shadow-hover); }
    .services-grid > :is(.service-card-link, div) .service-card-content{ font-size: 18px; font-weight: var(--fw-semibold); line-height: var(--lh-tight); color: var(--text-light); flex-shrink: 0; }
    .services-grid > :is(.service-card-link, div) .service-card-content span{ font-weight: var(--fw-regular); font-size: var(--fs-body); line-height: var(--lh-tight); }
    .services-grid > :is(.service-card-link, div) .service-card-overlay{ width: 56px; height: 56px; background: rgba(255, 255, 255, 0.15); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 15px; backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
    .services-grid > :is(.service-card-link, div) .service-card-icon{ width: 26px; height: 26px; color: var(--text-light); display: flex; align-items: center; justify-content: center; }
    .services-grid .service-card-icon svg, .services-grid .service-card-icon i{ width: 100%; height: 100%; font-size: 26px; }
    /* Platform-specific Background Colors */
    .services-grid > .facebook-card{ background-color: #4267B2; }
    .services-grid > .instagram-card{ background-color: #E1306C; }
    .services-grid > .twitter-card, .services-grid > .x-card{ background-color: #1DA1F2; }
    .services-grid > .tiktok-card{ background-color: #000000; }
    .services-grid > .youtube-card{ background-color: #FF0000; }
    .services-grid > .linkedin-card{ background-color: #0077B5; }
    .services-grid > .pinterest-card{ background-color: #BD081C; }
    .services-grid > .snapchat-card{ background-color: #FFFC00; }
    .services-grid > .whatsapp-card{ background-color: #25D366; }
    .services-grid > .telegram-card{ background-color: #0088CC; }
    .services-grid > .discord-card{ background-color: #5865F2; }
    .services-grid > .twitch-card{ background-color: #9146FF; }
    .services-grid > .reddit-card{ background-color: #FF4500; }
    .services-grid > .spotify-card{ background-color: #1DB954; }
    .services-grid > .apple-card{ background-color: #000000; }
    .services-grid > .google-card{ background-color: #4285F4; }
    .services-grid > .threads-card{ background-color: #000000; }
    .services-grid > .kick-card{ background-color: #53FC18; }
    .services-grid > .soundcloud-card{ background-color: #FF5500; }
    /* Other Card Variant */
    .services-grid > .other-card{ background-color: var(--home-gray-card-bg); border: 1px solid var(--home-gray-card-border); }
    .services-grid > .other-card .service-card-content, .services-grid > .other-card .service-card-content span{ color: var(--text-primary); }
    .services-grid > .other-card .service-card-overlay.service-card-overlay-other{ background: rgba(51, 53, 62, 0.06); border: 1px solid rgba(51, 53, 62, 0.1); }
    .services-grid > .other-card .service-card-icon{ color: var(--home-text-muted); }
    /* ========================================
         1.5 SERVICES MENU (Header Dropdown)
         ======================================== */
    .services-menu-sections{ margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--spacing-md); }
    .services-menu-section-header{ display: flex; align-items: center; justify-content: space-between; cursor: pointer; transition: all var(--transition-default); border-radius: var(--radius-md); padding: var(--spacing-sm); margin: calc(var(--spacing-sm) * -1); }
    .services-menu-section-header:hover{ background-color: rgba(120, 68, 228, 0.03); transform: translateY(-1px); }
    .services-menu-section-header:hover{ background-color: #E8EAED; }
    .services-menu-section-icon{ display: flex; align-items: center; justify-content: center; width: 45px; height: 45px; background-color: #F5F7FD; border-radius: var(--radius-sm); flex-shrink: 0; }
    .services-menu-section-icon i{ font-size: 18px; color: var(--text-gray); }
    .services-menu-section.active i{ transform: rotate(90deg); color: var(--primary-purple); }
    .services-menu-section-content{ margin-top: 0; background-color: #F6F7FB; border-radius: var(--radius-2xl); padding: 0 var(--spacing-md); max-height: 0; overflow: hidden; opacity: 0; transform: translateY(-10px); transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
    .services-menu-section.active .services-menu-section-content{ max-height: 540px; opacity: 1; transform: translateY(0); padding: var(--spacing-md); margin-top: var(--spacing-md); }
    .services-menu-grid{ margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; }
    .services-menu-item{ position: relative; aspect-ratio: 1; cursor: pointer; transition: var(--transition-default); overflow: hidden; }
    .services-menu-item > div, .services-menu-item > a{ display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100%; border-radius: 20px; padding: var(--spacing-sm); gap: var(--spacing-sm); background-image: url('../images/menu-item-bg.png'); background-size: cover; background-position: center; background-repeat: no-repeat; }
    .services-menu-item i, .services-menu-item span{ font-size: 35px; color: var(--text-light); flex-shrink: 0; }
    .services-menu-item span{ font-weight: var(--fw-bold); }
    .services-menu-separator{ height: 1px; background-color: var(--bg-light-alt); width: 100%; }
    /* ========================================
         1.6 PLATFORM FILTERS
         ======================================== */
    .services-platform-filters{ display: flex; align-items: stretch; gap: 5px; margin-bottom: var(--spacing-md); background-color: var(--bg-light); border: 1px solid #FAFAFA; border-radius: var(--radius-lg); padding: 10px; }
    .platform-filter{ display: flex; align-items: center; justify-content: center; flex: 1; height: 42px; border-radius: var(--radius-md); cursor: pointer; transition: var(--transition-default); padding: 10px; position: relative; overflow: hidden; }
    .platform-filter span{ font-weight: var(--fw-semibold); line-height: var(--lh-tight); text-align: center; position: relative; z-index: 2; }
    .marketing-filter{ background-color: var(--primary-purple); }
    .platform-filter:not(.active){ background-color: var(--bg-light); }
    .platform-filter:not(.active) span{ color: var(--text-dark-muted); }
    .platform-filter::before{ content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent); transition: left 0.6s ease; z-index: 1; }
    .platform-filter:hover{ transform: translateY(-1px); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1); }
    /* Services Tools Grid */
    .services-tools-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
    .services-tool-item{ display: flex; align-items: center; gap: 11px; height: 50px; background-color: var(--bg-light); border-radius: 14px; padding: 10px; cursor: pointer; }
    .services-tool-item:hover{ transform: translateY(-2px); box-shadow: var(--shadow-card); }
    .services-tool-icon{ display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; background-color: #E1306C; border-radius: var(--radius-sm); flex-shrink: 0; transition: background-color var(--transition-default), transform 0.2s ease; position: relative; overflow: hidden; }
    .services-tool-icon:hover{ transform: scale(1.05); }
    .services-tool-icon img{ width: 16px; height: 16px; filter: brightness(0) invert(1); }
    .services-tool-icon::before{ content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent); transform: rotate(45deg) translateX(-100%); transition: transform 0.6s ease; opacity: 0; }
    .services-tool-item:hover .services-tool-icon::before{ transform: rotate(45deg) translateX(100%); opacity: 1; }
    .services-tool-text{ font-size: var(--fs-body); font-weight: var(--fw-semibold); line-height: var(--lh-tight); color: var(--text-dark-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .services-menu-section[data-section="ucretsiz-araclar"] .services-menu-section-content, .services-menu-section[data-section="dijital-pazarlama"] .services-menu-section-content{ display: flex; align-items: flex-start; justify-content: flex-start; }
    .services-menu-section[data-section="ucretsiz-araclar"].active .services-menu-section-content, .services-menu-section[data-section="dijital-pazarlama"].active .services-menu-section-content{ max-height: 400px; }
    /* ========================================
         1.7 SCROLLBAR STYLES
         ======================================== */
    ::-webkit-scrollbar{ width: 10px; height: 10px; }
    ::-webkit-scrollbar-track{ background: var(--bg-light-alt); }
    ::-webkit-scrollbar-thumb{ background: var(--primary-purple); border-radius: var(--radius-pill); }
    ::-webkit-scrollbar-thumb:hover{ background: #6835d3; }
    @supports (scrollbar-color: auto) {
        *{ scrollbar-width: thin; scrollbar-color: var(--primary-purple) var(--bg-light-alt); }
    }
    /* ================================================================
         PART 2: SECONDARY - COMMON COMPONENTS
         ================================================================ */
    /* ========================================
         2.1 PAGE-SPECIFIC OVERRIDES
         ======================================== */
    .membership-info-popup.active{ opacity: 1; visibility: visible; pointer-events: auto; }
    [data-dropdown-menu] li.selected > i, .show-more:hover, .payment-methods > li.active > div:last-child > div:first-child, .payment-methods > li.active > div:last-child > div:last-child{ color: var(--primary-purple); }
    .top-bar-section a:hover, .card-dark .card-title, .instagram-filter span, .twitter-filter span, .youtube-filter span, .tiktok-filter span, .marketing-filter span, .software-filter span, .services-tool-icon i, .packages-filter-tab-active span, .packages-filter-tab:hover:not(.packages-filter-tab-active) span{ color: var(--text-light); }
    .musteri-siparisler-service-status{ font-weight: 600; }
    .slide-text > div:last-child{ display: flex; flex-direction: column; gap: 21px; }
    /* Page-specific button active states */
    .submit-btn:active, .iletisim-submit-btn:active, .services-menu-section-header:active, .deneme-submit-btn:active, .odeme-submit-btn:active, .musteri-destek-list .musteri-siparisler-empty-state > div:last-child a:active, .musteri-siparisler-empty-btn:active, .musteri-destek-create-btn:active, .musteri-destek-ticket-btn:active, .musteri-siparis-btn:active, .btn-copy:active, .musteri-pagination-btn-favs:active, .favoriler-empty .empty-btn:active, .talep-submit:active, .musteri-ayarlar-submit-btn:active, .avatar-save-btn:active, .eposta-submit-btn:active, .destek-success-btn:active{ transform: translateY(0); }
    .packages-filter-tab:hover:not(.packages-filter-tab-active){ background: rgba(255, 255, 255, 0.05); }
    .kategori-tab-active{ background: #FFFFFF !important; color: #1E2130; }
    .copyright-wrapper, .odeme-summary-item, .odeme-summary-total, .odeme-ozeti-row, .musteri-siparisler-header{ display: flex; align-items: center; justify-content: space-between; }
    /* ========================================
         2.2 MOBILE PRICE BAR
         ======================================== */
    .mobile-price-bar{ display: none; position: fixed; bottom: 74px; left: 0; right: 0; width: 100%; height: 70px; background: #FFFFFF; z-index: 999; justify-content: space-between; align-items: center; padding: 10px 16px; box-shadow: 0px -2px 8px rgba(0, 0, 0, 0.08); transition: transform 0.3s ease; }
    .mobile-price-bar.hidden{ transform: translateY(calc(100% + 74px)); }
    .mobile-price-add-to-cart{ width: 146px; height: 50px; background: #FF5601; border: none; border-radius: 12px; display: flex; align-items: center; justify-content: center; gap: 10px; cursor: pointer; transition: var(--transition-default); flex-shrink: 0; }
    .mobile-price-add-to-cart:active{ background: #E64D01; transform: scale(0.95); }
    .mobile-price-add-to-cart svg, .country-dropdown-item svg, .deneme-features > div:not(:nth-child(even)) svg, .upsell-stat svg, .musteri-siparisler-search svg, .musteri-destek-search svg, .musteri-siparisler-service-header svg{ width: 20px; height: 20px; flex-shrink: 0; }
    .mobile-price-add-to-cart span{ font-size: 16px; font-weight: 600; line-height: 1.19em; color: #FFFFFF; }
    .mobile-price-info{ display: flex; align-items: center; gap: 12px; flex: 1; }
    .mobile-price-icon-wrapper{ width: 40px; height: 40px; background: #7844E4; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
    .mobile-price-details{ display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
    .mobile-price-package-name{ font-size: 14px; font-weight: 600; line-height: 1.286em; color: #666F94; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .mobile-price-amount{ font-size: 16px; font-weight: 600; line-height: 1.125em; color: #33353E; }
    /* ========================================
         2.3 CONTACT FORM & SERVICES PILLS
         ======================================== */
    .contact-form{ background: #FFFFFF; border-radius: 20px; padding: 32px; position: sticky; top: 164px; align-self: flex-start; }
    .form-header, .iletisim-form-header{ display: flex; flex-direction: column; gap: 8px; margin-bottom: 24px; }
    .form-header h3, .iletisim-form-header h3{ font-size: 20px; font-weight: 600; line-height: var(--lh-tight); color: #33353E; margin: 0; }
    .form-header p, .iletisim-form-header p{ line-height: var(--lh-normal); color: #7A7F99; margin: 0; }
    .services-title{ margin-top: 4px; }
    .services-title h4, .deneme-header h2{ font-size: 18px; font-weight: 600; line-height: var(--lh-tight); color: #33353E; margin: 0; }
    .services-pills{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
    .service-pill{ display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px; border: 1px solid rgba(234, 234, 237, 0.5); border-radius: 14px; background: #FFFFFF; font-size: 14px; font-weight: 600; line-height: var(--lh-tight); color: #666F94; cursor: pointer; transition: var(--transition-default); text-align: left; }
    .service-pill svg{ flex-shrink: 0; opacity: 0; visibility: hidden; transition: all 0.2s ease; }
    .service-pill:hover{ border-color: var(--primary-purple); color: var(--primary-purple); transform: translateY(-1px); }
    .service-pill.active{ background: rgba(120, 68, 228, 0.1); border-color: #7844E4; color: #7844E4; }
    .service-pill.active svg, .musteri-siparisler-modal-backdrop.active{ opacity: 1; visibility: visible; }
    /* ========================================
         2.4 SUBMIT BUTTON
         ======================================== */
    .submit-btn{ width: 100%; height: 50px; background: #7844E4; border-radius: 12px; border: none; display: flex; align-items: center; justify-content: center; font-weight: 600; line-height: var(--lh-tight); color: #FFFFFF; cursor: pointer; transition: var(--transition-default); position: relative; overflow: hidden; }
    .submit-btn::before, .hero-form-submit::before, .deneme-submit-btn::before{ content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent); transition: left 0.6s; z-index: 1; }
    .submit-btn span, .deneme-submit-btn svg, .deneme-submit-btn span{ position: relative; z-index: 2; }
    .submit-btn:hover{ background: #6835d3; transform: translateY(-2px); box-shadow: var(--shadow-button); }
    /* ========================================
         2.5 İLETİŞİM SECTION
         ======================================== */
    .iletisim-content{ display: grid; grid-template-columns: 2fr 1fr; gap: 30px; align-items: start; }
    .iletisim-form-card{ background-color: #ffffff; border-radius: 20px; padding: 30px; }
    .iletisim-form-row{ display: flex; gap: 16px; }
    .iletisim-textarea-wrapper{ align-items: flex-start !important; min-height: 110px; padding: 15px !important; }
    .iletisim-textarea{ min-height: 80px; resize: vertical; }
    .iletisim-form-footer{ display: flex; justify-content: space-between; align-items: center; gap: 16px; }
    .iletisim-social-icons{ display: flex; gap: 4px; }
    .iletisim-social-link{ width: 50px; height: 50px; background: #F9FAFB; border: 1px solid rgba(234, 234, 237, 0.5); border-radius: 12px; display: flex; align-items: center; justify-content: center; }
    .iletisim-social-link:hover{ background: #FFFFFF; border-color: var(--primary-purple); transform: translateY(-2px); }
    .iletisim-submit-btn{ width: 218px; height: 50px; background: #17B976; border-radius: 12px; border: none; display: flex; align-items: center; justify-content: space-between; padding: 0 14px; font-weight: 600; line-height: var(--lh-tight); color: #FFFFFF; cursor: pointer; transition: var(--transition-default); flex-shrink: 0; }
    .iletisim-submit-btn:hover{ background: #14a066; transform: translateY(-2px); box-shadow: 0px 4px 12px rgba(23, 185, 118, 0.2); }
    /* ========================================
         2.6 CONTENT WRAPPERS
         ======================================== */
    .content-wrapper{ display: flex; flex-direction: column; gap: 30px; }
    .content-first, .kuponlar, .musteri-ayarlar-left-column, .musteri-ayarlar-right-column{ display: flex; flex-direction: column; gap: 20px; }
    .content-second{ display: flex; align-items: center; gap: 30px; margin-top: 30px; }
    .side-image-wrapper{ flex-shrink: 0; width: 272.41px; height: 372px; }
    .side-image-wrapper img, .uygulama .store-buttons > a img, .musteri-banner .banner-image img{ width: 100%; height: 100%; object-fit: contain; }
    .content-block{ display: flex; flex-direction: column; gap: 21px; flex: 1; }
    /* ========================================
         2.7 TEXT COLORS (Global)
         ======================================== */
    .text-primary-orange, .feature-card[data-color="#F45100"] .feature-link, .solution-card[data-color="#F45100"] > div:last-child span{ color: #F45100; }
    .text-dark, .ucretsiz-deneme-package:not(.ucretsiz-deneme-package-active) .ucretsiz-deneme-package-quantity, .ucretsiz-deneme-package:not(.ucretsiz-deneme-package-active) .ucretsiz-deneme-package-type, .ucretsiz-deneme-step-title-completed{ color: #33353E; }
    .mesaj-bubble-user p, .mesaj-attach-btn:hover{ color: var(--text-primary); }
    /* ========================================
         2.8 FEATURE CARD COMPONENTS
         ======================================== */
    .feature-card, .solution-card{ display: flex; align-items: center; gap: 20px; background-color: #FFFFFF; border-radius: 18px; padding: 20px; transition: var(--transition-default); color: inherit; }
    .feature-card:hover{ transform: translateY(-4px); box-shadow: 0px 8px 32px rgba(0, 0, 0, 0.08); }
    a.feature-card{ display: flex; cursor: pointer; }
    a.feature-card:hover{ box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.1); }
    .feature-icon-wrapper, .why-choose-us .icon-wrapper{ flex-shrink: 0; width: 60px; height: 86px; border-radius: 12px; display: flex; align-items: center; justify-content: center; position: relative; }
    .feature-icon-wrapper.icon-tall{ width: 68px; height: 130px; }
    .feature-card-content, .solution-card > div:last-child, .why-choose-us .card-content{ display: flex; flex-direction: column; gap: 8px; flex: 1; }
    .feature-card-title, .solution-card > div:last-child h3, .why-choose-us .card-content h3{ font-weight: 600; font-size: 20px; line-height: var(--lh-tight); color: #33353E; margin: 0; }
    .feature-card-description, .solution-card > div:last-child p, .why-choose-us .card-content p{ font-weight: 600; font-size: 14px; line-height: var(--lh-tight); color: #666F94; margin: 0; }
    .feature-link, .solution-card > div:last-child span{ display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: 14px; line-height: var(--lh-tight); transition: var(--transition-default); width: fit-content; pointer-events: none; }
    /* Dynamic color support */
    .feature-card[data-color="#F02468"] .feature-link, .solution-card[data-color="#F02468"] > div:last-child span{ color: #F02468; }
    .feature-card[data-color="#24B3F0"] .feature-link, .solution-card[data-color="#24B3F0"] > div:last-child span{ color: #24B3F0; }
    .feature-card[data-color="#77D800"] .feature-link, .solution-card[data-color="#77D800"] > div:last-child span{ color: #77D800; }
    .feature-card[data-color="#F4009B"] .feature-link, .solution-card[data-color="#F4009B"] > div:last-child span{ color: #F4009B; }
    .feature-card[data-color="#FFAE00"] .feature-link, .solution-card[data-color="#FFAE00"] > div:last-child span{ color: #FFAE00; }
    .feature-card[data-color="#0051E7"] .feature-link, .solution-card[data-color="#0051E7"] > div:last-child span{ color: #0051E7; }
    .feature-card:hover .feature-link, .solution-card:hover > div:last-child span{ gap: 14px; }
    .feature-link svg, .solution-card > div:last-child span svg{ transition: var(--transition-default); }
    .hero-slide-purple:not(.active) .hero-slide-content > span:first-of-type > span, .feature-card[data-color="#7844E4"] .feature-link, .solution-card[data-color="#7844E4"] > div:last-child span, .musteri-siparisler-service-status.status-primary{ color: #7844E4; }
    /* ========================================
         2.9 SOLUTIONS SECTION
         ======================================== */
    .solutions{ background-color: #F8F9FA; }
    .solutions .section-header h2{ font-weight: 600; font-size: 36px; line-height: var(--lh-tight); color: #33353E; margin: 0 0 12px 0; }
    .solutions .section-header p{ font-weight: 600; font-size: 16px; line-height: var(--lh-normal); color: #666F94; margin: 0; }
    .solutions-grid{ display: grid; grid-template-columns: 1fr; gap: 16px; }
    .solution-card:hover{ transform: translateY(-4px); box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.1); }
    .solution-card > div:first-child{ flex-shrink: 0; width: 68px; height: 130px; border-radius: 12px; display: flex; align-items: center; justify-content: center; position: relative; }
    /* ========================================
         2.10 KATEGORİ HEADER SECTION
         ======================================== */
    .kategori-header{ background: transparent; padding: 20px 0; padding-bottom: 0; }
    .kategori-header .header-content{ background-color: #1E2130; background-image: url('../images/tum-hizmetler/hizmet-ara-bg.png'); background-size: auto 100%; background-repeat: no-repeat; background-position: left center; border-radius: 24px; border-right: 7px solid #7844E4; border-bottom: 7px solid #7844E4; padding: 60px 0; display: flex; flex-direction: column; align-items: center; gap: 16px; }
    .kategori-header h1{ font-weight: 600; font-size: 30px; line-height: 100%; letter-spacing: 0%; color: #FFFFFF; margin-bottom: 0; }
    .kategori-header p{ line-height: 100%; letter-spacing: 0%; color: #FFFFFF; margin-bottom: 0; }
    .kategori-tabs-wrapper{ display: flex; justify-content: center; width: 100%; }
    .kategori-tabs-container{ max-width: 100%; height: 62px; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 16px; padding: 10px; display: flex; align-items: center; gap: 8px; }
    .kategori-tab{ display: flex; align-items: center; justify-content: center; padding: 12px 20px; background: transparent; border: none; border-radius: 14px; font-size: 14px; font-weight: 600; line-height: 1.2857142857142858em; color: #FFFFFF; cursor: pointer; transition: var(--transition-default); white-space: nowrap; flex-shrink: 0; }
    .kategori-tab:hover{ background: rgba(255, 255, 255, 0.05); color: #FFFFFF; }
    .kategori-tab-active{ color: #1E2130; }
    /* ========================================
         2.11 PAKETLER SECTION
         ======================================== */
    .menu-items, .text-block, .sinirsiz-servis .full-content > div, .musteriler-left-header{ display: flex; flex-direction: column; gap: 10px; }
    .payment-methods > li > div:last-child{ display: flex; flex-direction: column; gap: 0; }
    .step-wrapper.step-active .step-nr span, .musteri-sidebar-nav ul > li > a[aria-current="page"] svg, .mesaj-bubble-support p{ color: #FFFFFF; }
    .deneme-features{ display: flex; align-items: center; gap: 17px; flex-wrap: wrap; }
    @keyframes fadeInScale {
    to{ opacity: 1; transform: scale(1); } }
    .package-header, .why-choose-us .cards, .adim-bottom-bar > div:first-child, .adim-bottom-bar > div:last-child, .app-about-feature-header, .musteri-user-section{ display: flex; align-items: center; gap: 16px; }
    .adim-bottom-bar .icon-wrapper{ width: 54px; height: 54px; background: #7844E4; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: var(--transition-default); }
    .paket-users-icon{ width: 24px; height: 24px; color: white; }
    .cart-icon{ width: 20px; height: 20px; color: white; }
    .adim-bottom-bar .quantity-control{ background: #FFFFFF; border: 1px solid rgba(228, 231, 235, 0.5); border-radius: 12px; padding: 10px; display: flex; align-items: center; gap: 24px; }
    .musteriler-arrow-btn:active, .referans-copy-btn:active{ transform: scale(0.95); }
    .odeme-copy-btn svg, .price-icon svg{ width: 16px; height: 16px; }
    .upsell-input::-webkit-inner-spin-button, .upsell-input::-webkit-outer-spin-button, .bakiye-input-wrapper input::-webkit-inner-spin-button, .bakiye-input-wrapper input::-webkit-outer-spin-button{ -webkit-appearance: none; margin: 0; }
    /* App Badge */
    .app-badge img, .services-tools-container, .musteri-siparisler-list-section, .password-section .musteri-ayarlar-submit-btn, .mega-menu.search-active .menu-pane{ width: 100%; }
    /* Service Card SVG Icons */
    .service-card-icon .svg-icon{ width: 48px; height: 48px; color: #fff; }
    #content.pagetext .scrollt{ max-height: 500px; overflow-y: auto; padding-right: 15px; }
    .ns_ajax_form{ width: 100%; }
    /* Notifications wrapper and filter dropdown positioning */
    .notifications-wrapper, .filter-dropdown, .services-menu-section, .deneme-submit-btn.loading, .step-wrapper.step-active, .user-profile-wrapper, .musteri-siparisler-filter-wrapper, .musteri-destek-list .filter-wrapper, .musteri-destek-filter-wrapper, .stat-card-with-action .stat-content{ position: relative; }
    /* ========================================
         2.12 PACKAGES SHOWCASE SECTION (Homepage)
         Source: homepage.css (consolidated in Phase 3)
         ======================================== */
    /* Main Section */
    #section_packages_showcase{ background: var(--package-dark-bg); padding: 60px 0 0 0; position: relative; overflow: hidden; }
    .section-header-showcase{ text-align: center; margin-bottom: 30px; }
    .section-header-showcase .title{ color: var(--text-light); margin-bottom: 5px; }
    .section-header-showcase .description{ color: var(--text-light); }
    /* Top Section with Filters and Icons */
    .packages-top-section{ display: flex; align-items: center; gap: 12px; margin-bottom: 30px; justify-content: center; }
    /* Filter Tabs */
    .packages-filter-tabs{ display: flex; align-items: center; gap: 5px; background: var(--package-bg); border: 1px solid var(--package-border); border-radius: var(--radius-md); padding: var(--padding-sm); }
    .packages-filter-tab{ padding: var(--gap-sm) var(--padding-xxl); border-radius: var(--radius-md); cursor: pointer; transition: background 0.3s ease, color 0.3s ease; }
    .packages-filter-tab span{ font-weight: var(--fw-medium); font-size: 17px; line-height: var(--lh-tight); color: #BCBFCD; transition: inherit; }
    .packages-filter-tab-active{ background: var(--dynamic-platform-color); transition: background-color 0.3s ease; }
    .packages-filter-tab-active span{ color: var(--text-light); }
    .packages-filter-tab:is(:hover, :focus-visible):not(.packages-filter-tab-active){ background: rgba(255, 255, 255, 0.05); }
    .packages-filter-tab:is(:hover, :focus-visible):not(.packages-filter-tab-active) span{ color: var(--text-light); }
    /* Social Media Icons */
    .packages-social-icons{ display: flex; align-items: center; gap: 0; background: var(--package-bg); border: 1px solid var(--package-border); border-radius: var(--radius-md); padding: var(--padding-md); }
    .packages-social-icon{ width: 40px; height: 40px; border-radius: var(--radius-sm); backdrop-filter: blur(2.857px); cursor: pointer; transition: background 0.3s ease; display: flex; align-items: center; justify-content: center; }
    .packages-social-icon:not(.active){ background: transparent; }
    .packages-social-icon.active{ background: var(--dynamic-platform-color); }
    .packages-social-icon :is(i, svg){ width: 20px; height: 20px; font-size: 20px; color: var(--text-light); fill: var(--text-light); }
    /* Main Packages Grid */
    .packages-grid{ display: flex; align-items: flex-start; gap: var(--gap-sm); margin-bottom: 60px; justify-content: center; max-height: 445px; }
    /* Package Columns */
    .packages-column{ display: flex; flex-direction: column; gap: var(--gap-sm); width: 400px; min-height: 104px; }
    /* Regular Package Cards */
    .package-card{ background: var(--package-bg); border-radius: var(--radius-lg); height: 104px; display: flex; align-items: center; justify-content: space-between; padding: 27px var(--padding-lg); transition: transform 0.3s ease, box-shadow 0.3s ease; overflow: hidden; }
    .package-card:hover{ transform: translateY(-2px); box-shadow: var(--shadow-md); }
    .package-header{ display: flex; align-items: center; gap: var(--gap-lg); }
    .package-icon{ width: 50px; height: 50px; background: var(--dynamic-platform-color); border-radius: var(--radius-sm); transition: background-color 0.3s ease; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
    .package-icon i{ font-size: 24px; color: var(--text-light); }
    .package-icon svg{ width: 24px; height: 24px; fill: var(--text-light); }
    .package-info{ display: flex; flex-direction: column; gap: var(--gap-xs); }
    .package-title{ font-weight: var(--fw-semibold); font-size: 16px; line-height: var(--lh-tight); color: var(--text-light); margin: 0; }
    .package-platform{ font-weight: var(--fw-bold); font-size: 14px; line-height: var(--lh-tight); color: var(--dynamic-platform-color); text-transform: uppercase; }
    /* Featured Package Card */
    .package-featured-card{ width: 335px; height: 446px; background: var(--package-bg); border: 1.6px solid var(--dynamic-platform-color); border-radius: var(--radius-lg); padding: var(--padding-lg); position: relative; display: flex; flex-direction: column; transition: border-color 0.3s ease; }
    .package-featured-header{ display: flex; align-items: center; gap: var(--gap-lg); margin-bottom: var(--padding-lg); }
    .package-featured-tag{ position: absolute; top: -10px; right: 20px; background: var(--dynamic-platform-color); border-radius: 27px; padding: 6px 14px; height: 24px; display: flex; align-items: center; justify-content: center; font-weight: var(--fw-medium); font-size: 12px; line-height: 1; color: var(--text-light); min-width: fit-content; transition: background-color 0.3s ease; white-space: nowrap; }
    .package-features{ display: flex; flex-direction: column; gap: var(--gap-sm); flex: 1; margin-bottom: var(--padding-lg); }
    .package-feature{ height: 46px; background: rgba(255, 255, 255, 0.05); border-radius: var(--radius-sm); display: flex; align-items: center; gap: 9px; padding: var(--radius-xs); }
    .package-feature-icon{ width: 30px; height: 30px; background: var(--dynamic-platform-color); border-radius: var(--radius-xs); transition: background-color 0.3s ease; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
    .package-feature-icon i{ font-size: 14px; color: var(--text-light); }
    .package-feature span{ font-weight: var(--fw-semibold); font-size: 14px; line-height: var(--lh-tight); color: var(--text-light); text-transform: capitalize; }
    .package-actions{ display: flex; align-items: center; gap: 6px; margin-top: auto; width: 100%; }
    /* Featured Package Buttons */
    .package-buy-btn{ background: var(--dynamic-platform-color); border: none; border-radius: var(--radius-md); width: 238px; height: 46px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: filter 0.3s ease; position: relative; overflow: hidden; }
    .package-buy-btn:hover{ filter: brightness(1.1); }
    .package-buy-btn:hover .package-price::before{ left: 116px; width: 108px; }
    .package-buy-content{ display: inline-flex; align-items: center; gap: 5px; padding-left: 120px; font-weight: var(--fw-semibold); color: var(--text-light); }
    .package-price{ font-weight: var(--fw-medium); color: var(--text-light); position: absolute; left: 6px; top: 6px; width: 100px; height: 34px; display: flex; align-items: center; justify-content: center; z-index: 2; }
    .package-price::before{ content: ''; position: absolute; inset: 0; background: rgba(255, 255, 255, 0.1); border-radius: var(--radius-sm); transition: left 0.3s ease, width 0.3s ease; z-index: -1; }
    .package-favorite-btn{ width: 46px; height: 46px; background: var(--dynamic-platform-color); border: none; border-radius: var(--radius-md); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: filter 0.3s ease, transform 0.3s ease; }
    .package-favorite-btn:hover{ filter: brightness(0.9); transform: translateY(-2px); }
    .package-favorite-btn svg{ width: 24px; height: 24px; }
    .package-favorite-btn i{ font-size: 20px; color: var(--text-light); transition: transform 0.2s ease; }
    .package-favorite-btn:hover i{ transform: scale(1.1); }
    .package-favorite-btn.active i{ font-weight: 900; color: var(--text-light); }
    /* Inline Actions (Normal Package Cards) */
    .package-actions-inline{ display: flex; align-items: center; gap: 8px; margin-left: auto; flex-shrink: 0; }
    .package-buy-icon-btn{ width: 46px; height: 46px; background: var(--dynamic-platform-color); border: none; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: filter 0.3s ease, transform 0.2s ease; text-decoration: none; }
    .package-buy-icon-btn:hover{ filter: brightness(1.1); transform: translateY(-2px); }
    .package-buy-icon-btn i{ font-size: 18px; color: var(--text-light); }
    /* Bottom Indicator */
    .bottom-indicator-section{ background: var(--dynamic-platform-color); padding: 16px 0; position: relative; width: 100vw; left: 50%; margin: 40px -50vw 0; transition: background-color var(--transition-default); }
    .bottom-indicator-section::before{ content: ''; position: absolute; top: -20px; left: 0; right: 0; height: 20px; background: var(--dynamic-platform-color); filter: brightness(0.65); }
    .bottom-indicator-content{ display: flex; align-items: center; gap: var(--gap-sm); justify-content: center; }
    .bottom-indicator-icon{ width: 50px; height: 35px; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; }
    .bottom-indicator-text{ display: flex; flex-direction: column; color: var(--text-light); }
    .bottom-indicator-text-top{ font-weight: 600; font-size: 12px; }
    .bottom-indicator-text-bottom{ font-weight: var(--fw-semibold); }
    #section_packages_showcase .fa-bag-shopping:before, .fa-shopping-bag:before{ color: var(--text-light); }
    /* ========================================
         2.15 SUBSCRIPTION PAGE STYLES
         Source: subscription.css (Phase 4)
         ======================================== */
    /* ========================================
         SUBSCRIPTION CATEGORY PAGE STYLES
         Modern Tab-Based Design
         ======================================== */
    /* ========================================
         HERO SECTION
         ======================================== */
    .sub-hero{ background: var(--sub-bg); padding: 80px 0 60px; text-align: center; position: relative; overflow: hidden; }
    .sub-hero-content{ max-width: 800px; margin: 0 auto; }
    .sub-hero-content h1{ font-size: 2.5rem; font-weight: 600; color: var(--sub-text-dark); line-height: 1.3; margin-bottom: 20px; }
    .sub-hero-content p{ font-size: 1rem; color: var(--sub-text-gray); margin-bottom: 30px; }
    .sub-hero-buttons{ display: flex; gap: 15px; justify-content: center; flex-wrap: wrap; }
    .sub-hero-buttons .btn-outline{ background: transparent; border: 2px solid #E0E3EB; color: var(--sub-text-dark); padding: 14px 28px; border-radius: 12px; font-weight: 600; transition: all 0.3s ease; }
    .sub-hero-buttons .btn-outline:hover{ border-color: var(--sub-purple); color: var(--sub-purple); }
    .sub-hero-buttons .btn-primary{ background: var(--sub-purple); border: none; color: #fff; padding: 14px 28px; border-radius: 12px; font-weight: 600; transition: all 0.3s ease; }
    .sub-hero-buttons .btn-primary:hover{ background: #5B2FD1; }
    .sub-hero-avatars-container{ margin-top: 40px; overflow: hidden; }
    .sub-hero-avatars{ display: flex; gap: 20px; animation: scrollAvatars 30s linear infinite; }
    @keyframes scrollAvatars {
    0%{ transform: translateX(0); }
    100%{ transform: translateX(-50%); } }
    /* ========================================
         TAB NAVIGATION
         ======================================== */
    .sub-tabs-section{ background: var(--sub-bg); padding: 20px 0 40px; position: sticky; top: 70px; z-index: 100; }
    .sub-tabs-nav{ display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; background: #fff; padding: 10px; border-radius: 16px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05); }
    .sub-tab-btn{ display: flex; align-items: center; gap: 8px; padding: 12px 20px; border: none; background: transparent; color: var(--sub-text-gray); font-size: 14px; font-weight: 600; border-radius: 10px; cursor: pointer; transition: all 0.3s ease; }
    .sub-tab-btn i{ font-size: 16px; }
    .sub-tab-btn:hover{ background: rgba(120, 68, 228, 0.08); color: var(--sub-purple); }
    .sub-tab-btn.active{ background: var(--sub-purple); color: #fff; }
    /* ========================================
         TAB CONTENT
         ======================================== */
    .sub-tab-content{ display: none; background: var(--sub-bg); padding: 60px 0; }
    .sub-tab-content.active{ display: block; }
    /* Section Header */
    .sub-section-header{ text-align: center; margin-bottom: 40px; }
    .sub-section-header h2{ font-size: 2rem; font-weight: 600; color: var(--sub-text-dark); margin-bottom: 15px; }
    .sub-section-header p{ font-size: 1rem; color: var(--sub-text-gray); }
    .text-primary-purple{ color: var(--sub-purple); }
    .text-nice-blue{ color: var(--sub-nice-blue); }
    /* ========================================
         FILTERS
         ======================================== */
    .sub-filters{ display: flex; align-items: center; justify-content: center; gap: 30px; flex-wrap: wrap; margin-bottom: 50px; }
    .sub-platform-filters{ display: flex; gap: 10px; background: #fff; padding: 8px; border-radius: 50px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); }
    .sub-platform-filter{ display: flex; align-items: center; gap: 8px; padding: 12px 20px; border: none; background: transparent; color: var(--sub-text-gray); font-size: 14px; font-weight: 500; border-radius: 50px; cursor: pointer; transition: all 0.3s ease; }
    .sub-platform-filter i{ font-size: 16px; }
    .sub-platform-filter:hover{ color: var(--sub-purple); }
    .sub-platform-filter.active{ background: var(--sub-purple); color: #fff; }
    .sub-duration-filters{ display: flex; background: #fff; padding: 6px; border-radius: 50px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); }
    .sub-duration-filter{ padding: 10px 24px; border: none; background: transparent; color: var(--sub-text-gray); font-size: 14px; font-weight: 600; border-radius: 50px; cursor: pointer; transition: all 0.3s ease; }
    .sub-duration-filter.active{ background: var(--sub-text-dark); color: #fff; }
    /* ========================================
         PACKAGES GRID
         ======================================== */
    .sub-packages-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
    .sub-package-card{ background: #fff; border-radius: 20px; padding: 30px; box-shadow: 0 5px 30px rgba(0, 0, 0, 0.05); transition: all 0.3s ease; }
    .sub-package-card:hover{ transform: translateY(-5px); box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1); }
    .sub-package-header{ display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
    .sub-package-icon{ width: 45px; height: 45px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 20px; }
    .sub-package-icon-purple{ background: linear-gradient(135deg, #9462FB 0%, #7624BF 100%); color: #FFFFFF; }
    .sub-package-icon-blue{ background: linear-gradient(135deg, #296FF9 0%, #59CEFC 100%); color: #FFFFFF; }
    .sub-package-icon-orange{ background: linear-gradient(135deg, #FF5601 0%, #FF8800 100%); color: #FFFFFF; }
    .sub-package-title{ display: flex; flex-direction: column; }
    .sub-package-type{ font-size: 16px; font-weight: 600; color: var(--sub-text-dark); }
    .sub-package-name{ font-size: 14px; color: var(--sub-text-gray); }
    .sub-package-price{ display: flex; align-items: center; gap: 12px; margin-bottom: 5px; }
    .sub-price-current{ font-size: 2.2rem; font-weight: 600; }
    .sub-price-purple{ background: linear-gradient(135deg, #9462FB 0%, #7624BF 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
    .sub-price-blue{ background: linear-gradient(135deg, #296FF9 0%, #59CEFC 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
    .sub-price-orange{ background: linear-gradient(135deg, #FF5601 0%, #FF8800 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
    .sub-package-badge{ background: var(--sub-orange); color: #fff; font-size: 10px; font-weight: 600; padding: 5px 10px; border-radius: 20px; text-transform: uppercase; }
    .sub-price-old{ font-size: 14px; color: var(--sub-text-gray); text-decoration: line-through; margin-bottom: 15px; }
    .sub-package-desc{ font-size: 14px; color: var(--sub-text-gray); line-height: 1.6; margin-bottom: 20px; }
    .sub-package-btn{ display: block; width: 100%; padding: 15px; border: none; border-radius: 12px; font-size: 16px; font-weight: 600; color: #fff; text-align: center; text-decoration: none; cursor: pointer; transition: all 0.3s ease; margin-bottom: 25px; }
    .sub-package-btn-purple{ background: linear-gradient(135deg, #9462FB 0%, #7624BF 100%); }
    .sub-package-btn-purple:hover{ background: linear-gradient(135deg, #8352EB 0%, #6614AF 100%); color: #fff; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(120, 68, 228, 0.3); }
    .sub-package-btn-blue{ background: linear-gradient(135deg, #296FF9 0%, #59CEFC 100%); }
    .sub-package-btn-blue:hover{ background: linear-gradient(135deg, #1A5FE9 0%, #49BEEC 100%); color: #fff; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(51, 130, 250, 0.3); }
    .sub-package-btn-orange{ background: linear-gradient(135deg, #FF5601 0%, #FF8800 100%); }
    .sub-package-btn-orange:hover{ background: linear-gradient(135deg, #E54600 0%, #EF7800 100%); color: #fff; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(255, 86, 1, 0.3); }
    .sub-package-features h4{ font-size: 14px; font-weight: 600; color: var(--sub-text-dark); margin-bottom: 15px; text-align: center; }
    .sub-package-features ul{ list-style: none; padding: 0; margin: 0; }
    .sub-package-features li{ display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid #F0F2F5; font-size: 13px; color: var(--sub-text-dark); }
    .sub-package-features li:last-child{ border-bottom: none; }
    .sub-package-features li i:first-child{ font-size: 14px; }
    .sub-package-features li span{ flex: 1; }
    .sub-package-features li span u{ text-decoration: underline; }
    .sub-package-features li i:last-child{ color: #C0C5D0; font-size: 14px; cursor: pointer; }
    .sub-check-purple{ color: #8A52F4; }
    .sub-check-blue{ color: #3D8BFA; }
    .sub-check-orange{ color: #FF6B1A; }
    .sub-features-more{ display: block; text-align: center; margin-top: 15px; font-size: 13px; font-weight: 600; text-decoration: none; }
    .sub-features-more-purple{ background: linear-gradient(135deg, #9462FB 0%, #7624BF 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
    .sub-features-more-purple:hover{ opacity: 0.8; }
    .sub-features-more-blue{ background: linear-gradient(135deg, #296FF9 0%, #59CEFC 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
    .sub-features-more-blue:hover{ opacity: 0.8; }
    .sub-features-more-orange{ background: linear-gradient(135deg, #FF5601 0%, #FF8800 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
    .sub-features-more-orange:hover{ opacity: 0.8; }
    /* ========================================
         COMPARISON TABLE
         ======================================== */
    .sub-table-wrapper{ background: #fff; border-radius: 20px; overflow: hidden; box-shadow: 0 5px 30px rgba(0, 0, 0, 0.05); }
    .sub-table-header{ display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 0; background: #FAFBFC; border-bottom: 1px solid #F0F2F5; }
    .sub-table-features{ padding: 30px; }
    .sub-table-features h3{ font-size: 16px; font-weight: 600; color: var(--sub-text-dark); }
    .sub-table-package{ padding: 25px 20px; display: flex; flex-direction: column; align-items: center; gap: 15px; border-left: 1px solid #F0F2F5; }
    .sub-table-package > div{ display: flex; align-items: center; gap: 10px; }
    .sub-table-package span{ font-size: 14px; font-weight: 600; color: var(--sub-text-dark); }
    .sub-icon-purple{ color: var(--sub-purple); font-size: 22px; }
    .sub-icon-blue{ color: var(--sub-blue); font-size: 22px; }
    .sub-icon-orange{ color: var(--sub-orange); font-size: 22px; }
    .sub-btn-cart{ display: flex; align-items: center; gap: 10px; padding: 10px 18px; border: none; border-radius: 30px; font-size: 13px; font-weight: 600; color: #fff; cursor: pointer; transition: all 0.3s ease; }
    .sub-btn-cart i{ font-size: 12px; }
    .sub-btn-cart-purple{ background: var(--sub-purple); }
    .sub-btn-cart-purple:hover{ background: #5B2FD1; }
    .sub-btn-cart-blue{ background: var(--sub-blue); }
    .sub-btn-cart-blue:hover{ background: #2563EB; }
    .sub-btn-cart-orange{ background: var(--sub-orange); }
    .sub-btn-cart-orange:hover{ background: #E64D01; }
    .sub-table-body{ }
    .sub-table-row{ display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 0; border-bottom: 1px solid #F0F2F5; }
    .sub-table-row:last-child{ border-bottom: none; }
    .sub-table-cell-feature{ padding: 25px 30px; }
    .sub-table-cell-feature h4{ font-size: 14px; font-weight: 600; color: var(--sub-text-dark); margin-bottom: 8px; }
    .sub-table-cell-feature p{ font-size: 13px; color: var(--sub-text-gray); line-height: 1.5; }
    .sub-table-cell-check{ display: flex; align-items: center; justify-content: center; border-left: 1px solid #F0F2F5; font-size: 32px; }
    .sub-check-inactive{ color: #EAEAED; }
    /* ========================================
         NEDEN BIZ (PARAGRAPH SECTION)
         ======================================== */
    .sub-paragraph-item{ display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; margin-bottom: 80px; }
    .sub-paragraph-item:last-child{ margin-bottom: 0; }
    .sub-paragraph-reverse{ direction: rtl; }
    .sub-paragraph-reverse > *{ direction: ltr; }
    .sub-badge-group{ margin-bottom: 20px; }
    .sub-badge{ display: inline-flex; align-items: center; gap: 8px; background: #F0F2F5; padding: 10px 18px; border-radius: 50px; font-size: 13px; font-weight: 600; color: var(--sub-text-dark); }
    .sub-badge i{ font-size: 14px; }
    .sub-paragraph-text h2{ font-size: 2rem; font-weight: 600; color: var(--sub-text-dark); margin-bottom: 20px; }
    .sub-paragraph-text p{ font-size: 15px; color: var(--sub-text-gray); line-height: 1.7; margin-bottom: 15px; }
    .sub-paragraph-image img{ width: 100%; border-radius: 20px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1); }

    /* ========================================
         UYGULAMA (APP ABOUT)
         ======================================== */
    .sub-app-header{ text-align: center; margin-bottom: 50px; }
    .sub-app-header h2{ font-size: 2rem; font-weight: 600; color: var(--sub-text-dark); margin-bottom: 10px; }
    .sub-app-header p{ font-size: 1rem; color: var(--sub-text-gray); }
    .sub-app-content{ display: grid; grid-template-columns: 1fr auto 1fr; gap: 40px; align-items: center; }
    .sub-app-cards-column{ display: flex; flex-direction: column; gap: 20px; }
    .sub-app-feature-card{ background: #fff; border-radius: 16px; padding: 25px; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05); transition: all 0.3s ease; }
    .sub-app-feature-card:hover{ transform: translateY(-3px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); }
    .sub-app-feature-header{ display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
    .sub-app-feature-icon{ width: 40px; height: 40px; background: rgba(15, 127, 211, 0.1); border-radius: 10px; display: flex; align-items: center; justify-content: center; color: var(--sub-nice-blue); font-size: 18px; }
    .sub-app-feature-header h3{ font-size: 15px; font-weight: 600; color: var(--sub-text-dark); }
    .sub-app-feature-card p{ font-size: 13px; color: var(--sub-text-gray); line-height: 1.5; }
    .sub-app-phone-wrapper{ width: 300px; }
    .sub-app-phone-wrapper img{ width: 100%; }
   
    /* ========================================
         SUBSCRIPTION RESPONSIVE
         ======================================== */
    @media (max-width: 1200px) {
    .sub-packages-grid{ grid-template-columns: repeat(2, 1fr); }
    .sub-table-header, .sub-table-row{ grid-template-columns: 1.5fr 1fr 1fr 1fr; } }
    @media (max-width: 992px) {
    .sub-hero-content h1{ font-size: 2rem; }
    .sub-tabs-nav{ padding: 8px; gap: 5px; }
    .sub-tab-btn{ padding: 10px 15px; font-size: 13px; }
    .sub-tab-btn span{ display: none; }
    .sub-tab-btn i{ font-size: 18px; }
    .sub-packages-grid{ grid-template-columns: 1fr; max-width: 500px; margin: 0 auto; }
    .sub-table-wrapper{ overflow-x: auto; }
    .sub-table-header, .sub-table-row{ min-width: 800px; }
    .sub-paragraph-item, .sub-comment-content{ grid-template-columns: 1fr; gap: 30px; }
    .sub-paragraph-reverse{ direction: ltr; }
    .sub-paragraph-image{ order: -1; }
    .sub-app-content{ grid-template-columns: 1fr; gap: 30px; }
    .sub-app-phone-wrapper{ order: -1; width: 250px; margin: 0 auto; }
    .sub-app-cards-column{ flex-direction: row; flex-wrap: wrap; }
    .sub-app-feature-card{ flex: 1; min-width: 250px; }
    }
    @media (max-width: 768px) {
    .sub-hero{ padding: 60px 0 40px; }
    .sub-hero-content h1{ font-size: 1.6rem; }
    .sub-hero-buttons{ flex-direction: column; }
    .sub-platform-filters{ flex-wrap: wrap; justify-content: center; border-radius: 16px; }
    .sub-platform-filter{ padding: 10px 15px; }
    .sub-section-header h2, .sub-paragraph-text h2, .sub-app-header h2{ font-size: 1.5rem; }
    .sub-comments-grid li{ width: 60px; height: 60px; }
    .sub-comment-banner > img{ width: 100%; height: 300px; }
    .sub-comment-badge{ right: 10px; } }
    @media (max-width: 576px) {
    .sub-tabs-section{ top: 60px; }
    .sub-tabs-nav{ justify-content: space-between; }
    .sub-tab-btn{ padding: 10px 12px; }
    .sub-filters{ flex-direction: column; }
    .sub-platform-filters, .sub-duration-filters{ width: 100%; justify-content: center; } }
    /* ========================================
         2.16 CART (SEPET) PAGE STYLES
         Source: cart.css (Phase 4)
         ======================================== */
    /* ========================================
         SEPET (CART) SECTION STYLES
         
         BEM Naming Convention:
         - Block: sepet-
         - Element: __
         - Modifier: --
         
         Performance Notes:
         - GPU accelerated transitions
         - Reduced transition durations
         - will-change for animated elements
         ======================================== */
    /* Section Padding */
    .sepet-section{ padding: 10px 0 80px 0; }
    /* ========================================
         LAYOUT - Content Wrapper
         ======================================== */
    .sepet-wrapper{ display: flex; gap: 20px; align-items: flex-start; }
    /* Left Column - Takes remaining space */
    .sepet-left{ flex: 1; }
    /* Right Column - Fixed 250px width, Sticky */
    .sepet-right{ width: 250px; flex-shrink: 0; position: sticky; top: 140px; align-self: flex-start; }
    /* ========================================
         LEFT COLUMN - Items Container
         ======================================== */
    .sepet-container{ background-color: var(--bg-light); border-radius: 20px; padding: 30px; }
    .sepet-title{ display: flex; flex-direction: column; gap: 5px; margin-bottom: 30px; }
    .sepet-title h2{ font-weight: 600; font-size: 18px; line-height: 1.21; color: var(--text-primary); margin: 0; }
    .sepet-title p{ font-weight: 600; font-size: 15px; line-height: 1.18; color: #7A7F99; margin: 0; }
    /* ========================================
         PACKAGE GROUP - Collapsible Structure
         ======================================== */
    .sepet-group, .sepet-group--collapsible{ display: flex; flex-direction: column; }
    /* Items List */
    .sepet-list{ display: flex; flex-direction: column; gap: 16px; }
    /* ========================================
         CARD - Base Styles
         ======================================== */
    .sepet-card{ background: rgba(249, 250, 251, 0.7); border: 2px solid rgba(234, 234, 237, 0.5); border-radius: 20px; padding: 20px; display: flex; align-items: center; justify-content: space-between; transition: background 0.2s ease, border-color 0.2s ease, opacity 0.2s ease; will-change: opacity, transform; transform: translateZ(0); backface-visibility: hidden; }
    .sepet-card:hover{ background: rgba(249, 250, 251, 1); border-color: rgba(234, 234, 237, 0.8); }
    /* Main Package with Extras */
    .sepet-card--main{ cursor: pointer; user-select: none; }
    /* Extra Package Card - Inherits from .sepet-card */
    /* ========================================
         CARD - Content Section
         ======================================== */
    .sepet-content{ display: flex; align-items: center; gap: 20px; }
    /* Icon */
    .sepet-icon{ width: 55px; height: 55px; background: linear-gradient(135deg, #8b5cf6 0%, #7844e4 100%); border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
    .sepet-icon i{ font-size: 24px; color: var(--text-light); }
    /* Platform-specific icon colors */
    .sepet-icon[data-platform="instagram"]{ background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); }
    .sepet-icon[data-platform="tiktok"]{ background: var(--tiktok); }
    .sepet-icon[data-platform="twitter"]{ background: var(--twitter); }
    .sepet-icon[data-platform="x-twitter"]{ background: #000; }
    .sepet-icon[data-platform="youtube"]{ background: var(--youtube); }
    .sepet-icon[data-platform="facebook"]{ background: var(--facebook); }
    .sepet-icon[data-platform="spotify"]{ background: var(--spotify); }
    .sepet-icon[data-platform="telegram"]{ background: var(--telegram); }
    .sepet-icon[data-platform="discord"]{ background: var(--discord); }
    .sepet-icon[data-platform="twitch"]{ background: var(--twitch); }
    .sepet-icon[data-platform="linkedin"]{ background: var(--linkedin); }
    .sepet-icon[data-platform="pinterest"]{ background: var(--pinterest); }
    .sepet-icon[data-platform="snapchat"]{ background: var(--snapchat); }
    .sepet-icon[data-platform="snapchat"] i{ color: #000; }
    .sepet-icon[data-platform="whatsapp"]{ background: var(--whatsapp); }
    .sepet-icon[data-platform="soundcloud"]{ background: var(--soundcloud); }
    .sepet-icon[data-platform="kick"]{ background: var(--kick); }
    .sepet-icon[data-platform="kick"] i{ color: #000; }
    .sepet-icon[data-platform="kwai"]{ background: var(--kwai); }
    /* Special styling for Ek Paket items - platform colors with transparency */
    .sepet-card--extra .sepet-icon{ background: rgba(120, 68, 228, 0.12) !important; }
    .sepet-card--extra .sepet-icon i{ color: #7844E4; }
    .sepet-card--extra .sepet-icon[data-platform="instagram"]{ background: rgba(225, 48, 108, 0.12) !important; }
    .sepet-card--extra .sepet-icon[data-platform="instagram"] i{ color: var(--instagram); }
    .sepet-card--extra .sepet-icon[data-platform="tiktok"]{ background: rgba(63, 51, 87, 0.12) !important; }
    .sepet-card--extra .sepet-icon[data-platform="tiktok"] i{ color: var(--tiktok); }
    .sepet-card--extra .sepet-icon[data-platform="twitter"]{ background: rgba(29, 161, 242, 0.12) !important; }
    .sepet-card--extra .sepet-icon[data-platform="twitter"] i{ color: var(--twitter); }
    .sepet-card--extra .sepet-icon[data-platform="youtube"]{ background: rgba(233, 0, 4, 0.12) !important; }
    .sepet-card--extra .sepet-icon[data-platform="youtube"] i{ color: var(--youtube); }
    .sepet-card--extra .sepet-icon[data-platform="facebook"]{ background: rgba(66, 103, 178, 0.12) !important; }
    .sepet-card--extra .sepet-icon[data-platform="facebook"] i{ color: var(--facebook); }
    .sepet-card--extra .sepet-icon[data-platform="spotify"]{ background: rgba(41, 210, 102, 0.12) !important; }
    .sepet-card--extra .sepet-icon[data-platform="spotify"] i{ color: var(--spotify); }
    .sepet-card--extra .sepet-icon[data-platform="telegram"]{ background: rgba(0, 136, 204, 0.12) !important; }
    .sepet-card--extra .sepet-icon[data-platform="telegram"] i{ color: var(--telegram); }
    .sepet-card--extra .sepet-icon[data-platform="discord"]{ background: rgba(88, 101, 242, 0.12) !important; }
    .sepet-card--extra .sepet-icon[data-platform="discord"] i{ color: var(--discord); }
    .sepet-card--extra .sepet-icon[data-platform="twitch"]{ background: rgba(145, 70, 255, 0.12) !important; }
    .sepet-card--extra .sepet-icon[data-platform="twitch"] i{ color: var(--twitch); }
    /* Info Section */
    .sepet-info h3{ font-weight: 600; font-size: 14px; color: var(--primary-purple); margin: 0; }
    .sepet-info p:first-of-type{ font-weight: 600; font-size: 15px; color: var(--text-primary); margin: 0; }
    .sepet-info p:last-of-type{ font-weight: 600; font-size: 15px;  color: var(--text-dark-muted); margin: 0; }
    /* Platform Header with Badges (inside info) */
    .sepet-header{ display: flex; align-items: center; justify-content: space-between; gap: 10px; }
    .sepet-header h3{ font-weight: 600; font-size: 15px; color: var(--primary-purple); margin: 0; }
    /* ========================================
         BADGES
         ======================================== */
    /* Desktop Badges Container */
    .sepet-badges{ display: flex; align-items: center; gap: 10px; }
    /* Mobile Badges Container - Hidden by default */
    .sepet-badges--mobile{ display: none; }
    /* Base Badge Styles */
    .sepet-badge{ display: inline-flex; justify-content: center; align-items: center; padding: 5px 10px; border-radius: 20px; font-weight: 500; font-size: 13px; height: 23px; white-space: nowrap; }
    /* Ek Paket Badge (Purple) */
    .sepet-badge--ek{ background: rgba(120, 68, 228, 0.1); color: #7844E4; }
    /* Indirim Badge (Orange) */
    .sepet-badge--indirim{ background: rgba(255, 86, 1, 0.1); color: #FF5601; }
    /* ========================================
         CARD - Actions Section
         ======================================== */
    .sepet-actions{ display: flex; align-items: center; gap: 20px; }
    /* Pricing Container */
    .sepet-price{ display: flex; flex-direction: column; justify-content: center; align-items: flex-end; }
    /* Original Price (Strikethrough) */
    .sepet-price--old{ font-weight: 600; font-size: 14px; text-align: right; color: #C2C4CF; text-decoration: line-through; margin-bottom: 0; }
    /* Current Price */
    .sepet-price span:not(.sepet-price--old):not(.sepet-price--base):not(.sepet-price--total){ font-weight: 600; font-size: 16px; color: var(--text-dark-muted); text-align: right; min-width: 80px; }
    /* Base Price (when has extras) */
    .sepet-price--base{ font-weight: 600; font-size: 13px; color: #C2C4CF; text-align: right; text-decoration: line-through; }
    /* Total Price (main + extras) */
    .sepet-price--total{ font-weight: 600; font-size: 18px; color: #7844E4; text-align: right; }
    .sepet-price--total small{ font-weight: 600; font-size: 11px; color: #666F94; }
    /* Delete Button */
    .sepet-delete{ width: 50px; height: 50px; background: rgb(240 36 104 / 13%); border: none; border-radius: 10px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.15s ease, transform 0.15s ease; will-change: transform; }
    .sepet-delete:hover{ background: #d91e5a; transform: scale(1.05); }
    .sepet-delete:active{ transform: scale(0.95); }
    .sepet-delete__icon, .sepet-delete svg{ width: 24px; height: 24px; color: rgb(240, 36, 104); fill: rgb(240, 36, 104); transition: color 0.15s ease, fill 0.15s ease; }
    .sepet-delete:hover .sepet-delete__icon, .sepet-delete:hover svg{ color: #fff; fill: #fff; }
    /* ========================================
         COLLAPSIBLE EXTRAS
         ======================================== */
    /* Toggle Button */
    .sepet-toggle{ width: 30px; height: 30px; background: rgba(102, 111, 148, 0.1); border: none; border-radius: 8px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.15s ease; flex-shrink: 0; }
    .sepet-toggle:hover{ background: rgba(102, 111, 148, 0.15); }
    .sepet-toggle__icon{ transition: transform 0.2s ease; will-change: transform; }
    /* Rotate arrow when expanded */
    .sepet-group--collapsible.expanded .sepet-toggle__icon{ transform: rotate(180deg); }
    /* Extra Packages Container */
    .sepet-extras{ max-height: 0; overflow: hidden; transition: max-height 0.25s ease-out, padding 0.25s ease-out, border 0.2s ease-out; background: #F7F7F7; border: 0 solid rgba(234, 234, 237, 0.5); border-radius: 20px; padding: 0; will-change: max-height, padding; }
    /* Expanded State */
    .sepet-group--collapsible.expanded .sepet-extras{ max-height: 2000px; border-width: 2px; padding: 10px 0; margin-top: 10px; }
    /* Extra Package Card - No individual border */
    .sepet-extras .sepet-card{ border: none; border-radius: 0; background: transparent; padding: 20px; }
    .sepet-extras .sepet-card:hover{ background: transparent; border: none; }
    /* Divider (Figma) */
    .sepet-divider{ height: 1px; background: #DFE5FC; margin: 0 auto; width: 218px; }
    /* ========================================
         RIGHT COLUMN - Summary Card
         ======================================== */
    .sepet-summary{ background-color: #ffffff; border-radius: 20px; width: 250px; position: sticky; top: 100px; display: flex; flex-direction: column; }
    /* Progress Section (Figma) */
    .sepet-progress{ position: relative; padding: 25px 16px 10px 16px; display: flex; flex-direction: column; gap: 0; }
    /* Vertical Progress Line */
    .sepet-progress__line{ position: absolute; left: 24px; top: 38px; width: 10px; height: 130px; background: #f6f8fc; border-radius: 10px; overflow: hidden; z-index: 0; }
    /* Progress Fill */
    .sepet-progress__fill{ position: absolute; left: 3px; top: 4px; width: 4px; height: 5px; background: #7844e4; border-radius: 10px; transition: height 0.35s cubic-bezier(0.4, 0, 0.2, 1); will-change: height; }
    .sepet-progress__fill--step1{ height: 5px; }
    .sepet-progress__fill--step2{ height: 65px; }
    /* ========================================
         SEPET STEPPER (Figma Tasarimi)
         ======================================== */
    /* Summary Card Icindeki Stepper */
    .sepet-summary .sepet-step{ display: flex !important; align-items: flex-start; gap: 12px; position: relative; z-index: 1; min-height: 61px; }
    .sepet-summary .sepet-step:last-child{ min-height: auto; padding-bottom: 10px; }
    /* Step Dot - Mor Yuvarlak */
    .sepet-step__dot{ width: 26px; height: 26px; border-radius: 50%; background: #EADCFF; flex-shrink: 0; position: relative; box-sizing: border-box; }
    .sepet-step__dot::after{ content: ''; display: block; width: 18px; height: 18px; border-radius: 50%; background: transparent; position: absolute; top: 4px; left: 4px; transition: background 0.2s ease; }
    .sepet-step__dot.active::after{ background: #7844E4; }
    /* Step Content - Baslik ve Aciklama */
    .sepet-step__content{ display: flex; flex-direction: column; gap: 0; }
    .sepet-step__content h4{ font-weight: 600; font-size: 16px; line-height: 24px; color: #33353E; margin: 0; }
    .sepet-step__content p{ font-weight: 500; font-size: 12px; line-height: 18px; color: #7A7F99; margin: 0; }
    /* Active Step - Mor Renk */
    .sepet-step__content.active h4{ color: #7844E4; }
    .sepet-step__content.active p{ color: rgba(120, 68, 228, 0.7); }
    /* Inactive Step - Gri Renk */
    .sepet-step__content.inactive h4, .sepet-step__content.inactive p{ color: #7A7F99; }
    /* Sol Kolon Form Adimlari - Varsayilan Gizli */
    .sepet-left .sepet-step--active{ display: block !important; }
    .sepet-left .sepet-step{ display: none; }
    /* Legacy Step Info Destegi */
    .sepet-step__info{ position: absolute; left: 54px; display: flex; flex-direction: column; gap: 0; }
    .sepet-step__info h4, .sepet-step__title{ font-weight: 600; font-size: 16px; line-height: 1.5; color: #33353e; margin: 0; height: 24px; }
    .sepet-step__info p, .sepet-step__status{ font-weight: 600; font-size: 12px; line-height: 1.5; color: #7a7f99; margin: 0; height: 18px; }
    .sepet-step__status--active{ color: rgba(120, 68, 228, 0.7); }
    /* ========================================
         MEMBERSHIP BADGE
         ======================================== */
    /* Membership Badge (Figma) */
    .sepet-membership{ margin: 0 16px; padding: 12px; background: #F9FAFB; border: 1px dashed rgba(228, 231, 235, 0.5); border-radius: 16px; display: flex; align-items: center; gap: 10px; }
    .sepet-membership__icon-wrap{ flex-shrink: 0; }
    .sepet-membership__icon{ width: 33.64px; height: 32px; object-fit: contain; }
    .sepet-membership__info{ display: flex; flex-direction: column; gap: 8px; }
    .sepet-membership__title{ font-weight: 600; font-size: 15px; line-height: 20px; color: #33353E; margin: 0; }
    .sepet-membership__text{ font-weight: 500; font-size: 12px; line-height: 20px; color: #7A7F99; margin: 0; }
    .sepet-membership__amount{ font-weight: 600; }
    /* ========================================
         TOTAL SECTION
         ======================================== */
    /* Total Section (Figma) */
    .sepet-total{ padding: 21px 16px; flex-shrink: 0; display: flex; align-items: center; gap: 12px; }
    .sepet-total__icon{ width: 40px; height: 63px; background: #F6F8FC; border-radius: 6px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
    .sepet-total__icon svg{ width: 16px; height: 24px; }
    .sepet-total__icon svg path{ fill: #7A7F99; }
    .sepet-total__text{ display: flex; flex-direction: column; gap: 5px; }
    .sepet-total__label{ font-weight: 500; font-size: 14px; line-height: 21px; color: #7A7F99; }
    .sepet-total__prices{ display: flex; flex-direction: column; gap: 0; }
    .sepet-total__old{ font-weight: 500; font-size: 14px; line-height: 24px; color: #C2C4CF; text-decoration: line-through; }
    .sepet-total__amount{ font-weight: 600; font-size: 18px; line-height: 24px; color: #33353E; }
    /* ========================================
         CONTINUE BUTTON
         ======================================== */
    .sepet-btn{ width: 218px; height: 50px; background-color: #7844e4; border: none; border-radius: 12px; margin: 0 16px 16px 16px; cursor: pointer; transition: background-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease; position: relative; display: flex; align-items: center; justify-content: space-between; padding: 14px; will-change: transform; }
    .sepet-btn:hover{ background-color: #6a3bc5; transform: translateY(-2px); box-shadow: 0px 4px 12px rgba(120, 68, 228, 0.2); }
    .sepet-btn:active{ transform: translateY(0); }
    .sepet-btn span{ font-weight: 600; font-size: 16px; line-height: normal; color: #ffffff; }
    .sepet-btn svg{ width: 12.86px; height: 12px; }
    .sepet-btn svg path{ stroke: #ffffff; }
    .sepet-btn--disabled{ background-color: #C2C4CF; cursor: not-allowed; }
    .sepet-btn--disabled:hover{ background-color: #C2C4CF; transform: none; box-shadow: none; }
    /* Payment Button State */
    .sepet-btn--payment{ background-color: #10b981; }
    .sepet-btn--payment:hover{ background-color: #059669; }
    /* ========================================
         PAYMENT SECTION (Step 2)
         ======================================== */
    .sepet-form{ display: flex; flex-direction: column; gap: 16px; margin-bottom: 30px; }
    .sepet-payment{ margin-top: 30px; }
    .sepet-payment__list{ display: flex; flex-direction: column; gap: 12px; }
    /* Payment Option */
    .sepet-payment__option{ display: flex; align-items: center; gap: 10px; padding: 16px; background: rgba(249, 250, 251, 0.7); border: 1px solid rgba(228, 231, 235, 0.5); border-radius: 14px; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease; }
    .sepet-payment__option:hover{ background: rgba(249, 250, 251, 1); border-color: rgba(228, 231, 235, 0.8); }
    .sepet-payment__option--active{ background: rgba(120, 68, 228, 0.1); border-color: #7844e4; }
    .sepet-payment__option--active:hover{ background: rgba(120, 68, 228, 0.15); }
    /* Payment Icon */
    .sepet-payment__icon{ width: 40px; height: 40px; background: #F9FAFB; border: 1px solid #E4E7EB80; border-radius: 6px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
    .sepet-payment__icon svg path{ fill: #666F94; transition: all var(--transition-default); }
    .sepet-payment__option--active .sepet-payment__icon{ background: rgba(120, 68, 228, 0.05); }
    .sepet-payment__option--active .sepet-payment__icon svg path{ fill: #7844E4; }
    /* Payment Info */
    .sepet-payment__info{ display: flex; flex-direction: column; gap: 2px; }
    .sepet-payment__info h4, .sepet-payment__title{ font-weight: 600; font-size: 16px; line-height: 1.27; color: var(--text-primary); margin: 0; }
    .sepet-payment__info p, .sepet-payment__desc{ font-weight: 600; font-size: 12px; line-height: 1.5; color: var(--text-dark-muted); margin: 0; }
    .sepet-payment__option--active .sepet-payment__info h4, .sepet-payment__option--active .sepet-payment__info p, .sepet-payment__option--active .sepet-payment__title, .sepet-payment__option--active .sepet-payment__desc{ color: var(--primary-purple); }
    /* ========================================
         EMPTY CART STATE
         ======================================== */
    .sepet-empty{ display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 60px 20px; text-align: center; gap: 10px; }
    .sepet-empty span{ font-weight: 600; font-size: 20px; color: var(--text-primary); }
    .sepet-empty p{ font-weight: 600; font-size: 15px; color: var(--text-dark-muted); margin: 0; }
    /* ========================================
         CART RESPONSIVE STYLES
         ======================================== */
    /* Tablet & Below (max-width: 991px) */
    @media (max-width: 991px) {
    .sepet-left{ width: 100%; }
    .sepet-wrapper{ flex-direction: column; }
    .sepet-right{ position: relative; top: 0; width: 100%; max-width: 400px; margin: 0 auto; }
    .sepet-summary{ position: relative; top: 0; width: 100%; height: auto; }
    .sepet-btn{ width: calc(100% - 32px); } }
    /* Mobile Large (max-width: 821px) */
    @media (max-width: 821px) {
    .sepet-container{ padding: 16px; }
    .sepet-title{ margin-bottom: 20px; }
    .sepet-card{ border-radius: 16px; flex-direction: column; align-items: stretch; gap: 16px; padding: 16px; }
    /* Main package with extras - mobile layout */
    .sepet-card--main{ flex-direction: column; gap: 0; position: relative; }
    .sepet-card--main .sepet-content{ width: 100%; gap: 12px; margin-bottom: 16px; display: flex; justify-content: space-between; align-items: flex-start; position: relative; }
    /* Toggle button inside content on mobile */
    .sepet-card--main .sepet-toggle{ position: absolute; right: 20px; top: 30px; margin: 0; }
    .sepet-card--main .sepet-actions{ display: flex; order: 2; }
    .sepet-content{ width: 100%; gap: 12px; }
    .sepet-icon{ width: 50px; height: 50px; }
    .sepet-info{ width: 222px; flex: 1; }
    /* Add padding for toggle button */
    .sepet-card--main .sepet-info{ padding-right: 40px; }
    .sepet-actions{ width: 100%; justify-content: stretch; gap: 10px; }
    /* Mobile Platform Header */
    .sepet-header{ display: block; }
    /* Hide Desktop Badges on Mobile */
    .sepet-badges, .sepet-price--old{ display: none; }
    /* Show Mobile Badges */
    .sepet-badges--mobile{ display: flex; align-items: center; gap: 10px; }
    .sepet-badge{ font-size: 12px; padding: 4px 8px; height: 20px; }
    /* Mobile Pricing Styles */
    .sepet-price{ display: flex; flex-direction: column; align-items: center; justify-content: center; background: rgba(234, 234, 237, 0.5); border-radius: 10px; min-height: 34px; height: auto; flex: 1; padding: 6px 10px; }
    /* Ek paketli fiyatlar için mobil stil */
    .sepet-price--base{ font-size: 11px; line-height: 1.2; }
    .sepet-price--total{ font-size: 14px; line-height: 1.2; }
    .sepet-price--total small{ font-size: 10px; }
    .sepet-delete{ flex: 1; width: auto; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; }
    .sepet-delete svg{ width: 20px; height: 20px; }
    .sepet-right{ max-width: none; }
    .sepet-summary{ width: 100%; }
    .sepet-step__title{ font-size: 16px; }
    .sepet-step__status{ font-size: 12px; }
    .sepet-total__label{ font-size: 13px; }
    .sepet-total__amount, .sepet-btn span{ font-size: 15px; }
    .sepet-btn{ height: 46px; width: calc(100% - 32px); }
    /* Collapsible Package Group - Mobile */
    .sepet-group, .sepet-group--collapsible{ gap: 10px; }
    .sepet-extras{ border-radius: 16px; }
    .sepet-group--collapsible.expanded .sepet-extras{ border-width: 2px; }
    .sepet-extras .sepet-card{ padding: 16px; border: none; background: transparent; }
    .sepet-extras .sepet-card:hover{ background: transparent; border: none; }
    .sepet-divider{ margin: 0 16px; }
    .sepet-toggle{ width: 34px; height: 34px; margin-left: 0; flex: 1; } }
    /* ================================================================
         PART 3: DEFERRED - BELOW THE FOLD
         (Content continues from original file - Comments, FAQ, Sliders, etc.)
         ================================================================ */
    /* ========================================
         3.1 COMMENTS SECTION
         ======================================== */
    /* COMMENTS SECTION */
    .comments{ padding: 60px 0; background: var(--bg-light-alt,#F8F9FC); }
    .comments .section-header p{ line-height: 1.16em; color: #666F94; max-width: 752px; margin: 0 auto; }
    .comments-grid{ display: flex; justify-content: center; align-items: flex-end; gap: 12px; margin-bottom: 52px; min-height: 208px; padding: 0; list-style: none; }
    .comments-grid.is-visible>li:nth-child(1){ animation-delay: 0s; }
    .comments-grid.is-visible>li:nth-child(2){ animation-delay: .1s; }
    .comments-grid.is-visible>li:nth-child(3){ animation-delay: .2s; }
    .comments-grid.is-visible>li:nth-child(4){ animation-delay: .3s; }
    .comments-grid.is-visible>li:nth-child(5){ animation-delay: .4s; }
    .comments-grid.is-visible>li:nth-child(6){ animation-delay: .5s; }
    .comments-grid.is-visible>li{ animation-play-state: running; }
    @keyframes cardFadeInUp {
    to{ opacity: 1; transform: translateY(0); } }
    .comments-grid>li{ position: relative; width: 170px; height: 170px; cursor: pointer; transition: all .3s; flex-shrink: 0; opacity: 0; transform: translateY(30px); animation: cardFadeInUp .6s ease-out forwards; animation-play-state: paused; }
    .comments-grid>li.active{ width: 208px; height: 208px; }
    .comments-grid>li:hover{ transform: translateY(-4px); }
    .comments-grid>li img{ width: 100%; height: 100%; object-fit: cover; opacity: .6; transition: opacity .3s; border-radius: 45px; }
    .comments-grid>li.active img{ opacity: 1; }
    .comments-grid>li>div:last-child{ position: absolute; top: -8px; left: -8px; width: 71px; height: 58px; opacity: 0; transition: opacity .3s; pointer-events: none; color: var(--indicator-color,#7844E4); }
    .comments-grid>li>div:last-child svg{ width: 100%; height: 100%; display: block; }
    .comments-grid>li>div:last-child svg path{ stroke-dasharray: 200; stroke-dashoffset: 200; transition: stroke-dashoffset .6s ease-out; }
    .comments-grid>li.active>div:last-child{ opacity: 1; }
    .comments-grid>li.active>div:last-child svg path{ stroke-dashoffset: 0; }
    .comment-content{ display: flex; align-items: center; gap: 52px; max-width: 1122px; margin: 36px auto 0; position: relative; }
    .comment-banner{ position: relative; width: 350px; height: 361px; flex-shrink: 0; }
    .comment-banner img{ width: 100%; height: 100%; border-radius: 50px; object-fit: cover; transition: opacity .3s; }
    /* Speech Bubble Tail - Triangle pointing to avatar */
    .comment-text::before{ content: ''; position: absolute; left: -6px; top: 61px; width: 25px; height: 25px; background: #FFFFFF; border-radius: 4px; transform: rotate(45deg); z-index: -1; }
    .comment-text{ display: flex; flex-direction: column; gap: 16px; flex: 1; max-width: 732px; background: #FFFFFF; border-radius: 24px; padding: 20px; position: relative; z-index: 1; }
    .comment-quote{ display: flex; flex-direction: column; gap: 10px; transition: opacity .3s; }
    .comment-quote>div:first-child{ width: 56.24px; height: 40.13px; flex-shrink: 0; }
    .comment-quote>div:first-child svg{ width: 100%; height: 100%; }
    .comment-quote>div:first-child svg path{ fill: rgba(120,68,228,.1); }
    /* Divider between comment text and author */
    .comment-text > hr{ width: 100%; height: 1px; background: rgba(217, 217, 217, 0.5); border: none; margin: 0; }
    .comment-author{ display: flex; flex-direction: row; align-items: center; gap: 16px; transition: opacity .3s; text-transform: capitalize; }
    .comment-author > div:first-child{ box-sizing: border-box; display: flex; flex-direction: row; align-items: center; padding: 8px; gap: 10px; width: 40px; height: 40px; background: rgba(120, 68, 228, 0.1); border: 1px solid rgba(120, 68, 228, 0.2); border-radius: 12px; flex: none; order: 0; flex-grow: 0; }
    .comment-author > div:first-child svg{ width: 24px; height: 24px; }
    .comment-author > div:first-child svg path{ fill: #7844E4; }
    .comment-author > div:last-child{ display: flex; flex-direction: column; gap: 0; width: 308px; }
    .comment-quote p, #commentText{ font-size: 16px; }
    .comment-author .author-name{ font-weight: 600; font-size: 18px; color: #33353E; margin: 0; display: block; }
    .comment-author p{ font-weight: 500; font-size: 16px; color: #7844E4; margin: 0; }
    @media (max-width:991px) {
    .comments-grid{ gap: 12px; margin-bottom: 40px; flex-wrap: wrap; }
    .comments-grid>li{ width: 100px; height: 100px; }
    .comments-grid>li.active{ width: 130px; height: 130px; }
    .comment-content{ flex-direction: column; gap: 30px; text-align: center; }
    .comment-banner{ width: 200px; height: 200px; }
    .comment-author .author-name, .comment-author p{ font-size: 16px; } }
    /* Comment Badge */
    .comment-badge{ position: absolute; top: 320px; right: -40px; display: flex; flex-direction: row; justify-content: center; align-items: center; padding: 16px; gap: 10px; background: #FFFFFF; border: 1px dashed #FFFFFF; border-radius: 16px; z-index: 2; }
    .comment-badge > div:first-child{ display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 10px; background: #7844E4; border-radius: 12px; flex-shrink: 0; }
    .comment-badge > div:first-child svg{ width: 20px; height: 20px; }
    .comment-badge > div:first-child svg path{ fill: #FFFFFF; }
    .comment-badge span{ font-weight: 600; font-size: 18px; line-height: 20px; color: #33353E; }
    .comment-badge span span{ font-weight: 500; }
    .comment-quote > div:first-child svg path{ fill: rgba(120, 68, 228, 0.1); }
    /* ========================================
         3.1.5 APP ABOUT SECTION (Uygulamamız Hakkında)
         ======================================== */
    /* Section Container */
    .app-about, .paketler-table{ padding: 40px 0; }
    /* Section Header */
    .app-about-header{ display: flex; flex-direction: column; align-items: center; gap: 5px; margin-bottom: 40px; }
    .app-about-header h2{ font-weight: 600; font-size: 30px; line-height: 1.21; text-align: center; margin: 0; }
    .app-about-header p{ line-height: 1.16; text-align: center; color: var(--text-dark-muted); margin: 0; }
    /* 3-Column Layout */
    .app-about-content{ display: flex; align-items: center; justify-content: center; gap: 40px; }
    /* Feature Cards Column */
    .app-about-cards-column{ display: flex; flex-direction: column; gap: 90px; width: 300px; }
    /* Feature Card */
    .app-about-feature-card{ display: flex; flex-direction: column; gap: 10px; padding: 20px; background-color: #ffffff; border-radius: 20px; box-shadow: 0px 4px 24px rgba(0, 0, 0, 0.05); transition: all var(--transition-default); }
    .app-about-feature-card:hover, .stats-grid > li:hover, .referans-link-card:hover, .stat-card:hover{ box-shadow: 0px 8px 32px rgba(0, 0, 0, 0.08); transform: translateY(-2px); }
    /* Feature Icon */
    .app-about-feature-icon{ display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 10px; background-color: rgba(15, 127, 211, 0.05); border-radius: 12px; flex-shrink: 0; color: #0F7FD3; }
    /* Feature Title */
    .app-about-feature-header h3{ font-weight: 600; font-size: 20px; line-height: 1.21; text-transform: capitalize; color: var(--text-primary); margin: 0; }
    /* Feature Description */
    .app-about-feature-card p{ font-weight: 600; font-size: 15px; line-height: 1.64; color: var(--text-dark-muted); margin: 0; }
    /* Center Phone Mockup */
    .app-about-phone-wrapper{ display: flex; align-items: center; justify-content: center; width: 367px; height: 482px; background: linear-gradient(180deg, #f0f1f9 34.62%, #f2f5ff 100%); border-radius: 20px; position: relative; overflow: hidden; flex-shrink: 0; }
    .app-about-phone-wrapper img{ width: 100%; height: 100%; object-fit: contain; position: relative; z-index: 1; }
    /* Gradient fade effect at bottom */
    .app-about-phone-wrapper::after{ content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 123px; background: linear-gradient(180deg, rgba(240, 241, 249, 0) 0%, #f0f1f9 100%); pointer-events: none; z-index: 2; }
    /* ========================================
         3.2 UYGULAMA SECTION (section_app)
         ======================================== */
    .uygulama{ position: relative; padding: 80px 0 100px; overflow: hidden; background-color: var(--bg-light-alt); }
    /* Full-width background wrapper */
    .uygulama > .bg-wrapper{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
    .uygulama > .bg-wrapper img{ width: 100%; height: 100%; object-fit: cover; object-position: center; }
    /* Content wrapper */
    .uygulama .app-content{ position: relative; z-index: 1; display: flex; align-items: center; gap: 70px; max-width: 1122px; margin: 0 auto; }
    /* Text content */
    .uygulama .app-text{ display: flex; flex-direction: column; gap: 24px; max-width: 508px; flex-shrink: 0; }
    /* Store buttons */
    .uygulama .store-buttons > a{ display: block; width: 180px; height: 53px; transition: transform var(--transition-default), opacity var(--transition-default); }
    .uygulama .store-buttons > a:hover{ transform: translateY(-2px); opacity: 0.9; }
    /* Phone images */
    .uygulama .app-phones{ flex: 1; display: flex; align-items: center; justify-content: center; min-width: 0; }
    .uygulama .app-phones img{ width: 100%; max-width: 502px; object-fit: contain; }
    /* Dynamic color support */
    .feature-card[data-color="#F02468"] .feature-link, .solution-card[data-color="#F02468"] > div:last-child span{ color: #F02468; }
    .feature-card[data-color="#24B3F0"] .feature-link, .solution-card[data-color="#24B3F0"] > div:last-child span{ color: #24B3F0; }
    .feature-card[data-color="#77D800"] .feature-link, .solution-card[data-color="#77D800"] > div:last-child span{ color: #77D800; }
    .feature-card[data-color="#F4009B"] .feature-link, .solution-card[data-color="#F4009B"] > div:last-child span{ color: #F4009B; }
    .feature-card[data-color="#FFAE00"] .feature-link, .solution-card[data-color="#FFAE00"] > div:last-child span{ color: #FFAE00; }
    .feature-card[data-color="#0051E7"] .feature-link, .solution-card[data-color="#0051E7"] > div:last-child span{ color: #0051E7; }
    .feature-card:hover .feature-link, .solution-card:hover > div:last-child span{ gap: 14px; }
    .feature-link svg, .solution-card > div:last-child span svg{ transition: var(--transition-default); }
    /* ========================================
           SOLUTIONS SECTION (Dijital Pazarlama Page)
           ======================================== */
    .solutions{ background-color: #F8F9FA; }
    .solutions .section-header h2{ font-weight: 600; font-size: 36px; line-height: var(--lh-tight); color: #33353E; margin: 0 0 12px 0; }
    .solutions .section-header p{ font-weight: 600; font-size: 16px; line-height: var(--lh-normal); color: #666F94; margin: 0; }
    .solutions-grid{ display: grid; grid-template-columns: 1fr; gap: 16px; }
    /* Solution Card - Semantic CSS Selectors */
    .solution-card:hover{ transform: translateY(-4px); box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.1); }
    /* Icon wrapper - first child div */
    .solution-card > div:first-child{ flex-shrink: 0; width: 68px; height: 130px; border-radius: 12px; display: flex; align-items: center; justify-content: center; position: relative; }
    /* Content wrapper - last child div */
    /* Title - h3 inside content wrapper */
    /* Description - p inside content wrapper */
    /* Link - span inside content wrapper */
    /* Dynamic color support */
    /* ========================================
         KATEGORI HIZMETLER STYLES
         ======================================== */
    .kategori-hizmetler{ padding: 80px 0; padding-top: 20px; }
    .kategori-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; max-width: 1320px; margin: 0 auto; }
    .kategori-card{ display: flex; flex-direction: column; width: 100%; max-width: 320px; background: var(--bg-light); border-radius: 12px; overflow: hidden; margin: 0 auto; box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.04); transition: all 0.3s ease; }
    .kategori-card:hover{ transform: translateY(-8px); box-shadow: 0px 12px 32px rgba(120, 68, 228, 0.15); }
    .kategori-card .card-header{ flex-shrink: 0; width: 100%; height: 90px; background-image: url('../images/kategoriler/kategori-card-bg.png'); background-size: cover; background-position: center; background-repeat: no-repeat; box-shadow: 0px 5px 20px 0px rgba(141, 72, 189, 0.15); padding: 20px; border-radius: 12px 12px 0 0; overflow: hidden; }
    .kategori-card .card-header > div{ display: flex; flex-direction: row; align-items: center; gap: 10px; height: 100%; }
    .kategori-card .card-header > div > div:first-child{ width: 50px; height: 50px; background: var(--bg-light); border: 1px solid var(--bg-light); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
    .kategori-card .card-header h3{ font-weight: var(--fw-semibold); font-size: 17px; line-height: var(--lh-normal); color: var(--text-light); margin: 0; white-space: nowrap; }
    .kategori-card p{ padding: 20px; padding-bottom: 0; line-height: 24px; color: #7C8499; display: -webkit-box; line-clamp: 3; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; word-break: break-word; }
    .kategori-card .card-button{ flex-shrink: 0; margin: 0 20px 20px 20px; height: 55px; background: radial-gradient(circle at 91% 54%, rgba(255, 85, 0, 0.65) 0%, rgba(191, 0, 203, 1) 100%); border-radius: 12px; display: flex; align-items: center; justify-content: center; gap: 10px; transition: transform var(--transition-fast), box-shadow var(--transition-default); margin-top:15px; }
    .kategori-card .card-button:hover{ transform: scale(1.02); box-shadow: 0px 6px 16px rgba(191, 0, 203, 0.3); }
    .kategori-card .card-button span{ font-weight: var(--fw-medium); font-size: 15px; line-height: var(--lh-tight); color: var(--text-light); text-align: center; }
    .kategori-card .card-button svg, .task-btn-go svg, .destek-success-btn svg{ width: 12.86px; height: 12px; }
    /* Responsive Design */
    #latest{ padding: 40px 0 80px; }
    .latest-blogs-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 21px; justify-content: center; align-items: stretch; }
    /* Blog Card Component */
    .blog-card{ background: var(--bg-light); border-radius: 24px; overflow: hidden; transition: all 0.3s ease; border: none; width: 100%; max-width: 443px; display: flex; flex-direction: column; height: 100%; }
    .blog-card:hover{ transform: translateY(-4px); box-shadow: 0px 12px 32px rgba(0, 0, 0, 0.08); }
    /* Blog Card Image Wrapper */
    .blog-card .blog-image-wrapper{ position: relative; width: 100%; height: 240px; overflow: hidden; border-radius: 22px; padding: 20px; }
    /* Blog Card Image */
    .blog-card img{ width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; border-radius: 22px; }
    .blog-card:hover img, .similar-blog-card:hover .card-image img{ transform: scale(1.05); }
    /* Blog Card Content */
    .blog-card > .blog-content{ padding: 20px; padding-top: 0; display: flex; flex-direction: column; gap: 12px; flex: 1; min-height: 216px; }
    .blog-card .blog-content>*:last-child{ margin-top: auto; }
    .blog-read-more{ display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; background: linear-gradient(135deg, #8B5CF6, #7C3AED); color: #fff; font-size: 14px; font-weight: 600; border-radius: 8px; margin-top: auto; transition: all 0.3s ease; width: 100%; align-items: center; justify-content: center; }
    .blog-read-more i{ font-size: 12px; transition: transform 0.3s ease; }
    .blog-card:hover .blog-read-more{ background: linear-gradient(135deg, #7C3AED, #6D28D9); transform: translateX(4px); }
    .blog-card:hover .blog-read-more i{ transform: translateX(4px); }
    @media (max-width: 991px) {
    .latest-blogs-grid{ grid-template-columns: repeat(3, 1fr); } }
    @media (max-width: 768px) {
    .latest-blogs-grid{ grid-template-columns: repeat(2, 1fr); } }
    @media (max-width: 576px) {
    .latest-blogs-grid{ grid-template-columns: repeat(1, 1fr); } }
    /* ========================================
           ÜCRETSIZ DENEME SECTION STYLES
           ======================================== */
    .ucretsiz-deneme-section{ padding: 0; position: relative; z-index: 10; padding-bottom: 85px; }
    .deneme-card, .ucretsiz-deneme-card{ background: #FFFFFF; border-radius: 20px; padding: 30px; display: flex; flex-direction: column; gap: 16px; max-width: 1000px; margin: 0 auto; overflow: visible; }
    /* Header */
    .deneme-header, .menu-header, .iletisim-info-header, .odeme-card-header, .siparis-header, .odeme-ozeti-header, .upsell-header, .stats-grid > li > div:last-child{ display: flex; flex-direction: column; gap: 5px; }
    .deneme-header p{ font-weight: 600; font-size: 15px; line-height: var(--lh-tight); color: #7A7F99; margin: 0; }
    .upsell-header{margin-bottom: 20px;}
    /* Features Pills */
    .deneme-features > div:not(:nth-child(even)) span{ font-weight: 600; font-size: 14px; line-height: var(--lh-tight); color: #666F94; white-space: nowrap; }
    .deneme-features > div:nth-child(even){ width: 1px; height: 10px; background: rgba(102, 111, 148, 0.3); flex-shrink: 0; }
    /* Input Fields */
    .deneme-inputs{ display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
    .deneme-input-wrapper{ display: flex; align-items: center; gap: 15px; padding: 15px; background: transparent; border: 2px solid #EAEAED; border-radius: 15px; transition: var(--transition-default); height: 66px; flex: 1; min-width: 280px; cursor: text; }
    .deneme-input-wrapper > svg{ width: 24px; height: 24px; flex-shrink: 0; opacity: 0.8; }
    /* Input Container for Floating Label */
    .deneme-input-wrapper > div:nth-child(3){ display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; position: relative; justify-content: center; min-height: 36px; }
    .deneme-input-wrapper label{ font-weight: 600; line-height: var(--lh-tight); color: #666F94; opacity: 0.8; transition: all 0.2s ease; position: absolute; top: 50%; left: 0; transform: translateY(-50%); pointer-events: none; }
    /* Floating label effect - move up when input has focus or value */
    .deneme-input:focus ~ label, .deneme-input:not(:placeholder-shown) ~ label{ font-size: 12px; top: 0; transform: translateY(0); opacity: 0.8; }
    /* Also handle with wrapper class for JS support */
    .deneme-input-wrapper:focus-within label, .deneme-input-wrapper.has-value label{ font-size: 14px; top: -3px; transform: translateY(0); opacity: 0.8; }
    .deneme-input{ flex: 1; border: none; background: transparent; font-weight: 600; line-height: var(--lh-tight); color: #33353E; outline: none; padding: 0; padding-top: 12px; transform: translateY(3px); width: 100%; min-height: 30px; }
    .deneme-input::placeholder, .paket-adimlar-input-field::placeholder, .talep-input-field::placeholder{ color: transparent; opacity: 0; }
    /* Warning Message */
    .deneme-warning{ display: flex; align-items: center; gap: 10px; padding: 14px; background: rgba(249, 250, 251, 0.7); border: 1px solid #E4E7EB; border-radius: 12px; justify-content: center; }
    .deneme-warning svg, .deneme-submit-btn svg, .ucretsiz-deneme-success-message svg, .paket-warning svg{ width: 22px; height: 22px; flex-shrink: 0; }
    .deneme-warning p{ font-weight: 600; font-size: 15px; line-height: var(--lh-tight); color: #666F94; margin: 0; }
    /* Submit Button */
    .deneme-submit-btn{ display: flex; align-items: center; justify-content: center; gap: 10px; height: 50px; background: #7844E4; border: none; border-radius: 12px; font-weight: 600; line-height: var(--lh-tight); color: #FFFFFF; cursor: pointer; transition: var(--transition-default); width: 100%; position: relative; overflow: hidden; }
    /* Glass shimmer effect */
    .deneme-submit-btn:hover{ background: #6A35D0; transform: translateY(-2px); box-shadow: 0px 8px 24px rgba(120, 68, 228, 0.3); }
    .deneme-submit-btn:disabled{ opacity: 0.6; cursor: not-allowed; pointer-events: none; }
    .deneme-submit-btn.loading svg{ animation: spin 1s linear infinite; }
    @keyframes spin {
    from{ transform: rotate(0deg); }
    to{ transform: rotate(360deg); } }
    /* Legacy support - keep old classes for other steps */
    /* Step 2: Profile Display */
    .ucretsiz-deneme-profile{ display: flex; align-items: center; gap: 10px; padding: 17px; background: rgba(249, 250, 251, 0.7); border: 1px solid #E4E7EB; border-radius: 16px; height: 84px; }
    .ucretsiz-deneme-profile-avatar{ width: 50px; height: 50px; border-radius: 50px; overflow: hidden; border: 1px solid #E4E7EB; flex-shrink: 0; }
    .ucretsiz-deneme-profile-name{ font-weight: 600; line-height: var(--lh-tight); color: #33353E; margin: 0; }
    .ucretsiz-deneme-profile-username{ font-weight: 600; font-size: 14px; line-height: var(--lh-normal); color: #666F94; margin: 0; }
    /* Package Selection */
    .ucretsiz-deneme-packages{ display: flex; gap: 10px; align-items: stretch; }
    .ucretsiz-deneme-package{ flex: 1; height: 84px; border: 2px solid rgba(234, 234, 237, 0.5); border-radius: 16px; padding: 13px 20px; cursor: pointer; transition: var(--transition-default); position: relative; background: #FFFFFF; }
    .ucretsiz-deneme-package-active{ border-color: #7844E4; border-width: 2px; }
    .ucretsiz-deneme-package-overlay{ position: absolute; top: 2px; left: 2px; right: 2px; bottom: 2px; background: rgba(120, 68, 228, 0.1); border-radius: 10px; opacity: 0; transition: var(--transition-default); }
    .ucretsiz-deneme-package-icon{ position: absolute; top: 31px; right: 22px; width: 22px; height: 22px; opacity: 0; transition: var(--transition-default); }
    .ucretsiz-deneme-package-content{ display: flex; flex-direction: column; gap: 3px; position: relative; z-index: 1; }
    .ucretsiz-deneme-package-quantity{ font-weight: 600; font-size: 18px; line-height: var(--lh-tight); color: #7844E4; }
    .ucretsiz-deneme-package-label{ font-weight: 600; font-size: 14px; line-height: var(--lh-normal); color: #666F94; opacity: 0.8; }
    .ucretsiz-deneme-package-type{ font-weight: 600; font-size: 14px; line-height: var(--lh-tight); color: #7844E4; margin-top: auto; }
    .ucretsiz-deneme-package-type-fast{ color: #28A745 !important; }
    /* Tasks Header */
    .ucretsiz-deneme-tasks-header{ display: flex; flex-direction: column; gap: 5px; width: 795px; max-width: 100%; }
    /* Task Items */
    .ucretsiz-deneme-task{ display: flex; justify-content: space-between; align-items: center; gap: 52px; padding: 17px; background: rgba(249, 250, 251, 0.7); border: 1px solid #E4E7EB; border-radius: 16px; min-height: 84px; }
    .ucretsiz-deneme-task-info{ display: flex; align-items: center; gap: 20px; flex: 1; }
    .ucretsiz-deneme-task-icon{ width: 50px; height: 50px; background: #7844E4; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
    .ucretsiz-deneme-task-content, .package-card-light .package-info{ display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
    .ucretsiz-deneme-task-title{ font-weight: 600; font-size: 18px; line-height: var(--lh-tight); color: #7844E4; margin: 0; }
    .ucretsiz-deneme-task-description{ font-weight: 600; font-size: 15px; line-height: var(--lh-tight); color: #666F94; margin: 0; }
    .ucretsiz-deneme-task-actions{ display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
    .task-btn{ display: flex; align-items: center; justify-content: center; gap: 10px; padding: 10px; border-radius: 14px; font-weight: 600; line-height: var(--lh-tight); cursor: pointer; transition: var(--transition-default); border: none; white-space: nowrap; }
    .task-btn-go{ background: #858CA9; color: #FFFFFF; width: 130px; height: 42px; }
    .task-btn-go:hover{ background: #6D7490; }
    .task-btn-complete{ background: transparent; color: #17B976; border: 1px solid #17B976; width: 141px; height: 42px; }
    .task-btn-complete:hover, .musteri-siparis-card:not(.musteri-siparis-card-active) .musteri-siparis-btn:hover{ background: rgba(23, 185, 118, 0.05); }
    .task-btn-complete-active{ background: #17B976; color: #FFFFFF; }
    .task-btn-complete-active:hover{ background: #12A066; }
    /* Bottom Actions */
    .deneme-bottom-actions{ display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
    .ucretsiz-deneme-timer-icon{ width: 50px; height: 50px; background: rgba(249, 250, 251, 0.7); border: 1px solid #E4E7EB; border-radius: 12px; display: flex; align-items: center; justify-content: center; }
    .ucretsiz-deneme-timer-icon svg{ width: 20px; height: 20.5px; }
    .ucretsiz-deneme-timer-content, .musteri-destek-ticket-info, .transaction-info{ display: flex; flex-direction: column; gap: 2px; }
    .ucretsiz-deneme-timer-label{ font-weight: 600; font-size: 14px; line-height: var(--lh-tight); color: #92A3B8; }
    .ucretsiz-deneme-timer-time{ font-weight: 600; line-height: var(--lh-tight); color: #33353E; }
    .task-back-btn{ width: 100px; height: 50px; background: rgba(249, 250, 251, 0.8); border: 1px solid #E4E7EB; border-radius: 12px; font-weight: 600; color: #92A3B8; cursor: pointer; transition: var(--transition-default); }
    .task-back-btn:hover{ background: rgba(249, 250, 251, 1); border-color: #D1D5DB; }
    .task-wait-btn{ width: 180px; height: 50px; background: #7844E4; border: none; border-radius: 12px; font-weight: 600; color: #FFFFFF; cursor: pointer; transition: var(--transition-default); display: flex; align-items: center; justify-content: center; gap: 6px; }
    .ucretsiz-deneme-cart-icon{ width: 19px; height: 19px; flex-shrink: 0; display: none;
    /* Hidden by default, shown only for paid packages */ }
    .task-wait-btn:hover, .ucretsiz-deneme-continue-btn:hover:not(:disabled), .ucretsiz-deneme-complete-btn:hover{ background: #6A35D0; }
    .task-wait-btn:disabled, .ucretsiz-deneme-continue-btn:disabled{ background: #858CA9; cursor: not-allowed; opacity: 0.6; }
    .task-wait-btn:disabled:hover{ background: #858CA9; }
    /* Step Indicator (Stepper) */
    .deneme-steps{ display: flex; align-self: stretch; border: 1px solid #E4E7EB; border-radius: 16px; overflow: hidden; }
    .step-wrapper{ display: flex; flex-direction: column; flex: 1; gap: 10px; padding: 16px 24px; position: relative; }
    .step-bg{ position: absolute; top: 5px; left: 5px; right: 5px; bottom: 5px; background: #7844E4; border-radius: 16px; z-index: 0; }
    .step-content{ display: flex; align-items: center; gap: 16px; position: relative; z-index: 1; }
    .step-nr{ width: 40px; height: 40px; border: 2px solid #FFFFFF; border-radius: 20px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
    .step-nr span{ font-weight: 600; line-height: 1.193em; color: #7844E4; }
    .step-nr-inactive{ background: transparent; border: 2px solid #666F94; }
    .step-info, .musteri-membership-info{ display: flex; flex-direction: column; flex: 1; }
    .ucretsiz-deneme-step-title{ font-weight: 600; font-size: 16px; line-height: 1.25em; color: #FFFFFF; text-align: left; margin-bottom: 0; }
    .ucretsiz-deneme-step-description{ font-weight: 600; font-size: 14px; line-height: 1.4285714em; color: #FFFFFF; text-align: left; margin-bottom: 0; }
    .ucretsiz-deneme-step-completed .step-nr, .step-nr-completed{ background: #7844E4; border-color: #7844E4; }
    /* Profile + Process Info Wrapper (Step 3) */
    .process-wrapper{ display: flex; align-self: stretch; gap: 16px; }
    .ucretsiz-deneme-profile-card{ width: 558px; height: 90px; padding: 20px; border: 1px solid #E4E7EB; border-radius: 16px; display: flex; align-items: center; gap: 10px; }
    .ucretsiz-deneme-profile-card .ucretsiz-deneme-profile-avatar{ width: 50px; height: 50px; border-radius: 50%; overflow: hidden; flex-shrink: 0; border: 1px solid #E4E7EB; }
    .ucretsiz-deneme-profile-card .ucretsiz-deneme-profile-info{ display: flex; flex-direction: column; gap: 4px; flex: 1; }
    .ucretsiz-deneme-profile-card .ucretsiz-deneme-profile-name{ font-weight: 600; line-height: 1.25em; color: #33353E; margin: 0; text-align: left; font-size: 16px; }
    .ucretsiz-deneme-profile-card .ucretsiz-deneme-profile-username{ font-weight: 600; font-size: 14px; line-height: 1.4285714em; color: #666F94; margin: 0; text-align: left; }
    .process-info-step3{ display: flex; align-items: center; gap: 16px; flex: 1; position: relative; }
    .process-card-3{ width: 175px; height: 90px; padding: 6px 12px; border: 1px solid #E4E7EB; border-radius: 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
    .process-card-3.process-active{ border: 2px solid #7844E4; background: linear-gradient(135deg, rgba(120, 68, 228, 0.03) 0%, rgba(120, 68, 228, 0.08) 100%); box-shadow: 0px 0px 0px 4px rgba(120, 68, 228, 0.12); animation: pulseCard 2.5s ease-in-out infinite; position: relative; transition: all 0.3s ease; }
    .process-card-3.process-active::before{ content: ''; position: absolute; inset: -2px; border-radius: 16px; padding: 2px; background: linear-gradient(135deg, #7844E4, #9966FF); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude; -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; opacity: 0.6; }
    .process-card-3.process-active:hover{ transform: translateY(-4px); box-shadow: 0px 4px 24px rgba(120, 68, 228, 0.25); }
    @keyframes pulseCard {
    0%, 100%{ box-shadow: 0px 0px 0px 4px rgba(120, 68, 228, 0.12); }
    50%{ box-shadow: 0px 0px 0px 8px rgba(120, 68, 228, 0.18), 0px 0px 20px rgba(120, 68, 228, 0.3); } }
    .process-content-3, .ucretsiz-deneme-process-content{ display: flex; flex-direction: column; align-self: stretch; gap: 5px; }
    .ucretsiz-deneme-step-3 .deneme-bottom-actions, .mesaj-user .mesaj-header{ justify-content: flex-end; }
    .process-label-3{ font-weight: 600; font-size: 14px; line-height: 1.4285714em; color: #666F94; text-align: center; margin: 0; }
    .process-value-3{ font-weight: 600; font-size: 16px; line-height: 1.25em; color: #7844E4; text-align: center; margin: 0; }
    .process-active .process-value-3{ font-size: 18px; font-weight: 600; animation: scaleText 2.5s ease-in-out infinite; text-shadow: 0px 2px 8px rgba(120, 68, 228, 0.3); }
    @keyframes scaleText {
    0%, 100%{ transform: scale(1); }
    50%{ transform: scale(1.05); } }
    .process-card-3 svg{ transition: transform 0.3s ease; filter: drop-shadow(0px 2px 4px rgba(120, 68, 228, 0.2)); }
    .process-active svg{ animation: bounceIcon 2.5s ease-in-out infinite; filter: drop-shadow(0px 4px 8px rgba(120, 68, 228, 0.4)); }
    @keyframes bounceIcon {
    0%, 100%{ transform: scale(1) translateY(0); }
    50%{ transform: scale(1.1) translateY(-2px); } }
    .process-arrow{ position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; gap: 10px; background: #7844E4; border-radius: 54px; animation: slideLeftRight 2s ease-in-out infinite; }
    @keyframes slideLeftRight {
    0%, 100%{ transform: translate(-60%, -50%); }
    50%{ transform: translate(-40%, -50%); } }
    /* Process Info (Before -> After) */
    .process-info{ display: flex; align-items: center; align-self: stretch; gap: 16px; position: relative; }
    .ucretsiz-deneme-process-card{ flex: 1; padding: 12px 20px 13px; border: 1px solid #E4E7EB; border-radius: 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
    .ucretsiz-deneme-process-card-after{ border: 1px solid #7844E4; }
    .ucretsiz-deneme-process-value{ font-weight: 600; line-height: 1.25em; color: #7844E4; text-align: left; }
    .ucretsiz-deneme-process-arrow{ position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; gap: 10px; padding: 10px; background: #7844E4; border-radius: 54px; }
    /* Banner */
    .ucretsiz-deneme-banner{ align-self: stretch; position: relative; background: #282D40; border-radius: 16px; overflow: visible; min-height: 208px; display: flex; margin-top: 30px; }
    .ucretsiz-deneme-banner-bg{ position: absolute; inset: 0; background-image: url('../images/ucretsiz-araclar/ucretsiz-banner-bg.png'); background-size: cover; background-position: center; background-repeat: no-repeat; border-radius: 16px; pointer-events: none; z-index: 0; }
    .deneme-banner{ display: flex; flex-direction: column; gap: 20px; padding: 30px 259px 30px 30px; flex: 1; z-index: 1; }
    .banner-text{ display: flex; flex-direction: column; align-self: stretch; gap: 11px; }
    .banner-subtitle{ font-weight: 600; color: #7A7F99; margin-bottom: 0; color: #FFFFFF; }
    .banner-title{ font-weight: 600; font-size: 15px; line-height: 1.201.49em; color: #4C5473; display: block; }
    .banner-actions{ display: flex; align-items: center; align-self: stretch; gap: 10px; }
    .deneme-coupons{ display: flex; justify-content: space-between; align-items: center; gap: 36px; padding: 12px 16px; background: #FFFFFF; border-radius: 12px; height: 49px; }
    .coupon-text{ font-weight: 600; line-height: 1.177em; color: #7A7F99; }
    .coupon-btn{ width: 31px; height: 31px; background: rgba(23, 185, 118, 0.1); border: none; border-radius: 7.44px; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: var(--transition-default); }
    .coupon-btn:hover{ background: rgba(23, 185, 118, 0.2); }
    .ucretsiz-deneme-packages-btn{ display: flex; justify-content: space-between; align-items: center; gap: 36px; padding: 12px 16px; background: #17B976; border: none; border-radius: 12px; width: 252px; height: 49px; cursor: pointer; transition: var(--transition-default); }
    .ucretsiz-deneme-packages-btn span{ font-weight: 600; line-height: 1.193em; color: #FFFFFF; }
    .ucretsiz-deneme-packages-btn:hover{ background: #15A868; }
    .ucretsiz-deneme-banner-image{ position: absolute; right: 4px; top: -59px; width: 290px; height: 284px; object-fit: contain; z-index: 2; }
    /* Continue Button */
    .ucretsiz-deneme-continue-btn, .ucretsiz-deneme-complete-btn{ width: 180px; height: 50px; background: #7844E4; border: none; border-radius: 12px; font-weight: 600; line-height: 1.5em; color: #FFFFFF; cursor: pointer; transition: var(--transition-default); display: flex; align-items: center; justify-content: center; gap: 6px; }
    /* Step Number Group (for checkmark overlay) */
    .step-nr-group{ position: relative; width: 40px; height: 40px; }
    /* Success Message */
    .ucretsiz-deneme-success-message{ display: flex; align-items: center; justify-content: center; gap: 10px; padding: 14px; background: rgba(23, 185, 118, 0.1); border: 1px solid #17B976; border-radius: 12px; width: 100%; }
    .ucretsiz-deneme-success-message span{ font-weight: 600; font-size: 15px; line-height: 1.2em; color: #17B976; text-align: left; }
    /* Complete Actions */
    .ucretsiz-deneme-complete-actions{ display: flex; justify-content: flex-end; align-items: center; align-self: stretch; width: 100%; }
    /* Complete Button */
    .ucretsiz-deneme-complete-btn:active{ transform: translateY(1px); }
    /* ========================================
           ÜCRETSIZ ARAÇLAR PARAGRAPH SECTIONS STYLES
           ======================================== */
    .paragraph-item{ display: flex; align-items: center; gap: 255px; max-width: 1084px; margin: 0 auto 45px; }
    .paragraph-item:last-child{ margin-bottom: 0; }
    .paragraph-item-reverse{ flex-direction: row-reverse; gap: 89px; }
    .paragraph-content{ display: flex; flex-direction: column; gap: 20px; width: 449px; flex-shrink: 0; }
    .paragraph-image{ flex: 1; display: flex; align-items: center; justify-content: center; }
    .paragraph-image img{ object-fit: contain; max-height: 508px; animation: floatingImage 3s ease-in-out infinite; }
    .paragraph-item:nth-child(3) .paragraph-image img, .sinirsiz-servis-tag-row:nth-child(3) .sinirsiz-servis-tag:nth-child(1){ animation-delay: 2s; }
    .paragraph-image img, .slide-image img, .yatay-panel img, .renkli-right img{border-radius: 40px;}
    /* ========================================
           SLIDER SECTION STYLES
           ======================================== */
    .slider-section{ padding: 60px 0; overflow: hidden; }
    /* Swiper Base Styles (Vanilla JS ile) */
    .araclar-slider{ position: relative; width: 100%; overflow: hidden; }
    .swiper-wrapper{ display: flex; transition: transform 0.5s ease; }
    .swiper-slide{ flex-shrink: 0; width: 100%; min-width: 100%; position: relative; }
    /* Slide Content */
    .slide-content{ border-radius: 24px; padding-right: 80px; padding-top: 20px; display: flex; align-items: center; justify-content: space-between; gap: 140px; position: relative; transition: background-color 0.6s ease; }
    .swiper-slide .slide-content{ padding: 60px 120px; height: 530px;}
    /* Slide Background Colors */
    .araclar-slider[data-active-slide="0"] .swiper-slide-active .slide-content{ background: #E1E9FF; }
    .araclar-slider[data-active-slide="1"] .swiper-slide-active .slide-content{ background: #FFBDDC; }
    .araclar-slider[data-active-slide="2"] .swiper-slide-active .slide-content{ background: #FDE1C3; }
    .araclar-slider[data-active-slide="3"] .swiper-slide-active .slide-content{ background: #C3ECFD; }
    /* Text Section */
    .slide-text{ display: flex; flex-direction: column; gap: 20px; max-width: 449px; flex-shrink: 0; }
    /* Slider Badge Colors - Based on Active Slide (darker than slide background) */
    .slider-section .badge i,
    .slider-section .badge svg{ color: #33353E; fill: #33353E; }
    .araclar-slider[data-active-slide="0"] .swiper-slide-active .badge,
    .araclar-slider[data-active-slide="0"] .swiper-slide-active .badge-group > div:not(:first-child){ background: #B8CCFF; }
    .araclar-slider[data-active-slide="1"] .swiper-slide-active .badge,
    .araclar-slider[data-active-slide="1"] .swiper-slide-active .badge-group > div:not(:first-child){ background: #FF9AC8; }
    .araclar-slider[data-active-slide="2"] .swiper-slide-active .badge,
    .araclar-slider[data-active-slide="2"] .swiper-slide-active .badge-group > div:not(:first-child){ background: #F5C494; }
    .araclar-slider[data-active-slide="3"] .swiper-slide-active .badge,
    .araclar-slider[data-active-slide="3"] .swiper-slide-active .badge-group > div:not(:first-child){ background: #8DD8F8; }
    .slide-text h2{ font-size: 36px; font-weight: 600; line-height: var(--lh-tight); letter-spacing: -0.02em; color: #33353E; margin: 0; max-width: 440px; }
    .slide-text p{ font-size: 18px; font-weight: 600; line-height: var(--lh-normal); color: #666F94; margin: 0; max-width: 440px; }
    /* Image Wrapper */
    .slide-image{ flex: 1; display: flex; align-items: center; justify-content: flex-end; position: relative; }
    .slide-image img{ object-fit: contain; }
    /* Custom Pagination */
    .slider-pagination{ position: absolute; bottom: 48px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 14px; padding: 24px; background: rgba(255, 255, 255, 0.9); border-radius: 86px; z-index: 10; }
    .slider-pagination .swiper-pagination-bullet{ width: 10px; height: 10px; background: #A3BCFF; opacity: 1; border-radius: 5000px; margin: 0 !important; transition: width 0.3s ease, background 0.3s ease; }
    .slider-pagination .swiper-pagination-bullet-active{ width: 60px; background: #A3BCFF; }
    /* Pagination Colors Based on Active Slide */
    .araclar-slider[data-active-slide="0"] .swiper-pagination-bullet, .araclar-slider[data-active-slide="0"] .swiper-pagination-bullet-active{ background: #A3BCFF; }
    .araclar-slider[data-active-slide="1"] .swiper-pagination-bullet, .araclar-slider[data-active-slide="1"] .swiper-pagination-bullet-active{ background: #FFB8D9; }
    .araclar-slider[data-active-slide="2"] .swiper-pagination-bullet, .araclar-slider[data-active-slide="2"] .swiper-pagination-bullet-active{ background: #F5CDA3; }
    .araclar-slider[data-active-slide="3"] .swiper-pagination-bullet, .araclar-slider[data-active-slide="3"] .swiper-pagination-bullet-active{ background: #A8E4FC; }
    /* Dot Fix */
    .swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction{ left: 44% !important; width: fit-content !important; bottom: 30px !important; }
    /* ========================================
           SCROLL ANIMATIONS STYLES
           ======================================== */
    /* Animation initial state */
    .animate-on-scroll{ opacity: 0; transform: translateY(30px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; }
    /* Animation active state */
    .animate-on-scroll.is-visible{ opacity: 1; transform: translateY(0); }
    /* Staggered animation delays for child elements */
    .animate-on-scroll.delay-100{ transition-delay: 0.1s; }
    .animate-on-scroll.delay-200{ transition-delay: 0.2s; }
    .animate-on-scroll.delay-300{ transition-delay: 0.3s; }
    .animate-on-scroll.delay-400{ transition-delay: 0.4s; }
    /* ========================================
           HAKKIMIZDA SECTION LAYOUT
           ======================================== */
    .hakkimizda-section .section-content{ display: grid; grid-template-columns: 1fr 2fr; gap: 20px; margin-top: 20px; }
    /* ========================================
           HAKKIMIZDA SLIDER
           ======================================== */
    #hakkimizda-slider{ padding: 30px 0; }
    #hakkimizda-slider .slider-container{ display: flex; justify-content: center; align-items: center; gap: 20px; }
    #hakkimizda-slider .slide{ position: relative; background-color: color-mix(in srgb, var(--slide-color) 20%, white); border-radius: 24px; overflow: hidden; transition: all 0.3s ease-out; display: flex; flex-direction: column; transform-origin: center; cursor: pointer; }
    #hakkimizda-slider .slide.active{ width: 675px; height: 500px; cursor: default; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12); transform: scale(1); opacity: 1; z-index: 2; }
    #hakkimizda-slider .slide:not(.active){ width: 230px; height: 500px; opacity: 0.95; transform: scale(0.98); z-index: 1; }
    #hakkimizda-slider .hakkimizda-content{ position: relative; width: 100%; height: 100%; flex: 1; }
    #hakkimizda-slider .slide.active .hakkimizda-content{ display: flex; flex-direction: row; align-items: flex-start; }
    #hakkimizda-slider .slide.active .hakkimizda-content > .slide-text{ display: flex; flex-direction: column; gap: 24.66px; flex-shrink: 0; padding: 60px 0 0 40px; width: 290px; opacity: 1; }
    #hakkimizda-slider .slide.active .hakkimizda-content > .slide-image{ display: flex; opacity: 1; }
    #hakkimizda-slider .slide:not(.active) .hakkimizda-content{ display: flex; flex-direction: column; gap: 14px; padding: 0; text-align: center; align-items: center; justify-content: flex-start; }
    #hakkimizda-slider .slide:not(.active) .hakkimizda-content > .slide-text{ display: flex; flex-direction: column; gap: 14px; padding: 30px 20px 0; text-align: center; align-items: center; justify-content: flex-start; width: 100%; }
    #hakkimizda-slider .slide-text{ display: none; }
    #hakkimizda-slider .slide-text span{ font-size: 28px; font-weight: 900; line-height: 1.43; margin: 0; transform: translateY(20px); color: color-mix(in srgb, var(--slide-color) 70%, white); }
    #hakkimizda-slider .slide-text h2{ font-size: 36px; font-weight: 600; line-height: 1.11; margin: 0; transform: translateY(20px); color: var(--slide-color); }
    #hakkimizda-slider .slide-text p{ font-size: 16px; font-weight: 500; line-height: 1.5; margin: 0; max-width: 270.4px; transform: translateY(20px); color: var(--slide-color); }
    #hakkimizda-slider .slide:not(.active) .hakkimizda-content > .slide-text span{ font-size: 15px; font-weight: 600; line-height: 1.28; margin: 0; transition: opacity 0.3s ease; opacity: 1; display: block; }
    #hakkimizda-slider .slide:not(.active) .hakkimizda-content > .slide-text h2{ font-size: 22px; font-weight: 600; line-height: 1.12; margin: 0; transition: opacity 0.3s ease; opacity: 1; display: block; }
    #hakkimizda-slider .slide:not(.active) .hakkimizda-content > .slide-text p{ display: none; }
    #hakkimizda-slider .hakkimizda-content > .slide-image{ position: relative; display: flex; align-items: flex-end; justify-content: center; overflow: visible; }
    #hakkimizda-slider .hakkimizda-content > .slide-image img{ transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1); }
    #hakkimizda-slider .slide.active .hakkimizda-content > .slide-image{ position: absolute; right: 0; top: 44px; width: 290.67px; height: 436px; }
    #hakkimizda-slider .slide.active .hakkimizda-content > .slide-image img{ position: absolute; bottom: 0; right: 0; width: auto; height: 436px; object-fit: cover; opacity: 1; }
    #hakkimizda-slider .slide:not(.active) .hakkimizda-content > .slide-image{ position: relative; flex: 1; display: flex; align-items: center; justify-content: center; margin-top: auto; }
    #hakkimizda-slider .slide:not(.active) .hakkimizda-content > .slide-image img{ width: auto; height: 100%; max-height: 363px; object-fit: contain; transform: translateY(5px); opacity: 1; }
    #hakkimizda-slider .slide-footer{ width: 100%; height: 20px; flex-shrink: 0; background-color: var(--slide-color); }
    /* ========================================
           MENU CARD (HAKKIMIZDA PAGE)
           ======================================== */
    .menu-card{ background-color: #ffffff; border-radius: 20px; padding: 30px; display: flex; flex-direction: column; gap: 16px; position: sticky; top: 174px; align-self: flex-start; }
    .menu-header h3, .iletisim-info-header h3, .iletisim-info-card .iletisim-info-header h3{ font-weight: 600; font-size: 18px; line-height: 1.21; color: #33353e; margin: 0; }
    .menu-header p, .iletisim-info-header p, .siparis-header p, .odeme-ozeti-header p{ font-weight: 600; font-size: 15px; line-height: 1.18; color: #7a7f99; margin: 0; }
    .menu-image{ width: 100%; height: 401.61px; border-radius: 37.07px; overflow: hidden; }
    .menu-item{ width: 100%; height: 45px; border-radius: 14px; border: 1px solid rgba(234, 234, 237, 0.5); background-color: #ffffff; display: flex; align-items: center; justify-content: space-between; padding: 0 14px; font-weight: 600; font-size: 14px; line-height: 1.19; color: #666f94; cursor: pointer; transition: all 0.3s ease; text-decoration: none; }
    .menu-item:hover{ border-color: #7844e4; background-color: rgba(120, 68, 228, 0.05); }
    .menu-item.active{ background-color: rgba(120, 68, 228, 0.1); border-color: #7844e4; color: #7844e4; }
    .menu-item svg{ width: 14px; height: 14px; display: none; }
    /* ========================================
           HAKKIMIZDA CONTENT CARD (HAKKIMIZDA PAGE)
           ======================================== */
    .content-card, .iletisim-info-card{ background-color: #ffffff; border-radius: 20px; padding: 30px; display: flex; flex-direction: column; gap: 30px; }
    .text-block h2{ font-weight: 600; font-size: 24px; line-height: var(--lh-tight); color: #33353E; margin: 0; }
    .text-block p{ line-height: 1.375; color: #7a7f99; margin: 0; }
    /* Comment Badge */
    .comment-badge{ display: flex; flex-direction: row; justify-content: center; align-items: center; padding: 16px; gap: 10px; background: #FFFFFF; border: 1px dashed #FFFFFF; border-radius: 16px; z-index: 2; }
    .comment-badge > div:first-child{ display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 10px; background: #7844E4; border-radius: 12px; flex-shrink: 0; }
    .comment-badge > div:first-child svg{ width: 20px; height: 20px; }
    .comment-badge > div:first-child svg path{ fill: #FFFFFF; }
    .comment-quote > div:first-child svg path{ fill: rgba(120, 68, 228, 0.1); }
    /* ========================================
           İLETİŞİM BİLGİLERİ CARD (İLETİŞİM PAGE)
           ======================================== */
    .iletisim-sticky{ position: sticky; top: 20px; align-self: flex-start; display: flex; flex-direction: column; gap: 30px; }
    .iletisim-icon-wrapper{ width: 50px; height: 61px; border-radius: 15px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
    .iletisim-icon-green{ background-color: #17b976; }
    .iletisim-icon-pink{ background-color: #f02468; }
    .iletisim-icon-purple{ background-color: #7844e4; }
    .iletisim-icon-orange{ background-color: #f45100; }
    .iletisim-info-text, .musteri-user-info, .stat-content > div:nth-child(2){ display: flex; flex-direction: column; gap: 5px; flex: 1; }
    .iletisim-info-text h4{ font-weight: 600; margin: 0; }
    .iletisim-info-text p{ font-weight: 600; font-size: 15px; line-height: 1.2; color: #7a7f99; margin: 0; }
    .iletisim-info-divider{ width: 100%; height: 1px; background-color: rgba(234, 234, 237, 0.5); }
    /* ========================================
           İLETİŞİM INFO CARD (İLETİŞİM PAGE)
           ======================================== */
    .iletisim-info-card{ background-color: #ffffff; border-radius: 20px; padding: 30px; display: flex; flex-direction: column; gap: 16px; }
    .iletisim-info-card .iletisim-info-header{ display: flex; align-items: start; gap: 10px; }
    .iletisim-info-card .iletisim-info-header svg{ width: 20.22px; height: 23px; flex-shrink: 0; }
    .iletisim-info-card:nth-child(2) .iletisim-info-header{ flex-direction: row; }
    .iletisim-info-box{ background-color: rgba(249, 250, 251, 0.7); border: 2px solid rgba(234, 234, 237, 0.5); border-radius: 12px; padding: 16px; display: flex; align-items: center; }
    .iletisim-info-box p{ font-weight: 600; font-size: 14px; line-height: 1.57; color: #666f94; margin: 0; }
    /* ========================================
           SERVISLER PLATFORM SECTION
           ======================================== */
    .platform-section{ padding: 10px 0 80px 0; }
    .service-card{ display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; max-width: 443px; margin: 0 auto; background: #FFFFFF; border-top: 4px solid transparent; border-radius: 20px; padding: 20px; }
    /* Border colors matching platform colors */
    .service-card:has(.platform-card-instagram){ border-top-color: #E1306C; }
    .service-card:has(.platform-card-twitter){ border-top-color: #1DA1F2; }
    .service-card:has(.platform-card-spotify){ border-top-color: #29D266; }
    .service-card:has(.platform-card-facebook){ border-top-color: #1877F2; }
    .service-card:has(.platform-card-twitch){ border-top-color: #9752FF; }
    .service-card:has(.platform-card-discord){ border-top-color: #5562EA; }
    .service-card:has(.platform-card-pinterest){ border-top-color: #E00022; }
    .service-header{ position: relative; display: flex; align-items: center; justify-content: flex-start; width: 100%; height: 88px; border-radius: 18px; padding: 20px; }
    .service-header > div:first-child{ position: absolute; left: 16px; top: 16px; width: 56px; height: 56px; background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(4px); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 15px; display: flex; align-items: center; justify-content: center; }
    .service-header h3{ font-weight: 600; font-size: 18px; line-height: 1.19; color: #FFFFFF; margin: 0; text-align: left; position: absolute; left: 84px; top: 50%; transform: translateY(-50%); }
    .service-header h3 .platform-service{ font-weight: 400; font-size: 16px; font-style: normal; }
    .service-body, .price-table{ display: flex; flex-direction: column; gap: 10px; width: 100%; }
    .hidden-items{ display: flex; flex-direction: column; gap: 10px; max-height: 0; overflow: hidden; transition: max-height 0.4s ease-in-out, opacity 0.4s ease-in-out; opacity: 0; }
    .service-body.expanded .hidden-items{ max-height: 1000px; opacity: 1; }
    .service-item{ display: flex; align-items: center; justify-content: space-between; height: 52px; background: #F6F7FB; border: 1px dashed #EAEAED; border-radius: 14px; padding: 0 18px 0 9.8px; transition: var(--transition-default); cursor: pointer; }
    .service-item:hover{ background: #EBEEF3; border-color: #D5D7DC; }
    .service-item > div:first-child, .price-package-info{ display: flex; align-items: center; gap: 11px; }
    .service-item > div:first-child > div:first-child{ width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
    /* Icon background colors for each platform */
    .service-item span{ font-weight: 600; line-height: 1.19; color: #666F94; }
    .show-more{ font-weight: 600; line-height: 1.19; color: #666F94; text-align: center; display: flex; align-items: center; justify-content: center; gap: 8px; }
    .show-more:hover svg path{ stroke: var(--primary-purple); }
    .service-body.expanded .show-more svg{ transform: rotate(180deg); transition: transform 0.3s ease; }
    /* ========================================
           ÖDEME EKRANI SECTION STYLES
           ======================================== */
    .odeme-ekrani-section{ background: transparent; padding: 0 0 80px 0; }
    /* Right Column - Sticky */
    .odeme-summary-sticky{ position: sticky; top: 20px; }
    /* Card Base Styles */
    .odeme-card, .odeme-summary-card{ background: #FFFFFF; border-radius: 20px; padding: 30px; display: flex; flex-direction: column; gap: 16px; }
    /* Card Header */
    .odeme-card-title{ font-weight: 600; font-size: 18px; line-height: 1.21; color: #33353E; margin: 0; }
    /* Bank Info Box */
    .odeme-bank-box{ background: linear-gradient(128deg, #F8FAFF 0%, #F1F5F9 100%); border: 1px solid #E0E7FF; border-radius: 20px; padding: 24px 30px; height: 94px; display: flex; align-items: center; }
    .odeme-bank-header, .musteriler-nav-arrows{ display: flex; align-items: center; gap: 30px; }
    .odeme-bank-name{ font-weight: 600; line-height: 1.6; letter-spacing: -0.025em; color: #33353E; margin: 0; }
    .odeme-bank-account{  font-weight: 400; font-size: 14px; line-height: 1.6; letter-spacing: -0.025em; color: #666F94; margin: 0; }
    /* Steps Container */
    .odeme-steps-container{ display: flex; flex-direction: row; align-items: center; gap: 30px; }
    /* Step Card */
    .odeme-step-card{ background: linear-gradient(128deg, #FEFEFE 0%, #F9FAFB 100%); border: 1px solid #E5E7EB; border-radius: 12px; padding: 29px; width: 427px; min-height: 530px; display: flex; flex-direction: column; gap: 16px; position: relative; overflow: hidden; }
    .odeme-step-card.odeme-step-active{ background: linear-gradient(128deg, #F8FAFF 0%, #F1F5F9 100%); border: 1px solid #E0E7FF; }
    /* Gradient Bar on Active Card */
    .odeme-step-gradient{ position: absolute; left: 0; top: 0; width: 4px; height: 100%; background: linear-gradient(180deg, #3B82F6 0%, #1D4ED8 100%); border-radius: 2px 0px 0px 2px; }
    /* Step Header */
    .odeme-step-badge-wrapper{ display: flex; align-items: center; }
    .odeme-step-number-bg{ width: 20px; height: 20px; background: #3B82F6; border-radius: 10px; display: flex; align-items: center; justify-content: center; }
    .odeme-step-number{  font-weight: 600; font-size: 12px; line-height: 1.6; letter-spacing: 0.04em; text-transform: uppercase; color: #FFFFFF; }
    .odeme-step-label{  font-weight: 600; font-size: 14px; line-height: 1.6; letter-spacing: 0.036em; text-transform: uppercase; color: #3B82F6; }
    .odeme-step-title{  font-weight: 600; font-size: 18px; line-height: 1.6; letter-spacing: -0.025em; color: #111827; margin: 0; }
    /* Info Fields */
    .odeme-info-label{  font-weight: 600; font-size: 14px; line-height: 1.6; letter-spacing: 0.036em; text-transform: uppercase; color: #374151; }
    .odeme-info-value-wrapper{ background: #FFFFFF; border: 1px solid #E5E7EB; border-radius: 8px; padding: 10px 17px; height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
    .odeme-info-value{  font-weight: 600; font-size: 14px; line-height: 1.6; letter-spacing: 0.007em; color: #111827; flex: 1; }
    .odeme-info-value-bold{ font-weight: 600; font-size: 15px; }
    /* Copy Button */
    .odeme-copy-btn{ width: 32px; height: 32px; background: #3B82F6; border: none; border-radius: 6px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: var(--transition-default); flex-shrink: 0; }
    .odeme-copy-btn:hover{ background: #1D4ED8; transform: scale(1.05); }
    /* Warning Box */
    .odeme-warning-box{ background: #F0F9FF; border: 1px solid #BFDBFE; border-radius: 8px; padding: 15px; display: flex; align-items: flex-start; gap: 17px; position: relative; }
    .odeme-warning-text{  font-weight: 600; font-size: 14px; line-height: 1.6; letter-spacing: -0.025em; color: #1E40AF; margin: 0; }
    .odeme-warning-text strong, .price-row .fiyat{ font-weight: 600; }
    /* Form Inputs */
    .odeme-input-wrapper{ background: #FFFFFF; border: 1px solid #D1D5DB; border-radius: 8px; padding: 15px 17px; height: 47px; display: flex; align-items: center; transition: var(--transition-default); cursor: text; }
    .odeme-input-wrapper:focus-within{ border-color: #3B82F6; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); }
    .odeme-input{ flex: 1; border: none; background: transparent;  font-weight: 400; font-size: 14px; line-height: 1.21; color: #111827; outline: none; width: 100%; min-height: 30px; }
    .odeme-input::placeholder{ color: #9CA3AF; }
    /* Submit Button */
    .odeme-submit-btn{ width: 100%; height: 50px; background: linear-gradient(172deg, #3B82F6 0%, #1D4ED8 100%); box-shadow: 0px 4px 12px rgba(59, 130, 246, 0.3); border: none; border-radius: 8px; font-family: Arial, sans-serif; font-weight: 600; line-height: 1.15; letter-spacing: -0.025em; color: #FFFFFF; cursor: pointer; transition: var(--transition-default); position: relative; overflow: hidden; }
    .odeme-submit-btn::before{ content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transition: left 0.6s; }
    .odeme-submit-btn:hover{ background: linear-gradient(172deg, #1D4ED8 0%, #1E3A8A 100%); transform: translateY(-2px); box-shadow: 0px 8px 20px rgba(59, 130, 246, 0.4); }
    /* Ucretsiz Deneme Step 3 Responsive */
    /* Summary Card Specific Styles */
    .odeme-summary-divider{ width: 100%; height: 1px; background: rgba(234, 234, 237, 0.5); border-radius: 20px; }
    .odeme-summary-label{ font-weight: 600; font-size: 15px; line-height: 1.19; color: #7A7F99; width: 148px; }
    .odeme-summary-value{ font-weight: 600; font-size: 15px; line-height: 1.19; color: #33353E; width: 198px; text-align: right; }
    /* ========================================
           SIPARIS SORGULA SECTION
           ======================================== */
    /* Siparis Container */
    .siparis-detay{ display: flex; flex-direction: column; gap: 10px; padding: 30px; border-radius: 20px; background: #FFFFFF; margin-bottom: 72px; }
    .siparis-card{ display: flex; flex-direction: column; gap: 10px; padding: 20px; background: rgba(249, 250, 251, 0.7); border: 2px solid rgba(234, 234, 237, 0.5); border-radius: 20px; }
    .card-header > div:first-child{ display: flex; align-items: center; justify-content: center; height: 70px; border-radius: 12px; flex-shrink: 0; }
    .siparis-card .card-header > div:first-child{ width: 60px; }
    .card-info{ display: flex; flex-direction: column; gap: 0; flex: 1; min-width: 0; }
    .card-info h4{ font-weight: 600; line-height: 1.21; color: var(--primary-purple); margin: 0; }
    .card-info p:nth-of-type(1){ font-weight: 600; color: var(--text-primary); margin: 0; }
    .card-info p:last-child{ font-weight: 600; font-size: 12px; line-height: 1.5; color: var(--text-dark-muted); margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .card-divider{ height: 2px; background: rgba(234, 234, 237, 0.5); }
    .card-footer{ display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; }
    .card-stat{ display: flex; flex-direction: column; gap: 1px; }
    .card-stat span:first-child{ font-weight: 600; font-size: 14px; line-height: 1.29; color: var(--text-primary); }
    .card-stat span:last-child{ font-weight: 400; font-size: 14px; line-height: 1.29; color: #7a7f99; }
    .card-badge{ display: flex; justify-content: center; align-items: center; padding: 10px 12px; background: #24bb3f; border-radius: 8px; }
    .card-badge span{ font-weight: 600; font-size: 14px; line-height: 1.29; color: #ffffff; white-space: nowrap; }
    .card-badge-success{ background: #24bb3f; }
    .card-badge-warning{ background: #f59e0b; }
    .card-badge-danger{ background: #ef4444; }
    .card-badge-pending{ background: #6b7280; }
    .card-badge-processing{ background: #3b82f6; }
    .card-badge-partial{ background: #8b5cf6; }
    .card-badge-canceled{ background: #dc2626; }
    /* Siparis Card Icon Styling */
    .siparis-card .card-header > div:first-child i{ font-size: 24px; color: #ffffff; }
    .siparis-card .card-header > div:first-child{ background: #7844E4; }
    .card-header{ display: flex; flex-direction: row; align-items: center; gap: 20px; }
    .card-stats{ display: flex; flex-direction: row; align-items: center; gap: 20px; }
    .sepet-header h2, .siparis-header h3, .odeme-ozeti-header h3{ font-weight: 600; font-size: 18px; line-height: 1.21; margin: 0; }
    .sepet-payment__options{ display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
    /* Siparis Ozeti Card (Payment Summary) */
    .odeme-ozeti{ display: flex; flex-direction: column; gap: 16px; padding: 30px; background: #ffffff; border-radius: 20px; position: sticky; top: 40px; }
    .odeme-ozeti-divider{ height: 1px; background: rgba(234, 234, 237, 0.5); }
    .odeme-ozeti-row span:first-child{ font-weight: 600; font-size: 15px; line-height: 1.18; color: #7a7f99; width: 148px; flex-shrink: 0; }
    .odeme-ozeti-row span:last-child{ font-weight: 600; font-size: 15px; line-height: 1.19; color: var(--text-primary); text-align: right; flex: 1; overflow: hidden; text-overflow: ellipsis; }
    /* Responsive Styles */
    /* Telafi Status Badge - Twitter Blue Variant */
    .telafi-talebi-page .card-badge{ background: #1da1f2; }
    /* ========================================
           PAKET ADIMLAR SECTION
           ======================================== */
    .paket-adimlar-section{ padding: 30px 0 80px 0; background: url('../images/paket-adimlar/filler-bg.png'); background-size: cover; background-position: center; background-repeat: no-repeat; min-height: auto; display: flex; align-items: flex-start; justify-content: center; position: relative; z-index: 1; }
    .paket-adimlar-wrapper{ display: flex; gap: 0; flex-direction: column; align-items: flex-start; width: fit-content; margin: 0 auto; position: relative; z-index: 1001; }
    /* Left Card */
    .adim-card{ display: flex; flex-direction: column; gap: 20px; padding: 30px; background-color: #ffffff; border: 2px solid #eaeaed; border-top: none; border-radius: 20px 20px 20px 20px; width: 962px; }
    /* Order Step - Figma (gap 16px based on design) */
    .order-step{ display: flex; flex-direction: column; gap: 16px; }
    /* Back Button - Figma: 40px height, padding 6px 10px, gap 5px */
    .order-back-btn{ display: inline-flex; align-items: center; gap: 5px; padding: 6px 10px; height: 40px; background: #F6F7FB; border: none; border-radius: 12px; cursor: pointer; width: fit-content; text-decoration: none; transition: 0.2s; }
    .order-back-btn:hover{ background: #EAEAED; }
    .order-back-btn i{ font-size: 14px; color: #7A7F99; }
    .order-back-btn span{ font-weight: 500; font-size: 14px; color: #7A7F99; }
    /* Order Header - Figma: gap 5px */
    .order-header{ display: flex; flex-direction: column; gap: 5px; }
    .order-header h3{ font-weight: 600; font-size: 16px; line-height: 19px; color: #33353E; margin: 0; }
    .order-header p{ font-weight: 500; font-size: 15px; line-height: 18px; color: #7A7F99; margin: 0; }
    .order-qty-change{ font-weight: 500; font-size: 14px; color: #7844E4; }
    .order-qty-change del{ opacity: 0.5; color: #33353E; }
    /* Order Input Box - Figma: 66px height, padding 15px, gap 15px, border-radius 15px */
    .order-input-box{ display: flex; align-items: center; gap: 15px; padding: 15px; height: 66px; border: 2px solid rgba(234, 234, 237, 0.5); border-radius: 15px; transition: 0.2s; cursor: text; box-sizing: border-box; background: #fff; }
    .order-input-box:focus-within{ border-color: #7844E4; }
    .order-input-icon{ width: 20px; height: 20px; color: #666F94; flex-shrink: 0; }
    .order-input-divider{ width: 1px; height: 20px; background: rgba(102, 111, 148, 0.1); border-radius: 27px; }
    .order-input-content{ position: relative; flex: 1; height: 36px; }
    .order-input-label{ position: absolute; left: 0; top: 50%; transform: translateY(-50%); font-weight: 500; font-size: 15px; color: #666F94; pointer-events: none; transition: all 0.2s ease; }
    .order-input-field{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; border: none; outline: none; background: transparent; font-weight: 600; font-size: 15px; color: #33353E; padding-top: 10px; box-sizing: border-box; }
    .order-input-field::placeholder{ color: transparent; }
    /* Floating label - focus veya dolu oldugunda yukari kay */
    .order-input-field:focus + .order-input-label,
    .order-input-field:not(:placeholder-shown) + .order-input-label{ top: -3px; transform: translateY(0); font-size: 12px; color: #7844E4; }
    /* Order Control Button - Figma */
    .order-control-btn{ display: none; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 50px; background: rgba(120, 68, 228, 0.1); border: none; border-radius: 12px; cursor: pointer; transition: 0.2s; }
    .order-control-btn.show{ display: flex; }
    .order-control-btn:hover{ background: rgba(120, 68, 228, 0.15); }
    .order-control-btn .cnt{ display: flex; align-items: center; gap: 8px; }
    .order-control-btn field{ font-weight: 600; font-size: 16px; color: #7844E4; }
    .order-control-icon{ width: 18px; height: 18px; color: #7844E4; }
    /* Order Warning - Figma */
    .order-warning{ display: flex; align-items: flex-start; gap: 10px; padding: 15px; background: rgba(249, 250, 251, 0.7); border: 1px solid #E4E7EB; border-radius: 12px; box-sizing: border-box; }
    .order-warning p{ font-weight: 500; font-size: 14px; line-height: 1.5; color: #666F94; margin: 0; }
    .order-warning-icon{ width: 18px; height: 18px; color: #7A7F99; flex-shrink: 0; margin-top: 2px; }
    /* Order Status - Figma: 50px height, border-radius 12px */
    .order-status{ display: flex; align-items: center; justify-content: center; height: 50px; border-radius: 12px; }
    .order-status span{ font-weight: 600; font-size: 16px; }
    .order-status-success{ background: rgba(120, 68, 228, 0.1); }
    .order-status-success span{ color: #7844E4; }
    /* Order Account Card - Figma: 142px height, padding 15px, gap 10px, border-radius 16px */
    .order-account{ display: flex; flex-direction: column; gap: 10px; padding: 15px; background: rgba(249, 250, 251, 0.7); border: 1px solid #E4E7EB; border-radius: 16px; }
    .order-account-top{ display: flex; align-items: center; gap: 10px; }
    .order-account-avatar{ width: 50px; height: 50px; border-radius: 50%; overflow: hidden; border: 1px solid #E4E7EB; flex-shrink: 0; }
    .order-account-avatar img{ width: 100%; height: 100%; object-fit: cover; }
    .order-account-info{ display: flex; flex-direction: column; gap: 4px; }
    .order-account-info h4{ font-weight: 600; font-size: 16px; line-height: 20px; color: #33353E; margin: 0; }
    .order-account-info p{ font-weight: 500; font-size: 14px; line-height: 20px; color: #666F94; margin: 0; }
    .order-account-divider{ width: 100%; height: 1px; background: rgba(102, 111, 148, 0.1); border-radius: 20px; }
    .order-account-stats{ display: flex; align-items: center; gap: 20px; }
    .order-account-stat{ display: flex; flex-direction: column; }
    .order-account-stat .stat-label{ font-weight: 500; font-size: 14px; line-height: 19px; color: #666F94; }
    .order-account-stat .stat-value{ font-weight: 600; font-size: 16px; line-height: 20px; color: #33353E; }
    .order-account-stat-divider{ width: 1px; height: 30px; background: rgba(102, 111, 148, 0.2); border-radius: 20px; }
    .order-account-badge{ display: flex; align-items: center; justify-content: center; height: 26px; padding: 0 10px; background: rgba(23, 185, 118, 0.1); border-radius: 26px; font-weight: 600; font-size: 13px; color: #17B976; white-space: nowrap; }
    /* Order Continue Button - Figma */
    .order-continue-btn{ display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 50px; background: #7844E4; border: none; border-radius: 12px; cursor: pointer; transition: 0.2s; }
    .order-continue-btn:hover{ background: #6835CC; }
    .order-continue-btn span{ font-weight: 600; font-size: 16px; color: #fff; }
    .order-continue-btn i{ font-size: 14px; color: #fff; }
    /* Order Submit Button - Figma: 50px height, border-radius 12px, gap 10px */
    .order-submit-btn{ display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 50px; background: #FF5601; border: none; border-radius: 12px; cursor: pointer; transition: 0.2s; }
    .order-submit-btn:hover{ background: #E64E01; }
    .order-submit-btn.passive{ opacity: 0.5; pointer-events: none; }
    .order-submit-btn span{ font-weight: 600; font-size: 16px; color: #fff; }
    .order-submit-icon{ width: 22px; height: 22px; color: #fff; }
    /* Order Bottom Bar - Toplam Fiyat + Sepete Ekle yan yana */
    .order-bottom-bar{ display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 8px; }
    .order-total{ display: flex; align-items: center; gap: 12px; }
    .order-total-icon{ display: flex; align-items: center; justify-content: center; width: 50px; height: 50px; background: #7844E4; border-radius: 12px; flex-shrink: 0; }
    .order-total-icon-svg{ width: 24px; height: 24px; color: #fff; }
    .order-total-text{ display: flex; flex-direction: column; gap: 2px; }
    .order-total-label{ font-weight: 500; font-size: 14px; color: #7A7F99; }
    .order-total-price{ font-weight: 600; font-size: 20px; color: #33353E; }
    .order-cart-btn{ display: flex; align-items: center; justify-content: center; gap: 10px; height: 50px; padding: 0 32px; background: #FF5601; border: none; border-radius: 12px; cursor: pointer; transition: 0.2s; white-space: nowrap; }
    .order-cart-btn:hover{ background: #E64E01; }
    .order-cart-btn span{ font-weight: 600; font-size: 16px; color: #fff; }
    .order-cart-icon{ width: 22px; height: 22px; color: #fff; }
    /* Back Button (eski) */
    .back-btn{ display: flex; align-items: center; justify-content: center; gap: 5px; padding: 6px 10px; height: 40px; background-color: #f6f7fb; border: none; border-radius: 12px; cursor: pointer; transition: var(--transition-default); width: fit-content; }
    .back-btn svg{ width: 17px; height: 17px; transform: rotate(180deg); }
    .back-btn span{ font-weight: 600; font-size: 14px; line-height: 1.177; color: #7a7f99; }
    .back-btn:hover{ background-color: #ededf2; }
    /* Service Info (eski) */
    .adim-info{ display: flex; flex-direction: column; align-items: start; gap: 5px; width: 425px; }
    .adim-info h3, .upsell-header h3{ font-weight: 600; font-size: 18px; line-height: 1.209; color: #33353e; margin: 0; }
    .adim-info p, .upsell-header p{ font-weight: 600; font-size: 15px; line-height: 1.177; color: #7a7f99; margin: 0; }
    /* Input Wrapper */
    .paket-adimlar-input-wrapper{ display: flex; align-items: center; gap: 15px; padding: 15px 10px 15px 15px; border: 2px solid rgba(234, 234, 237, 0.5); border-radius: 15px; width: 100%; position: relative; transition: var(--transition-default); height: 66px; cursor: text; }
    .paket-adimlar-input-wrapper:focus-within{ border-color: #7844e4; }
    .paket-divider{ width: 1px; height: 30px; background-color: rgba(102, 111, 148, 0.1); border-radius: 27px; }
    .paket-adimlar-input-content{ display: flex; flex-direction: column; gap: 0; flex: 1; position: relative; }
    .paket-adimlar-input-label{ font-weight: 600; font-size: 14px; line-height: 1.429; color: #666f94; opacity: 0.8; margin: 0; position: absolute; left: 0; top: 50%; transform: translateY(-50%); transition: all 0.2s ease; pointer-events: none; white-space: nowrap; }
    /* Floating label when input has value or is focused */
    .paket-adimlar-input-wrapper.has-value .paket-adimlar-input-label, .paket-adimlar-input-wrapper:focus-within .paket-adimlar-input-label{ top: 3px; font-size: 12px; opacity: 0.8; }
    .paket-adimlar-input-field{ font-weight: 600; font-size: 16px; line-height: 1.25; color: #33353e; border: none; outline: none; background: transparent; padding: 0; width: 100%; transform: translateY(8px); min-height: 30px; }
    /* Warning Message */
    .paket-warning{ display: flex; align-items: center; gap: 10px; padding: 14px; height: 50px; background-color: rgba(249, 250, 251, 0.7); border: 1px solid #e4e7eb; border-radius: 12px; justify-content: center; }
    .paket-warning p{ font-weight: 600; font-size: 15px; line-height: 1.193; color: #666f94; margin: 0; }
    /* Paket Status (Uygun/Uygun Degil) */
    .paket-status{ display: flex; align-items: center; justify-content: center; height: 50px; border-radius: 12px; }
    .paket-status span{ font-weight: 600; font-size: 16px; }
    .paket-status-success{ background: rgba(120, 68, 228, 0.1); }
    .paket-status-success span{ color: #7844E4; }
    .paket-status-error{ background: rgba(239, 68, 68, 0.1); }
    .paket-status-error span{ color: #EF4444; }
    /* Result Wrapper (Step 2) */
    /* Input Display (non-editable) */
    .input-display{ display: flex; justify-content: space-between; align-items: center; gap: 15px; padding: 15px; border: 2px solid rgba(234, 234, 237, 0.5); border-radius: 15px; }
    .input-display-content{ display: flex; align-items: center; gap: 15px; flex: 1; }
    .input-display-divider, .talep-input > div:nth-child(2){ width: 1px; height: 20px; background: rgba(102, 111, 148, 0.1); border-radius: 27px; flex-shrink: 0; }
    .input-display-content > div:last-child{ display: flex; flex-direction: column; gap: 4px; width: 452px; }
    .input-display-content > div:last-child span:first-child{ font-size: 14px; font-weight: 600; line-height: 1.43; color: #666F94; opacity: 0.8; }
    .input-display-content > div:last-child span:last-child, .musteri-siparis-code, .musteri-siparis-amount, .musteri-siparis-card > div:first-child > div:first-child > div:last-child span:last-child, .musteri-siparis-card > div:first-child > div:last-child span:last-child{ font-weight: 600; line-height: 1.25; color: #33353E; }
    .input-display-badge{ width: 100px; height: 46px; background: rgba(120, 68, 228, 0.1); border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
    .input-display-badge span{ font-weight: 600; line-height: 1.19; color: #7844E4; }
    /* Account Card */
    .account-card{ display: flex; flex-direction: column; gap: 17px; padding: 16px; background: rgba(249, 250, 251, 0.7); border: 1px solid #E4E7EB; border-radius: 16px; }
    .account-header{ display: flex; justify-content: space-between; align-items: center; gap: 20px; }
    .account-profile > div:first-child{ width: 50px; height: 50px; border-radius: 50%; overflow: hidden; border: 1px solid #E4E7EB; flex-shrink: 0; background: #F6F7FB; }
    .account-info{ display: flex; flex-direction: column; gap: 4px; }
    .account-info h4{ font-size: 16px; font-weight: 600; line-height: 1.25; color: #33353E; margin: 0; }
    .account-info p{ font-size: 14px; font-weight: 500; line-height: 1.43; color: #666F94; margin: 0; }
    /* Account Stats */
    .account-stats{ display: flex; align-items: center; gap: 20px; }
    .account-stat{ display: flex; flex-direction: column; align-items: flex-start; }
    .account-stat-label{ font-size: 14px; font-weight: 500; line-height: 1.36; color: #666F94; }
    .stat-value{ font-size: 16px; font-weight: 600; line-height: 1.25; color: #33353E; }
    .account-divider{ width: 1px; height: 30px; background: rgba(102, 111, 148, 0.2); border-radius: 20px; }
    .account-mobile-divider{ display: none; width: 100%; height: 1px; background: rgba(102, 111, 148, 0.1); border-radius: 20px; }
    .account-badge{ display: flex; align-items: center; justify-content: center; padding: 6px 10px; background: rgba(23, 185, 118, 0.1); border-radius: 26px; font-weight: 600; font-size: 13px; color: #17B976; white-space: nowrap; }
    /* Account Card Mobile */
    @media (max-width: 768px){
        .account-header{ flex-direction: column; align-items: flex-start; gap: 10px; }
        .account-mobile-divider{ display: block; }
        .account-badge{ display: flex; align-items: center; justify-content: center; }
    }
    /* Uygun Badge */
    .paket-adimlar-uygun-badge{ width: 100px; height: 46px; background: rgba(120, 68, 228, 0.1); border: none; border-radius: 12px; font-weight: 600; line-height: 1.19; color: #7844E4; cursor: default; display: flex; align-items: center; justify-content: center; }
    /* Bottom Bar (Step 2) */
    .adim-bottom-bar{ display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px; background: rgba(249, 250, 251, 0.7); border: 1px solid rgba(228, 231, 235, 0.5); border-radius: 12px; }
    .adim-bottom-bar .quantity-control > button{ width: 34px; height: 34px; background: #EFF1F4; border: none; border-radius: 10px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: var(--transition-default); padding: 8.95px; }
    .adim-bottom-bar .quantity-control > button:hover{ background: #E5E7EC; }
    .adim-bottom-bar .qty-input-wrapper{ position: relative; display: flex; align-items: center; justify-content: center; }
    .adim-bottom-bar .qty-input-wrapper > span{ position: absolute; left: 36%; top: -3px; transform: translateY(-50%); font-size: 15px; font-weight: 600; line-height: 1.2; color: #7844E4; pointer-events: none; z-index: 1; }
    .adim-bottom-bar .quantity-control > input, .adim-bottom-bar .qty-input-wrapper > input{ width: 68px; font-size: 18px; font-weight: 600; line-height: 1; text-align: center; color: #33353E; border: none; outline: none; background: transparent; -moz-appearance: textfield; appearance: textfield; }
    .adim-bottom-bar .quantity-control > input::-webkit-outer-spin-button, .adim-bottom-bar .quantity-control > input::-webkit-inner-spin-button, .adim-bottom-bar .qty-input-wrapper > input::-webkit-outer-spin-button, .adim-bottom-bar .qty-input-wrapper > input::-webkit-inner-spin-button{ -webkit-appearance: none; appearance: none; margin: 0; }
    .adim-bottom-bar > div:last-child > span{ font-size: 20px; font-weight: 600; line-height: 1.73; color: #666F94; text-align: right; min-width: 80px; }
    .adim-bottom-bar > div:last-child > button{ height: 50px; background: #FF5601; border: none; border-radius: 12px; font-size: 18px; font-weight: 600; line-height: 1.19; color: #FFFFFF; cursor: pointer; transition: var(--transition-default); display: flex; align-items: center; justify-content: center; gap: 10px; padding: 13px 16.5px; }
    .adim-bottom-bar > div:last-child > button:hover, .upsell_btn_primary:hover{ background: #E64E01; }
    .adim-bottom-bar > div:last-child > button svg{ width: 25px; height: 24px; flex-shrink: 0; }
    /* Post Image Increment Section */
    .paket-adimlar-post-increment{ display: flex; gap: 10px; }
    .paket-adimlar-post-image-wrapper{ position: relative; width: 142px; height: 142px; border: 1.6px solid #7844E4; border-radius: 16px; padding: 8px; background: transparent; transition: border-color var(--transition-default); }
    .paket-adimlar-post-image, .post-grid-item img{ width: 100%; height: 100%; object-fit: cover; border-radius: 14px; }
    .paket-adimlar-post-increment-badge{ position: absolute; bottom: 11.65px; left: 50%; transform: translateX(-50%); background: #7844E4; border-radius: 12px; padding: 5px 10px; font-size: 14px; font-weight: 600; line-height: 1.43; color: #FFFFFF; text-align: center; transition: background-color var(--transition-default); }
    /* Premium variant - Blue border and badge */
    .paket-type-premium .paket-adimlar-post-image-wrapper, .paket-type-premium .post-grid-item.selected{ border-color: #296FF9; }
    .paket-type-premium .paket-adimlar-post-increment-badge{ background: #296FF9; color: #FFFFFF; }
    /* Post Grid Selection - 12 Item Grid */
    .post-grid{ display: grid; grid-template-columns: repeat(6, 142px); gap: 10px; }
    .post-grid-item{ position: relative; width: 142px; height: 142px; border: 1.6px solid #E4E7EB; border-radius: 16px; padding: 8px; background: transparent; cursor: pointer; transition: all var(--transition-default); }
    .post-grid-item:hover{ border-color: rgba(120, 68, 228, 0.5); }
    .post-grid-item.selected{ border-color: #7844E4; border-width: 1.6px; }
    .post-grid-item::after{ content: ''; position: absolute; bottom: 6px; left: 6px; right: 6px; height: 60%; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%); border-radius: 0 0 14px 14px; pointer-events: none; z-index: 1; }
    .post-grid-item > div:last-child{ position: absolute; bottom: 11.65px; left: 50%; transform: translateX(-50%); background: rgba(255, 255, 255, 0.3); backdrop-filter: blur(10px); border-radius: 12px; padding: 5px 10px; font-size: 14px; font-weight: 600; line-height: 1.43; color: #FFFFFF; text-align: center; pointer-events: none; transition: background-color var(--transition-default); z-index: 2; }
    .post-grid-item.selected > div:last-child{ background: #7844E4; }
    /* Premium variant - Blue border and badge for grid items */
    .paket-type-premium .post-grid-item:hover{ border-color: rgba(41, 111, 249, 0.5); }
    /* Package Type Tabs - Reusing from Paketler Section */
    .paket-adimlar-wrapper .paket-type-tabs{ width: 390px; flex-shrink: 0; }
    /* ========================================
           PAKET ADIMLAR UPSELL SECTION (STEP 3)
           ======================================== */
    /* Upsell Wrapper */
    /* Upsell Grid */
    .upsell-grid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
    /* Upsell Card - Figma Style */
    .upsell-card{ display: flex; flex-direction: column; gap: 16px; padding: 17px; background: rgba(249, 250, 251, 0.7); border: 1px solid #E4E7EB; border-radius: 16px; position: relative; }
    .upsell-discount-badge{ position: absolute; top: -10px; right: 20px; background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(5, 150, 105, 0.15) 100%); border: 1px solid rgba(16, 185, 129, 0.3); color: #059669; font-size: 12px; font-weight: 600; padding: 4px 8px; border-radius: 8px; z-index: 2; }
    .paket-type-premium .upsell-discount-badge{ background: linear-gradient(135deg, rgba(41, 111, 249, 0.15) 0%, rgba(30, 77, 183, 0.15) 100%); border-color: rgba(41, 111, 249, 0.3); color: #1E4DB7; }
    /* Top: Icon + Title */
    .upsell-top{ display: flex; align-items: center; gap: 16px; }
    .upsell-icon{ width: 40px; height: 40px; flex-shrink: 0; background: #7844E4; border-radius: 12px; display: flex; align-items: center; justify-content: center; }
    .upsell-icon i{ font-size: 20px; color: #fff; }
    .upsell-title{ display: flex; flex-direction: column; }
    .upsell-title h4{ font-size: 15px; font-weight: 600; line-height: 1.15; color: #33353E; margin: 0; }
    .upsell-title p{ font-size: 14px; font-weight: 500; line-height: 1.43; color: #666F94; opacity: 0.8; margin: 0; }
    /* Slider */
    .upsell-slider-wrap{ width: 100%; height: 22px; display: flex; align-items: center; }
    .upsell-slider{ width: 100%; height: 16px; position: relative; cursor: pointer; }
    .upsell-slider-track{ width: 100%; height: 16px; background: rgba(120, 68, 228, 0.2); border-radius: 20px; position: absolute; top: 0; left: 0; }
    .upsell-slider-fill{ height: 16px; background: #7844E4; border-radius: 20px; position: absolute; top: 0; left: 0; z-index: 1; }
    .upsell-slider-thumb{ width: 22px; height: 22px; background: #481E9F; border: 2.2px solid #7844E4; border-radius: 50%; position: absolute; top: 50%; transform: translate(-50%, -50%); cursor: grab; z-index: 2; }
    .upsell-slider-thumb:active{ cursor: grabbing; transform: translate(-50%, -50%) scale(1.1); }
    .paket-type-premium .upsell-slider-track{ background: rgba(41, 111, 249, 0.2); }
    .paket-type-premium .upsell-slider-thumb{ background: #1E4DB7; border-color: #296FF9; }
    .paket-type-premium .upsell-icon{ background: #296FF9; }
    /* Stats Row */
    .upsell-stats{ display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; gap: 10px; width: 100%; }
    .upsell-stat{ display: flex; align-items: center; gap: 15px; padding: 15px; background: #fff; border: 2px solid rgba(234, 234, 237, 0.5); border-radius: 12px; flex: 1 1 0; min-width: 0; height: 44px; box-sizing: border-box; }
    .upsell-divider{ width: 1px; height: 10px; background: rgba(102, 111, 148, 0.1); border-radius: 13.5px; flex-shrink: 0; }
    .upsell-stat-value{ font-size: 15px; font-weight: 600; line-height: 1.33; color: #33353E; flex: 1; }
    .upsell-qty-input, .upsell-price-input{ background: transparent; border: none; outline: none; padding: 0; text-align: left; width: 100%; -moz-appearance: textfield; appearance: textfield; font-size: 15px; font-weight: 600; color: #33353E; }
    .upsell-qty-input:focus, .upsell-price-input:focus{ outline: none; }
    .upsell-qty-input::-webkit-inner-spin-button, .upsell-qty-input::-webkit-outer-spin-button,
    .upsell-price-input::-webkit-inner-spin-button, .upsell-price-input::-webkit-outer-spin-button{ -webkit-appearance: none; margin: 0; }
    .upsell-price-wrap{ display: flex; align-items: center; gap: 2px; flex: 1; }
    .upsell-currency{ font-size: 15px; font-weight: 600; color: #33353E; }
    /* Upsell Mobile */
    @media (max-width: 768px){ .upsell-grid{ grid-template-columns: 1fr; gap: 16px; } }
    /* Bottom Section */
    .paket-adimlar-upsell-bottom{ display: flex; justify-content: center; align-items: center; gap: 20px; margin-top: 30px; }
    .paket-adimlar-upsell-total{ display: flex; align-items: center; gap: 15px; }
    .paket-adimlar-upsell-total-icon{ width: 54px; height: 54px; flex-shrink: 0; background: #7844E4; border-radius: 12px; display: flex; align-items: center; justify-content: center; }
    .paket-adimlar-upsell-total-text{ display: flex; flex-direction: column; gap: 4px; }
    .paket-adimlar-upsell-total-label{ font-size: 16px; font-weight: 600; color: #666F94; line-height: 1.2; }
    .paket-adimlar-upsell-total-price{ font-size: 20px; font-weight: 600; color: #666F94; }
    /* Action Buttons */
    .upsell_actions{ display: flex; justify-content: flex-end; align-items: center; gap: 16px; flex: 1; }
    .upsell_btn{ height: 50px; border-radius: 12px; font-size: 16px; font-weight: 600; line-height: 1.19; cursor: pointer; transition: var(--transition-default); display: flex; align-items: center; justify-content: center; gap: 10px; padding: 13px 16px; border: none; }
    .upsell_btn_primary{ background: #FF5601; color: #FFFFFF; width: 164px; }
    .upsell_btn_outline{ background: transparent; color: #FF5601; border: 1px solid #FF5601; width: 210px; }
    .upsell_btn_outline:hover{ background: rgba(255, 86, 1, 0.05); }
    
    /* ========================================
           PRICE TABLE SECTION
           ======================================== */
    .price-wrapper{ background-color: var(--bg-light); border-radius: 20px; border-top: 4px solid #E1306C; padding: 20px; margin-bottom: 10px; overflow: hidden; }
    .price-header{ background-color: #E1306C; border-radius: 20px; height: 80px; display: flex; align-items: center; padding: 0 20px; margin-bottom: 10px; }
    .price-header-content{ display: flex; align-items: center; gap: 15px; }
    .price-icon-wrapper{ position: relative; width: 40px; height: 40px; background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(2.857142925262451px); border: 0.7142857313156128px solid rgba(255, 255, 255, 0.1); border-radius: 10.714285850524902px; display: flex; align-items: center; justify-content: center; }
    .price-icon-wrapper svg{ width: 26px; height: 26px; }
    .price-title{ color: var(--text-light); margin: 0; }
    .price-platform-name{ display: block; font-weight: 600; font-size: 18px; line-height: 1em; }
    .price-platform-service{ display: block; font-weight: 400; font-size: 15px; line-height: 18px; letter-spacing: 0%; }
    /* Table Styles */
    .price-row{ display: flex; align-items: center; border-radius: 20px; }
    /* Header Row */
    .price-row.header{ background-color: #DEE3F5; border-radius: 20px; }
    .price-row.header > div{ padding: 16px 20px; }
    .price-row.header > div:first-child{ border-radius: 20px 0 0 20px; }
    .price-row.header > div:last-child{ border-radius: 0 20px 20px 0; }
    /* Data Row */
    .price-row.data{ background-color: #F6F7FB; border: 1px dashed #EAEAED; border-radius: 20px; min-height: 74px; }
    .price-row.data > div{ padding: 12px; }
    /* Cell Styles */
    .price-row > div{ font-weight: 600; font-size: 16px; line-height: 1.21875em; color: #666F94; display: flex; align-items: center; }
    .price-row .paket-adi{ flex: 1; min-width: 0; gap: 11px; padding-left: 20px; }
    .price-row .fiyat, .price-row .miktar, .price-row .sure{ width: 180px; flex-shrink: 0; }
    .price-row .satin-al{ width: 188px; flex-shrink: 0; justify-content: flex-end; padding-right: 12px; }
    .price-row.header .satin-al{ justify-content: center; }
    .price-icon{ width: 32px; height: 32px; background: rgba(225, 48, 108, 0.1); border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
    .price-btn{ background-color: #E1306C; border-radius: 12px; padding: 14px 23.5px; display: flex; align-items: center; gap: 10px; border: none; cursor: pointer; transition: var(--transition-default); font-weight: 600; line-height: 1.1929999589920044em; color: var(--text-light); width: 164px; height: 50px; justify-content: center; }
    .price-btn:hover{ transform: translateY(-2px); box-shadow: 0 4px 12px rgba(225, 48, 108, 0.3); }
    /* ===============================================================
        MÜŞTERİ PANELİ STYLES
        =============================================================== */
    .musteri-siparisler-details-date-wrapper svg{ width: 18px; height: 18px; flex-shrink: 0; }
    /* Quick Access (Hızlı Erişim) */
    .quick-list > li{ display: flex; justify-content: space-between; align-items: center; padding: 12px; background: rgba(249, 250, 251, 0.7); border: 1px solid rgba(234, 234, 237, 0.5); border-radius: 20px; transition: all 0.3s ease; }
    .quick-list > li:hover{ background: rgba(249, 250, 251, 1); }
    .quick-list > li > div > div{ width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: #FFFFFF; border: 1px solid rgba(234, 234, 237, 0.5); border-radius: 12px; flex-shrink: 0; }
    .quick-list > li > div span{ font-weight: 600; font-size: 13px; line-height: 1.43; color: #33353E; }
    /* Toggle Switch */
    .musteri-ayarlar-toggle{ position: relative; display: inline-block; width: 40px; height: 25px; cursor: pointer; flex-shrink: 0; }
    .musteri-ayarlar-toggle input{ opacity: 0; width: 0; height: 0; }
    .musteri-ayarlar-toggle-slider{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(234, 234, 237, 0.5); border: 1px solid rgba(110, 62, 209, 0.15); border-radius: 100px; transition: all 0.3s ease; }
    .musteri-ayarlar-toggle-slider:before{ content: ""; position: absolute; height: 15px; width: 15px; left: 4px; bottom: 4px; background-color: white; border-radius: 50%; transition: all 0.3s ease; }
    .musteri-ayarlar-toggle input:checked + .musteri-ayarlar-toggle-slider{ background-color: #6E3ED1; border-color: rgba(110, 62, 209, 0.15); }
    .musteri-ayarlar-toggle input:checked + .musteri-ayarlar-toggle-slider:before{ transform: translateX(15px); }
    /* Avatar Selector */
    .avatar-list{ display: grid; grid-template-columns: repeat(7, 1fr); gap: 16px; place-items: center; margin: 0; padding: 0; }
    .avatar-list > li{ width: 80px; height: 80px; border-radius: 50%; overflow: hidden; cursor: pointer; border: 3px solid transparent; transition: all 0.3s ease; opacity: 0.6; }
    .avatar-list > li:hover{ opacity: 1; transform: scale(1.05); }
    .avatar-list > li.avatar-selected{ border-color: #7844E4; opacity: 1; }
    /* Avatar save button should span full width */
    .avatar-save-btn{ width: 100%; margin-top: 20px; }
    /* Avatar save button styles moved to shared section (line ~20233) */
    /* Responsive */
    /* ===============================================================
           EKSTRA PAKETLER HERO SECTION STYLES
           =============================================================== */
    .hero-content{ display: flex; flex-direction: column; align-items: center; gap: 19px; }
    .hero-content h1{ font-size: 42px; font-weight: 600; line-height: 1.5; letter-spacing: -0.48px; text-align: center; color: var(--text-primary); margin: 0; max-width: 1040px; }
    .hero-content h1 span{ background: linear-gradient(90deg, #6400d9 0%, #ff55f8 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
    .hero-content p{ font-size: 18px; font-weight: 400; line-height: 1.389; text-align: center; color: var(--text-secondary); margin: 0; max-width: 748px; }
    .hero-buttons .btn-outline{ padding: 10px 20px; border-radius: 12px; font-size: 16px; font-weight: 600; line-height: 1.5625; white-space: nowrap; background-color: var(--bg-light); border: 1px solid #CDD5DF; color: var(--text-primary); }
    .hero-buttons .btn-outline:hover{ background-color: rgba(120, 68, 228, 0.05); border-color: var(--primary-purple); color: var(--text-primary); }
    .hero-buttons .btn-primary{ padding: 10px 20px; border-radius: 12px; font-size: 16px; font-weight: 600; line-height: 1.5625; white-space: nowrap; background-color: var(--primary-purple); border: 1px solid #CDD5DF; color: var(--text-light); }
    .hero-buttons .btn-primary:hover{ background-color: rgba(120, 68, 228, 0.05); border-color: var(--primary-purple); color: var(--primary-purple); }
    .hero-avatars-container{ width: 100%; overflow: hidden; margin-top: 50px; }
    .hero-avatars{ display: flex; align-items: center; gap: 20px; transition: transform 0.5s ease-in-out; }
    .ekstra-paketler-avatar{ width: 250px; height: 250px; object-fit: cover; border-radius: 0; flex-shrink: 0; pointer-events: none; user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -webkit-user-drag: none; -moz-user-drag: none; -ms-user-drag: none; -webkit-touch-callout: none; }
    
    /* ===============================================================
           PAKETLER TABLE (Comparison Table)
           =============================================================== */
    .table-wrapper{ background: #FFFFFF; border-radius: 20px; overflow-x: auto;
    /* Enable horizontal scroll on mobile */ -webkit-overflow-scrolling: touch;
    /* Smooth scrolling on iOS */ }
    /* Package label - Always hidden (not needed in new design) */
    /* Table Header */
    .table-header{ display: grid; grid-template-columns: 436px repeat(3, 1fr); border-bottom: 1px solid #EAEAED; align-items: flex-end; background: var(--bg-light-alt); min-width: 1200px;
    /* Ensure minimum width for horizontal scroll */ }
    .table-features{ padding: 30px; background: #FFFFFF; border-top-left-radius: 20px; display: flex; align-items: center; justify-content: start; height: 64px; }
    .table-features h3{ margin: 0; font-size: 20px; font-weight: 600; line-height: 1em; color: var(--text-primary); text-align: center; }
    .table-package{ padding: 20px 30px; background: #FFFFFF; display: flex; flex-direction: column; gap: 20px; justify-content: center; height: 145px; }
    .table-package:nth-child(2){ border-top-left-radius: 20px; }
    .table-package:last-child{ border-right: none; border-top-right-radius: 20px; }
    .table-package > div:first-child span{ font-size: 20px; font-weight: 600; line-height: 1.209em; color: var(--text-primary); }
    /* Add to Cart Buttons */
    .btn-add-to-cart{ display: flex; align-items: center; justify-content: flex-end; gap: 0; padding: 6.35px 5px 6.35px 16px; background: #F6F7FB; border: 1px solid #EAEAED; border-radius: 16px; font-size: 16px; font-weight: 600; line-height: 1.21em; color: var(--text-primary); cursor: pointer; transition: all 0.3s ease; overflow: hidden; position: relative; }
    .btn-add-to-cart-text{ position: absolute; left: 16px; color: #33353E; white-space: nowrap; transition: all 0.3s ease; pointer-events: none; z-index: 2; }
    .btn-add-to-cart-icon{ display: flex; align-items: center; justify-content: center; width: 45px; height: 45px; border-radius: 14px; flex-shrink: 0; transition: all 0.3s ease; margin-left: auto; position: relative; z-index: 1; }
    /* Purple variant */
    .btn-add-to-cart-purple .btn-add-to-cart-icon{ background: linear-gradient(90deg, #9462FB 0%, #7624BF 100%); }
    .btn-add-to-cart-purple:hover .btn-add-to-cart-icon, .btn-add-to-cart-blue:hover .btn-add-to-cart-icon, .btn-add-to-cart-orange:hover .btn-add-to-cart-icon{ width: calc(100% + 11px); margin-left: -16px; padding: 0 15px; justify-content: flex-end; }
    .btn-add-to-cart-purple:hover .btn-add-to-cart-text, .btn-add-to-cart-blue:hover .btn-add-to-cart-text, .btn-add-to-cart-orange:hover .btn-add-to-cart-text{ opacity: 1; color: #FFFFFF; }
    /* Blue variant */
    .btn-add-to-cart-blue .btn-add-to-cart-icon{ background: linear-gradient(120deg, #296FF9 0%, #59CEFC 100%); }
    /* Orange variant */
    .btn-add-to-cart-orange .btn-add-to-cart-icon{ background: linear-gradient(176deg, #FF5601 0%, #FF8800 100%); }
    /* Table Body */
    .table-row{ display: grid; grid-template-columns: 436px repeat(3, 1fr); border-bottom: 1px solid #EAEAED; min-width: 1200px;
    /* Ensure minimum width for horizontal scroll */ }
    .table-row:last-child{ border-bottom: none; }
    .table-cell-feature{ padding: 30px; background: #FFFFFF; display: flex; flex-direction: column; gap: 12px; }
    .table-row:last-child .table-cell-feature{ border-bottom-left-radius: 20px; }
    .table-cell-feature h4{ margin: 0; font-size:18px; font-weight: 600; line-height: 1em; color: var(--text-primary); }
    .table-cell-feature p{ margin: 0; line-height: 1.5em; color: #666F94; font-size:14px;}
    .table-cell-check{ padding: 30px; background: #FFFFFF; display: flex; align-items: center; justify-content: center; }
    .table-cell-check:last-child{ border-right: none; }
    .table-row:last-child .table-cell-check:last-child{ border-bottom-right-radius: 20px; }
    /* ===============================================================
           MÜŞTERİ E-POSTA DOĞRULAMA SECTION
           =============================================================== */
    .eposta-verification{ display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 20px; width: 100%; }
    .eposta-verification p{ line-height: 1.375em; text-align: center; color: #7a7f99; margin: 0; }
    .eposta-verification p span:first-child{ font-size: 22px; font-weight: 600; color: #33353e; }
    .eposta-input-wrapper{ display: flex; flex-direction: row; align-items: center; gap: 15px; padding: 15px 13px 15px 15px; width: 436px; max-width: 100%; height: 66px; border: 2px solid rgba(234, 234, 237, 0.5); border-radius: 15px; background: transparent; transition: border-color var(--transition-default); }
    .eposta-input-wrapper.d-none{ display: none !important; }
    .eposta-input-wrapper.d-block{ display: flex !important; }
    .eposta-input-wrapper > div{ position: relative; flex: 1; display: flex; flex-direction: column; }
    .eposta-input-wrapper.loading{ pointer-events: none; opacity: 0.7; }
    .eposta-input{ width: 100%; height: 20px; font-size: 16px; font-weight: 600; line-height: 1.25em; color: #33353e; background: transparent; border: none; outline: none; padding: 0; transition: all var(--transition-default); transform: translateY(8px); }
    /* Floating label */
    .eposta-input-wrapper label{ position: absolute; left: 0; top: 4px; font-size: 16px; font-weight: 600; line-height: 1.25em; color: #666f94; opacity: 0.8; pointer-events: auto; cursor: text; transform-origin: left top; transition: all 0.2s ease; transform: translateY(-4px); }
    /* Float label up when input has value or is focused */
    .eposta-input-wrapper:focus-within label, .eposta-input-wrapper.has-value label, .eposta-input-wrapper.code-state:focus-within label, .eposta-input-wrapper.code-state.has-value label{ font-size: 14px; line-height: 1.25em; transform: translateY(-14px); opacity: 0.8; }
    /* Verification code input state */
    .eposta-input.code-input{ letter-spacing: 0.5em; text-align: center; font-weight: 600; color: var(--primary-purple); }
    /* Code input label should also float up when has value */
    .eposta-submit-btn{ display: flex; justify-content: center; align-items: center; gap: 10px; padding: 10px 12px; width: 80px; background: var(--primary-purple); border: none; border-radius: 12px; font-size: 12px; font-weight: 600; line-height: 1.67em; color: #ffffff; cursor: pointer; transition: all var(--transition-default); white-space: nowrap; }
    .eposta-submit-btn:hover{ background: #6a35cd; transform: translateY(-2px); box-shadow: 0px 4px 12px rgba(120, 68, 228, 0.3); }
    .eposta-submit-btn.loading{ pointer-events: none; opacity: 0.7; justify-content: center; align-items: center; }
    /* Loading spinner inside button */
    .eposta-submit-btn.loading::after{ content: ""; width: 14px; height: 14px; border: 2px solid rgba(255, 255, 255, 0.3); border-top-color: #ffffff; border-radius: 50%; animation: spin 0.6s linear infinite; margin: 0; display: block; }
    @keyframes spin {
    to{ transform: rotate(360deg); } }
    /* Mobile bottom nav customer styles moved to layout.css */
    /* Profile overlay menu moved to profile-overlay.css */
    /* ===============================================================
           DESTEK TALEBİ SUCCESS MODAL
           =============================================================== */
    .destek-success-modal .modal-content{ background: var(--bg-light); border: none; border-radius: 30px; box-shadow: 0px 8px 40px rgba(0, 0, 0, 0.12); }
    /* Icon */
    /* Text Content */
    .destek-success-modal .modal-body > div:nth-child(2){ display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
    .destek-success-modal .modal-body h3{ font-weight: 600; font-size: 24px; line-height: 1.2; color: var(--text-primary); margin: 0; }
    .destek-success-modal .modal-body p{ font-weight: 600; font-size: 18px; line-height: 1.22; color: var(--text-dark-muted); margin: 0; }
    /* Actions */
    .destek-success-modal .modal-body > div:last-child{ width: 100%; display: flex; flex-direction: row; align-items: stretch; gap: 16px; }
    .destek-success-btn{ flex: 1; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 10px; background: var(--primary-purple); border: none; border-radius: 14px; font-weight: 600; font-size: 18px; line-height: 1.19; color: var(--text-light); cursor: pointer; transition: var(--transition-default); height: 60px; }
    .destek-success-btn:hover{ background: #6a39cc; transform: translateY(-2px); box-shadow: 0px 8px 24px rgba(120, 68, 228, 0.3); }
    .alert-message{ position: fixed; bottom: 7px; right: -100%; min-width: 300px; max-width: 400px; z-index: 999999; border: none; }
    .alert{ border-radius: 8px; }
    .modal{ background: rgba(15, 15, 15, 0.67); }
    #notificationsDropdown .fa-bell:before{ color: white; }
    /* ========================================
         SVG SPRITE ICON SYSTEM
         ======================================== */
    /* Base SVG Icon Styles */
    .svg-icon{ width: 1em; height: 1em; fill: currentColor; vertical-align: -0.125em; display: inline-block; flex-shrink: 0; }
    /* Size Variants */
    .svg-icon.icon-xs{ width: 0.75em; height: 0.75em; }
    .svg-icon.icon-sm{ width: 0.875em; height: 0.875em; }
    .svg-icon.icon-lg{ width: 1.25em; height: 1.25em; }
    .svg-icon.icon-xl{ width: 1.5em; height: 1.5em; }
    .svg-icon.icon-2x{ width: 2em; height: 2em; }
    .svg-icon.icon-3x{ width: 3em; height: 3em; }
    /* Fixed Size Variants (px) */
    .svg-icon.icon-16{ width: 16px; height: 16px; }
    .svg-icon.icon-20{ width: 20px; height: 20px; }
    .svg-icon.icon-24{ width: 24px; height: 24px; }
    .svg-icon.icon-32{ width: 32px; height: 32px; }
    /* Spin Animation */
    .svg-icon.icon-spin{ animation: svg-icon-spin 1s linear infinite; }
    @keyframes svg-icon-spin {
    from{ transform: rotate(0deg); }
    to{ transform: rotate(360deg); } }
    /* Service Card SVG Icons - Platform kartları */
    .service-card-icon .svg-icon{ width: 48px; height: 48px; color: #fff; }
    /* Layout SVG icons moved to layout.css */
    .address-svg-icon{ width: 24px; height: 24px; color: #fff; }
    .address-btn-icon{ width: 18px; height: 18px; color: #fff; }
    /* Order/Upsell SVG Icons */
    .upsell-stat-icon{ width: 18px; height: 18px; color: #7844E4; }
    .upsell-total-icon{ width: 24px; height: 24px; color: #fff; }
    .ucretsiz-deneme-tasks, .iletisim-info-items, .odeme-step-header, .odeme-form-inputs, .odeme-summary-items, .siparis-list, .odeme-ozeti-details, .musteri-son-siparisler-list, .musteri-destek-list .tickets-list, .talep-form{ display: flex; flex-direction: column; gap: 16px; }
    /* Cart Empty State */
    .notfavlist{ text-align: center; background: #f7f7f7; border-radius: 10px; padding: 70px 0; height: fit-content; }
    .notfavlist span{ font-size: 22px; font-weight: 600; color: var(--text-color); }
    .notfavlist p{ color: var(--text-color); margin-bottom: 0; opacity: .7; }
    /* Legacy Cart Item Remove (eski kod) */
    .item .remove{ min-width: 45px; height: 45px; display: flex; align-items: center; justify-content: center; background: #ff283c61; border-radius: 8px; color: #fff; cursor: pointer; transition: 0.4s; }
    .upsell-btn-icon{ width: 16px; height: 16px; margin-right: 6px; }
    .paket-warning-icon{ width: 16px; height: 16px; color: #666f94a8; flex-shrink: 0; }
    .paket-input-icon{ width: 20px; height: 20px; color: #666f94a8; }
    .kontrol-btn-icon{ width: 14px; height: 14px; }
    .paket-tab-icon{ width: 16px; height: 16px; }
    .social-icon{ width: 18px; height: 18px; color: currentColor; transition: color 0.2s ease; }
    /* ========================================
         FULL-ALERT MODAL - Theme Aligned
         ======================================== */
    .full-alert{ position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 999; display: flex; align-items: center; justify-content: center; flex-direction: column; text-align: center; opacity: 0; pointer-events: none; transition: all .4s cubic-bezier(0.4, 0, 0.2, 1); }
    .full-alert.show{ opacity: 1; pointer-events: all; }
    /* Glassmorphism Overlay */
    .full-alert .overlay{ position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: linear-gradient(135deg, rgba(23, 26, 38, 0.95) 0%, rgba(30, 33, 48, 0.98) 100%); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); opacity: 0; transition: opacity .4s cubic-bezier(0.4, 0, 0.2, 1); }
    /* Modal Container */
    .full-alert .contside{ background: linear-gradient(145deg, var(--bg-dark-secondary, #1A1D2A) 0%, var(--bg-dark, #171A26) 100%); padding: 32px 36px; z-index: 1; border-radius: var(--radius-xl, 24px); min-width: 400px; max-width: 440px; position: relative; overflow: hidden; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5),
          0 0 0 1px rgba(255, 255, 255, 0.05),
          inset 0 1px 0 rgba(255, 255, 255, 0.05); transform: scale(0.9) translateY(20px); transition: transform .4s cubic-bezier(0.4, 0, 0.2, 1); }
    .full-alert.show .contside{ transform: scale(1) translateY(0); }
    /* Decorative gradient glow */
    .full-alert .contside::before{ content: ""; position: absolute; top: -100px; left: -100px; width: 250px; height: 250px; background: radial-gradient(circle, rgba(120, 68, 228, 0.15) 0%, transparent 70%); pointer-events: none; z-index: -1; }
    .full-alert .contside::after{ content: ""; position: absolute; bottom: -80px; right: -80px; width: 200px; height: 200px; background: radial-gradient(circle, rgba(52, 211, 153, 0.1) 0%, transparent 70%); pointer-events: none; z-index: -1; }
    /* Content Area */
    .full-alert .content{ position: relative; opacity: 0; transform: translateY(-30px); transition: all .5s cubic-bezier(0.4, 0, 0.2, 1); transition-delay: .15s; }
    /* Success Icon */
    .full-alert .icon{ font-size: 72px; margin-bottom: 12px; background: linear-gradient(135deg, var(--status-success, #34D399) 0%, #10B981 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; filter: drop-shadow(0 4px 12px rgba(52, 211, 153, 0.3)); animation: iconPulse 2s ease-in-out infinite; }
    @keyframes iconPulse {
    0%, 100%{ transform: scale(1); }
    50%{ transform: scale(1.05); } }
    /* Title */
    .full-alert .title{ font-size: 22px; font-weight: 600; color: var(--text-light, #FFFFFF); margin-bottom: 6px; letter-spacing: -0.3px; }
    /* Description */
    .full-alert .description{ color: var(--text-dark-muted, #666F94); font-size: 15px; font-weight: 400; line-height: 1.5; margin-top: 0; margin-bottom: 28px; }
    /* Action Buttons Area */
    .full-alert .action{ position: relative; display: flex; align-items: center; justify-content: center; gap: 12px; opacity: 0; transform: translateY(30px); transition: all .5s cubic-bezier(0.4, 0, 0.2, 1); transition-delay: .25s; }
    /* Buttons */
    .full-alert .action .butto{ padding: 14px 24px !important; font-size: 15px; font-weight: 600; border-radius: var(--radius-md, 12px); width: 100%; transition: all 0.3s ease; position: relative; overflow: hidden; }
    /* Primary Button (Continue) */
    .full-alert .action .butto-primary{ background: linear-gradient(135deg, var(--primary-purple, #7844E4) 0%, #9966FF 100%); color: var(--text-light, #FFFFFF); border: none; box-shadow: 0 4px 15px rgba(120, 68, 228, 0.3); }
    .full-alert .action .butto-primary:hover{ transform: translateY(-2px); box-shadow: 0 6px 20px rgba(120, 68, 228, 0.4); }
    .full-alert .action .butto-primary:active{ transform: translateY(0); }
    /* Outline Success Button (Go to Cart) */
    .full-alert .action .butto-outline-success{ background: transparent; color: var(--status-success, #34D399); border: 2px solid var(--status-success, #34D399); }
    .full-alert .action .butto-outline-success:hover{ background: rgba(52, 211, 153, 0.1); transform: translateY(-2px); }
    .full-alert .action .butto-outline-success:active{ transform: translateY(0); }
    /* Show State Animations */
    .full-alert.show .overlay{ opacity: 1; }
    .full-alert.show .content{ opacity: 1; transform: translateY(0); }
    .full-alert.show .action{ opacity: 1; transform: translateY(0); }
    /* Responsive */
    @media (max-width: 480px) {
    .full-alert .contside{ min-width: calc(100% - 32px); max-width: calc(100% - 32px); margin: 0 16px; padding: 28px 24px; }
    .full-alert .action{ flex-direction: column; gap: 10px; }
    .full-alert .icon{ font-size: 60px; }
    .full-alert .title{ font-size: 20px; }
    .full-alert .description{ font-size: 14px; } }
    /* ========================================
         SCROLL ANIMATE - WOW.js replacement
         ======================================== */
    .scroll-animate{ opacity: 0; transform: translateY(30px); transition: opacity 0.6s ease, transform 0.6s ease; }
    .scroll-animate.visible{ opacity: 1; transform: translateY(0); }
    /* Theme Colors via CSS Variables */
    .renkli-tab[data-theme="cyan"], .renkli-content[data-theme="cyan"]{ --theme-bg: #e6f9fa; --theme-border: #8fe9ed; --theme-accent: #28c4cd; --theme-img-bg: #41c5d6; }
    .renkli-tab[data-theme="yellow"], .renkli-content[data-theme="yellow"]{ --theme-bg: #fef9e6; --theme-border: #ffe085; --theme-accent: #f5b800; --theme-img-bg: #b6aefc; }
    .renkli-tab[data-theme="orange"], .renkli-content[data-theme="orange"]{ --theme-bg: #fff5e6; --theme-border: #ffd699; --theme-accent: #ff9500; --theme-img-bg: #ffe396; }
    .renkli-tab[data-theme="pink"], .renkli-content[data-theme="pink"]{ --theme-bg: #fce6f9; --theme-border: #f5a0e6; --theme-accent: #d946af; --theme-img-bg: #ddacfc; }
    .renkli-tab[data-theme="green"], .renkli-content[data-theme="green"]{ --theme-bg: #eafce9; --theme-border: #b5ffb6; --theme-accent: #61b33c; --theme-img-bg: #b7e6a2; }
    /* Slider Container */
    .renkli-slider{ max-width: 1214px; margin: 0 auto; padding: 0 16px; }
    /* Tab Navigation */
    .renkli-tabs{ display: flex; align-items: flex-end; gap: 16px; }
    .renkli-tab{ width: 230px; height: 241px; background: #fff; border: 1px solid #e5e5e5; border-radius: 20px; padding: 10px; cursor: pointer; transition: all 0.3s ease; display: flex; flex-direction: column; position: relative; overflow: hidden; }
    .renkli-tab:hover:not(.active){ transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08); }
    .renkli-tab.active{ background: var(--theme-bg); border-color: var(--theme-border); border-radius: 20px 20px 0 0; border-bottom: none; z-index: 2; margin-bottom: -17px; padding-bottom: 26px; overflow: visible; }
    /* Curved corner masks */
    .renkli-tab.active::before, .renkli-tab.active::after{ content: ""; position: absolute; width: 30px; height: 30px; bottom: 0; }
    .renkli-tab.active::before{ left: -30px; background: radial-gradient(circle at 0% 0%, transparent 68.8%, var(--theme-border) 71%, var(--theme-border) 72%, var(--theme-bg) 72.1%); }
    .renkli-tab.active::after{ right: -30px; background: radial-gradient(circle at 100% 0%, transparent 68.8%, var(--theme-border) 71%, var(--theme-border) 72%, var(--theme-bg) 72.1%); }
    .renkli-tab[data-tab="0"].active::before{ display: none; }
    .renkli-tab[data-tab="4"].active::after{ display: none; }
    /* Tab Preview Image */
    .renkli-tab img{ width: 100%; object-fit: contain; margin-bottom: 12px; border-radius: 12px; padding: 10px; padding-bottom: 0; background: var(--theme-img-bg); }
    .renkli-tab h4{ font-weight: 600; font-size: 16px; line-height: 1.3; color: #33353e; margin: 0 0 6px; }
    .renkli-tab p{ font-weight: 400; font-size: 13px;  line-height: 1.4; color: #666f94; margin: 0; }
    /* Content Panel */
    .renkli-content{ display: none; background: var(--theme-bg); border: 1px solid var(--theme-border); border-radius: 30px; min-height: 400px; margin-top: 16px; position: relative; z-index: 1; }
    .renkli-content.active{ display: flex; }
    /* Left Content */
    .renkli-left{ flex: 1; padding: 50px; display: flex; flex-direction: column; justify-content: center; }
    .renkli-badge{ display: inline-flex; align-items: center; gap: 10px; padding: 10px; border: 1px solid var(--theme-accent); border-radius: 53px; width: fit-content; margin-bottom: 24px; }
    .renkli-badge-icon{ width: 30px; height: 30px; border-radius: 35px; background: var(--theme-accent); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
    .renkli-badge-icon svg{ width: 16px; height: 16px; color: #fff; }
    .renkli-badge span{ font-weight: 600;font-size: 18px; line-height: 22px; color: #33353e; text-transform: capitalize; }
    .renkli-left h2{ font-weight: 600;font-size: 30px;line-height: 38px; color: #33353e; margin: 0 0 20px; max-width: 466px; }
    .renkli-left h2 span{ color: var(--theme-accent); }
    .renkli-left>p{ font: 500 20px/30px; color: #666f94; margin: 0; max-width: 484px; }
    /* Right Content */
    .renkli-right{ width: 550px; display: flex; align-items: center; justify-content: center; border-radius: 0 30px 30px 0; margin-right: 30px; }
    .renkli-right img{ max-width: 100%; height: auto; object-fit: contain; }
    /* Border radius based on active tab */
    .renkli-slider[data-active="0"] .renkli-content{ border-radius: 0 30px 30px 30px; }
    .renkli-slider[data-active="1"] .renkli-content, .renkli-slider[data-active="2"] .renkli-content, .renkli-slider[data-active="3"] .renkli-content{ border-radius: 30px; }
    .renkli-slider[data-active="4"] .renkli-content{ border-radius: 30px 0 30px 30px; }
    /* Kategori Yeni Section CSS */
    @media (max-width: 1280px) {
    .renkli-tab img{ height: 120px; border-radius: 10px; padding: 8px; }
    .renkli-tab.active{ margin-bottom: -16px; padding-bottom: 26px; }
    .renkli-tab.active::before, .renkli-tab.active::after{ width: 24px; height: 24px; }
    .renkli-tab.active::before{ left: -24px; }
    .renkli-tab.active::after{ right: -24px; }
    .renkli-right{ width: 450px; } }
    @media (max-width: 991px) {
    .renkli-tabs{ gap: 10px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
    .renkli-tab{ width: 140px; height: 180px; flex-shrink: 0; margin-bottom: 6px; }
    .renkli-tab.active{ margin-bottom: -10px; padding-bottom: 18px; }
    .renkli-tab.active::before, .renkli-tab.active::after{ width: 20px; height: 20px; }
    .renkli-tab.active::before{ left: -20px; }
    .renkli-tab.active::after{ right: -20px; }
    .renkli-tab img{ height: 90px; border-radius: 10px; padding: 8px; }
    .renkli-tab h4{ font-size: 14px; }
    .renkli-tab p{ font-size: 11px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    .renkli-content{ margin-top: 6px; }
    .renkli-content.active{ flex-direction: column; margin-top: -2px; }
    .renkli-left{ padding: 30px; }
    .renkli-left h2{ font-size: 24px; line-height: 32px; }
    .renkli-left>p{ font-size: 16px; line-height: 24px; }
    .renkli-right{ width: 100%; padding: 20px; border-radius: 0 0 30px 30px; } }
    @media (max-width: 768px) {
    .renkli-tabs{ gap: 8px; }
    .renkli-tab{ width: 120px; height: 160px; padding: 8px; border-radius: 12px; }
    .renkli-tab.active{ border-radius: 12px 12px 0 0; margin-bottom: -8px; padding-bottom: 16px; }
    .renkli-tab.active::before, .renkli-tab.active::after{ width: 16px; height: 16px; }
    .renkli-tab.active::before{ left: -16px; }
    .renkli-tab.active::after{ right: -16px; }
    .renkli-tab img{ height: 70px; margin-bottom: 8px; border-radius: 8px; padding: 6px; }
    .renkli-tab h4{ font-size: 12px; margin-bottom: 4px; }
    .renkli-tab p{ font-size: 10px; }
    .renkli-content{ border-radius: 20px; min-height: auto; margin-top: 8px; }
    .renkli-left{ padding: 24px; }
    .renkli-badge{ padding: 8px; gap: 8px; }
    .renkli-badge-icon{ width: 24px; height: 24px; }
    .renkli-badge-icon svg{ width: 12px; height: 12px; }
    .renkli-badge span{ font-size: 14px; }
    .renkli-left h2{ font-size: 20px; line-height: 28px; }
    .renkli-left>p{ font-size: 14px; line-height: 22px; }
    .renkli-right{ padding: 16px; } }
    .yatay-slide{ display: flex; align-items: stretch; gap: 20px; max-width: 1214px; margin: 60px auto; padding: 0 20px; }
    .yatay-slide > div:first-child{ width: 410px; background: #fff; border-radius: 30px; padding: 30px 20px; position: relative; z-index: 2; }
    .yatay-slide > div:first-child > div:first-child{ margin-bottom: 10px; }
    .yatay-slide > div:first-child h2{ font-weight: 600; font-size: 22px; line-height: 40px; color: #33353e; margin: 0; }
    .yatay-slide > div:first-child > div:first-child p{ font-size: 16px; line-height: 24px; color: #666f94; margin: 0; }
    .yatay-slide > div:first-child > div:last-child{ display: flex; flex-direction: column; gap: 16px; }
    .yatay-tab h3{font-weight: 600;font-size: 16px;color: #33353e;text-transform: capitalize;margin-bottom: 0px;}
    .yatay-tab{ display: flex; align-items: center; gap: 16px; padding: 16px; background: #fff; border: 1px solid #eaeaed; border-radius: 20px; cursor: pointer; transition: all 0.3s ease; position: relative; z-index: 3; pointer-events: auto; }
    .yatay-tab:hover{ border-color: rgba(120, 68, 228, 0.3); }
    .yatay-tab[data-tab="0"].active{ background: #E4DAFA; border-color: #7844E4; }
    .yatay-tab[data-tab="1"].active{ background: #FFDDCC; border-color: #FF5601; }
    .yatay-tab[data-tab="2"].active{ background: #EAFBF9; border-color: #00A3A3; }
    .yatay-tab > div{ width: 44px; height: 44px; min-width: 44px; border-radius: 15px; display: flex; align-items: center; justify-content: center; }
    .yatay-tab[data-tab="0"] > div{ background: #7844e4; }
    .yatay-tab[data-tab="1"] > div{ background: #ff5601; }
    .yatay-tab[data-tab="2"] > div{ background: #00a3a3; }
    .yatay-tab svg{ width: 24px; height: 24px; color: #fff; }
    .yatay-tab i{ color: #fff; }
    .yatay-tab > span{ font-weight: 600; font-size: 16px; color: #33353e; text-transform: capitalize; }
    .yatay-slide > div:last-child{ flex: 1; border-radius: 30px; overflow: hidden; transition: all 0.4s ease; position: relative; z-index: 1; }
    .yatay-slide > div:last-child[data-theme="0"]{ background: #E4DAFA; border: 1px solid #7844E4; }
    .yatay-slide > div:last-child[data-theme="1"]{ background: #FFDDCC; border: 1px solid #FF5601; }
    .yatay-slide > div:last-child[data-theme="2"]{ background: #EAFBF9; border: 1px solid #00A3A3; }
    .yatay-panel{ display: none; }
    .yatay-panel.active{ display: flex; align-items: center; gap: 20px; padding: 30px; height: 100%; box-sizing: border-box; }
    .yatay-panel > div:first-child{ flex: 1; min-width: 0; }
    .yatay-panel h3{ font-weight: 600; font-size: 24px; line-height: 40px; color: #33353e; margin: 0; }
    .yatay-panel p{ font-weight: 500; font-size: 16px; line-height: 26px; color: #666f94; margin: 0; }
    .yatay-panel > div:last-child{ flex-shrink: 0; }
    .yatay-panel img{ width: 298px; height: auto; max-height: 343px; object-fit: contain; }
    @media (max-width: 1280px) {
    .yatay-slide{ max-width: 100%; }
    .yatay-slide > div:last-child{ max-width: 600px; }
    .yatay-panel > div:first-child{ width: 280px; } }
    @media (max-width: 991px) {
    .yatay-slide{ flex-direction: column; align-items: stretch; }
    .yatay-slide > div:first-child, .yatay-slide > div:last-child{ width: 100%; max-width: 100%; }
    .yatay-panel img{ width: 250px; max-height: 300px; } }
    @media (max-width: 768px) {
    .yatay-slide{ padding: 0 16px; gap: 16px; margin: 40px auto; }
    .yatay-slide > div:first-child{ padding: 20px 16px; border-radius: 24px; }
    .yatay-slide > div:first-child h2{ font-size: 20px; line-height: 32px; }
    .yatay-slide > div:first-child > div:first-child p{ font-size: 14px; line-height: 22px; }
    .yatay-slide > div:first-child > div:last-child{ flex-direction: row; gap: 12px; overflow-x: auto; margin: 0 -16px; padding: 0 16px; scrollbar-width: none; -ms-overflow-style: none; }
    .yatay-slide > div:first-child > div:last-child::-webkit-scrollbar{ display: none; }
    .yatay-tab{ padding: 12px; border-radius: 16px; flex-shrink: 0; }
    .yatay-tab > div{ width: 40px; height: 40px; min-width: 40px; border-radius: 12px; }
    .yatay-tab svg{ width: 20px; height: 20px; }
    .yatay-tab > span{ font-size: 14px; white-space: nowrap; }
    .yatay-slide > div:last-child{ border-radius: 24px; }
    .yatay-panel.active{ padding: 20px; }
    .yatay-panel h3{ font-size: 20px; line-height: 32px; }
    .yatay-panel p{ font-size: 14px; line-height: 24px; }
    .yatay-panel > div:last-child{ display: none; } }
    .servis-bloklar{ display: flex; gap: 30px; max-width: 1140px; width: 100%; margin: 0 auto; margin-bottom: 75px;}
    .servis-card{ width: 360px; display: flex; flex-direction: column; flex: 1; max-height: 458px; }
    .servis-card-image{ height: 260px; border-radius: 20px 20px 0 0; border-width: 1px 1px 0 1px; border-style: solid; display: flex; align-items: center; justify-content: center; overflow: hidden; }
    .servis-card-image img{ width: 90%; object-fit: cover; }
    .servis-card-content{ padding: 30px; background: #fff; border-radius: 0 0 20px 20px; border-width: 0 1px 1px 1px; border-style: solid; display: flex; flex-direction: column; gap: 20px; flex: 1; }
    .servis-card-content h3{ font-size: 24px; font-weight: 600; line-height: 29px; margin-bottom: 0; }
    .servis-card-content p{ font-size: 15px; font-weight: 500; margin: 0; }
    /* Purple Card */
    .servis-card--purple .servis-card-image{ background: #f9f2ff; border-color: #7843e4; }
    .servis-card--purple .servis-card-content{ border-color: #7843e4; }
    .servis-card--purple .servis-card-content h3{ color: #7844e4; }
    /* Orange Card */
    .servis-card--orange .servis-card-image{ background: #fff4e8; border-color: #ff5601; }
    .servis-card--orange .servis-card-content{ border-color: #ff5601; }
    .servis-card--orange .servis-card-content h3{ color: #ff5601; }
    /* Blue Card */
    .servis-card--blue .servis-card-image{ background: #eef8ff; border-color: #0f7fd3; }
    .servis-card--blue .servis-card-content{ border-color: #0f7fd3; }
    .servis-card--blue .servis-card-content h3{ color: #0f7fd3; }
    @media (max-width: 1200px) {
    .servis-card{ flex: none; width: 360px; } }
    @media (max-width: 768px) {
    .servis-bloklar{ flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; gap: 16px; padding: 0 20px 20px; scrollbar-width: none; -ms-overflow-style: none; }
    .servis-bloklar::-webkit-scrollbar{ display: none; }
    .servis-card{ flex: 0 0 85%; max-width: 300px; min-width: 280px; scroll-snap-align: center; }
    .servis-card:first-child{ margin-left: 10px; }
    .servis-card:last-child{ margin-right: 10px; }
    .servis-card-image{ height: 200px; }
    .servis-card-content{ padding: 20px; gap: 12px; }
    .servis-card-content h3{ font-size: 18px; line-height: 22px; }
    .servis-card-content p{ font-size: 13px; line-height: 1.5; } }
    #section_why_us {padding-top: 60px;background-color: var(--bg-light-alt);}
    
    /* ========================================
         SINIRSIZ SERVIS HIZMETLERIMIZ SECTION
         ======================================== */
    .sinirsiz-servis .section-content{ max-width: 1122px; margin: 0 auto; }
    /* Cards Grid */
    .sinirsiz-servis-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 20px; }
    /* Individual Card */
    .sinirsiz-servis-card{ position: relative; background-color: var(--home-card-bg); border: 2px solid var(--home-card-border); border-radius: 20px; padding: 35px 25px 25px; height: 478px; overflow: hidden; display: flex; flex-direction: column; }
    .sinirsiz-servis-card > div:first-child{ display: flex; flex-direction: column; gap: 10px; margin-bottom: auto; }
    .sinirsiz-servis-card > div:first-child h3, .sinirsiz-servis .full-content > div h3{ font-weight: 600; font-size: 20px; line-height: 1.2em; color: #2F3352; margin: 0; }
    .sinirsiz-servis-card > div:first-child p, .sinirsiz-servis .full-content > div p{ font-weight: 600; line-height: 1.375em; color: var(--home-text-muted); margin: 0; }
    /* Card Link Button */
    .sinirsiz-servis .card-link{ display: flex; align-items: center; justify-content: center; height: 46px; background-color: var(--bg-light); border: 1px solid var(--home-card-border); border-radius: 12px; font-weight: 600; line-height: 1.5em; color: #4B5565; margin-top: auto; transition: var(--transition-default); position: relative; z-index: 2; }
    .sinirsiz-servis .card-link:hover{ background-color: #f8f9fb; color: #4B5565; }
    /* Blur Effect */
    .sinirsiz-servis .card-blur{ position: absolute; width: 451.73px; height: 322.78px; background: rgba(120, 68, 228, 0.8); filter: blur(105.244px); opacity: 0.1; pointer-events: none; }
    /* Card 1 - Sol üst köşe */
    .sinirsiz-servis-card:nth-child(1) .card-blur{ left: calc(50% - 451.73px/2 - 200px); top: -141px; }
    /* Card 2 - Invite butonunun arkasında (orta) */
    .sinirsiz-servis-card:nth-child(2) .card-blur-alt{ left: calc(50% - 451.73px/2 - 3.13px); top: 102px; }
    /* Card 3 - Sağ üst köşe */
    .sinirsiz-servis-card:nth-child(3) .card-blur-third{ left: calc(50% - 451.73px/2 + 200px); top: -102px; }
    /* Card 1 - Tags */
    .sinirsiz-servis-tags{ display: flex; flex-direction: column; gap: 20px; margin-top: 20px; }
    .sinirsiz-servis-tag-row{ display: flex; gap: 35px; justify-content: center; }
    .sinirsiz-servis-tag{ display: flex; align-items: center; justify-content: center; gap: 8px; padding: 8px 16px; background-color: var(--bg-light); border: 1px solid rgba(75, 85, 101, 0.1); border-radius: 80px; font-weight: 400; font-size: 14px; line-height: 1.6em; color: #4B5565; white-space: nowrap; animation: floatingImage 4s ease-in-out infinite; }
    /* Staggered animation delays for tags */
    .sinirsiz-servis-tag-row:nth-child(2) .sinirsiz-servis-tag:nth-child(2){ animation-delay: 1.5s; }
    .sinirsiz-servis-tag-row:nth-child(3) .sinirsiz-servis-tag:nth-child(2){ animation-delay: 2.5s; }
    .sinirsiz-servis-tag-row:nth-child(4) .sinirsiz-servis-tag:nth-child(1){ animation-delay: 3s; }
    .sinirsiz-servis-tag-row:nth-child(4) .sinirsiz-servis-tag:nth-child(2){ animation-delay: 3.5s; }
    /* Card 2 - Wave */
    .sinirsiz-servis-wave{ position: absolute; left: -6px; top: 202px; width: 395px; height: 112px; z-index: 1; }
    .sinirsiz-servis-wave svg{ width: 110%; height: 130%; }
    /* Electric Current Animation Styles - Moving Spark Effect */
    .electric-spark-main{ animation: electricSparkPulse 0.6s ease-in-out infinite; }
    /* Pulsing effect for the moving spark */
    @keyframes electricSparkPulse {
    0%, 100%{ opacity: 1; transform: scale(1); }
    50%{ opacity: 0.7; transform: scale(1.3); } }
    .sinirsiz-servis-email-btn{ display: flex; align-items: center; justify-content: center; gap: 8px; padding: 8px 16px; background-color: var(--bg-light); border: 2px solid rgba(75, 85, 101, 0.1); border-radius: 80px; font-weight: 600; font-size: 14px; line-height: 1.19em; color: #4B5565; width: fit-content; height: 52px; margin-left: 60px; cursor: pointer; transition: var(--transition-default); position: relative; z-index: 2; }
    .sinirsiz-servis-email-btn:hover{ background-color: #f8f9fb; }
    .sinirsiz-servis-email-btn svg{ width: 18.5px; height: 18.5px; flex-shrink: 0; }
    /* Full Width Card */
    .sinirsiz-servis .full-card{ position: relative; background-color: var(--home-card-bg); border: 2px solid var(--home-card-border); border-radius: 20px; padding: 61px 25px; height: 287.36px; overflow: hidden; display: flex; align-items: center; justify-content: space-between; }
    .sinirsiz-servis .full-content{ display: flex; flex-direction: column; gap: 20px; max-width: 312.2px; position: relative; z-index: 2; }
    .sinirsiz-servis .card-blur-full{ position: absolute; width: 452.12px; height: 323.33px; background: rgb(83 0 255); filter: blur(105.244px); opacity: 0.1; pointer-events: none; right: 150px; top: 50%; transform: translateY(-50%); z-index: 1; }
    /* Icon Slider Section - 3D Carousel */
    .sinirsiz-servis .slider{ display: flex; align-items: center; gap: 30px; position: relative; z-index: 2; }
    .sinirsiz-servis .slider-track{ display: flex; align-items: center; justify-content: center; gap: 4px; position: relative; width: 400px; height: 180px; perspective: 1000px; }
    .sinirsiz-servis .slider-item{ display: flex; align-items: center; justify-content: center; position: absolute; left: 50%; top: 50%; transform-origin: center; transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); transform-style: preserve-3d; }
    /* Pozisyon durumları */
    .sinirsiz-servis .slider-item[data-position="0"]{ transform: translate(-50%, -50%) translateZ(0) scale(1); z-index: 3; opacity: 1; }
    .sinirsiz-servis .slider-item[data-position="-1"]{ transform: translate(-180%, -50%) translateZ(-100px) scale(0.75) rotateY(25deg); z-index: 1; opacity: 0.6; }
    .sinirsiz-servis .slider-item[data-position="1"]{ transform: translate(80%, -50%) translateZ(-100px) scale(0.75) rotateY(-25deg); z-index: 1; opacity: 0.6; }
    .sinirsiz-servis .icon{ display: flex; align-items: center; justify-content: center; background-color: var(--bg-light); border: 1px solid rgba(75, 85, 101, 0.1); border-radius: 25px; backdrop-filter: blur(4px); transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); width: 130px; height: 130px; }
    /* Aktif durumdaki ikon büyük */
    .sinirsiz-servis .slider-item[data-position="0"] .icon{ width: 160px; height: 160px; }
    /* Font Awesome ikonları */
    .sinirsiz-servis .icon i{ font-size: 50px; transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); color: #4B556533; }
    /* Aktif durumdaki ikon daha büyük */
    .sinirsiz-servis .slider-item[data-position="0"] .icon i{ font-size: 65px; color: var(--primary-purple); }
    .sinirsiz-servis .slider-nav{ width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; background-color: rgba(75, 85, 101, 0.1); border: none; border-radius: 50%; cursor: pointer; transition: var(--transition-default); flex-shrink: 0; }
    .sinirsiz-servis .slider-nav:hover{ background-color: rgba(75, 85, 101, 0.15); }
    .sinirsiz-servis .slider-nav svg{ width: 5.5px; height: 11px; }
    /* ========================================
         MÜŞTERİLERİNİZLE BAĞ KURUN SECTION
         ======================================== */
    .musteriler-bag-kurun-wrapper{ display: flex; gap: 40px; align-items: flex-start; justify-content: space-between; max-width: 1122px; margin: 0 auto; }
    /* Left Card - Blue */
    .musteriler-left-card{ flex: 1; background: var(--home-accent-blue-soft); border-radius: 30px; padding: 60px 40px 40px; position: relative; display: flex; flex-direction: column; }
    .musteriler-left-header > p:first-child{ font-weight: 600; font-size: 35px; line-height: 1.8em; color: var(--home-accent-blue-light); margin: 0; }
    .musteriler-left-header > h2{ font-weight: 600; font-size: 45px; line-height: 1.4em; color: var(--home-accent-blue); margin: 0; }
    .musteriler-phone-container{ display: flex; justify-content: center; margin: 20px 0; position: relative; }
    .musteriler-phone-wrapper{ position: relative; width: 100%; height: 375px; border-radius: 18px; overflow: hidden; padding: 3px; }
    .musteriler-phone-wrapper::after{ content: ''; position: absolute; bottom: 0px; left: 0px; right: 0px; height: 66px; background: linear-gradient(180deg, rgba(210, 233, 252, 0) 0%, rgba(210, 233, 252, 1) 100%); pointer-events: none; z-index: 1; border-radius: 0 0 15px 15px; }
    /* Notification Badges */
    .musteriler-notification-badge{ position: absolute; background: #FFFFFF; border-radius: 18px; padding: 12px; display: flex; align-items: center; gap: 10px; box-shadow: 0px 0px 15px 0px rgba(110, 189, 255, 0.25); z-index: 2; animation: floatingImage 3s ease-in-out infinite; }
    .musteriler-notification-1{ bottom: 12%; left: 30px; animation-delay: 0s; }
    .musteriler-notification-2{ top: 18%; right: 30px; animation-delay: 1.5s; }
    .musteriler-notification-right{ top: 618px; left: 40px; animation-delay: 1s; }
    .musteriler-notification-icon{ width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: #7844e4; border-radius: 10px; color: white; }
    .musteriler-notification-content{ display: flex; flex-direction: column; gap: 3px; }
    .musteriler-notification-content > p:first-child{ font-weight: 600; font-size: 16px; line-height: 1em; color: var(--text-primary); margin: 0; }
    .musteriler-notification-content > p:last-child{ font-weight: 600; font-size: 14px; line-height: 1em; color: #0066BA; margin: 0; max-width: 234px; }
    .musteriler-notification-avatar{ width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%; overflow: hidden; }
    .musteriler-notification-avatar img{ width: 100%; height: 100%; object-fit: cover; }
    .musteriler-notif-name{ font-weight: 600; font-size: 14px; color: var(--text-primary); margin: 0; line-height: 1.2; }
    .musteriler-notif-label{ font-weight: 400; font-size: 12px; color: var(--text-dark-muted); margin: 0; line-height: 1.2; }
    .musteriler-notification-stat-box{ margin-left: auto; text-align: right; }
    .musteriler-notif-stat-label{ font-weight: 500; font-size: 12px; color: var(--text-dark-muted); margin: 0; line-height: 1.2; }
    .musteriler-notif-stat-value{ font-weight: 600; font-size: 14px; color: #0066BA; margin: 0; line-height: 1.2; }
    .musteriler-phone-image{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain; border-radius: 15px; opacity: 0; transition: opacity 0.4s ease; pointer-events: none; }
    .musteriler-phone-image.active{ opacity: 1; pointer-events: auto; }
    .musteriler-bottom-content{ display: flex; flex-direction: column; align-items: center; gap: 30px; padding-top: 20px; }
    .musteriler-slide-info{ position: relative; width: 100%; min-height: 100px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
    .musteriler-slide-content{ position: absolute; top: 0; left: 0; right: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; opacity: 0; transform: translateY(10px); transition: opacity 0.4s ease, transform 0.4s ease; pointer-events: none; }
    .musteriler-slide-content.active{ opacity: 1; transform: translateY(0); pointer-events: auto; }
    .musteriler-slide-content > h3{ font-weight: 600; font-size: 24px; line-height: 1.25em; color: var(--home-accent-blue); margin: 0; }
    .musteriler-slide-content > p{ font-weight: 600; font-size: 18px; line-height: 1.67em; color: var(--home-accent-blue); margin: 0; max-width: 523px; }
    .musteriler-arrow-btn{ width: 42px; height: 42px; border-radius: 50%; background: color-mix(in srgb, var(--home-accent-blue) 10%, transparent); border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.3s ease; }
    .musteriler-arrow-btn:hover{ background: color-mix(in srgb, var(--home-accent-blue) 20%, transparent); transform: scale(1.1); }
    /* Right Card - Purple */
    .musteriler-right-card{ flex: 0 0 405px; max-width: 430px; background: var(--home-accent-lilac); border-radius: 30px; padding: 40px 40px 0 40px; position: relative; display: flex; flex-direction: column; gap: 0px; overflow: hidden; }
    .musteriler-right-card > p:first-child{ font-weight: 900; font-size: 40px; line-height: 1.25em; color: var(--home-badge-lilac); text-shadow: 1px 1px 1px rgba(0, 0, 0, 0); margin: 0; }
    .musteriler-right-card > h2{ font-weight: 600; font-size: 45px; line-height: 1.4em; color: var(--primary-purple); margin: 0; }
    .musteriler-right-card > p:nth-child(3){ font-weight: 600; font-size: 20px; line-height: 1.5em; color: var(--primary-purple); margin: 0; }
    .musteriler-character-image{ margin-top: auto; display: flex; justify-content: center; align-items: flex-end; }
    .musteriler-character-image img{ max-width: 325px; object-fit: contain; }
    /* ========================================
         HOMEPAGE RESPONSIVE STYLES
         ======================================== */
    /* Large Screens (max-width: 1600px) */
    @media (max-width: 1600px) {
    .hakkimizda-slider .slider-container{ gap: 16px; }
    .hakkimizda-slider .slide.active{ width: 540px; }
    .hakkimizda-slider .slide:not(.active){ width: 200px; } }
    /* Desktop (max-width: 1200px) */
    @media (max-width: 1200px) {
    .packages-grid{ flex-direction: row; gap: 20px; align-items: center; }
    .packages-column, .package-featured-card{ width: 100%; max-width: 400px; }
    .why-choose-us .cards{ gap: 12px; }
    .hakkimizda-slider .slide.active{ width: 480px; }
    .hakkimizda-slider .slide:not(.active){ width: 180px; }
    .hakkimizda-slider .slide-text h4{ font-size: 16px; }
    .hakkimizda-slider .slide-text p{ font-size: 14px; }
    .musteriler-left-card, .musteriler-right-card{ padding: 40px 30px; }
    .musteriler-right-card{ flex: 0 0 350px; } }
    /* Tablet (max-width: 1024px) */
    @media (max-width: 1024px) {
    /* Hakkimizda Slider Mobile Responsive */
    .hero-slide.active .slide-content{ width: 100%; padding: 24px; order: 2; flex: 0 0 auto; }
    .slide-badge{ margin-bottom: 10px; margin-left: 14px; }
    .hero-slide:not(.active) .slide-content{ padding: 24px; width: 264px; flex: 0 0 auto; flex-direction: column; justify-content: center; align-items: flex-start; text-align: left; gap: 0; }
    .hero-slide.active .slide-content h2.slide-title{ font-size: 24px; font-weight: 600; line-height: 1.21; margin-bottom: 10px; }
    .hero-slide.active .slide-content h2.slide-title span{ font-size: 28px; }
    .hero-slide.active .slide-content .hero-slide-description{ font-size: 16px; font-weight: 600; line-height: 1.38; margin-bottom: 12px; margin-top: 10px; }
    .hero-slide:not(.active) .slide-content h2.slide-title{ font-size: 15px; font-weight: 600; line-height: 1.1; text-align: left; }
    .hero-slide:not(.active) .slide-content h2.slide-title span{ font-size: 24px; font-weight: 600; line-height: 1.1; text-align: left; }
    .hero-slide:not(.active) .slide-content h2.slide-title br{ display: none; }
    /* Services Grid Responsive */
    .services-grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
    /* Packages Mobile Slider */
    .packages-grid::-webkit-scrollbar, .deneme-features::-webkit-scrollbar, .ucretsiz-deneme-features::-webkit-scrollbar{ display: none; }
    .package-card-hidden{ display: none !important; }
    .package-header, .smaller-buy-btn, .deneme-header{ width: 100%; }
    .package-card-expanded{ width: 100% !important; position: relative !important; }
    .packages-filter-tab{ padding: 6px 16px; flex-shrink: 0; white-space: nowrap; }
    .packages-grid-wrapper{ overflow: hidden; margin-bottom: 40px; }
    .packages-grid{ flex-direction: row; gap: 16px; padding: 10px 16px; overflow-x: auto; overflow-y: visible; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin-bottom: 10px; max-height: none; scroll-behavior: smooth; touch-action: pan-x; justify-content: start; }
    .packages-column, .package-featured-card{ flex: 0 0 calc(100% - 32px); min-width: calc(100% - 32px); scroll-snap-align: center; scroll-snap-stop: normal; width: calc(100% - 32px); }
    .packages-column{ min-height: auto; }
    .package-card{ height: auto; min-height: 96px; padding: 16px; align-items: center; gap: 15px; width: 100%; position: relative; opacity: 1; visibility: visible; overflow: visible; }
    .package-featured-card{ padding: 16px; height: auto; min-height: 420px; max-width: none; overflow: visible; }
    .package-featured-header{ margin-bottom: 32px; }
    .package-featured-tag{ left: auto; right: 16px; font-size: 11px; padding: 4px 12px; }
    .package-actions-inline{ gap: 4px; }
    .package-buy-icon-btn{ width: 36px; height: 36px; }
    .package-buy-icon-btn i{ font-size: 14px; }
    .packages-top-section{ gap: 14px; margin-bottom: 2px; }
    .packages-filter-tabs{ padding: 8px; gap: 4px; }
    .packages-filter-tab span, .package-buy-content span{ font-size: 14px; }
    .packages-social-icons{ padding: 12px; gap: 0; }
    .packages-social-icon{ width: 36px; height: 36px; }
    .packages-social-icon svg{ width: 18px; height: 18px; }
    .package-icon svg{ width: 20px; height: 20px; }
    .package-title, .package-price{ font-size: 16px; }
    .package-platform{ font-size: 11px; }
    .package-feature{ font-size: 13px; }
    .package-buy-btn{ padding: 12px 16px; width: 100%; flex: 1; }
    .package-actions{ flex-direction: row; width: 100%; gap: 10px; }
    /* Sınırsız Servis Mobile */
    .sinirsiz-servis-grid{ grid-template-columns: 1fr; gap: 20px; }
    .sinirsiz-servis-card{ height: auto; min-height: 400px; }
    .sinirsiz-servis .full-card{ flex-direction: column; height: auto; gap: 30px; padding: 40px 25px; }
    .sinirsiz-servis .full-content{ max-width: 100%; }
    .sinirsiz-servis .slider{ gap: 20px; }
    .sinirsiz-servis .slider-track{ width: 350px; height: 150px; }
    .sinirsiz-servis .slider-item[data-position="-1"]{ transform: translate(-160%, -50%) translateZ(-80px) scale(0.7) rotateY(20deg); }
    .sinirsiz-servis .slider-item[data-position="1"]{ transform: translate(60%, -50%) translateZ(-80px) scale(0.7) rotateY(-20deg); }
    .sinirsiz-servis .icon{ width: 100px; height: 100px; }
    .sinirsiz-servis .slider-item[data-position="0"] .icon{ width: 120px; height: 120px; }
    .sinirsiz-servis .icon i{ font-size: 40px; }
    .sinirsiz-servis .slider-item[data-position="0"] .icon i{ font-size: 50px; }
    /* Hakkımızda Slider Mobile */
    .hakkimizda-slider{ padding: 40px 16px; }
    .hakkimizda-slider .slider-container{ flex-direction: column; gap: 16px; }
    .hakkimizda-slider .slide{ width: 100%; height: auto; min-height: 300px; }
    .hakkimizda-slider .slide:not(.active){ min-height: 120px; }
    .hakkimizda-slider .slide-content{ padding: 24px; }
    .hakkimizda-slider .slide-text h2{ font-size: 24px; }
    .hakkimizda-slider .slide-text h4{ font-size: 14px; }
    /* Müşteriler Mobile */
    .musteriler-bag-kurun-wrapper{ flex-direction: column; gap: 24px; }
    .musteriler-left-card, .musteriler-right-card{ width: 100%; max-width: none; flex: none; padding: 30px 24px; }
    .musteriler-right-card{ height: auto; min-height: 400px; }
    .musteriler-left-header > p:first-child{ font-size: 28px; }
    .musteriler-left-header > h2{ font-size: 32px; }
    .musteriler-right-card > p:first-child{ font-size: 28px; }
    .musteriler-right-card > h2{ font-size: 32px; }
    .musteriler-phone-wrapper{ width: 240px; height: 360px; }
    .musteriler-notification-badge{ padding: 10px; gap: 8px; }
    .musteriler-slide-content > h3{ font-size: 20px; }
    .musteriler-slide-content > p{ font-size: 16px; } }
    /* Mobile (max-width: 768px) */
    @media (max-width: 768px) {
    .hakkimizda-slider .slide-content > .slide-image{ display: none; }
    .hakkimizda-slider{ padding: 30px 0; }
    .hakkimizda-slider .slider-container{ gap: 10px; flex-direction: column; }
    .hakkimizda-slider .slide.active{ width: 100%; height: 374px; border-radius: 24px; }
    .hakkimizda-slider .slide:not(.active){ width: 100%; height: 90px; border-radius: 20px; }
    .hakkimizda-slider .slide.active .slide-content{ flex-direction: column; padding: 30px 20px 0; }
    .hakkimizda-slider .slide.active .slide-content > .slide-text{ padding: 0; width: 100%; max-width: 358px; gap: 0; }
    .hakkimizda-slider .slide-text h4{ font-size: 24px; line-height: 1.71; }
    .hakkimizda-slider .slide-text h2{ font-size: 32px; line-height: 1.14; }
    .hakkimizda-slider .slide-text p{ font-size: 16px; line-height: 1.54; max-width: 100%; }
    .hakkimizda-slider .slide:not(.active) .slide-content > .slide-text h4{ font-size: 15px; font-weight: 600; line-height: 1.37; }
    .hakkimizda-slider .slide:not(.active) .slide-content > .slide-text h2{ font-size: 22px; font-weight: 600; line-height: 1.12; text-align: center; }
    .hakkimizda-slider .slide:not(.active) .slide-content{ padding: 0; gap: 0; align-items: start; margin-bottom: 14px; }
    .hakkimizda-slider .slide:not(.active) .slide-content > .slide-text{ padding: 0 20px 0; gap: 0; align-items: start; }
    .hakkimizda-slider .slide.active .slide-footer{ height: 20px; }
    .hakkimizda-slider .slide:not(.active) .slide-footer{ height: 10px; }
    .hakkimizda-slider .slide:not(.active):hover{ transform: none; box-shadow: none; opacity: 0.95; }
    .hero-slide.active{ min-height: 350px; }
    .hero-slide:not(.active){ height: 85px; }
    .packages-column, .package-featured-card{ flex: 0 0 calc(100% - 24px); min-width: calc(100% - 24px); width: calc(100% - 24px); }
    .why-choose-us{ padding: 40px 0; }
    .why-choose-us .cards{ flex-direction: column; }
    .why-choose-us .feature-card{ width: 100%; }
    /* Sınırsız Servis 768px */
    .sinirsiz-servis, .paketler-table{ padding: 20px 0; }
    .sinirsiz-servis-card{ padding: 25px 20px; }
    .sinirsiz-servis-tags{ margin-top: 30px; gap: 16px; margin-bottom: 20px; }
    .sinirsiz-servis-tag-row{ flex-wrap: wrap; gap: 12px; }
    .sinirsiz-servis-tag{ font-size: 12px; padding: 6px 12px; }
    .sinirsiz-servis-wave{ left: -20px; width: calc(100% + 40px); height: auto; top: 160px; }
    .sinirsiz-servis-email-btn{ margin-left: 90px; font-size: 12px; padding: 6px 12px; height: 44px; }
    .sinirsiz-servis .slider-track{ width: 250px; height: 130px; }
    .sinirsiz-servis .slider-item[data-position="-1"]{ transform: translate(-140%, -50%) translateZ(-60px) scale(0.65) rotateY(15deg); }
    .sinirsiz-servis .slider-item[data-position="1"]{ transform: translate(40%, -50%) translateZ(-60px) scale(0.65) rotateY(-15deg); }
    .sinirsiz-servis .icon{ width: 80px; height: 80px; }
    .sinirsiz-servis .slider-item[data-position="0"] .icon{ width: 100px; height: 100px; }
    .sinirsiz-servis .icon i{ font-size: 32px; }
    .sinirsiz-servis .slider-item[data-position="0"] .icon i{ font-size: 40px; }
    .sinirsiz-servis .full-card{ padding: 30px 20px; }
    .sinirsiz-servis .card-blur-full{ right: -50px; }
    .musteriler-character-image img{ max-width: 250px; } }
    /* Small Mobile (max-width: 576px) */
    @media (max-width: 576px) {
    .hero-slide.active{ min-height: 320px; }
    .hero-slide:not(.active){ height: 75px; }
    .hero-slide:not(.active) .hero-slide-content, .hero-slide:not(.active) .slide-content{ padding: 16px; width: 200px; }
    .hero-slide:not(.active) .hero-slide-content > span:first-of-type > span, .hero-slide:not(.active) .slide-content h2.slide-title span{ font-size: 20px; }
    .packages-grid{ padding: 10px 12px; }
    .packages-column, .package-featured-card{ flex: 0 0 calc(100% - 16px); min-width: calc(100% - 16px); width: calc(100% - 16px); }
    .sinirsiz-servis-card{ padding: 20px; }
    .sinirsiz-servis .full-card{ padding: 20px; }
    .musteriler-left-card, .musteriler-right-card{ padding: 24px 20px; }
    .musteriler-left-header > p:first-child{ font-size: 24px; }
    .musteriler-left-header > h2{ font-size: 28px; }
    .musteriler-right-card > p:first-child{ font-size: 24px; }
    .musteriler-right-card > h2{ font-size: 28px; }
    .musteriler-phone-wrapper{ width: 200px; height: 300px; }
    .musteriler-slide-content > h3{ font-size: 18px; }
    .musteriler-slide-content > p{ font-size: 14px; }
    .musteriler-arrow-btn{ width: 36px; height: 36px; } }
    /* Extra Small Mobile (max-width: 480px) */
    @media (max-width: 480px) {
    .hero-slide.active{ gap: 25px; }
    .hero-slide.active .hero-slide-image{ height: 320px; }
    .hero-slide-content > span:first-of-type{ font-size: 24px; }
    .hakkimizda-slider .slide.active{ height: 350px; }
    .hakkimizda-slider .slide.active .slide-content > .slide-image{ width: 180px; height: 280px; }
    .hakkimizda-slider .slide.active .slide-content > .slide-image img{ height: 280px; }
    .hakkimizda-slider .slide:not(.active) .slide-content > .slide-image img{ max-height: 230px; } }
    /* ================================================================
         PART 3: PAGE-SPECIFIC SECTIONS
         ================================================================ */
    /* ========================================
         3.0 CUSTOMER PANEL (MÜŞTERİ PANELİ)
         Source: customer__panel.css
         ======================================== */
    /* ========================================
         MÜŞTERİ PANELİ - GRID LAYOUT
         ======================================== */
    .musteri-panel-grid{ display: grid; grid-template-columns: 300px 1fr; gap: var(--spacing-lg); padding: var(--spacing-lg) 0; max-width: 1440px; margin: 0 auto; margin-bottom: 130px; }
    /* ========================================
         MÜŞTERİ PANELİ - SIDEBAR
         ======================================== */
    .musteri-sidebar{ position: sticky; top: var(--spacing-lg); height: fit-content; }
    /* Single Sidebar Card */
    .musteri-sidebar-card{ background: var(--bg-light); border-radius: var(--radius-xl); padding: 20px 16px 16px; display: flex; flex-direction: column; gap: 16px; border-top: 4px solid var(--primary-purple); }
    /* User Profile Section */
    .musteri-user-avatar-wrapper{ width: 50px; height: 50px; flex-shrink: 0; border-radius: 50%; overflow: hidden; }
    .musteri-user-avatar{ width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
    .musteri-user-name{ font-weight: 600; font-size: 18px; line-height: 1.055em; color: var(--text-primary); margin: 0; }
    .musteri-user-balance{ font-weight: 600; font-size: 15px; line-height: 1.267em; color: var(--primary-purple); margin: 0; }
    /* Membership Card */
    .musteri-membership-card{ background: #F9FAFB; border-radius: var(--radius-md); border: 1px dashed rgba(228, 231, 235, 0.5); padding: 16px; display: flex; align-items: center; gap: 10px; max-height: 68px; }
    .musteri-membership-icon{ width: 38px; height: 36px; object-fit: contain; flex-shrink: 0; }
    .musteri-membership-title, .musteri-membership-level, .musteri-siparis-label, .musteri-siparis-code, .musteri-siparis-amount-label, .musteri-siparis-amount, .musteri-siparis-card > div:first-child > div:first-child > div:last-child span, .musteri-siparis-card > div:first-child > div:last-child span, .musteri-destek-ticket-info > div:first-child, .transaction-info > div:first-child, .transaction-info > div:last-child{ margin: 0; }
    .musteri-membership-title{ font-weight: 600; font-size: 16px; line-height: 1.25; color: var(--text-primary); }
    .musteri-membership-level{ font-weight: 600; font-size: 13px; line-height: 1.538; color: #7A7F99; }
    .musteri-membership-info-btn{ width: 16px; height: 16px; padding: 0; border: none; background: transparent; cursor: pointer; flex-shrink: 0; display: flex; align-items: center; justify-content: center; transition: var(--transition-default); margin-left: auto; }
    /* Navigation Menu */
    .musteri-sidebar-nav ul{ display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; }
    .musteri-sidebar-nav ul > li > a{ display: flex; align-items: center; gap: 10px; padding: 18px; border-radius: 16px; color: #7A7F99; font-weight: 600; line-height: 1.1875em; text-transform: capitalize; }
    .musteri-sidebar-nav ul > li > a svg{ width: 17px; height: 17px; flex-shrink: 0; color: #7A7F99; }
    .musteri-sidebar-nav ul > li > a svg path, .musteri-sidebar-nav ul > li > a svg circle, .musteri-sidebar-nav ul > li > a svg ellipse{ fill: currentColor; }
    .musteri-sidebar-nav ul > li > a:hover{ background: #F5F7FD; color: #7A7F99; }
    .musteri-sidebar-nav ul > li > a[aria-current="page"]{ background: var(--primary-purple); color: var(--bg-light); }
    /* ========================================
         MÜŞTERİ PANELİ - CONTENT AREA
         ======================================== */
    .musteri-content{ display: flex; flex-direction: column; gap: var(--spacing-lg); min-height: 100vh; }
    /* Banner Section */
    .musteri-banner{ background: #FFFFFF; border-radius: 30px; padding: 41px 30px; display: flex; align-items: center; justify-content: space-between; gap: 40px; height: 210px; position: relative; overflow: hidden; }
    .musteri-banner .banner-content{ flex: 1; display: flex; flex-direction: column; gap: 10px; z-index: 2; }
    .musteri-banner h2{ font-weight: 600; font-size: 28px; line-height: 1.393em; color: #33353E; margin: 0; }
    .musteri-banner h2 span{ display: block; color: var(--primary-purple); font-size: 30px; }
    .musteri-banner p{ font-weight: 600; line-height: 1.375em; color: #7A7F99; margin: 0; max-width: 496px; }
    .musteri-banner .banner-image{ position: absolute; right: 14px; top: 14px; width: 423px; height: 183px; flex-shrink: 0; z-index: 1; }
    /* Content Inner */
    .musteri-content-inner{ background: var(--bg-light); border-radius: var(--radius-xl); padding: var(--spacing-xl); min-height: 400px; }
    /* Müşteri Paneli - Dashboard Stats Cards */
    .stats-grid{ display: flex; gap: 16px; align-items: stretch; padding: 0; margin: 0; }
    .stats-grid > li{ position: relative; background: #ffffff; border-radius: 20px; height: 84px; flex: 1; overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease; display: flex; align-items: center; gap: 18px; padding: 16px 16.5px; }
    .stats-grid > li::before{ content: ""; position: absolute; left: 0; top: 20px; width: 5.17px; height: 44px; background: var(--primary-purple); border-radius: 0 12px 12px 0; }
    .stats-grid > li > div:first-child, .link-content > div:first-child, .stat-content > div:first-child{ position: relative; width: 52px; height: 52px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
    .stats-grid > li > div:first-child::before, .link-content > div:first-child::before, .stat-content > div:first-child::before{ content: ""; position: absolute; width: 52px; height: 52px; background: rgba(120, 68, 228, 0.1); border-radius: 50%; }
    .stats-grid > li > div:first-child svg, .link-content > div:first-child svg, .stat-content > div:first-child svg{ position: relative; z-index: 1; width: 24px; height: 24px; }
    .stats-grid > li > div:last-child > div:first-child, .stats-grid > li > div:last-child > div:last-child{ text-transform: capitalize; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .stats-grid > li > div:last-child > div:first-child{ font-weight: 600; font-size: 14px; line-height: 1.27; color: #7a7f99; }
    .stats-grid > li > div:last-child > div:last-child, .stat-content > div:nth-child(2) > div:last-child{ font-weight: 600; font-size: 20px; line-height: 0.86; color: var(--text-primary); }
    /* ========================================
         MÜŞTERİ PANELİ - TÜM SİPARİŞLER SECTION
         ======================================== */
    .musteri-section-small{ max-width: 702px; }
    /* Search Bar */
    .musteri-siparisler-search, .musteri-destek-search{ display: flex; align-items: center; gap: 8px; width: 200px; height: 42px; padding: 15px 16px; border: 1px solid rgba(234, 234, 237, 0.5); border-radius: 15px; }
    .musteri-siparisler-search-input{ flex: 1; border: none; background: transparent; outline: none; font-weight: 600; font-size: 14px; line-height: 1.57em; color: #33353E; }
    /* Date Filter Dropdown */
    .musteri-siparisler-filter{ display: flex; align-items: center; gap: 15px; width: 188px; height: 42px; padding: 15px; background: #F9FAFB; border-radius: 15px; cursor: pointer; transition: all 0.3s ease; }
    .musteri-siparisler-filter:hover, .musteri-siparisler-filter.active{ background: #F0F1F9; }
    .musteri-siparisler-filter-label{ display: flex; flex-direction: column; gap: 4px; width: 180px; }
    .musteri-siparisler-filter-selected{ font-weight: 600; font-size: 14px; line-height: 1.43em; color: #666F94; opacity: 0.8; }
    /* Dropdown Menu - Shared Styles */
    .musteri-siparisler-filter-dropdown, .musteri-destek-filter-dropdown{ position: absolute; top: calc(100% + 8px); left: 0; min-width: 100%; width: max-content; background: #FFFFFF; border: 1px solid rgba(234, 234, 237, 0.8); border-radius: 12px; box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.08); overflow: hidden; opacity: 0; visibility: hidden; transform: translateY(-10px); transition: all 0.3s ease; z-index: 100; }
    .musteri-siparisler-filter-option, .musteri-destek-filter-option{ padding: 12px 16px; font-weight: 600; font-size: 14px; line-height: 1.43; color: #33353E; cursor: pointer; transition: all 0.2s ease; }
    .musteri-siparisler-filter-option:hover, .musteri-destek-filter-option:hover{ background: rgba(108, 93, 211, 0.05); color: #7844e4; }
    .musteri-siparisler-filter-option.active, .musteri-destek-filter-option.active{ background: rgba(108, 93, 211, 0.1); color: #7844e4; font-weight: 600; }
    /* Empty State */
    .musteri-siparisler-empty-state, .favoriler-empty{ display: flex; align-items: center; gap: 20px; padding: 0 20px; background: rgba(249, 250, 251, 0.7); border: 1px solid rgba(234, 234, 237, 0.5); border-radius: 0 0 20px 20px; }
    .musteri-siparisler-empty-image, .favoriler-empty img{ width: 96px; height: 168px; object-fit: contain; flex-shrink: 0; margin-top: -8px; }
    /* Empty State - Destek List */
    .musteri-destek-list .musteri-siparisler-empty-state img{ height: 168px; flex-shrink: 0; margin-top: -8px; }
    .musteri-destek-list .musteri-siparisler-empty-state > div:last-child, .musteri-siparisler-empty-content, .favoriler-empty .empty-content{ display: flex; flex-direction: column; gap: 12px; flex: 1; }
    .musteri-destek-list .musteri-siparisler-empty-state h3, .musteri-siparisler-empty-title, .musteri-siparisler-details-empty-title, .favoriler-empty h3{ font-weight: 600; font-size: 20px; line-height: 1em; color: #33353E; margin: 0; }
    .musteri-destek-list .musteri-siparisler-empty-state p, .musteri-siparisler-empty-description, .favoriler-empty p{ font-weight: 600; line-height: 1.25em; color: #7A7F99; margin: 0; }
    .musteri-destek-list .musteri-siparisler-empty-state > div:last-child a, .musteri-siparisler-empty-btn, .favoriler-empty .empty-btn{ display: inline-flex; align-items: center; justify-content: center; width: fit-content; padding: 11px 44px; background: #7844E4; border-radius: 14px; font-weight: 600; line-height: 1.19em; color: #FFFFFF; transition: all 0.3s ease; }
    .musteri-destek-list .musteri-siparisler-empty-state > div:last-child a:hover, .musteri-siparisler-empty-btn:hover, .favoriler-empty .empty-btn:hover{ background: #6835d1; transform: translateY(-1px); box-shadow: 0px 4px 12px rgba(120, 68, 228, 0.3); color: #FFFFFF; }
    /* Order Card */
    .musteri-siparis-card{ display: flex; flex-direction: row; justify-content: space-between; align-items: center; padding: 20px; background: rgba(249, 250, 251, 0.7); border: 1px solid rgba(234, 234, 237, 0.5); border-radius: 20px; transition: all 0.3s ease; }
    .musteri-siparis-card:hover, .musteri-destek-ticket-card:hover, .referans-transaction-card:hover, .bakiye-list > li:hover{ background: rgba(249, 250, 251, 1); box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.04); }
    /* Card top wrapper */
    .musteri-siparis-card-top, .musteri-siparis-card > div:first-child{ display: flex; justify-content: space-between; align-items: center; flex: 1; gap: 20px; }
    .musteri-siparis-btn{ flex-shrink: 0; margin-left: 30px; }
    .musteri-siparis-icon-wrapper, .musteri-siparis-card > div:first-child > div:first-child > div:first-child, .musteri-destek-ticket-icon-wrapper, .transaction-left > div:first-child, .bakiye-list > li > div:first-child > div:first-child{ display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: #6E3ED1; border-radius: 10px; flex-shrink: 0; }
    .musteri-siparis-info, .musteri-siparis-amount-wrapper, .musteri-siparis-card > div:first-child > div:first-child > div:last-child, .musteri-siparis-card > div:first-child > div:last-child{ display: flex; flex-direction: column; gap: 3px; }
    .musteri-siparis-info, .musteri-siparis-card > div:first-child > div:first-child > div:last-child{ width: 112px; }
    .musteri-siparis-label, .musteri-siparis-amount-label, .musteri-siparis-card > div:first-child > div:first-child > div:last-child span:first-child, .musteri-siparis-card > div:first-child > div:last-child span:first-child{ font-weight: 600; font-size: 14px; line-height: 1.43; color: #7A7F99; }
    /* ===============================================================
         MÜŞTERİ PANELİ - Destek (Support Tickets)
         =============================================================== */
    .musteri-destek-search input{ flex: 1; border: none; background: transparent; font-weight: 600; font-size: 14px; line-height: 1.5714em; color: #666F94; outline: none; }
    .musteri-destek-ticket-right{ display: flex; align-items: center; gap: 1rem; }
    /* Date Filter */
    .musteri-destek-filter{ display: flex; align-items: center; gap: 15px; padding: 15px; width: 188px; height: 42px; background: #F9FAFB; border: none; border-radius: 15px; cursor: pointer; user-select: none; }
    .musteri-destek-filter > div:first-child{ display: flex; flex-direction: column; gap: 4px; width: 125px; flex-shrink: 0; }
    .musteri-destek-filter > div:first-child span{ font-weight: 600; font-size: 14px; line-height: 1.4286em; color: #666F94; opacity: 0.8; height: 12px; display: flex; align-items: center; }
    /* Create Ticket Button */
    .musteri-destek-create-btn{ display: flex; align-items: center; justify-content: center; gap: 15px; padding: 15px; height: 42px; background: #7844E4; border: none; border-radius: 15px; font-weight: 600; font-size: 14px; line-height: 1.4286em; color: #FFFFFF; cursor: pointer; transition: all 0.3s ease; white-space: nowrap; }
    .musteri-destek-create-btn:hover{ background: #6835d1; transform: translateY(-1px); box-shadow: 0px 4px 12px rgba(120, 68, 228, 0.3); }
    /* Ticket Card */
    .musteri-destek-ticket-card, .referans-transaction-card{ display: flex; justify-content: space-between; align-items: center; padding: 20px; background: rgba(249, 250, 251, 0.7); border: 1px solid rgba(234, 234, 237, 0.5); border-radius: 20px; transition: all 0.3s ease; }
    .musteri-destek-ticket-info > div:first-child, .transaction-info > div:first-child, .musteri-siparisler-total-value{ font-weight: 600; color: #33353E; }
    .musteri-destek-ticket-info > div:first-child{ font-size: 15px; line-height: 1.2; }
    .transaction-info > div:first-child{ font-size: 16px; line-height: 1.125; }
    .musteri-destek-ticket-info > div:last-child, .transaction-info > div:last-child{ font-weight: 600; color: #7A7F99; margin: 0; }
    .musteri-destek-ticket-info > div:last-child{ font-size: 13px; line-height: 1.62; }
    .transaction-info > div:last-child{ font-size: 14px; line-height: 1.5085; }
    /* Badge Styles */
    .musteri-destek-ticket-badge{ display: flex; align-items: center; padding: 6px 10px; border-radius: 14px; font-weight: 600; font-size: 14px; line-height: 1.29em; white-space: nowrap; border: 1px dashed; }
    /* Category Badge */
    .musteri-destek-ticket-category{ background: rgba(122, 127, 153, 0.1); border-color: rgba(122, 127, 153, 0.5); color: #7A7F99; font-size: 12px; }
    /* Status Badges */
    .musteri-destek-ticket-status{ font-size: 13px; }
    .musteri-destek-ticket-status.bekliyor{ background: rgba(254, 80, 11, 0.1); border-color: #FE500B; color: #FE500B; }
    .musteri-destek-ticket-status.cevaplandi{ background: rgba(23, 185, 118, 0.1); border-color: #17B976; color: #17B976; }
    .musteri-destek-ticket-status.iptal-edildi{ background: rgba(223, 45, 68, 0.1); border-color: #DF2D44; color: #DF2D44; }
    .musteri-destek-ticket-status.islemde{ background: rgba(253, 186, 32, 0.1); border-color: #FDBA20; color: #FDBA20; }
    /* View Button - Shared with Sipariş Button */
    .musteri-destek-ticket-btn, .musteri-siparis-btn{ display: flex; align-items: center; justify-content: center; padding: 10px 12px; background: #17B976; border: none; border-radius: 12px; font-weight: 600; font-size: 14px; line-height: 1.43; color: #FFFFFF; cursor: pointer; transition: all 0.3s ease; white-space: nowrap; }
    .musteri-destek-ticket-btn:hover, .musteri-siparis-btn:hover{ background: #14A567; transform: translateY(-1px); box-shadow: 0px 4px 12px rgba(23, 185, 118, 0.2); }
    /* Müşteri Paneli - Referans Count Indicator */
    .referans-count-indicator{ display: flex; align-items: center; justify-content: center; width: 90px; height: 42px; background: #F9FAFB; border: 1px solid rgba(234, 234, 237, 0.5); border-radius: 15px; flex-shrink: 0; }
    .referans-count-indicator span{ font-weight: 600; font-size: 14px; line-height: 1.4; color: #666F94; }
    /* Müşteri Paneli - Referans Transactions List */
    .referans-transactions-list{ display: flex; flex-direction: column; gap: 16px; margin-bottom: 20px; }
    .referans-transaction-card{ padding: 25px 20px; cursor: default; }
    .transaction-earning{ display: flex; align-items: center; justify-content: center; padding: 10px 16px; height: 30px; background: transparent; border: 1px solid #17B976; border-radius: 10px; }
    .transaction-earning span{ font-weight: 600; font-size: 14px; line-height: 1.5085714885166712em; color: #17B976; }
    /* ===============================================================
         MÜŞTERİ PANELİ - Siparişler Wrapper & Details Panel
         =============================================================== */
    /* Two-Column Layout Wrapper */
    .musteri-siparisler-wrapper, .musteri-ayarlar-forms-grid{ display: grid; grid-template-columns: 2fr 1fr; gap: 20px; align-items: start; }
    /* Active Order Card State */
    .musteri-siparis-card-active{ background: rgba(249, 250, 251, 1) !important; border-color: rgba(234, 234, 237, 0.5) !important; }
    /* Active Button (filled green) */
    .musteri-siparis-card-active .musteri-siparis-btn, .son-5-siparis .musteri-siparis-card:not(.musteri-siparis-card-active) .musteri-siparis-btn{ background: #17B976; border: none; color: #FFFFFF; }
    .musteri-siparis-card-active .musteri-siparis-btn:hover, .son-5-siparis .musteri-siparis-card:not(.musteri-siparis-card-active) .musteri-siparis-btn:hover, .mesaj-send-btn:hover{ background: #14A567; }
    /* Inactive Button (outline green) */
    .musteri-siparis-card:not(.musteri-siparis-card-active) .musteri-siparis-btn{ background: transparent; border: 1.4px solid #17B976; color: #17B976; }
    /* Order Details Section (Right) */
    .musteri-siparisler-details-header{ display: flex; flex-direction: column; justify-content: center; gap: 8px; align-items: flex-start; padding: 20px; }
    .musteri-siparisler-details-title{ font-weight: 600; font-size: 16px; line-height: 1.13em; color: #33353E; margin: 0; width: 238px; }
    .siparis-order-code{ font-weight: 600; line-height: 1.13em; color: #33353E; }
    .musteri-siparisler-details-date-wrapper{ display: flex; align-items: center; gap: 10px; width: 169px; }
    .musteri-siparisler-details-date{ font-weight: 600; font-size: 14px; line-height: 1.29em; color: #666F94; }
    /* Details Content */
    .musteri-siparisler-details-content{ display: flex; flex-direction: column; gap: 16px; padding: 20px; }
    /* Empty State for Details Panel */
    .musteri-siparisler-details-empty{ display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 20px 0; text-align: center; }
    .musteri-siparisler-details-empty-icon{ width: 32px; height: 32px; flex-shrink: 0; }
    .musteri-siparisler-details-empty-text{ font-weight: 600; font-size: 15px; line-height: 1.33em; color: #7A7F99; margin: 0; }
    /* Service Card */
    .musteri-siparisler-service-card{ display: flex; flex-direction: column; width: 288px; }
    .musteri-siparisler-service-header{ display: flex; align-items: center; gap: 10px; padding: 16px; background: rgba(249, 250, 251, 0.7); border: 1px solid rgba(234, 234, 237, 0.5); border-bottom: none; border-radius: 18px 18px 0px 0px; }
    .service-siparis-title{ font-weight: 600; font-size: 14px; line-height: 1.29em; color: #33353E; margin: 0; flex: 1; }
    /* Service Details */
    .musteri-siparisler-service-details{ display: flex; flex-direction: column; gap: 16px; padding: 16px; background: rgba(249, 250, 251, 0.7); border: 1px solid rgba(234, 234, 237, 0.5); border-radius: 0px 0px 18px 18px; }
    /* Service Row */
    .musteri-siparisler-service-row{ display: flex; align-items: center; gap: 12px; width: 248px; min-height: 40px; }
    .musteri-siparisler-service-icon-wrapper{ width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; border: 1px solid rgba(234, 234, 237, 0.5); border-radius: 12px; }
    .siparis-service-info{ display: flex; flex-direction: column; gap: 4px; flex: 1; width: 193px; }
    .siparisler-label{ font-weight: 600; font-size: 12px; line-height: 1.67em; color: #666F94; opacity: 0.8; margin: 0; }
    .musteri-siparisler-service-value{ font-weight: 600; font-size: 14px; line-height: 1.43em; color: #33353E; margin: 0; }
    .musteri-siparisler-service-link{ width: 143px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    /* Status Colors - Based on Backend Status Classes */
    .musteri-siparisler-service-status.status-success{ color: #17B976; }
    .musteri-siparisler-service-status.status-warning{ color: #F59E0B; }
    .musteri-siparisler-service-status.status-danger{ color: #EF4444; }
    /* Copy Button */
    .musteri-siparisler-copy-btn{ display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; background: transparent; border: none; cursor: pointer; flex-shrink: 0; transition: opacity 0.3s ease; padding: 0; }
    .musteri-siparisler-copy-btn:active{ opacity: 0.5; }
    /* Divider */
    .musteri-siparisler-details-divider{ width: 288px; height: 1px; background: rgba(234, 234, 237, 0.5); }
    /* Total Row */
    .musteri-siparisler-total-row{ width: 248px; }
    /* ===============================================================
         MÜŞTERİ PANELİ - Order Details Bottom Modal (Mobile)
         =============================================================== */
    /* Bottom Modal for Mobile */
    .musteri-siparisler-details-modal{ position: fixed; bottom: 0; left: 0; right: 0; width: 100%; background: var(--bg-light); border-radius: 20px 20px 0 0; box-shadow: 0px -5px 20px 0px rgba(47, 57, 82, 0.15); max-height: 80vh; overflow-y: auto; opacity: 0; visibility: hidden; transform: translateY(100%); transition: all 0.3s ease; z-index: 1000; }
    /* Modal Backdrop */
    .musteri-siparisler-modal-backdrop{ position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); opacity: 0; visibility: hidden; transition: opacity 0.3s ease; z-index: 999; }
    /* ========================================
         ÜYELERE ÖZEL KUPONLAR (CUSTOMER COUPONS)
         ======================================== */
    .kupon{ display: flex; align-items: center; width: 100%; }
    .kupon > div:first-child{ position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 60px; height: 100%; background: var(--primary-purple); border-radius: 20px 0px 0px 20px; }
    .kupon > div:first-child > span{ font-weight: 600; line-height: 1.875em; color: #FFFFFF; writing-mode: vertical-rl; text-orientation: mixed; transform: rotate(180deg); text-align: center; white-space: nowrap; }
    .kupon > div:first-child > div:last-child{ position: absolute; right: -1px; top: 0; width: 0; height: 150px; border-right: 2px dashed #FFFFFF; }
    .kupon-content{ display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-end; gap: 12px; padding: 8px 12px; width: calc(100% - 60px); background: rgba(249, 250, 251, 0.7); border: 1px solid #EAEAED; border-left: 0; border-radius: 0px 16px 16px 0px; }
    .kupon-content > div:first-child{ display: flex; flex-direction: column; justify-content: center; gap: 6px; width: 100%; }
    .kupon-badge{ font-weight: 600; font-size: 14px; line-height: 1.5714em; color: var(--primary-purple); width: 100%; }
    .kupon-content h4{ font-weight: 600; font-size: 18px; line-height: 1.1111em; color: var(--text-primary); margin: 0; width: 100%; }
    .kupon-content p{ font-weight: 600; font-size: 14px; color: #5B5760; margin: 0; width: 100%; line-height: 20px; }
    .btn-copy{ display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 8px; padding: 10px 24px; width: 100%; background: rgba(120, 68, 228, 0.1); border: none; border-radius: 10px; font-weight: 600; font-size: 14px; line-height: 1.4286em; color: var(--primary-purple); cursor: pointer; transition: var(--transition-default); }
    .btn-copy:hover{ background: rgba(120, 68, 228, 0.15); transform: translateY(-1px); }
    /* ========================================
         MÜŞTERİ PANELİ - MEMBERSHIP INFO POPUP
         ======================================== */
    /* Popup Wrapper - Fixed positioning to avoid z-index stacking issues */
    .membership-info-popup{ position: fixed; width: 264.92px; background: #FFFFFF; border-radius: 14.54px; padding: 16.15px; box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.12); z-index: 9999; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.2s ease, visibility 0.2s ease; }
    /* Membership Cards Container */
    .membership-cards-container{ display: flex; flex-direction: column; gap: 12.92px; }
    /* Individual Membership Card */
    .membership-tier-card{ display: flex; align-items: center; gap: 9.69px; padding: 20.19px 16.15px; background: rgba(249, 250, 251, 0.7); border: 0.81px solid rgba(234, 234, 237, 0.5); border-radius: 16.15px; width: 100%; height: 64.62px; box-sizing: border-box; }
    .membership-tier-icon{ width: 45.85px; height: auto; flex-shrink: 0; object-fit: contain; }
    .membership-tier-info{ display: flex; flex-direction: column; gap: 8.08px; }
    .membership-tier-name{ font-weight: 600; font-size: 12.92px; line-height: 1.25em; color: #33353E; margin: 0; }
    .membership-tier-range{ font-weight: 600; font-size: 11.31px; line-height: 1.4285em; color: #7A7F99; margin: 0; }
    /* Müşteri Paneli - Pagination Component */
    .musteri-pagination-wrapper{ display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 16px; margin-top: 10px; }
    .musteri-pagination-info{ font-weight: 600; font-size: 14px; line-height: 1.4285; letter-spacing: 0.005em; color: #B5B7C0; }
    .musteri-pagination-buttons{ display: flex; align-items: center; gap: 6px; }
    .musteri-pagination-btn{ width: 35px; height: 35px; display: flex; justify-content: center; align-items: center; background-color: #FFFFFF; border: none; border-radius: 4px; font-weight: 600; font-size: 12px; line-height: 1.177; color: #4D515A; cursor: pointer; transition: all var(--transition-fast); }
    .musteri-pagination-btn.musteri-pagination-prev, .musteri-pagination-btn.musteri-pagination-next{ border-radius: 50%; }
    .musteri-pagination-btn:hover, .musteri-pagination-btn-active:hover{ transform: translateY(-1px); }
    .musteri-pagination-btn:hover{ background-color: #F5F5F5; }
    .musteri-pagination-btn-active{ background-color: #6C5DD3; color: #F9F9F9; border-radius: 8px; }
    .musteri-pagination-btn-active:hover{ background-color: #5A4BC1; }
    .musteri-pagination-dots{ font-weight: 600; line-height: 1.177; color: #4D515A; text-align: center; padding: 0 8px; }
    /* ========================================
         MÜŞTERİ PANELİ - FAVORİLERİM SECTION
         ======================================== */
    /* Pagination Controls in Header */
    .musteri-pagination-btn-favs{ width: 34px; height: 34px; background: rgba(120, 68, 228, 0.1); border: none; border-radius: 8px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: var(--transition-default); color: var(--primary-purple); }
    .musteri-pagination-btn-favs:hover{ background: rgba(120, 68, 228, 0.2); transform: translateY(-1px); }
    .musteri-pagination-btn-favs:disabled{ opacity: 0.5; cursor: not-allowed; pointer-events: none; }
    .musteri-pagination-btn-favs svg path{ stroke: var(--primary-purple); transition: stroke 0.3s ease; }
    .musteri-pagination-next-active svg path{ stroke: white; }
    .musteri-pagination-next-active:hover{ background: #6C3AC0; }
    /* Favorites Grid Layout */
    .musteri-favoriler-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; width: 100%; }
    /* Smooth transition for card visibility */
    .musteri-favoriler-grid .package-featured-card{ transition: opacity 0.3s ease, transform 0.3s ease; }
    .musteri-favoriler-grid .package-featured-card[style*="display: none"]{ opacity: 0; transform: scale(0.95); }
    /* Light Card Variant for Customer Panel */
    .package-card-light{ background: #FBFCFC !important; border: 1.6px solid rgba(234, 234, 237, 0.5) !important; width: fit-content; }
    .package-card-light .package-icon{ width: 50px; height: 50px; background: var(--primary-purple); border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
    .package-card-light .package-title{ font-weight: var(--fw-semibold); font-size: 16px; line-height: 1.19; color: var(--text-primary); margin: 0; text-align: left; }
    .package-card-light .package-platform{ font-weight: var(--fw-bold); font-size: 14px; line-height: 1.21; color: var(--primary-purple); text-transform: uppercase; text-align: left; }
    .package-card-light .package-feature{ background: rgba(144, 150, 175, 0.05); }
    .package-card-light .package-feature span{ color: #7A7F99; font-size: 13px; }
    /* Active Favorite Button State */
    .package-favorite-btn.package-favorite-active:hover{ filter: brightness(0.9); }
    /* ===============================================================
         MÜŞTERİ PANELİ - DESTEK MESAJLAŞMA (CHAT)
         =============================================================== */
    /* Chat Header */
    .destek-mesajlasma-header{ display: flex; flex-direction: row; justify-content: space-between; align-items: center; padding: 14px 20px; }
    .mesaj-badge{ display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 10px; padding: 10px 12px; height: 42px; background: #F9FAFB; border-radius: 12px; }
    .mesaj-badge span{ font-weight: 600; font-size: 14px; line-height: 1.4286em; color: #7A7F99; }
    /* Messages Wrapper (contains messages + input) */
    .mesajlar-wrapper{ display: flex; flex-direction: column; gap: 20px; padding: 20px; border-radius: 0 0 18px 18px; height: 600px; }
    /* Messages Container */
    .mesajlar{ display: flex; flex-direction: column; gap: 20px; flex: 1; overflow-y: auto; padding-right: 10px; }
    /* Support Messages (Left) */
    .mesaj-support{ align-items: flex-start; }
    /* User Messages (Right) */
    .mesaj-user{ align-self: flex-end; }
    /* Message Header */
    .mesaj-header{ display: flex; flex-direction: row; align-items: center; gap: 10px; width: 370px; margin-bottom: 4px; }
    .mesaj-header > span:first-child{ font-weight: 600; font-size: 14px; line-height: 2.2974em; color: var(--text-primary); }
    .mesaj-header > span:last-child{ font-weight: 600; font-size: 14px; line-height: 1.5541em; color: #7A7F99; }
    /* Message Bubble */
    .mesaj-bubble{ display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 10px; padding: 15px 18px; max-width: 366.51px; }
    .mesaj-bubble p{ font-weight: 600; font-size: 14px; line-height: 1.8041em; margin: 0; max-width: 326.11px; }
    /* Support Bubble (Purple) */
    .mesaj-bubble-support{ background: var(--primary-purple); border-radius: 0px 12px 12px 12px; }
    /* User Bubble (Light Gray) */
    .mesaj-bubble-user{ background: #F9FAFB; border-radius: 12px 0px 12px 12px; }
    /* Message Input Wrapper */
    .mesaj-input-wrapper{ display: flex; flex-direction: row; justify-content: space-between; align-items: center; padding: 0 20px; height: 70px; background: #F9FAFB; border-radius: 12px; cursor: text; }
    .mesaj-input{ flex: 1; font-weight: 600; line-height: 1.625em; color: var(--text-primary); background: transparent; border: none; outline: none; width: 100%; min-height: 30px; }
    .mesaj-input::placeholder{ color: #677894; }
    /* Message Actions */
    .mesaj-actions{ display: flex; flex-direction: row; align-items: center; gap: 35px; }
    /* Attach Button */
    .mesaj-attach-btn{ display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; padding: 0; background: transparent; border: none; cursor: pointer; color: #677894; transition: var(--transition-default); }
    /* Send Button */
    .mesaj-send-btn{ display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 10px; padding: 10px; width: 43px; height: 43px; background: #17B976; border-radius: 10px; border: none; cursor: pointer; transition: var(--transition-default); }
    .mesaj-send-btn svg{ width: 21px; height: 18px; }
    /* ===============================================================
         MÜŞTERİ PANELİ - TALEP OLUŞTUR FORM
         =============================================================== */
    /* Form Container */
    .talep-form-container{ padding: 30px; }
    /* Form Row */
    .talep-row, .referans-confirm-actions{ display: flex; gap: 16px; width: 100%; }
    /* Input Wrapper - Base Styles */
    .talep-input{ display: flex; align-items: center; gap: 15px; padding: 15px; background: #FFFFFF; border: 2px solid rgba(234, 234, 237, 0.5); border-radius: 15px; height: 66px; flex: 1; transition: border-color 0.3s ease, background-color 0.3s ease; position: relative; cursor: text; }
    /* Input Container (for floating label) */
    .talep-input > div:nth-child(3){ display: flex; flex-direction: column; flex: 1; position: relative; min-height: 36px; }
    /* Floating Label */
    .talep-input label{ font-weight: 600; line-height: 1.25; color: #666F94; opacity: 0.8; position: absolute; top: 50%; left: 0; transform: translateY(-50%); transition: all 0.2s ease; pointer-events: none; white-space: nowrap; }
    /* Float label up when input has value or is focused */
    .talep-input.has-value label, .talep-input:focus-within label{ top: -5px; font-size: 12px; line-height: 1.667; opacity: 0.8; transform: translateY(0); }
    /* Input Field */
    .talep-input-field{ font-weight: 600; line-height: 1.25; color: #33353E; border: none; outline: none; background: transparent; padding: 0; width: 100%; transform: translateY(15px); }
    /* Dropdown Selected */
    .talep-dropdown > div:nth-child(3) > div{ font-weight: 600; line-height: 1.25; color: #33353E; transform: translateY(15px); }
    /* Dropdown Placeholder */
    .talep-dropdown > div:nth-child(3) > div span{ color: #666F94; opacity: 0.8; font-weight: 600; }
    /* Show selected text color when has value */
    .talep-dropdown.has-value > div:nth-child(3) > div span{ color: #33353E; opacity: 1; font-weight: 600; }
    /* Dropdown Icon Wrapper */
    .talep-dropdown > div:nth-child(4), .musteri-ayarlar-dropdown-icon{ width: 30px; height: 30px; flex-shrink: 0; transition: transform 0.3s ease; }
    /* Dropdown Menu */
    .talep-dropdown-menu{ position: absolute; top: calc(100% + 8px); left: 0; right: 0; background: #FFFFFF; border: 2px solid rgba(234, 234, 237, 0.5); border-radius: 12px; box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.08); max-height: 240px; overflow-y: auto; z-index: 100; display: none; padding: 8px; }
    /* Dropdown Item */
    .talep-dropdown-item{ padding: 12px; border-radius: 8px; cursor: pointer; transition: background-color 0.3s ease; font-weight: 600; line-height: 1.25; color: #33353E; }
    .talep-dropdown-item.selected{ background: rgba(120, 68, 228, 0.1); font-weight: 600; }
    /* Textarea Specific Styles */
    .talep-input:has(textarea){ height: auto; min-height: 110px; align-items: flex-start; }
    .talep-input:has(textarea) label{ top: 10px; }
    .talep-textarea-field{ resize: none; overflow: auto; min-height: 20px; max-height: 200px; font-weight: 600; line-height: 1.25; color: #33353E; }
    /* Submit Button - Shared Styles */
    .talep-submit, .musteri-ayarlar-submit-btn, .avatar-save-btn{ display: flex; align-items: center; justify-content: center; gap: 16px; padding: 14px; background: #17B976; border: none; border-radius: 12px; cursor: pointer; transition: all 0.3s ease; }
    .talep-submit, .musteri-ayarlar-submit-btn{ width: 218px; height: 50px; align-self: flex-end; margin-top: 0; }
    .musteri-ayarlar-submit-btn{ margin-top: 16px; }
    .avatar-save-btn{ width: 100%; height: 50px; }
    .talep-submit span, .musteri-ayarlar-submit-btn span, .avatar-save-btn span{ font-weight: 600; line-height: 1.19; color: #FFFFFF; }
    .talep-submit:hover, .musteri-ayarlar-submit-btn:hover, .avatar-save-btn:hover{ background: #15a366; transform: translateY(-2px); box-shadow: 0px 8px 16px rgba(23, 185, 118, 0.24); }
    /* ===============================================================
         MÜŞTERİ PANELİ - REFERANS SECTION
         =============================================================== */
    /* Referans Section Container */
    .musteri-referans-section{ display: flex; flex-direction: column; gap: 16px; padding: 0; width: 100%; }
    /* Referral Link Card (Top Card) */
    .referans-link-card{ position: relative; background: #ffffff; border-radius: 20px; height: 84px; display: flex; align-items: center; justify-content: space-between; padding: 16px; box-shadow: 0px 4px 24px rgba(0, 0, 0, 0.05); transition: transform 0.3s ease, box-shadow 0.3s ease; }
    .link-content{ display: flex; align-items: center; gap: 18px; flex: 1; }
    .link-content > div:last-child{ display: flex; flex-direction: column; gap: 7px; flex: 1; }
    .link-content > div:last-child > div:first-child, .stat-content > div:nth-child(2) > div:first-child{ font-weight: 600; font-size: 14px; line-height: 1.27; color: #7a7f99; text-transform: capitalize; }
    .link-content > div:last-child > div:last-child{ font-weight: 600; font-size: 20px; line-height: 19px; color: var(--text-primary); text-transform: capitalize; }
    /* Copy Button */
    .referans-copy-btn{ display: flex; align-items: center; justify-content: center; width: 37px; height: 37px; background: rgba(110, 62, 209, 0.1); border: none; border-radius: 8.88px; cursor: pointer; transition: background 0.3s ease, transform 0.15s ease; flex-shrink: 0; }
    .referans-copy-btn:hover{ background: rgba(110, 62, 209, 0.15); transform: scale(1.05); }
    .referans-copy-btn.copied{ background: rgba(16, 185, 129, 0.15); }
    .referans-copy-btn.copied svg path{ fill: #10B981; }
    /* Stats Grid (3 cards in a row) */
    .referans-stats-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: center; }
    /* Stat Card */
    .stat-card{ background: #ffffff; border-radius: 20px; height: 84px; display: flex; align-items: center; padding: 16px; box-shadow: 0px 4px 24px rgba(0, 0, 0, 0.05); transition: transform 0.3s ease, box-shadow 0.3s ease; }
    .stat-content{ display: flex; align-items: center; gap: 18px; width: 100%; }
    /* Stat Card with Action Button Modifier */
    .stat-card-with-action .stat-content > div:nth-child(2){ padding-right: 104px; }
    /* Convert Button (Inside Bekleyen Kazancın Card) */
    .referans-convert-btn{ position: absolute; right: 16px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; padding: 0; width: 88px; height: 40px; background: var(--primary-purple); border: none; border-radius: 12px; font-weight: 600; font-size: 15px; line-height: 19px; color: #ffffff; text-transform: capitalize; cursor: pointer; transition: background 0.3s ease, transform 0.15s ease; flex-shrink: 0; }
    .referans-convert-btn:hover{ background: #6937c7; transform: translateY(-50%) scale(1.02); }
    .referans-convert-btn:active{ transform: translateY(-50%) scale(0.98); }
    /* ===============================================================
         REFERANS CONFIRM MODAL
         =============================================================== */
    .referans-confirm-modal .modal-dialog, .destek-success-modal .modal-dialog{ max-width: 720px; }
    .referans-confirm-modal-content{ background: #ffffff; border: none; border-radius: 30px; overflow: hidden; }
    .referans-confirm-modal-body, .destek-success-modal .modal-body{ padding: 60px 40px; display: flex; flex-direction: column; align-items: center; gap: 30px; }
    .referans-confirm-modal-body > div:first-child, .destek-success-modal .modal-body > div:first-child{ width: 52px; height: 52px; background: rgba(120, 68, 228, 0.1); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
    .referans-confirm-text h3{ font-weight: 600; font-size: 24px; line-height: 1.21; text-align: center; color: #33353e; margin: 0; }
    .referans-confirm-text p{ font-weight: 600; font-size: 18px; line-height: 1.22; text-align: center; color: #7a7f99; margin: 0; }
    .referans-confirm-actions button{ flex: 1; padding: 10px; border-radius: 14px; border: none; font-weight: 600; font-size: 18px; line-height: 1.19; text-align: center; cursor: pointer; transition: all var(--transition-default); height: 60px; }
    .referans-confirm-actions button:first-child{ background: #f9fafb; border: 1px solid rgba(234, 234, 237, 0.5); color: #7a7f99; }
    .referans-confirm-actions button:first-child:hover{ background: #f0f1f9; border-color: rgba(234, 234, 237, 0.8); }
    .referans-confirm-actions button:last-child{ background: var(--primary-purple); color: #ffffff; }
    .referans-confirm-actions button:last-child:hover{ background: #6837c4; box-shadow: 0px 4px 12px rgba(120, 68, 228, 0.25); }
    /* ========================================
         BAKIYE GEÇMİŞİ (BALANCE HISTORY)
         ======================================== */
    /* Balance History List Container */
    .bakiye-list, .quick-list{ display: flex; flex-direction: column; gap: 16px; padding: 0; margin: 0; }
    /* Balance History Card */
    .bakiye-list > li{ width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 25px 20px; min-height: 80px; background: rgba(249, 250, 251, 0.7); border: 1px solid rgba(234, 234, 237, 0.5); border-radius: 20px; transition: all 0.3s ease; }
    .bakiye-list > li > div:first-child{ display: flex; align-items: flex-end; gap: 10px; }
    .bakiye-list > li > div:first-child > div:last-child > div:first-child{ font-weight: 600; line-height: 1.125; color: #33353E; }
    .bakiye-list > li > div:first-child > div:last-child > div:last-child{ font-weight: 600; font-size: 14px; line-height: 1.5085; color: #7A7F99; }
    /* Status Badge */
    .bakiye-list > li > div:last-child{ display: flex; align-items: center; justify-content: center; padding: 5px 10px; border: 1px solid #1E90FF; border-radius: 10px; font-weight: 600; font-size: 14px; line-height: 1.4; color: #1E90FF; white-space: nowrap; }
    /* ===============================================================
         Müşteri Paneli - Bakiye Yükle Section
         =============================================================== */
    .bakiye-content{ display: flex; flex-direction: column; gap: 16px; align-items: flex-end; }
    /* Quick Amount Selection Buttons */
    .quick-amounts{ display: flex; width: 100%; gap: 10px; padding: 0; margin: 0; }
    .quick-amounts > li{ flex: 1; width: 100%; height: 40px; display: flex; align-items: center; justify-content: center; background: transparent; border: 1.6px solid rgba(234, 234, 237, 0.5); border-radius: 12px; font-weight: 600; font-size: 15px; line-height: 20px; color: var(--text-dark-muted); opacity: 0.8; cursor: pointer; transition: all 0.3s ease; }
    .quick-amounts > li:hover{ border-color: var(--primary-purple); color: var(--primary-purple); }
    .quick-amounts > li.active{ background: rgba(23, 185, 118, 0.06); border: 1.6px solid var(--status-success); color: var(--status-success); }
    .quick-amounts > li > button{ width: 100%; height: 100%; background: transparent; border: none; font-weight: inherit; font-size: inherit; line-height: inherit; color: inherit; cursor: pointer; padding: 0; }
    /* Custom Amount Input */
    .bakiye-input-wrapper{ width: 100%; height: 66px; display: flex; align-items: center; gap: 15px; padding-left: 24.98px; background: #ffffff; border: 2px solid rgba(234, 234, 237, 0.5); border-radius: 14px; cursor: text; }
    .bakiye-input-wrapper > div:first-child{ width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
    .bakiye-input-wrapper > div:nth-child(2){ width: 1px; height: 34px; background: rgba(102, 111, 148, 0.1); flex-shrink: 0; }
    .bakiye-input-wrapper > div:last-child, .packages-banner > .banner-text{ display: flex; flex-direction: column; gap: 2px; flex: 1; }
    .bakiye-input-wrapper label{ font-weight: 600; font-size: 14px; line-height: 20px; color: var(--text-dark-muted); opacity: 0.8; }
    .bakiye-input-wrapper input{ font-weight: 600; line-height: 20px; color: var(--text-primary); border: none; outline: none; background: transparent; padding: 0; width: 100%; }
    .bakiye-input-wrapper input[type="number"]{ -moz-appearance: textfield; appearance: textfield; }
    /* Payment Methods */
    .payment-methods{ width: 100%; display: flex; flex-direction: column; gap: 16px; padding: 0; margin: 0; }
    .payment-methods > li{ width: 100%; display: flex; align-items: center; gap: 10px; padding: 16px; background: rgba(249, 250, 251, 0.7); border: 1px solid rgba(228, 231, 235, 0.5); border-radius: 14px; cursor: pointer; transition: all 0.3s ease; }
    .payment-methods > li.active{ background: rgba(120, 68, 228, 0.1); border: 1px solid var(--primary-purple); }
    .payment-methods > li > div:first-child, .table-cell-check svg{ width: 30px; height: 30px; flex-shrink: 0; }
    /* Default state - gray background, dark icons */
    .payment-methods > li > div:first-child svg rect{ fill: #E4E7EB80; transition: fill 0.3s ease; }
    .payment-methods > li > div:first-child svg path{ fill: #33353e; transition: fill 0.3s ease; }
    /* Active state - purple background, purple icons */
    .payment-methods > li.active > div:first-child svg rect{ fill: rgba(120, 68, 228, 0.1); }
    .payment-methods > li > div:last-child > div:first-child{ font-weight: 600; font-size: 16px; line-height: 20.25px; color: var(--text-primary); }
    .payment-methods > li > div:last-child > div:last-child{ font-weight: 600; font-size: 14px; line-height: 18px; color: var(--text-dark-muted); }
    /* Payment Button */
    .payment-btn{ width: 218px; height: 50px; display: flex; align-items: center; justify-content: space-between; padding: 0 14px; background: #17B976; border: none; border-radius: 12px; cursor: pointer; transition: all 0.3s ease; }
    .payment-btn:hover{ background: #15a066; box-shadow: 0 4px 12px rgba(23, 185, 118, 0.25); }
    .payment-btn span{ font-weight: 600; line-height: 19.09px; color: #ffffff; }
    /* ===============================================================
         MÜŞTERİ PANELİ - AYARLAR (SETTINGS)
         =============================================================== */
    .musteri-ayarlar-form{ gap: 0; }
    /* Override auth-form min-height for settings forms */
    .musteri-ayarlar-form .auth-input-wrapper{ min-height: 66px !important; height: 66px; border-radius: 15px !important; }
    /* Form Rows */
    .musteri-ayarlar-form-row{ display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
    .musteri-ayarlar-form-row-triple{ grid-template-columns: 1fr 1fr 1fr; }
    /* Dropdown Wrapper */
    .musteri-ayarlar-dropdown-wrapper{ position: relative; cursor: pointer; padding: 15px !important; }
    .musteri-ayarlar-dropdown-wrapper .auth-input-container{ flex-direction: column; align-items: flex-start; gap: 4px; flex: 1; }
    /* Dropdown labels are ALWAYS on top (like Figma) */
    .musteri-ayarlar-dropdown-wrapper .auth-input-label{ position: static !important; font-weight: 600; font-size: 14px !important; color: #666F94; opacity: 0.8 !important; transform: none !important; pointer-events: none; padding: 0; height: 12px; transition: none !important; }
    .musteri-ayarlar-dropdown-value{ font-weight: 600; line-height: 1.25; color: #33353E; height: 20px; display: flex; align-items: center; }
    /* Dropdown Menu */
    .musteri-ayarlar-dropdown-menu{ position: absolute; top: calc(100% + 8px); left: 0; right: 0; background: #FFFFFF; border: 2px solid rgba(234, 234, 237, 0.5); border-radius: 14px; box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.08); max-height: 240px; overflow-y: auto; z-index: 100; display: none; padding: 8px; }
    .musteri-ayarlar-dropdown-option{ padding: 12px; font-weight: 600; font-size: 14px; line-height: 1.43; color: #33353E; border-radius: 8px; cursor: pointer; transition: background-color 0.2s ease; }
    .musteri-ayarlar-dropdown-option:hover{ background: #F9FAFB; }
    .musteri-ayarlar-dropdown-option.selected{ background: #F6F7FB; font-weight: 600; }
    /* Phone Wrapper Override */
    .musteri-ayarlar-phone-wrapper{ padding: 15px 15px 15px 10px !important; }
    .musteri-ayarlar-phone-wrapper .auth-country-selector{ background: rgba(234, 234, 237, 0.5); border-radius: 14px; padding: 10px; min-width: 83px; height: 46px; }
    /* Textarea Wrapper */
    .musteri-ayarlar-textarea-wrapper{ align-items: flex-start !important; min-height: auto !important; height: auto !important; padding: 15px !important; }
    .musteri-ayarlar-textarea-wrapper .auth-input-label{ position: absolute; top: 50%; transform: translateY(-50%); line-height: 1.25; color: #666F94; opacity: 1; transition: all 0.2s ease; }
    .musteri-ayarlar-textarea-wrapper:focus-within .auth-input-label, .musteri-ayarlar-textarea-wrapper.has-value .auth-input-label{ top: 15px; transform: translateY(0); font-size: 14px; line-height: 1.43; opacity: 0.8; }
    .musteri-ayarlar-textarea{ resize: vertical; min-height: 60px; font-weight: 600; line-height: 1.25; padding: 0; transition: padding 0.2s ease; }
    .musteri-ayarlar-textarea-wrapper:focus-within .musteri-ayarlar-textarea, .musteri-ayarlar-textarea-wrapper.has-value .musteri-ayarlar-textarea{ padding-top: 16px; }
    /* Password Section Specific */
    .password-section .auth-form-group{ margin-bottom: 16px; }
    /* Regular input labels - Float up only when focused or has value */
    .musteri-ayarlar-form .auth-input-wrapper:not(.musteri-ayarlar-dropdown-wrapper) .auth-input-label{ position: absolute; top: 50%; transform: translateY(-50%); font-size: 16px; line-height: 1.25; color: #666F94; opacity: 1; transition: all 0.2s ease; }
    /* Float label up when input has focus or value */
    .musteri-ayarlar-form .auth-input-wrapper:not(.musteri-ayarlar-dropdown-wrapper):focus-within .auth-input-label, .musteri-ayarlar-form .auth-input-wrapper:not(.musteri-ayarlar-dropdown-wrapper).has-value .auth-input-label{ top: -5px; transform: translateY(0); font-size: 14px; line-height: 1.43; opacity: 0.8; }
    /* Ensure input text doesn't overlap with floated label */
    .musteri-ayarlar-form .auth-input-wrapper:not(.musteri-ayarlar-dropdown-wrapper):focus-within .auth-input, .musteri-ayarlar-form .auth-input-wrapper:not(.musteri-ayarlar-dropdown-wrapper).has-value .auth-input{ padding-top: 8px; }
    /* ========================================
         MÜŞTERI PANEL SECTION UTILITIES (Reusable)
         ======================================== */
    .justify-between{ justify-content: space-between; }
    /* Base Müşteri Section Wrapper - Use for any boxed section in customer panel */
    .musteri-section-container{ display: flex; flex-direction: column; padding: 0; }
    /* Müşteri Section Header - Divider style header with bottom border */
    .musteri-section-header, .musteri-destek-list .musteri-section-header{ display: flex; align-items: center; padding: 20px; background: #FFFFFF; border-bottom: 1px solid rgba(234, 234, 237, 0.5); border-radius: 18px 18px 0px 0px; justify-content: space-between; }
    .musteri-siparisler-details-section .musteri-section-header{ align-items: start; }
    /* Müşteri Section Header Title */
    .musteri-section-header h3{ font-weight: 600; font-size: 16px; line-height: 1.19em; margin: 0; }
    /* Müşteri Section Content - Body area with bottom rounded corners */
    .musteri-section-content{ padding: 20px; background: #FFFFFF; border-radius: 0px 0px 18px 18px; }
    /* Müşteri Section with Full Border - Alternative style with complete border */
    .musteri-section-container-bordered .musteri-section-header{ border-bottom: 1px solid rgba(234, 234, 237, 0.5); border-radius: 18px 18px 0px 0px; }
    .musteri-section-container-bordered .musteri-section-content{ border-radius: 0px 0px 18px 18px; }

    /* ----------------------------------------
         AUTH PHONE INPUT (contact, cart, settings)
         ---------------------------------------- */
    .auth-phone-wrapper{ position: relative; }
    .auth-phone-input{ font-weight: 600; line-height: 1.2; }
    /* Country Selector */
    .auth-country-selector{ display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: #EAEAED80; border: none; border-radius: 8px; cursor: pointer; transition: all 0.3s ease; flex-shrink: 0; }
    .auth-country-selector:hover{ opacity: 0.8; }
    .auth-country-selector svg:first-child{ width: 24px; height: 24px; flex-shrink: 0; border-radius: 50%; }
    .country-code-text{ font-weight: 600; line-height: 1.2; }
    /* Country Dropdown Menu */
    .country-dropdown-menu{ position: absolute; top: calc(100% + 8px); left: 0; right: 0; background: #FFFFFF; border: 2px solid rgba(234, 234, 237, 0.5); border-radius: 12px; box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.08); max-height: 240px; overflow-y: auto; z-index: 100; display: none; padding: 8px; width: fit-content; }
    .country-dropdown-item{ display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 8px; cursor: pointer; transition: all 0.3s ease; }
    .country-dropdown-item:hover{ background: rgba(120, 68, 228, 0.05); }
    .country-dropdown-item.selected{ background: rgba(120, 68, 228, 0.1); }
    .country-name{ flex: 1; font-weight: 600; font-size: 14px; color: #33353E; }
    .country-dropdown-item .country-code{ font-weight: 600; font-size: 14px; color: #666F94; }
    /* Iletisim textarea divider */
    .iletisim-textarea-wrapper .auth-input-divider{ height: 100%; min-height: 20px; }

/* ========================================
   RENKLI SLIDER COMPONENT
   ======================================== */
.renkli-slider{max-width:1214px;margin:60px auto;padding:0 16px}
.renkli-tabs{display:flex;align-items:flex-end;gap:16px}
.renkli-tab{width:230px;height:241px;background:#fff;border:1px solid #e5e5e5;border-radius:20px;padding:10px;cursor:pointer;transition:all .3s ease;display:flex;flex-direction:column;position:relative;overflow:hidden}
.renkli-tab:hover:not(.active){transform:translateY(-4px);box-shadow:0 8px 24px rgba(0,0,0,.08)}
.renkli-tab.active{background:var(--theme-bg);border-color:var(--theme-accent);border-radius:20px 20px 0 0;border-bottom:none;z-index:2;margin-bottom:-17px;padding-bottom:26px;overflow:visible}
.renkli-tab.active::before,.renkli-tab.active::after{content:"";position:absolute;width:30px;height:30px;bottom:0}
.renkli-tab.active::before{left:-30px;background:radial-gradient(circle at 0% 0%, transparent 68.8%, var(--theme-accent) 71%, var(--theme-accent) 72%, var(--theme-bg) 72.1%)}
.renkli-tab.active::after{right:-30px;background:radial-gradient(circle at 100% 0%, transparent 68.8%, var(--theme-accent) 71%, var(--theme-accent) 72%, var(--theme-bg) 72.1%)}
.renkli-tab[data-first="1"].active::before{display:none}
.renkli-tab[data-last="1"].active::after{display:none}
.renkli-tab img{width:100%;object-fit:contain;margin-bottom:12px;border-radius:12px;padding:10px;padding-bottom:0;background:var(--theme-accent)}
.renkli-content{display:none;background:var(--theme-bg);border:1px solid var(--theme-accent);border-radius:30px;min-height:400px;margin-top:16px;position:relative;z-index:1}
.renkli-content.active{display:flex}
.renkli-left{flex:1;padding:50px;display:flex;flex-direction:column;justify-content:center}
.renkli-badge{display:inline-flex;align-items:center;gap:10px;padding:10px;border:1px solid var(--theme-accent);border-radius:53px;width:fit-content;margin-bottom:24px}
.renkli-badge-icon{width:30px;height:30px;border-radius:35px;background:var(--theme-accent);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.renkli-badge-icon svg{width:16px;height:16px;color:#fff}
.renkli-left h2 span{color:var(--theme-accent)}
.renkli-left>p{font:500 20px/30px;color:#666f94;margin:0;max-width:484px}
.renkli-right{width:550px;display:flex;align-items:center;justify-content:center;border-radius:0 30px 30px 0;margin-right:30px}
.renkli-right img{max-width:100%;height:auto;object-fit:contain}

/* New Hero Section */
.new-hero{padding:38px 0 0;}
.new-hero .hero-content{display:flex;flex-direction:column;align-items:center;gap:24px;text-align:center;}
.new-hero h1{font-weight:700;font-size:54px;line-height:61px;letter-spacing:-0.48px;color:#2c323e;margin-bottom:0;}
@media (min-width:1471px){.new-hero h1{white-space:nowrap;}}
.new-hero h1 span{background:linear-gradient(90deg,#6400d9 0%,#ff55f8 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.new-hero p{font-weight:500;font-size:18px;line-height:27px;letter-spacing:-0.16px;color:#484f5e;max-width:539px;margin:0;}
.new-hero p strong{color:#10b981;font-weight:500;}
.hero-indicators{display:flex;justify-content:center;align-items:center;gap:24px;}
.hero-indicators>div{display:flex;align-items:center;}
.hero-indicators>div:first-child{gap:2px;padding-right:24px;border-right:1px solid rgba(126,129,156,0.3);}
.hero-indicators>div:first-child svg{width:27px;height:27px;}
.hero-indicators>div:last-child{padding:0 0 0 24px;border-left:1px solid rgba(126,129,156,0.3);padding-right:70px;}
.hero-indicators>div:last-child svg{width:74px;height:36px;}
.delivery-notification{padding:16px 20px;gap:24px;background:linear-gradient(180deg,#d1fae5 0%,#ecfdf5 100%);border-radius:12px;}
.delivery-notification>div{display:flex;align-items:center;}
.delivery-notification>div:first-child{gap:12px;}
.delivery-notification>div:first-child>div:first-child{position:relative;width:10px;height:10px;background:#34d399;border-radius:50%;flex-shrink:0;}
.delivery-notification>div:first-child>div:first-child::before,.delivery-notification>div:first-child>div:first-child::after{content:"";position:absolute;top:0;left:0;width:10px;height:10px;background:#34d399;border-radius:50%;opacity:0.6;animation:livePulse 2s ease-out infinite;}
.delivery-notification>div:first-child>div:first-child::after{animation-delay:1s;}
@keyframes livePulse{0%{transform:scale(1);opacity:0.6;}100%{transform:scale(2.5);opacity:0;}}
.delivery-notification>div:first-child>div:last-child,.delivery-notification>div:last-child>div:last-child{position:relative;height:20px;overflow:hidden;}
.delivery-notification>div:first-child>div:last-child{min-width:160px;}
.delivery-notification>div:last-child>div:last-child{min-width:80px;}
.delivery-notification>div:first-child span{font-weight:600;font-size:14px;line-height:20px;letter-spacing:-0.16px;color:#065f46;display:block;white-space:nowrap;}
.delivery-notification>div:last-child span{font-weight:400;font-size:14px;line-height:20px;letter-spacing:-0.16px;color:#065f46;display:block;white-space:nowrap;}
.delivery-notification>div:first-child span.slide-out,.delivery-notification>div:last-child span.slide-out,.delivery-notification>div:last-child>div:first-child>div.slide-out{animation:slideOut 0.4s ease-in-out forwards;}
.delivery-notification>div:first-child span.slide-in,.delivery-notification>div:last-child span.slide-in,.delivery-notification>div:last-child>div:first-child>div.slide-in{animation:slideIn 0.4s ease-in-out forwards;}
@keyframes slideOut{0%{transform:translateY(0);opacity:1;}100%{transform:translateY(-100%);opacity:0;}}
@keyframes slideIn{0%{transform:translateY(100%);opacity:0;}100%{transform:translateY(0);opacity:1;}}
.delivery-notification>div:last-child{gap:8px;}
.delivery-notification>div:last-child>div:first-child{position:relative;width:20px;height:20px;overflow:hidden;flex-shrink:0;}
.delivery-notification>div:last-child>div:first-child>div{display:flex;justify-content:center;align-items:center;width:20px;height:20px;background:#fff;box-shadow:0px 1px 2px rgba(127,148,189,0.1);border-radius:50%;}
.delivery-notification>div:last-child>div:first-child svg{width:12px;height:9px;}

/* Package Selection */
.package-selection{padding:40px 0; background: linear-gradient(180deg, #eff0fc 0%, #ffffff 20%, #ffffff 80%, #eff0fc 100%);}
.package-container{display:flex;flex-direction:column;align-items:center;gap:40px;max-width:1072px;margin:0 auto;}
.vip-toggle{position:relative;display:flex;padding:2px;max-width:400px;width:100%;height:52px;background:rgba(255,255,255,0.002);box-shadow:0px 0px 0px 1.5px #d3d8e0,0px 18px 7px rgba(127,148,189,0.01),0px 10px 6px rgba(127,148,189,0.05),0px 5px 5px rgba(127,148,189,0.09),0px 1px 2px rgba(127,148,189,0.1);border-radius:9999px;isolation:isolate;overflow:hidden;cursor:pointer;transition:box-shadow 0.3s ease;}
.vip-toggle.active{box-shadow:0px 0px 0px 1.5px rgb(149 46 255/1),0px 18px 7px rgba(107,33,168,0.01),0px 10px 6px rgba(107,33,168,0.05),0px 5px 5px rgba(107,33,168,0.09),0px 1px 2px rgba(107,33,168,0.1);}
.vip-toggle::before{content:"";display:block;background:linear-gradient(90deg,rgba(195,0,255,0) 0%,#c300ff 50%,rgba(195,0,255,0) 100%);height:400px;width:400px;position:absolute;animation:rotate 2s linear infinite;z-index:0;top:0;left:50%;transform-origin:center;opacity:0.6;}
.vip-toggle.active::before{animation:none;opacity:0;}
.vip-toggle > div{z-index:1;position:relative;}
.vip-toggle > div:first-child{display:flex;align-items:center;padding:12px;gap:16px;width:100%;background:#fff;border-radius:9999px;}
.vip-toggle > div:first-child > div:first-child{position:relative;width:44px;height:24px;background:#d3d8e0;box-shadow:0px 0px 0px 1.5px rgba(126,129,156,0.35);border-radius:9999px;transition:background 0.3s ease;flex-shrink:0;pointer-events:none;}
.vip-toggle.active > div:first-child > div:first-child{background:#fff;box-shadow:0px 0px 0px 1.5px #d3d8e0;border:1px solid rgb(149 46 255/1);}
.vip-toggle > div:first-child > div:first-child > div{position:absolute;width:20px;height:20px;left:2px;top:50%;transform:translateY(-50%);background:#fff;border:1px solid #d3d8e0;box-shadow:0px 16.125px 6.271px rgba(127,148,189,0.01),0px 8.958px 5.375px rgba(127,148,189,0.05),0px 4.479px 4.479px rgba(127,148,189,0.09),0px 0.896px 1.792px rgba(127,148,189,0.1);border-radius:9999px;transition:left 0.3s ease;}
.vip-toggle.active > div:first-child > div:first-child > div{left:calc(100% - 22px);background:rgb(149 46 255/1);}
.vip-toggle > div:first-child > div:nth-child(2){font-weight:600;font-size:13px;line-height:20px;letter-spacing:-0.16px;color:#2a303c;flex-grow:1;transition:color 0.3s ease;}
.vip-toggle.active > div:first-child > div:nth-child(2){color:#6b21a8;}
.vip-toggle > div:first-child > div:last-child,.tab-help,.pkg-feature-header-help{display:flex;justify-content:center;align-items:center;width:16px;height:16px;box-shadow:0px 16.125px 6.271px rgba(127,148,189,0.01),0px 8.958px 5.375px rgba(127,148,189,0.05),0px 4.479px 4.479px rgba(127,148,189,0.09),0px 0.896px 1.792px rgba(127,148,189,0.1);border-radius:9999px;font-weight:700;font-size:11px;cursor:help;flex-shrink:0;}
.vip-toggle > div:first-child > div:last-child{background:#7e819c;line-height:16px;color:#fff;}
.tab-help{position:absolute;right:10px;top:20px;background:#fff;line-height:15px;color:#296ff9;z-index:2;}
.pkg-feature-header-help{position:absolute;right:10px;top:20px;background:#fff;line-height:20px;color:#296ff9;}
.pkg-tab:nth-child(3) .tab-help,.pkg-feature-card:nth-child(3) .pkg-feature-header-help{color:#952eff;}
@keyframes rotate{0%{transform:translate(-50%,-50%) rotate(0deg);}100%{transform:translate(-50%,-50%) rotate(360deg);}}
.package-selector{position:relative;width:100%;max-width:400px;}
.package-tabs{display:flex;justify-content:start;gap:13px;position:relative;margin-bottom:-10px;}
.package-tabs:has(.pkg-tab:nth-child(3)){justify-content:space-between;}
.pkg-tab{position:relative;flex:1;padding:18px 16px 18px;background:#fff;border:none;border-radius:12px 12px 0 0;font-weight:700;font-size:14px;line-height:19px;letter-spacing:-0.16px;color:#2a303c;cursor:pointer;transition:all 0.3s ease;isolation:isolate; max-width: 124px;}
.pkg-tab:nth-child(1){border:2px solid #d3d8e0;}
.pkg-tab.active{border:2px solid #d3d8e0;border-bottom:none;z-index:3;}
.pkg-tab.active::after{content:'';position:absolute;bottom:-2px;left:0;right:-2px;height:10px;background:#fff;}
.pkg-tab.active:only-child::after{right:-2px;}
.pkg-tab:nth-child(2){background:linear-gradient(103.16deg,#296ff9 0%,#59cefc 100%);color:#fff;}
.pkg-tab.active:nth-child(2){border-color:rgb(0 86 255);}
.pkg-tab:nth-child(2)::after{left:-2px;}
.pkg-tab:nth-child(2):last-child::after{left:-2px;}
.pkg-tab:nth-child(3){background:linear-gradient(103.16deg,#952eff 0%,#bf81ff 100%);color:#fff;}
.pkg-tab.active:nth-child(3){border-color:rgb(126 0 255);}
.pkg-tab:nth-child(3)::after{left:-2px; right: 0;}
.tab-badge{position:absolute;right:8px;top:-10px;padding:5px 6px;background:linear-gradient(90deg,#ffa567 0%,#ff4330 100%);border-radius:6px;font-weight:700;font-size:10px;line-height:10px;letter-spacing:0.25px;text-transform:uppercase;color:#fff;z-index:1;}
.pkg-feature-card{position:relative;display:flex;flex-direction:column;gap:16px;flex:1;max-width:190px;height:310px;background:#fff;box-shadow:inset 0px 0px 0px 1px #d3d8e0;border-radius:12px;cursor:pointer;transition:all 0.3s ease;}
.pkg-feature-card .tab-badge{display:none;}
.pkg-feature-checkbox{display:none;flex-direction:row;justify-content:center;align-items:center;position:absolute;width:24px;height:24px;right:8px;bottom:8px;background:rgba(255,255,255,0.002);box-shadow:inset 0px 0px 0px 1px #d3d8e0;border-radius:8px;z-index:3;transition:all 0.3s ease;}
.pkg-feature-card.active-tab .pkg-feature-checkbox{background:linear-gradient(180deg,#ff4330 0%,#ffa567 100%);box-shadow:none;}
.pkg-feature-checkbox svg{width:12px;height:9px;opacity:0;transition:opacity 0.3s ease;}
.pkg-feature-card.active-tab .pkg-feature-checkbox svg{opacity:1;}
.pkg-grid-wrapper{width:100%;max-width:400px;background:#fff;border:2px solid #d3d8e0;padding:24px 16px;transition:border-color 0.3s ease,border-radius 0.3s ease;position:relative;z-index:1;display:none;}
.pkg-grid-wrapper.type-index-1{border-color:#d3d8e0;border-radius:0 12px 12px 12px;}
.pkg-grid-wrapper.type-index-2{border-color:#296ff9;border-radius:12px;}
.pkg-grid-wrapper.type-index-3{border-color:#952eff;border-radius:12px 0 12px 12px;}
.pkg-grid-wrapper.active{display:block;}
.pkg-grid-wrapper[data-grid="high-quality"]{border-radius:0 12px 12px 12px;}
.pkg-grid-wrapper[data-grid="active"]{border-radius:12px;border-color:rgb(41 111 249/1);}
.pkg-grid-wrapper[data-grid="vip"]{border-radius:12px 0 12px 12px;border-color:rgb(149 46 255/1);}
.pkg-grid-content{display:flex;flex-direction:column;align-items:center;gap:24px;}
.pkg-grid{position:relative;display:flex;flex-wrap:wrap;gap:8px;width:100%;justify-content:center;}
.pkg-btn{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:6px;background:rgba(211,216,224,0.2);box-shadow:inset 0px 0px 0px 1.5px rgba(126,129,156,0.3);border-radius:12px;cursor:pointer;transition:all 0.3s ease;border:none;flex:0 0 calc(25% - 6px);max-width:calc(25% - 6px); height: 72px;}
.pkg-btn:hover:not(.selected){background:rgba(211,216,224,0.3);}
.pkg-btn:has(.pkg-badge-animated){overflow:hidden;isolation:isolate;}
.pkg-btn.has-badge:not(.selected):before{content:"";position:absolute;top:50%;left:50%;width:150%;height:150%;z-index:0;transform:translate(-50%,-50%);transform-origin:center;animation:rotate 1.25s cubic-bezier(0.645,0.045,0.355,1) infinite;background:var(--rotating-gradient);opacity:0.4;pointer-events:none;}
.pkg-btn:has(.pkg-badge-animated):not(.selected):after{content:"";position:absolute;top:2px;left:2px;right:2px;bottom:2px;z-index:1;border-radius:10px;background:rgba(246,247,250,0.98);transition:opacity 0.3s ease;pointer-events:none;}
.pkg-btn:has(.pkg-badge-animated).selected:before,.pkg-btn:has(.pkg-badge-animated).selected:after{opacity:0;}
.pkg-btn:has(.pkg-badge-animated) > span:not(.pkg-badge){position:relative;z-index:2;}
.pkg-grid-wrapper.type-index-1 .pkg-btn.selected{background:linear-gradient(109.13deg,#ffa567 0%,#ff4330 100%);box-shadow:none;}
.pkg-grid-wrapper.type-index-2 .pkg-btn.selected{background:linear-gradient(103.16deg,#296ff9 0%,#59cefc 100%);box-shadow:none;}
.pkg-grid-wrapper.type-index-3 .pkg-btn.selected{background:linear-gradient(103.16deg,#952eff 0%,#bf81ff 100%);box-shadow:none;}
.pkg-badge{position:absolute;top:0;left:0;right:0;padding:4px 8px;border-radius:12px 12px 0 0;font-weight:700;font-size:9px;line-height:9px;letter-spacing:0.225px;text-transform:uppercase;text-align:center;color:#fff;overflow:hidden;perspective:200px;transform-style:preserve-3d;z-index:3;}
.pkg-badge-animated{display:block;}
.pkg-badge-black{color:#fff;}
.pkg-btn > span:first-of-type:nth-last-of-type(2){font-weight:700;font-size:19px;line-height:19px;letter-spacing:-0.475px;text-align:center;color:#2c323e;} /* amount */
.pkg-btn > span:last-of-type:nth-of-type(2){font-weight:600;font-size:12px;line-height:16px;letter-spacing:-0.16px;text-align:center;color:#ff5c00;transition:color 0.3s ease;} /* label */
.pkg-btn > span:nth-of-type(2):not(:last-of-type){font-weight:700;font-size:19px;line-height:19px;letter-spacing:-0.475px;text-align:center;color:#2c323e;} /* amount */
.pkg-btn > span:nth-of-type(3){font-weight:600;font-size:12px;line-height:16px;letter-spacing:-0.16px;text-align:center;color:#ff5c00;transition:color 0.3s ease;} /* label */
.pkg-btn.selected > span:not(.pkg-badge){color:#fff;}
.pkg-grid-wrapper.type-index-2 .pkg-btn:not(.selected) > span:last-of-type{color:rgb(41 111 249/1);}
.pkg-grid-wrapper.type-index-3 .pkg-btn:not(.selected) > span:last-of-type{color:rgb(149 46 255/1);}
.price-box-btn{position:relative;display:flex;justify-content:center;align-items:center;padding:14px 24px;width:100%;background:linear-gradient(90deg,#ffa567 0%,#ff4330 100%);border-radius:8px;border:none;cursor:pointer;transition:transform 0.2s ease,box-shadow 0.2s ease;font-weight:800;font-size:15px;line-height:20px;letter-spacing:0.15px;text-transform:uppercase;color:#fff;overflow:hidden;text-decoration:none;}
.price-box-btn:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(45deg,transparent 25%,rgba(255,255,255,0.4) 50%,transparent 75%);transition:left 0.3s;animation:button-gradient-glow 2s ease infinite;}
@keyframes button-gradient-glow{0%{left:-100%;}50%{left:100%;}100%{left:100%;}}
.pkg-grid-wrapper.type-index-2 .price-box-btn{background:linear-gradient(103.16deg,#296ff9 0%,#59cefc 100%);}
.pkg-grid-wrapper.type-index-3 .price-box-btn{background:linear-gradient(103.16deg,#952eff 0%,#bf81ff 100%);}
.price-box-btn:hover{transform:translateY(-2px);box-shadow:0px 8px 16px rgba(255,67,48,0.3);color:#fff;}      .pkg-grid-wrapper.type-index-2 .price-box-btn:hover{box-shadow:0px 8px 16px rgba(41,111,249,0.3);}
.pkg-grid-wrapper.type-index-3 .price-box-btn:hover{box-shadow:0px 8px 16px rgba(149,46,255,0.3);}
.save-amount{font-weight:700;font-size:14px;line-height:20px;letter-spacing:-0.16px;text-align:center;color:#ff5c00;transition:color 0.3s ease;margin-bottom:-12px;}
.pkg-grid-wrapper.type-index-2 .save-amount{color:#296ff9;}
.pkg-grid-wrapper.type-index-3 .save-amount{color:#952eff;}
.pkg-feature-cards{display:flex;justify-content:center;gap:16px;width:100%;max-width:600px;}
.pkg-feature-header{padding:12px 16px 10px;border-radius:12px 12px 0 0;font-weight:700;font-size:14px;line-height:20px;letter-spacing:-0.16px;color:#7e819c;position:relative;transition:background 0.3s ease,color 0.3s ease;}
.pkg-feature-card:nth-child(1) .pkg-feature-header{background:#d3d8e033;}
.pkg-feature-card:nth-child(2):not(.active-tab) .pkg-feature-header{background:#2c323e;color:#fff;}
.pkg-feature-card:nth-child(2).active-tab .pkg-feature-header,.pkg-feature-card:nth-child(3):not(.active-tab) .pkg-feature-header,.pkg-feature-card:nth-child(3).active-tab .pkg-feature-header{color:#fff;}
.pkg-feature-card:nth-child(2).active-tab .pkg-feature-header{background:linear-gradient(103.16deg,#296ff9 0%,#59cefc 100%);}
.pkg-feature-card:nth-child(3):not(.active-tab) .pkg-feature-header,.pkg-feature-card:nth-child(3).active-tab .pkg-feature-header{background:linear-gradient(96.8deg,#952eff 0%,#bf81ff 100%);}
.pkg-feature-list{display:flex;flex-direction:column;gap:9.5px;padding:0 8px 3px;}
.pkg-feature-item{display:flex;align-items:flex-start;gap:8px;font-size:12px;line-height:16px;letter-spacing:-0.16px;color:#7e819c;}
.pkg-feature-icon{width:12px;height:16px;flex-shrink:0;margin-top:2px;}
.pkg-feature-icon svg{width:12px;height:11px;margin-bottom:5px;}
.pkg-feature-icon svg path{fill:#77778E;}
.pkg-feature-card:nth-child(3) .pkg-feature-icon svg path{fill:#AD5CFF;}
.pkg-feature-item strong{font-weight:700;}
.pkg-feature-link{text-decoration:underline;cursor:pointer;}
.pkg-feature-link:hover{color:#296ff9;}
.pkg-feature-card:nth-child(1).active-tab{box-shadow:inset 0px 0px 0px 2px #ff5c00;}
.pkg-feature-card:nth-child(2).active-tab{box-shadow:inset 0px 0px 0px 2px rgb(41 111 249/1);}
.pkg-feature-card:nth-child(3).active-tab{box-shadow:inset 0px 0px 0px 2px rgb(149 46 255/1);}

.hero-indicators{display:flex;justify-content:center;align-items:center;gap:24px;}
.hero-indicators>div{display:flex;align-items:center;}
.hero-indicators>div:first-child{gap:2px;padding-right:24px;border-right:1px solid rgba(126,129,156,0.3);}
.hero-indicators>div:first-child svg{width:27px;height:27px;}
@media (max-width:1024px){.new-hero h1{font-size:28px;line-height:34px;white-space:normal;}.new-hero p{font-size:16px;line-height:24px;padding:0 16px;}.hero-indicators{flex-wrap:wrap;gap:16px;}.hero-indicators>div:first-child{order:1;padding-right:16px;border-right:none;margin-left:auto;}.delivery-notification{order:3;width:100%;justify-content:center;}.hero-indicators>div:last-child{order:2;padding:0 0 0 16px;border-left:none;padding-right:0;}}
.delivery-notification{padding:16px 20px;gap:24px;background:linear-gradient(180deg,#d1fae5 0%,#ecfdf5 100%);border-radius:12px;}
.delivery-notification>div{display:flex;align-items:center;}
.delivery-notification>div:first-child{gap:12px;}
.delivery-notification>div:first-child>div:first-child{position:relative;width:10px;height:10px;background:#34d399;border-radius:50%;flex-shrink:0;}
.delivery-notification>div:first-child>div:first-child::before,.delivery-notification>div:first-child>div:first-child::after{content:"";position:absolute;top:0;left:0;width:10px;height:10px;background:#34d399;border-radius:50%;opacity:0.6;animation:livePulse 2s ease-out infinite;}
.delivery-notification>div:first-child>div:first-child::after{animation-delay:1s;}
@keyframes livePulse{0%{transform:scale(1);opacity:0.6;}100%{transform:scale(2.5);opacity:0;}}
.delivery-notification>div:first-child>div:last-child,.delivery-notification>div:last-child>div:last-child{position:relative;height:20px;overflow:hidden;}
.delivery-notification>div:first-child>div:last-child{min-width:160px;}
.delivery-notification>div:last-child>div:last-child{min-width:80px;}
.delivery-notification>div:first-child span{font-weight:600;font-size:14px;line-height:20px;letter-spacing:-0.16px;color:#065f46;display:block;white-space:nowrap;}
.delivery-notification>div:last-child span{font-weight:400;font-size:14px;line-height:20px;letter-spacing:-0.16px;color:#065f46;display:block;white-space:nowrap;}
.delivery-notification>div:first-child span.slide-out,.delivery-notification>div:last-child span.slide-out,.delivery-notification>div:last-child>div:first-child>div.slide-out{animation:slideOut 0.4s ease-in-out forwards;}
.delivery-notification>div:first-child span.slide-in,.delivery-notification>div:last-child span.slide-in,.delivery-notification>div:last-child>div:first-child>div.slide-in{animation:slideIn 0.4s ease-in-out forwards;}
@keyframes slideOut{0%{transform:translateY(0);opacity:1;}100%{transform:translateY(-100%);opacity:0;}}
@keyframes slideIn{0%{transform:translateY(100%);opacity:0;}100%{transform:translateY(0);opacity:1;}}
.delivery-notification>div:last-child{gap:8px;}
.delivery-notification>div:last-child>div:first-child{position:relative;width:20px;height:20px;overflow:hidden;flex-shrink:0;}
.delivery-notification>div:last-child>div:first-child>div{display:flex;justify-content:center;align-items:center;width:20px;height:20px;background:#fff;box-shadow:0px 1px 2px rgba(127,148,189,0.1);border-radius:50%;}
.delivery-notification>div:last-child>div:first-child svg{width:12px;height:9px;}
.hero-indicators>div:last-child{padding:0 0 0 24px;border-left:1px solid rgba(126,129,156,0.3);padding-right:70px;}

/* Mobile Bottom Nav Responsive Adjustments */
@media (max-width: 360px) {
    .mobile-nav-center{ width: 70px; }
    .mobile-nav-center-icon, .mobile-bottom-nav-customer .mobile-nav-center-icon{ width: 50px; height: 50px; }
}
.hero-indicators>div:last-child svg{width:74px;height:36px;}

.pkg-btn.has-badge-black:not(.selected)::before{background:conic-gradient(from 147deg at 50% 50%,#296ff9 0%,#e0f2ff 24%,#59cefc 41%,#e0f2ff 58%,#e0f2ff 83%,#296ff9 100%);opacity:0.6;}
.pkg-btn.has-top-badge:not(.selected)::after{content:"";position:absolute;top:2px;left:2px;right:2px;bottom:2px;z-index:0;border-radius:10px;background:rgba(246,247,250,0.98);transition:opacity 0.3s ease;pointer-events:none;}
.pkg-btn.selected::before,.pkg-btn.selected::after{opacity:0;}
.pkg-btn > *{position:relative;z-index:2;}

/* Top Badge (Best Deal / Best Selling) */
.pkg-top-badge{position:absolute;top:0;left:0;right:0;padding:4px;background:linear-gradient(90deg,#6ee7b7 0%,#10b981 100%);border-radius:12px 12px 0 0;font-weight:700;font-size:9px;line-height:9px;letter-spacing:0.225px;text-transform:uppercase;text-align:center;color:#fff;overflow:hidden;perspective:200px;transform-style:preserve-3d;z-index:3;}
.pkg-top-badge.badge-animated{display:block;}
.pkg-top-badge.badge-animated:not(.badge-black)::before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;width:300%;height:100%;background:repeating-linear-gradient(60deg,#10b981 0px,#10b981 10px,#34d399 10px,#34d399 20px,#6ee7b7 20px,#6ee7b7 30px);z-index:-1;animation:badgeStripe 2s linear infinite;}
.pkg-top-badge.badge-black{background:#2c323e;color:#fff;}
.pkg-top-badge.badge-black::before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;width:300%;height:100%;background:repeating-linear-gradient(60deg,#296ff9 0px,#296ff9 10px,#59cefc 10px,#59cefc 20px,#00b7ff 20px,#00b7ff 30px);z-index:-1;animation:badgeStripe 2s linear infinite;}
@keyframes badgeStripe{0%{transform:translateX(0);}100%{transform:translateX(-33.333%);}}
@keyframes bonusCharFloat{0%{transform:translateY(0);}50%{transform:translateY(-8px);}100%{transform:translateY(0);}}
.badge-text{display:inline-block;position:relative;z-index:1;color:#fff;}
.badge-text .char{display:inline-block;animation:badgeFlip 2s ease-in-out infinite;animation-delay:calc(var(--i) * 0.1s);}
@keyframes badgeFlip{0%,80%{transform:rotateY(360deg);}}

/* Bonus Badge Container */
.pkg-bonus-badge{position:relative;display:flex;flex-direction:column;align-items:flex-start;padding:1.05px 1.05px 1.05px 1.04px;width:68.25px;height:63px;background:linear-gradient(267.23deg,#FFC2A6 1.11%,#FF5700 41.08%,#FFB491 91.28%);border-radius:8px;flex:none;order:0;flex-grow:0;isolation:isolate;z-index:1;}

/* Bonus Badge Inner */
.pkg-bonus-inner{position:relative;display:flex;flex-direction:column;align-items:center;padding:8px 0 0;width:66.16px;height:60.9px;background:#FFFFFF;border-radius:8px;flex:none;order:0;flex-grow:0;z-index:0;}

/* Bonus Badge Value */
.pkg-bonus-value{width:44px;height:34px;font-style:normal;font-weight:700;font-size:16.8px;line-height:17px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;letter-spacing:-0.42px;color:#2C323E;flex:none;order:0;flex-grow:0;}
.pkg-bonus-value span{color:#ff5c00;}
.pkg-grid-wrapper[data-grid="active"] .pkg-bonus-value span{color:#296ff9;}
.pkg-grid-wrapper[data-grid="vip"] .pkg-bonus-value span{color:#952eff;}

/* Bonus Badge Label Container */
.pkg-bonus-label{border-radius:16px;position:absolute;width:59.34px;height:15.75px;display:flex;flex-direction:row;justify-content:center;align-items:center;padding:0 2px;isolation:isolate;bottom:-3.15px;left:14.2px;overflow:hidden;flex:none;order:1;flex-grow:0;z-index:1;}

/* Bonus Badge Label Triangle Borders */
.pkg-bonus-label::before{content:"";box-sizing:border-box;position:absolute;width:4.2px;height:7.35px;left:-0.53px;bottom:-3.15px;border-top:7.35px solid rgb(243,64,18);border-left:4.2px solid transparent;flex:none;order:0;flex-grow:0;z-index:0;}
.pkg-bonus-label::after{content:"";box-sizing:border-box;position:absolute;width:4.2px;height:7.35px;right:-0.53px;bottom:-3.15px;border-top:7.35px solid rgb(243,64,18);border-right:4.2px solid transparent;flex:none;order:1;flex-grow:0;z-index:1;}

/* Bonus Badge Label Text */
.pkg-bonus-label-text{position:absolute;width:53.81px;height:15.9px;left:calc(50% - 53.81px/2 - 0.77px);top:calc(50% - 15.9px/2 + 0.07px);display:flex;flex-direction:row;align-items:center;justify-content:center;padding:0 8.4px 0.9px 8.41px;background:linear-gradient(89.15deg,#FF9F59 0%,#FF2216 87.8%);font-weight:700;font-size:11px;line-height:15px;text-align:center;letter-spacing:-0.16px;color:#FFFFFF;flex:none;order:2;flex-grow:0;z-index:2;clip-path:url(#bonus-clip);}
.pkg-bonus-label-text .char{display:inline-block;transition:transform 0.3s ease;}
.pkg-btn:hover .pkg-bonus-label-text .char{animation:bonusCharFloat 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;animation-delay:calc(var(--i) * 0.05s);}

/* Amount Badge Container */
.pkg-amount-badge{display:flex;flex-direction:column;align-items:center;padding:0;isolation:isolate;width:50px;min-width:50px;height:26px;background:linear-gradient(93.13deg,#FFFFFF 3.34%,#ADADAD 66.08%,#FFFFFF 98.6%);border-radius:12px;flex:none;order:1;flex-grow:0;z-index:1;position:relative;}

/* Amount Badge Blur Effect */
.pkg-amount-badge::before{content:"";box-sizing:border-box;position:absolute;height:12px;left:0%;right:0%;bottom:2px;background:linear-gradient(89.37deg,#94A5B7 0%,#8EA0AE 87.8%);border:1px solid #FFFFFF;filter:blur(4px);flex:none;order:0;flex-grow:0;z-index:0;}

/* Amount Badge Content */
.pkg-amount-content{display:flex;flex-direction:column;align-items:center;padding:4px 0;width:50px;height:26px;background:#FFFFFF;box-shadow:inset 0px -2.199px 8.138px #E9E9E9;border-radius:11px;flex:none;order:1;flex-grow:0;z-index:1;position:relative;}

/* Amount Text */
.pkg-amount-text{width:auto;min-width:22px;height:18px;font-style:normal;font-weight:700;font-size:18px;line-height:18px;display:flex;align-items:center;justify-content:center;text-align:center;letter-spacing:-0.16px;color:#2C323E;flex:none;order:0;flex-grow:0;transition:all 0.3s ease;}
.pkg-amount-text.slot-animation{animation:slotMachine 0.5s cubic-bezier(0.68,-0.55,0.27,1.55);}
@keyframes slotMachine{0%{transform:translateY(100%);opacity:0;}50%{transform:translateY(-10%);opacity:1;}100%{transform:translateY(0);opacity:1;}}

/* Amount Badge - Has Badge (Best Deal / Best Selling) - More Colorful */
.pkg-btn.has-top-badge:not(.selected) .pkg-amount-badge{background:linear-gradient(93.13deg,#FFFFFF 3.34%,#296FF9 66.08%,#FFFFFF 98.6%);}
.pkg-btn.has-top-badge:not(.selected) .pkg-amount-content{box-shadow:inset 0px -2.199px 8.138px #59CEFC;}
.pkg-btn.has-top-badge:not(.selected) .pkg-amount-text{background:linear-gradient(87.75deg,#296FF9 0%,#59CEFC 87.8%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}

/* Sparkle SVG Styles */
.pkg-sparkle{position:absolute;width:12px;height:17px;top:-2px;}
.pkg-sparkle.sparkle-left{left:-10px;}
.pkg-sparkle.sparkle-right{right:-10px;transform:scaleX(-1);}
.pkg-btn.has-top-badge .pkg-sparkle path:first-child{animation:sparkle-pulse 2s ease-in-out infinite;transform-origin:center;}
.pkg-btn.has-top-badge .pkg-sparkle.sparkle-right path:first-child{animation-delay:0.3s;}
.pkg-btn.has-top-badge .pkg-sparkle path:last-child{animation:sparkle-pulse 1.5s ease-in-out infinite;transform-origin:center;animation-delay:0.1s;}
.pkg-btn.has-top-badge .pkg-sparkle.sparkle-right path:last-child{animation-delay:0.4s;}
.pkg-btn.has-top-badge.selected .pkg-sparkle path{fill:#fff;}
@keyframes sparkle-pulse{0%,100%{transform:scale(0.2);opacity:1;}50%{transform:scale(1);opacity:0.7;}}

/* Animated Sparkle Effect on Selection */
.an-sparkle{position:fixed;width:12px;height:17px;pointer-events:none;z-index:9999;}
.an-sparkle svg{width:100%;height:100%;}
.pkg-grid-wrapper[data-grid="high-quality"] .an-sparkle path{fill:#FFC107;}
.pkg-grid-wrapper[data-grid="active"] .an-sparkle path{fill:#59CEFC;}
.pkg-grid-wrapper[data-grid="vip"] .an-sparkle path{fill:#BF81FF;}

/* Amount Text - Selected State with Gradient */
.pkg-btn.selected .pkg-amount-text{background:linear-gradient(87.35deg,#FFA567 0%,#FF4330 87.8%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.pkg-grid-wrapper[data-grid="active"] .pkg-btn.selected .pkg-amount-text{background:linear-gradient(87.35deg,#296FF9 0%,#59CEFC 87.8%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.pkg-grid-wrapper[data-grid="vip"] .pkg-btn.selected .pkg-amount-text{background:linear-gradient(87.35deg,#952EFF 0%,#BF81FF 87.8%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}

/* Amount Badge Content - Selected State Shadow */
.pkg-btn.selected .pkg-amount-content{box-shadow:inset 0px -2.199px 8.138px #FF4330;}
.pkg-grid-wrapper[data-grid="active"] .pkg-btn.selected .pkg-amount-content{box-shadow:inset 0px -2.199px 8.138px #59CEFC;}
.pkg-grid-wrapper[data-grid="vip"] .pkg-btn.selected .pkg-amount-content{box-shadow:inset 0px -2.199px 8.138px #BF81FF;}

.pkg-grid-wrapper[data-grid="high-quality"] .pkg-btn.selected{background:linear-gradient(109.13deg,#ffa567 0%,#ff4330 100%);box-shadow:none;}
.pkg-grid-wrapper[data-grid="active"] .pkg-btn.selected{background:linear-gradient(103.16deg,#296ff9 0%,#59cefc 100%);box-shadow:none;}
.pkg-grid-wrapper[data-grid="vip"] .pkg-btn.selected{background:linear-gradient(103.16deg,#952eff 0%,#bf81ff 100%);box-shadow:none;}
.pkg-btn.selected .pkg-bonus-badge,
.pkg-btn.selected .pkg-amount-badge{opacity:1;filter:brightness(1.1);}
.pkg-grid-wrapper[data-grid="active"] .pkg-btn:not(.selected) > span:last-of-type{color:rgb(41 111 249/1);}
.pkg-grid-wrapper[data-grid="vip"] .pkg-btn:not(.selected) > span:last-of-type{color:rgb(149 46 255/1);}
.quantity-input{display:flex;align-items:center;gap:8px;width:100%;max-width:220px;border-radius:12px;padding:8px;}
.quantity-input button{position:relative;display:flex;justify-content:center;align-items:center;width:44px;height:44px;background:linear-gradient(135deg,#ffffff 0%,#f7f8fa 100%);box-shadow:0 2px 8px rgba(44,50,62,0.1),inset 0 1px 2px rgba(255,255,255,0.8);border-radius:10px;border:1.5px solid rgba(211,216,224,0.6);cursor:pointer;transition:all 0.3s cubic-bezier(0.4,0,0.2,1);font-weight:700;font-size:20px;color:#2c323e;overflow:hidden;}
.quantity-input button::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(41,111,249,0.1) 0%,rgba(149,46,255,0.1) 100%);opacity:0;transition:opacity 0.3s ease;}
.quantity-input button:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(44,50,62,0.15),inset 0 1px 2px rgba(255,255,255,0.9);border-color:rgba(41,111,249,0.4);}
.quantity-input button:hover::before{opacity:1;}
.quantity-input button:active{transform:translateY(0) scale(0.96);box-shadow:0 2px 6px rgba(44,50,62,0.1);}
.quantity-input button svg{position:relative;z-index:1;transition:transform 0.2s ease;}
.quantity-input button:hover svg{transform:scale(1.1);}
.quantity-input button:active svg{transform:scale(0.95);}
.quantity-input span,.quantity-input input{position:relative;flex:1;text-align:center;font-weight:700;font-size:18px;letter-spacing:-0.5px;color:#2c323e;background:linear-gradient(135deg,#ffffff 0%,#fafbfc 100%);border:1.5px solid rgba(211,216,224,0.5);border-radius:10px;padding:10px 16px;min-height:44px;min-width:68px;display:flex;align-items:center;justify-content:center;box-shadow:inset 0 2px 4px rgba(44,50,62,0.04),0 1px 2px rgba(255,255,255,0.8);transition:all 0.2s ease;appearance:textfield;-moz-appearance:textfield;}
.quantity-input input::-webkit-outer-spin-button,.quantity-input input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.quantity-input span::before{content:"";position:absolute;inset:0;border-radius:10px;background:linear-gradient(135deg,rgba(41,111,249,0.05) 0%,rgba(149,46,255,0.05) 100%);opacity:0;transition:opacity 0.3s ease;}
@keyframes quantity-pulse{0%,100%{transform:scale(1);}50%{transform:scale(1.05);}}
.quantity-input span.updating{animation:quantity-pulse 0.3s ease;}
.price-box{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:16px;width:100%;max-width:208px;}
.price-box > div:first-child{position:relative;display:flex;align-items:flex-start;gap:2px;padding:3px 0;min-width:120px;justify-content:center;}
.price-box > div:first-child > span{letter-spacing:-0.16px;text-align:center;}
.price-box > div:first-child > span:nth-child(1){font-weight:600;font-size:28px;line-height:28px;color:#2c323e;white-space:nowrap;} /* value */
.price-box > div:first-child > span:nth-child(2){position:absolute;left:calc(90% + 8px);top:2px;font-weight:500;font-size:15px;line-height:15px;text-decoration:line-through;color:#7e819c;padding:2px 0;white-space:nowrap;} /* original */
.price-box > button{position:relative;display:flex;justify-content:center;align-items:center;padding:14px 24px;width:100%;background:linear-gradient(90deg,#ffa567 0%,#ff4330 100%);border-radius:8px;border:none;cursor:pointer;transition:transform 0.2s ease,box-shadow 0.2s ease;font-weight:800;font-size:15px;line-height:20px;letter-spacing:0.15px;text-transform:uppercase;color:#fff;overflow:hidden;}
.price-box > button:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(45deg,transparent 25%,rgba(255,255,255,0.4) 50%,transparent 75%);transition:left 0.3s;animation:button-gradient-glow 2s ease infinite;}
@keyframes button-gradient-glow{0%{left:-100%;}50%{left:100%;}100%{left:100%;}}
.pkg-grid-wrapper[data-grid="active"] .price-box > button{background:linear-gradient(103.16deg,#296ff9 0%,#59cefc 100%);}
.pkg-grid-wrapper[data-grid="vip"] .price-box > button{background:linear-gradient(103.16deg,#952eff 0%,#bf81ff 100%);}
.price-box > button:hover{transform:translateY(-2px);box-shadow:0px 8px 16px rgba(255,67,48,0.3);}
.pkg-grid-wrapper[data-grid="active"] .price-box > button:hover{box-shadow:0px 8px 16px rgba(41,111,249,0.3);}
.pkg-grid-wrapper[data-grid="vip"] .price-box > button:hover{box-shadow:0px 8px 16px rgba(149,46,255,0.3);}
.feature-cards{display:flex;justify-content:center;gap:16px;width:100%;max-width:600px;}
.feature-card.active-tab.card-high-quality{box-shadow:inset 0px 0px 0px 2px #ff5c00;}
.feature-card.active-tab.card-active{box-shadow:inset 0px 0px 0px 2px rgb(41 111 249/1);}
.feature-card.active-tab.card-vip{box-shadow:inset 0px 0px 0px 2px rgb(149 46 255/1);}
.feature-header{padding:12px 16px 10px;border-radius:12px 12px 0 0;font-weight:700;font-size:14px;line-height:20px;letter-spacing:-0.16px;color:#7e819c;position:relative;transition:background 0.3s ease,color 0.3s ease;}
.feature-card:nth-child(1) .feature-header{background:#d3d8e033;}
.feature-card:nth-child(2):not(.active-tab) .feature-header{background:#2c323e;color:#fff;}
.feature-card:nth-child(2).active-tab .feature-header,.feature-card:nth-child(3):not(.active-tab) .feature-header,.feature-card:nth-child(3).active-tab .feature-header{color:#fff;}
.feature-card:nth-child(2).active-tab .feature-header{background:linear-gradient(103.16deg,#296ff9 0%,#59cefc 100%);}
.feature-card:nth-child(3):not(.active-tab) .feature-header,.feature-card:nth-child(3).active-tab .feature-header{background:linear-gradient(96.8deg,#952eff 0%,#bf81ff 100%);}
.feature-list{display:flex;flex-direction:column;gap:9.5px;padding:0 8px 3px;}
.feature-item{display:flex;align-items:flex-start;gap:8px;font-size:12px;line-height:16px;letter-spacing:-0.16px;color:#7e819c;}
.feature-icon{width:12px;height:16px;flex-shrink:0;margin-top:2px;}
.feature-icon svg{width:12px;height:11px;}
.feature-item strong{font-weight:700;}
.feature-link{text-decoration:underline;cursor:pointer;}
.feature-link:hover{color:#296ff9;}
.delivery-stats{display:flex;flex-direction:column;align-items:center;width:100%;max-width:1072px;}
.delivery-stats p{font-weight:600;font-size:28px;line-height:42px;text-align:center;color:#2c323e;margin:0;}
.delivery-stats p span{color:#ff5c00;}
@media (max-width:768px){.package-container{gap:24px;padding:0 16px;}.delivery-stats{order:3;}.delivery-stats p{font-size:18px;line-height:27px;padding:0 16px;}.vip-toggle-wrapper,.package-selector{max-width:100%;}.package-tabs{display:none;}.pkg-tab{font-size:12px;}.package-selector{order:2;}.pkg-grid-wrapper{max-width:100%;background:transparent!important;box-shadow:none!important;border:none!important;padding:0!important;}.pkg-grid-content{padding:0!important;}.pkg-grid{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;}.pkg-btn{flex:0 0 calc(33.333% - 6px);}.feature-cards{order:1;flex-direction:row;align-items:flex-start;justify-content:flex-start;gap:12px;max-width:100%;overflow-x:scroll;overflow-y:hidden;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory;scrollbar-width:none;padding:16px 0 0;}.feature-cards::-webkit-scrollbar{display:none;}.feature-card{width:155px;height:301px;flex:none;scroll-snap-align:start;}.feature-card .tab-badge{display:block;}.feature-checkbox{display:flex;}.feature-card.active-tab.card-high-quality{box-shadow:inset 0px 0px 0px 2px rgb(255 67 48/1);}.feature-card.active-tab.card-active{background:linear-gradient(103.16deg,#296ff9 0%,#59cefc 100%);box-shadow:inset 0px 0px 0px 2px rgb(41 111 249/1);}.feature-card.active-tab.card-active .feature-header{background:transparent;}.feature-card.active-tab.card-active .feature-list,.feature-card.active-tab.card-active .feature-item,.feature-card.active-tab.card-active .feature-item strong,.feature-card.active-tab.card-active .feature-link{color:#fff;}.feature-card.active-tab.card-active .feature-icon svg path{stroke:#fff;}.feature-card.active-tab.card-vip{background:linear-gradient(96.8deg,#952eff 0%,#bf81ff 100%);box-shadow:inset 0px 0px 0px 2px rgb(149 46 255/1);}.feature-card.active-tab.card-vip .feature-header{background:transparent;}.feature-card.active-tab.card-vip .feature-list,.feature-card.active-tab.card-vip .feature-item,.feature-card.active-tab.card-vip .feature-item strong,.feature-card.active-tab.card-vip .feature-link{color:#fff;}.feature-card.active-tab.card-vip .feature-icon svg path{stroke:#fff;}}

      
.packages{padding:60px 20px;display:grid;grid-template-columns:repeat(4,310px);gap:20px;justify-content:center}
.card-new{width:310px;background:#fff;border-top:2px solid #7844e4;border-radius:20px;box-sizing:border-box;display:flex;flex-direction:column;transition:all 0.3s ease;box-shadow:0 2px 8px rgba(0,0,0,0.08)}
.card-new:hover{transform:translateY(-8px);box-shadow:0 12px 24px rgba(120,68,228,0.2);border-top-color:#6c3bc7}
.header{position:relative;width:100%;height:230px;background:#f6f8ff;border-radius:20px 20px 50px 50px;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;padding:30px 0;box-sizing:border-box}
.header .bg-icon{position:absolute;font-size:300px;left:calc(50% - 50px);top:calc(50% - 240px);color:rgba(120,68,228,0.08);transform:rotate(-215deg);z-index:0;pointer-events:none}
.header-content{display:flex;flex-direction:column;align-items:center;gap:16px;z-index:1}
.header-content>div:first-child{height:46px;background:#7844e4;border-radius:14px;display:flex;align-items:center;justify-content:center}
.header-content>div:first-child i{font-size:24px;color:#fff}
.header-content h3{width:187px;font-weight:500;font-size:15px;text-align:center;color:#7a7f99;margin:0;display:flex;flex-direction:column}
.header-content h3 span:last-child{color:#33353e;font-weight:600;font-size:16px}
.status-cards{display:flex;align-items:center;justify-content:center;gap:16px;z-index:1}
.status-cards>div{width:110px;height:32px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.status-cards>div span:first-child{font-weight:500;font-size:12px;text-align:center;color:#465681}
.status-cards>div span:last-child{font-weight:600;font-size:16px;text-align:center}
.status-cards .guarantee{color:#00c853}
.status-cards .speed{color:#ff9800}
.status-cards hr{width:1px;height:32px;background:rgba(122,127,153,0.5);border:none;margin:0}
.features{padding:20px;display:flex;flex-direction:column;gap:16px;overflow:hidden;height:215px;transition:max-height 0.4s ease}
.features.expanded{max-height:500px;overflow-y:auto}
.features::-webkit-scrollbar{width:4px}
.features::-webkit-scrollbar-track{background:rgba(120,68,228,0.1);border-radius:10px}
.features::-webkit-scrollbar-thumb{background:#7844e4;border-radius:10px}
.features::-webkit-scrollbar-thumb:hover{background:#6c3bc7}
.features>div{display:flex;align-items:center;gap:10px;min-height:24px;flex-shrink:0}
.features>div>div:first-child{width:24px;height:24px;background:rgba(225,233,255,0.3);border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.features>div span{font-weight:600;font-size:14px;text-transform:capitalize;color:#465681}
.features hr{width:100%;height:1px;background:#dee2e6;border-radius:20px;border:none;margin:0;flex-shrink:0}
.view-all{display:flex;align-items:center;justify-content:center;gap:5px;padding:20px;padding-bottom:0;cursor:pointer;transition:all 0.3s ease}
.view-all:hover{transform:translateY(-2px)}
.view-all:active{transform:translateY(0)}
.view-all span{font-weight:600;font-size:14px;text-align:center;color:#7844e4;transition:color 0.3s ease}
.view-all i{font-size:20px;color:#7844e4;transition:all 0.3s ease}
.view-all.expanded i{transform:rotate(180deg)}
.view-all.expanded span{color:#6c3bc7}
.view-all.expanded i{color:#6c3bc7}
.pricing{display:flex;flex-direction:column;align-items:center;padding:0;margin:16px auto;}
.pricing .old-price{font-weight:500;font-size:14px;line-height:24px;text-align:center;text-decoration-line:line-through;color:#7a7f99}
.pricing .new-price{font-weight:700;font-size:24px;line-height:24px;text-align:center;color:#33353e}
.actions{display:flex;align-items:center;gap:8px;padding:0 20px 20px;margin-top:auto}
.actions .btn-favorite{min-width:46px;min-height:46px;background:rgba(120,68,228,0.1);border-radius:12px;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative;overflow:hidden;transition:all 0.3s ease}
.actions .btn-favorite::before{content:"";position:absolute;width:0;height:0;border-radius:50%;background:#7844e4;top:50%;left:50%;transform:translate(-50%,-50%);transition:width 0.4s ease,height 0.4s ease;z-index:0}
.actions .btn-favorite:hover::before{width:120%;height:120%}
.actions .btn-favorite svg{position:relative;z-index:1;transition:all 0.3s ease}
.actions .btn-favorite:hover svg path{fill:#fff;stroke:#fff}
.actions .btn-favorite:active{transform:scale(0.95)}
.actions .btn-purchase{width:100%;height:46px;background:#7844e4;border-radius:12px;border:none;display:flex;align-items:center;justify-content:center;gap:6px;cursor:pointer;position:relative;overflow:hidden;transition:all 0.3s ease}
.actions .btn-purchase::before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.3),transparent);transition:left 0.5s ease}
.actions .btn-purchase:hover::before{left:100%}
.actions .btn-purchase:hover{background:#6c3bc7;transform:translateY(-2px);box-shadow:0 8px 16px rgba(120,68,228,0.3)}
.actions .btn-purchase:active{transform:translateY(0);box-shadow:0 4px 8px rgba(120,68,228,0.2)}
.actions .btn-purchase svg,.actions .btn-purchase span{position:relative;z-index:1}
.actions .btn-purchase svg{transition:transform 0.3s ease}
.actions .btn-purchase:hover svg{transform:scale(1.1)}
.actions .btn-purchase span{font-weight:600;font-size:16px;color:#fff}
@media (max-width:1024px){.packages{grid-template-columns:repeat(2,310px);padding:40px 20px;gap:20px}}
@media (max-width:768px){.packages{grid-template-columns:1fr;padding:30px 20px;gap:20px}.card-new{width:100%;max-width:100%}.header{width:100%}}
@media (max-width:375px){.packages{padding:20px 15px}}