.color-split {
    --cs-panel:    #f5e642;
    --cs-text:     #1a1612;
    --cs-btn-bg:   #1a1612;
    --cs-btn-text: #ffffff;

    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 480px;
    width: 100%;
}

/* ── Varsayılan: metin sol, görsel sağ ── */
.color-split .cs-panel { order: 1; }
.color-split .cs-media  { order: 2; }

/* ── image_left: görsel sol, metin sağ ── */
.color-split.cs-image-left .cs-panel { order: 2; }
.color-split.cs-image-left .cs-media  { order: 1; }

/* ── Metin Paneli ── */
.cs-panel {
    background-color: var(--cs-panel);
    display: flex;
    align-items: flex-end;
    padding: clamp(32px, 5vw, 72px);
}

.cs-panel-inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
}

.cs-title {
    font-family: 'Cormorant Garamond', 'Georgia', ui-serif, serif;
    font-style: italic;
    font-weight: 700;
    font-size: clamp(28px, 3.5vw, 52px);
    line-height: 1.08;
    letter-spacing: -0.01em;
    color: var(--cs-text);
    margin: 0;
}

.cs-desc {
    font-family: 'DM Sans', ui-sans-serif, system-ui, sans-serif;
    font-size: clamp(13px, 1.4vw, 15px);
    line-height: 1.75;
    color: var(--cs-text);
    opacity: .85;
    margin: 0;
}
.cs-desc * { font-size: inherit; }

.cs-btn {
    display: inline-block;
    background-color: var(--cs-btn-bg);
    color: var(--cs-btn-text);
    font-family: 'DM Sans', ui-sans-serif, system-ui, sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
    padding: 12px 28px;
    border-radius: 2px;
    transition: opacity .2s;
    margin-top: 8px;
}

.cs-btn:hover { opacity: .82; }

/* ── Görsel ── */
.cs-media {
    overflow: hidden;
    background: #e8e0d6;
}

.cs-img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center top;
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .color-split {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    /* Mobilde: DOM sırası korunur
       image_right → panel(order:1) üstte, media(order:2) altta
       image_left  → media(order:1) üstte, panel(order:2) altta
       Yani "solda ne varsa mobilde önce gelir" mantığı order değerleriyle sağlanıyor */

    .cs-panel {
        align-items: flex-start;
        padding: 40px 24px;
        min-height: auto;
    }

    .cs-panel-inner { max-width: 100%; }

    .cs-title { font-size: clamp(26px, 8vw, 38px); }

    .cs-media { min-height: 280px; }
}