/* Demo kütüphanesi (panel). Renkler panel değişkenlerinden gelir; karanlık modda da okunur. */
.dg-toolbar{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:4px 0 14px}
.dg-search{position:relative;flex:1 1 320px;max-width:440px}
.dg-search .dashicons{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--mut);pointer-events:none}
.dg-search input{width:100%;height:42px;padding-left:38px!important;border-radius:10px!important}
.dg-toolbar select{width:auto;min-width:220px;height:42px;border-radius:10px}
.dg-count{margin-left:auto;font-size:13px;color:var(--mut)}
.dg-groups{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px}
.dg-groups button{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 14px;border:1px solid var(--line);border-radius:99px;background:var(--card);color:var(--txt);font:600 13px/1 var(--font,inherit);cursor:pointer;transition:background .15s,border-color .15s,color .15s}
.dg-groups button em{min-width:22px;padding:3px 7px;border-radius:99px;background:var(--soft,#f1f5f9);color:var(--mut);font-style:normal;font-size:11.5px;font-weight:700;text-align:center}
.dg-groups button:hover{border-color:var(--acc);color:var(--acc)}
.dg-groups button.is-on{background:var(--acc);border-color:var(--acc);color:var(--on-acc,#fff)}
.dg-groups button.is-on em{background:rgba(0,0,0,.18);color:var(--on-acc,#fff)}
.dg-groups button.is-feat:not(.is-on){border-color:color-mix(in srgb,var(--acc) 45%,var(--line));background:var(--acc-soft);color:var(--acc)}
.dg-groups button.is-feat::before{content:"";width:7px;height:7px;border-radius:50%;background:#f59e0b}

.dg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:24px}
.dg-card{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden;transition:transform .2s,box-shadow .2s,border-color .2s}
.dg-card:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--acc) 35%,var(--line));box-shadow:0 22px 48px -18px rgba(15,23,42,.35)}
.dg-thumb{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--soft,#f1f5f9);cursor:zoom-in;container-type:size}
.dg-thumb>img{position:absolute;top:0;left:0;display:block;width:100%;height:auto;transition:transform 6s cubic-bezier(.45,.05,.4,1)}
.dg-card:hover .dg-thumb>img{transform:translateY(calc(-100% + 100cqh))}
.dg-thumb iframe{position:absolute;top:0;left:0;width:1280px;height:1600px;border:0;transform-origin:0 0;pointer-events:none}
.dg-thumb.is-loading::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--soft,#eef1f6),var(--card),var(--soft,#eef1f6));background-size:200% 100%;animation:dg-sh 1.1s linear infinite}
@keyframes dg-sh{from{background-position:200% 0}to{background-position:-200% 0}}
.dg-thumb::before{content:"";position:absolute;inset:auto 0 0;height:80px;z-index:1;background:linear-gradient(transparent,rgba(0,0,0,.28));opacity:0;transition:opacity .2s;pointer-events:none}
.dg-card:hover .dg-thumb::before{opacity:1}
.dg-badge{position:absolute;left:12px;top:12px;z-index:2;padding:5px 10px;border-radius:99px;background:rgba(15,17,26,.78);color:#fff;font-size:11.5px;font-weight:700;letter-spacing:.02em;backdrop-filter:blur(6px)}
.dg-hover{position:absolute;inset:auto 0 16px;z-index:2;display:flex;justify-content:center;gap:8px;opacity:0;transform:translateY(8px);transition:opacity .2s,transform .2s}
.dg-card:hover .dg-hover{opacity:1;transform:none}
.dg-hover span{padding:7px 14px;border-radius:99px;background:#fff;color:#111827;font-size:12.5px;font-weight:700;box-shadow:0 6px 16px rgba(0,0,0,.25)}
.dg-meta{display:flex;align-items:center;gap:12px;padding:14px 16px 4px}
.dg-sw{position:relative;flex:0 0 30px;height:30px;border-radius:50%;box-shadow:0 0 0 2px var(--card),0 0 0 3px var(--line)}
.dg-meta strong{display:block;color:var(--head,var(--txt));font-size:15px;line-height:1.25}
.dg-meta span{display:block;margin-top:2px;font-size:12.5px;color:var(--mut)}
.dg-actions{display:flex;gap:8px;padding:10px 16px 16px;margin-top:auto}
.dg-actions .cms-btn{flex:1;justify-content:center}
.dg-empty{grid-column:1/-1;padding:50px 0;text-align:center;color:var(--mut)}

.dg-modal{position:fixed;inset:0;z-index:1000;display:flex;flex-direction:column;background:#0b0d12}
.dg-modal[hidden]{display:none}
.dg-modal-center{align-items:center;justify-content:flex-start;background:rgba(10,12,18,.65);padding:20px;overflow:auto}
.dg-pv-bar{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:10px 16px;background:#14161f;color:#fff}
.dg-pv-bar strong{flex:0 0 auto;margin-right:auto}
.dg-pv-pages,.dg-pv-devs{display:flex;gap:3px;padding:3px;border-radius:9px;background:#1d2030}
.dg-pv-pages button,.dg-pv-devs button{border:0;background:none;color:#9aa3b5;padding:6px 11px;border-radius:7px;cursor:pointer;font:inherit;font-size:13px}
.dg-pv-pages button.is-on,.dg-pv-devs button.is-on{background:#4f46e5;color:#fff}
.dg-pv-stage{flex:1;display:flex;justify-content:center;padding:16px;min-height:0}
.dg-pv-device{width:100%;height:100%;border-radius:10px;overflow:hidden;background:#fff;transition:width .25s}
.dg-pv-device iframe{width:100%;height:100%;border:0;display:block}
.dg-form{width:min(840px,100%);margin:20px auto;padding:24px}
.dg-form-head{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.dg-form-head strong{display:block;font-size:17px}
.dg-form-sw{flex:0 0 40px;height:40px;border-radius:10px}
.dg-x{margin-left:auto;border:0;background:none;font-size:26px;cursor:pointer;color:var(--mut)}
.dg-modes{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
.dg-mode{display:flex;gap:10px;padding:14px;border:1px solid var(--line);border-radius:12px;cursor:pointer}
.dg-mode:has(input:checked){border-color:var(--acc);background:var(--acc-soft)}
.dg-mode strong{display:block}.dg-mode em{display:block;font-style:normal;font-size:12.5px;color:var(--mut)}
.dg-cols{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.dg-more{margin:4px 0 12px}.dg-more summary{cursor:pointer;color:var(--acc);font-weight:600;padding:6px 0}
.dg-logo{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:8px 0 12px}
.dg-logo img{max-height:44px;max-width:160px;padding:4px;border:1px solid var(--line);border-radius:8px;background:#fff}
.dg-swatches{display:flex;gap:6px;flex-wrap:wrap}
.dg-swatches button{width:30px;height:30px;border:2px solid var(--card);border-radius:50%;box-shadow:0 0 0 1px var(--line);cursor:pointer}
.dg-swatches em{font-style:normal;font-size:12px;color:var(--mut);align-self:center}
.dg-foot{margin-top:14px}.dg-log{margin:12px 0 0;padding-left:18px}
.dg-form.is-design .dg-full-only{display:none}
@media (max-width:700px){.dg-modes,.dg-cols{grid-template-columns:1fr}.dg-pv-pages{display:none}.dg-count{margin-left:0;width:100%}.dg-toolbar select{flex:1}}

/* === 2C: header/footer stili seçicileri === */
.dg-variants{margin:0 0 16px;padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:var(--acc-soft,rgba(79,70,229,.06))}
.dg-variants[hidden]{display:none}
.dg-vhead{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.dg-vhead strong{margin-right:auto;font-size:15px}
.dg-vtools{display:flex;gap:6px;flex-wrap:wrap}
.dg-vnote{margin:4px 0 10px;font-size:12.5px}
.dg-vrow{margin-top:10px}
.dg-vlabel{display:block;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--mut);margin-bottom:6px}
.dg-vcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.dg-vcard{position:relative;display:flex;flex-direction:column;gap:6px;padding:6px;border:2px solid var(--line);border-radius:10px;background:var(--card,#fff);cursor:pointer;text-align:left;font:inherit;color:inherit;transition:border-color .15s,box-shadow .15s}
.dg-vcard:hover{border-color:color-mix(in srgb,var(--acc) 50%,var(--line))}
.dg-vcard:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.dg-vcard.is-on{border-color:var(--acc);box-shadow:0 0 0 3px color-mix(in srgb,var(--acc) 22%,transparent)}
.dg-vcard.is-on::after{content:"✓";position:absolute;top:4px;left:4px;width:20px;height:20px;border-radius:50%;background:var(--acc);color:#fff;font-size:12px;line-height:20px;text-align:center}
.dg-vthumb{display:flex;align-items:center;justify-content:center;height:56px;overflow:hidden;border-radius:6px;background:var(--soft,#f1f3f7);font-size:12px;color:var(--mut)}
.dg-vthumb img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
.dg-vname{font-size:12.5px;font-weight:600;line-height:1.25}
.dg-vrec{position:absolute;top:4px;right:4px;padding:1px 7px;border-radius:99px;background:#15803d;color:#fff;font-style:normal;font-size:10.5px;font-weight:700}
.dg-pv-var{display:flex;align-items:center;gap:8px;font-size:12.5px;color:#9aa3b5}
.dg-pv-var[hidden]{display:none}
.dg-pv-var label{display:flex;align-items:center;gap:5px}
.dg-pv-var select{max-width:170px;padding:5px 8px;border-radius:7px;border:1px solid #2c3045;background:#1d2030;color:#fff;font:inherit;font-size:12.5px}
.dg-pv-var .cms-btn{padding:4px 10px;background:#1d2030;color:#fff;border-color:#2c3045}
@media (max-width:700px){.dg-vcards{grid-template-columns:repeat(2,1fr)}.dg-pv-var select{max-width:120px}}
/* === /2C === */
/* === 3A arch: sayfa iskeleti kartları (dikey küçük resim) === */
.dg-arch{margin-top:10px}
.dg-acard .dg-vthumb{height:120px}
.dg-acard .dg-vthumb img{object-position:top center}
.dg-pv-var label[hidden]{display:none}
/* === /3A arch === */

/* === C composer: Sayfa bölümleri + canlı önizleme ================================================ */
.dgc-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.dgc{--dgc-bg:var(--card,#fff);--dgc-fg:var(--txt,#1f2937);--dgc-mut:var(--mut,#64748b);--dgc-line:var(--line,#e2e8f0);--dgc-soft:var(--soft,#f1f5f9);--dgc-acc:var(--acc,#4f46e5);
	display:flex;flex-direction:column;min-height:0;background:var(--dgc-bg);color:var(--dgc-fg);border:1px solid var(--dgc-line);border-radius:12px;overflow:hidden;font-size:13px;line-height:1.35}
.dgc--pv{--dgc-bg:#14161f;--dgc-fg:#e6e8ee;--dgc-mut:#a3abbc;--dgc-line:#2c3045;--dgc-soft:#1d2030;--dgc-acc:#818cf8;width:360px;flex:0 0 360px}
.dgc[hidden]{display:none}
.dgc button{font:inherit;color:inherit}
.dgc-head{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--dgc-line)}
.dgc-title{display:flex;align-items:baseline;gap:8px;margin-right:auto}
.dgc-title strong{font-size:14px}.dgc-count{font-size:12px;color:var(--dgc-mut)}
.dgc-fold{display:none;border:0;background:none;cursor:pointer;font-size:16px;padding:4px 8px}
.dgc-body{display:flex;flex-direction:column;min-height:0;flex:1}
.dgc-hint{padding:8px 12px 0;font-size:12px;color:var(--dgc-mut)}
.dgc-tools{display:flex;flex-wrap:wrap;gap:6px;padding:10px 12px 6px}
.dgc-btn{display:inline-flex;align-items:center;justify-content:center;gap:5px;min-height:32px;padding:5px 10px;border:1px solid var(--dgc-line);border-radius:8px;background:var(--dgc-soft);cursor:pointer;font-size:12.5px;font-weight:600;white-space:nowrap}
.dgc-btn:hover:not(:disabled){border-color:var(--dgc-acc);color:var(--dgc-acc)}
.dgc-btn:disabled{opacity:.45;cursor:default}
.dgc-btn:focus-visible,.dgc-row:focus-visible,.dgc-alt:focus-visible,.dgc-rb button:focus-visible,.dgc-arch:focus-visible,.dgc-role:focus-visible{outline:2px solid var(--dgc-acc);outline-offset:2px}
.dgc-ico{min-width:32px;padding:5px 8px}
.dgc-grp{display:inline-flex;gap:4px}
.dgc-draft{margin:4px 12px;padding:7px 10px;border-radius:8px;background:rgba(245,158,11,.15);font-size:12px}
.dgc-draft button{border:0;background:none;color:var(--dgc-acc);font-weight:700;cursor:pointer;text-decoration:underline;padding:0 4px}
.dgc-list{flex:1;min-height:80px;overflow:auto;list-style:none;margin:0;padding:6px 10px 10px}
.dgc-row{position:relative;margin:0 0 6px;padding:6px;border:1px solid var(--dgc-line);border-radius:10px;background:var(--dgc-soft);transition:border-color .15s,box-shadow .15s}
.dgc-row.is-sel{border-color:var(--dgc-acc);box-shadow:0 0 0 2px color-mix(in srgb,var(--dgc-acc) 25%,transparent)}
.dgc-row.is-locked{background:color-mix(in srgb,var(--dgc-soft) 80%,#f59e0b 20%)}
.dgc-row.is-busy::after{content:"";position:absolute;left:8px;right:8px;bottom:2px;height:2px;border-radius:2px;background:linear-gradient(90deg,transparent,var(--dgc-acc),transparent);background-size:50% 100%;background-repeat:no-repeat;animation:dgc-slide 1s linear infinite}
.dgc-row.is-drag{z-index:5;opacity:.9;box-shadow:0 10px 26px rgba(0,0,0,.35);pointer-events:none}
.dgc-row.drop-before::before,.dgc-row.drop-after::after{content:"";position:absolute;left:0;right:0;height:3px;border-radius:3px;background:var(--dgc-acc)}
.dgc-row.drop-before::before{top:-5px}.dgc-row.drop-after::after{bottom:-5px;animation:none}
.dgc-skel{height:72px;border:0;background:linear-gradient(90deg,var(--dgc-soft),var(--dgc-line),var(--dgc-soft));background-size:200% 100%;animation:dgc-sh 1.2s linear infinite}
@keyframes dgc-sh{from{background-position:200% 0}to{background-position:-200% 0}}
@keyframes dgc-slide{from{background-position:-100% 0}to{background-position:200% 0}}
.dgc-main{display:flex;align-items:center;gap:8px}
.dgc-grip{flex:0 0 14px;cursor:grab;color:var(--dgc-mut);letter-spacing:-3px;font-size:15px;user-select:none;touch-action:none;text-align:center}
.dgc-th{display:block;overflow:hidden;border-radius:6px;background:var(--dgc-bg);color:var(--dgc-acc);border:1px solid var(--dgc-line)}
.dgc-th img{display:block;width:100%;height:100%;object-fit:cover;object-position:top center}
.dgc-th svg{display:block;width:100%;height:100%}
.dgc-th-s,.dgc-th-a{width:96px;height:60px;flex:0 0 96px}
.dgc-th-big{width:340px;height:212px}
.dgc-txt{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}
.dgc-txt b{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dgc-txt i{font-style:normal;font-size:12px;color:var(--dgc-mut);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-bottom:3px}
.dgc-rb{display:flex;gap:3px}
.dgc-rb button{width:28px;height:26px;padding:0;border:1px solid var(--dgc-line);border-radius:6px;background:var(--dgc-bg);cursor:pointer;font-size:13px;line-height:1}
.dgc-rb button:hover{border-color:var(--dgc-acc)}
.dgc-rb button.is-on{border-color:#f59e0b;background:rgba(245,158,11,.18)}
.dgc-rb [data-a=exp]{margin-left:auto;transition:transform .2s}
.dgc-row.is-open [data-a=exp]{transform:rotate(180deg)}
.dgc-strip{display:flex;gap:8px;overflow-x:auto;padding:8px 2px 4px;margin-top:6px;border-top:1px dashed var(--dgc-line);scroll-snap-type:x proximity}
.dgc-alt{position:relative;flex:0 0 auto;display:flex;flex-direction:column;gap:3px;width:100px;padding:3px;border:2px solid transparent;border-radius:8px;background:none;cursor:pointer;text-align:left;scroll-snap-align:start}
.dgc-alt:hover{border-color:color-mix(in srgb,var(--dgc-acc) 55%,transparent)}
.dgc-alt.is-cur{border-color:var(--dgc-acc)}
.dgc-alt-n{font-size:11px;line-height:1.2;color:var(--dgc-mut);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dgc-alt.is-cur .dgc-alt-n{color:var(--dgc-fg);font-weight:700}
.dgc-new{position:absolute;top:6px;right:6px;padding:1px 6px;border-radius:99px;background:#15803d;color:#fff;font-style:normal;font-size:10px;font-weight:700}
.dgc-rec{background:#0f766e}
.dgc-err{padding:18px 8px;text-align:center;color:var(--dgc-mut);list-style:none}
.dgc-pop{position:relative;margin:0 10px 6px;padding:10px;border:1px solid var(--dgc-acc);border-radius:10px;background:var(--dgc-bg);max-height:46vh;overflow:auto}
.dgc-pop-h{display:flex;flex-direction:column;margin-bottom:8px;padding-right:22px}.dgc-pop-h span{font-size:12px;color:var(--dgc-mut)}
.dgc-pop-x{position:absolute;right:8px;top:6px;border:0;background:none;cursor:pointer;font-size:20px;line-height:1}
.dgc-back{border:0;background:none;color:var(--dgc-acc);cursor:pointer;font-weight:700;padding:0 0 8px}
.dgc-arches{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.dgc-arch{position:relative;display:flex;flex-direction:column;gap:4px;padding:5px;border:2px solid var(--dgc-line);border-radius:9px;background:var(--dgc-soft);cursor:pointer;text-align:left}
.dgc-arch:hover{border-color:color-mix(in srgb,var(--dgc-acc) 60%,var(--dgc-line))}.dgc-arch.is-on{border-color:var(--dgc-acc)}
.dgc-arch-th{display:flex;align-items:center;justify-content:center;height:70px;overflow:hidden;border-radius:6px;background:var(--dgc-bg);font-size:11px;color:var(--dgc-mut)}
.dgc-arch-th img{width:100%;height:100%;object-fit:cover;object-position:top center}
.dgc-arch-n{font-size:12px;font-weight:600}
.dgc-roles{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.dgc-role{display:flex;flex-direction:column;align-items:flex-start;padding:7px 9px;border:1px solid var(--dgc-line);border-radius:8px;background:var(--dgc-soft);cursor:pointer;text-align:left}
.dgc-role span{font-size:11.5px;color:var(--dgc-mut)}.dgc-role:hover:not(:disabled){border-color:var(--dgc-acc)}.dgc-role:disabled{opacity:.45;cursor:default}
.dgc-vgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.dgc-vgrid .dgc-alt{width:auto}.dgc-vgrid .dgc-th-a{width:100%;height:auto;aspect-ratio:8/5}
.dgc-foot{display:flex;flex-direction:column;gap:7px;padding:10px 12px 12px;border-top:1px solid var(--dgc-line)}
.dgc-frow{display:flex;gap:6px}
.dgc-sel,.dgc-name,.dgc-code{flex:1;min-width:0;height:32px;padding:0 8px;border:1px solid var(--dgc-line);border-radius:8px;background:var(--dgc-soft);color:var(--dgc-fg);font:inherit;font-size:12.5px}
.dgc-msg{font-size:12px;color:var(--dgc-mut)}
.dgc-share summary{cursor:pointer;font-size:12.5px;color:var(--dgc-acc);font-weight:600;margin-bottom:6px}.dgc-share .dgc-frow{margin-bottom:6px}
.dgc-go{width:100%;justify-content:center;min-height:38px}
.dgc--in{width:100%;margin-top:4px}
.dgc--in .dgc-list{max-height:430px}
.dg-comp-box{padding:12px 14px}
.dg-comp-on .dg-pv-var label:has(#dg-pv-arch){display:none}
/* büyük önizleme */
.dgc-big{position:fixed;z-index:1200;width:340px;background:#0f1117;color:#fff;border-radius:12px;overflow:hidden;box-shadow:0 20px 50px rgba(0,0,0,.5);pointer-events:none}
.dgc-big[hidden]{display:none}
.dgc-big .dgc-th{border:0;border-radius:0;background:#1d2030;color:#818cf8}
.dgc-big-img{display:block;width:100%;max-height:260px;object-fit:cover;object-position:top}
.dgc-big-txt{display:flex;height:100%;align-items:center;justify-content:center;color:#fff;font-weight:700}
.dgc-big-cap{display:flex;flex-direction:column;padding:8px 12px 10px;font-size:12px}.dgc-big-cap span{color:#aab2c3}
/* çift tamponlu iframe + yükleniyor göstergesi */
.dg-pv-view{flex:1;min-width:0;display:flex;justify-content:center}
.dg-pv-device,.dgc-livedev{position:relative}
.dgc-fr,.dg-pv-device iframe.dgc-fr{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;background:#fff;opacity:1;transition:opacity .2s}
.dgc-fr-new,.dg-pv-device iframe.dgc-fr-new{opacity:0}
.dgc-lbar{position:absolute;left:0;right:0;top:0;height:3px;z-index:6;overflow:hidden;opacity:0;transition:opacity .15s;pointer-events:none}
.is-loading>.dgc-lbar{opacity:1}
.dgc-lbar i{display:block;width:40%;height:100%;background:#6366f1;border-radius:3px;animation:dgc-bar 1s ease-in-out infinite}
.dgc-livedev .dgc-lbar{height:8px}
@keyframes dgc-bar{from{transform:translateX(-100%)}to{transform:translateX(250%)}}
/* kurulum penceresinde canlı önizleme bölmesi */
.dg-form.has-live{width:min(1600px,100%);display:grid;grid-template-columns:minmax(380px,1fr) minmax(0,800px);column-gap:24px;align-items:start}
.dg-form.has-live>*{grid-column:2;min-width:0}
.dg-form.has-live>.dg-live{grid-column:1;grid-row:1/span 60;position:sticky;top:0;align-self:start;height:calc(100vh - 80px)}
.dg-live{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#0b0d12}
.dgc-livehead{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;background:#14161f;color:#fff;font-size:13px}
.dgc-devs{display:flex;gap:3px;padding:3px;border-radius:9px;background:#1d2030}
.dgc-devs button{border:0;background:none;color:#9aa3b5;padding:4px 10px;border-radius:7px;cursor:pointer;font-size:14px}
.dgc-devs button.is-on{background:#4f46e5;color:#fff}
.dgc-livestage{position:relative;flex:1;overflow:hidden;background:#d8dce5}
.dgc-livedev{position:absolute;top:0;left:0;transform-origin:0 0;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.1)}
/* mobil: alt çekmece */
@media (max-width:900px){
	.dg-pv-stage{flex-direction:column;padding:8px;gap:8px}
	.dgc--pv{width:auto;flex:0 0 auto;max-height:60vh;border-radius:14px 14px 0 0}
	.dgc--pv .dgc-body{overflow:auto}
	.dgc--pv .dgc-list{flex:0 0 auto;min-height:190px;overflow:visible}
	.dgc--pv .dgc-fold{display:block}
	.dgc--pv.is-folded .dgc-body{display:none}
	.dgc--pv .dgc-head{cursor:pointer}
	.dg-pv-bar{padding:6px 10px;gap:8px}.dg-pv-bar>strong,.dg-pv-devs{display:none}
	.dgc-hint{display:none}
	.dg-form.has-live{display:block;width:min(840px,100%)}
	.dg-form.has-live>.dg-live{position:sticky;top:0;z-index:3;height:36vh;margin-bottom:14px}
}
@media (prefers-reduced-motion:reduce){.dgc-fr,.dgc-row,.dgc-rb [data-a=exp]{transition:none}.dgc-lbar i,.dgc-skel,.dgc-row.is-busy::after{animation:none}}
.dg-vthumb.is-ph,.dgc-arch-th.is-ph{padding:6px;text-align:center;font-weight:700;line-height:1.2;background:repeating-linear-gradient(45deg,var(--soft,#eef1f6) 0 8px,transparent 8px 16px);color:var(--mut,#64748b)}
/* iç sayfa düzenleri: sayfa seçici (kurulum penceresi) ve "Düzen önerileri" şeridi */
.dgc-pagebar{display:flex;flex-wrap:wrap;gap:5px;padding:4px 12px 6px}
.dgc-pagebar[hidden],.dgc-sugg[hidden]{display:none}
.dgc-pg{border:1px solid var(--dgc-line);border-radius:999px;background:var(--dgc-soft);padding:4px 11px;min-height:28px;font-size:12px;font-weight:600;cursor:pointer}
.dgc-pg:hover{border-color:var(--dgc-acc);color:var(--dgc-acc)}
.dgc-pg.is-on{background:var(--dgc-acc);border-color:var(--dgc-acc);color:#fff}
.dgc-pg.is-mod::after{content:"•";margin-left:5px;color:#f59e0b}
.dgc-pg:focus-visible,.dgc-sg:focus-visible{outline:2px solid var(--dgc-acc);outline-offset:2px}
.dgc-sugg{margin:2px 12px 6px;padding:8px 0 4px;border-top:1px solid var(--dgc-line)}
.dgc-sugg-h{display:flex;flex-direction:column;gap:2px;margin-bottom:6px}
.dgc-sugg-h strong{font-size:13px}.dgc-sugg-h span{font-size:11.5px;color:var(--dgc-mut)}
.dgc-sugg-list{display:flex;gap:6px;overflow-x:auto;padding-bottom:6px;scrollbar-width:thin}
.dgc-sg{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:112px;max-width:150px;padding:7px 10px;border:1px solid var(--dgc-line);border-radius:10px;background:var(--dgc-soft);cursor:pointer;text-align:left}
.dgc-sg b{font-size:12.5px;line-height:1.2}.dgc-sg i{font-style:normal;font-size:11px;color:var(--dgc-mut)}
.dgc-sg:hover,.dgc-sg.is-on{border-color:var(--dgc-acc);box-shadow:0 0 0 2px color-mix(in srgb,var(--dgc-acc) 25%,transparent)}
.dgc-sg.is-on b::after{content:" ✓";color:var(--dgc-acc)}
.dgc--pv .dgc-pagebar{display:none}
@media (max-width:700px){.dgc--pv .dgc-pagebar:not([hidden]){display:flex}}
@media (max-width:900px){.dgc--pv .dgc-sugg{margin:2px 10px 4px}.dgc-sg{min-width:104px}}
/* === /C composer === */
.dgc-big.is-live{width:480px}.dgc-big.is-live .dgc-th-big{width:480px;height:300px;position:relative}
.dgc-live{position:absolute;inset:0;background:#fff;opacity:0;transition:opacity .25s;overflow:hidden}.dgc-live.is-in{opacity:1}
.dgc-live iframe{position:absolute;left:0;top:0;width:1280px;height:800px;border:0;transform-origin:0 0;pointer-events:none;background:#fff}
.dgc-th.is-busy::after{content:"";position:absolute;right:8px;top:8px;width:14px;height:14px;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:dgcspin .7s linear infinite}
@keyframes dgcspin{to{transform:rotate(360deg)}}

/* === Üst çubuk görselli seçici === */
.dg-pv-var select.dg-pk-src{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.dg-pk-btn{display:inline-flex;align-items:center;gap:8px;max-width:200px;padding:5px 10px;border-radius:7px;border:1px solid #2c3045;background:#1d2030;color:#fff;font:inherit;font-size:12.5px;cursor:pointer}
.dg-pk-btn:hover,.dg-pk-btn[aria-expanded=true]{border-color:#6366f1;background:#252a3f}
.dg-pk-btn:focus-visible{outline:2px solid #818cf8;outline-offset:2px}
.dg-pk-v{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dg-pk-btn i{font-style:normal;color:#9aa3b5;font-size:11px}
.dg-pk-pop{position:fixed;z-index:1150;overflow:auto;padding:14px;background:#151823;color:#fff;border:1px solid #2c3045;border-radius:12px;box-shadow:0 24px 60px rgba(0,0,0,.55)}
.dg-pk-pop[hidden]{display:none}
.dg-pk-h{display:flex;flex-direction:column;gap:2px;margin-bottom:12px}
.dg-pk-h strong{font-size:14px}
.dg-pk-h span{font-size:12px;color:#9aa3b5}
.dg-pk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px}
.dg-pk-card{position:relative;display:flex;flex-direction:column;gap:6px;padding:6px;border:1px solid #2c3045;border-radius:10px;background:#1d2030;color:#e5e7eb;font:inherit;text-align:left;cursor:pointer}
.dg-pk-card:hover,.dg-pk-card:focus-visible{border-color:#6366f1;outline:0}
.dg-pk-card.is-on{border-color:#818cf8;box-shadow:0 0 0 1px #818cf8 inset}
.dg-pk-th{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;border-radius:6px;background:repeating-linear-gradient(45deg,#1a1d2b 0 8px,#202436 8px 16px)}
.dg-pk-ph,.dg-pk-big-ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;opacity:.35;filter:grayscale(1)}
.dg-pk-live{position:absolute;top:0;left:0;border:0;transform-origin:0 0;pointer-events:none;background:#fff;opacity:0;transition:opacity .3s}
.dg-pk-live.is-ready{opacity:1}
.dg-pk-n{font-size:12.5px;font-weight:600;line-height:1.3}
.dg-pk-rec{position:absolute;top:10px;right:10px;z-index:2;padding:2px 7px;border-radius:999px;background:#16a34a;color:#fff;font-size:10.5px;font-style:normal;font-weight:700}
.dg-pk-card.is-on::after{content:"✓";position:absolute;top:10px;left:10px;z-index:2;width:20px;height:20px;border-radius:50%;background:#6366f1;color:#fff;font-size:12px;display:flex;align-items:center;justify-content:center}
.dg-pk-big{position:fixed;z-index:1200;background:#0f1117;color:#fff;border-radius:12px;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.6);pointer-events:none}
.dg-pk-big[hidden]{display:none}
.dg-pk-big-st{position:relative;aspect-ratio:16/10;overflow:hidden;background:#1d2030}
/* Header: üst şeride odak (geniş/basık); footer: sayfanın en altına hizalı */
[data-k=h] .dg-pk-th,.dg-pk-big[data-k=h] .dg-pk-big-st{aspect-ratio:16/6}
[data-k=f] .dg-pk-th,.dg-pk-big[data-k=f] .dg-pk-big-st{aspect-ratio:16/9}
[data-k=f] .dg-pk-live{top:auto;bottom:0;transform-origin:0 100%}
[data-k=h] .dg-pk-ph,[data-k=h] .dg-pk-big-ph{object-position:top}
[data-k=f] .dg-pk-ph,[data-k=f] .dg-pk-big-ph{object-position:bottom}
.dg-pk-big-cap{display:flex;flex-direction:column;gap:2px;padding:10px 12px;font-size:12px;color:#c7cbd6}
.dg-pk-big-cap b{color:#fff;font-size:13px}
@media (max-width:700px){.dg-pk-btn{max-width:120px}.dg-pk-grid{grid-template-columns:repeat(2,1fr)}}

/* === Demo kodu, paket rozeti ve kilit === */
.dg-code{position:absolute;right:12px;top:12px;z-index:2;padding:5px 9px;border-radius:7px;background:rgba(255,255,255,.94);color:#111827;font:700 11.5px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.04em;box-shadow:0 2px 8px rgba(0,0,0,.18)}
.dg-code-bar{position:static;background:#1d2030;color:#c7d2fe;box-shadow:none;border:1px solid #2c3045}
.dg-pv-meta{display:inline-flex;align-items:center;gap:8px;margin-right:auto}
.dg-pv-bar strong+.dg-pv-meta{margin-left:-4px}
.dg-pkrow{padding:0 16px 2px}
.dg-pkb{display:inline-block;padding:3px 9px;border-radius:99px;background:var(--acc-soft,rgba(79,70,229,.1));color:var(--acc,#4f46e5);font-size:11.5px;font-weight:700;line-height:1.4;white-space:nowrap}
.dg-pkb.is-lock{background:rgba(245,158,11,.16);color:#b45309}
.dg-pv-meta .dg-pkb{background:#1d2030;color:#c7d2fe;border:1px solid #2c3045}
.dg-pv-meta .dg-pkb.is-lock{color:#fbbf24}
.dg-lockmsg{margin:4px 16px 0;font-size:12.5px;color:#b45309}
.dg-card.is-locked .dg-thumb>img{filter:grayscale(.5)}
.dg-actions .cms-btn[disabled]{opacity:.55;cursor:not-allowed}
.dg-codefind{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.dg-codefind input{width:200px;height:42px;border-radius:10px}
.dg-code-msg{font-size:12.5px;color:var(--mut)}
.dg-code-msg.is-err{color:#b91c1c}.dg-code-msg.is-ok{color:#15803d}