/* * integrations-manager.css — integrations-manager.html * ----------------------------------------------------------------------------- * Tasarim sistemi katmani: design-system.css + components.css bu dosyadan ONCE * yuklenir, sayfa tasir. * * Onceki surum tamamen farkli bir palete sahipti (--primary-blue #007AFF, * --bg-dark #050505, --purple #8b5cf6) ve `:root` icinde --shadow / --shadow-lg * ADLARINI yeniden tanimlayarak tasarim sistemi tokenlarini eziyordu. Palet * marka tokenlarina tasindi; kanal ikonlarinin kendi marka renkleri (WhatsApp * yesili, Telegram mavisi...) bilincli olarak sabit birakildi. */ body { min-height: 100vh; overflow-x: hidden; background: var(--bg); color: var(--text); } .ds-skip-link:not(:focus):not(:focus-visible) { box-shadow: none; } /* Arka plan: sabit mor/mavi gradyan yerine tokenlarla uretilen ince mesh */ .bg-gradient { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(circle at 15% 0%, color-mix(in srgb, var(--brand-500) 16%, transparent) 0%, transparent 45%), radial-gradient(circle at 85% 100%, color-mix(in srgb, var(--violet-500) 14%, transparent) 0%, transparent 48%); } .container { position: relative; z-index: 1; max-width: var(--container-xl); margin: 0 auto; padding: var(--space-10) var(--space-5); } /* ========================================================================== SAYFA BASLIGI ========================================================================== */ .page-header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-5); margin-bottom: var(--space-8); padding: var(--space-8); border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--surface); box-shadow: var(--shadow-sm); } .header-content h1 { margin-bottom: var(--space-2); font-size: clamp(var(--text-xl), 3.4vw, var(--text-3xl)); font-weight: var(--weight-bold); letter-spacing: var(--tracking-tight); color: var(--text); } .header-content p { font-size: var(--text-base); color: var(--text-muted); } .back-btn { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--tap-target); margin-bottom: var(--space-4); padding: var(--space-2) var(--space-5); border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--surface); color: var(--text); font-size: var(--text-sm); font-weight: var(--weight-medium); text-decoration: none; transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); } .back-btn:hover { background: var(--surface-hover); border-color: var(--accent); color: var(--text); transform: translateX(-3px); } .package-badge { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-8); border-radius: var(--radius-lg); background: linear-gradient(135deg, var(--brand-500), var(--violet-500)); color: #ffffff; font-size: var(--text-base); font-weight: var(--weight-semibold); box-shadow: var(--shadow-md); } /* Paket rozeti plan varyantlari. Onceki surum bu üç arka plani JS'ten satir ici `style.background` olarak basiyordu; camgobegi (#00d2ff -> #0099cc) gradyan .package-badge'in marka gradyanini eziyor ve satir ici stil oldugu icin hicbir CSS kurali geri alamiyordu. Degerler artik tokenlardan geliyor ve kontrast WCAG AA gecer: pro beyaz metinle 5.5:1+, enterprise beyaz metinle 5.1:1+, starter koyu metinle 11:1+. (Eski enterprise'i beyaz metinle #ffaa00 uzerine basiyordu: ~2.1:1, AA'nin altinda.) */ .package-badge--pro { background: linear-gradient(135deg, var(--brand-500), var(--violet-500)); color: #ffffff; } .package-badge--enterprise { background: linear-gradient(135deg, var(--warning-600), var(--warning-700)); color: #ffffff; } .package-badge--starter { background: linear-gradient(135deg, var(--neutral-200), var(--neutral-300)); color: var(--neutral-900); } .badge-icon { font-size: var(--text-lg); } /* ========================================================================== UYARI KUTUSU ========================================================================== */ .alert-box { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-5); margin-bottom: var(--space-8); padding: var(--space-6); border: 1px solid var(--warning-border); border-radius: var(--radius-lg); background: var(--warning-bg); color: var(--warning-fg); } .alert-icon { font-size: 36px; line-height: 1; } .alert-content h3 { margin-bottom: var(--space-2); font-size: var(--text-lg); color: var(--warning-fg); } .alert-content p { margin-bottom: var(--space-4); color: var(--warning-fg); } .btn-upgrade { display: inline-flex; align-items: center; justify-content: center; min-height: var(--tap-target); padding: var(--space-3) var(--space-5); border-radius: var(--radius-md); background: var(--warning-solid); color: var(--warning-solid-fg); font-size: var(--text-sm); font-weight: var(--weight-semibold); text-decoration: none; transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); } .btn-upgrade:hover { color: var(--warning-solid-fg); transform: translateY(-2px); box-shadow: var(--shadow-md); } /* ========================================================================== ENTEGRASYON KARTLARI ========================================================================== */ .integrations-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: var(--space-6); margin-bottom: var(--space-12); } .integration-card, .model-card { position: relative; overflow: hidden; padding: var(--space-8); border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--surface); box-shadow: var(--shadow-sm); transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); } .integration-card::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, var(--brand-500), var(--violet-500)); opacity: 0; transition: opacity var(--dur-base) var(--ease-out); } .integration-card:hover, .model-card:hover { transform: translateY(-4px); border-color: var(--accent); box-shadow: var(--shadow-lg); } .integration-card:hover::before { opacity: 1; } /* Kart GOVDESI soluklastirilmaz: kilit gerekcesi (.plan-lock-note) okunur kalmali. Ayrica buradaki eski opacity: 0.62 degeri hareket katmaninin .fx-armed { opacity: 0 } kuralini eziyordu; kilitli kartlar hic animasyonla girmiyordu. Opaklik artik hic tanimlanmaz. */ .integration-card.locked, .model-card.locked { cursor: not-allowed; } .integration-card.locked:hover { transform: none; border-color: var(--border); box-shadow: var(--shadow-sm); } .integration-card.locked::before { opacity: 0.3; } .card-header { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); margin-bottom: var(--space-6); } /* Kanal ikonlari — platformlarin kendi marka renkleri, tema disi. */ .integration-icon { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: var(--radius-lg); font-size: 28px; box-shadow: var(--shadow-sm); } .integration-icon.whatsapp { background: linear-gradient(135deg, #25D366, #128C7E); } .integration-icon.telegram { background: linear-gradient(135deg, #0088cc, #229ED9); } .integration-icon.instagram { background: linear-gradient(135deg, #E1306C, #C13584, #833AB4); } .integration-icon.slack { background: linear-gradient(135deg, #4A154B, #611f69); } .integration-icon.email { background: linear-gradient(135deg, #EA4335, #FBBC05); } .integration-icon.widget { background: linear-gradient(135deg, var(--brand-500), var(--violet-500)); } .integration-status { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-full); background: var(--surface-muted); color: var(--text-muted); font-size: var(--text-xs); font-weight: var(--weight-semibold); } .integration-status[data-status="active"] { border-color: var(--success-border); background: var(--success-bg); color: var(--success-fg); } .status-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; } .integration-status[data-status="active"] .status-dot { animation: imStatusPulse 2s var(--ease-in-out) infinite; } @keyframes imStatusPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(1.2); } } .integration-card h3 { margin-bottom: var(--space-3); font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--text); } .integration-card > p { margin-bottom: var(--space-5); line-height: var(--leading-normal); color: var(--text-muted); } .integration-features { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-5); } .feature-tag, .spec { padding: var(--space-1) var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-muted); color: var(--text-muted); font-size: var(--text-xs); } .plan-requirement { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-5); } .plan-badge, .model-badge { padding: var(--space-1) var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-muted); color: var(--text-muted); font-size: var(--text-xs); font-weight: var(--weight-semibold); } .plan-badge.starter { background: var(--surface-muted); color: var(--text-muted); } .plan-badge.pro { border-color: var(--accent-soft-border); background: var(--accent-soft); color: var(--accent-text); } .plan-badge.enterprise { border-color: var(--warning-border); background: var(--warning-bg); color: var(--warning-fg); } /* ========================================================================== BUTONLAR ========================================================================== */ .btn-connect, .btn-select-model { display: flex; align-items: center; justify-content: center; gap: var(--space-3); width: 100%; min-height: var(--tap-target); padding: var(--space-3) var(--space-4); border: 1px solid transparent; border-radius: var(--radius-md); background: linear-gradient(135deg, var(--brand-500), var(--violet-500)); color: #ffffff; font-family: inherit; font-size: var(--text-sm); font-weight: var(--weight-semibold); cursor: pointer; box-shadow: var(--shadow-sm); transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); } .btn-connect:hover:not(:disabled), .btn-select-model:hover:not(:disabled) { transform: translateY(-2px); box-shadow: var(--shadow-md); } .btn-connect:disabled, .btn-select-model:disabled { background: var(--surface-active); color: var(--text-subtle); box-shadow: none; cursor: not-allowed; } .btn-connect.active { background: var(--success-solid); color: var(--success-solid-fg); } .btn-icon { font-size: var(--text-base); } /* ========================================================================== YAPILANDIRMA FORMU ========================================================================== */ .integration-config { margin-top: var(--space-6); padding-top: var(--space-6); border-top: 1px solid var(--border); } .config-form { display: flex; flex-direction: column; gap: var(--space-4); } .form-group { display: flex; flex-direction: column; gap: var(--space-2); } .form-group label { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text); } .form-input { min-height: var(--tap-target); padding: var(--space-3) var(--space-4); border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--bg-elevated); color: var(--text); font: inherit; font-size: var(--text-sm); transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); } .form-input:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 var(--focus-ring-width) color-mix(in srgb, var(--focus-ring) 30%, transparent); } .form-actions { display: flex; gap: var(--space-4); margin-top: var(--space-2); } .btn-save, .btn-cancel { flex: 1; min-height: var(--tap-target); padding: var(--space-3); border: 1px solid transparent; border-radius: var(--radius-md); font-family: inherit; font-size: var(--text-sm); font-weight: var(--weight-semibold); cursor: pointer; transition: background var(--dur-fast) var(--ease-out); } .btn-save { background: var(--success-solid); color: var(--success-solid-fg); } .btn-cancel { border-color: var(--border-strong); background: var(--surface); color: var(--text); } .btn-cancel:hover { background: var(--surface-hover); } /* ========================================================================== AI MODEL BOLUMU ========================================================================== */ .ai-model-section { margin-top: var(--space-16); } .ai-model-section h2 { margin-bottom: var(--space-2); font-size: clamp(var(--text-xl), 3.2vw, var(--text-2xl)); font-weight: var(--weight-bold); color: var(--text); } .section-description { margin-bottom: var(--space-8); font-size: var(--text-base); color: var(--text-muted); } .models-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-6); } .model-card { text-align: center; } .model-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-6); } .model-icon { font-size: 40px; line-height: 1; } .model-card h3 { margin-bottom: var(--space-3); font-size: var(--text-lg); color: var(--text); } .model-card p { margin-bottom: var(--space-6); color: var(--text-muted); } .model-specs { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); margin-bottom: var(--space-6); } /* ========================================================================== MODAL ========================================================================== */ .modal { display: none; position: fixed; inset: 0; z-index: var(--z-modal); align-items: center; justify-content: center; padding: var(--space-4); background: var(--overlay-bg); backdrop-filter: blur(6px); } .modal.active { display: flex; } .modal-content { position: relative; max-width: 500px; padding: var(--space-12); border: 1px solid var(--border); border-radius: var(--radius-2xl); background: var(--bg-elevated); box-shadow: var(--shadow-xl); text-align: center; } .modal-close { position: absolute; top: var(--space-3); right: var(--space-3); display: flex; align-items: center; justify-content: center; width: var(--tap-target); height: var(--tap-target); border: 1px solid var(--border); border-radius: 50%; background: var(--surface); color: var(--text-muted); font-size: var(--text-lg); cursor: pointer; transition: background var(--dur-fast) var(--ease-out), transform var(--dur-base) var(--ease-out); } .modal-close:hover { background: var(--surface-hover); color: var(--text); transform: rotate(90deg); } .modal-icon { margin-bottom: var(--space-6); font-size: 56px; line-height: 1; } .modal-content h2 { margin-bottom: var(--space-4); font-size: var(--text-2xl); color: var(--text); } .modal-content p { margin-bottom: var(--space-8); line-height: var(--leading-normal); color: var(--text-muted); } .modal-actions { display: flex; flex-direction: column; gap: var(--space-4); } .btn-modal-upgrade { display: inline-flex; align-items: center; justify-content: center; min-height: var(--tap-target); padding: var(--space-4) var(--space-8); border-radius: var(--radius-md); background: var(--accent); color: var(--accent-fg); font-size: var(--text-sm); font-weight: var(--weight-semibold); text-decoration: none; transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); } .btn-modal-upgrade:hover { color: var(--accent-fg); transform: translateY(-2px); box-shadow: var(--shadow-md); } .btn-modal-upgrade.enterprise { background: var(--warning-solid); color: var(--warning-solid-fg); } .btn-modal-upgrade.enterprise:hover { color: var(--warning-solid-fg); } /* ========================================================================== DUYARLILIK ========================================================================== */ @media (max-width: 768px) { .container { padding: var(--space-6) var(--space-4); } .page-header { flex-direction: column; align-items: stretch; text-align: center; padding: var(--space-6); } .integrations-grid, .models-grid { grid-template-columns: 1fr; } .alert-box { flex-direction: column; text-align: center; } .modal-content { padding: var(--space-8); } } @media (prefers-reduced-motion: reduce) { .integration-status[data-status="active"] .status-dot { animation: none !important; } } /* --- Model sinifi kartlari ------------------------------------------------ Bu kartlar okunur: bir sey secmezler, hangi paketin hangi sinifi aldigini gosterirler. Onceki surumde yerlerinde marka adi tasiyan ve tiklaninca yalnizca localStorage yazan dort "model karti" vardi. */ .model-tier-card { display: flex; flex-direction: column; gap: var(--space-2); text-align: left; } .model-tier-card .model-header { margin-bottom: var(--space-2); gap: var(--space-2); } .model-tier-card h3 { margin-bottom: 0; font-size: var(--text-base); line-height: 1.45; } /* Musterinin kendi katmani. "Paketiniz" rozeti olmadan bes kart da ayni gorunuyor ve "benimki hangisi?" sorusu cevapsiz kaliyor. */ .model-tier-yours { padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); background: var(--accent); color: var(--accent-fg); font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: 0.04em; text-transform: uppercase; } .model-badge.pro, .model-badge.business { border-color: var(--accent-soft-border); background: var(--accent-soft); color: var(--accent-text); } .model-badge.enterprise { border-color: var(--warning-border); background: var(--warning-bg); color: var(--warning-fg); } /* Secili AI modeli. integrations-manager.js onceki surumde satir ici `style.border` basiyordu; kullandigi --primary-blue / --border-color tokenlari bu dosyanin tasarim sistemi gecisinde kaldirilmisti. */ .model-card.is-selected { border: 2px solid var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } /* Sayfa bildirim serisi (eski satir ici cssText yerine). */ .im-toast { position: fixed; top: 20px; right: 20px; z-index: var(--z-toast); padding: var(--space-4) var(--space-6); border-radius: var(--radius-md); border: 1px solid transparent; font-weight: var(--weight-medium); box-shadow: 0 8px 24px rgba(var(--shadow-rgb), var(--shadow-a4)); max-width: min(420px, calc(100vw - 40px)); } .im-toast--success { background: var(--success-solid); color: var(--success-solid-fg); } .im-toast--danger { background: var(--danger-solid); color: var(--danger-solid-fg); } .im-toast--info { background: var(--info-solid); color: var(--info-solid-fg); } /* ========================================================================== KART EYLEM SATIRI + KURULUM REHBERI BAGLANTISI -------------------------------------------------------------------------- Onceki surumde bu satir HTML icinde `style="display:flex;gap:8px"` ve rehber baglantisi da 9 ozellikli bir satir ici stil tasiyordu. Rehber baglantisinin rengi #3b82f6, zemini rgba(59,130,246,.1) idi: beyaz kart uzerinde 3.5:1 — AA metin esiginin (4.5:1) ALTINDA. Tokenlara tasindi: --accent-text (#1a38d1) / --accent-soft (#f0f2ff) = 7.4:1. ========================================================================== */ .integration-actions { display: flex; gap: var(--space-2); align-items: stretch; margin-top: var(--space-4); } .integration-actions > .btn-connect { flex: 1 1 auto; width: auto; } .integration-guide-link { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; gap: var(--space-2); /* Dokunma hedefi: ikon-only baglanti oldugu icin 44x44 tabani sart. */ min-width: var(--tap-target); min-height: var(--tap-target); padding: var(--space-3); border: 1px solid var(--accent-soft-border); border-radius: var(--radius-md); background: var(--accent-soft); color: var(--accent-text); font-size: var(--text-sm); font-weight: var(--weight-semibold); text-decoration: none; transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); } .integration-guide-link:hover { background: var(--surface-hover); border-color: var(--accent); transform: translateY(-2px); } .integration-guide-link:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: 2px; } .integration-guide-icon { font-size: 1.05rem; line-height: 1; } /* ========================================================================== YASAL ALT BILGI -------------------------------------------------------------------------- Onceki surum satir ici `border-top: 1px solid rgba(255,255,255,.15)` tasiyordu: acik temada beyaz uzerine beyaz, yani gorunmez bir ayrac. Baglantilar da 390px'te 26px yuksekliginde kaliyordu (44px olmali). ========================================================================== */ .im-footer { position: relative; z-index: 1; margin-top: var(--space-8); padding: var(--space-4) var(--space-3); border-top: 1px solid var(--border); text-align: center; color: var(--text-muted); } .im-footer .legal-links-normalized { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-1) var(--space-3); } .im-footer .legal-links-normalized a { display: inline-flex; align-items: center; min-height: var(--tap-target); padding: 0 var(--space-2); color: var(--accent-text); font-size: var(--text-sm); } .im-footer .legal-links-normalized a:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: 2px; border-radius: var(--radius-sm); } @media (prefers-reduced-motion: reduce) { .integration-guide-link, .integration-guide-link:hover { transition: none; transform: none; } } /* ========================================================================== YAYINDA OLMAYAN KANALLAR -------------------------------------------------------------------------- Telegram, Slack ve E-posta kartlari "Baglan" butonu gosteriyordu ama supabase/functions altinda bu kanallar icin webhook YOK: meta-config.ts yalnizca whatsapp | instagram | facebook taniyor, web widget de openrouter-chat-public uzerinden calisiyor. Kullanicinin kurulumu tamamlayip botun o kanalda hic cevap vermedigini sonradan fark etmesi yerine durum kartta durustce yaziyor. Kilit (.locked) gorunumunden AYRI tutuldu: orada cozum paketi yukseltmek, burada boyle bir cozum yok. ========================================================================== */ .integration-card.coming-soon { opacity: 0.72; cursor: default; } .integration-card.coming-soon:hover { transform: none; border-color: var(--border); box-shadow: var(--shadow-sm); } .integration-card.coming-soon .integration-status[data-status="coming-soon"] { background: var(--warning-bg); border-color: var(--warning-border); color: var(--warning-fg); } .integration-card.coming-soon .integration-status[data-status="coming-soon"] .status-dot { background: var(--warning-solid); animation: none; } .integration-card.coming-soon .btn-connect:disabled { background: var(--surface-active); color: var(--text-muted); border-color: var(--border); box-shadow: none; cursor: not-allowed; } .integration-card.coming-soon .btn-connect:disabled:hover { transform: none; box-shadow: none; } /* ========================================================================== PAKET KILIDI — DURUST GORUNUM -------------------------------------------------------------------------- Onceki surumde kilitli kart yalnizca %62 opaklikla soluklastiriliyor, butonu ise hala PARLAK marka gradyanini tasiyordu: "Locked" yaziyor ama birincil eylem gibi duruyordu. Musteri ne oldugunu anlamiyordu. Simdi kilitli kart uc bilgiyi birden verir: 1) gorsel kilit (buton sakin, uyari tonlu, kilit ikonlu) 2) NEDEN + hangi plan gerektigi (.plan-lock-note) 3) cikis yolu (buton yukseltme modalini acar) "Yakinda" kanallarindan ayridir: orada cozum yukseltme DEGIL, beklemektir. ========================================================================== */ .plan-lock-note { display: flex; align-items: flex-start; gap: var(--space-2); margin: 0 0 var(--space-4); padding: var(--space-3); border: 1px solid var(--warning-border); border-radius: var(--radius-md); background: var(--warning-bg); color: var(--warning-fg); font-size: var(--text-xs); font-weight: var(--weight-semibold); line-height: 1.5; } .plan-lock-note-icon { flex-shrink: 0; line-height: 1.5; } /* Kilitli kart artik tamamen soluklasmiyor: gerekce METNI okunur kalmali. Kartin kendisi sakinlesir, bilgi tasiyan parcalar tam kontrastta durur. */ .integration-card.locked, .model-card.locked { border-style: dashed; } .integration-card.locked .integration-icon, .integration-card.locked .integration-features, .model-card.locked .model-icon, .model-card.locked .model-specs { opacity: 0.72; } .integration-card.locked .btn-connect, .model-card.locked .btn-select-model { background: var(--warning-bg); border-color: var(--warning-border); color: var(--warning-fg); box-shadow: none; } .integration-card.locked .btn-connect:hover, .model-card.locked .btn-select-model:hover { background: var(--surface); border-color: var(--warning-solid); transform: none; box-shadow: var(--shadow-sm); } /* Kartin ustundeki plan rozeti "gerekli plan" oldugunu soylemeliydi; kilitliyken cerceve kalinlasip anlami netlesir. */ .integration-card.locked .plan-badge, .model-card.locked .model-badge { border-color: var(--warning-border); background: var(--warning-bg); color: var(--warning-fg); }