/* ==========================================================================
   ERTUNIX Digital Communication — Panel UI
   Premium tema. Mevcut PHP çıktısındaki class isimleri korunmuştur.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@500;600&display=swap');

:root{
  --paper:#f4f6fb;
  --surface:#ffffff;
  --surface-2:#eef1f9;
  --ink:#101528;
  --ink-soft:#5b6480;
  --ink-faint:#8992ab;
  --line:#e4e8f3;
  --line-soft:#edf0f8;

  --brand-1:#18215e;
  --brand-2:#3355ff;
  --brand-3:#6c7bff;
  --accent:#13b8a8;
  --accent-ink:#046b62;

  --good:#0fb573;
  --good-bg:#e3f9ef;
  --good-ink:#08744e;
  --bad:#ef4463;
  --bad-bg:#ffe7ec;
  --bad-ink:#a11136;
  --warn:#f2a613;
  --warn-bg:#fff3d9;
  --warn-ink:#8a5c00;
  --info-bg:#e9edfb;
  --info-ink:#26399e;

  --radius-sm:9px;
  --radius:14px;
  --radius-lg:20px;
  --shadow-sm:0 1px 2px rgba(16,21,40,.05);
  --shadow:0 10px 30px -12px rgba(20,30,70,.16);
  --shadow-lg:0 24px 60px -20px rgba(20,30,70,.28);

  --font-display:'Space Grotesk',Inter,Segoe UI,sans-serif;
  --font-body:'Inter',Segoe UI,Arial,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  --header-h:68px;
  --ease:cubic-bezier(.22,.9,.32,1);
  color-scheme:light;
}

html[data-theme="dark"]{
  --paper:#080b16;
  --surface:#10152a;
  --surface-2:#161c37;
  --ink:#eef1fb;
  --ink-soft:#9aa3c4;
  --ink-faint:#6c759a;
  --line:#232c4c;
  --line-soft:#1a2140;
  --brand-1:#8fa0ff;
  --brand-2:#5877ff;
  --brand-3:#7c8fff;
  --accent:#2ce0cb;
  --accent-ink:#7cf5e6;
  --good-bg:#0d2a22;
  --good-ink:#4de3a4;
  --bad-bg:#331323;
  --bad-ink:#ff7c96;
  --warn-bg:#312207;
  --warn-ink:#ffc857;
  --info-bg:#161d3d;
  --info-ink:#a9b7ff;
  --shadow:0 10px 30px -12px rgba(0,0,0,.55);
  --shadow-lg:0 24px 70px -20px rgba(0,0,0,.6);
  color-scheme:dark;
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important;}
}

*{box-sizing:border-box}
::selection{background:var(--brand-2);color:#fff}

html{scroll-behavior:smooth}

body{
  margin:0;
  background:
    radial-gradient(1100px 500px at 12% -10%, rgba(51,85,255,.07), transparent 60%),
    radial-gradient(900px 460px at 100% 0%, rgba(19,184,168,.07), transparent 55%),
    var(--paper);
  color:var(--ink);
  font:15px/1.6 var(--font-body);
  -webkit-font-smoothing:antialiased;
  transition:background-color .35s var(--ease),color .35s var(--ease);
}

/* Scrollbar */
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px;border:3px solid var(--paper)}
::-webkit-scrollbar-thumb:hover{background:var(--ink-faint)}

/* Top loading bar (used by JS) */
#route-progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:9999;background:linear-gradient(90deg,var(--brand-2),var(--accent));box-shadow:0 0 12px rgba(51,85,255,.6);transition:width .25s var(--ease),opacity .3s ease;opacity:0;pointer-events:none}
#route-progress.active{opacity:1}

/* ==========================================================================
   Header
   ========================================================================== */
