/* wordpresstema.com — Demo inceleme paneli (üst bar + cihaz çerçevesi). store.css üzerine gelir. */
.demo-html,.demo-body{height:100%;overflow:hidden}
.demo-body{
  --bar-h:64px;
  --dbg:#0a1230; --dbg-2:#0f1b45; --dline:rgba(255,255,255,.08); --dtext:#e8edf8; --ddim:#8e9bc0;
  background:var(--dbg);color:var(--dtext);display:flex;flex-direction:column;font-family:var(--font);
}
.demo-body .mono{font-variant-numeric:tabular-nums}

/* ---------- Üst bar ---------- */
.dbar{
  position:relative;z-index:5;flex:none;height:var(--bar-h);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;
  padding:0 max(14px,env(safe-area-inset-left)) 0 max(14px,env(safe-area-inset-right));
  background:linear-gradient(180deg,rgba(16,26,66,.98),rgba(10,18,48,.98));
  border-bottom:1px solid var(--dline);box-shadow:0 10px 40px -20px rgba(0,0,0,.8);
  backdrop-filter:saturate(1.3) blur(10px);
}
.dbar::after{content:"";position:absolute;inset:auto 0 -1px 0;height:1px;background:linear-gradient(90deg,transparent,rgba(99,140,255,.55),transparent)}
.dbar-l{display:flex;align-items:center;gap:12px;min-width:0}
.dbar-c{display:flex;align-items:center;gap:10px;justify-self:center}
.dbar-r{display:flex;align-items:center;gap:10px;justify-self:end;min-width:0}

