@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Outfit:wght@400;500;600;700;800&display=swap');

.eticaret-page-eticaret {
    --primary: #0066ff;
    --primary-gradient: linear-gradient(135deg, #0066ff 0%, #00d2ff 100%);
    --bg-dark: #0a0b10;
    --bg-light: #f8fafc;
    --text-main: #1e293b;
    --text-muted: #64748b;
    --glass-bg: rgba(255, 255, 255, 0.03);
    --glass-border: rgba(255, 255, 255, 0.1);
    --card-shadow: 0 20px 40px rgba(0, 0, 0, 0.05);
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* * reset removed to prevent conflict */

.eticaret-page-eticaret {
    font-family: 'Inter', sans-serif;
    color: var(--text-main);

    line-height: 1.6;
    overflow-x: hidden;
}

.eticaret-page-eticaret h1, .eticaret-page-eticaret h2, .eticaret-page-eticaret h3, .eticaret-page-eticaret h4 {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
}

.eticaret-container {

    margin: 0 auto;
    padding: 0 2rem;
}

/* Hero Section */
.eticaret-hero {
    padding: 120px 0 80px;
    background: radial-gradient(circle at top right, #e0f2fe 0%, #f8fafc 50%);
    overflow: hidden;
    position: relative;
    text-align: center;
}

.eticaret-hero-content {
    max-width: 850px;
    margin: 0 auto;
}

.eticaret-hero h1 {
    font-size: 3.5rem;
    line-height: 1.1;
    margin-bottom: 24px;
    background: var(--primary-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: fadeInUp 0.8s ease-out;
}

.eticaret-hero p {
    font-size: 1.25rem;
    color: var(--text-muted);
    margin-bottom: 40px;
    animation: fadeInUp 1s ease-out;
}

/* Zigzag Layout (Used in index.eticaret-html) */
.eticaret-feature-section {
    padding: 120px 0;
}

.eticaret-feature-row {
    display: flex;
    align-items: center;
    gap: 80px;
    margin-bottom: 120px;
}

.eticaret-feature-row:nth-child(even) {
    flex-direction: row-reverse;
}

.eticaret-feature-image {
    flex: 1;
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: var(--card-shadow);
    transition: var(--transition);
}

.eticaret-feature-text {
    flex: 1;
}

.eticaret-feature-text .eticaret-tag {
    display: inline-block;
    padding: 6px 16px;
    background: rgba(0, 102, 255, 0.1);
    color: var(--primary);
    border-radius: 100px;
    font-weight: 600;
    font-size: 0.875rem;
    margin-bottom: 16px;
}

.eticaret-feature-text h2 {
    font-size: 2.8rem;
    margin-bottom: 24px;
    color: #0f172a;
    line-height: 1.2;
}

.eticaret-feature-text p {
    font-size: 1.125rem;
    color: var(--text-muted);
    margin-bottom: 32px;
}

/* Grid System (Used in features.eticaret-html) */
.eticaret-feature-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    padding: 40px 0;
}

.eticaret-feature-card {
    background: #ffffff;
    border: 1px solid #f1f5f9;
    border-radius: 24px;
    padding: 30px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.03);
    transition: var(--transition);
    display: flex;
    flex-direction: column;
}

.eticaret-feature-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.06);
}

.eticaret-card-visual {
    background: #f8fafc;
    border-radius: 16px;
    height: 180px;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
    border: 1px solid #f1f5f9;
}

.eticaret-card-visual img {
    width: 85%;
    height: 85%;
    object-fit: contain;
}

.eticaret-feature-card h3 {
    font-size: 1.4rem;
    color: #0f172a;
    margin-bottom: 15px;
}

.eticaret-feature-card p {
    font-size: 0.95rem;
    color: #64748b;
    line-height: 1.6;
}

/* Animations */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

.eticaret-reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease-out;
}

.eticaret-reveal.eticaret-active {
    opacity: 1;
    transform: translateY(0);
}

/* Buttons */
.eticaret-btn {
    display: inline-block;
    padding: 16px 32px;
    border-radius: 12px;
    font-weight: 600;
    text-decoration: none;
    transition: var(--transition);
    cursor: pointer;
}

.eticaret-btn-primary {
    background: var(--primary-gradient);
    color: white;
}

