:root {
    --accent: #1F77D3; /* Aktif sekme mavi çizgi (tema vurgu rengi) */
    --background: #ffffff;
    --border: #E0E0E0;
    --hover-bg: #f5f5f5;
    --inactive-fg: #555;
    --active-fg: #222;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.07);
    --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.09);
}

/* --- Header strip with subtle depth --- */
.default-tab .e-tab-header {
    display: flex;
    gap: 2px;
    border-bottom: 1px solid var(--border);
    background: var(--background);
    box-shadow: var(--shadow-sm);
}

    /* Individual tab – 3‑D look */
    .default-tab .e-tab-header .e-tab-item {
        position: relative;
        border: 1px solid var(--border);
        border-bottom: none;
        border-radius: 6px 6px 0 0;
        background: linear-gradient(180deg, #fafafa 0%, #eaeaea 100%);
        color: var(--inactive-fg);
        box-shadow: var(--shadow-sm);
        transition: background 140ms ease, color 140ms ease, transform 140ms ease, box-shadow 140ms ease;
    }

        .default-tab .e-tab-header .e-tab-item:hover {
            background: linear-gradient(180deg, #ffffff 0%, #ededed 100%);
            box-shadow: var(--shadow-md);
        }

    /* Active tab – raised effect */
    .default-tab .e-tab-header .e-active {
        background: var(--background);
        color: var(--active-fg);
        font-weight: 500;
        transform: translateY(-2px);
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.12);
        z-index: 1; /* sit above neighbors */
    }

        .default-tab .e-tab-header .e-active::after {
            content: "";
            position: absolute;
            left: 0;
            bottom: -1px;
            width: 100%;
            height: 3px;
            background: var(--accent);
            border-radius: 0 0 3px 3px;
        }

/* Content area with inset shadow */
.default-tab .e-content {
    border: 1px solid var(--border);
    border-radius: 0 6px 6px 6px;
    margin-top: -1px; /* snug under tabs */
    padding: 1rem;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* Inner padding for dynamic component hosts */
.default-tab .tab-content {
    min-height: calc(100vh - 180px);
}