/* ==========================================================================
   Synaptix AI — Component Layer
   --------------------------------------------------------------------------
   Bağımlılık: design-system.css (token'lar). ÖNCE onu yükleyin.

   NEDEN AYRI DOSYA (design-system.css'e gömülmedi)?
     1) widget.js gömülü sohbet balonu ve e-posta/embed bağlamları yalnızca
        token'lara ihtiyaç duyar; bileşen katmanının ~40KB'ını taşımaları
        gereksiz. Token dosyası tek başına anlamlı bir birim.
     2) Migrasyon iki adımda yapılabilir: önce her sayfa token'lara geçer
        (düşük risk, görsel fark yok), sonra bileşenler tek tek devralınır.
        Tek dosya olsaydı "hepsi ya da hiç" olurdu.
     3) Cache granülaritesi: token'lar nadiren, bileşenler sık değişir.
     Build adımı olmadığı için iki <link> etiketi maliyeti kabul edilebilir;
     istenirse ileride tek dosyada birleştirilebilir (API aynı kalır).

   İSİMLENDİRME
     Tüm sınıflar `ds-` önekli. Legacy CSS ile çakışma riski sıfır.

   ERİŞİLEBİLİRLİK
     Her bileşenin gerektirdiği ARIA, bloğunun başındaki yorumda yazılıdır.
   ========================================================================== */

/* Hareket katmanı. @import ile bağlanır çünkü components.css'in yüklendiği
   her sayfa hareket sözleşmesine de sahip olmalı; 32 HTML dosyasına ayrı
   <link> eklemek senkron kalması gereken ikinci bir liste yaratırdı.
   AYRICA <link rel="stylesheet" href="motion.css"> EKLEMEYİN — çift indirir.
   Kural gereği @import, dosyadaki tüm kurallardan ÖNCE gelmelidir. */
@import url("motion.css");

/* ==========================================================================
   BUTTON
   --------------------------------------------------------------------------
   <button type="button" class="ds-btn ds-btn-primary ds-btn-md">Kaydet</button>

   ARIA:
     - İkon-yalnız buton  -> aria-label ZORUNLU.
     - Yükleniyor durumu  -> aria-busy="true" + aria-disabled="true"
                             (disabled yerine: odak kaybolmasın).
     - Aç/kapa buton      -> aria-pressed="true|false".
     - Menü açan buton    -> aria-haspopup="menu" aria-expanded="true|false".
     - Spinner            -> aria-hidden="true"; durum metni .ds-sr-only içinde.
   ========================================================================== */

.ds-btn {
    /* yerel değişkenler — varyantlar bunları ezer */
    --ds-btn-bg: transparent;
    --ds-btn-fg: var(--text);
    --ds-btn-border: transparent;
    --ds-btn-bg-hover: var(--surface-hover);
    --ds-btn-fg-hover: var(--text);
    --ds-btn-border-hover: transparent;
    --ds-btn-shadow: none;
    --ds-btn-shadow-hover: none;

    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);

    min-height: var(--tap-target);
    padding: var(--space-3) var(--space-5);

    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    line-height: 1.2;
    letter-spacing: 0.005em;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;

    color: var(--ds-btn-fg);
    background-color: var(--ds-btn-bg);
    border: 1px solid var(--ds-btn-border);
    border-radius: var(--radius-md);
    box-shadow: var(--ds-btn-shadow);

    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    appearance: none;

    transition:
        background-color var(--dur-fast) var(--ease-out),
        border-color var(--dur-fast) var(--ease-out),
        color var(--dur-fast) var(--ease-out),
        box-shadow var(--dur-base) var(--ease-out),
        transform var(--dur-fast) var(--ease-out);
}

.ds-btn:hover:not(:disabled):not([aria-disabled="true"]) {
    background-color: var(--ds-btn-bg-hover);
    color: var(--ds-btn-fg-hover);
    border-color: var(--ds-btn-border-hover);
    box-shadow: var(--ds-btn-shadow-hover);
    transform: translateY(-1px);
}

.ds-btn:active:not(:disabled):not([aria-disabled="true"]) {
    transform: translateY(0);
    box-shadow: var(--ds-btn-shadow);
    transition-duration: 60ms;
}

.ds-btn:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring);
    outline-offset: 2px;
}

.ds-btn:disabled,
.ds-btn[aria-disabled="true"]:not(.is-loading) {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Yükleniyor durumu aria-disabled taşır ama %50 soluklaştırılmaz: kullanıcı
   butonun hâlâ "çalıştığını" görmeli, "kapalı" olduğunu değil. */
.ds-btn.is-loading { opacity: 0.9; }

/* --- Varyantlar --- */

.ds-btn-primary {
    --ds-btn-bg: var(--accent);
    --ds-btn-fg: var(--accent-fg);
    --ds-btn-border: var(--accent);
    --ds-btn-bg-hover: var(--accent-hover);
    --ds-btn-fg-hover: var(--accent-fg);
    --ds-btn-border-hover: var(--accent-hover);
    --ds-btn-shadow: var(--shadow-sm);
    --ds-btn-shadow-hover: var(--shadow-accent);
}

.ds-btn-secondary {
    --ds-btn-bg: var(--surface);
    --ds-btn-fg: var(--text);
    --ds-btn-border: var(--border-strong);
    --ds-btn-bg-hover: var(--surface-hover);
    --ds-btn-fg-hover: var(--accent-text);
    --ds-btn-border-hover: var(--accent);
    --ds-btn-shadow: var(--shadow-xs);
    --ds-btn-shadow-hover: var(--shadow-md);
}

.ds-btn-ghost {
    --ds-btn-bg: transparent;
    --ds-btn-fg: var(--text-muted);
    --ds-btn-border: transparent;
    --ds-btn-bg-hover: var(--surface-hover);
    --ds-btn-fg-hover: var(--text);
    --ds-btn-border-hover: transparent;
}

.ds-btn-danger {
    --ds-btn-bg: var(--danger-solid);
    --ds-btn-fg: var(--danger-solid-fg);
    --ds-btn-border: var(--danger-solid);
    --ds-btn-bg-hover: var(--danger-700);
    --ds-btn-fg-hover: var(--white);
    --ds-btn-border-hover: var(--danger-700);
    --ds-btn-shadow: var(--shadow-sm);
    --ds-btn-shadow-hover: 0 8px 24px -8px rgba(227, 28, 35, 0.55);
}

[data-theme="dark"] .ds-btn-danger,
body.dark-mode .ds-btn-danger {
    /* Dark modda dolgu danger-400 (parlak) olduğu için hover danger-300'e açılır */
    --ds-btn-bg-hover: var(--danger-300);
    --ds-btn-fg-hover: var(--neutral-950);
    --ds-btn-border-hover: var(--danger-300);
}

.ds-btn-link {
    --ds-btn-bg: transparent;
    --ds-btn-fg: var(--accent-text);
    --ds-btn-border: transparent;
    --ds-btn-bg-hover: transparent;
    --ds-btn-fg-hover: var(--accent-hover);
    padding-inline: var(--space-1);
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.ds-btn-link:hover:not(:disabled) { transform: none; }

/* --- Boyutlar (dokunma hedefi 44px altına düşmez: hitbox ::before ile korunur) --- */

.ds-btn-sm {
    min-height: 34px;
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-xs);
    border-radius: var(--radius-sm);
    gap: var(--space-1);
}

/* Küçük butonun görsel yüksekliği 34px ama tıklama alanı 44px kalır */
.ds-btn-sm::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: var(--tap-target);
    transform: translateY(-50%);
}

.ds-btn-md {
    min-height: var(--tap-target);
    padding: var(--space-3) var(--space-5);
    font-size: var(--text-sm);
}

.ds-btn-lg {
    min-height: 54px;
    padding: var(--space-4) var(--space-8);
    font-size: var(--text-base);
    border-radius: var(--radius-lg);
}

.ds-btn-block { display: flex; width: 100%; }

/* İkon-yalnız buton — kare, aria-label zorunlu */
.ds-btn-icon {
    padding: 0;
    width: var(--tap-target);
    min-width: var(--tap-target);
}

.ds-btn-icon.ds-btn-sm { width: 34px; min-width: 34px; }
.ds-btn-icon.ds-btn-lg { width: 54px; min-width: 54px; }

/* --- Yükleniyor durumu ---
   <button class="ds-btn ds-btn-primary is-loading" aria-busy="true" aria-disabled="true">
     <span class="ds-spinner" aria-hidden="true"></span>
     <span class="ds-btn-label">Kaydediliyor…</span>
   </button>                                                                  */

.ds-btn.is-loading {
    cursor: progress;
    pointer-events: none;
}

.ds-btn.is-loading .ds-btn-label { opacity: 0.85; }

.ds-spinner {
    display: inline-block;
    flex-shrink: 0;
    width: 1em;
    height: 1em;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: var(--radius-full);
    animation: ds-spin 640ms linear infinite;
}

.ds-spinner-lg { width: 1.75rem; height: 1.75rem; border-width: 3px; }

/* Buton grubu — bitişik butonlar */
.ds-btn-group {
    display: inline-flex;
    align-items: center;
}

.ds-btn-group > .ds-btn { border-radius: 0; margin-inline-start: -1px; }
.ds-btn-group > .ds-btn:first-child {
    border-start-start-radius: var(--radius-md);
    border-end-start-radius: var(--radius-md);
    margin-inline-start: 0;
}
.ds-btn-group > .ds-btn:last-child {
    border-start-end-radius: var(--radius-md);
    border-end-end-radius: var(--radius-md);
}
.ds-btn-group > .ds-btn:hover,
.ds-btn-group > .ds-btn:focus-visible { z-index: var(--z-raised); transform: none; }

/* ==========================================================================
   FORM — Field / Input / Select / Textarea
   --------------------------------------------------------------------------
   <div class="ds-field">
     <label class="ds-label" for="email">E-posta <span class="ds-required"
            aria-hidden="true">*</span></label>
     <input id="email" class="ds-input" type="email" required
            aria-describedby="email-hint email-err" aria-invalid="false">
     <p id="email-hint" class="ds-hint">Şirket adresinizi kullanın.</p>
     <p id="email-err" class="ds-error-text" role="alert"></p>
   </div>

   ARIA:
     - label[for] ↔ input[id] bağlantısı ZORUNLU (görünmez etiket için
       .ds-sr-only kullanın, placeholder etiket YERİNE geçmez).
     - Hata: aria-invalid="true" + aria-describedby hata id'sini içermeli.
     - Hata metni role="alert" (veya kapsayıcı aria-live="polite").
     - Zorunlu alan: required + görsel * aria-hidden.
   ========================================================================== */

.ds-field {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-width: 0;
}

.ds-label {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--text);
    line-height: var(--leading-snug);
}

.ds-required { color: var(--danger-fg); margin-inline-start: 2px; }

.ds-input,
.ds-select,
.ds-textarea {
    width: 100%;
    min-height: var(--tap-target);
    padding: var(--space-3) var(--space-4);

    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: var(--leading-snug);
    color: var(--text);

    background-color: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-inset);

    appearance: none;
    transition:
        border-color var(--dur-fast) var(--ease-out),
        box-shadow var(--dur-fast) var(--ease-out),
        background-color var(--dur-fast) var(--ease-out);
}

.ds-textarea {
    min-height: 7rem;
    resize: vertical;
    line-height: var(--leading-normal);
}

.ds-input::placeholder,
.ds-textarea::placeholder {
    color: var(--text-subtle);
    opacity: 1;
}

.ds-input:hover:not(:disabled),
.ds-select:hover:not(:disabled),
.ds-textarea:hover:not(:disabled) {
    border-color: var(--text-subtle);
}

.ds-input:focus-visible,
.ds-select:focus-visible,
.ds-textarea:focus-visible,
.ds-input:focus,
.ds-select:focus,
.ds-textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 var(--focus-ring-width) color-mix(in srgb, var(--focus-ring) 32%, transparent);
    background-color: var(--bg-elevated);
}

.ds-input:disabled,
.ds-select:disabled,
.ds-textarea:disabled {
    background-color: var(--bg-sunken);
    color: var(--text-subtle);
    cursor: not-allowed;
    box-shadow: none;
}

.ds-input:read-only:not(:disabled) {
    background-color: var(--bg-sunken);
}

/* Hata durumu */
.ds-input[aria-invalid="true"],
.ds-select[aria-invalid="true"],
.ds-textarea[aria-invalid="true"],
.ds-field.is-error .ds-input,
.ds-field.is-error .ds-select,
.ds-field.is-error .ds-textarea {
    border-color: var(--danger-solid);
    background-color: var(--danger-bg);
}

.ds-input[aria-invalid="true"]:focus,
.ds-field.is-error .ds-input:focus {
    box-shadow: 0 0 0 var(--focus-ring-width) color-mix(in srgb, var(--danger-solid) 30%, transparent);
}

/* Başarı durumu */
.ds-field.is-success .ds-input,
.ds-field.is-success .ds-select {
    border-color: var(--success-solid);
}

.ds-hint {
    font-size: var(--text-xs);
    color: var(--text-muted);
    line-height: var(--leading-snug);
}

.ds-error-text {
    display: flex;
    align-items: flex-start;
    gap: var(--space-1);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    color: var(--danger-fg);
    line-height: var(--leading-snug);
}

.ds-error-text:empty { display: none; }