/* Responsive */
@media (max-width: 992px) {
    .eticaret-feature-row, .eticaret-feature-row:nth-child(even) {
        flex-direction: column;
        gap: 40px;
    }
    .eticaret-feature-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .eticaret-hero h1 { font-size: 2.8rem; }
}

@media (max-width: 640px) {
    .eticaret-feature-grid { grid-template-columns: 1fr; }
}
/* Addon Landing Page Specifics */
.eticaret-category-nav-wrapper {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid #f1f5f9;
    padding: 15px 0;
}

.eticaret-category-nav {
    display: flex;
    justify-content: center;
    gap: 30px;
    overflow-x: auto;
    scrollbar-width: none;
}

.eticaret-category-nav::-webkit-scrollbar { display: none; }

.eticaret-category-nav a {
    text-decoration: none;
    color: var(--text-muted);
    font-weight: 600;
    font-size: 0.9rem;
    white-space: nowrap;
    padding: 8px 16px;
    border-radius: 100px;
    transition: var(--transition);
}

.eticaret-category-nav a:hover, .eticaret-category-nav a.eticaret-active {
    background: var(--primary);
    color: white;
}

.eticaret-addon-section {
    padding: 80px 0;
}

.eticaret-addon-section h2 {
    font-size: 2.2rem;
    margin-bottom: 40px;
    text-align: center;
}

.eticaret-addon-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 30px;
}

.eticaret-addon-card {
    background: #fff;
    border: 1px solid #f1f5f9;
    border-radius: 20px;
    padding: 24px;
    transition: var(--transition);
    display: flex;
    flex-direction: column;
    height: 100%;
}

.eticaret-addon-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 102, 255, 0.08);
    border-color: rgba(0, 102, 255, 0.2);
}

.eticaret-addon-logo {
    width: 60px;
    height: 60px;
    background: #f8fafc;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    font-size: 1.5rem;
}

.eticaret-addon-logo img {
    max-width: 70%;
    max-height: 70%;
    object-fit: contain;
}

.eticaret-addon-card h3 {
    font-size: 1.25rem;
    margin-bottom: 12px;
    color: #0f172a;
}

.eticaret-addon-card p {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-bottom: 20px;
    flex-grow: 1;
}

.eticaret-addon-card .eticaret-btn-sm {
    padding: 10px 20px;
    font-size: 0.85rem;
    border-radius: 10px;
    text-align: center;
    border: 1px solid #e2e8f0;
    color: var(--text-main);
    font-weight: 600;
}

