/* Jemars Kod & Metin Araçları — paylaşımlı stiller (.jct-*)
   Flat jemars paleti: #1e66ff mavi, #1e266d lacivert, açık kod blokları (#f5f8ff). Gradient YOK. */

.jct-tool { max-width: 940px; margin: 0 auto 8px; }

/* "Diğer araçlar" satırı — hero DIŞINDA (container içinde) kullanım.
   jemars-tools.css'teki stiller yalnızca .jemars-tool-hero içine scope'lu olduğu için burada tekrar tanımlanır. */
.jemars-tool-related { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 10px; margin: 32px auto 0; max-width: 940px; }
.jemars-tool-related-label { font-size: 13px; font-weight: 600; color: #787da7; }
.jemars-tool-related a { display: inline-flex; align-items: center; gap: 7px; padding: 8px 15px; border-radius: 999px; background: #fff; border: 1px solid #e8ecf5; color: #1e266d; font-size: 13px; font-weight: 600; text-decoration: none; transition: border-color .18s ease, color .18s ease, background .18s ease; }
.jemars-tool-related a:hover { color: #1e66ff; border-color: #1e66ff; background: #f7f9ff; }
.jemars-tool-related a i { color: #1e66ff; font-size: 16px; line-height: 1; }

.jct-panelcard {
    background: #fff;
    border: 1px solid #e8ecf5;
    border-radius: 16px;
    padding: 22px;
}

/* Segment / sekme */
.jct-tabs { display: inline-flex; gap: 6px; padding: 5px; background: #f3f5fb; border-radius: 12px; margin-bottom: 18px; }
.jct-tab {
    appearance: none; border: 0; cursor: pointer;
    padding: 9px 18px; border-radius: 9px; font-size: 14px; font-weight: 600;
    background: transparent; color: #5c6178; transition: background .15s ease, color .15s ease;
}
.jct-tab:hover { color: #1e266d; }
.jct-tab.is-active { background: #1e66ff; color: #fff; }

/* Alan etiket + textarea */
.jct-field { margin-bottom: 14px; }
.jct-fieldhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; flex-wrap: wrap; }
.jct-label { font-size: 13px; font-weight: 700; color: #1e266d; text-transform: uppercase; letter-spacing: .03em; }
.jct-textarea {
    width: 100%; min-height: 180px; padding: 14px 16px;
    border: 1px solid #e8ecf5; border-radius: 12px;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    font-size: 14px; line-height: 1.6; color: #1e266d; background: #f5f8ff;
    resize: vertical; tab-size: 2; -moz-tab-size: 2;
}
.jct-textarea::placeholder { color: #a7adc9; }
.jct-textarea:focus { outline: none; border-color: #1e66ff; box-shadow: 0 0 0 3px rgba(30,102,255,.15); }
.jct-textarea--out { background: #f5f8ff; }
.jct-textarea[readonly] { color: #1e266d; }

/* Aksiyon satırı */
.jct-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 4px 0 0; }
.jct-actions--between { justify-content: space-between; }
.jct-btn {
    appearance: none; cursor: pointer; border: 1px solid transparent;
    display: inline-flex; align-items: center; gap: 8px;
    padding: 11px 20px; border-radius: 10px; font-size: 14px; font-weight: 600;
    line-height: 1; transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.jct-btn i { font-size: 17px; }
.jct-btn--primary { background: #1e66ff; color: #fff; }
.jct-btn--primary:hover { background: #1656db; color: #fff; }
.jct-btn--navy { background: #1e266d; color: #fff; }
.jct-btn--navy:hover { background: #161d54; color: #fff; }
.jct-btn--ghost { background: #fff; color: #1e266d; border-color: #e8ecf5; }
.jct-btn--ghost:hover { border-color: #1e66ff; color: #1e66ff; }
.jct-btn.jct-copied { background: #e8f5e9; color: #2e7d32; border-color: #e8f5e9; }

/* Üreteç kontrolleri (lorem vb.) */
.jct-controls { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end; margin-bottom: 18px; }
.jct-control { display: flex; flex-direction: column; gap: 6px; }
.jct-control-label { font-size: 13px; font-weight: 600; color: #5c6178; }
.jct-input, .jct-select {
    border: 1px solid #e8ecf5; border-radius: 10px; padding: 10px 12px;
    font-size: 14px; color: #1e266d; background: #fff; min-width: 130px;
}
.jct-input:focus, .jct-select:focus { outline: none; border-color: #1e66ff; box-shadow: 0 0 0 3px rgba(30,102,255,.12); }
.jct-input { width: 96px; min-width: 0; }
.jct-check { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: #1e266d; cursor: pointer; user-select: none; }
.jct-check input { width: 17px; height: 17px; accent-color: #1e66ff; cursor: pointer; }

/* İstatistik rozetleri */
.jct-stats { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; }
.jct-stat {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 8px 13px; border-radius: 9px; background: #eef3ff; color: #1e266d;
    font-size: 13px; font-weight: 600;
}
.jct-stat i { color: #1e66ff; font-size: 15px; }
.jct-stat--good { background: #e8f5e9; color: #2e7d32; }
.jct-stat--good i { color: #2e7d32; }

/* Hata / durum */
.jct-note {
    display: none; align-items: flex-start; gap: 10px;
    padding: 13px 16px; border-radius: 11px; font-size: 14px; line-height: 1.55; margin-top: 14px;
}
.jct-note.is-show { display: flex; }
.jct-note i { font-size: 18px; flex: 0 0 auto; margin-top: 1px; }
.jct-note--err { background: #ffebee; color: #c62828; }
.jct-note--ok  { background: #e8f5e9; color: #2e7d32; }

@media (max-width: 575px) {
    .jct-panelcard { padding: 16px; }
    .jct-actions { gap: 8px; }
    .jct-btn { padding: 10px 16px; }
    .jct-tabs { display: flex; }
    .jct-tab { flex: 1 1 auto; text-align: center; padding: 9px 10px; }
}