.ds-error-text::before {
    content: "⚠︎";
    flex-shrink: 0;
    line-height: 1.25;
}

.ds-success-text {
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    color: var(--success-fg);
}

/* Select oku — arka planı token'dan gelen SVG (harici istek yok) */
.ds-select {
    padding-inline-end: var(--space-10);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23656a86' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 7.5 10 12.5 15 7.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-4) center;
    background-size: 1.15em;
    cursor: pointer;
}

[dir="rtl"] .ds-select { background-position: left var(--space-4) center; }

[data-theme="dark"] .ds-select,
body.dark-mode .ds-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23878da8' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 7.5 10 12.5 15 7.5'/%3E%3C/svg%3E");
}

/* Input grubu (önek/sonek) */
.ds-input-group {
    display: flex;
    align-items: stretch;
}

.ds-input-group > .ds-input { border-radius: 0; }
.ds-input-group > :first-child {
    border-start-start-radius: var(--radius-md);
    border-end-start-radius: var(--radius-md);
}
.ds-input-group > :last-child {
    border-start-end-radius: var(--radius-md);
    border-end-end-radius: var(--radius-md);
}

.ds-input-addon {
    display: inline-flex;
    align-items: center;
    padding-inline: var(--space-4);
    background: var(--bg-sunken);
    border: 1px solid var(--border-strong);
    color: var(--text-muted);
    font-size: var(--text-sm);
    white-space: nowrap;
}

.ds-input-group > .ds-input + .ds-input-addon,
.ds-input-group > .ds-input-addon + .ds-input { margin-inline-start: -1px; }

/* Checkbox & Radio */
.ds-check {
    display: inline-flex;
    align-items: flex-start;
    gap: var(--space-3);
    min-height: var(--tap-target);
    padding-block: var(--space-2);
    cursor: pointer;
    font-size: var(--text-sm);
    color: var(--text);
}

.ds-check input[type="checkbox"],
.ds-check input[type="radio"] {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    margin: 0;
    margin-block-start: 0.1rem;
    accent-color: var(--accent);
    cursor: pointer;
}

.ds-check input:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring);
    outline-offset: 2px;
}

.ds-check:has(input:disabled) { opacity: 0.5; cursor: not-allowed; }

/* ==========================================================================
   TOGGLE / SWITCH
   --------------------------------------------------------------------------
   <button type="button" class="ds-switch" role="switch" aria-checked="false"
           aria-labelledby="sw-lbl"><span class="ds-switch-thumb"></span></button>
   <span id="sw-lbl">Bildirimler</span>

   ARIA: role="switch" + aria-checked. Etiket aria-labelledby ile bağlanır.
   ========================================================================== */

.ds-switch {
    position: relative;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    width: 46px;
    height: 26px;
    padding: 0;
    background-color: var(--neutral-400);
    border: none;
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: background-color var(--dur-base) var(--ease-out);
}

/* Görsel yükseklik 26px, dokunma hedefi 44px */
.ds-switch::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: max(100%, var(--tap-target));
    height: var(--tap-target);
    transform: translate(-50%, -50%);
}

.ds-switch-thumb {
    position: absolute;
    inset-inline-start: 3px;
    width: 20px;
    height: 20px;
    background: var(--white);
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-sm);
    transition: transform var(--dur-base) var(--ease-spring);
}

.ds-switch[aria-checked="true"] { background-color: var(--accent); }
.ds-switch[aria-checked="true"] .ds-switch-thumb { transform: translateX(20px); }
[dir="rtl"] .ds-switch[aria-checked="true"] .ds-switch-thumb { transform: translateX(-20px); }

.ds-switch:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring);
    outline-offset: 3px;
}

.ds-switch:disabled { opacity: 0.5; cursor: not-allowed; }

.ds-switch-field {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    min-height: var(--tap-target);
}

/* ==========================================================================
   CARD
   --------------------------------------------------------------------------
   Etkileşimli kart için `.ds-card-interactive` + gerçek <a>/<button> sarmalayıcı.
   Kartın tamamı tıklanabilirse başlıktaki bağlantıya ::after ile alan verilir.
   ========================================================================== */

.ds-card {
    display: flex;
    flex-direction: column;
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition:
        border-color var(--dur-base) var(--ease-out),
        box-shadow var(--dur-base) var(--ease-out),
        transform var(--dur-base) var(--ease-out);
}

.ds-card-body    { padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); }
.ds-card-header  { padding: var(--space-5) var(--space-6); border-bottom: 1px solid var(--border); }
.ds-card-footer  { padding: var(--space-4) var(--space-6); border-top: 1px solid var(--border); background: var(--bg-sunken); }
.ds-card-title   { font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--text); margin: 0; }
.ds-card-desc    { font-size: var(--text-sm); color: var(--text-muted); margin: 0; }

.ds-card-interactive { cursor: pointer; }

.ds-card-interactive:hover {
    border-color: var(--accent);
    box-shadow: var(--shadow-lg);
    transform: translateY(-3px);
}

.ds-card-interactive:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 var(--focus-ring-width) color-mix(in srgb, var(--focus-ring) 32%, transparent);
}

.ds-card-accent { border-color: var(--accent-soft-border); background: var(--accent-soft); }

.ds-card-elevated { box-shadow: var(--shadow-md); border-color: transparent; background: var(--bg-elevated); }

/* ==========================================================================
   BADGE / PILL
   --------------------------------------------------------------------------
   Sadece renkle anlam taşımayın (WCAG 1.4.1) — metin de durumu söylemeli.
   Canlı güncellenen sayaç için: <span class="ds-badge" aria-live="polite">
   ========================================================================== */

.ds-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 0.2rem var(--space-2);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    line-height: 1.45;
    letter-spacing: 0.01em;
    white-space: nowrap;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--surface-muted);
    color: var(--text-muted);
}

.ds-badge-pill { border-radius: var(--radius-full); padding-inline: var(--space-3); }

/* Dikey flex kaplarda (kart gövdesi, .ds-stack) rozet varsayılan `stretch` ile
   tüm genişliğe yayılırdı; içeriği kadar kalmalı. */
.ds-card-body > .ds-badge,
.ds-stack > .ds-badge,
.ds-alert-body > .ds-badge,
.ds-modal-body > .ds-badge { align-self: flex-start; }

.ds-badge-accent  { background: var(--accent-soft);  border-color: var(--accent-soft-border); color: var(--accent-text); }
.ds-badge-success { background: var(--success-bg);   border-color: var(--success-border);     color: var(--success-fg); }
.ds-badge-warning { background: var(--warning-bg);   border-color: var(--warning-border);     color: var(--warning-fg); }
.ds-badge-danger  { background: var(--danger-bg);    border-color: var(--danger-border);      color: var(--danger-fg); }
.ds-badge-info    { background: var(--info-bg);      border-color: var(--info-border);        color: var(--info-fg); }

.ds-badge-solid-accent  { background: var(--accent);        border-color: transparent; color: var(--accent-fg); }
.ds-badge-solid-success { background: var(--success-solid); border-color: transparent; color: var(--success-solid-fg); }
.ds-badge-solid-warning { background: var(--warning-solid); border-color: transparent; color: var(--warning-solid-fg); }
.ds-badge-solid-danger  { background: var(--danger-solid);  border-color: transparent; color: var(--danger-solid-fg); }

/* Durum noktası — metinle birlikte kullanılmalı */
.ds-badge-dot::before {
    content: "";
    width: 0.5em;
    height: 0.5em;
    border-radius: var(--radius-full);
    background: currentColor;
    flex-shrink: 0;
}

/* ==========================================================================
   AVATAR
   --------------------------------------------------------------------------
   Görselli: <img class="ds-avatar" alt="Ayşe Yılmaz">
   Baş harfli: <span class="ds-avatar" role="img" aria-label="Ayşe Yılmaz">AY</span>
   Dekoratif grup içindeyse alt="" + kapsayıcıda metin.
   ========================================================================== */

.ds-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    background: linear-gradient(135deg, var(--brand-500), var(--violet-500));
    color: var(--white);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    overflow: hidden;
    object-fit: cover;
    user-select: none;
}

.ds-avatar-sm { width: 28px; height: 28px; font-size: var(--text-xs); }
.ds-avatar-lg { width: 56px; height: 56px; font-size: var(--text-lg); }
.ds-avatar-xl { width: 80px; height: 80px; font-size: var(--text-xl); }

.ds-avatar-ring { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent-soft-border); }

.ds-avatar-group { display: inline-flex; align-items: center; }
.ds-avatar-group > .ds-avatar + .ds-avatar { margin-inline-start: -12px; }
.ds-avatar-group > .ds-avatar { box-shadow: 0 0 0 2px var(--surface); }

/* ==========================================================================
   ALERT / CALLOUT
   --------------------------------------------------------------------------
   ARIA: bilgi -> role="status" aria-live="polite";
         hata  -> role="alert" (aria-live="assertive" örtük).
   ========================================================================== */

.ds-alert {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border: 1px solid var(--border);
    border-inline-start-width: 3px;
    border-radius: var(--radius-md);
    background: var(--surface-muted);
    color: var(--text);
    font-size: var(--text-sm);
    line-height: var(--leading-snug);
}

.ds-alert-icon  { flex-shrink: 0; font-size: 1.15em; line-height: 1.35; }
.ds-alert-body  { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.ds-alert-title { font-weight: var(--weight-semibold); }

.ds-alert-success { background: var(--success-bg); border-color: var(--success-border); color: var(--success-fg); }
.ds-alert-warning { background: var(--warning-bg); border-color: var(--warning-border); color: var(--warning-fg); }
.ds-alert-danger  { background: var(--danger-bg);  border-color: var(--danger-border);  color: var(--danger-fg); }
.ds-alert-info    { background: var(--info-bg);    border-color: var(--info-border);    color: var(--info-fg); }

/* ==========================================================================
   MODAL / DIALOG
   --------------------------------------------------------------------------
   <div class="ds-modal-backdrop" data-open>
     <div class="ds-modal" role="dialog" aria-modal="true"
          aria-labelledby="m-title" aria-describedby="m-desc" tabindex="-1"> …

   ARIA / davranış (JS sonraki faz):
     - role="dialog" aria-modal="true"; başlık aria-labelledby ile bağlı.
     - Açılınca odak modalın içine taşınır (ilk odaklanabilir öğe veya kap).
     - Odak tuzağı: Tab/Shift+Tab modal içinde döner (.ds-focus-trap işareti).
     - Esc kapatır; kapanınca odak tetikleyen butona GERİ döner.
     - Açıkken <body class="ds-scroll-locked">, arka plan inert/aria-hidden.
   ========================================================================== */

.ds-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
    background: var(--overlay-bg);
    -webkit-backdrop-filter: blur(8px) saturate(1.1);
    backdrop-filter: blur(8px) saturate(1.1);
    animation: ds-fade-in var(--dur-base) var(--ease-out) both;
    overflow-y: auto;
}

/* Görünürlük TEK mekanizmayla yönetilir: standart `hidden` özniteliği.
   (Önceki `:not([data-open])` kuralı `hidden` kaldırılsa bile display:none
   bırakıyordu.) `[data-open]` isteyen kütüphaneler için de destek var. */
.ds-modal-backdrop[hidden] { display: none; }
.ds-modal-backdrop[data-open] { display: flex; }

.ds-modal {
    position: relative;
    width: 100%;
    max-width: 520px;
    max-height: calc(100vh - var(--space-8));
    display: flex;
    flex-direction: column;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    animation: ds-scale-in var(--dur-base) var(--ease-out) both;
    overflow: hidden;
}

.ds-modal:focus { outline: none; }

.ds-modal-sm { max-width: 400px; }
.ds-modal-lg { max-width: 720px; }
.ds-modal-xl { max-width: 960px; }

.ds-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-6) var(--space-6) var(--space-4);
}

.ds-modal-title { font-size: var(--text-xl); font-weight: var(--weight-bold); color: var(--text); margin: 0; }
.ds-modal-desc  { font-size: var(--text-sm); color: var(--text-muted); margin: var(--space-1) 0 0; }
.ds-modal-body  { padding: 0 var(--space-6) var(--space-6); overflow-y: auto; display: flex; flex-direction: column; gap: var(--space-4); }

.ds-modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-6);
    border-top: 1px solid var(--border);
    background: var(--bg-sunken);
    flex-wrap: wrap;
}

.ds-modal-close {
    flex-shrink: 0;
    margin: calc(var(--space-2) * -1);
}

/* ==========================================================================
   DROPDOWN / MENU
   --------------------------------------------------------------------------
   Tetikleyici: aria-haspopup="menu" aria-expanded aria-controls="menu-id"
   Menü:        role="menu" id="menu-id"; öğeler role="menuitem" tabindex="-1"
   Klavye:      ↑/↓ dolaşır, Home/End uçlara gider, Esc kapatır ve odağı
                tetikleyiciye döndürür, Enter/Space seçer.
   ========================================================================== */

.ds-dropdown { position: relative; display: inline-flex; }

.ds-dropdown-menu {
    position: absolute;
    top: calc(100% + var(--space-2));
    inset-inline-start: 0;
    z-index: var(--z-dropdown);
    min-width: 220px;
    max-height: 340px;
    overflow-y: auto;
    padding: var(--space-2);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    animation: ds-fade-up var(--dur-fast) var(--ease-out) both;
}

