/* ═══════════════════════════════════════════════════════════════
   UNIFIED POPUP SYSTEM v3 — 6 belirgin farklı tasarım
   Body üzerinde data-popup-style="1..6"
   Yapı: .sp-modal (overlay) > .sp-modal-backdrop + .sp-modal-panel
   Auto-detected: .sp-auto-modal (overlay) + .sp-auto-panel (inner)
   ═══════════════════════════════════════════════════════════════ */

/* ─── 1. Overlay (ekranı kaplar, GRID ile MERKEZLEME) ───
   display:grid + place-items:center → çocuğu güvenilir şekilde ortalar.
   Sidebar backdrop'ları hariç tut (mobil menü overlay'i). */
.sp-modal,
.sp-auto-modal,
body [id$="-modal"]:not([class*="sidebar"]):not([id*="sidebar"]),
body [id$="-overlay"]:not([class*="sidebar"]):not([id*="sidebar"]):not([class*="nav-overlay"]),
body [id^="sp-"][id*="modal"],
body .sp-arm,
body .modal-overlay:not([class*="sidebar"]){
  position:fixed!important;
  top:0!important; left:0!important; right:0!important; bottom:0!important;
  width:100vw!important; height:100vh!important;
  z-index:999999!important;
  place-items:center!important;
  place-content:center!important;
  padding:20px!important;
  box-sizing:border-box!important;
  margin:0!important;
  overflow:auto!important;
}

/* VARSAYILAN GİZLİ — açıkken grid-center */
.sp-modal,
.sp-auto-modal{display:none}

/* Görünürlük tetikleyicileri — display:grid ile hem yatay hem dikey center */
.sp-modal.open,
.sp-auto-modal.is-active,
.sp-arm.open{display:grid!important}

/* Inline style="display:block|flex" durumunu grid'e çevir (sidebar hariç) */
body [id$="-modal"]:not([class*="sidebar"]):not([id*="sidebar"])[style*="display:block"],
body [id$="-modal"]:not([class*="sidebar"]):not([id*="sidebar"])[style*="display: block"],
body [id$="-modal"]:not([class*="sidebar"]):not([id*="sidebar"])[style*="display:flex"],
body [id$="-modal"]:not([class*="sidebar"]):not([id*="sidebar"])[style*="display: flex"],
body [id$="-overlay"]:not([class*="sidebar"]):not([id*="sidebar"])[style*="display:block"],
body [id$="-overlay"]:not([class*="sidebar"]):not([id*="sidebar"])[style*="display: block"],
body [id$="-overlay"]:not([class*="sidebar"]):not([id*="sidebar"])[style*="display:flex"],
body [id$="-overlay"]:not([class*="sidebar"]):not([id*="sidebar"])[style*="display: flex"],
body .sp-auto-modal[style*="display:block"],
body .sp-auto-modal[style*="display: block"],
body .sp-auto-modal[style*="display:flex"],
body .sp-auto-modal[style*="display: flex"]{display:grid!important}

/* Kapalı durumu koru */
body [id$="-modal"][style*="display:none"],
body [id$="-modal"][style*="display: none"],
body [id$="-overlay"][style*="display:none"],
body [id$="-overlay"][style*="display: none"]{display:none!important}

.sp-modal-backdrop{
  position:absolute!important;
  inset:0!important;
  background:rgba(15,23,42,.6);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  cursor:pointer;
  z-index:1;
}

/* ─── 2. Panel (grid-child olarak OTOMATIK merkezlenir) ───
   Grid parent + place-items:center → panel width'i ne olursa olsun ortalanır */
