/* Faz 40.15J-C2 — müşteriye açık canlı tema demosu (/temalar/canli-demo/). Araç çubuğu J-B4 Tema Yönetimi önizleme araç çubuğunun
   (admin/site-editor/theme-manager.css `.tm-preview-head` / `.tm-pv-*`) görsel dilini izler: [ad + kategori/not + DEMO rozeti] ·
   [sayfa seçici] · [Masaüstü/Tablet/Mobil segmenti] · [Temalara Dön]. Geniş ekranda tek satır; <=1023px iki satır; <=560px cihaz
   düğmeleri simge-üstte-metin. Sayfa yatay KAYMAZ: cihaz genişliği iframe'e uygulanır ve görünümle sınırlanır. */
:root{
  --tdm-ink:#0f172a;--tdm-ink-2:#334155;--tdm-muted:#64748b;--tdm-line:#e4e8ef;--tdm-line-2:#d2d8e2;--tdm-surface-2:#f7f8fb;--tdm-surface-3:#f1f3f8;
  --tdm-accent:#2563eb;--tdm-accent-2:#1d4ed8;--tdm-ring:rgba(37,99,235,.30);--tdm-bg:#eceff4;--tdm-demo:#0f766e;--tdm-demo-soft:#e6f6f4;
  --tdm-font:"DM Sans",system-ui,sans-serif;--tdm-display:"Manrope","DM Sans",system-ui,sans-serif
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
.tdm-body{display:flex;flex-direction:column;min-height:100vh;height:100vh;height:100dvh;overflow:hidden;background:var(--tdm-bg);color:var(--tdm-ink);font-family:var(--tdm-font)}
.tdm-bar{position:relative;z-index:2;flex:none;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto;grid-template-areas:"info page dev back";align-items:center;column-gap:16px;row-gap:8px;
  padding:8px 12px 8px 16px;background:#fff;border-bottom:1px solid var(--tdm-line);box-shadow:0 1px 2px rgba(15,23,42,.05),0 4px 12px rgba(15,23,42,.04)}
.tdm-info{grid-area:info;display:flex;flex-direction:column;gap:2px;min-width:0}
.tdm-titlerow{display:flex;align-items:center;gap:8px;min-width:0}
.tdm-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:700 15px/1.3 var(--tdm-display);color:var(--tdm-ink);letter-spacing:-.1px}
.tdm-badge{flex:none;display:inline-flex;align-items:center;height:20px;padding:0 7px;border:1px solid #b7e2dc;border-radius:999px;background:var(--tdm-demo-soft);color:var(--tdm-demo);font:700 10.5px/1 var(--tdm-font);letter-spacing:.06em}
.tdm-meta{display:flex;align-items:center;gap:6px;min-width:0;overflow:hidden;white-space:nowrap;font-size:12px;line-height:1.35;color:var(--tdm-muted)}
.tdm-category{flex:none;color:var(--tdm-ink-2);font-weight:600}
.tdm-category:empty,.tdm-category:empty+.tdm-sep{display:none}
.tdm-scope{min-width:0;overflow:hidden;text-overflow:ellipsis}
.tdm-icon{display:block;flex:none;width:16px;height:16px}
.tdm-page{grid-area:page;position:relative;display:flex;align-items:center;min-width:0}
.tdm-select{appearance:none;-webkit-appearance:none;width:clamp(200px,24vw,320px);max-width:100%;height:36px;margin:0;padding:0 34px;border:1px solid var(--tdm-line-2);border-radius:8px;background:#fff;color:var(--tdm-ink);font:600 13.5px/1 var(--tdm-font);text-overflow:ellipsis;cursor:pointer;transition:border-color .15s ease,box-shadow .15s ease}
.tdm-select:hover{border-color:#b8c2d1}
.tdm-select:focus-visible{outline:none;border-color:var(--tdm-accent);box-shadow:0 0 0 3px var(--tdm-ring)}
.tdm-select:disabled{cursor:progress;color:var(--tdm-muted);background:var(--tdm-surface-2)}
.tdm-page-icon,.tdm-chevron{position:absolute;top:50%;transform:translateY(-50%);pointer-events:none;color:var(--tdm-muted)}
.tdm-page-icon{left:11px}
.tdm-chevron{right:10px;width:15px;height:15px}
.tdm-segment{grid-area:dev;justify-self:end;display:inline-flex;align-items:center;gap:2px;min-width:0;padding:3px;border:1px solid var(--tdm-line-2);border-radius:10px;background:var(--tdm-surface-3)}
.tdm-seg-btn{appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:6px;height:30px;margin:0;padding:0 12px;border:0;border-radius:7px;background:transparent;color:var(--tdm-ink-2);font:600 13px/1 var(--tdm-font);white-space:nowrap;cursor:pointer;transition:background-color .15s ease,color .15s ease,box-shadow .15s ease}
.tdm-seg-btn:hover{background:#fff;color:var(--tdm-ink)}
.tdm-seg-btn[aria-pressed="true"]{background:var(--tdm-accent);color:#fff;box-shadow:0 1px 2px rgba(15,23,42,.18)}
.tdm-seg-btn[aria-pressed="true"]:hover{background:var(--tdm-accent-2);color:#fff}
.tdm-seg-btn:focus-visible,.tdm-back:focus-visible,.tdm-retry:focus-visible{outline:2px solid var(--tdm-accent);outline-offset:2px}
.tdm-back{grid-area:back;justify-self:end;display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 12px;border:1px solid var(--tdm-line-2);border-radius:8px;background:#fff;color:var(--tdm-ink-2);font:600 13px/1 var(--tdm-font);text-decoration:none;white-space:nowrap;transition:background-color .15s ease,color .15s ease,border-color .15s ease}
.tdm-back:hover{background:var(--tdm-surface-3);color:var(--tdm-ink);border-color:#b8c2d1}
.tdm-note{flex:none;margin:0;padding:8px 16px;background:#fff8e6;border-bottom:1px solid #f3dfa9;color:#7a5200;font-size:13px;line-height:1.4}
.tdm-note:empty{display:none}
.tdm-stage{flex:1 1 auto;display:flex;justify-content:center;min-height:0;overflow:hidden;padding:12px}
.tdm-frame{display:block;width:100%;height:100%;max-width:100%;border:1px solid var(--tdm-line-2);border-radius:6px;background:#fff;box-shadow:0 1px 3px rgba(15,23,42,.06)}
.tdm-stage[data-device="tablet"] .tdm-frame{width:768px}
.tdm-stage[data-device="mobile"] .tdm-frame{width:390px}
.tdm-message{align-self:flex-start;margin-top:8vh;width:min(520px,100%);background:#fff;border:1px solid var(--tdm-line);border-radius:14px;padding:26px 24px;box-shadow:0 10px 30px rgba(15,23,42,.06)}
.tdm-message[hidden]{display:none}
.tdm-message-title{margin:0 0 8px;font:800 20px/1.3 var(--tdm-display)}
.tdm-message p{margin:0 0 16px;color:var(--tdm-ink-2);font-size:14px;line-height:1.55}
.tdm-message-actions{display:flex;gap:10px;flex-wrap:wrap}
.tdm-retry{height:36px;padding:0 14px;border:0;border-radius:8px;background:var(--tdm-accent);color:#fff;font:600 13px/1 var(--tdm-font);cursor:pointer}
.tdm-retry[hidden]{display:none}
.tdm-back-inline{grid-area:auto}
@media (max-width:1023px){
  .tdm-bar{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"info back" "page dev";column-gap:12px}
  .tdm-select{width:100%}
}
@media (max-width:560px){
  .tdm-bar{column-gap:8px;padding:8px 10px}
  .tdm-select{height:40px;font-size:13px}
  .tdm-segment{padding:2px}
  .tdm-seg-btn{flex-direction:column;gap:3px;height:40px;padding:0 8px;font-size:11px}
  .tdm-seg-icon{width:15px;height:15px}
  .tdm-back{height:34px;padding:0 10px}
  .tdm-stage{padding:8px}
}
@media (prefers-reduced-motion:reduce){.tdm-select,.tdm-seg-btn,.tdm-back{transition:none}}