.ds-dropdown-menu[hidden] { display: none; }
.ds-dropdown-menu[data-open] { display: block; }

.ds-dropdown-menu-end { inset-inline-start: auto; inset-inline-end: 0; }

.ds-menu-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    min-height: var(--tap-target);
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--text);
    text-align: start;
    text-decoration: none;
    background: transparent;
    border: 0;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background-color var(--dur-fast) var(--ease-out),
                color var(--dur-fast) var(--ease-out);
}

.ds-menu-item:hover,
.ds-menu-item:focus-visible,
.ds-menu-item[aria-current="true"] { background: var(--surface-hover); color: var(--text); }

.ds-menu-item[aria-disabled="true"] { opacity: 0.5; pointer-events: none; }
.ds-menu-item-danger { color: var(--danger-fg); }
.ds-menu-item-danger:hover { background: var(--danger-bg); }

.ds-menu-separator { height: 1px; margin: var(--space-2) calc(var(--space-1) * -1); background: var(--border); border: 0; }
.ds-menu-label {
    padding: var(--space-2) var(--space-3) var(--space-1);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--text-subtle);
}

/* ==========================================================================
   TABS
   --------------------------------------------------------------------------
   <div role="tablist" aria-label="Ayarlar" class="ds-tablist">
     <button role="tab" id="t1" aria-selected="true" aria-controls="p1"
             class="ds-tab" tabindex="0">Genel</button> …
   <div role="tabpanel" id="p1" aria-labelledby="t1" tabindex="0"> …

   Klavye: ←/→ sekmeler arası (roving tabindex), Home/End uçlar.
   ========================================================================== */

.ds-tablist {
    display: flex;
    align-items: stretch;
    gap: var(--space-1);
    border-bottom: 1px solid var(--border);
    overflow-x: auto;
    scrollbar-width: thin;
}

.ds-tab {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: var(--tap-target);
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--text-muted);
    white-space: nowrap;
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    cursor: pointer;
    transition: color var(--dur-fast) var(--ease-out),
                border-color var(--dur-base) var(--ease-out),
                background-color var(--dur-fast) var(--ease-out);
}

.ds-tab:hover { color: var(--text); background: var(--surface-hover); }
.ds-tab[aria-selected="true"] { color: var(--accent-text); border-bottom-color: var(--accent); }
.ds-tab:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: -3px; border-radius: var(--radius-sm); }
.ds-tab[aria-disabled="true"], .ds-tab:disabled { opacity: 0.5; cursor: not-allowed; }

.ds-tabpanel { padding-block: var(--space-6); }
.ds-tabpanel:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: 4px; border-radius: var(--radius-md); }
.ds-tabpanel[hidden] { display: none; }

/* Segment (pill) varyantı */
.ds-tablist-pills { border-bottom: 0; gap: var(--space-1); padding: var(--space-1); background: var(--bg-sunken); border-radius: var(--radius-md); display: inline-flex; }
.ds-tablist-pills .ds-tab { border-bottom: 0; margin-bottom: 0; border-radius: var(--radius-sm); min-height: 38px; }
.ds-tablist-pills .ds-tab[aria-selected="true"] { background: var(--surface); box-shadow: var(--shadow-xs); color: var(--text); }

/* ==========================================================================
   TABLE — sticky header, zebra YOK, ince kenarlıklar
   --------------------------------------------------------------------------
   <div class="ds-table-wrap" tabindex="0" role="region" aria-label="Botlar">
     <table class="ds-table"><caption class="ds-sr-only">…</caption>
       <thead><tr><th scope="col">…
       <tbody><tr><th scope="row">…

   ARIA: <caption> ZORUNLU (görünmezse .ds-sr-only). Sütun th[scope="col"],
   satır başlığı th[scope="row"]. Yatay kaydırılan kap tabindex="0" almalı ki
   klavyeyle kaydırılabilsin. Sıralanabilir sütun: th[aria-sort].
   ========================================================================== */

.ds-table-wrap {
    width: 100%;
    overflow-x: auto;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    -webkit-overflow-scrolling: touch;
}

.ds-table-wrap:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: 2px; }

.ds-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: var(--text-sm);
    color: var(--text);
}

.ds-table caption {
    padding: var(--space-4) var(--space-5) 0;
    text-align: start;
    font-weight: var(--weight-semibold);
    color: var(--text);
    caption-side: top;
}

.ds-table thead th {
    position: sticky;
    top: 0;
    z-index: var(--z-raised);
    padding: var(--space-3) var(--space-4);
    text-align: start;
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--text-muted);
    background: var(--bg-sunken);
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}

.ds-table tbody td,
.ds-table tbody th {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
    font-weight: var(--weight-regular);
    text-align: start;
}

.ds-table tbody th { font-weight: var(--weight-semibold); }
.ds-table tbody tr:last-child > * { border-bottom: 0; }

/* Zebra YOK — vurgu yalnızca hover ve seçim ile */
.ds-table tbody tr { transition: background-color var(--dur-fast) var(--ease-out); }
.ds-table tbody tr:hover { background: var(--surface-hover); }
.ds-table tbody tr[aria-selected="true"] { background: var(--accent-soft); }

.ds-table-num { text-align: end; font-variant-numeric: tabular-nums; }

.ds-table th[aria-sort] { cursor: pointer; }
.ds-table th[aria-sort="ascending"]::after  { content: " ↑"; color: var(--accent-text); }
.ds-table th[aria-sort="descending"]::after { content: " ↓"; color: var(--accent-text); }

.ds-table-compact tbody td,
.ds-table-compact tbody th,
.ds-table-compact thead th { padding: var(--space-2) var(--space-3); }

/* ==========================================================================
   TOAST
   --------------------------------------------------------------------------
   <div class="ds-toast-viewport" role="region" aria-label="Bildirimler">
     <div class="ds-toast ds-toast-success" role="status" aria-live="polite"> …
   Hata bildirimi için role="alert". Kapat butonu aria-label ile.
   ========================================================================== */

.ds-toast-viewport {
    position: fixed;
    inset-block-end: var(--space-5);
    inset-inline-end: var(--space-5);
    z-index: var(--z-toast);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    width: min(380px, calc(100vw - var(--space-8)));
    pointer-events: none;
}

.ds-toast {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-inline-start: 3px solid var(--border-strong);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    color: var(--text);
    font-size: var(--text-sm);
    pointer-events: auto;
    animation: ds-slide-in-right var(--dur-base) var(--ease-out) both;
}

.ds-toast-icon  { flex-shrink: 0; font-size: 1.1em; line-height: 1.4; }
.ds-toast-body  { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.ds-toast-title { font-weight: var(--weight-semibold); }
.ds-toast-desc  { color: var(--text-muted); font-size: var(--text-xs); }

.ds-toast-success { border-inline-start-color: var(--success-solid); }
.ds-toast-success .ds-toast-icon { color: var(--success-fg); }
.ds-toast-warning { border-inline-start-color: var(--warning-solid); }
.ds-toast-warning .ds-toast-icon { color: var(--warning-fg); }
.ds-toast-danger  { border-inline-start-color: var(--danger-solid); }
.ds-toast-danger .ds-toast-icon  { color: var(--danger-fg); }
.ds-toast-info    { border-inline-start-color: var(--info-solid); }
.ds-toast-info .ds-toast-icon    { color: var(--info-fg); }

@media (max-width: 560px) {
    .ds-toast-viewport {
        inset-inline: var(--space-3);
        inset-block-end: var(--space-3);
        width: auto;
    }
}

/* ==========================================================================
   TOOLTIP
   --------------------------------------------------------------------------
   <button aria-describedby="tip-1" class="ds-tooltip-trigger">…</button>
   <span id="tip-1" role="tooltip" class="ds-tooltip">Açıklama</span>

   WCAG 1.4.13: içerik hover ile kaybolmamalı, Esc ile kapanabilmeli.
   Tooltip yalnızca EK bilgi taşımalı — kritik bilgi görünür metinde olmalı.
   Dokunmatikte tooltip gösterilmez; bu yüzden içerik hayati olmamalı.
   ========================================================================== */

.ds-tooltip-trigger { position: relative; }

.ds-tooltip {
    position: absolute;
    bottom: calc(100% + var(--space-2));
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    z-index: var(--z-tooltip);
    max-width: 260px;
    width: max-content;
    padding: var(--space-2) var(--space-3);
    background: var(--neutral-800);
    color: var(--neutral-50);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    line-height: var(--leading-snug);
    text-align: center;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
        opacity var(--dur-fast) var(--ease-out),
        transform var(--dur-fast) var(--ease-out),
        visibility 0s linear var(--dur-fast);
}

[data-theme="dark"] .ds-tooltip,
body.dark-mode .ds-tooltip { background: var(--neutral-700); }

.ds-tooltip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: var(--neutral-800);
}

[data-theme="dark"] .ds-tooltip::after,
body.dark-mode .ds-tooltip::after { border-top-color: var(--neutral-700); }

.ds-tooltip-trigger:hover > .ds-tooltip,
.ds-tooltip-trigger:focus-visible > .ds-tooltip,
.ds-tooltip[data-open] {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
    /* hover ile üzerine gidilebilsin (WCAG 1.4.13) */
    pointer-events: auto;
    transition-delay: 0s;
}

/* ==========================================================================
   PROGRESS
   --------------------------------------------------------------------------
   <div class="ds-progress" role="progressbar" aria-valuenow="64"
        aria-valuemin="0" aria-valuemax="100" aria-label="Kurulum ilerlemesi">
     <div class="ds-progress-bar" style="width:64%"></div></div>

   Belirsiz süre: aria-valuenow'ı ATLAYIN + .ds-progress-indeterminate.
   ========================================================================== */

.ds-progress {
    position: relative;
    width: 100%;
    height: 8px;
    background: var(--bg-sunken);
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.ds-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--brand-500), var(--violet-500));
    border-radius: inherit;
    transition: width var(--dur-slow) var(--ease-out);
}

.ds-progress-success .ds-progress-bar { background: var(--success-solid); }
.ds-progress-warning .ds-progress-bar { background: var(--warning-solid); }
.ds-progress-danger  .ds-progress-bar { background: var(--danger-solid); }

.ds-progress-lg { height: 12px; }

.ds-progress-indeterminate .ds-progress-bar {
    width: 32% !important;
    animation: ds-progress-indeterminate 1.4s var(--ease-in-out) infinite;
}

.ds-progress-label {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-2);
    font-size: var(--text-xs);
    color: var(--text-muted);
}

.ds-progress-label > strong { color: var(--text); font-variant-numeric: tabular-nums; }

/* ==========================================================================
   SKELETON — spinner yerine shimmer (algılanan hız artar)
   --------------------------------------------------------------------------
   Kapsayıcıda aria-busy="true" + aria-live="polite"; iskeletler aria-hidden.
   Yükleme bitince gerçek içerik gelir ve aria-busy kaldırılır.
   ========================================================================== */

.ds-skeleton {
    display: block;
    background-color: var(--skeleton-base);
    background-image: linear-gradient(
        100deg,
        transparent 20%,
        var(--skeleton-sheen) 50%,
        transparent 80%
    );
    background-size: 220% 100%;
    background-repeat: no-repeat;
    border-radius: var(--radius-sm);
    animation: ds-shimmer 1.5s var(--ease-in-out) infinite;
}

.ds-skeleton-text {
    height: 0.85em;
    margin-block: 0.25em;
    border-radius: var(--radius-full);
}

.ds-skeleton-title  { height: 1.4em; width: 55%; border-radius: var(--radius-sm); }
.ds-skeleton-line-short { width: 62%; }
.ds-skeleton-circle { border-radius: var(--radius-full); width: 40px; height: 40px; flex-shrink: 0; }
.ds-skeleton-block  { height: 120px; border-radius: var(--radius-md); }
.ds-skeleton-btn    { height: var(--tap-target); width: 128px; border-radius: var(--radius-md); }

/* ==========================================================================
   EMPTY STATE
   --------------------------------------------------------------------------
   Ölçüt: her boş durum bir SONRAKİ EYLEM önermeli. Görsel aria-hidden="true".
   ========================================================================== */

.ds-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    padding: var(--space-12) var(--space-6);
    text-align: center;
    background: var(--surface);
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-lg);
}

.ds-empty-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin-bottom: var(--space-1);
    font-size: 1.75rem;
    border-radius: var(--radius-full);
    background: var(--accent-soft);
    color: var(--accent-text);
}

.ds-empty-title { font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--text); margin: 0; }
.ds-empty-desc  { font-size: var(--text-sm); color: var(--text-muted); max-width: 44ch; margin: 0; }
.ds-empty-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; justify-content: center; margin-top: var(--space-2); }

/* ==========================================================================
   DIVIDER / SECTION
   ========================================================================== */

.ds-divider { height: 1px; background: var(--border); border: 0; margin-block: var(--space-6); }

.ds-divider-labeled {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-block: var(--space-6);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--text-subtle);
}

.ds-divider-labeled::before,
.ds-divider-labeled::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: var(--border);
}