.sp-modal-panel,
.sp-auto-panel,
body [id$="-modal"]:not([class*="sidebar"]):not([id*="sidebar"]) > div:not(.sp-modal-backdrop):not([onclick*="event.target"]):not([style*="position:absolute"]):not([style*="position: absolute"]):not([style*="background:rgba(0,0,0"]):not([style*="background: rgba(0, 0, 0"]),
body [id$="-overlay"]:not([class*="sidebar"]):not([id*="sidebar"]) > div:not(.sp-modal-backdrop):not([onclick*="event.target"]):not([style*="position:absolute"]):not([style*="position: absolute"]):not([style*="background:rgba(0,0,0"]):not([style*="background: rgba(0, 0, 0"]){
  position:relative!important;
  z-index:2!important;
  /* margin:auto gerek yok — grid parent zaten ortalar */
  margin:0!important;
  width:auto!important; /* content-width */
  max-width:min(720px, 100%)!important;
  max-height:min(90vh, 800px)!important;
  overflow:auto!important;
  box-sizing:border-box!important;
  justify-self:center!important;
  align-self:center!important;
  animation:spPanelIn .32s cubic-bezier(.22,1.1,.4,1);
}

/* Uniform modal panel görünümü (renk/bg — sadece .sp-modal-panel/.sp-auto-panel) */
.sp-modal-panel,
.sp-auto-panel{
  background:var(--white,#fff);
  color:var(--text,#1e1e3a);
  min-width:min(480px, 90vw)!important; /* çok dar olmasın */
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

/* ─── 3. İç yapı ─── */
.sp-modal-head{
  display:flex;
  align-items:flex-start;
  gap:14px;
  padding:22px 26px 16px;
  flex-shrink:0;
}
.sp-modal-icon{
  width:52px;height:52px;
  display:flex;align-items:center;justify-content:center;
  font-size:24px;flex-shrink:0;
  color:#fff;
}
.sp-modal-head-text{flex:1;min-width:0}
.sp-modal-head h3{
  margin:0 0 6px;
  font-size:20px;font-weight:900;
  color:var(--text,#1e1e3a);
  line-height:1.3;
}
.sp-modal-head p{
  margin:0;font-size:13px;
  color:var(--tl,#64748b);
  line-height:1.5;
}
.sp-modal-close{
  background:var(--bg2,#f1f5f9);
  border:none;
  width:38px;height:38px;
  cursor:pointer;
  color:var(--tl,#64748b);
  font-size:16px;
  flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  transition:all .2s;
}
.sp-modal-close:hover{background:#fee2e2;color:#ef4444}

.sp-modal-body{
  padding:8px 26px 22px;
  overflow-y:auto;
  flex:1;
  font-size:14px;
  line-height:1.7;
}
.sp-modal-body h3{font-size:16px;font-weight:900;margin:18px 0 10px}
.sp-modal-body h3:first-child{margin-top:0}
.sp-modal-body ol{padding-left:0;counter-reset:item;list-style:none;margin:0}
.sp-modal-body ol li{
  counter-increment:item;
  position:relative;
  padding:10px 0 10px 40px;
  border-bottom:1px dashed var(--brd,#e2e8f0);
}
.sp-modal-body ol li:last-child{border-bottom:none}
.sp-modal-body ol li::before{
  content:counter(item);
  position:absolute;
  left:0;top:10px;
  width:28px;height:28px;
  color:#fff;font-weight:800;font-size:12px;
  display:flex;align-items:center;justify-content:center;
}

.sp-modal-foot{
  padding:16px 26px 22px;
  display:flex;
  justify-content:flex-end;
  gap:10px;
  flex-shrink:0;
  flex-wrap:wrap;
}
.sp-modal-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:12px 26px;
  color:#fff;
  border:none;
  font-weight:800;
  font-size:14px;
  cursor:pointer;
  transition:all .2s;
  font-family:inherit;
  line-height:1;
  white-space:nowrap;
}
.sp-modal-btn-ghost{
  background:var(--bg2,#f1f5f9);
  color:var(--text,#1e1e3a);
}
.sp-modal-btn-ghost:hover{background:var(--bg,#e2e8f0)}

@keyframes spOverlayIn{from{opacity:0}to{opacity:1}}
@keyframes spPanelIn{from{opacity:0;transform:scale(.9) translateY(20px)}to{opacity:1;transform:scale(1) translateY(0)}}

/* Dark mode */
[data-theme="dark"] .sp-modal-panel,
[data-theme="dark"] .sp-auto-panel{background:#1e293b;color:#e2e8f0}
[data-theme="dark"] .sp-modal-head h3{color:#f1f5f9}
[data-theme="dark"] .sp-modal-body ol li{border-color:#334155}
[data-theme="dark"] .sp-modal-close{background:#334155;color:#94a3b8}
[data-theme="dark"] .sp-modal-btn-ghost{background:#334155;color:#e2e8f0}

/* Mobile */
@media (max-width:600px){
  .sp-modal,.sp-auto-modal{padding:12px!important}
  .sp-modal-panel,.sp-auto-panel{max-height:94vh}
  .sp-modal-head{padding:18px 18px 12px}
  .sp-modal-body{padding:4px 18px 16px}
  .sp-modal-foot{padding:12px 18px 18px}
  .sp-modal-head h3{font-size:17px}
  .sp-modal-icon{width:44px;height:44px;font-size:20px}
}

/* ═══════════════════════════════════════════════════════════════
   STYLE 1: MODERN GRADIENT (Varsayılan)
   Yuvarlatılmış 20px, primary gradient ikon, gradient buton
   ═══════════════════════════════════════════════════════════════ */
body[data-popup-style="1"] .sp-modal-panel,
body[data-popup-style="1"] .sp-auto-panel{
  border-radius:20px!important;
  box-shadow:0 40px 80px rgba(0,0,0,.35)!important;
  border:none!important;
}
body[data-popup-style="1"] .sp-modal-backdrop{background:rgba(15,23,42,.6);backdrop-filter:blur(4px)}
body[data-popup-style="1"] .sp-modal-head{
  background:linear-gradient(135deg,rgba(var(--p-r,108),var(--p-g,99),var(--p-b,255),.1),rgba(var(--p-r,108),var(--p-g,99),var(--p-b,255),.02));
  border-bottom:1px solid var(--brd,#e2e8f0);
}
body[data-popup-style="1"] .sp-modal-icon{
  border-radius:14px;
  background:linear-gradient(135deg,var(--p),var(--pd,var(--p)));
  box-shadow:0 10px 22px rgba(var(--p-r,108),var(--p-g,99),var(--p-b,255),.4);
}
body[data-popup-style="1"] .sp-modal-close{border-radius:10px}
body[data-popup-style="1"] .sp-modal-body ol li::before{
  border-radius:50%;
  background:linear-gradient(135deg,var(--p),var(--pd,var(--p)));
}
body[data-popup-style="1"] .sp-modal-body strong{color:var(--p)}
body[data-popup-style="1"] .sp-modal-foot{border-top:1px solid var(--brd,#e2e8f0)}
body[data-popup-style="1"] .sp-modal-btn{
  border-radius:12px;
  background:linear-gradient(135deg,var(--p),var(--pd,var(--p)));
  box-shadow:0 6px 18px rgba(var(--p-r,108),var(--p-g,99),var(--p-b,255),.35);
}
body[data-popup-style="1"] .sp-modal-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 28px rgba(var(--p-r,108),var(--p-g,99),var(--p-b,255),.5);
}
body[data-popup-style="1"] .sp-modal-btn-ghost{
  background:var(--bg2,#f1f5f9);
  color:var(--text,#1e1e3a);
  box-shadow:none;
}

/* ═══════════════════════════════════════════════════════════════
   STYLE 2: MINIMAL CLEAN — Tamamen keskin köşeler, ince çizgiler
   ═══════════════════════════════════════════════════════════════ */
body[data-popup-style="2"] .sp-modal-panel,
body[data-popup-style="2"] .sp-auto-panel{
  border-radius:0!important;
  border:1px solid var(--brd,#e2e8f0)!important;
  box-shadow:0 12px 48px rgba(0,0,0,.18)!important;
}
body[data-popup-style="2"] .sp-modal-backdrop{background:rgba(15,23,42,.75)}
body[data-popup-style="2"] .sp-modal-head{
  background:var(--bg2,#f8fafc);
  border-bottom:2px solid var(--p);
}
body[data-popup-style="2"] .sp-modal-icon{
  border-radius:0;
  background:var(--p);
  color:#fff;
}
body[data-popup-style="2"] .sp-modal-close{border-radius:0}
body[data-popup-style="2"] .sp-modal-body ol li::before{
  border-radius:0;
  background:var(--p);
}
body[data-popup-style="2"] .sp-modal-foot{border-top:1px solid var(--brd,#e2e8f0)}
body[data-popup-style="2"] .sp-modal-btn{
  border-radius:0;
  background:var(--p);
  box-shadow:none;
  text-transform:uppercase;
  letter-spacing:.5px;
  font-size:13px;
}
body[data-popup-style="2"] .sp-modal-btn:hover{background:var(--pd,var(--p));transform:none}
body[data-popup-style="2"] .sp-modal-btn-ghost{background:transparent;color:var(--text);border:1px solid var(--brd)}

/* ═══════════════════════════════════════════════════════════════
   STYLE 3: GLASSMORPHISM — Şeffaf buzlu cam
   ═══════════════════════════════════════════════════════════════ */
body[data-popup-style="3"] .sp-modal-backdrop{
  background:rgba(15,23,42,.3)!important;
  backdrop-filter:blur(18px) saturate(160%)!important;
  -webkit-backdrop-filter:blur(18px) saturate(160%)!important;
}
body[data-popup-style="3"] .sp-modal-panel,
body[data-popup-style="3"] .sp-auto-panel{
  background:rgba(255,255,255,.75)!important;
  backdrop-filter:blur(30px) saturate(150%)!important;
  -webkit-backdrop-filter:blur(30px) saturate(150%)!important;
  border:1.5px solid rgba(255,255,255,.5)!important;
  border-radius:24px!important;
  box-shadow:0 30px 80px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.6)!important;
}
body[data-popup-style="3"] .sp-modal-head{background:transparent;border-bottom:1px solid rgba(255,255,255,.3)}
body[data-popup-style="3"] .sp-modal-icon{
  background:rgba(var(--p-r,108),var(--p-g,99),var(--p-b,255),.25);
  color:var(--p);
  border:1.5px solid rgba(var(--p-r,108),var(--p-g,99),var(--p-b,255),.4);
  border-radius:16px;
  backdrop-filter:blur(10px);
}
body[data-popup-style="3"] .sp-modal-close{
  background:rgba(255,255,255,.4);
  border-radius:12px;
  backdrop-filter:blur(10px);
}
body[data-popup-style="3"] .sp-modal-body ol li::before{
  background:rgba(var(--p-r,108),var(--p-g,99),var(--p-b,255),.9);
  border-radius:50%;
  backdrop-filter:blur(10px);
}
body[data-popup-style="3"] .sp-modal-foot{background:transparent;border-top:1px solid rgba(255,255,255,.3)}
body[data-popup-style="3"] .sp-modal-btn{
  background:rgba(var(--p-r,108),var(--p-g,99),var(--p-b,255),.85);
  border:1.5px solid rgba(var(--p-r,108),var(--p-g,99),var(--p-b,255),.4);
  border-radius:14px;
  backdrop-filter:blur(10px);
}
body[data-popup-style="3"] .sp-modal-btn:hover{background:rgba(var(--p-r,108),var(--p-g,99),var(--p-b,255),1)}
body[data-popup-style="3"] .sp-modal-btn-ghost{
  background:rgba(255,255,255,.4);
  color:var(--text);
  border:1.5px solid rgba(255,255,255,.5);
}
[data-theme="dark"] body[data-popup-style="3"] .sp-modal-panel,
body[data-popup-style="3"][data-theme="dark"] .sp-modal-panel{
  background:rgba(30,41,59,.7)!important;
  border-color:rgba(255,255,255,.1)!important;
}

/* ═══════════════════════════════════════════════════════════════
   STYLE 4: NEUMORPHISM — Yumuşak 3D gölgeler
   ═══════════════════════════════════════════════════════════════ */
body[data-popup-style="4"] .sp-modal-panel,
body[data-popup-style="4"] .sp-auto-panel{
  background:#eef2f7!important;
  border-radius:32px!important;
  box-shadow:20px 20px 60px rgba(163,177,198,.7), -20px -20px 60px rgba(255,255,255,.9)!important;
  border:none!important;
}
body[data-popup-style="4"] .sp-modal-backdrop{background:rgba(15,23,42,.4);backdrop-filter:blur(8px)}
body[data-popup-style="4"] .sp-modal-head{background:transparent}
body[data-popup-style="4"] .sp-modal-icon{
  border-radius:20px;
  background:#eef2f7;
  color:var(--p);
  box-shadow:inset 6px 6px 12px rgba(163,177,198,.5), inset -6px -6px 12px rgba(255,255,255,.9);
}
body[data-popup-style="4"] .sp-modal-close{
  background:#eef2f7;
  border-radius:14px;
  color:var(--tl);
  box-shadow:inset 3px 3px 6px rgba(163,177,198,.4), inset -3px -3px 6px rgba(255,255,255,.9);
}
body[data-popup-style="4"] .sp-modal-body ol li::before{
  background:#eef2f7;
  color:var(--p);
  border-radius:50%;
  box-shadow:inset 3px 3px 6px rgba(163,177,198,.5), inset -3px -3px 6px rgba(255,255,255,.9);
}
body[data-popup-style="4"] .sp-modal-foot{background:transparent}
body[data-popup-style="4"] .sp-modal-btn{
  background:var(--p);
  border-radius:20px;
  box-shadow:6px 6px 14px rgba(163,177,198,.5), -6px -6px 14px rgba(255,255,255,.8);
}
body[data-popup-style="4"] .sp-modal-btn:hover{
  box-shadow:3px 3px 8px rgba(163,177,198,.5), -3px -3px 8px rgba(255,255,255,.8);
  transform:translateY(1px);
}
body[data-popup-style="4"] .sp-modal-btn-ghost{
  background:#eef2f7;
  color:var(--text);
  box-shadow:inset 4px 4px 8px rgba(163,177,198,.4), inset -4px -4px 8px rgba(255,255,255,.9);
}
[data-theme="dark"] body[data-popup-style="4"] .sp-modal-panel,
body[data-popup-style="4"][data-theme="dark"] .sp-modal-panel{
  background:#252b36!important;
  box-shadow:20px 20px 60px rgba(0,0,0,.7), -20px -20px 60px rgba(50,60,80,.2)!important;
}

/* ═══════════════════════════════════════════════════════════════
   STYLE 5: BOLD BRUTALIST — Kalın border, offset shadow, renkli
   ═══════════════════════════════════════════════════════════════ */
body[data-popup-style="5"] .sp-modal-backdrop{background:rgba(15,23,42,.8)}
body[data-popup-style="5"] .sp-modal-panel,
body[data-popup-style="5"] .sp-auto-panel{
  border-radius:0!important;
  border:4px solid var(--text,#1e1e3a)!important;
  box-shadow:14px 14px 0 var(--p), 28px 28px 0 rgba(0,0,0,.1)!important;
  background:var(--white,#fff)!important;
}
body[data-popup-style="5"] .sp-modal-head{
  background:var(--p);
  color:#fff;
  border-bottom:4px solid var(--text,#1e1e3a);
}
body[data-popup-style="5"] .sp-modal-head h3{
  color:#fff!important;
  text-transform:uppercase;
  letter-spacing:1.5px;
  font-weight:900;
}
body[data-popup-style="5"] .sp-modal-head p{color:rgba(255,255,255,.92)}
body[data-popup-style="5"] .sp-modal-icon{
  background:#fff;
  color:var(--p);
  border:3px solid var(--text,#1e1e3a);
  border-radius:0;
  box-shadow:4px 4px 0 var(--text,#1e1e3a);
}
body[data-popup-style="5"] .sp-modal-close{
  background:#fff;
  color:var(--text,#1e1e3a);
  border:3px solid var(--text,#1e1e3a);
  border-radius:0;
}
body[data-popup-style="5"] .sp-modal-body ol li::before{
  background:var(--text,#1e1e3a);
  border-radius:0;
  border:2px solid var(--p);
  box-shadow:3px 3px 0 var(--p);
}
body[data-popup-style="5"] .sp-modal-foot{border-top:4px solid var(--text,#1e1e3a);background:var(--bg2,#f1f5f9)}
body[data-popup-style="5"] .sp-modal-btn{
  background:var(--p);
  border:3px solid var(--text,#1e1e3a);
  border-radius:0;
  text-transform:uppercase;
  font-weight:900;
  letter-spacing:1px;
  box-shadow:5px 5px 0 var(--text,#1e1e3a);
}
body[data-popup-style="5"] .sp-modal-btn:hover{
  transform:translate(-3px,-3px);
  box-shadow:8px 8px 0 var(--text,#1e1e3a);
}
body[data-popup-style="5"] .sp-modal-btn-ghost{
  background:#fff;
  color:var(--text,#1e1e3a);
  border:3px solid var(--text,#1e1e3a);
  box-shadow:5px 5px 0 var(--p);
}

/* ═══════════════════════════════════════════════════════════════
   STYLE 6: COZY ROUNDED — Çok yuvarlak, sıcak, ferah
   ═══════════════════════════════════════════════════════════════ */
body[data-popup-style="6"] .sp-modal-backdrop{background:rgba(15,23,42,.5);backdrop-filter:blur(6px)}
body[data-popup-style="6"] .sp-modal-panel,
body[data-popup-style="6"] .sp-auto-panel{
  border-radius:32px!important;
  box-shadow:0 30px 70px rgba(0,0,0,.2), 0 0 0 1px rgba(var(--p-r,108),var(--p-g,99),var(--p-b,255),.08)!important;
  border:none!important;
  overflow:hidden;
}
body[data-popup-style="6"] .sp-modal-head{
  padding:30px 30px 20px;
  background:linear-gradient(135deg,rgba(var(--p-r,108),var(--p-g,99),var(--p-b,255),.15),rgba(var(--p-r,108),var(--p-g,99),var(--p-b,255),.04));
  border-bottom:none;
}
body[data-popup-style="6"] .sp-modal-icon{
  background:var(--white,#fff);
  color:var(--p);
  border:3px solid var(--p);
  border-radius:50%;
  width:60px;height:60px;
  font-size:26px;
  box-shadow:0 8px 20px rgba(var(--p-r,108),var(--p-g,99),var(--p-b,255),.25);
}
body[data-popup-style="6"] .sp-modal-close{border-radius:50%;width:40px;height:40px}
body[data-popup-style="6"] .sp-modal-body ol li::before{
  background:var(--p);
  border-radius:50%;
  width:32px;height:32px;
  box-shadow:0 4px 10px rgba(var(--p-r,108),var(--p-g,99),var(--p-b,255),.3);
}
body[data-popup-style="6"] .sp-modal-foot{
  border-top:1px dashed var(--brd,#e2e8f0);
  padding:20px 30px 26px;
}
body[data-popup-style="6"] .sp-modal-btn{
  border-radius:50px;
  background:var(--p);
  padding:14px 32px;
  box-shadow:0 10px 24px rgba(var(--p-r,108),var(--p-g,99),var(--p-b,255),.35);
}
body[data-popup-style="6"] .sp-modal-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 32px rgba(var(--p-r,108),var(--p-g,99),var(--p-b,255),.5);
}
body[data-popup-style="6"] .sp-modal-btn-ghost{
  background:var(--bg2,#f1f5f9);
  color:var(--text,#1e1e3a);
  box-shadow:none;
  border-radius:50px;
}

/* ═══════════════════════════════════════════════════════════════
   Legacy aliases — eski .sp-arm class'ı da .sp-modal gibi çalışsın
   ═══════════════════════════════════════════════════════════════ */
.sp-arm{display:none}
.sp-arm.open{display:flex!important;align-items:center!important;justify-content:center!important}
.sp-arm .sp-arm-backdrop{background:rgba(15,23,42,.6);backdrop-filter:blur(4px)}