<?php
if (!isset($page_title)) $page_title = "ECUPRATIX | Portal";
?><!doctype html>
<html lang="tr">
<head>
  <meta charset="utf-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1"/>
  <title><?= htmlspecialchars($page_title) ?></title>

  <link rel="stylesheet" href="assets/css/theme.css?v=1"/>
  <link rel="stylesheet" href="assets/css/components.css?v=1"/>
  <link rel="stylesheet" href="https://cdn.datatables.net/1.13.8/css/jquery.dataTables.min.css"/>
  <link rel="stylesheet" href="assets/css/ux_pianoblack_1769859777.css"/>
  <link rel="stylesheet" href="assets/css/piano_neon.css?v=2"/>
  <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;600;800&display=swap" rel="stylesheet">

  <style>
    /* PREMIUM UI OVERRIDES */
    :root {
      --accent: #ff2a2a;
      --accent-rgb: 255, 42, 42;
      --bg-dark: #050506;
      --card-bg: rgba(18, 19, 23, 0.6);
      --border-light: rgba(255, 255, 255, 0.08);
    }
    body { font-family: 'Plus Jakarta Sans', sans-serif !important; background: var(--bg-dark) !important; color: #fff !important; margin: 0; padding: 0; }
    .ux-app { background: var(--bg-dark) !important; }
    
    /* TOPBAR FULL WIDTH REPAIR */
    header.topbar-wide { 
      position: fixed !important;
      top: 0 !important;
      left: 0 !important;
      width: 100vw !important;
      height: 85px !important;
      margin: 0 !important;
      border-radius: 0 !important;
      background: rgba(10, 11, 13, 0.85) !important;
      backdrop-filter: blur(30px) !important;
      border-bottom: 1px solid var(--border-light) !important;
      display: flex !important;
      align-items: center !important;
      justify-content: space-between !important;
      padding: 0 30px !important;
      z-index: 10000 !important;
      box-sizing: border-box !important;
    }

    /* Logo Fix */
    .tb-left { flex: 0 0 auto !important; }
    .logo { display: flex !important; align-items: center !important; gap: 12px !important; text-decoration: none !important; }
    .logo-mark { background: var(--accent) !important; color: #fff !important; padding: 4px 8px !important; border-radius: 8px !important; font-weight: 800 !important; font-size: 14px !important; }
    .logo-title { color: #fff !important; font-weight: 800 !important; font-size: 18px !important; letter-spacing: -0.5px !important; }
    .logo-sub { color: rgba(255,255,255,0.4) !important; font-size: 10px !important; font-weight: 700 !important; letter-spacing: 1px !important; }

    /* Nav Fix */
    .tb-nav { flex: 1 !important; display: flex !important; justify-content: center !important; gap: 15px !important; }
    .tb-link { 
      padding: 8px 16px !important;
      border-radius: 12px !important;
      font-size: 13px !important;
      font-weight: 700 !important;
      color: rgba(255,255,255,0.6) !important;
      transition: all 0.3s ease !important;
      text-decoration: none !important;
    }
    .tb-link:hover { background: rgba(255,255,255,0.05) !important; color: #fff !important; }
    .tb-link.active { background: rgba(255,42,42,0.1) !important; color: var(--accent) !important; border: 1px solid rgba(255,42,42,0.2) !important; }

    /* Right Side Fix */
    .tb-right { flex: 0 0 auto !important; display: flex !important; align-items: center !important; gap: 20px !important; }
    .tb-packs { display: flex !important; gap: 8px !important; background: rgba(255,255,255,0.03) !important; padding: 6px 12px !important; border-radius: 12px !important; border: 1px solid var(--border-light) !important; }
    .pack-pill { font-size: 9px !important; font-weight: 800 !important; color: rgba(255,255,255,0.4) !important; display: flex !important; align-items: center !important; gap: 5px !important; }
    .pack-dot { width: 6px !important; height: 6px !important; border-radius: 50% !important; background: #00ff8c !important; }
    
    .user { display: flex !important; align-items: center !important; gap: 15px !important; }
    .avatar { width: 35px !important; height: 35px !important; background: rgba(255,255,255,0.05) !important; border: 1px solid var(--border-light) !important; border-radius: 10px !important; display: flex !important; align-items: center !important; justify-content: center !important; font-weight: 800 !important; color: var(--accent) !important; }
    .umeta { display: none !important; } /* Hide extra text to save space */
    
    .lang-select { 
      background: rgba(255,255,255,0.03) !important; 
      border: 1px solid var(--border-light) !important; 
      color: #fff !important; 
      font-size: 11px !important; 
      font-weight: 700 !important; 
      padding: 5px 10px !important; 
      border-radius: 8px !important; 
      outline: none !important;
    }
    .chip.danger { 
      background: var(--accent) !important; 
      color: #fff !important; 
      padding: 8px 16px !important; 
      border-radius: 10px !important; 
      font-weight: 800 !important; 
      font-size: 12px !important; 
      text-decoration: none !important;
      transition: all 0.3s ease !important;
    }
    .chip.danger:hover { transform: scale(1.05) !important; box-shadow: 0 0 15px rgba(255,42,42,0.3) !important; }

    /* CARDS */
    .card, .upcard, .mcard, .dtc-headcard { background: var(--card-bg) !important; border: 1px solid var(--border-light) !important; border-radius: 20px !important; backdrop-filter: blur(15px); }
  </style>

  <?php if(isset($extra_css) && is_array($extra_css)) foreach($extra_css as $css){ ?>
  <link rel="stylesheet" href="<?= htmlspecialchars($css) ?>"/>
<?php } ?>
</head>
<body>
<div class="app">