.dbar-back,.dbar-ico{
  display:inline-grid;place-items:center;width:38px;height:38px;border-radius:11px;border:1px solid var(--dline);
  background:rgba(255,255,255,.04);color:var(--dtext);cursor:pointer;transition:background .18s,border-color .18s,transform .18s;flex:none;font:inherit;padding:0
}
.dbar-back:hover,.dbar-ico:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.18)}
.dbar-back:active,.dbar-ico:active{transform:scale(.96)}
.dbar-ico[disabled],.dbar-ico.is-off{opacity:.3;pointer-events:none}
.dbar-logo{display:inline-flex;flex:none;filter:drop-shadow(0 6px 14px rgba(37,99,235,.45))}
.dbar-info{min-width:0;line-height:1.2}
.dbar-name{display:flex;align-items:center;gap:8px;min-width:0}
.dbar-name strong{font-weight:800;font-size:1rem;letter-spacing:-.015em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#fff}
.dbar-cat{display:inline-flex;align-items:center;gap:6px;flex:none;font-family:var(--font-ui);font-size:.68rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ddim)}
.dbar-cat i{width:8px;height:8px;border-radius:50%;background:var(--c,#2563eb);box-shadow:0 0 0 3px color-mix(in oklab,var(--c,#2563eb) 30%,transparent)}
.dbar-pos{flex:none;font-family:var(--font-ui);font-size:.68rem;color:var(--ddim);background:rgba(255,255,255,.06);border:1px solid var(--dline);border-radius:999px;padding:1px 7px}
.dbar-sub{display:flex;align-items:center;gap:7px;margin-top:3px;font-family:var(--font-ui);font-size:.74rem;color:var(--ddim);white-space:nowrap}
.dbar-sub .dot{width:7px;height:7px;border-radius:50%;background:#64748b;flex:none}
.dbar-sub .dot.live{background:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,.22);animation:dpulse 2s ease-in-out infinite}
.dbar-sub .dot.off{background:#f59e0b}
@keyframes dpulse{0%,100%{box-shadow:0 0 0 2px rgba(34,197,94,.18)}50%{box-shadow:0 0 0 5px rgba(34,197,94,.05)}}
.dbar-size{color:#b8c3e6;font-size:.72rem;background:rgba(255,255,255,.05);border:1px solid var(--dline);border-radius:6px;padding:0 6px;line-height:18px}
.dbar-size:empty{display:none}

/* Cihaz seçici (segment) */
.dev{position:relative;display:flex;gap:2px;padding:4px;border-radius:14px;background:rgba(0,0,0,.35);border:1px solid var(--dline);box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
.dev-pill{position:absolute;top:4px;left:4px;height:calc(100% - 8px);width:0;border-radius:10px;background:linear-gradient(180deg,#3b82f6,#2563eb);box-shadow:0 6px 16px -6px rgba(37,99,235,.9),inset 0 1px 0 rgba(255,255,255,.25);transition:left .32s cubic-bezier(.2,.8,.2,1),width .32s cubic-bezier(.2,.8,.2,1);opacity:0}
.dev-pill.is-ready{opacity:1}
.dev-btn{position:relative;z-index:1;display:inline-flex;align-items:center;gap:7px;padding:0 14px;height:36px;border:0;border-radius:10px;background:transparent;color:var(--ddim);font:inherit;font-family:var(--font-ui);font-weight:600;font-size:.82rem;cursor:pointer;transition:color .2s;white-space:nowrap}
.dev-btn:hover{color:#fff}
.dev-btn.is-active{color:#fff}
.dbar-tools{display:flex;gap:6px}

/* Sağ: fiyat + butonlar */
.dbar-nav{display:flex;gap:6px;margin-right:4px}
.dbar-price{display:flex;flex-direction:column;align-items:flex-end;line-height:1.1;margin-right:4px}
.dbar-price b{font-size:1.05rem;font-weight:800;letter-spacing:-.02em;color:#fff}
.dbar-price b.free{color:#4ade80}
.dbar-price small{font-family:var(--font-ui);font-size:.68rem;color:var(--ddim)}
.demo-body .btn.dbtn-outline{background:rgba(255,255,255,.05);color:#fff;border-color:rgba(255,255,255,.14);padding:.62em 1em;border-radius:11px}
.demo-body .btn.dbtn-outline:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.3);color:#fff}
.demo-body .btn.dbtn-buy{color:#fff;border-color:transparent;padding:.62em 1.1em;border-radius:11px;box-shadow:0 10px 24px -10px rgba(37,99,235,.9),inset 0 1px 0 rgba(255,255,255,.22)}
.demo-body .btn.dbtn-buy:hover{transform:translateY(-1px);box-shadow:0 14px 28px -10px rgba(37,99,235,1),inset 0 1px 0 rgba(255,255,255,.22)}

/* ---------- Sahne ---------- */
.dstage{position:relative;flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:18px;overflow:hidden}
.dstage-bg{position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(900px 500px at 50% -10%,rgba(37,99,235,.28),transparent 60%),
    radial-gradient(600px 400px at 100% 100%,rgba(109,40,217,.18),transparent 60%),
    radial-gradient(rgba(255,255,255,.06) 1px,transparent 1.2px) 0 0/22px 22px,
    linear-gradient(180deg,var(--dbg),var(--dbg-2));
}
.device{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;width:100%;height:100%;min-height:0}
.device-shell{
  position:relative;display:flex;flex-direction:column;width:100%;height:100%;max-height:100%;
  background:#0f172a;border-radius:18px;padding:0;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.08),inset 0 0 0 1px rgba(255,255,255,.05);
  transition:width .45s cubic-bezier(.2,.8,.2,1),height .45s cubic-bezier(.2,.8,.2,1),padding .45s,border-radius .45s;
  overflow:hidden;
}
.device-screen{position:relative;flex:1;min-height:0;background:#fff;overflow:hidden;border-radius:inherit}
.device-notch,.device-cam,.device-home{display:none;position:absolute;left:50%;transform:translateX(-50%);z-index:3;pointer-events:none}
.device-iframe{display:block;width:100%;height:100%;border:0;background:#fff}
.device-loading{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:#fff;color:#667085;font-family:var(--font-ui);font-size:.86rem;transition:opacity .35s;pointer-events:none}
.device-loading.is-done{opacity:0}
.device-loading .spin{width:34px;height:34px;border-radius:50%;border:3px solid #e4e8f0;border-top-color:#2563eb;animation:dspin .8s linear infinite}
@keyframes dspin{to{transform:rotate(360deg)}}
.device-static{height:100%;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;background:#fff}
.device-static img{display:block;width:100%;height:auto}
.device-hint{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);z-index:3;display:flex;align-items:center;gap:8px;max-width:min(92%,560px);padding:9px 14px;border-radius:12px;background:rgba(10,18,48,.86);color:#e8edf8;font-family:var(--font-ui);font-size:.78rem;backdrop-filter:blur(8px);box-shadow:0 12px 30px -12px rgba(0,0,0,.7);transition:opacity .4s}
.device-hint.is-hidden{opacity:0;pointer-events:none}
.device-empty{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;padding:32px;color:var(--ink);background:#fff}
.device-empty .big-ico{color:#2563eb}
.device-empty h2{font-size:1.4rem}
.device-empty p{max-width:460px;color:var(--muted)}

/* Masaüstü: çerçeve sahneyi doldurur */
.device[data-device="desktop"] .device-shell{width:100%;height:100%;border-radius:16px}

/* Tablet: 834×1194 (dik) / 1194×834 (yatay), bezel 14px */
.device[data-device="tablet"] .device-shell{width:min(100%,862px);height:min(100%,1222px);padding:14px;border-radius:30px;background:linear-gradient(145deg,#1e293b,#0b1220)}
.device[data-device="tablet"] .device-screen{border-radius:16px}
.device[data-device="tablet"] .device-cam{display:block;top:5px;width:6px;height:6px;border-radius:50%;background:#0b1220;box-shadow:inset 0 0 0 1.5px #334155}
.device[data-device="tablet"].is-landscape .device-shell{width:min(100%,1222px);height:min(100%,862px)}

/* Mobil: 390×844, bezel 11px, çentik */
.device[data-device="mobile"] .device-shell{width:min(100%,412px);height:min(100%,866px);padding:11px;border-radius:46px;background:linear-gradient(145deg,#1e293b,#0b1220)}
.device[data-device="mobile"] .device-screen{border-radius:36px}
.device[data-device="mobile"] .device-notch{display:block;top:11px;width:116px;height:30px;border-radius:0 0 18px 18px;background:#0b1220}
.device[data-device="mobile"] .device-home{display:block;bottom:17px;width:120px;height:4px;border-radius:999px;background:rgba(15,23,42,.5)}
.device[data-device="mobile"].is-landscape .device-shell{width:min(100%,866px);height:min(100%,412px)}
.device[data-device="mobile"].is-landscape .device-notch{top:50%;left:11px;transform:translateY(-50%);width:30px;height:116px;border-radius:0 18px 18px 0}
.device[data-device="mobile"].is-landscape .device-home{left:auto;right:17px;bottom:50%;transform:translateY(50%);width:4px;height:120px}

/* Klavye ipucu */
.dtip{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);z-index:4;display:flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:rgba(10,18,48,.9);border:1px solid var(--dline);color:var(--ddim);font-family:var(--font-ui);font-size:.74rem;white-space:nowrap;box-shadow:0 12px 30px -12px rgba(0,0,0,.8);animation:dtip .5s ease-out}
.dtip b{display:inline-block;min-width:18px;padding:0 5px;margin:0 1px;border-radius:5px;background:rgba(255,255,255,.1);color:#fff;text-align:center;font-weight:700;font-size:.7rem;line-height:18px}
.dtip[hidden]{display:none}
@keyframes dtip{from{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%,0)}}

/* Alt mobil işlem çubuğu (küçük ekranlar) */
.dmob{display:none;flex:none;gap:10px;padding:10px max(14px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left));background:linear-gradient(180deg,rgba(10,18,48,.98),rgba(10,18,48,1));border-top:1px solid var(--dline)}
.dmob .btn{flex:1;font-size:.86rem}

/* Tam ekran */
.demo-body.is-fs .dbar{--bar-h:56px}

/* ---------- Duyarlılık ---------- */
@media (max-width:1180px){
  .dev-btn span{display:none}
  .dev-btn{padding:0 12px}
  .dbar-sub{display:none}
  .dbar-price small{display:none}
}
@media (max-width:980px){
  .dbar{grid-template-columns:1fr auto}
  .dbar-c{display:none}
  .dstage{padding:12px}
  .device[data-device="desktop"] .device-shell{border-radius:14px}
}
@media (max-width:760px){
  .demo-body{--bar-h:58px}
  .dbar{gap:10px}
  .dbar-logo,.dbar-cat,.dbar-pos,.dbar-price,.dbar-r .btn,.dtip{display:none}
  .dbar-r{justify-self:end}
  .dbar-name strong{font-size:.92rem}
  .dstage{padding:0}
  .device[data-device="desktop"] .device-shell{border-radius:0;box-shadow:none}
  .dmob{display:flex}
}
@media (prefers-reduced-motion:reduce){
  .device-shell,.dev-pill,.device-loading{transition:none}
  .dbar-sub .dot.live,.dtip{animation:none}
}