/* ==========================================================================
   ICON BUBBLE — açık dolgulu daire ikon kabı
   --------------------------------------------------------------------------
   <span class="ds-icon-bubble" aria-hidden="true"><svg …></svg></span>
   <span class="ds-icon-bubble ds-icon-bubble-2 ds-icon-bubble-lg">…</span>

   Referans arayüzün imzası: 50–60px açık dolgulu daire + tek renk ikon.
   Varyantlar: (varsayılan) marka mavisi, `-2` turkuaz, `-neutral` gri.
   Boyut: `-sm` 40px, varsayılan 52px, `-lg` 60px.

   ARIA: ikon KABI her zaman dekoratiftir -> aria-hidden="true". Anlam
   taşıyan metin komşu başlıkta olmalı.
   ========================================================================== */

.ds-icon-bubble {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    border-radius: var(--radius-full);
    background: var(--accent-soft);
    color: var(--accent-text);
}

.ds-icon-bubble > svg,
.ds-icon-bubble > img { width: 24px; height: 24px; }

.ds-icon-bubble-sm { width: 40px; height: 40px; }
.ds-icon-bubble-sm > svg, .ds-icon-bubble-sm > img { width: 20px; height: 20px; }

.ds-icon-bubble-lg { width: 60px; height: 60px; }
.ds-icon-bubble-lg > svg, .ds-icon-bubble-lg > img { width: 28px; height: 28px; }

.ds-icon-bubble-2       { background: var(--accent-2-soft); color: var(--accent-2-text); }
.ds-icon-bubble-neutral { background: var(--surface-muted); color: var(--text-muted); }

/* Dolu varyant — CTA kartlarında dikkat çekmesi gerektiğinde. */
.ds-icon-bubble-solid   { background: var(--accent); color: var(--accent-fg); }
.ds-icon-bubble-solid-2 { background: var(--accent-2); color: var(--accent-2-fg); }

/* ==========================================================================
   LOGO ROW — sosyal kanıt logo şeridi
   --------------------------------------------------------------------------
   <div class="ds-logo-row">
     <p class="ds-logo-row-label">2.400+ ekip Synaptix ile konuşuyor</p>
     <ul class="ds-logo-row-items">
       <li><img class="ds-logo-row-logo" src="…" alt="Acme"></li>
     </ul>
   </div>

   Kayan şerit isteniyorsa liste doğrudan marquee rayı olur:
   <div class="fx-marquee" data-fx-speed="45">
     <ul class="ds-logo-row-items fx-marquee-track"> … </ul>
   </div>

   ARIA: her <img> ANLAMLI alt almalı (marka adı). Logo yalnızca dekoratif
   tekrarsa alt="" verilip liste aria-hidden yapılabilir — ikisinden birini
   seçin, ikisini birden değil.
   ========================================================================== */

.ds-logo-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-6);
    text-align: center;
}

.ds-logo-row-label {
    margin: 0;
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--text-subtle);
}

.ds-logo-row-items {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--space-8) var(--space-10);
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Sosyal kanıt "eşitleyicidir": tek tek markaların renkleri sayfanın
   hiyerarşisini bozmasın diye tonlanır, hover'da gerçek renge döner. */
.ds-logo-row-logo {
    display: block;
    height: 28px;
    width: auto;
    max-width: 140px;
    object-fit: contain;
    filter: grayscale(1);
    opacity: 0.62;
    transition:
        filter var(--dur-base) var(--ease-out),
        opacity var(--dur-base) var(--ease-out);
}

.ds-logo-row-items > :hover .ds-logo-row-logo,
.ds-logo-row-items > :focus-within .ds-logo-row-logo {
    filter: grayscale(0);
    opacity: 1;
}

/* ==========================================================================
   STEP CARD — numaralı adım kartı (1-2-3 akışı)
   --------------------------------------------------------------------------
   <ol class="ds-step-list fx-reveal-stagger">
     <li class="ds-step-card">
       <span class="ds-step-card-number" aria-hidden="true">1</span>
       <h3 class="ds-step-card-title">Botunu oluştur</h3>
       <p class="ds-step-card-desc">…</p>
     </li>
   </ol>

   ARIA: sıra bilgisini <ol> taşır; görsel numara aria-hidden="true" olmalı ki
   ekran okuyucu "1 1 Botunu oluştur" diye tekrarlamasın.
   ========================================================================== */

.ds-step-list {
    display: grid;
    gap: var(--space-6);
    grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: ds-step;
}

.ds-step-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--card-pad);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    transition:
        border-color var(--dur-base) var(--ease-out),
        box-shadow var(--dur-base) var(--ease-out);
}

.ds-step-card:hover,
.ds-step-card:focus-within {
    border-color: var(--accent-soft-border);
    box-shadow: var(--shadow-sm);
}

.ds-step-card-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-full);
    background: var(--accent-soft);
    color: var(--accent-text);
    font-size: var(--text-lg);
    font-weight: var(--weight-bold);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.ds-step-card-title {
    margin: 0;
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    color: var(--text);
}

.ds-step-card-desc {
    margin: 0;
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    color: var(--text-muted);
}

/* Kartlar arası bağlayıcı çizgi — yalnızca yan yana dizildiklerinde ve
   yalnızca SON kart dışındakilerde. Dekoratif olduğu için ekran okuyucuya
   görünmez (::after içerik taşımaz). */
@media (min-width: 900px) {
    .ds-step-card:not(:last-child)::after {
        content: "";
        position: absolute;
        top: calc(var(--card-pad) + 22px);
        inset-inline-start: 100%;
        width: var(--space-6);
        height: 1px;
        background: var(--border);
    }
}

/* Turkuaz varyant — ikinci bir adım dizisi aynı sayfada varsa ayrışsın. */
.ds-step-card-alt .ds-step-card-number {
    background: var(--accent-2-soft);
    color: var(--accent-2-text);
}

/* ==========================================================================
   QUOTE CARD — müşteri alıntısı + sayısal sonuç
   --------------------------------------------------------------------------
   <figure class="ds-quote-card">
     <p class="ds-quote-card-metric">
       <span class="fx-count" data-count-to="47" data-count-suffix="%">47%</span>
       <span class="ds-quote-card-metric-label">daha kısa yanıt süresi</span>
     </p>
     <blockquote class="ds-quote-card-text">“…”</blockquote>
     <figcaption class="ds-quote-card-author">
       <img class="ds-quote-card-avatar" src="…" alt="">
       <span class="ds-quote-card-identity">
         <span class="ds-quote-card-name">Ayşe Demir</span>
         <span class="ds-quote-card-role">Müşteri Deneyimi Müdürü · Acme</span>
       </span>
     </figcaption>
   </figure>

   ARIA: avatar dekoratiftir -> alt="" (kişinin adı zaten yanında yazılı).
   <figure>/<figcaption> ikilisi alıntıyı sahibine bağlar; ayrıca cite
   niteliği gerekmez.
   ========================================================================== */

.ds-quote-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    margin: 0;
    padding: var(--card-pad-lg);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
}

.ds-quote-card-metric {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    margin: 0;
}

/* Sayı, alıntının kendisinden ÖNCE ve daha büyük: okuyucu önce sonucu görür,
   sonra o sonucu kimin söylediğini. */
.ds-quote-card-metric > .fx-count,
.ds-quote-card-metric > .ds-count-up,
.ds-quote-card-metric-value {
    font-size: var(--text-3xl);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--accent-2-text);
}

.ds-quote-card-metric-label {
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--text-muted);
}

.ds-quote-card-text {
    margin: 0;
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
    color: var(--text);
    text-wrap: pretty;
}

.ds-quote-card-author {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-top: auto;
    padding-top: var(--space-4);
    border-top: 1px solid var(--border);
}

.ds-quote-card-avatar {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-full);
    object-fit: cover;
    background: var(--surface-muted);
}

.ds-quote-card-identity {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.ds-quote-card-name {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--text);
}

.ds-quote-card-role {
    font-size: var(--text-xs);
    color: var(--text-muted);
}

/* ==========================================================================
   FEATURE SPLIT — "solda görsel / sağda metin" bloğu (ve tersi)
   --------------------------------------------------------------------------
   <div class="ds-feature-split">
     <div class="ds-feature-split-media"><img … alt="…"></div>
     <div class="ds-feature-split-body">
       <p class="ds-feature-split-eyebrow">Otomasyon</p>
       <h2 class="ds-feature-split-title">…</h2>
       <p class="ds-feature-split-desc">…</p>
       <ul class="ds-feature-split-list"> <li>…</li> </ul>
       <a class="ds-btn ds-btn-primary ds-btn-md" href="#">Deneyin</a>
     </div>
   </div>
   <div class="ds-feature-split ds-feature-split-reverse"> … </div>

   Sıralama: MOBİLDE her zaman görsel önce, metin sonra — `-reverse` yalnızca
   iki sütunlu düzende etkilidir. Böylece DOM sırası (görsel, metin) hem
   ekran okuyucu hem küçük ekran için tutarlı kalır.
   ========================================================================== */

.ds-feature-split {
    display: grid;
    gap: var(--space-8);
    align-items: center;
    grid-template-columns: 1fr;
}

@media (min-width: 900px) {
    .ds-feature-split {
        gap: var(--space-16);
        grid-template-columns: 1fr 1fr;
    }
    .ds-feature-split-reverse > .ds-feature-split-media { order: 2; }
    .ds-feature-split-reverse > .ds-feature-split-body  { order: 1; }
}

.ds-feature-split-media { min-width: 0; }

.ds-feature-split-media > img,
.ds-feature-split-media > video,
.ds-feature-split-media > svg {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius-xl);
}

.ds-feature-split-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    align-items: flex-start;
    min-width: 0;
}

.ds-feature-split-eyebrow {
    margin: 0;
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--accent-2-text);
}

.ds-feature-split-title {
    margin: 0;
    font-size: var(--text-2xl);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--text);
    text-wrap: balance;
}

.ds-feature-split-desc {
    margin: 0;
    max-width: var(--measure);
    line-height: var(--leading-normal);
    color: var(--text-muted);
    text-wrap: pretty;
}

.ds-feature-split-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.ds-feature-split-list > li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    font-size: var(--text-sm);
    color: var(--text);
}

/* Onay işareti CSS ile çizilir (ek varlık yok); dekoratif olduğu için
   içerik değil, kenarlık kullanır -> ekran okuyucu okumaz. */
.ds-feature-split-list > li::before {
    content: "";
    flex: 0 0 auto;
    width: 0.5em;
    height: 0.85em;
    margin-top: 0.25em;
    border-right: 2px solid var(--accent-2-text);
    border-bottom: 2px solid var(--accent-2-text);
    transform: rotate(45deg);
}

/* ==========================================================================
   PHONE FRAME — hero sohbet mockup kabı
   --------------------------------------------------------------------------
   <div class="ds-phone-frame">
     <div class="ds-phone-frame-screen">
       … sohbet baloncukları / ekran görüntüsü …
     </div>
   </div>

   ARIA: çerçeve tamamen dekoratiftir. İçerik gerçek bir demo değilse
   (statik ekran görüntüsü) kabı aria-hidden="true" yapın ve aynı bilgiyi
   metinle verin.
   ========================================================================== */

.ds-phone-frame {
    position: relative;
    width: 100%;
    max-width: 300px;
    margin-inline: auto;
    padding: 10px;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: 38px;
    box-shadow: var(--shadow-lg);
}

/* Çentik — konuşmacı ızgarası yerine tek sade çubuk. */
.ds-phone-frame::before {
    content: "";
    position: absolute;
    top: 18px;
    left: 50%;
    transform: translateX(-50%);
    width: 52px;
    height: 5px;
    border-radius: var(--radius-full);
    background: var(--border);
    z-index: var(--z-raised);
}

.ds-phone-frame-screen {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    aspect-ratio: 9 / 18;
    padding: var(--space-8) var(--space-4) var(--space-4);
    overflow: hidden;
    background: var(--bg-band);
    border-radius: 28px;
}

/* aspect-ratio desteklenmiyorsa ekran boş kalmasın. */
@supports not (aspect-ratio: 9 / 18) {
    .ds-phone-frame-screen { min-height: 520px; }
}

/* İçerideki sohbet baloncukları için hazır iki sınıf — mockup her sayfada
   sıfırdan yazılmasın. */
.ds-phone-bubble {
    max-width: 82%;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-lg);
    font-size: var(--text-sm);
    line-height: var(--leading-snug);
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text);
}

.ds-phone-bubble-user {
    align-self: flex-end;
    background: var(--accent);
    border-color: transparent;
    color: var(--accent-fg);
}

/* ==========================================================================
   COMPARE TABLE — özellik karşılaştırma tablosu
   --------------------------------------------------------------------------
   <div class="ds-compare-wrap" tabindex="0" role="region"
        aria-label="Plan karşılaştırması">
     <table class="ds-compare-table">
       <caption class="ds-sr-only">Planların özellik karşılaştırması</caption>
       <thead><tr>
         <th scope="col">Özellik</th>
         <th scope="col">Başlangıç</th>
         <th scope="col" class="is-featured">Profesyonel</th>
       </tr></thead>
       <tbody><tr>
         <th scope="row">Sınırsız sohbet</th>
         <td><span class="ds-compare-yes" role="img" aria-label="Var"></span></td>
         <td><span class="ds-compare-no"  role="img" aria-label="Yok"></span></td>
       </tr></tbody>
     </table>
   </div>

   KAYDIRMA / YAPIŞKANLIK STRATEJİSİ
     Mobil (<900px): kap yatay kaydırılır, İLK SÜTUN yapışkandır — kullanıcı
       sağa kayarken hangi özelliğe baktığını kaybetmez.
     Masaüstü (>=900px): kap kaydırma yapmaz (overflow-x: visible), bu sayede
       thead sayfa kaydırmasına göre yapışabilir. Bir kap hem overflow-x:auto
       hem sayfa-seviyesi sticky olamaz — overflow-x kaydırma bağlamı yaratır
       ve sticky o bağlama hapsolur. İki mod bu yüzden ayrıldı.

   ARIA: <caption> zorunlu. ✓/✗ işaretleri saf CSS ile çizilir; anlamı
   role="img" + aria-label taşır (renk/şekil tek gösterge olmasın).
   ========================================================================== */

