/* ViewPort Studio — Mockup & Web UI Stilleri v1.0
   Gerçekçi cihaz görünümleri, marka isimsiz
   Tüm renkler token'lardan */

/* ═══════════════════════════════════════════════════
   TELEFON MOCKUP
═══════════════════════════════════════════════════ */
.pm-wrap{display:flex;flex-direction:column;align-items:center}
.pm-body{
  position:relative;
  background:linear-gradient(165deg,#1e2538,#131824,#0c1018);
  border-radius:12px;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.07),
    inset 0 1px 0 rgba(255,255,255,.1),
    inset 0 -1px 0 rgba(0,0,0,.4),
    0 8px 24px rgba(0,0,0,.6);
  overflow:visible;
}
/* Kasa iç dolgu efekti */
.pm-body::before{
  content:'';position:absolute;inset:1.5px;border-radius:10.5px;
  background:linear-gradient(165deg,#0f1928,#090f1a,#050a12);
  pointer-events:none;
}
/* Dynamic Island */
.pm-island{
  position:absolute;top:5px;left:50%;transform:translateX(-50%);
  width:60%;max-width:16px;height:4px;
  background:#000;border-radius:99px;z-index:10;
  transition:width .3s ease;
}
/* Hole punch */
.pm-hole{
  position:absolute;top:6px;left:50%;transform:translateX(-50%);
  width:4px;height:4px;border-radius:50%;background:#000;z-index:10;
}
/* Butonlar */
.pm-vol-up{position:absolute;left:-1.5px;top:22%;height:10%;background:linear-gradient(90deg,#1a2235,#2a3450);border-radius:2px 0 0 2px;width:1.5px}
.pm-vol-dn{position:absolute;left:-1.5px;top:36%;height:12%;background:linear-gradient(90deg,#1a2235,#2a3450);border-radius:2px 0 0 2px;width:1.5px}
.pm-pwr  {position:absolute;right:-1.5px;top:30%;height:16%;background:linear-gradient(270deg,#1a2235,#2a3450);border-radius:0 2px 2px 0;width:1.5px}
/* Ekran */
.pm-screen{
  position:absolute;left:2px;right:2px;top:8px;bottom:5px;
  border-radius:9px;overflow:hidden;
  background:linear-gradient(158deg,#0d1e3c 0%,#081428 50%,#04091a 100%);
  display:flex;flex-direction:column;
}
/* Home indicator */
.pm-home-ind{
  position:absolute;bottom:3px;left:50%;transform:translateX(-50%);
  width:35%;height:2px;background:rgba(255,255,255,.22);border-radius:1px;
}
.pm-home-btn{
  position:absolute;bottom:3px;left:50%;transform:translateX(-50%);
  width:10px;height:10px;border-radius:50%;
  border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.04);
}
/* Form varyantları */
.pm-phone-notch-none .pm-screen{top:4px}

/* ═══════════════════════════════════════════════════
   AKILLI SAAT
═══════════════════════════════════════════════════ */
.pm-watch-wrap{display:flex;flex-direction:column;align-items:center}
.pm-band-top{width:55%;height:10px;background:linear-gradient(180deg,#1e2840,#161e30);border-radius:3px 3px 0 0}
.pm-band-bot{width:55%;height:10px;background:linear-gradient(180deg,#161e30,#1e2840);border-radius:0 0 3px 3px}
.pm-watch-sq{
  position:relative;background:linear-gradient(155deg,#1c2135,#0f1525);
  border-radius:30%;
  box-shadow:0 0 0 1px rgba(255,255,255,.07),inset 0 1px 0 rgba(255,255,255,.1),0 6px 18px rgba(0,0,0,.6);
  overflow:visible;
}
.pm-watch-rnd{
  position:relative;background:linear-gradient(155deg,#1c2135,#0f1525);
  border-radius:50%;
  box-shadow:0 0 0 1px rgba(255,255,255,.07),inset 0 1px 0 rgba(255,255,255,.1),0 6px 18px rgba(0,0,0,.6);
  overflow:visible;
}
.pm-crown{position:absolute;right:-2px;top:50%;transform:translateY(-50%);width:2px;height:25%;background:#1e2a3a;border-radius:0 1px 1px 0}
.pm-watch-scr{
  position:absolute;inset:3px;border-radius:inherit;
  background:linear-gradient(135deg,#091525,#05101e);
  overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;
}

/* Watch Face UI */
.wui-wf{display:flex;flex-direction:column;align-items:center;gap:1px}
.wui-wf-time{font-size:7px;font-weight:700;font-family:var(--mono);color:#dde8ff;letter-spacing:-.3px;line-height:1}
.wui-wf-date{font-size:4px;color:#4a6080;font-family:var(--mono)}
.wui-wf-ring{width:70%;height:2px;background:linear-gradient(90deg,var(--blue),var(--cyan));border-radius:1px;opacity:.8;margin-top:1px}
.wui-wf-dots{display:flex;gap:1.5px;margin-top:2px}
.wui-wf-dot{width:2.5px;height:2.5px;border-radius:50%;background:rgba(255,255,255,.12)}
.wui-wf-dot-a{background:var(--green)}
.wui-wf-dot-b{background:var(--blue)}

/* ═══════════════════════════════════════════════════
   KATLANABILIR
═══════════════════════════════════════════════════ */
.pm-fold-wrap{display:flex;align-items:center;justify-content:center}
/* Kapalı dikey */
.pm-fold-cv-tall{
  position:relative;width:22px;height:72px;
  background:linear-gradient(165deg,#1e2538,#0c1018);
  border:1px solid rgba(255,255,255,.08);border-radius:8px;overflow:hidden;
  box-shadow:0 6px 18px rgba(0,0,0,.55);
}
.pm-fold-hinge-v{position:absolute;left:6px;top:0;bottom:0;width:1.5px;background:linear-gradient(180deg,#2a3550,#1a2540,#2a3550)}
.pm-fold-cv-scr{position:absolute;inset:2px 2px 2px 9px;background:linear-gradient(140deg,#0f1e38,#080f1e);border-radius:4px}
/* Kapalı yatay */
.pm-fold-cv-wide{
  display:flex;width:68px;height:32px;
  background:linear-gradient(165deg,#1e2538,#0c1018);
  border:1px solid rgba(255,255,255,.08);border-radius:6px;overflow:hidden;
  box-shadow:0 5px 14px rgba(0,0,0,.55);
}
.pm-fold-cv-left{width:50%;border-right:1.5px solid rgba(77,141,246,.2);background:rgba(255,255,255,.02);display:flex;align-items:flex-end;justify-content:center;padding-bottom:3px}
.pm-fold-cv-right{flex:1;background:linear-gradient(140deg,#0f1e38,#080f1e);display:flex;align-items:center;justify-content:center}
.pm-fold-time{font-size:6px;font-weight:700;font-family:var(--mono);color:#c0d0e8}
.pm-fold-hinge-h{width:60%;height:1.5px;background:linear-gradient(90deg,rgba(77,141,246,.4),rgba(77,141,246,.2))}
/* Açık */
.pm-fold-open{
  display:flex;width:62px;height:74px;
  background:linear-gradient(165deg,#1e2538,#0c1018);
  border:1px solid rgba(255,255,255,.08);border-radius:5px;overflow:hidden;
  box-shadow:0 6px 18px rgba(0,0,0,.55);
}
.pm-fold-panel{flex:1;display:flex;flex-direction:column;padding:3px}
.pm-fold-panel:first-child{border-right:1px solid rgba(77,141,246,.15)}
.pm-fold-panel-inner{display:flex;flex-direction:column;gap:1.5px;width:100%;height:100%}
.pm-fold-line{height:2px;background:rgba(255,255,255,.08);border-radius:.5px}
.pm-fold-hi{background:linear-gradient(90deg,rgba(77,141,246,.5),transparent);width:65%}
.pm-fold-img{flex:1;background:rgba(77,141,246,.05);border-radius:2px;border:1px solid rgba(255,255,255,.04);margin-top:1px}
/* Flip */
.pm-flip{
  display:flex;flex-direction:column;width:28px;height:64px;
  background:linear-gradient(165deg,#1e2538,#0c1018);
  border:1px solid rgba(255,255,255,.08);border-radius:8px;overflow:hidden;
  box-shadow:0 6px 18px rgba(0,0,0,.55);
}
.pm-flip-top{flex:1;background:linear-gradient(140deg,#0f1e38,#080f1e)}
.pm-flip-hinge{height:2px;background:linear-gradient(90deg,rgba(255,255,255,.06),rgba(77,141,246,.2),rgba(255,255,255,.06))}
.pm-flip-bot{height:40%;background:rgba(255,255,255,.03)}

/* ═══════════════════════════════════════════════════
   TABLET
═══════════════════════════════════════════════════ */
.pm-tab-wrap{display:flex;align-items:center;justify-content:center}
.pm-tab-body{
  position:relative;
  background:linear-gradient(155deg,#1a2035,#0f1525);
  border-radius:6px;
  box-shadow:0 0 0 1px rgba(255,255,255,.06),inset 0 1px 0 rgba(255,255,255,.08),0 8px 22px rgba(0,0,0,.55);
}
.pm-tab-cam{position:absolute;top:3px;left:50%;transform:translateX(-50%);width:3px;height:3px;border-radius:50%;background:#090f1a;border:.5px solid rgba(255,255,255,.1)}
.pm-tab-btn{position:absolute;bottom:3px;left:50%;transform:translateX(-50%);width:8px;height:8px;border-radius:50%;border:1px solid rgba(255,255,255,.1);background:#090f1a}
.pm-tab-scr{position:absolute;inset:9px 3px 14px;background:linear-gradient(145deg,#0d1c38,#070e1e);border-radius:3px;overflow:hidden;display:flex;flex-direction:column}

/* ═══════════════════════════════════════════════════
   LAPTOP
═══════════════════════════════════════════════════ */
.pm-lap-wrap{display:flex;flex-direction:column;align-items:center}
.pm-lap-lid{
  position:relative;
  background:linear-gradient(155deg,#1a2035,#0f1525);
  border-radius:4px 4px 0 0;
  box-shadow:0 0 0 1px rgba(255,255,255,.06),inset 0 1px 0 rgba(255,255,255,.08),-4px 6px 16px rgba(0,0,0,.4);
}
.pm-lap-cam{position:absolute;top:2px;left:50%;transform:translateX(-50%);width:2px;height:2px;border-radius:50%;background:#090f1a;border:.5px solid rgba(255,255,255,.1)}
.pm-lap-scr{position:absolute;inset:6px 3px 0;background:linear-gradient(145deg,#0d1c38,#070e1e);border-radius:2px 2px 0 0;overflow:hidden;display:flex;flex-direction:column}
.pm-lap-base{
  background:linear-gradient(180deg,#1a2235,#131c28);
  border-top:none;border-radius:0 0 3px 3px;height:6px;
  box-shadow:0 0 0 1px rgba(255,255,255,.05),0 4px 12px rgba(0,0,0,.4);
  display:flex;align-items:center;justify-content:center;
}
.pm-lap-pad{width:30%;height:3px;background:rgba(255,255,255,.04);border-radius:1px;border:.5px solid rgba(255,255,255,.07)}

/* ═══════════════════════════════════════════════════
   MONİTÖR / TV
═══════════════════════════════════════════════════ */
.pm-mon-wrap{display:flex;flex-direction:column;align-items:center}
.pm-mon-frame{
  position:relative;
  background:linear-gradient(150deg,#1a2035,#0f1525);
  border-radius:5px;
  box-shadow:0 0 0 1.5px rgba(255,255,255,.07),inset 0 1px 0 rgba(255,255,255,.08),0 8px 24px rgba(0,0,0,.65);
}
.pm-mon-cam{position:absolute;top:2px;left:50%;transform:translateX(-50%);width:2px;height:2px;border-radius:50%;background:#090f1a;border:.5px solid rgba(255,255,255,.1)}
.pm-mon-scr{position:absolute;inset:6px 4px 4px;background:linear-gradient(145deg,#0d1c38,#070e1e);border-radius:2px;overflow:hidden;display:flex;flex-direction:column}
.pm-mon-neck{height:8px;background:linear-gradient(180deg,#1a2235,#101820);border:.5px solid rgba(255,255,255,.05);border-top:none}
.pm-mon-foot{height:4px;background:linear-gradient(180deg,#141d2a,#0e1520);border:.5px solid rgba(255,255,255,.05);border-top:none;border-radius:0 0 3px 3px}
/* Ultra-wide */
.pm-uw{border-radius:5px;box-shadow:0 0 0 1.5px rgba(255,255,255,.07),0 8px 24px rgba(0,0,0,.65)}
/* TV */
.pm-tv{border-radius:6px;box-shadow:0 0 0 2px rgba(255,255,255,.05),0 12px 32px rgba(0,0,0,.75)}
.pm-tv-logo{position:absolute;bottom:2px;left:50%;transform:translateX(-50%);width:10px;height:1.5px;background:rgba(255,255,255,.14);border-radius:.5px}
.pm-tv-legs{display:flex;justify-content:space-between;padding:0 8px}
.pm-tv-leg{width:4px;height:7px;background:linear-gradient(180deg,#1a2235,#0e1520);border:.5px solid rgba(255,255,255,.06);border-top:none;border-radius:0 0 2px 2px}
/* Notification lines */
.pm-notif-lines{padding:4px;display:flex;flex-direction:column;gap:2px}
.pm-notif-ln{height:2px;background:rgba(255,255,255,.08);border-radius:.5px}
.pm-notif-ln:nth-child(2){width:75%}
.pm-notif-ln:nth-child(3){width:60%}

/* ═══════════════════════════════════════════════════
   WEB UI SİMÜLASYONU (tüm cihaz tipleri)
═══════════════════════════════════════════════════ */
.wui{display:flex;flex-direction:column;height:100%;width:100%}

/* Browser / Status bar */
.wui-bar{flex-shrink:0;display:flex;align-items:center;gap:2px;padding:2px 3px;background:rgba(0,0,0,.2);border-bottom:1px solid rgba(255,255,255,.04)}
/* Traffic lights */
.wui-tl{display:flex;gap:1.5px;margin-right:2px}
.wui-dot{width:3px;height:3px;border-radius:50%}
.wui-dot-r{background:#ff5f57}.wui-dot-y{background:#febc2e}.wui-dot-g{background:#28c840}
/* URL / Tab bar */
.wui-tab{flex:.8;height:5px;background:rgba(255,255,255,.06);border-radius:1.5px 1.5px 0 0;border:1px solid rgba(255,255,255,.06);border-bottom:none}
.wui-url{flex:2;height:4px;background:rgba(255,255,255,.06);border-radius:2px;border:1px solid rgba(255,255,255,.05)}
.wui-act{width:5px;height:5px;border-radius:1px;background:rgba(255,255,255,.06)}

/* Status bar */
.wui-status{display:flex;align-items:center;justify-content:space-between;width:100%;padding:0 2px}
.wui-time{font-size:5px;font-weight:700;font-family:var(--mono);color:#c0d0e8;letter-spacing:.1px}
.wui-icons{display:flex;align-items:center;gap:2px}
.wui-sig{display:flex;align-items:flex-end;gap:.5px;height:5px}
.wui-sig-b{width:1.5px;background:#9bafd0;border-radius:.5px}
.wui-batt{width:7px;height:4px;border:1px solid #9bafd0;border-radius:1px;position:relative}
.wui-batt::before{content:'';position:absolute;right:-2px;top:50%;transform:translateY(-50%);width:1px;height:2px;background:#9bafd0;border-radius:0 .5px .5px 0}
.wui-batt::after{content:'';position:absolute;left:.5px;top:.5px;bottom:.5px;width:65%;background:#4ade80;border-radius:.5px}

/* Nav bar */
.wui-nav{flex-shrink:0;display:flex;align-items:center;gap:2px;padding:2px 4px;border-bottom:1px solid rgba(255,255,255,.04)}
.wui-logo{width:12px;height:4px;background:rgba(255,255,255,.12);border-radius:.5px}
.wui-nav-links{flex:1;display:flex;gap:2px;justify-content:center}
.wui-nav-lnk{height:3px;width:10px;background:rgba(255,255,255,.08);border-radius:.5px}
.wui-nav-lnk-on{background:rgba(77,141,246,.4)}
.wui-nav-cta{width:12px;height:4px;background:linear-gradient(90deg,#4d8df6,#2dd4e8);border-radius:.5px;opacity:.8}
/* Hamburger (phone) */
.wui-hbg{display:flex;flex-direction:column;gap:1.5px;width:8px}
.wui-hbg-ln{height:1.5px;background:rgba(255,255,255,.2);border-radius:.5px}

/* Hero */
.wui-hero{flex-shrink:0;display:flex;align-items:center;gap:3px;padding:3px 4px;background:linear-gradient(135deg,rgba(77,141,246,.06),rgba(45,212,232,.03));border-bottom:1px solid rgba(255,255,255,.04)}
.wui-hero-txt{flex:1;display:flex;flex-direction:column;gap:1.5px}
.wui-eyebrow{height:2px;width:25%;background:rgba(77,141,246,.3);border-radius:.5px}
.wui-h1{display:flex;flex-direction:column;gap:1.5px}
.wui-h1-ln{height:3px;background:rgba(255,255,255,.18);border-radius:.5px}
.wui-h1-ln.wui-grad{background:linear-gradient(90deg,#4d8df6,#2dd4e8);width:65%;opacity:.9}
.wui-sub{display:flex;flex-direction:column;gap:1px;margin-top:.5px}
.wui-sub-ln{height:2px;background:rgba(255,255,255,.07);border-radius:.5px}
.wui-sub-ln:nth-child(2){width:80%}
.wui-cta{height:4px;width:32px;background:linear-gradient(90deg,#4d8df6,#2dd4e8);border-radius:99px;margin-top:1px;opacity:.9}
.wui-hero-img{width:22%;background:rgba(77,141,246,.07);border-radius:2px;border:1px solid rgba(255,255,255,.05);align-self:stretch}

/* Content */
.wui-content{flex:1;padding:3px 4px;display:flex;flex-direction:column;gap:2px}
.wui-sec-lbl{height:2px;width:20px;background:rgba(255,255,255,.08);border-radius:.5px}
.wui-grid{display:grid;gap:1.5px;flex:1}
.wui-card{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.05);border-radius:1.5px;padding:1.5px;display:flex;gap:1.5px;align-items:flex-start}
.wui-ico{width:5px;height:5px;border-radius:.5px;flex-shrink:0}
.wui-ico-blue{background:rgba(77,141,246,.4)}
.wui-ico-green{background:rgba(32,201,151,.4)}
.wui-ico-purple{background:rgba(139,92,246,.4)}
.wui-ico-amber{background:rgba(245,158,11,.4)}
.wui-card-lines{flex:1;display:flex;flex-direction:column;gap:1px}
.wui-card-ln{height:2px;background:rgba(255,255,255,.1);border-radius:.5px}
.wui-card-ln-s{width:60%}

/* Phone-specific content */
.wui-ph-cards{display:flex;gap:1.5px;padding:2px 3px;flex-shrink:0}
.wui-ph-card{flex:1;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.05);border-radius:2px;padding:2px;display:flex;gap:1.5px;align-items:center}
.wui-home-ind{margin:2px auto;width:35%;height:2px;background:rgba(255,255,255,.18);border-radius:1px;flex-shrink:0}