.eticaret-addon-card:hover .eticaret-btn-sm {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

@media (max-width: 768px) {
    .eticaret-category-nav { justify-content: flex-start; padding: 0 20px; }
    .eticaret-addon-section { padding: 50px 0; }
}

/* =========================================
   E-Ticaret Page Specific Styles
   ========================================= */
.eticaret-page-eticaret {
    --primary: #0f172a;
    --secondary: #3b82f6;
    --accent: #8b5cf6;
    --success: #10b981;
    --text-main: #1e293b;
    --text-light: #64748b;
    --bg-light: #ffffff;
    --ui-bg: #ffffff;
    --ui-border: #e2e8f0;
    background: #fff;
    color: var(--text-main);
}

.eticaret-page-eticaret .eticaret-hero { padding: 80px 0 40px; background: none; }
.eticaret-page-eticaret .eticaret-hero h1 { font-size: 3rem; font-family: 'Inter', sans-serif; font-weight: 800; color: var(--primary); letter-spacing: -1px; background: none; -webkit-text-fill-color: initial; margin-bottom: 20px; }
.eticaret-page-eticaret .eticaret-hero p { font-size: 1.2rem; color: var(--text-light); max-width: 600px; margin: 0 auto; line-height: 1.6; }

.eticaret-page-eticaret .eticaret-feature-block { padding: 100px 0; border-bottom: 1px solid rgba(0,0,0,0.05); }
.eticaret-page-eticaret .eticaret-page-eticaret-last-block { border-bottom: none; }
.eticaret-page-eticaret .eticaret-feature-block-container { display: flex; align-items: center; justify-content: space-between; gap: 40px; }
.eticaret-page-eticaret .eticaret-feature-block.eticaret-reverse .eticaret-feature-block-container { flex-direction: row-reverse; }

.eticaret-page-eticaret .eticaret-feature-content { flex: 1; max-width: 500px; z-index: 10; }
.eticaret-page-eticaret .eticaret-feature-content h3 { font-size: 1.2rem; color: var(--text-light); font-weight: 500; margin-bottom: 10px; }
.eticaret-page-eticaret .eticaret-feature-content h2 { font-size: 2.5rem; font-family: 'Inter', sans-serif; font-weight: 700; color: var(--primary); line-height: 1.2; margin-bottom: 20px; letter-spacing: -0.5px; }
.eticaret-page-eticaret .eticaret-feature-content p { font-size: 1.1rem; color: var(--text-light); line-height: 1.7; margin-bottom: 30px; }

.eticaret-page-eticaret .eticaret-feature-list { list-style: none; padding: 0; margin-bottom: 30px; }
.eticaret-page-eticaret .eticaret-feature-list li { position: relative; padding-left: 25px; margin-bottom: 12px; font-size: 1.05rem; color: var(--text-main); font-weight: 500; }
.eticaret-page-eticaret .eticaret-feature-list li::before { content: '•'; color: var(--success); font-size: 1.5rem; position: absolute; left: 0; top: -4px; }

.eticaret-page-eticaret .eticaret-btn-outline { display: inline-block; padding: 12px 24px; border: 1px solid var(--text-main); border-radius: 30px; color: var(--text-main); text-decoration: none; font-weight: 500; transition: all 0.3s ease; }
.eticaret-page-eticaret .eticaret-btn-outline:hover { background: var(--text-main); color: #fff; }

.eticaret-page-eticaret .eticaret-ui-showcase { flex: 1; display: flex; justify-content: center; align-items: center; min-height: 450px; }
.eticaret-page-eticaret .eticaret-ui-wrapper { position: relative; width: 380px; height: 380px; }

.eticaret-page-eticaret .eticaret-ui-card { background: var(--ui-bg); border: 1px solid var(--ui-border); border-radius: 12px; box-shadow: 0 20px 40px rgba(0,0,0,0.06); position: absolute; padding: 20px; font-family: 'Inter', sans-serif; transition: transform 0.3s ease; box-sizing: border-box; }

.eticaret-page-eticaret .eticaret-depth-1 { z-index: 1; transform: scale(0.9); }
.eticaret-page-eticaret .eticaret-depth-2 { z-index: 2; transform: scale(0.95); }
.eticaret-page-eticaret .eticaret-depth-3 { z-index: 3; box-shadow: 0 30px 60px rgba(0,0,0,0.1); }

/* Mockup 0: Dashboard Overview */
.eticaret-dash-mockup-main { width: 340px; right: -10px; top: 30px; padding: 15px; }
.eticaret-dash-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; border-bottom: 1px solid #e2e8f0; padding-bottom: 10px; }
.eticaret-dash-title { font-weight: 700; color: var(--primary); font-size: 0.9rem; }
.eticaret-dash-date { font-size: 0.7rem; background: #f1f5f9; padding: 4px 8px; border-radius: 4px; }
.eticaret-dash-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 15px; }
.eticaret-dash-card { background: #f8fafc; padding: 10px; border-radius: 8px; border: 1px solid #e2e8f0; }
.eticaret-dash-card-title { font-size: 0.7rem; color: var(--text-light); margin-bottom: 5px; }
.eticaret-dash-card-value { font-size: 1rem; font-weight: 700; color: var(--primary); }
.eticaret-dash-chart-title { font-size: 0.75rem; font-weight: 600; margin-bottom: 10px; color: var(--text-light); }
.eticaret-dash-chart { height: 80px; background: linear-gradient(180deg, #e0e7ff 0%, #ffffff 100%); border-bottom: 2px solid var(--secondary); border-radius: 4px; position: relative; }
.eticaret-dash-chart::after { content: ''; position: absolute; bottom: 0; left: 30%; width: 2px; height: 50px; background: var(--secondary); }
.eticaret-dash-chart::before { content: ''; position: absolute; bottom: 50px; left: calc(30% - 4px); width: 10px; height: 10px; background: white; border: 2px solid var(--secondary); border-radius: 50%; z-index: 2; }

.eticaret-dash-mockup-side { width: 160px; left: -10px; bottom: 50px; padding: 15px; border-left: 4px solid var(--primary); }
.eticaret-dash-menu-title { font-size: 0.7rem; font-weight: 700; color: #94a3b8; margin-bottom: 15px; text-transform: uppercase; }
.eticaret-dash-menu-item { display: flex; align-items: center; gap: 8px; font-size: 0.75rem; color: #475569; margin-bottom: 12px; font-weight: 600; }
.eticaret-dash-menu-icon { width: 16px; height: 16px; background: #e2e8f0; border-radius: 4px; }
.eticaret-dash-menu-icon.eticaret-active { background: var(--primary); }
.eticaret-dash-badge { background: #ef4444; color: white; padding: 2px 6px; border-radius: 10px; font-size: 0.6rem; margin-left: auto; }

/* Mockup 1: SEO Boost */
.eticaret-seo-mockup-main { width: 300px; right: 0; top: 20px; }
.eticaret-seo-title { font-weight: 600; font-size: 0.9rem; margin-bottom: 20px; text-align: center; }
.eticaret-seo-score-circle { width: 80px; height: 80px; border-radius: 50%; border: 6px solid var(--success); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; font-weight: bold; color: var(--primary); margin: 0 auto 15px; }
.eticaret-seo-score-text { text-align: center; font-size: 0.8rem; color: var(--text-light); margin-bottom: 20px; }
.eticaret-seo-stat { display: flex; justify-content: space-between; font-size: 0.85rem; margin-bottom: 8px; border-bottom: 1px dashed #e2e8f0; padding-bottom: 6px; }
.eticaret-seo-stat.eticaret-no-border { border: none; }
.eticaret-seo-stat-danger { color: #ef4444; }
.eticaret-seo-stat-warning { color: #f59e0b; }
.eticaret-seo-btn { width: 100%; padding: 8px; background: var(--primary); border: none; border-radius: 6px; color: white; font-weight: 600; margin-top: 15px; cursor: pointer; }

.eticaret-seo-mockup-popup { width: 220px; left: -20px; bottom: 40px; border-left: 4px solid var(--success); }
.eticaret-seo-badge { background: #dcfce7; color: #166534; padding: 4px 10px; border-radius: 20px; font-size: 0.75rem; font-weight: 600; display: inline-block; margin-bottom: 10px; }
.eticaret-seo-msg { font-size: 0.85rem; color: #334155; line-height: 1.5; font-weight: 500; margin-bottom: 10px; }
.eticaret-seo-sub-msg { display: flex; align-items: center; gap: 8px; font-size: 0.75rem; color: var(--text-light); }
.eticaret-seo-dot { display: inline-block; width: 8px; height: 8px; background: var(--success); border-radius: 50%; }

/* Mockup 2: Campaigns */
.eticaret-camp-mockup-main { width: 300px; left: 0; top: 0; }
.eticaret-camp-title { font-weight: 700; color: var(--primary); margin-bottom: 15px; }
.eticaret-camp-item { display: flex; align-items: center; gap: 10px; padding: 10px; border: 1px solid #f1f5f9; border-radius: 8px; margin-bottom: 10px; }
.eticaret-camp-item.eticaret-highlight { border-color: var(--secondary); background: #eff6ff; }
.eticaret-camp-icon { width: 30px; height: 30px; border-radius: 50%; background: #e0f2fe; color: #0ea5e9; display: flex; justify-content: center; align-items: center; font-size: 0.8rem; font-weight: bold; }
.eticaret-camp-icon.eticaret-highlight { background: var(--secondary); color: white; }
.eticaret-camp-text { font-size: 0.85rem; font-weight: 600; color: #334155; }

.eticaret-camp-mockup-side { width: 220px; right: -20px; bottom: 20px; }
.eticaret-camp-side-title { font-size: 0.75rem; color: var(--text-light); text-transform: uppercase; font-weight: 700; margin-bottom: 10px; }
.eticaret-camp-side-label { font-size: 0.85rem; font-weight: 600; margin-bottom: 10px; }
.eticaret-camp-side-val { padding: 6px 10px; border: 1px solid #cbd5e1; border-radius: 4px; font-size: 0.8rem; margin-bottom: 15px; }
.eticaret-camp-channels { display: flex; gap: 5px; }
.eticaret-camp-channel-sms { background: #10b981; color: white; padding: 4px 8px; border-radius: 4px; font-size: 0.7rem; }
.eticaret-camp-channel-email { background: #3b82f6; color: white; padding: 4px 8px; border-radius: 4px; font-size: 0.7rem; }

/* Mockup 3: Omnichannel */
.eticaret-omni-center { width: 140px; height: 140px; border-radius: 50%; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; font-weight: bold; top: 120px; left: 120px; }
.eticaret-omni-icon { font-size: 1.5rem; margin-bottom: 5px; }
.eticaret-omni-brand { font-size: 0.9rem; color: var(--primary); }
.eticaret-omni-status-main { font-size: 0.7rem; color: var(--success); margin-top: 5px; }
.eticaret-omni-node { width: 120px; text-align: center; font-size: 0.85rem; font-weight: 600; padding: 15px; }
.eticaret-omni-status-sub { font-size: 0.7rem; color: var(--text-light); font-weight: 400; }
.eticaret-omni-node.eticaret-trendyol { top: 20px; left: 0; border-top: 4px solid #f97316; }
.eticaret-omni-node.eticaret-hepsi { top: 20px; right: 0; border-top: 4px solid #f97316; } 
.eticaret-omni-node.eticaret-cicek { bottom: 20px; left: 130px; border-top: 4px solid #10b981; }

.eticaret-line { position: absolute; background: #cbd5e1; z-index: 0; }
.eticaret-line-1 { width: 80px; height: 2px; top: 100px; left: 60px; transform: rotate(45deg); }
.eticaret-line-2 { width: 80px; height: 2px; top: 100px; right: 60px; transform: rotate(-45deg); }
.eticaret-line-3 { width: 2px; height: 80px; bottom: 100px; left: 190px; }

/* Mockup 4: Theme Builder */
.eticaret-tb-sidebar { width: 170px; left: 10px; top: 30px; height: 320px; z-index: 2; }
.eticaret-tb-sidebar-title { font-weight: 700; font-size: 0.85rem; margin-bottom: 20px; }
.eticaret-tb-item { padding: 10px; background: #f1f5f9; border-radius: 6px; font-size: 0.8rem; margin-bottom: 10px; cursor: move; }
.eticaret-tb-item.eticaret-dragging { background: var(--secondary); color: white; position: relative; z-index: 10; box-shadow: 0 10px 20px rgba(0,0,0,0.1); }
.eticaret-tb-preview { width: 240px; right: 0px; top: 10px; height: 360px; background: #f8fafc; z-index: 1; }
.eticaret-tb-header { width: 100%; height: 60px; background: #e2e8f0; border-radius: 6px; margin-bottom: 15px; }
.eticaret-tb-block { border: 1px dashed #cbd5e1; padding: 20px; text-align: center; color: #94a3b8; font-size: 0.8rem; margin-bottom: 10px; border-radius: 8px; }
.eticaret-tb-grid { display: flex; gap: 10px; margin-top: 15px; }
.eticaret-tb-grid-item { flex: 1; height: 100px; background: #cbd5e1; border-radius: 6px; }

/* Mockup 5: Automation */
.eticaret-auto-main { width: 320px; left: 30px; top: 30px; }
.eticaret-auto-title { font-weight: 700; margin-bottom: 20px; border-bottom: 1px solid #eee; padding-bottom: 10px; }
.eticaret-auto-order { margin-bottom: 15px; }
.eticaret-auto-order-last { margin-bottom: 0; }
.eticaret-auto-order-title { font-size: 0.85rem; font-weight: 600; margin-bottom: 5px; }
.eticaret-auto-order-desc { font-size: 0.75rem; color: var(--text-light); }
.eticaret-auto-badge { font-size: 0.75rem; padding: 4px 8px; border-radius: 4px; font-weight: 600; float: right; }
.eticaret-badge-success { background: #dcfce7; color: #166534; }
.eticaret-badge-info { background: #e0f2fe; color: #075985; }

@media (max-width: 992px) {
    .eticaret-page-eticaret .eticaret-feature-block-container { flex-direction: column; text-align: center; }
    .eticaret-page-eticaret .eticaret-feature-block.eticaret-reverse .eticaret-feature-block-container { flex-direction: column; }
    .eticaret-page-eticaret .eticaret-feature-content { max-width: 100%; }
    .eticaret-page-eticaret .eticaret-feature-list li { text-align: left; display: inline-block; width: 100%; }
    .eticaret-page-eticaret .eticaret-ui-showcase { height: 400px; transform: scale(0.9); }
}
@media (max-width: 480px) {
    .eticaret-page-eticaret .eticaret-ui-showcase { transform: scale(0.75); }
}