.ds-compare-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}

.ds-compare-wrap:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring);
    outline-offset: 2px;
}

.ds-compare-table {
    width: 100%;
    min-width: 560px;
    border-collapse: separate;
    border-spacing: 0;
    font-size: var(--text-sm);
    color: var(--text);
}

.ds-compare-table caption {
    padding: var(--space-4) var(--space-5) 0;
    text-align: start;
    caption-side: top;
}

.ds-compare-table th,
.ds-compare-table td {
    padding: var(--space-4) var(--space-5);
    text-align: center;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}

.ds-compare-table thead th {
    background: var(--bg-band);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--text-muted);
    white-space: nowrap;
}

/* Özellik adı sütunu: sola hizalı, mobilde yapışkan. */
.ds-compare-table th[scope="row"],
.ds-compare-table thead th:first-child {
    text-align: start;
    font-weight: var(--weight-medium);
    color: var(--text);
}

.ds-compare-table th[scope="row"],
.ds-compare-table thead th:first-child {
    position: sticky;
    inset-inline-start: 0;
    z-index: var(--z-raised);
    background: var(--surface);
}

.ds-compare-table thead th:first-child { background: var(--bg-band); }

.ds-compare-table tbody tr:last-child th,
.ds-compare-table tbody tr:last-child td { border-bottom: 0; }

.ds-compare-table tbody tr:hover th[scope="row"],
.ds-compare-table tbody tr:hover td { background: var(--surface-hover); }

/* Öne çıkan plan sütunu — renk TEK gösterge değil: başlıkta ayrıca bir
   rozet/metin bulunmalı (örn. "En popüler"). */
.ds-compare-table .is-featured {
    background: var(--accent-soft);
    color: var(--accent-text);
}

.ds-compare-table thead th.is-featured {
    color: var(--accent-text);
    box-shadow: inset 0 -3px 0 0 var(--accent);
}

.ds-compare-yes,
.ds-compare-no {
    display: inline-block;
    width: 1em;
    height: 1em;
    position: relative;
}

.ds-compare-yes::before {
    content: "";
    position: absolute;
    inset-inline-start: 0.22em;
    top: 0.02em;
    width: 0.4em;
    height: 0.72em;
    border-right: 2px solid var(--success-solid);
    border-bottom: 2px solid var(--success-solid);
    transform: rotate(45deg);
}

.ds-compare-no::before,
.ds-compare-no::after {
    content: "";
    position: absolute;
    top: 50%;
    inset-inline-start: 0.05em;
    width: 0.9em;
    height: 2px;
    background: var(--text-subtle);
}

.ds-compare-no::before { transform: rotate(45deg); }
.ds-compare-no::after  { transform: rotate(-45deg); }

@media (min-width: 900px) {
    /* Masaüstünde yatay kaydırma gerekmez -> sayfa seviyesinde yapışkan
       başlık mümkün hale gelir. */
    .ds-compare-wrap { overflow-x: visible; }

    .ds-compare-table { min-width: 0; }

    .ds-compare-table th[scope="row"] {
        position: static;
        background: transparent;
    }

    .ds-compare-table thead th {
        position: sticky;
        top: 0;
        inset-inline-start: auto;
        z-index: var(--z-sticky);
    }
}

/* ==========================================================================
   PILL TOGGLE — aylık / yıllık geçiş anahtarı
   --------------------------------------------------------------------------
   <div class="ds-pill-toggle" role="radiogroup" aria-label="Faturalama dönemi">
     <button type="button" class="ds-pill-toggle-option"
             role="radio" aria-checked="true"  tabindex="0">Aylık</button>
     <button type="button" class="ds-pill-toggle-option"
             role="radio" aria-checked="false" tabindex="-1">
       Yıllık <span class="ds-pill-toggle-badge">2 ay bedava</span>
     </button>
   </div>

   ARIA / KLAVYE: radiogroup deseni — grup içinde TEK bir tabindex="0"
   bulunur (seçili olan), diğerleri -1 alır; ok tuşları seçimi taşır.
   Bu davranış sayfanın kendi JS'inde kurulmalıdır (ds-motion-fx.js
   pill-toggle'a karışmaz: fiyat hesabı sayfaya özgüdür).
   ========================================================================== */

.ds-pill-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1);
    background: var(--surface-muted);
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
}

.ds-pill-toggle-option {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: calc(var(--tap-target) - var(--space-2));
    padding: var(--space-2) var(--space-5);
    border: 0;
    border-radius: var(--radius-full);
    background: transparent;
    color: var(--text-muted);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    line-height: 1.2;
    cursor: pointer;
    transition:
        background-color var(--dur-base) var(--ease-out),
        color var(--dur-base) var(--ease-out),
        box-shadow var(--dur-base) var(--ease-out);
}

/* Dokunma hedefi: görsel yükseklik 36px kalırken tıklanabilir alan 44px'e
   ::before ile taşırılır (WCAG 2.5.8). */
.ds-pill-toggle-option::before {
    content: "";
    position: absolute;
    inset-block: calc((var(--tap-target) - 100%) / -2);
    inset-inline: 0;
}

.ds-pill-toggle-option:hover { color: var(--text); }

.ds-pill-toggle-option[aria-checked="true"] {
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--shadow-sm);
}

.ds-pill-toggle-option:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring);
    outline-offset: 2px;
}

.ds-pill-toggle-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px var(--space-2);
    border-radius: var(--radius-full);
    background: var(--accent-2-soft);
    color: var(--accent-2-text);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    white-space: nowrap;
}

@media (max-width: 480px) {
    .ds-pill-toggle { width: 100%; }
    .ds-pill-toggle-option { flex: 1 1 0; justify-content: center; padding-inline: var(--space-3); }
    .ds-pill-toggle-badge { display: none; }   /* dar ekranda satır kırmasın */
}

/* ==========================================================================
   DEVICE FRAME — urun ekrani cercevesi (masaustu + mobil)
   --------------------------------------------------------------------------
   NEDEN RASTER DEGIL, YENIDEN CIZIM
     Bu cerceveler ekran GORUNTUSU tasimaz; icerideki arayuz de CSS ile
     cizilir (bkz. bir sonraki bolum: UI SHOT KIT). Gerekce:
       1) Butce — index.html transfer butcesi ~807KB ve %10'dan fazla
          buyuyemez. Bes ekranin light+dark WebP'si ~600KB-1.5MB tutardi;
          tek basina tum butceyi yerdi. Yeniden cizim tek seferlik ~12KB CSS
          (gzip ~3KB) ve ornek basina ~1-3KB isaretleme demek.
       2) Tema — raster her tema icin AYRI dosya ve <picture> takasi ister;
          yeniden cizim semantik token kullandigi icin tema ile KENDILIGINDEN
          doner ve gercek paletten asla sapamaz.
       3) Dil — proje 5 dil tasiyor, ceviri data-i18n ile yapiliyor. Raster
          icindeki yazi cevrilemez; yeniden cizimdeki yazi sadece bir dugum.
       4) Netlik — her DPR'de vektor keskinligi; @2x varyant gerekmez.
       5) CLS — cerceve aspect-ratio ile kutusunu onceden ayirir; goruntu
          cozme (decode) beklemesi ve zipla-yerlesme yoktur.
     Odun: bu bir "stilize temsil", piksel-birebir ekran goruntusu degil.
     Telafi: her ekran once gercek panelden (tests/helpers/
     product-smoke-helpers.js ile) yakalanip incelendi; yapi, hiyerarsi ve
     metinler ona gore kuruldu.

   ISARETLEME SOZLESMESI — masaustu
     <figure class="ds-device-pair">
       <div class="ds-device-frame ds-device-browser">
         <div class="ds-device-chrome">
           <span class="ds-device-dots" aria-hidden="true"></span>
           <span class="ds-device-url">app.synaptixai.services/dashboard</span>
         </div>
         <div class="ds-device-screen"> ... UI SHOT ... </div>
       </div>
       <div class="ds-device-frame ds-device-phone">
         <div class="ds-device-screen"> ... UI SHOT ... </div>
       </div>
       <figcaption class="ds-sr-only">Panelin ne gosterdigini anlatan cumle.</figcaption>
     </figure>

   ERISILEBILIRLIK — ZORUNLU
     Cerceve ve icindeki arayuz DEKORATIFTIR. Ekran icerigini saran kaba
     `aria-hidden="true"` verin; ayni bilgiyi <figcaption> ile (gorunur veya
     .ds-sr-only) metin olarak TEKRAR EDIN. Aksi halde ekran okuyucu, gercek
     bir arayuz sandigi sahte dugmeleri okur. Ekran icinde ASLA gercek
     <button>/<a> kullanmayin — odak sirasina girer; <span> kullanin.
   ========================================================================== */

.ds-device-frame {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    /* Icerik tasarsa cerceveyi delmez, ekran kirpar. */
    overflow: hidden;
}

/* --- Tarayici penceresi ------------------------------------------------- */

.ds-device-browser { width: 100%; }

.ds-device-chrome {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex: 0 0 auto;
    /* Sabit yukseklik: CLS'i sifirda tutar, icerik gelmeden once yer ayrilir. */
    height: 34px;
    padding-inline: var(--space-3);
    background: var(--surface-muted);
    border-bottom: 1px solid var(--border);
}

/* Uc nokta tek elemanla cizilir — ek dugum yok. */
.ds-device-dots {
    flex: 0 0 auto;
    width: 38px;
    height: 8px;
    background-image: radial-gradient(circle, var(--border-strong) 46%, transparent 48%);
    background-size: 8px 8px;
    background-repeat: repeat-x;
    background-position: 0 50%;
}

.ds-device-url {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    max-width: 340px;
    padding: 2px var(--space-3);
    overflow: hidden;
    font-size: var(--text-xs);
    line-height: 1.6;
    color: var(--text-subtle);
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    margin-inline: auto;
}

/* --- Telefon ------------------------------------------------------------ */

.ds-device-phone {
    flex: 0 0 auto;
    width: 232px;
    padding: 8px;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: 30px;
    box-shadow: var(--shadow-xl);
}

/* Hoparlor cubugu. */
.ds-device-phone::before {
    content: "";
    position: absolute;
    top: 15px;
    left: 50%;
    transform: translateX(-50%);
    z-index: var(--z-raised);
    width: 44px;
    height: 4px;
    background: var(--border);
    border-radius: var(--radius-full);
}

.ds-device-phone > .ds-device-screen {
    padding-top: var(--space-6);
    border-radius: 23px;
}

/* --- Ekran -------------------------------------------------------------- */

.ds-device-screen {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    background: var(--bg);
    /* Ic arayuzun kendi genisligine gore olceklenmesini saglar (asagida). */
    container-type: inline-size;
    container-name: ds-screen;
}

/* Oran, kutuyu icerik gelmeden ayirir -> CLS 0.
   Yazar --ds-device-ratio ile ornek basina degistirebilir; icerigi kisa olan
   bir maket icin 16/9 veya 2/1, uzun bir liste icin 4/3 secilir. Boylece
   cerceve icinde ne asiri bosluk ne de sert kirpma kalir:
     <div class="ds-device-frame ds-device-browser" style="--ds-device-ratio: 2/1"> */
.ds-device-browser > .ds-device-screen { aspect-ratio: var(--ds-device-ratio, 16 / 10); }
.ds-device-phone   > .ds-device-screen { aspect-ratio: var(--ds-device-ratio, 9 / 17); }

@supports not (aspect-ratio: 16 / 10) {
    .ds-device-browser > .ds-device-screen { min-height: 300px; }
    .ds-device-phone   > .ds-device-screen { min-height: 400px; }
}

/* Dar ekranda pencere DAHA UZUN olur. 16/10, maket iki kolona indiginde
   icerigin yarisini kesiyordu; 4/3 yaklasik ucte bir daha fazla dikey alan
   verir ve cerceve hala "pencere" gibi okunur (portre olsaydi olmazdi). */
@media (max-width: 767px) {
    .ds-device-browser > .ds-device-screen { aspect-ratio: var(--ds-device-ratio-sm, 4 / 3); }
}

/* Cercevesiz varyant — bolum icinde duz panel gerektiginde. */
.ds-device-flat {
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}
.ds-device-flat > .ds-device-screen { aspect-ratio: auto; }

/* --- Ikili yerlesim: masaustu + mobil yan yana --------------------------- */

.ds-device-pair {
    display: flex;
    align-items: flex-end;
    gap: var(--fluid-6);
    margin: 0;
    min-width: 0;
}

.ds-device-pair > .ds-device-browser { flex: 1 1 auto; min-width: 0; }

