:root{
  --p-bg:#0b1220;
  --p-card:#0f1a30;
  --p-card2:#111f3b;
  --p-line:rgba(255,255,255,.10);
  --p-text:#eaf1ff;
  --p-muted:rgba(234,241,255,.68);
  --p-ac1:#7faaff;
  --p-ac2:#9bbcff;
  --p-good:#34c759;
  --p-warn:#ffb020;
  --p-bad:#ff4d6d;
  --p-shadow: 0 18px 55px rgba(0,0,0,.45);
  --p-r:18px;
  --p-font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family:var(--p-font);
  color:var(--p-text);
  background:
    radial-gradient(1200px 600px at 20% -10%, rgba(127,170,255,.45), transparent 60%),
    radial-gradient(900px 500px at 100% 10%, rgba(155,188,255,.35), transparent 55%),
    linear-gradient(180deg, #060b14 0%, #0b1220 45%, #070b12 100%);
  min-height:100vh;
}
a{color:inherit}
.hidden{display:none !important}
.pWrap{max-width:1160px;margin:0 auto;padding:22px 18px 34px}
.pTop{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:14px 16px;border:1px solid var(--p-line);
  border-radius:var(--p-r); background:rgba(15,26,48,.65);
  box-shadow:var(--p-shadow);
  backdrop-filter: blur(10px);
}
.pBrand{display:flex;align-items:center;gap:12px}
.pLogo{
  width:44px;height:44px;border-radius:16px;
  background:linear-gradient(135deg,var(--p-ac1),rgba(255,255,255,.18));
  box-shadow:0 18px 35px rgba(127,170,255,.22);
}
.pTitle{display:flex;flex-direction:column;gap:2px}
.pTitle b{font-size:14px;letter-spacing:.2px}
.pTitle span{font-size:12px;color:var(--p-muted)}
.pActions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pBtn{
  border:1px solid var(--p-line);
  background:rgba(17,31,59,.65);
  color:var(--p-text);
  border-radius:14px;
  padding:10px 12px;
  cursor:pointer;
  display:inline-flex;align-items:center;gap:8px;
  box-shadow:0 10px 22px rgba(0,0,0,.28);
  user-select:none;
  transition: transform .06s ease, background .15s ease, border-color .15s ease;
}
.pBtn:hover{transform:translateY(-1px);border-color:rgba(255,255,255,.18)}
.pBtn:active{transform:translateY(0)}
.pBtn.primary{background:linear-gradient(135deg,var(--p-ac1),var(--p-ac2));border-color:transparent;color:#091225;font-weight:800}
.pBtn.ghost{background:transparent;box-shadow:none}
.pGrid{display:grid;grid-template-columns:1.3fr .7fr;gap:14px;margin-top:16px}
@media(max-width:980px){.pGrid{grid-template-columns:1fr}}
.pCard{
  border:1px solid var(--p-line);
  background:rgba(15,26,48,.62);
  border-radius:calc(var(--p-r) + 2px);
  box-shadow:var(--p-shadow);
  overflow:hidden;
  backdrop-filter: blur(10px);
}
.pCardH{
  padding:14px 16px;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:linear-gradient(135deg, rgba(127,170,255,.18), rgba(255,255,255,.03));
  border-bottom:1px solid rgba(255,255,255,.10);
}
.pCardH .h1{font-weight:900}
.pCardH .h2{font-size:12px;color:var(--p-muted)}
.pCardB{padding:14px 16px}
.pModList{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media(max-width:640px){.pModList{grid-template-columns:1fr}}
.pMod{
  border:1px solid rgba(255,255,255,.10);
  background:rgba(17,31,59,.70);
  border-radius:18px;
  padding:14px;
  cursor:pointer;
  transition: transform .07s ease, border-color .15s ease, background .15s ease;
}
.pMod:hover{transform:translateY(-2px);border-color:rgba(155,188,255,.45);background:rgba(17,31,59,.80)}
.pMod .k{display:flex;align-items:center;justify-content:space-between;gap:10px}
.pMod .k b{font-size:16px}
.pMod .d{margin-top:6px;color:var(--p-muted);font-size:12px;line-height:1.35}
.pTag{font-size:11px;padding:6px 10px;border:1px solid rgba(255,255,255,.14);border-radius:999px;color:var(--p-muted)}
.pSetList{display:flex;flex-direction:column;gap:10px}
.pRow{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.pRow .lbl{display:flex;flex-direction:column;gap:2px}
.pRow .lbl b{font-size:13px}
.pRow .lbl span{font-size:12px;color:var(--p-muted)}
.pMini{font-size:12px;color:var(--p-muted)}
/* stage */
#stage{
  position:fixed; inset:0;
  background:rgba(0,0,0,.55);
  display:flex; flex-direction:column;
  z-index:40;
}
#stage.hidden{display:none !important}
.stageTop{
  padding:14px 14px 10px 14px;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
}
.stageTop .left{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.stageTop .right{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.stagePill{
  border:1px solid rgba(255,255,255,.14);
  background:rgba(15,26,48,.78);
  border-radius:999px;
  padding:10px 12px;
  font-size:12px;
  color:var(--p-muted);
  display:flex;align-items:center;gap:8px;
  backdrop-filter: blur(10px);
}
.stageBox{
  flex:1;
  margin:0 14px 14px 14px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:18px;
  overflow:hidden;
  box-shadow:var(--p-shadow);
  background:#0b1220;
}
.stageFrame{width:100%;height:100%;border:0;display:none}
.stageFrame.active{display:block}
/* portal modal */
#portalModal{
  position:fixed; inset:0;
  background:rgba(0,0,0,.58);
  display:flex; align-items:center; justify-content:center;
  padding:18px;
  z-index:60;
}
.modalBox{
  width:min(1100px, 100%);
  background:rgba(15,26,48,.92);
  border:1px solid rgba(255,255,255,.12);
  border-radius:22px;
  box-shadow:0 30px 80px rgba(0,0,0,.55);
  overflow:hidden;
  backdrop-filter: blur(12px);
}
.modalHead{
  padding:14px 16px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:linear-gradient(135deg, rgba(127,170,255,.18), rgba(255,255,255,.04));
  border-bottom:1px solid rgba(255,255,255,.12);
}
.modalHead .t{display:flex; flex-direction:column; gap:2px}
.modalHead .t b{font-size:14px}
.modalHead .t span{font-size:12px;color:var(--p-muted)}
.modalBody{padding:14px 16px; max-height:72vh; overflow:auto}
.modalFoot{padding:12px 16px;border-top:1px solid rgba(255,255,255,.12);display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
.tabRow{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.pTab{
  border:1px solid rgba(255,255,255,.12);
  background:rgba(17,31,59,.72);
  color:var(--p-text);
  border-radius:999px;
  padding:8px 12px;
  cursor:pointer;
  font-weight:700;
  font-size:12px;
}
.pTab.active{
  background:linear-gradient(135deg, rgba(127,170,255,.35), rgba(155,188,255,.15));
  border-color:rgba(155,188,255,.40);
}
.formGrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:900px){.formGrid{grid-template-columns:1fr}}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:12px;color:var(--p-muted)}
.ctrl{
  border:1px solid rgba(255,255,255,.14);
  background:rgba(17,31,59,.66);
  color:var(--p-text);
  border-radius:14px;
  padding:10px 12px;
  outline:none;
}
.ctrl:focus{border-color:rgba(155,188,255,.6); box-shadow:0 0 0 4px rgba(127,170,255,.16)}
.tableWrap{border:1px solid rgba(255,255,255,.12);border-radius:18px;overflow:auto;background:rgba(17,31,59,.45)}
table{width:100%;border-collapse:separate;border-spacing:0}
th,td{padding:10px 10px;border-bottom:1px solid rgba(255,255,255,.10);vertical-align:top}
th{font-size:12px;color:var(--p-muted);text-align:left;background:rgba(17,31,59,.55);position:sticky;top:0}
td{font-size:13px}
.tBtns{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.small{font-size:12px;color:var(--p-muted)}
.warn{color:var(--p-warn)}
.good{color:var(--p-good)}
.bad{color:var(--p-bad)}
.hr{height:1px;background:rgba(255,255,255,.10);margin:12px 0}
.embedBox{
  border:1px solid rgba(255,255,255,.12);
  border-radius:18px;
  overflow:hidden;
  height:520px;
  background:#0b1220;
}
.embedFrame{width:100%;height:100%;border:0}

/* ===========================
   iOS / Cupertino Portal Theme
   (only affects this portal container)
   =========================== */

:root{
  --p-bg:#f7f8fd;
  --p-card: rgba(255,255,255,.62);
  --p-card2: rgba(255,255,255,.78);
  --p-line: rgba(17,24,39,.14);
  --p-line2: rgba(17,24,39,.18);
  --p-text:#0b1220;
  --p-muted:#6b7280;
  --p-ac1:#3b82f6;
  --p-ac2:#6366f1;
  --p-good:#34c759;
  --p-warn:#ff9500;
  --p-bad:#ff3b30;
  --p-shadow:0 18px 55px rgba(15,23,42,.10);
  --p-r:20px;
  --p-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
}

html, body{
  background:linear-gradient(180deg, #f7f8fd 0%, #eef1ff 55%, #f7f8fd 100%) !important;
  color:var(--p-text) !important;
}

.pWrap{max-width:1180px;}

.pTop{
  background:var(--p-card) !important;
  border-color:var(--p-line) !important;
  box-shadow:var(--p-shadow) !important;
  backdrop-filter: blur(16px) saturate(1.25);
}

.pLogo{
  border-radius:16px;
  background:
    radial-gradient(120% 120% at 20% 10%, rgba(255,255,255,.85), rgba(255,255,255,0) 55%),
    linear-gradient(135deg, rgba(59,130,246,.95), rgba(99,102,241,.55));
  box-shadow:0 18px 35px rgba(59,130,246,.18);
}

.pTitle span{color:var(--p-muted) !important;}

.pBtn{
  background:var(--p-card2) !important;
  border-color:var(--p-line) !important;
  color:var(--p-text) !important;
  box-shadow:0 10px 22px rgba(15,23,42,.08) !important;
}
.pBtn:hover{border-color:rgba(59,130,246,.28) !important;}
.pBtn.primary{
  background:
    radial-gradient(120% 160% at 25% 15%, rgba(255,255,255,.55), rgba(255,255,255,0) 45%),
    linear-gradient(135deg, rgba(59,130,246,.92), rgba(99,102,241,.78)) !important;
  color:#071124 !important;
  box-shadow:0 16px 34px rgba(59,130,246,.20) !important;
}
.pBtn.ghost{
  background:transparent !important;
  box-shadow:none !important;
}

.pCard{
  background:var(--p-card) !important;
  border-color:var(--p-line) !important;
  box-shadow:var(--p-shadow) !important;
  backdrop-filter: blur(16px) saturate(1.25);
}
.pCardH{
  background:linear-gradient(135deg, #edf4ff, #f7faff) !important;
  border-bottom:1px solid var(--p-line) !important;
}
.pTag{
  border-color:var(--p-line2) !important;
  color:var(--p-muted) !important;
  background:rgba(255,255,255,.55);
}

.pMod{
  border-color:var(--p-line) !important;
  background:rgba(255,255,255,.72) !important;
  box-shadow:0 12px 28px rgba(15,23,42,.08);
  backdrop-filter: blur(14px) saturate(1.25);
}
.pMod:hover{
  border-color:rgba(59,130,246,.30) !important;
  transform:translateY(-1px);
}
.pMod:active{transform:translateY(0);}

.small{color:var(--p-muted) !important;}
.hr{background:rgba(15,23,42,.10) !important;}

.modalBox{
  background:var(--p-card) !important;
  border-color:var(--p-line) !important;
  box-shadow:0 30px 80px rgba(15,23,42,.16) !important;
  backdrop-filter: blur(18px) saturate(1.25);
}
.modalHead{border-bottom:1px solid var(--p-line) !important;}

.pTab{
  border-color:var(--p-line) !important;
  background:rgba(255,255,255,.72) !important;
  color:var(--p-text) !important;
}
.pTab.active{
  background:linear-gradient(135deg, rgba(59,130,246,.18), rgba(99,102,241,.10)) !important;
  border-color:rgba(59,130,246,.32) !important;
}

.ctrl{
  border-color:var(--p-line2) !important;
  background:rgba(255,255,255,.78) !important;
  color:var(--p-text) !important;
}
.ctrl:focus{
  border-color:rgba(59,130,246,.55) !important;
  box-shadow:0 0 0 4px rgba(59,130,246,.16) !important;
}

.tableWrap{
  border-color:var(--p-line) !important;
  background:rgba(255,255,255,.62) !important;
}
th,td{border-bottom-color:rgba(15,23,42,.10) !important;}
th{
  color:var(--p-muted) !important;
  background:rgba(247,248,253,.92) !important;
}

.embedBox{
  border-color:var(--p-line) !important;
  background:rgba(255,255,255,.70) !important;
}

/* ===========================
   Extra Color + iOS Depth (v2)
   =========================== */

/* daha "iOS wallpaper" gibi renkli arka plan */
body{
  background:
    radial-gradient(900px 520px at 12% 8%, rgba(255, 120, 180,.26), transparent 60%),
    radial-gradient(780px 520px at 88% 10%, rgba(120, 190, 255,.26), transparent 58%),
    radial-gradient(920px 620px at 55% 105%, rgba(140, 120, 255,.20), transparent 55%),
    linear-gradient(180deg, #f7f8fd 0%, #eef1ff 55%, #f7f8fd 100%) !important;
}

/* grid: tek kart varsa full genişlik */
.pGrid:has(> :only-child){
  grid-template-columns: 1fr !important;
}

/* kartlarda renkli border + daha "cam" hissi */
.pCard, .pMod, .modalBox, .stagePill, .pTop{
  border:1px solid transparent !important;
  background:
    linear-gradient(var(--p-card), var(--p-card)) padding-box,
    linear-gradient(135deg,
      rgba(59,130,246,.42),
      rgba(236,72,153,.28),
      rgba(34,197,94,.18),
      rgba(99,102,241,.32)
    ) border-box !important;
}

/* kart header'ında küçük parlaklık */
.pCardH{
  position:relative;
}
.pCardH::after{
  content:"";
  position:absolute;
  left:14px; right:14px; top:8px;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(59,130,246,.28), rgba(236,72,153,.18), transparent);
  pointer-events:none;
}

/* modüllere renkli "accent bar" */
.pMod{ position:relative; }
.pMod::before{
  content:"";
  position:absolute;
  left:10px; top:12px; bottom:12px;
  width:5px;
  border-radius:999px;
  background:linear-gradient(180deg, rgba(59,130,246,.95), rgba(99,102,241,.55));
  opacity:.85;
}
.pMod#btnOpenYT::before{
  background:linear-gradient(180deg, rgba(59,130,246,.95), rgba(16,185,129,.55));
}
.pMod#btnOpenCari::before{
  background:linear-gradient(180deg, rgba(236,72,153,.90), rgba(99,102,241,.55));
}

/* modül içeriğini accent bar'a göre biraz sağa al */
.pMod .k, .pMod .d{ padding-left:10px; }

/* iOS buton: daha yumuşak, daha renkli */
.pBtn{
  border-radius:16px !important;
}
.pBtn.primary{
  color:#0b1220 !important;
}

/* stage pill biraz daha "vibrant" */
.stagePill{
  background:
    linear-gradient(rgba(255,255,255,.66), rgba(255,255,255,.66)) padding-box,
    linear-gradient(135deg, rgba(59,130,246,.35), rgba(236,72,153,.22), rgba(16,185,129,.20)) border-box !important;
}