/* ============================================================
   Yardim modali callout sistemi (Notion/Linear stili).
   Tailwind purge bu dosyaya dokunmaz - tum class'lar burada
   sabit tanimli, bundle'a dahil edilmesi garantili.
   ============================================================ */

.dsg-help-intro {
    font-size: 0.875rem;
    color: rgb(75 85 99);
    line-height: 1.55;
    margin-bottom: 1rem;
}
.dark .dsg-help-intro {
    color: rgb(209 213 219);
}

.dsg-help-sections {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

/* Callout kart: pastel arkaplan + sol kenarda 3px accent + ic flex layout */
.dsg-help-callout {
    position: relative;
    overflow: hidden;
    border-radius: 0.5rem;
    padding: 0.75rem 0.75rem 0.75rem 1rem;
}
.dsg-help-callout::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
}
.dsg-help-callout-row {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}
.dsg-help-callout-icon {
    flex: 0 0 1.75rem;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.dsg-help-callout-icon svg {
    width: 1rem;
    height: 1rem;
    stroke-width: 1.8;
}
.dsg-help-callout-body {
    flex: 1;
    min-width: 0;
}
.dsg-help-callout-heading {
    font-size: 0.875rem;
    font-weight: 600;
    margin: 0;
}
.dsg-help-callout-text {
    margin-top: 0.25rem;
    font-size: 0.875rem;
    line-height: 1.55;
    color: rgb(55 65 81);
}
.dark .dsg-help-callout-text {
    color: rgb(209 213 219);
}
.dsg-help-callout-text.is-example {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, "Cascadia Mono", "Roboto Mono", monospace;
    font-size: 0.75rem;
    color: rgb(75 85 99);
}
.dark .dsg-help-callout-text.is-example {
    color: rgb(156 163 175);
}

/* ===== INFO (mavi) ===== */
.dsg-help-callout.tone-info { background-color: rgb(239 246 255 / 0.7); }
.dsg-help-callout.tone-info::before { background-color: rgb(96 165 250); }
.dsg-help-callout.tone-info .dsg-help-callout-icon { background-color: rgb(219 234 254 / 0.8); }
.dsg-help-callout.tone-info .dsg-help-callout-icon svg { color: rgb(37 99 235); stroke: currentColor; }
.dsg-help-callout.tone-info .dsg-help-callout-heading { color: rgb(30 58 138); }
.dark .dsg-help-callout.tone-info { background-color: rgb(23 37 84 / 0.3); }
.dark .dsg-help-callout.tone-info::before { background-color: rgb(59 130 246); }
.dark .dsg-help-callout.tone-info .dsg-help-callout-icon { background-color: rgb(30 58 138 / 0.4); }
.dark .dsg-help-callout.tone-info .dsg-help-callout-icon svg { color: rgb(147 197 253); }
.dark .dsg-help-callout.tone-info .dsg-help-callout-heading { color: rgb(219 234 254); }

/* ===== TIP (yesil/emerald) ===== */
.dsg-help-callout.tone-tip { background-color: rgb(236 253 245 / 0.7); }
.dsg-help-callout.tone-tip::before { background-color: rgb(52 211 153); }
.dsg-help-callout.tone-tip .dsg-help-callout-icon { background-color: rgb(209 250 229 / 0.8); }
.dsg-help-callout.tone-tip .dsg-help-callout-icon svg { color: rgb(5 150 105); stroke: currentColor; }
.dsg-help-callout.tone-tip .dsg-help-callout-heading { color: rgb(6 78 59); }
.dark .dsg-help-callout.tone-tip { background-color: rgb(2 44 34 / 0.3); }
.dark .dsg-help-callout.tone-tip::before { background-color: rgb(16 185 129); }
.dark .dsg-help-callout.tone-tip .dsg-help-callout-icon { background-color: rgb(6 78 59 / 0.4); }
.dark .dsg-help-callout.tone-tip .dsg-help-callout-icon svg { color: rgb(110 231 183); }
.dark .dsg-help-callout.tone-tip .dsg-help-callout-heading { color: rgb(209 250 229); }

/* ===== WARNING (amber/sari) ===== */
.dsg-help-callout.tone-warning { background-color: rgb(255 251 235 / 0.7); }
.dsg-help-callout.tone-warning::before { background-color: rgb(251 191 36); }
.dsg-help-callout.tone-warning .dsg-help-callout-icon { background-color: rgb(254 243 199 / 0.8); }
.dsg-help-callout.tone-warning .dsg-help-callout-icon svg { color: rgb(217 119 6); stroke: currentColor; }
.dsg-help-callout.tone-warning .dsg-help-callout-heading { color: rgb(120 53 15); }
.dark .dsg-help-callout.tone-warning { background-color: rgb(69 26 3 / 0.3); }
.dark .dsg-help-callout.tone-warning::before { background-color: rgb(245 158 11); }
.dark .dsg-help-callout.tone-warning .dsg-help-callout-icon { background-color: rgb(120 53 15 / 0.4); }
.dark .dsg-help-callout.tone-warning .dsg-help-callout-icon svg { color: rgb(252 211 77); }
.dark .dsg-help-callout.tone-warning .dsg-help-callout-heading { color: rgb(254 243 199); }

/* ===== DANGER (rose/pembe-kirmizi, yumusak) ===== */
.dsg-help-callout.tone-danger { background-color: rgb(255 241 242 / 0.7); }
.dsg-help-callout.tone-danger::before { background-color: rgb(251 113 133); }
.dsg-help-callout.tone-danger .dsg-help-callout-icon { background-color: rgb(255 228 230 / 0.8); }
.dsg-help-callout.tone-danger .dsg-help-callout-icon svg { color: rgb(225 29 72); stroke: currentColor; }
.dsg-help-callout.tone-danger .dsg-help-callout-heading { color: rgb(136 19 55); }
.dark .dsg-help-callout.tone-danger { background-color: rgb(76 5 25 / 0.3); }
.dark .dsg-help-callout.tone-danger::before { background-color: rgb(244 63 94); }
.dark .dsg-help-callout.tone-danger .dsg-help-callout-icon { background-color: rgb(136 19 55 / 0.4); }
.dark .dsg-help-callout.tone-danger .dsg-help-callout-icon svg { color: rgb(253 164 175); }
.dark .dsg-help-callout.tone-danger .dsg-help-callout-heading { color: rgb(255 228 230); }

/* ===== EXAMPLE (violet/mor) ===== */
.dsg-help-callout.tone-example { background-color: rgb(245 243 255 / 0.6); }
.dsg-help-callout.tone-example::before { background-color: rgb(167 139 250); }
.dsg-help-callout.tone-example .dsg-help-callout-icon { background-color: rgb(237 233 254 / 0.8); }
.dsg-help-callout.tone-example .dsg-help-callout-icon svg { color: rgb(124 58 237); stroke: currentColor; }
.dsg-help-callout.tone-example .dsg-help-callout-heading { color: rgb(76 29 149); }
.dark .dsg-help-callout.tone-example { background-color: rgb(46 16 101 / 0.3); }
.dark .dsg-help-callout.tone-example::before { background-color: rgb(139 92 246); }
.dark .dsg-help-callout.tone-example .dsg-help-callout-icon { background-color: rgb(76 29 149 / 0.4); }
.dark .dsg-help-callout.tone-example .dsg-help-callout-icon svg { color: rgb(196 181 253); }
.dark .dsg-help-callout.tone-example .dsg-help-callout-heading { color: rgb(237 233 254); }