.ssl-app { --ssl-ink: #14202e; --ssl-mark: #ffd23f; --ssl-soft: #f6f7f9; --ssl-rule: #e3e6ea; font-size: 16px; line-height: 1.55; color: var(--ssl-ink); max-width: 900px; margin: 0 auto; }
.ssl-app * { box-sizing: border-box; }
.ssl-card { background: #fff; border: 1px solid var(--ssl-rule); border-radius: 16px; padding: 16px 18px; margin: 0 0 14px; }
.ssl-card h2 { margin: 0 0 8px; font-size: 1.35em; }
.ssl-card h3 { margin: 0; font-size: 1.1em; }
.ssl-muted { color: #6b7280; font-size: .9em; }
.ssl-in { width: 100%; min-height: 180px; padding: 10px 12px; border: 1px solid #cbd5e1; border-radius: 12px; font: inherit; resize: vertical; }
.ssl-row { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin-top: 10px; }
.ssl-row label { display: inline-flex; gap: 6px; align-items: center; font-size: .92em; }
.ssl-row select { padding: 4px 6px; border-radius: 8px; border: 1px solid #cbd5e1; font: inherit; font-size: .92em; }
.ssl-sp { flex: 1; }
.ssl-cnt { font-size: .85em; color: #6b7280; margin-right: auto; }
.ssl-btn { border: 1px solid #cbd5e1; background: #fff; color: var(--ssl-ink); border-radius: 10px; padding: 8px 14px; font: 600 .95em/1.2 inherit; cursor: pointer; }
.ssl-btn:hover { border-color: var(--ssl-ink); }
.ssl-main { background: var(--ssl-ink); color: #fff; border-color: var(--ssl-ink); }
.ssl-ghost { background: transparent; }
.ssl-bar { position: sticky; top: var(--wp-admin--admin-bar--height, 0px); z-index: 5; background: #fff; padding: 6px 0 10px; margin: -6px 0 10px; border-bottom: 1px solid var(--ssl-rule); }
.ssl-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ssl-chip { border: 1px solid #cbd5e1; background: var(--ssl-soft); border-radius: 999px; padding: 6px 12px; font: 600 .92em/1.2 inherit; cursor: pointer; color: var(--ssl-ink); }
.ssl-chip.is-on { background: var(--ssl-ink); color: #fff; border-color: var(--ssl-ink); }
.ssl-seg { display: inline-flex; border: 1px solid #cbd5e1; border-radius: 999px; overflow: hidden; }
.ssl-seg button { border: 0; background: #fff; padding: 6px 12px; font: 600 .9em/1.2 inherit; cursor: pointer; color: var(--ssl-ink); }
.ssl-seg button.is-on { background: var(--ssl-ink); color: #fff; }
.ssl-note { margin: 8px 0 0; padding: 6px 10px; background: #fff8db; border-radius: 8px; font-size: .9em; }
.ssl-sum { margin: 8px 0 0; padding: 6px 10px; background: #f0fdf4; border-radius: 8px; font-size: .92em; }
.ssl-text { font-size: 1.15em; line-height: 1.85; }
.ssl-text p { margin: 0 0 .8em; }
.ssl-text [data-si] { cursor: pointer; border-radius: 6px; padding: 1px 2px; transition: background .15s; }
.ssl-text [data-si]:hover { background: #eef2ff; }
.ssl-text [data-si].is-on { background: var(--ssl-mark); box-shadow: 0 0 0 2px var(--ssl-mark); }
.ssl-tip { margin: 6px 0 0; }
.ssl-sh { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.ssl-sh label { font-size: .92em; display: inline-flex; gap: 6px; align-items: center; }
.ssl-sc { border: 1px solid var(--ssl-rule); border-radius: 12px; padding: 10px 12px; margin: 0 0 10px; transition: border-color .15s, box-shadow .15s; }
.ssl-sc.is-on { border-color: #eab308; box-shadow: 0 0 0 2px rgba(255, 210, 63, .5); }
.ssl-sc-h { display: flex; gap: 10px; align-items: baseline; }
.ssl-sc-h > b { flex: none; min-width: 26px; height: 26px; border-radius: 99px; background: var(--ssl-soft); display: inline-flex; align-items: center; justify-content: center; font-size: .85em; }
.ssl-sc-s { font-size: 1.05em; font-weight: 600; }
.ssl-sc-s mark { background: #dbeafe; color: inherit; border-radius: 4px; padding: 0 2px; cursor: pointer; }
.ssl-sc-p { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0 4px 36px; }
.ssl-sc-p button { border: 1px solid #e2e8f0; background: var(--ssl-soft); border-radius: 999px; padding: 3px 9px; font: .8em/1.3 inherit; cursor: pointer; color: var(--ssl-ink); }
.ssl-sc-p button:hover { border-color: var(--ssl-ink); }
.ssl-sc-p .ssl-say-b { background: #fef2f2; border-color: #fecaca; font-weight: 700; }
.ssl-sc-p .ssl-say-b.is-rec { background: #dc2626; color: #fff; border-color: #dc2626; animation: sslPulse 1s infinite; }
@keyframes sslPulse { 50% { opacity: .6; } }
.ssl-sc-r { margin-left: 36px; }
.ssl-sc-r:empty { display: none; }
.ssl-say-w { margin: 4px 0 2px; line-height: 1.8; }
.ssl-say-w span { padding: 1px 4px; border-radius: 5px; }
.ssl-say-w .ok { background: #dcfce7; color: #166534; }
.ssl-say-w .miss { background: #fee2e2; color: #991b1b; text-decoration: underline wavy #ef4444; }
.ssl-say-s { font-size: .88em; color: #475569; }
.ssl-good { color: #15803d; } .ssl-mid { color: #b45309; } .ssl-bad { color: #b91c1c; }
.ssl-sc-tr { margin: 4px 0 4px 36px; color: #334155; }
.ssl-sc-tr.is-hid { color: transparent; text-shadow: 0 0 8px rgba(51, 65, 85, .55); cursor: pointer; user-select: none; }
.ssl-sc-w { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 0 36px; }
.ssl-sc-w button { border: 1px solid #c7d2fe; background: #eef2ff; border-radius: 10px; padding: 3px 9px; font: .85em/1.35 inherit; cursor: pointer; color: var(--ssl-ink); text-align: left; }
.ssl-sc-w button span { color: #475569; }
.ssl-sc-w button i { color: #6b7280; font-size: .9em; }
.ssl-sc-n { margin: 6px 0 0 36px; font-size: .88em; background: #fffbeb; border-radius: 8px; padding: 4px 8px; }
.ssl-wl table { width: 100%; border-collapse: collapse; font-size: .95em; }
.ssl-wl td { border-bottom: 1px solid var(--ssl-rule); padding: 5px 6px; vertical-align: top; }
.ssl-wl button { border: 0; background: none; cursor: pointer; padding: 0 2px; }
.ssl-wait { color: #6b7280; }
@media (max-width: 600px) {
  .ssl-card { padding: 12px; border-radius: 12px; }
  .ssl-text { font-size: 1.05em; }
  .ssl-sc-p, .ssl-sc-tr, .ssl-sc-w, .ssl-sc-n, .ssl-sc-r { margin-left: 0; }
  .ssl-bar { position: static; }
}
@media print {
  .ssl-bar, .ssl-sc-p, .ssl-tip, .ssl-sh label, .ssl-sc-r { display: none !important; }
  .ssl-card { border: 0; padding: 0; }
  .ssl-sc { break-inside: avoid; }
  .ssl-sc-tr.is-hid { color: inherit; text-shadow: none; }
}
/* 🃏 kart kart görünüm */
.ssl-fc { border: 2px solid #eab308; box-shadow: 0 6px 24px rgba(20, 32, 46, .08); }
.ssl-fnav { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.ssl-fnav .ssl-btn[disabled] { opacity: .4; cursor: default; }
.ssl-prog { flex: 1; position: relative; text-align: center; font-size: .9em; color: #475569; padding-bottom: 6px; }
.ssl-prog i { position: absolute; left: 0; bottom: 0; height: 4px; border-radius: 99px; background: var(--ssl-mark); }
.ssl-prog::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; border-radius: 99px; background: rgba(0, 0, 0, .07); z-index: -1; }
.ssl-sc.ssl-big { border: 0; padding: 4px 0 0; margin: 0; box-shadow: none !important; }
.ssl-big .ssl-sc-s { font-size: 1.45em; line-height: 1.45; }
.ssl-big .ssl-sc-h > b { min-width: 32px; height: 32px; }
.ssl-big .ssl-sc-tr { font-size: 1.12em; margin-top: 8px; }
.ssl-big .ssl-sc-p button { font-size: .9em; padding: 5px 11px; }
.ssl-big .ssl-sc-w button { font-size: .95em; }
.ssl-trl { display: inline-flex; gap: 6px; align-items: center; font-size: .88em; margin: 10px 0 0 36px; color: #475569; }
.ssl-focus + .ssl-text { font-size: 1em; }
.ssl-ico { padding: 8px 10px; font-size: 1em; }
/* ↔ geniş ekran ve ⛶ tam ekran */
.ssl-app.is-wide { position: relative; }
.ssl-ico.is-on { background: var(--ssl-ink); color: #fff; }
.ssl-app:fullscreen { max-width: none; width: 100%; padding: 16px 24px; overflow: auto; background: #f6f7f9; }
.ssl-app:-webkit-full-screen { max-width: none; width: 100%; padding: 16px 24px; overflow: auto; background: #f6f7f9; }
@media (min-width: 1100px) {
  .ssl-app.is-wide .ssl-big .ssl-sc-s, .ssl-app:fullscreen .ssl-big .ssl-sc-s { font-size: 1.75em; }
}
@media (max-width: 600px) {
  .ssl-trl { margin-left: 0; }
  .ssl-big .ssl-sc-s { font-size: 1.2em; }
  .ssl-fnav .ssl-btn { padding: 8px 10px; }
}
@media print { .ssl-focus { display: none !important; } .ssl-list { display: block !important; } }