/* Telefon, masaustunun uzerine binerek referanstaki katmanli hissi verir.
   Negatif margin YALNIZCA iki cerceve yan yanayken uygulanir; tek basina
   kalan telefon kaymaz.
   DIKKAT: telefon, masaustu ekranin SAG kenarindan ~48px'ini orter. O seride
   okunmasi gereken bir sey (rozet, buton etiketi) BIRAKMAYIN; ya duzeni
   ayarlayin ya da .ds-device-pair-apart kullanin. */
@media (min-width: 1024px) {
    .ds-device-pair > .ds-device-browser + .ds-device-phone {
        margin-inline-start: calc(var(--space-12) * -1);
    }
}

/* Dar ekran: telefon alta gecmez, GIZLENIR. Ust uste dizilen iki cerceve
   bolumu iki katina cikarir ve ikisi de kucuk kalir; mobilde zaten gercek
   cihazdasiniz, telefon maketi bilgi katmaz. */
@media (max-width: 767px) {
    .ds-device-pair > .ds-device-phone { display: none; }
}

/* Yalnizca telefon gosterilen varyant (mobil-oncelikli bolumler icin). */
.ds-device-pair-phone-only > .ds-device-browser { display: none; }
.ds-device-pair-phone-only { justify-content: center; }
.ds-device-pair-phone-only > .ds-device-phone { display: flex; }

/* Bindirmesiz varyant — masaustu ekranin SAG ALT kosesinde bir sey varsa
   (or. gomulu sohbet balonu) telefon onu orter. Bu varyant bindirmeyi kapatir. */
.ds-device-pair-apart > .ds-device-browser + .ds-device-phone { margin-inline-start: 0; }

/* ==========================================================================
   UI SHOT KIT — cerceve icine cizilen gercek panel parcalari
   --------------------------------------------------------------------------
   Bu sinif ailesi urun ekranlarini yeniden cizer. Parcalar gercek panellerden
   yakalanan goruntulerden turetildi:
     user-dashboard.html   -> .ds-ui-botcard, .ds-ui-kv, .ds-ui-accordion
     bot-setup-wizard.html -> .ds-ui-steps, .ds-ui-field, .ds-ui-tile
     agent-inbox.html      -> .ds-ui-stat, .ds-ui-row
     integrations-manager  -> .ds-ui-card
     widget.js             -> .ds-ui-chat, .ds-ui-msg, .ds-ui-site

   OLCEK — NASIL CALISIR
     `.ds-ui` bir "maket pikseli" tanimlar: kendi font-size'i maketin 1em'idir
     ve TUM ic olculer em cinsindendir. Boylece 1180px genisligindeki bir
     cerceve ile 320px genisligindeki bir telefon AYNI isaretlemeyi tasiyabilir;
     yalnizca kok deger degisir, oranlar bozulmaz.
     Kok deger VIEWPORT'a degil KAPSAYICIYA (.ds-device-screen) baglidir:
     @container sorgusu ile cqw kullanilir. Boylece yan yana duran iki cerceve
     farkli genisliklerdeyse her biri KENDI genisligine gore olceklenir.
     @container desteklemeyen tarayici asagidaki sabit 12px degerinde kalir —
     duzen bozulmaz, yalnizca olcek uyum saglamaz (kabul edilebilir gerileme).

     KURAL: font-size YALNIZCA `.ds-ui` kokunde ve YAPRAK metin dugumlerinde
     tanimlanir. Yapisal kutular (padding/gap/olcu) em kullanir ama font-size
     TANIMLAMAZ; bu yuzden em degerleri katlanarak buyumez.

   ERISILEBILIRLIK
     Maket dekoratiftir. Kok kaba aria-hidden="true" verin ve ayni bilgiyi
     <figcaption> ile metin olarak tekrarlayin. Iceride gercek <button>/<a>
     KULLANMAYIN — odak sirasina girerler.
   ========================================================================== */

.ds-ui {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    overflow: hidden;
    font-family: var(--font-sans);
    font-size: 12px;              /* @container yoksa gecerli kalan taban */
    line-height: var(--leading-snug);
    color: var(--text);
    background: var(--bg);
    /* Maket icindeki hicbir sey secilemez olmali. */
    -webkit-user-select: none;
    user-select: none;
}

@container ds-screen (min-width: 1px) {
    /* Alt sinir 9px: bunun altinda metin okunmaz "gurultuye" doner ve maket
       urun gibi degil desen gibi gorunur. Cerceve daraldiginda olcek 9px'te
       DURUR ve icerik kirpilir (overflow: hidden) — gercek bir ekran
       goruntusunun yakinlastirilmis hali gibi okunur, ki bu dogru izlenimdir. */
    .ds-ui { font-size: clamp(9px, 1.85cqw, 13px); }

    /* Telefon ekrani daha dar ama metni GORECELI olarak daha buyuk olmali —
       gercek telefonda da oyle. */
    .ds-device-phone .ds-ui { font-size: clamp(9px, 4.4cqw, 12px); }
}

/* --- Ust cubuk ---------------------------------------------------------- */

.ds-ui-topbar {
    display: flex;
    align-items: center;
    gap: 0.85em;
    flex: 0 0 auto;
    padding: 0.85em 1.15em;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}

.ds-ui-brand {
    display: flex;
    align-items: center;
    gap: 0.5em;
    font-size: 1.05em;
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-tight);
    color: var(--text);
}

.ds-ui-brand::before {
    content: "";
    width: 1.5em;
    height: 1.5em;
    flex: 0 0 auto;
    background: var(--accent-gradient);
    border-radius: 0.45em;
}

.ds-ui-spacer { flex: 1 1 auto; }

/* Bosluk emici: cerceve sabit oranli oldugu icin (CLS 0) icerik kisa kalirsa
   altta bos alan olusur. Genislemesi gereken ogeye bu sinif verilir.
   overflow:hidden ZORUNLU — bu oge kuculebilen tek cocuk oldugu icin, dar
   cercevede icerigi tasip ALTINDAKI kardesin (or. buton seridi) uzerine
   binerdi; kendi icinde kirpilmasi gerekir. */
.ds-ui-fill { flex: 1 1 auto; min-height: 0; overflow: hidden; }

/* Izgara bosluk emici olarak kullanildiginda SATIRLAR uzamamali: kutucuklar
   dogal yuksekliginde kalir, artan yer altta bos birakilir. Aksi halde
   4 kutuluk bir izgara 200px yuksekliginde ici bos kartlara donusur. */
.ds-ui-grid.ds-ui-fill { align-content: start; }

/* --- Govde: yan menu + icerik ------------------------------------------- */

.ds-ui-body { display: flex; flex: 1 1 auto; min-height: 0; }

.ds-ui-sidebar {
    display: flex;
    flex-direction: column;
    gap: 0.3em;
    flex: 0 0 auto;
    width: 12.5em;
    padding: 0.9em 0.7em;
    background: var(--bg-band);
    border-inline-end: 1px solid var(--border);
}

.ds-ui-navitem {
    display: flex;
    align-items: center;
    gap: 0.6em;
    padding: 0.55em 0.7em;
    font-size: 0.95em;
    font-weight: var(--weight-medium);
    color: var(--text-muted);
    border-radius: 0.5em;
}

.ds-ui-navitem::before {
    content: "";
    flex: 0 0 auto;
    width: 1.05em;
    height: 1.05em;
    background: currentColor;
    border-radius: 0.28em;
    opacity: 0.35;
}

.ds-ui-navitem[data-active] {
    color: var(--accent-text);
    background: var(--accent-soft);
    font-weight: var(--weight-semibold);
}
.ds-ui-navitem[data-active]::before { opacity: 1; }

.ds-ui-main {
    display: flex;
    flex-direction: column;
    gap: 0.9em;
    flex: 1 1 auto;
    min-width: 0;
    padding: 1.15em;
    overflow: hidden;
}

/* Icerik cerceveye sigmazsa TEMIZ kirpilsin: varsayilan flex davranisi
   ogeleri EZER (shrink), o zaman kutular birbirine girer ve maket bozuk
   gorunur. .ds-ui-fill haric hicbir cocuk kuculmez; fazlasi overflow:hidden
   ile kesilir — yakinlastirilmis ekran goruntusu izlenimi korunur. */
.ds-ui-main > :not(.ds-ui-fill) { flex-shrink: 0; }

/* --- Baslik blogu ------------------------------------------------------- */

.ds-ui-eyebrow {
    font-size: 0.8em;
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--accent-text);
}

.ds-ui-title {
    font-size: 1.45em;
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-tight);
    line-height: var(--leading-tight);
    color: var(--text);
}

.ds-ui-sub {
    font-size: 0.95em;
    color: var(--text-muted);
    line-height: var(--leading-normal);
}

/* --- Izgara ------------------------------------------------------------- */

.ds-ui-grid { display: grid; gap: 0.75em; min-width: 0; }
.ds-ui-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ds-ui-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ds-ui-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ds-ui-grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

/* --- Istatistik kutusu (agent-inbox ust seridi) -------------------------- */

.ds-ui-stat {
    display: flex;
    flex-direction: column;
    gap: 0.25em;
    min-width: 0;
    padding: 0.75em 0.85em;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 0.6em;
}

.ds-ui-stat-label {
    font-size: 0.85em;
    color: var(--text-subtle);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ds-ui-stat-value {
    font-size: 1.5em;
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

/* --- Kart --------------------------------------------------------------- */

.ds-ui-card {
    display: flex;
    flex-direction: column;
    gap: 0.55em;
    min-width: 0;
    padding: 0.9em;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 0.7em;
}

.ds-ui-card-head { display: flex; align-items: flex-start; gap: 0.6em; }

/* Kanal ikonu: yuvarlatilmis kare, token'dan renk. Emoji/goruntu YOK —
   maket icindeki emoji her isletim sisteminde farkli render edilir ve
   goruntu karsilastirmasini kararsiz yapar. */
.ds-ui-icon {
    flex: 0 0 auto;
    width: 2em;
    height: 2em;
    background: var(--accent-soft);
    border: 1px solid var(--accent-soft-border);
    border-radius: 0.55em;
}
.ds-ui-icon-2 { background: var(--accent-2-soft); border-color: var(--accent-2-soft-border); }
.ds-ui-icon-ok { background: var(--success-bg); border-color: var(--success-border); }
.ds-ui-icon-mute { background: var(--surface-muted); border-color: var(--border); }

.ds-ui-card-title {
    font-size: 1.02em;
    font-weight: var(--weight-semibold);
    color: var(--text);
}

.ds-ui-card-desc {
    font-size: 0.9em;
    color: var(--text-muted);
    line-height: var(--leading-normal);
}

/* --- Rozet -------------------------------------------------------------- */

.ds-ui-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    padding: 0.2em 0.6em;
    font-size: 0.8em;
    font-weight: var(--weight-semibold);
    color: var(--text-muted);
    background: var(--surface-muted);
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    white-space: nowrap;
}

/* Dikey flex kaplarda rozet varsayilan `stretch` ile tum genislige yayilirdi;
   icerigi kadar kalmali. Ust katmandaki .ds-badge ile ayni cozum. */
.ds-ui-main > .ds-ui-badge,
.ds-ui-card > .ds-ui-badge,
.ds-ui-row > .ds-ui-badge,
.ds-ui-botcard > .ds-ui-badge,
.ds-ui-tile > .ds-ui-badge { align-self: flex-start; }

.ds-ui-badge-ok   { color: var(--success-fg); background: var(--success-bg); border-color: var(--success-border); }
.ds-ui-badge-warn { color: var(--warning-fg); background: var(--warning-bg); border-color: var(--warning-border); }
.ds-ui-badge-info { color: var(--accent-text); background: var(--accent-soft); border-color: var(--accent-soft-border); }

/* Durum noktasi — rozetin ICINDE durur. Renk TEK ayirt edici degildir:
   rozetin metni de durumu soyler (WCAG 1.4.1). */
.ds-ui-dot {
    width: 0.45em;
    height: 0.45em;
    flex: 0 0 auto;
    background: currentColor;
    border-radius: 50%;
}

/* --- Buton (SAHTE — gercek <button> degil) ------------------------------ */

.ds-ui-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4em;
    padding: 0.5em 0.95em;
    font-size: 0.9em;
    font-weight: var(--weight-semibold);
    color: var(--accent-fg);
    background: var(--accent);
    border-radius: 0.5em;
    white-space: nowrap;
}

.ds-ui-btn-ghost {
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--border);
}

.ds-ui-btn-quiet {
    padding: 0.35em 0.65em;
    font-size: 0.85em;
    font-weight: var(--weight-medium);
    color: var(--text-muted);
    background: var(--surface-muted);
    border: 1px solid var(--border);
}

.ds-ui-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45em; }

/* --- Form alani (sihirbaz) ---------------------------------------------- */

.ds-ui-field { display: flex; flex-direction: column; gap: 0.35em; min-width: 0; }

.ds-ui-label {
    font-size: 0.87em;
    font-weight: var(--weight-semibold);
    color: var(--text);
}

