/* Home page showcase: devices band, admin panel tabs, organisation security settings.
   Colours and type come from skydesk.css tokens; screenshots carry the visual weight,
   so frames stay plain (no texture, no gradients over images). */

/* Shared frames */
.vt-browser{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;
  box-shadow:0 30px 60px -34px rgba(0,26,44,.55),0 2px 6px -2px rgba(0,26,44,.12)}
.vt-bar{display:flex;align-items:center;gap:6px;height:34px;padding:0 14px;background:var(--navy-50);border-bottom:1px solid var(--line)}
.vt-bar i{width:9px;height:9px;border-radius:50%;background:var(--navy-100)}
.vt-bar span{margin-inline-start:12px;flex:0 1 280px;height:22px;border-radius:6px;background:var(--surface);border:1px solid var(--line);
  font:500 12px/20px var(--font-mono);color:var(--soft);padding:0 10px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.vt-browser img,.vt-win img,.vt-phone img{display:block;width:100%;height:auto}
.vt-ult{display:inline-block;vertical-align:2px;margin-inline-start:6px;padding:1px 8px;border-radius:999px;background:var(--navy-50);
  border:1px solid var(--navy-100);color:var(--navy-700);font:600 11.5px/18px var(--font-body);font-style:normal;letter-spacing:.01em}

/* Devices band */
.vt-devices{display:grid;gap:28px;grid-template-columns:1fr;margin-top:8px}
.vt-d{margin:0;display:flex;flex-direction:column;gap:14px}
.vt-d figcaption b{display:block;font:700 22px/1.1 var(--font-display);color:#fff}
.vt-d figcaption span{display:block;margin-top:4px;font:400 15px/1.55 var(--font-body);color:var(--navy-100);max-width:38ch}
.vt-win{border-radius:10px;overflow:hidden;border:1px solid rgba(255,255,255,.14);box-shadow:0 30px 60px -30px rgba(0,0,0,.7)}
.vt-dev .vt-browser{border-color:rgba(255,255,255,.14);box-shadow:0 30px 60px -30px rgba(0,0,0,.7)}
.vt-phone{width:min(240px,62vw);border:9px solid #0a1620;border-radius:34px;overflow:hidden;background:#0a1620;
  box-shadow:0 0 0 1px rgba(255,255,255,.16),0 30px 60px -28px rgba(0,0,0,.75)}
.vt-note{margin-top:26px;font:400 14px/1.5 var(--font-body);color:var(--navy-100)}
@media(min-width:960px){
  .vt-devices{grid-template-columns:1.05fr 1.6fr auto;align-items:end;gap:36px}
  .vt-d--app{padding-bottom:40px}
  .vt-phone{width:230px}
}

/* Admin panel tabs */
.vt-panel{background:var(--alt);border-block:1px solid var(--line)}
.vt-tabs{display:grid;gap:22px;grid-template-columns:1fr}
.vt-tablist{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin-inline:-4px;padding:4px}
.vt-tablist::-webkit-scrollbar{display:none}
.vt-tablist [role=tab]{flex:0 0 auto;text-align:start;cursor:pointer;background:var(--surface);border:1px solid var(--line);
  border-radius:999px;padding:9px 16px;color:var(--ink);font:inherit}
.vt-tablist [role=tab] b{font:600 15px/1.3 var(--font-body);white-space:nowrap}
.vt-tablist [role=tab] > span{display:none}
.vt-tablist [role=tab][aria-selected=true]{background:var(--navy-900);border-color:var(--navy-900);color:#fff}
.vt-tablist [role=tab][aria-selected=true] .vt-ult{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.25);color:#fff}
.vt-tablist [role=tab]:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.vt-shot figure{margin:0}
.vt-shot figcaption{padding:14px 18px;border-top:1px solid var(--line);font:400 15px/1.55 var(--font-body);color:var(--mute)}
@media(min-width:960px){
  .vt-tabs{grid-template-columns:minmax(260px,330px) 1fr;gap:32px;align-items:start}
  .vt-tablist{flex-direction:column;gap:2px;overflow:visible;margin:0;padding:0;border-inline-start:1px solid var(--line)}
  .vt-tablist [role=tab]{background:none;border:0;border-inline-start:3px solid transparent;margin-inline-start:-2px;border-radius:0;padding:14px 18px}
  .vt-tablist [role=tab] > span{display:block;margin-top:4px;font:400 14.5px/1.5 var(--font-body);color:var(--mute)}
  .vt-tablist [role=tab]:hover b{color:var(--teal-ink)}
  .vt-tablist [role=tab][aria-selected=true]{background:var(--surface);border-inline-start-color:var(--teal);color:var(--ink);
    box-shadow:0 10px 24px -18px rgba(0,26,44,.5)}
  .vt-tablist [role=tab][aria-selected=true] .vt-ult{background:var(--navy-50);border-color:var(--navy-100);color:var(--navy-700)}
  .vt-shot figcaption{display:none}
}

/* Organisation security settings */
.vt-sec-grid{display:grid;gap:28px;grid-template-columns:1fr}
.vt-sec-shot{max-width:440px}
/* The settings card is tall; on narrow screens show its top rows only so the list below stays in reach. */
@media(max-width:1099px){.vt-sec-shot img{height:420px;object-fit:cover;object-position:top}}
.vt-rows{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;border-top:1px solid var(--line)}
.vt-rows li{padding:18px 0;border-bottom:1px solid var(--line)}
.vt-rows h3{font:700 21px/1.15 var(--font-display);color:var(--ink);margin:0}
.vt-rows p{margin:6px 0 0;font:400 15.5px/1.6 var(--font-body);color:var(--mute);max-width:52ch}
.vt-more{margin-top:20px}
@media(min-width:760px){
  .vt-rows{grid-template-columns:1fr 1fr;column-gap:36px}
}
@media(min-width:1100px){
  .vt-sec-grid{grid-template-columns:minmax(300px,400px) 1fr;gap:56px;align-items:start}
  .vt-sec-shot{position:sticky;top:96px}
}

/* "1 2" page numbers, same idea as elpo.com.tr PageNumbers */
.pg-num{display:flex;justify-content:center;gap:6px;padding:26px 16px 30px;background:var(--bone)}
.pg-num a,.pg-num span{min-width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;
  font:600 16px/1 var(--font-body);color:var(--navy-700);text-decoration:none}
.pg-num span[aria-current]{background:var(--navy-900);color:#fff}
.pg-num a:hover{background:var(--navy-50)}
.pg-num a:focus-visible{outline:2px solid var(--teal);outline-offset:2px}