.top{
  height:var(--header-h);
  background:linear-gradient(180deg, var(--brand-1) 0%, #0e1442 100%);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 max(24px,calc((100% - 1180px)/2));
  position:sticky;
  top:0;
  z-index:50;
  border-bottom:1px solid rgba(255,255,255,.06);
  transition:box-shadow .3s ease, background-color .3s ease;
}
.top.is-scrolled{box-shadow:0 12px 30px -14px rgba(0,0,0,.55);backdrop-filter:blur(10px) saturate(140%);background:linear-gradient(180deg, rgba(24,33,94,.92) 0%, rgba(14,20,66,.92) 100%)}

.brand{
  font-family:var(--font-display);
  font-size:19px;
  font-weight:700;
  color:#fff;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:10px;
  letter-spacing:.2px;
}
.brand::before{
  content:"";
  width:11px;height:11px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #7cf5e6, var(--accent) 60%, var(--brand-2) 130%);
  box-shadow:0 0 0 0 rgba(44,224,203,.55);
  animation:signalPulse 2.6s ease-out infinite;
  flex:none;
}
.brand span{font-family:var(--font-body);font-size:11.5px;font-weight:600;color:#aab6e8;margin-left:2px;letter-spacing:.4px;text-transform:uppercase}

@keyframes signalPulse{
  0%{box-shadow:0 0 0 0 rgba(44,224,203,.55)}
  70%{box-shadow:0 0 0 10px rgba(44,224,203,0)}
  100%{box-shadow:0 0 0 0 rgba(44,224,203,0)}
}

.top nav{display:flex;align-items:center;gap:6px}
.top nav a{
  color:#dbe3fb;
  text-decoration:none;
  font-weight:600;
  font-size:14px;
  padding:9px 13px;
  border-radius:9px;
  position:relative;
  transition:color .2s ease, background-color .2s ease;
}
.top nav a:hover{color:#fff;background:rgba(255,255,255,.08)}
.top nav a.is-active{color:#fff;background:rgba(255,255,255,.12)}
.top nav a:not(.btn)::after{
  content:"";position:absolute;left:13px;right:13px;bottom:5px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--accent),var(--brand-3));
  transform:scaleX(0);transform-origin:left;transition:transform .25s var(--ease);
}
.top nav a:not(.btn):hover::after,.top nav a:not(.btn).is-active::after{transform:scaleX(1)}
.top nav a.btn{color:#0a1236 !important}

.theme-toggle,.nav-toggle{
  appearance:none;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.06);
  color:#fff;width:36px;height:36px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;transition:background-color .2s ease, transform .2s ease;flex:none;
}
.theme-toggle:hover,.nav-toggle:hover{background:rgba(255,255,255,.14)}
.theme-toggle:active,.nav-toggle:active{transform:scale(.92)}
.theme-toggle svg,.nav-toggle svg{width:17px;height:17px}
.nav-toggle{display:none}

/* ==========================================================================
   Layout
   ========================================================================== */
.container{
  max-width:1180px;
  margin:34px auto;
  padding:0 20px;
  min-height:75vh;
  animation:pageIn .5s var(--ease);
}
@keyframes pageIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

h1{font-family:var(--font-display);font-size:29px;font-weight:700;margin:0 0 22px;letter-spacing:-.2px}
h2{font-family:var(--font-display);font-size:19px;font-weight:600;letter-spacing:-.1px}

/* ==========================================================================
   Grid & Cards
   ========================================================================== */
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.grid.three{grid-template-columns:repeat(3,1fr)}

.card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:22px;
  box-shadow:var(--shadow-sm);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
  animation:cardIn .5s var(--ease) backwards;
}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--line-soft)}
@keyframes cardIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