.ds-ui-input {
    display: flex;
    align-items: center;
    min-height: 2.5em;
    padding: 0.45em 0.75em;
    font-size: 0.92em;
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 0.5em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ds-ui-input-placeholder { color: var(--text-subtle); }

/* Odakli alan gorunumu — gercek odak DEGIL, maket durumu. */
.ds-ui-input[data-focus] {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

/* Acilir liste oku. */
.ds-ui-input-select { position: relative; padding-inline-end: 1.9em; }
.ds-ui-input-select::after {
    content: "";
    position: absolute;
    inset-inline-end: 0.75em;
    top: 50%;
    width: 0.4em;
    height: 0.4em;
    margin-top: -0.28em;
    border-right: 1.5px solid var(--text-subtle);
    border-bottom: 1.5px solid var(--text-subtle);
    transform: rotate(45deg);
}

/* --- Adim gostergesi (sihirbaz) ----------------------------------------- */

.ds-ui-steps { display: flex; align-items: center; gap: 0.5em; min-width: 0; }

.ds-ui-step {
    display: flex;
    align-items: center;
    gap: 0.4em;
    min-width: 0;
    font-size: 0.87em;
    font-weight: var(--weight-medium);
    color: var(--text-subtle);
    white-space: nowrap;
}

.ds-ui-step::before {
    content: "";
    flex: 0 0 auto;
    width: 1.5em;
    height: 1.5em;
    background: var(--surface-muted);
    border: 1px solid var(--border);
    border-radius: 50%;
}

.ds-ui-step[data-state="done"] { color: var(--text-muted); }
.ds-ui-step[data-state="done"]::before {
    background: var(--success-solid);
    border-color: var(--success-solid);
}

.ds-ui-step[data-state="now"] { color: var(--accent-text); font-weight: var(--weight-bold); }
.ds-ui-step[data-state="now"]::before {
    background: var(--accent);
    border-color: var(--accent);
}

.ds-ui-step-line {
    flex: 1 1 auto;
    min-width: 0.8em;
    height: 1px;
    background: var(--border);
}

/* --- Secilebilir kutucuk (sihirbaz ozellik / kanal karti) ---------------- */

.ds-ui-tile {
    display: flex;
    flex-direction: column;
    gap: 0.4em;
    align-items: center;
    min-width: 0;
    padding: 0.85em 0.6em;
    text-align: center;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 0.65em;
}

.ds-ui-tile[data-selected] {
    background: var(--accent-soft);
    border-color: var(--accent);
    box-shadow: 0 0 0 1px var(--accent);
}

.ds-ui-tile[data-muted] { opacity: 0.55; }

.ds-ui-tile-name {
    max-width: 100%;
    overflow: hidden;
    font-size: 0.92em;
    font-weight: var(--weight-semibold);
    color: var(--text);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ds-ui-tile-meta {
    max-width: 100%;
    overflow: hidden;
    font-size: 0.82em;
    color: var(--text-subtle);
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --- Liste satiri (agent inbox talep listesi) ---------------------------- */

.ds-ui-list { display: flex; flex-direction: column; gap: 0.5em; min-width: 0; }

.ds-ui-row {
    display: flex;
    flex-direction: column;
    gap: 0.4em;
    min-width: 0;
    padding: 0.75em 0.85em;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 0.6em;
}

.ds-ui-row[data-active] {
    background: var(--accent-soft);
    border-color: var(--accent);
}

.ds-ui-row-top { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4em; }

.ds-ui-row-text {
    overflow: hidden;
    font-size: 0.95em;
    font-weight: var(--weight-medium);
    color: var(--text);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ds-ui-row-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9em;
    font-size: 0.82em;
    color: var(--text-subtle);
}

/* --- Sohbet (widget) ---------------------------------------------------- */

.ds-ui-chat {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    background: var(--bg-band);
}

.ds-ui-chat-head {
    display: flex;
    align-items: center;
    gap: 0.6em;
    flex: 0 0 auto;
    padding: 0.85em 1em;
    color: var(--accent-fg);
    background: var(--accent);
}

.ds-ui-chat-avatar {
    flex: 0 0 auto;
    width: 2.1em;
    height: 2.1em;
    background: var(--accent-fg);
    border-radius: 50%;
    opacity: 0.9;
}

.ds-ui-chat-name { font-size: 1em; font-weight: var(--weight-bold); }
.ds-ui-chat-status { font-size: 0.82em; opacity: 0.85; }

.ds-ui-chat-log {
    display: flex;
    flex-direction: column;
    /* Alttan doldurur: konusma kutuya sigmazsa ESKI mesajlar ustten kirpilir,
       yeni mesaj TAM gorunur. flex-start olsaydi en alttaki balon ortasindan
       kesilir ve maket bozuk gorunurdu. */
    justify-content: flex-end;
    gap: 0.55em;
    flex: 1 1 auto;
    min-height: 0;
    padding: 0.9em;
    overflow: hidden;
}

.ds-ui-msg {
    max-width: 84%;
    padding: 0.55em 0.8em;
    font-size: 0.92em;
    line-height: var(--leading-snug);
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 0.75em;
    border-end-start-radius: 0.2em;
}

.ds-ui-msg-user {
    align-self: flex-end;
    color: var(--accent-fg);
    background: var(--accent);
    border-color: transparent;
    border-end-start-radius: 0.75em;
    border-end-end-radius: 0.2em;
}

/* Kanal etiketi — sohbetin hangi kanaldan geldigini soyler. */
.ds-ui-chat-tag {
    align-self: center;
    padding: 0.2em 0.7em;
    font-size: 0.8em;
    font-weight: var(--weight-semibold);
    color: var(--text-muted);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
}

.ds-ui-chat-input {
    display: flex;
    align-items: center;
    gap: 0.5em;
    flex: 0 0 auto;
    padding: 0.7em 0.8em;
    background: var(--surface);
    border-top: 1px solid var(--border);
}

.ds-ui-chat-input > .ds-ui-input { flex: 1 1 auto; min-width: 0; }

.ds-ui-chat-send {
    flex: 0 0 auto;
    width: 2.3em;
    height: 2.3em;
    background: var(--accent);
    border-radius: 50%;
}

/* --- Musteri sitesi zemini (widget'in gomulu hali) ----------------------- */

.ds-ui-site {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.8em;
    flex: 1 1 auto;
    min-height: 0;
    padding: 1.2em;
    overflow: hidden;
    background: var(--bg);
}

/* Sahte icerik cizgileri — musteri sitesini temsil eder. Metin TASIMAZ,
   bu yuzden ceviri gerektirmez. */
.ds-ui-skel {
    height: 0.6em;
    background: var(--surface-muted);
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
}
.ds-ui-skel-lg { height: 1.5em; width: 55%; }
.ds-ui-skel-w80 { width: 80%; }
.ds-ui-skel-w60 { width: 60%; }
.ds-ui-skel-w40 { width: 40%; }

.ds-ui-skel-block {
    flex: 1 1 auto;
    min-height: 3em;
    background: var(--surface-muted);
    border: 1px solid var(--border);
    border-radius: 0.6em;
}

/* Sitenin sag alt kosesine oturan sohbet paneli. */
.ds-ui-site-widget {
    position: absolute;
    inset-inline-end: 1.2em;
    bottom: 1.2em;
    display: flex;
    flex-direction: column;
    width: 17em;
    max-width: calc(100% - 2.4em);
    height: 24em;
    max-height: calc(100% - 2.4em);
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 0.9em;
    box-shadow: var(--shadow-xl);
}

/* Kapali haldeki yuvarlak baslatici. */
.ds-ui-site-launcher {
    position: absolute;
    inset-inline-end: 1.2em;
    bottom: 1.2em;
    width: 3.2em;
    height: 3.2em;
    background: var(--accent-gradient);
    border-radius: 50%;
    box-shadow: var(--shadow-lg);
}

/* --- Bot karti (dashboard) ---------------------------------------------- */

.ds-ui-botcard {
    display: flex;
    flex-direction: column;
    gap: 0.7em;
    min-width: 0;
    padding: 1em;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 0.7em;
}

.ds-ui-botcard-head { display: flex; align-items: center; gap: 0.65em; min-width: 0; }

.ds-ui-avatar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.4em;
    height: 2.4em;
    font-size: 0.9em;
    font-weight: var(--weight-bold);
    color: var(--accent-gradient-fg);
    background: var(--accent-gradient);
    border-radius: 50%;
}

/* Anahtar/deger satiri. */
.ds-ui-kv { display: flex; flex-direction: column; gap: 0.15em; min-width: 0; }
.ds-ui-kv-k {
    font-size: 0.78em;
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--text-subtle);
}
.ds-ui-kv-v {
    overflow: hidden;
    font-size: 0.98em;
    font-weight: var(--weight-semibold);
    color: var(--text);
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Akordeon satiri (dashboard "Kanal durumu" / "Diger islemler"). */
.ds-ui-accordion {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6em;
    padding: 0.7em 0.85em;
    font-size: 0.92em;
    font-weight: var(--weight-semibold);
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 0.6em;
}
.ds-ui-accordion::after {
    content: "";
    flex: 0 0 auto;
    width: 0.4em;
    height: 0.4em;
    border-right: 1.5px solid var(--text-subtle);
    border-bottom: 1.5px solid var(--text-subtle);
    transform: rotate(45deg);
}

/* --- Dar cerceve: maketi SADELESTIR, kucultme ----------------------------
   Kirilim VIEWPORT'a degil CERCEVEYE bagli: ayni bilesen genis sayfada dar
   bir kolonda da durabilir, o zaman da sadelesmeli. */

@container ds-screen (max-width: 560px) {
    /* Yan menu dar ekranda yerin ucte birini yer; icerik daha onemli. */
    .ds-ui-sidebar { display: none; }

    /* Cok kolonlu izgaralar iki kolona iner — dortte bir genislikte
       "Kurulum gerekli" gibi etiketler okunamiyordu. */
    .ds-ui-grid-3,
    .ds-ui-grid-4,
    .ds-ui-grid-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .ds-ui-main { padding: 0.9em; gap: 0.7em; }
    .ds-ui-topbar { padding: 0.7em 0.9em; }

    /* Yazar tarafindan isaretlenen ikincil parcalar dusurulur. */
    .ds-ui-hide-sm { display: none; }
}

/* Tek kolona ancak GERCEKTEN dar cercevede inilir (telefon maketi gibi).
   360px'lik bir tarayici cercevesinde 3 istatistik kutusunu alt alta dizmek
   ekranin ucte ikisini yerdi; iki kolon orada hala okunuyor. */
@container ds-screen (max-width: 300px) {
    .ds-ui-grid-2,
    .ds-ui-grid-3,
    .ds-ui-grid-4,
    .ds-ui-grid-5 { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   MEGA MENU — cok kolonlu gezinti paneli
   --------------------------------------------------------------------------
   1. ajanin site-nav.js / site-nav.css'i bu parcalari kullanir.

   ISARETLEME SOZLESMESI — masaustu
     <li class="ds-menu-parent">
       <button type="button" class="ds-menu-trigger"
               id="nav-urun-trigger"
               aria-expanded="false" aria-controls="nav-urun-panel">
         Urun
         <span class="ds-menu-caret" aria-hidden="true"></span>
       </button>

       <div class="ds-menu-panel" id="nav-urun-panel"
            role="group" aria-labelledby="nav-urun-trigger" hidden>
         <div class="ds-menu-panel-inner">

           <div class="ds-menu-col">
             <h3 class="ds-menu-col-title" id="nav-urun-kanallar">Kanallar</h3>
             <ul class="ds-menu-col-list" aria-labelledby="nav-urun-kanallar">
               <li>
                 <a class="ds-menu-link" href="integrations.html">
                   <span class="ds-menu-link-icon" aria-hidden="true"></span>
                   <span class="ds-menu-link-body">
                     <span class="ds-menu-link-title">WhatsApp Business</span>
                     <span class="ds-menu-link-desc">Meta onayli is hesabiyla baglayin.</span>
                   </span>
                 </a>
               </li>
             </ul>
           </div>

           <a class="ds-menu-promo" href="bot-setup-wizard.html">
             <span class="ds-menu-promo-eyebrow">Yeni</span>
             <span class="ds-menu-promo-title">Kurulum sihirbazi</span>
             <span class="ds-menu-promo-desc">Uc adimda botu yayina alin.</span>
             <span class="ds-menu-promo-cta" aria-hidden="true">Basla</span>
           </a>

         </div>
       </div>
     </li>

   ACMA/KAPAMA — SOZLESME (1. ajan icin ZORUNLU)
     * Gorunurluk TEK mekanizmayla yonetilir: standart `hidden` ozniteligi.
       Bu dosyadaki .ds-dropdown-menu ile ayni kural. JS `hidden`i kaldirir,
       CSS gerisini yapar. Ayri bir `.is-open` sinifi UYDURMAYIN.
     * Tetikleyici GERCEK bir <button>tur ve `aria-expanded` tasir.
       Panel acilmasi TIKLAMA/Enter/Space ile olur.
     * CSS-only `:hover` ile ACMAYIN. Dokunmatik cihazda :hover ya hic
       tetiklenmez ya da "hayalet hover"da takilir; ikisi de menuyu
       kullanilamaz yapar (GOREV 3.4). Isaretci ince ise JS gecikmeli
       hover-niyeti EKLEYEBILIR, ama tiklama her zaman tek basina yeterli
       olmalidir.
     * Esc paneli kapatir ve odagi tetikleyiciye dondurur.
     * Panel disina tiklama kapatir.
     * Tab paneli terk ettiginde kapanir (focusout + relatedTarget kontrolu).
   ========================================================================== */

/* Konumlandirma kabi.
   Kucuk paneller TETIKLEYICIYE gore hizalanir -> .ds-menu-parent relative.
   Genis/ortalanmis paneller ise CUBUGA gore ortalanmali; tetikleyiciye gore
   ortalanirsa cubugun solundaki bir menu ekranin disina tasar (olculdu:
   1440px'te panelin sol 180px'i goruntu alani disinda kaliyordu).
   Cozum: ortalanmis panel iceren <li> `static` olur, boylece en yakin
   konumlanmis ata .ds-menu-bar olur ve panel CUBUKTA ortalanir.
   :has() desteklemeyen tarayici icin ayni etkiyi veren acik sinif da
   taninir: .ds-menu-parent-static */
.ds-menu-bar { position: relative; }

.ds-menu-parent { position: relative; }

.ds-menu-parent-static,
.ds-menu-parent:has(> .ds-menu-panel-center) { position: static; }

.ds-menu-trigger {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: var(--tap-target);
    padding: var(--space-2) var(--space-3);
    font-family: inherit;
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--text);
    background: transparent;
    border: 0;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background-color var(--dur-fast) var(--ease-out),
                color var(--dur-fast) var(--ease-out);
}

.ds-menu-trigger:hover { background: var(--surface-hover); }
.ds-menu-trigger[aria-expanded="true"] { background: var(--surface-hover); color: var(--accent-text); }

.ds-menu-trigger:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring);
    outline-offset: 2px;
}

/* Ok — ayri bir varlik degil, kenarlikla cizilir. */
.ds-menu-caret {
    width: 0.4em;
    height: 0.4em;
    margin-top: -0.2em;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform var(--dur-fast) var(--ease-out);
}

.ds-menu-trigger[aria-expanded="true"] .ds-menu-caret {
    transform: rotate(-135deg);
    margin-top: 0.2em;
}

/* --- Panel -------------------------------------------------------------- */

.ds-menu-panel {
    position: absolute;
    top: calc(100% + var(--space-2));
    inset-inline-start: 0;
    z-index: var(--z-dropdown);
    width: max-content;
    max-width: min(920px, calc(100vw - var(--gutter) * 2));
    padding: var(--space-5);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    animation: ds-menu-in var(--dur-fast) var(--ease-out) both;
}

/* Gorunurluk TEK mekanizma: `hidden`. */
.ds-menu-panel[hidden] { display: none; }

/* Ortalanmis varyant — genis panel cubukta ortalanir.
   Genislik `max-content` DEGIL sabit: max-content ile izgara yalnizca iki
   kolona sigiyordu ve promo panel alt satira duserek menuyu iki kat
   uzatiyordu. Sabit genislik auto-fit'e ucuncu kolon icin yer birakir. */
.ds-menu-panel-center {
    inset-inline-start: 50%;
    transform: translateX(-50%);
    width: min(920px, calc(100vw - var(--gutter) * 2));
}

/* Sag kenara hizali varyant — sayfanin sagindaki tetikleyiciler icin,
   panel viewport disina tasmasin. */
.ds-menu-panel-end { inset-inline-start: auto; inset-inline-end: 0; }

.ds-menu-panel-inner {
    display: grid;
    gap: var(--space-6);
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    align-items: start;
}

@keyframes ds-menu-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Ortalanmis panelin animasyonu translateX'i EZMEMELI. */
.ds-menu-panel-center { animation-name: ds-menu-in-center; }

@keyframes ds-menu-in-center {
    from { opacity: 0; transform: translateX(-50%) translateY(-6px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* --- Kolon -------------------------------------------------------------- */

.ds-menu-col { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }

.ds-menu-col-title {
    margin: 0 0 var(--space-2);
    padding-inline: var(--space-3);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--text-subtle);
}

.ds-menu-col-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    margin: 0;
    padding: 0;
    list-style: none;
}

/* --- Baglanti (ikon + baslik + aciklama) -------------------------------- */

.ds-menu-link {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    /* Dokunma hedefi: iki satirli baglanti zaten 44px'i gecer, tek satirli
       varyant icin taban garanti edilir. */
    min-height: var(--tap-target);
    padding: var(--space-3);
    color: var(--text);
    text-decoration: none;
    border-radius: var(--radius-md);
    transition: background-color var(--dur-fast) var(--ease-out);
}

.ds-menu-link:hover { background: var(--surface-hover); }

.ds-menu-link:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring);
    outline-offset: -1px;
    background: var(--surface-hover);
}

.ds-menu-link[aria-current="page"] { background: var(--accent-soft); }

.ds-menu-link-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    color: var(--accent-text);
    background: var(--accent-soft);
    border: 1px solid var(--accent-soft-border);
    border-radius: var(--radius-md);
}

