/*
 * DepoSmart Designer - ortak gorsel dil (design tokens)
 * ---------------------------------------------------------------
 * Kaynak tasarim: docs/designer-studio-taslak.html
 * Palet birebir o prototipten alinmistir (ground/surface/line/ink/visual...).
 * designer-studio.css ayni degerleri .ds-studio altinda tanimlar; burasi
 * ayni paleti canvas onizlemesi ve uretilen mobil sayfalar icin global yapar.
 *
 * ONEMLI - sinif adlandirmasi:
 *   designer-studio.css `.ds-*` on ekini KAPSAMSIZ kullanir (.ds-phone, .ds-btn,
 *   .ds-chip, .ds-field). Bu dosya ondan SONRA yuklendigi icin ayni adi
 *   kullanmak studio ekranini ezer. Bu yuzden buradaki tum siniflar `.dsg-*`
 *   ("designer generated") on ekini kullanir. Yeni sinif eklerken `.ds-*`
 *   KULLANMAYIN.
 *
 * C# karsiligi: Pages/Designer/DesignerTheme.cs (inline style uretimi icin).
 */

:root {
    /* Yuzeyler */
    --ds-ground: #EAEEF0;
    --ds-surface: #FFFFFF;
    --ds-surface-muted: #F4F7F8;
    --ds-surface-sunken: #E3EAED;

    /* Kenarliklar */
    --ds-border: #CBD5D9;
    --ds-border-strong: #A9B9C0;
    --ds-border-soft: #D9E1E4;

    /* Tipografi renkleri */
    --ds-text: #14202A;
    --ds-text-soft: #4C5F6B;
    --ds-text-muted: #788993;
    --ds-placeholder: #788993;

    /* Vurgu - prototipteki "visual" (yanik turuncu) */
    --ds-accent: #B8531A;
    --ds-accent-strong: #A2481A;
    --ds-accent-soft: #FAEBE0;
    --ds-accent-border: #E6BFA4;

    /* Kod/fonksiyon rengi - prototipteki "code" */
    --ds-code: #0F6E7B;
    --ds-code-soft: #DFEFF1;
    --ds-code-border: #A8CFD5;

    /* Durum renkleri */
    --ds-success: #1F7A45;
    --ds-success-soft: #E1F2E8;
    --ds-warning: #91620A;
    --ds-warning-soft: #F9EFD8;
    --ds-danger: #AB2A20;
    --ds-danger-soft: #FAE8E6;

    /* Yaricap - prototip dar yaricap kullanir */
    --ds-radius-xs: 2px;
    --ds-radius-sm: 3px;
    --ds-radius: 5px;
    --ds-radius-lg: 8px;
    --ds-radius-pill: 999px;

    /* Tipografi olcegi */
    --ds-font-xs: 8.5px;
    --ds-font-sm: 9.5px;
    --ds-font-md: 11px;
    --ds-font-lg: 12px;
    --ds-font-xl: 15px;

    /* Yazi tipleri */
    --ds-sans: ui-sans-serif, "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", sans-serif;
    --ds-mono: ui-monospace, "Cascadia Mono", "Cascadia Code", "SF Mono", Consolas, "Liberation Mono", monospace;

    /* Bosluk */
    --ds-space-1: 3px;
    --ds-space-2: 7px;
    --ds-space-3: 10px;
    --ds-space-4: 14px;

    /* Golge / derinlik */
    --ds-shadow-sm: 0 1px 2px rgba(20, 32, 42, 0.08);
    --ds-shadow: 0 10px 30px rgba(20, 32, 42, 0.13), 0 2px 8px rgba(20, 32, 42, 0.08);
    --ds-shadow-lg: 0 30px 70px rgba(20, 32, 42, 0.28);

    /* Kontrol yuksekligi - dokunma hedefi */
    --ds-control-height: 40px;
}

/* =====================================================================
   Telefon cercevesi
   docs/designer-studio-taslak.html icindeki .phone ile ayni gorunum:
   acik renkli kart, ince kenarlik, yumusak golge. Koyu kasa YOK.
   ===================================================================== */

.dsg-phone {
    background: var(--ds-surface);
    border: 1px solid var(--ds-border-strong);
    border-radius: 14px;
    box-shadow: var(--ds-shadow);
    overflow: hidden;
    flex-shrink: 0;
}

.dsg-phone-status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 12px;
    background: var(--ds-surface-sunken);
    border-bottom: 1px solid var(--ds-border);
    font-family: var(--ds-mono);
    font-size: var(--ds-font-sm);
    color: var(--ds-text-muted);
    font-variant-numeric: tabular-nums;
}

.dsg-safe-note {
    margin: 12px 0 0;
    font-family: var(--ds-mono);
    font-size: var(--ds-font-sm);
    color: var(--ds-text-muted);
    text-align: center;
}

/* =====================================================================
   Uretilen sayfa / onizleme primitifleri
   Sinif adlari `.dsg-` on ekiyle designer-studio.css'ten yalitilmistir.
   ===================================================================== */