.card.metric{position:relative;overflow:hidden}
.card.metric::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--brand-2),var(--accent));
}
.card.metric .value{
  font-family:var(--font-display);
  font-size:30px;font-weight:700;margin:4px 0 2px;letter-spacing:-.4px;
  background:linear-gradient(90deg,var(--ink),var(--ink-soft));
  -webkit-background-clip:text;background-clip:text;color:var(--ink);
}
.metric .value .badge{font-family:var(--font-body);-webkit-text-fill-color:initial}
.muted{color:var(--ink-soft)}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn,button{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:0;border-radius:10px;padding:11.5px 18px;
  background:linear-gradient(135deg,var(--brand-2),#2647db);
  color:#fff;text-decoration:none;font-weight:700;font-size:14.5px;
  cursor:pointer;position:relative;overflow:hidden;isolation:isolate;
  transition:transform .18s var(--ease), box-shadow .25s var(--ease), filter .2s ease;
  box-shadow:0 8px 18px -8px rgba(51,85,255,.55);
  font-family:var(--font-body);
}
.btn:hover,button:hover{transform:translateY(-2px);box-shadow:0 14px 24px -10px rgba(51,85,255,.6);filter:brightness(1.04)}
.btn:active,button:active{transform:translateY(0px) scale(.98)}
.btn:focus-visible,button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--brand-3);outline-offset:2px;
}
.btn.sm,button.sm{padding:8px 13px;font-size:13px;border-radius:8px}
.btn.ghost,button.ghost{background:var(--surface-2);color:var(--brand-1);box-shadow:none;border:1px solid var(--line)}
html[data-theme="dark"] .btn.ghost,html[data-theme="dark"] button.ghost{color:#dfe4ff}
.btn.ghost:hover,button.ghost:hover{background:var(--line-soft);filter:none}
.btn.bad,button.bad,button[value="cancel"],button[value="block"]{background:linear-gradient(135deg,var(--bad),#c22045);box-shadow:0 8px 18px -8px rgba(239,68,99,.5)}
.btn.ok,button.ok,button[value="approve"],button[value="unblock"]{background:linear-gradient(135deg,var(--good),#079160);box-shadow:0 8px 18px -8px rgba(15,181,115,.5)}

.ripple{position:absolute;border-radius:50%;transform:scale(0);background:rgba(255,255,255,.55);animation:rippleAnim .6s ease-out;pointer-events:none}
html[data-theme="dark"] .ripple{background:rgba(255,255,255,.28)}
@keyframes rippleAnim{to{transform:scale(2.6);opacity:0}}

/* ==========================================================================
   Forms
   ========================================================================== */
form.card{max-width:620px}
form.card h2{margin-top:0}
label{display:block;font-size:12.5px;font-weight:700;margin:14px 0 6px;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.4px}
input,select,textarea{
  width:100%;padding:11.5px 13px;border:1.5px solid var(--line);border-radius:10px;
  background:var(--surface-2);color:var(--ink);font:inherit;
  transition:border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
input::placeholder,textarea::placeholder{color:var(--ink-faint)}
input:hover,select:hover,textarea:hover{border-color:var(--ink-faint)}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--brand-2);background:var(--surface);
  box-shadow:0 0 0 4px rgba(51,85,255,.14);
}
textarea{min-height:100px;resize:vertical}
.row{display:grid;grid-template-columns:1fr 1fr;gap:14px}

/* checkboxes (is_active) keep native width but styled */
label input[type="checkbox"]{width:auto;accent-color:var(--brand-2);margin-right:6px;vertical-align:middle}

/* ==========================================================================
   Alerts
   ========================================================================== */
.alert{
  position:relative;padding:14px 40px 14px 18px;border-radius:12px;margin:0 0 16px;
  background:var(--info-bg);color:var(--info-ink);font-weight:600;font-size:14px;
  border-left:4px solid var(--brand-2);
  animation:alertIn .35s var(--ease);
}
@keyframes alertIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
.alert.success{background:var(--good-bg);color:var(--good-ink);border-left-color:var(--good)}
.alert.error{background:var(--bad-bg);color:var(--bad-ink);border-left-color:var(--bad)}
.alert.warning{background:var(--warn-bg);color:var(--warn-ink);border-left-color:var(--warn)}
.alert-close{
  position:absolute;right:10px;top:50%;transform:translateY(-50%);
  width:24px;height:24px;border:0;background:transparent;color:inherit;opacity:.55;
  cursor:pointer;font-size:16px;line-height:1;border-radius:6px;
  display:inline-flex;align-items:center;justify-content:center;transition:opacity .2s ease, background-color .2s ease;
}
.alert-close:hover{opacity:1;background:rgba(0,0,0,.06)}

/* ==========================================================================
   Tables
   ========================================================================== */
.table-wrap{overflow-x:auto;border-radius:var(--radius);border:1px solid var(--line);box-shadow:var(--shadow-sm);background:var(--surface)}
table{width:100%;border-collapse:collapse;background:var(--surface);font-size:14px}
th,td{text-align:left;padding:13px 15px;border-bottom:1px solid var(--line);vertical-align:top}
th{background:var(--surface-2);color:var(--ink-soft);font-size:11px;text-transform:uppercase;letter-spacing:.5px;font-weight:700;position:sticky;top:0}
tbody tr{transition:background-color .15s ease}
tbody tr:hover{background:var(--surface-2)}
tbody tr:last-child td{border-bottom:0}
td strong{font-family:var(--font-mono);font-weight:600;letter-spacing:.2px}

/* ==========================================================================
   Badges
   ========================================================================== */
.badge{
  display:inline-flex;align-items:center;gap:6px;padding:5px 11px 5px 9px;border-radius:999px;
  background:var(--info-bg);color:var(--info-ink);font-size:11.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.3px;white-space:nowrap;
}
.badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.badge.active,.badge.sent,.badge.paid{background:var(--good-bg);color:var(--good-ink)}
.badge.active::before,.badge.sent::before,.badge.pending::before{animation:dotPulse 1.8s ease-in-out infinite}
.badge.blocked,.badge.failed,.badge.cancelled,.badge.expired{background:var(--bad-bg);color:var(--bad-ink)}
.badge.paused,.badge.pending{background:var(--warn-bg);color:var(--warn-ink)}
@keyframes dotPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(1.35)}}

/* ==========================================================================
   Packages
   ========================================================================== */
.package{display:flex;flex-direction:column;min-height:340px;position:relative}
.grid.three .package:nth-child(2){
  border-color:var(--brand-2);
  box-shadow:0 18px 40px -18px rgba(51,85,255,.4);
}
.grid.three .package:nth-child(2)::after{
  content:"Önerilen";position:absolute;top:18px;right:-32px;transform:rotate(38deg);
  background:linear-gradient(135deg,var(--brand-2),var(--accent));color:#fff;
  font-size:10.5px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;
  padding:5px 38px;box-shadow:0 6px 14px -4px rgba(51,85,255,.5);
}
.package .badge{align-self:flex-start}
.package .price{
  font-family:var(--font-display);font-size:32px;font-weight:700;margin:10px 0 4px;
  background:linear-gradient(90deg,var(--brand-1),var(--brand-2));-webkit-background-clip:text;background-clip:text;color:var(--brand-2);
}
html[data-theme="dark"] .package .price{color:var(--brand-3)}
.package ul{padding-left:0;flex:1;list-style:none;margin:10px 0 0}
.package ul li{padding:8px 0 8px 26px;position:relative;border-bottom:1px dashed var(--line);font-size:13.5px;color:var(--ink-soft)}
.package ul li:last-child{border-bottom:0}
.package ul li::before{
  content:"✓";position:absolute;left:0;top:7px;width:18px;height:18px;border-radius:6px;
  background:var(--good-bg);color:var(--good-ink);font-size:11px;font-weight:800;
  display:flex;align-items:center;justify-content:center;
}
.package .btn{margin-top:16px}

/* ==========================================================================
   Actions
   ========================================================================== */
.actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{
  padding:64px 0;display:grid;grid-template-columns:1.25fr .75fr;gap:36px;align-items:center;
  position:relative;
}
.hero::before{
  content:"";position:absolute;inset:-40px -20px auto auto;width:420px;height:420px;z-index:-1;
  background:radial-gradient(circle,rgba(51,85,255,.14),transparent 68%);
  filter:blur(10px);
}
.hero::after{
  content:"";position:absolute;bottom:-60px;left:-60px;width:340px;height:340px;z-index:-1;
  background:radial-gradient(circle,rgba(19,184,168,.14),transparent 68%);
  filter:blur(10px);
}
.hero h1{
  font-size:44px;line-height:1.12;margin:0 0 16px;letter-spacing:-1px;
  animation:heroUp .6s var(--ease) backwards;
}
.hero p{font-size:17.5px;color:var(--ink-soft);animation:heroUp .6s .08s var(--ease) backwards;margin:0 0 24px}
.hero .actions{animation:heroUp .6s .16s var(--ease) backwards}
.hero .card{animation:heroUp .6s .1s var(--ease) backwards}
.hero .card h2{margin-top:0}
.hero .card p{font-size:14.5px;margin:9px 0;color:var(--ink-soft)}
@keyframes heroUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}

/* ==========================================================================
   Auth pages (login / register / install) — set via JS body class
   ========================================================================== */
body.auth-page .container{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:82vh}
body.auth-page h1{text-align:center;font-size:26px}
body.auth-page form.card{width:100%;max-width:440px;box-shadow:var(--shadow-lg)}
body.auth-page .alert{width:100%;max-width:440px}

/* ==========================================================================
   Footer
   ========================================================================== */
footer{text-align:center;color:var(--ink-faint);padding:34px 20px;font-size:13px;border-top:1px solid var(--line);margin-top:40px}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media(max-width:850px){
  .grid,.grid.three{grid-template-columns:1fr 1fr}
  .hero{grid-template-columns:1fr;padding:40px 0}
  .hero h1{font-size:34px}
  .top{padding:0 16px}
  .nav-toggle{display:inline-flex}
  .top nav{
    position:absolute;top:var(--header-h);left:0;right:0;
    background:linear-gradient(180deg,#151b4d,#0e1442);
    flex-direction:column;align-items:stretch;gap:2px;padding:10px;
    border-bottom:1px solid rgba(255,255,255,.08);
    box-shadow:0 20px 40px -20px rgba(0,0,0,.6);
    opacity:0;transform:translateY(-8px);pointer-events:none;transition:opacity .22s var(--ease),transform .22s var(--ease);
  }
  .top nav.is-open{opacity:1;transform:translateY(0);pointer-events:auto}
  .top nav a{display:block !important;padding:12px 14px}
  .top nav a.btn{margin-top:4px}
}
@media(max-width:560px){
  .grid,.grid.three,.row{grid-template-columns:1fr}
  .hero h1{font-size:29px}
  .container{margin:22px auto}
  .package:nth-child(2)::after{right:-38px;top:16px}
}