/* ============================================================
   Entegrasyonlar
   ============================================================ */

/* ── Entegrasyon kartı ── */
.int-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 10px;
}
@media (max-width: 1100px) {
    /* En geniş kart içeriği ~114px: sütun sayısı ekrana göre ayarlanır */
    .int-grid {
        grid-template-columns: repeat(auto-fill, minmax(114px, 1fr));
    }
}

.int-pill {
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 12px;
    padding: 14px 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
    transition:
        border-color 0.18s,
        box-shadow 0.18s;
}

.int-pill:hover {
    border-color: #ccc;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.07);
}

.int-icon {
    width: 42px;
    height: 42px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ── Kod bloğu ── */
.code-block {
    background: #2a2f34;
    border-radius: 12px;
    padding: 22px 24px;
    font-family: "SF Mono", "Fira Code", monospace;
    font-size: 12px;
    line-height: 2;
    overflow-x: auto;
}

.ck {
    color: #a8d5a2;
}

.cs {
    color: #ff7b7b;
}

.cn {
    color: #bd93f9;
}