.dsg-page {
    padding: var(--ds-space-3);
    padding-bottom: 88px;
    background: var(--ds-surface-muted);
    min-height: 100%;
    color: var(--ds-text);
    font-family: var(--ds-sans);
    font-size: var(--ds-font-lg);
}

/* Alan (label + kontrol) */
.dsg-field {
    display: flex;
    flex-direction: column;
    gap: var(--ds-space-1);
}

.dsg-field-label {
    font-size: var(--ds-font-md);
    color: var(--ds-text-muted);
}

.dsg-field-label .dsg-required {
    color: var(--ds-danger);
    margin-left: 2px;
}

/* Kontrol kabugu - input/select/textarea ortak govdesi */
.dsg-control {
    width: 100%;
    min-height: var(--ds-control-height);
    padding: 0 var(--ds-space-3);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-sm);
    background: var(--ds-surface);
    color: var(--ds-text);
    font-family: var(--ds-mono);
    font-size: var(--ds-font-lg);
    box-sizing: border-box;
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.dsg-control::placeholder {
    color: var(--ds-placeholder);
    font-family: var(--ds-sans);
}

.dsg-control:focus,
.dsg-control:focus-visible {
    outline: none;
    border-color: var(--ds-accent);
    box-shadow: 0 0 0 2px var(--ds-accent-soft);
}

.dsg-control:disabled,
.dsg-control[readonly] {
    background: var(--ds-surface-muted);
    color: var(--ds-text-muted);
}

textarea.dsg-control {
    padding: var(--ds-space-2) var(--ds-space-3);
    min-height: 88px;
    resize: vertical;
}

/* Buton - prototipteki .node--btn ile ayni dil */
.dsg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ds-space-2);
    min-height: var(--ds-control-height);
    padding: 0 var(--ds-space-4);
    border: 1px solid var(--ds-accent);
    border-radius: var(--ds-radius-sm);
    background: var(--ds-accent);
    color: #ffffff;
    font-family: var(--ds-mono);
    font-size: var(--ds-font-lg);
    font-weight: 600;
    cursor: pointer;
    transition: filter 0.12s ease;
}

.dsg-btn:hover:not(:disabled) {
    filter: brightness(1.1);
}

.dsg-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.dsg-btn-block {
    width: 100%;
}

.dsg-btn-outline {
    background: var(--ds-surface);
    border-color: var(--ds-accent-border);
    color: var(--ds-accent);
}

.dsg-btn-ghost {
    background: transparent;
    border-color: var(--ds-border);
    color: var(--ds-text-soft);
}

/* Kart */
.dsg-card {
    background: var(--ds-surface);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius);
    box-shadow: var(--ds-shadow-sm);
    overflow: hidden;
}

.dsg-card-header {
    padding: var(--ds-space-3);
    border-bottom: 1px solid var(--ds-border);
    font-weight: 700;
    font-size: var(--ds-font-lg);
}

.dsg-card-body {
    padding: var(--ds-space-3);
}

/* Rozet / chip */
.dsg-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--ds-space-1);
    padding: 1px 5px;
    border-radius: var(--ds-radius-xs);
    background: var(--ds-surface-sunken);
    border: 1px solid var(--ds-border);
    color: var(--ds-text-muted);
    font-family: var(--ds-mono);
    font-size: var(--ds-font-xs);
    font-weight: 600;
    letter-spacing: 0.04em;
}

/* Alt aksiyon cubugu - safe area farkindaligi ile */
.dsg-bottom-actions {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    gap: var(--ds-space-2);
    padding: var(--ds-space-2) var(--ds-space-3);
    padding-bottom: calc(var(--ds-space-2) + env(safe-area-inset-bottom, 0px));
    background: var(--ds-surface);
    border-top: 1px solid var(--ds-border);
    z-index: 20;
}

.dsg-bottom-actions .dsg-btn {
    flex: 1;
}

/* Uyari kutusu */
.dsg-alert {
    display: flex;
    align-items: flex-start;
    gap: var(--ds-space-2);
    padding: var(--ds-space-3);
    border: 1px solid var(--ds-code-border);
    border-radius: var(--ds-radius-sm);
    background: var(--ds-code-soft);
    color: var(--ds-code);
    font-size: var(--ds-font-md);
}

.dsg-alert-success {
    border-color: var(--ds-success);
    background: var(--ds-success-soft);
    color: var(--ds-success);
}

.dsg-alert-warning {
    border-color: var(--ds-warning);
    background: var(--ds-warning-soft);
    color: var(--ds-warning);
}

.dsg-alert-danger {
    border-color: var(--ds-danger);
    background: var(--ds-danger-soft);
    color: var(--ds-danger);
}

/* Devre disi birakilmis bilesen */
.dsg-disabled {
    opacity: 0.4;
    pointer-events: none;
}

.dsg-disabled-message {
    margin-top: var(--ds-space-1);
    color: var(--ds-warning);
    font-size: var(--ds-font-md);
    font-weight: 600;
}