.ds-menu-link-icon > svg { width: 18px; height: 18px; }

/* Ikinci aksan — ayni menude iki farkli grup ayrissin diye. */
.ds-menu-link-icon-2 {
    color: var(--accent-2-text);
    background: var(--accent-2-soft);
    border-color: var(--accent-2-soft-border);
}

.ds-menu-link-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.ds-menu-link-title {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--text);
    line-height: var(--leading-snug);
}

.ds-menu-link-desc {
    font-size: var(--text-xs);
    color: var(--text-muted);
    line-height: var(--leading-normal);
}

.ds-menu-link:hover .ds-menu-link-title { color: var(--accent-text); }

/* --- Menu ici one cikan panel ------------------------------------------- */

.ds-menu-promo {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-width: 0;
    padding: var(--space-5);
    color: var(--text);
    text-decoration: none;
    background: var(--bg-band);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    transition: border-color var(--dur-fast) var(--ease-out),
                background-color var(--dur-fast) var(--ease-out);
}

.ds-menu-promo:hover { background: var(--accent-soft); border-color: var(--accent-soft-border); }

.ds-menu-promo:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring);
    outline-offset: 2px;
}

.ds-menu-promo-eyebrow {
    align-self: flex-start;
    padding: 2px var(--space-2);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--accent-fg);
    background: var(--accent);
    border-radius: var(--radius-full);
}

.ds-menu-promo-title {
    font-size: var(--text-base);
    font-weight: var(--weight-bold);
    color: var(--text);
    line-height: var(--leading-snug);
}

.ds-menu-promo-desc {
    font-size: var(--text-sm);
    color: var(--text-muted);
    line-height: var(--leading-normal);
}

.ds-menu-promo-cta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    margin-top: var(--space-1);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--accent-text);
}

.ds-menu-promo-cta::after {
    content: "";
    width: 0.35em;
    height: 0.35em;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform var(--dur-fast) var(--ease-out);
}

.ds-menu-promo:hover .ds-menu-promo-cta::after { transform: rotate(45deg) translate(2px, -2px); }

/* ==========================================================================
   MEGA MENU — MOBIL (tam ekran overlay + akordeon)
   --------------------------------------------------------------------------
   <div class="ds-menu-mobile" id="nav-mobile" hidden>
     <div class="ds-menu-mobile-head">
       <span class="ds-menu-mobile-title">Menu</span>
       <button type="button" class="ds-menu-mobile-close" aria-label="Menuyu kapat">...</button>
     </div>
     <div class="ds-menu-mobile-body">
       <div class="ds-menu-mobile-group">
         <h3 class="ds-menu-mobile-heading">
           <button type="button" class="ds-menu-mobile-trigger"
                   aria-expanded="false" aria-controls="m-urun">Urun</button>
         </h3>
         <div class="ds-menu-mobile-panel" id="m-urun" hidden>
           ... .ds-menu-link listesi ...
         </div>
       </div>
     </div>
     <div class="ds-menu-mobile-foot"> ... .ds-btn CTA ... </div>
   </div>

   ODAK TUZAGI: overlay acikken odak icinde kalmali, arka plan
   `inert` veya `aria-hidden` olmali. Kapaninca odak acan dugmeye doner.
   Govdeye `overflow: hidden` verip arka plan kaydirmasini durdurun.
   ========================================================================== */

.ds-menu-mobile {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    display: flex;
    flex-direction: column;
    background: var(--bg);
    animation: ds-menu-mobile-in var(--dur-base) var(--ease-out) both;
}

.ds-menu-mobile[hidden] { display: none; }

@keyframes ds-menu-mobile-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.ds-menu-mobile-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    flex: 0 0 auto;
    padding: var(--space-3) var(--gutter);
    border-bottom: 1px solid var(--border);
}

.ds-menu-mobile-title {
    font-size: var(--text-base);
    font-weight: var(--weight-bold);
    color: var(--text);
}

.ds-menu-mobile-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: var(--tap-target);
    height: var(--tap-target);
    color: var(--text);
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    cursor: pointer;
}

.ds-menu-mobile-close:hover { background: var(--surface-hover); }
.ds-menu-mobile-close:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring);
    outline-offset: 2px;
}

.ds-menu-mobile-body {
    flex: 1 1 auto;
    min-height: 0;
    padding: var(--space-2) var(--gutter) var(--space-6);
    overflow-y: auto;
    /* iOS'ta momentum kaydirma; overlay icinde arka plan kaymasin. */
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.ds-menu-mobile-group { border-bottom: 1px solid var(--border); }

.ds-menu-mobile-heading { margin: 0; }

.ds-menu-mobile-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    width: 100%;
    min-height: var(--tap-target);
    padding: var(--space-4) var(--space-1);
    font-family: inherit;
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    color: var(--text);
    text-align: start;
    background: transparent;
    border: 0;
    cursor: pointer;
}

.ds-menu-mobile-trigger:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring);
    outline-offset: -2px;
    border-radius: var(--radius-sm);
}

/* Akordeon oku. */
.ds-menu-mobile-trigger::after {
    content: "";
    flex: 0 0 auto;
    width: 0.45em;
    height: 0.45em;
    margin-top: -0.22em;
    border-right: 2px solid var(--text-subtle);
    border-bottom: 2px solid var(--text-subtle);
    transform: rotate(45deg);
    transition: transform var(--dur-fast) var(--ease-out);
}

.ds-menu-mobile-trigger[aria-expanded="true"]::after {
    transform: rotate(-135deg);
    margin-top: 0.22em;
}

.ds-menu-mobile-panel { padding-bottom: var(--space-3); }
.ds-menu-mobile-panel[hidden] { display: none; }

/* Mobil panel icindeki baglantilar masaustuyle AYNI .ds-menu-link sinifini
   kullanir; yalnizca ikon biraz kuculur. */
.ds-menu-mobile-panel .ds-menu-link-icon { width: 28px; height: 28px; }

.ds-menu-mobile-foot {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    flex: 0 0 auto;
    padding: var(--space-4) var(--gutter);
    background: var(--bg-band);
    border-top: 1px solid var(--border);
}

/* Mobil menuyu acan hamburger dugmesi. */
.ds-menu-burger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: var(--tap-target);
    height: var(--tap-target);
    color: var(--text);
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    cursor: pointer;
}

.ds-menu-burger:hover { background: var(--surface-hover); }
.ds-menu-burger:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring);
    outline-offset: 2px;
}

/* Uc cizgi — ek varlik yok. */
.ds-menu-burger-bars,
.ds-menu-burger-bars::before,
.ds-menu-burger-bars::after {
    display: block;
    width: 18px;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
}

.ds-menu-burger-bars { position: relative; }

.ds-menu-burger-bars::before,
.ds-menu-burger-bars::after {
    content: "";
    position: absolute;
    inset-inline-start: 0;
}

.ds-menu-burger-bars::before { top: -6px; }
.ds-menu-burger-bars::after  { top: 6px; }

/* --- Gorunurluk esigi ---------------------------------------------------
   Masaustu mega-menu 1024px ve uzerinde, hamburger altinda. 1024 secildi
   cunku 768px tablet dikeyde 4-5 kolonlu bir panel ekrana sigmaz. */

@media (max-width: 1023px) {
    .ds-menu-parent > .ds-menu-panel { display: none; }
}

@media (min-width: 1024px) {
    .ds-menu-burger { display: none; }
    .ds-menu-mobile { display: none; }
}

/* --- prefers-reduced-motion --------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .ds-menu-panel,
    .ds-menu-mobile {
        animation: none;
    }

    .ds-menu-caret,
    .ds-menu-mobile-trigger::after,
    .ds-menu-promo-cta::after,
    .ds-menu-trigger,
    .ds-menu-link,
    .ds-menu-promo {
        transition: none;
    }

    /* Ortalanmis panel animasyonsuz kalirken translateX'i KAYBETMEMELI. */
    .ds-menu-panel-center { transform: translateX(-50%); }
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 640px) {
    .ds-modal { max-width: 100%; border-radius: var(--radius-lg); }
    .ds-modal-header { padding: var(--space-5) var(--space-4) var(--space-3); }
    .ds-modal-body   { padding: 0 var(--space-4) var(--space-5); }
    .ds-modal-footer { padding: var(--space-3) var(--space-4); }
    .ds-modal-footer > .ds-btn { flex: 1 1 auto; }
    .ds-card-body    { padding: var(--space-5); }
    .ds-btn-lg { min-height: var(--tap-target); padding: var(--space-3) var(--space-6); font-size: var(--text-sm); }
    .ds-empty  { padding: var(--space-8) var(--space-4); }

    /* Yeni pazarlama bileşenleri */
    .ds-quote-card      { padding: var(--space-6); }
    .ds-logo-row-items  { gap: var(--space-6); }
    .ds-logo-row-logo   { height: 24px; }
    .ds-compare-table th,
    .ds-compare-table td { padding: var(--space-3) var(--space-4); }
    .ds-feature-split-title { font-size: var(--text-xl); }
}