/* ============================================================
   DT SITE MANAGER – App Stylesheet
   Dark premium UI with glassmorphism & micro-animations
   ============================================================ */

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

/* ---- VARIABLES ---- */
:root {
  --bg:            #070D1A;
  --surface:       #0D1525;
  --surface2:      #111E35;
  --surface3:      #162440;
  --border:        rgba(59,130,246,0.15);
  --border-hover:  rgba(59,130,246,0.4);
  --accent:        #3B82F6;
  --accent-light:  #60A5FA;
  --accent-glow:   rgba(59,130,246,0.3);
  --color-success: #10B981;
  --color-warning: #F59E0B;
  --color-danger:  #EF4444;
  --text:          #E2E8F0;
  --muted:         #94A3B8;
  --white:         #FFFFFF;
  --gradient:      linear-gradient(135deg, #3B82F6 0%, #1D4ED8 100%);
  --font:          'Inter', sans-serif;
  --radius:        10px;
  --radius-lg:     16px;
  --radius-xl:     24px;
  --shadow:        0 4px 32px rgba(0,0,0,0.5);
  --shadow-glow:   0 0 30px rgba(59,130,246,0.2);
  --transition:    all 0.25s cubic-bezier(0.4,0,0.2,1);
  --max-w:         1280px;
}

/* ---- RESET ---- */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body {
  font-family:   var(--font);
  background:    var(--bg);
  color:         var(--text);
  line-height:   1.6;
  overflow-x:    hidden;
  min-height:    100vh;
}
img  { max-width:100%; display:block; }
a    { color:inherit; text-decoration:none; }
ul   { list-style:none; }
button { font-family:var(--font); cursor:pointer; }
textarea { font-family:var(--font); }
select   { font-family:var(--font); }

/* ---- SCROLLBAR ---- */
::-webkit-scrollbar { width:6px; }
::-webkit-scrollbar-track { background:var(--bg); }
::-webkit-scrollbar-thumb { background:var(--accent); border-radius:3px; }

/* ============================================================
   LAYOUT
   ============================================================ */
.container { max-width:var(--max-w); margin:0 auto; padding:0 1.5rem; }
.main-content { padding-top:80px; padding-bottom:3rem; }

/* ============================================================
   TOP NAV
   ============================================================ */
.topnav {
  position:   fixed;
  top:0; left:0; right:0;
  height:     64px;
  background: var(--white);
  border-bottom: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  z-index:    1000;
}
.topnav-inner {
  max-width: var(--max-w);
  margin:    0 auto;
  padding:   0 1.5rem;
  height:    100%;
  display:   flex;
  align-items: center;
  justify-content: space-between;
}
.topnav-logo {
  display:     flex;
  align-items: center;
  gap:         0.6rem;
  font-size:   1.1rem;
  font-weight: 700;
  color:       #0F172A;
  letter-spacing: -0.02em;
}
.topnav-logo strong { color:var(--accent); }
.logo-icon {
  width:  36px;
  height: 36px;
  background:    var(--gradient);
  border-radius: 8px;
  display:       flex;
  align-items:   center;
  justify-content: center;
  font-size:     1rem;
}
.topnav-actions { display:flex; align-items:center; gap:1rem; }
.topnav-user { font-size:0.85rem; color:#000000; font-weight: 700; margin-left: auto; }

/* Portfolio Dropdown */
.portfolio-dropdown {
  position: relative;
  display: inline-block;
  margin-right: 0.5rem;
}
.dropdown-trigger { 
  color: #000000 !important; 
  font-weight: 700 !important;
  background: rgba(0,0,0,0.05) !important;
  border: 1px solid rgba(0,0,0,0.1) !important;
}
.topnav .btn-ghost {
  color: #000000 !important;
  font-weight: 700 !important;
  background: rgba(0,0,0,0.05) !important;
  border: 1px solid rgba(0,0,0,0.1) !important;
}
.topnav .btn-ghost:hover {
  background: rgba(0,0,0,0.1) !important;
}
.dropdown-content {
  display: none;
  position: absolute;
  right: 0;
  top: 100%;
  background: var(--white);
  min-width: 280px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: var(--radius-lg);
  z-index: 1001;
  margin-top: 0.5rem;
  overflow: hidden;
  animation: slideUp 0.2s ease;
}
.portfolio-dropdown:hover .dropdown-content { display: block; }

/* Centered Topnav Items */
.topnav-center {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.topnav-center .filter-btn {
  border: none;
  background: transparent;
  font-size: 0.82rem;
  padding: 0.4rem 0.8rem;
  border-radius: 8px;
  color: #64748B;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  transition: var(--transition);
}
.topnav-center .filter-btn:hover {
  background: rgba(0,0,0,0.04);
  color: #0F172A;
}
.topnav-center .filter-btn.active {
  background: var(--accent);
  color: white !important;
}

.dropdown-header {
  padding: 0.75rem 1rem;
  background: #F8FAFC;
  font-size: 0.75rem;
  font-weight: 700;
  color: #64748B;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(0,0,0,0.05);
}
.dropdown-list { max-height: 300px; overflow-y: auto; }
.portfolio-item {
  padding: 0.65rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border-bottom: 1px solid rgba(0,0,0,0.03);
  transition: var(--transition);
}
.portfolio-item:hover { background: #F1F5F9; }
.p-green { background: var(--color-success); box-shadow: 0 0 6px var(--color-success); }
/* Replaced by footer consolidation */
.portfolio-toggle-dot::before {
    display: none; /* Disable the inset inner circle */
}
.portfolio-toggle-dot.p-green  { color: var(--color-success) !important; background: var(--color-success) !important; }
.portfolio-toggle-dot.p-orange { color: var(--color-warning) !important; background: var(--color-warning) !important; }
.portfolio-toggle-dot.p-red    { color: var(--color-danger)  !important; background: var(--color-danger)  !important; }

/* Portfolio Save Bar */
.portfolio-save-bar {
  position: fixed;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  background: #1e293b;
  border: 2px solid var(--accent);
  padding: 0.75rem 1.5rem;
  border-radius: 50px;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  box-shadow: 0 10px 40px rgba(0,0,0,0.5);
  z-index: 2000;
  color: #fff;
  font-weight: 600;
  animation: slideUp 0.3s ease;
}
/* Custom Status Menu */
.status-menu {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #1e293b;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.5);
  padding: 0.5rem;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 280px; /* Slightly wider for better appearance */
  backdrop-filter: blur(15px);
  animation: modalIn 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.status-menu-header {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.25rem;
}

.status-menu-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  color: var(--text);
}
.status-menu-item:hover { background: rgba(255,255,255,0.05); }
.status-menu-item i { width: 12px; height: 12px; border-radius: 50%; }
@keyframes modalIn { from { opacity: 0; transform: translate(-50%, -45%) scale(0.95); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }

/* Tech Badges & Icons */
.tech-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.tech-badge i {
  display: inline-block;
  width: 14px;
  height: 14px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* Icons via Simple Icons CDN (SVGs) */
.tech-html { background: rgba(227, 79, 38, 0.1); color: #E34F26; }
.tech-html i { background-image: url('https://cdn.jsdelivr.net/npm/simple-icons@v9/icons/html5.svg'); filter: invert(34%) sepia(85%) saturate(1437%) hue-rotate(345deg) brightness(89%) contrast(92%); }

.tech-php { background: rgba(119, 123, 179, 0.1); color: #777BB3; }
.tech-php i { background-image: url('https://cdn.jsdelivr.net/npm/simple-icons@v9/icons/php.svg'); filter: invert(53%) sepia(16%) saturate(1001%) hue-rotate(200deg) brightness(91%) contrast(87%); }

.tech-nodejs { background: rgba(51, 153, 70, 0.1); color: #339933; }
.tech-nodejs i { background-image: url('https://cdn.jsdelivr.net/npm/simple-icons@v9/icons/nodedotjs.svg'); filter: invert(47%) sepia(84%) saturate(336%) hue-rotate(75deg) brightness(93%) contrast(85%); }

.tech-custom { background: rgba(148, 163, 184, 0.1); color: #94A3B8; }
.tech-custom i { background-image: url('https://cdn.jsdelivr.net/npm/simple-icons@v9/icons/codeigniter.svg'); filter: opacity(0.5); } /* Generic code icon */

.hosting-btn {
  background: rgba(15, 23, 42, 0.05);
  color: #64748B;
  border: 1px solid rgba(0,0,0,0.05);
}

.status-dot { display: none; }

/* Revision Timers */
.rev-timer {
  font-size: 11px;
  color: var(--muted);
  margin-top: 4px;
  display: flex;
  gap: 12px;
  opacity: 0.8;
}
.rev-timer span {
  display: flex;
  align-items: center;
  gap: 4px;
}
.rev-timer i { font-style: normal; font-weight: 600; color: var(--text); }


/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display:     inline-flex;
  align-items: center;
  gap:         0.4rem;
  padding:     0.75rem 1.5rem;
  border:      none;
  border-radius: var(--radius);
  font-weight: 600;
  font-size:   0.9rem;
  transition:  var(--transition);
  cursor:      pointer;
  white-space: nowrap;
}
.btn-primary {
  background: var(--gradient);
  color:      var(--white);
  box-shadow: 0 4px 16px rgba(59,130,246,0.4);
}
.btn-primary:hover {
  transform:  translateY(-2px);
  box-shadow: 0 8px 24px rgba(59,130,246,0.55);
}
.btn-ghost {
  background: rgba(255,255,255,0.05);
  color:      var(--text);
  border:     1px solid var(--border);
}
.btn-ghost:hover {
  background:    rgba(255,255,255,0.1);
  border-color:  var(--border-hover);
}
.btn-danger {
  background: rgba(239,68,68,0.15);
  color:      #FCA5A5;
  border:     1px solid rgba(239,68,68,0.3);
}
.btn-danger:hover {
  background: rgba(239,68,68,0.3);
  border-color: var(--color-danger);
  transform: translateY(-2px);
}
.btn-sm { padding:0.45rem 0.9rem; font-size:0.82rem; }
.btn-full { width:100%; justify-content:center; }

/* btn icon */
.btn-icon {
  background: rgba(255,255,255,0.05);
  border:     1px solid var(--border);
  border-radius: 6px;
  padding:    0.3rem 0.5rem;
  font-size:  0.9rem;
  color:      var(--muted);
  transition: var(--transition);
}
.btn-icon:hover { background:rgba(255,255,255,0.12); color:var(--white); }
.btn-icon--danger:hover { background:rgba(239,68,68,0.2); color:#FCA5A5; border-color:rgba(239,68,68,0.4); }

/* ============================================================
   ALERTS
   ============================================================ */
.alert {
  display:      flex;
  align-items:  center;
  gap:          0.6rem;
  padding:      0.85rem 1rem;
  border-radius: var(--radius);
  font-size:    0.9rem;
  margin-bottom: 1.25rem;
}
.alert-error {
  background: rgba(239,68,68,0.12);
  border:     1px solid rgba(239,68,68,0.3);
  color:      #FCA5A5;
}

/* ============================================================
   FORM ELEMENTS
   ============================================================ */
.form-group { display:flex; flex-direction:column; gap:0.45rem; }
.form-group label { font-size:0.85rem; font-weight:600; color:var(--text); }
.form-group input,
.form-group textarea,
.form-group select {
  background:    var(--surface2);
  border:        1px solid var(--border);
  border-radius: var(--radius);
  padding:       0.75rem 1rem;
  color:         var(--text);
  font-size:     0.9rem;
  transition:    var(--transition);
  width:         100%;
  outline:       none;
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  border-color: var(--accent);
  box-shadow:   0 0 0 3px rgba(59,130,246,0.12);
  background:   var(--surface3);
}
.form-group input::placeholder,
.form-group textarea::placeholder { color:rgba(148,163,184,0.45); }
.form-group select option { background:var(--surface2); }
.form-group textarea { resize:vertical; min-height:100px; }

/* ============================================================
   AUTH PAGE
   ============================================================ */
.auth-page {
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-direction:  column;
  min-height:      100vh;
  background:      radial-gradient(ellipse at 30% 20%, rgba(59,130,246,0.08) 0%, transparent 60%),
                   var(--bg);
}
.auth-container { width:100%; max-width:420px; padding:1rem; }
.auth-card {
  background: var(--white);
  border:     1px solid rgba(0,0,0,0.05);
  border-radius: var(--radius-xl);
  padding:    2.5rem;
  box-shadow: 0 20px 50px rgba(0,0,0,0.3);
}
.auth-logo {
  display:     flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 2rem;
}

.auth-card h1 { font-size:1.6rem; color:#0F172A; margin-bottom:0.3rem; }
.auth-sub { color:#64748B; font-size:0.9rem; margin-bottom:1.75rem; }

.auth-card .form-group label { color: #475569; }
.auth-card .form-group input {
  background: #F8FAFC;
  border-color: #E2E8F0;
  color: #0F172A;
}
.auth-card .form-group input:focus {
  background: var(--white);
  border-color: var(--accent);
}
.auth-form { display:flex; flex-direction:column; gap:1rem; }
.auth-footer { text-align:center; margin-top:1.5rem; font-size:0.8rem; color:var(--muted); }

/* ============================================================
   PAGE HEADER
   ============================================================ */
.page-header {
  display:     flex;
  align-items: center;
  justify-content: space-between;
  margin:      2rem 0 1.75rem;
  gap:         1rem;
  flex-wrap:   wrap;
}
.page-header h1 { font-size:1.9rem; color:var(--white); letter-spacing:-0.02em; }
.page-header p  { color:var(--muted); font-size:0.95rem; margin-top:0.2rem; }

/* ============================================================
   STATS GRID
   ============================================================ */
.stats-grid {
  display:               grid;
  grid-template-columns: repeat(5, 1fr);
  gap:                   1rem;
  margin-bottom:         2rem;
}
.stat-card {
  background:    var(--surface);
  border:        1px solid var(--border);
  border-radius: var(--radius-lg);
  padding:       1.25rem 1.5rem;
  display:       flex;
  align-items:   center;
  gap:           1rem;
  transition:    var(--transition);
  cursor:        pointer;
}
.stat-card.no-hover { cursor: default !important; }
.stat-card:hover:not(.no-hover) { border-color:var(--border-hover); transform:translateY(-2px); }
.stat-card[onclick]:not(.no-hover):hover { 
  border-color: var(--accent); 
  background: var(--surface2);
  box-shadow: 0 8px 32px rgba(0,0,0,0.4), 0 0 15px var(--accent-glow);
}

.portfolio-sub-grid {
  grid-template-columns: repeat(4, 1fr) !important;
  margin-left: auto;
  margin-right: auto;
}
.stat-card.active-subfilter {
  border-color: var(--accent) !important;
  background: var(--surface2) !important;
  box-shadow: 0 0 20px var(--accent-glow) !important;
}
.stat-icon  { font-size:1.75rem; }
.stat-number { font-size:2rem; font-weight:800; color:var(--white); line-height:1; }
.stat-label  { font-size:0.8rem; color:var(--muted); margin-top:0.2rem; }
.stat-card--warning { border-color:rgba(245,158,11,0.25); }
.stat-card--warning[onclick]:hover { border-color: rgba(245,158,11,0.5); }
.stat-card--warning .stat-number { color:#FCD34D; }
.stat-card--success { border-color:rgba(16,185,129,0.25); }
.stat-card--success[onclick]:hover { border-color: rgba(16,185,129,0.5); }
.stat-card--success .stat-number { color:#6EE7B7; }
.stat-card--danger  { border-color:rgba(239,68,68,0.25); }
.stat-card--danger[onclick]:hover { border-color: rgba(239,68,68,0.5); }
.stat-card--danger  .stat-number { color:#FCA5A5; }
.stat-card--archive { border-color:rgba(148,163,184,0.2); }
.stat-card--archive[onclick]:hover { border-color: rgba(148,163,184,0.4); }
.stat-card--archive .stat-number { color:#94A3B8; }

/* ============================================================
   FILTER BAR
   ============================================================ */
.filter-bar {
  display:     flex;
  align-items: center;
  gap:         0.5rem;
  margin-bottom: 1.5rem;
  flex-wrap:   wrap;
}
.filter-btn {
  padding:       0.45rem 1rem;
  border:        1px solid var(--border);
  border-radius: 50px;
  background:    transparent;
  color:         var(--muted);
  font-size:     0.85rem;
  font-weight:   500;
  transition:    var(--transition);
  display:       flex;
  align-items:   center;
  gap:           0.4rem;
}
.filter-btn:hover { color:var(--white); border-color:var(--border-hover); }
.filter-btn.active {
  background:    rgba(59,130,246,0.15);
  border-color:  var(--accent);
  color:         var(--accent-light);
}
.filter-right { margin-left:auto; }
.search-input {
  background:    var(--surface);
  border:        1px solid var(--border);
  border-radius: var(--radius);
  padding:       0.5rem 1rem;
  color:         var(--text);
  font-size:     0.88rem;
  width:         220px;
  transition:    var(--transition);
  outline:       none;
}
.search-input:focus { border-color:var(--accent); background:var(--surface2); }

/* ============================================================
   CLIENTS GRID
   ============================================================ */
.clients-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap:                   1.25rem;
}
.client-card {
  background:    var(--surface);
  border:        1px solid var(--border);
  border-radius: var(--radius-lg);
  padding:       1.5rem;
  display:       flex;
  flex-direction: column;
  gap:           1rem;
  transition:    var(--transition);
  position:      relative;
  overflow:      hidden;
}
.client-card::before {
  content:  '';
  position: absolute;
  top:0; left:0; right:0; height:3px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.client-card.border-green { border-color: var(--color-success); border-width: 1px; }
.client-card.border-red { border-color: var(--color-danger); border-width: 1px; }
.client-card.border-orange { border-color: var(--color-warning); border-width: 1px; }
.client-card.border-hard-red { border-color: #dc2626; border-width: 2px; box-shadow: 0 0 15px rgba(239, 68, 68, 0.2); }

.client-card.border-green::before  { background:var(--color-success); }
.client-card.border-yellow::before { background:var(--color-warning); }
.client-card.border-red::before    { background:var(--color-danger); }
.client-card.border-orange::before { background:var(--color-warning); }
.client-card.border-hard-red::before { background:#dc2626; }
.client-card:hover {
  border-color: var(--border-hover);
  transform:    translateY(-3px);
  box-shadow:   var(--shadow-glow);
}

/* Archived State */
.client-card.is-archived {
  opacity: 1;
  filter: none;
  background: #091021; /* Keep the slightly darker background */
}
/* Archived Site Conflict Fixes for Portfolio View */
/* Removed redundant display: none rule that was hiding the overlay */

/* Global Red Archive Overlay (applied everywhere) */
.client-card.is-archived::after,
.client-card.is-archived-portfolio::after,
.client-card[data-portfolio="0"]::after {
  content: '✖ ARŞİV / SİLİNDİ ✖' !important;
  position: absolute !important;
  inset: 0 !important;
  background: transparent !important;
  display: flex !important;
  align-items: center !important; 
  justify-content: center !important;
  color: #ef4444 !important;
  font-weight: 900 !important;
  font-size: 1.8rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.15em !important;
  z-index: 100 !important;
  text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000, 0 0 20px rgba(0,0,0,0.8) !important;
  pointer-events: none !important;
  transform: rotate(-3deg) !important;
}

/* Portfolio List Specific Overlays (Only for Green and Orange) */
.view-portfolio-list .client-card[data-portfolio="2"]::after {
  content: '✔ PORTFOLYODA YAYINLANABİLİR ✔' !important;
  position: absolute !important;
  inset: 0 !important;
  background: transparent !important;
  display: flex !important;
  align-items: center !important; 
  justify-content: center !important;
  color: var(--color-success) !important;
  font-weight: 900 !important;
  font-size: 1.5rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  z-index: 100 !important;
  text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000, 0 0 20px rgba(0,0,0,0.8) !important;
  pointer-events: none !important;
  transform: rotate(-2deg) !important;
}

.view-portfolio-list .client-card[data-portfolio="1"]::after {
  content: '▬ PORTFOLYODA YAYINLANAMAZ ▬' !important;
  position: absolute !important;
  inset: 0 !important;
  background: transparent !important;
  display: flex !important;
  align-items: center !important; 
  justify-content: center !important;
  color: var(--color-warning) !important;
  font-weight: 900 !important;
  font-size: 1.5rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  z-index: 100 !important;
  text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000, 0 0 20px rgba(0,0,0,0.8) !important;
  pointer-events: none !important;
  transform: rotate(-1deg) !important;
}



/* Portfolio Admin View (Dashboard) */
.client-card-portfolio-admin {
  display: none;
}

.view-portfolio-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 1rem !important;
}

.view-portfolio-list .client-card {
  flex-direction: row;
  align-items: center;
  padding: 1.25rem 2rem;
  min-height: auto;
  border-style: solid;
  border-width: 2px !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.03);
  background: var(--white);
}

.view-portfolio-list .client-card[data-portfolio="1"] {
  border-color: var(--color-success) !important;
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.15);
}

.view-portfolio-list .client-card[data-portfolio="0"] {
  border-color: var(--color-danger) !important;
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.15);
}

.view-portfolio-list .client-card[data-portfolio="1"]::before {
  background: var(--color-success) !important;
}

.view-portfolio-list .client-card[data-portfolio="0"]::before {
  background: var(--color-danger) !important;
}

.view-portfolio-list .client-card-portfolio-admin {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
}

.view-portfolio-list .client-card-header,
.view-portfolio-list .progress-section,
.view-portfolio-list .mini-checklist,
.view-portfolio-list .client-card-footer,
.view-portfolio-list .client-card-status {
  display: none !important;
}

.p-admin-info { display: flex; flex-direction: column; gap: 0.2rem; }
.p-admin-info strong { font-size: 1.1rem; color: #0F172A; }
.p-admin-info span { font-size: 0.85rem; color: #64748B; }

.portfolio-toggle-dot {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 3px solid #F1F5F9;
  cursor: pointer;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  position: relative;
}

.portfolio-toggle-dot::before {
    content: '';
    position: absolute;
    inset: 4px;
    border-radius: 50%;
    background: currentColor;
}

.portfolio-toggle-dot:hover {
  transform: scale(1.15);
}

.portfolio-toggle-dot.p-green { color: var(--color-success); border-color: rgba(16, 185, 129, 0.2); }
.portfolio-toggle-dot.p-red   { color: var(--color-danger);  border-color: rgba(239, 68, 68, 0.2); }

.archive-banner {
  background: #FEF2F2;
  border: 1px solid #FEE2E2;
  color: #991B1B;
  padding: 1rem;
  border-radius: var(--radius);
  margin-bottom: 2rem;
  text-align: center;
  font-weight: 700;
  letter-spacing: 0.05em;
  font-size: 0.85rem;
}


.client-card-header { 
  display: flex; 
  align-items: flex-start; 
  justify-content: space-between; 
  gap: 1rem;
  padding-bottom: 0.5rem;
}
.client-card-meta { 
  display: flex; 
  align-items: center; 
  gap: 1rem; 
  flex: 1; 
}
.client-details {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.client-card-badges {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.5rem;
  text-align: right;
}
.hosting-info {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--muted);
  letter-spacing: 0.05em;
}
.client-avatar {
  width:  52px; height:52px;
  background:    var(--gradient);
  border-radius: 12px;
  display:       flex;
  align-items:   center;
  justify-content: center;
  font-weight:   800;
  font-size:     1.1rem;
  color:         white;
  flex-shrink:   0;
  text-transform: uppercase;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
.client-card h3 { 
  font-size: 1.15rem; 
  color: var(--white); 
  font-weight: 800;
  margin: 0;
  line-height: 1.2;
}
.client-domain {
  font-size:  0.85rem;
  color:      var(--accent-light);
  display:    flex;
  align-items: center;
  gap: 0.4rem;
  transition: var(--transition);
  opacity: 0.9;
}
.client-domain:hover { color:var(--white); opacity: 1; }

.status-dot {
  width:10px; height:10px;
  border-radius:50%;
  flex-shrink:0;
}
.status-dot.status-green  { background:var(--color-success); box-shadow:0 0 8px rgba(16,185,129,0.6); }
.status-dot.status-yellow { background:var(--color-warning); box-shadow:0 0 8px rgba(245,158,11,0.6); }
.status-dot.status-red    { background:var(--color-danger);  box-shadow:0 0 8px rgba(239,68,68,0.6); }

/* Progress */
.progress-label {
  display:         flex;
  justify-content: space-between;
  font-size:       0.8rem;
  color:           var(--muted);
  margin-bottom:   0.4rem;
}
.progress-pct { font-weight:700; color:var(--text); }
.progress-bar {
  height:        6px;
  background:    rgba(255,255,255,0.07);
  border-radius: 50px;
  overflow:      hidden;
}
.progress-bar--lg { height:8px; }
.progress-fill {
  height:        100%;
  border-radius: 50px;
  transition:    width 0.6s cubic-bezier(0.4,0,0.2,1);
}

/* Mini Checklist Chips */
.mini-checklist {
  display:   flex;
  flex-wrap: wrap;
  gap:       0.35rem;
}
.checklist-pill {
  font-size:     0.72rem;
  padding:       0.2rem 0.55rem;
  border-radius: 50px;
  font-weight:   600;
  white-space:   nowrap;
  transition:    var(--transition);
}
.checklist-pill.done {
  background: rgba(16,185,129,0.12);
  color:      #6EE7B7;
  border:     1px solid rgba(16,185,129,0.25);
}
.checklist-pill.todo {
  background: rgba(239,68,68,0.1);
  color:      #FCA5A5;
  border:     1px solid rgba(239,68,68,0.2);
}

/* Card Footer */
.client-card-footer {
  display:     flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 0.75rem;
  border-top:  1px solid var(--border);
}
.revision-badge {
  font-size:  0.8rem;
  color:      var(--muted);
}
.revision-badge.has-revisions {
  color:       #FCD34D;
  font-weight: 600;
}

/* ============================================================
   EMPTY STATE
   ============================================================ */
.empty-state {
  text-align:  center;
  padding:     5rem 2rem;
  color:       var(--muted);
}
.empty-icon { font-size:3.5rem; margin-bottom:1rem; }
.empty-state h2 { color:var(--white); font-size:1.4rem; margin-bottom:0.5rem; }
.empty-state p  { margin-bottom:1.5rem; }
.empty-revisions {
  text-align: center;
  padding:    3rem 1rem;
  color:      var(--muted);
  font-size:  0.9rem;
}
.empty-revisions span { display:block; font-size:2.5rem; margin-bottom:0.75rem; }

/* ============================================================
   SITE DETAIL PAGE
   ============================================================ */
.site-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  margin:          2rem 0 1.5rem;
  gap:             1rem;
  flex-wrap:       wrap;
}
.site-header-left {
  display:     flex;
  align-items: center;
  gap:         1.1rem;
}
.site-header h1 { font-size:1.7rem; color:var(--white); }
.site-header-actions { display:flex; gap:0.75rem; flex-wrap:wrap; }

/* Completion Banner */
.completion-banner {
  background:    var(--surface);
  border:        1px solid var(--border);
  border-radius: var(--radius-lg);
  padding:       1.25rem 1.5rem;
  margin-bottom: 1.5rem;
}
.completion-banner.complete {
  background:    rgba(16,185,129,0.07);
  border-color:  rgba(16,185,129,0.3);
}
.completion-info {
  display:         flex;
  justify-content: space-between;
  margin-bottom:   0.6rem;
  font-size:       0.9rem;
  color:           var(--muted);
}
.completion-info strong { color:var(--white); font-size:1.1rem; }

/* Two-column layout */
.site-layout {
  display:               grid;
  grid-template-columns: 440px 1fr;
  gap:                   1.5rem;
  align-items:           start;
}

/* Panel */
.panel {
  background:    var(--surface);
  border:        1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow:      hidden;
}
.panel-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         1.25rem 1.5rem;
  border-bottom:   1px solid var(--border);
  background:      rgba(255,255,255,0.02);
}
.panel-header h2 { font-size:1rem; color:var(--white); }
.badge-count {
  background:    rgba(59,130,246,0.15);
  color:         var(--accent-light);
  border:        1px solid rgba(59,130,246,0.25);
  padding:       0.2rem 0.65rem;
  border-radius: 50px;
  font-size:     0.78rem;
  font-weight:   600;
}

/* Checklist List */
.checklist-list { display:flex; flex-direction:column; }
.checklist-item {
  display:     flex;
  align-items: center;
  justify-content: space-between;
  padding:     0.9rem 1.5rem;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  transition:  var(--transition);
}
.checklist-item:last-child { border-bottom:none; }
.checklist-item.done { background:rgba(16,185,129,0.04); }
.checklist-label {
  display:     flex;
  align-items: center;
  gap:         0.85rem;
  cursor:      pointer;
  flex:        1;
}
.checklist-text {
  font-size:   0.9rem;
  font-weight: 500;
  color:       var(--text);
}
.checklist-item.done .checklist-text { color:var(--muted); text-decoration:line-through; }

.checklist-status { flex-shrink:0; }
.badge-done {
  background:    rgba(16,185,129,0.15);
  color:         #6EE7B7;
  border:        1px solid rgba(16,185,129,0.3);
  padding:       0.2rem 0.6rem;
  border-radius: 50px;
  font-size:     0.75rem;
  font-weight:   600;
}
.badge-todo {
  background: rgba(239,68,68,0.1);
  color:      #FCA5A5;
  border:     1px solid rgba(239,68,68,0.25);
  padding:    0.2rem 0.6rem;
  border-radius:50px;
  font-size:  0.75rem;
  font-weight:600;
}

/* Toggle Switch */
.toggle-switch { position:relative; display:inline-block; width:40px; height:22px; flex-shrink:0; }
.toggle-input  { opacity:0; width:0; height:0; position:absolute; }
.toggle-slider {
  position:        absolute;
  inset:           0;
  background:      rgba(255,255,255,0.1);
  border:          1px solid var(--border);
  border-radius:   50px;
  transition:      var(--transition);
  cursor:          pointer;
}
.toggle-slider::before {
  content:       '';
  position:      absolute;
  width:         16px; height:16px;
  left:          2px; top:50%;
  transform:     translateY(-50%);
  background:    var(--muted);
  border-radius: 50%;
  transition:    var(--transition);
}
.toggle-input:checked + .toggle-slider {
  background:    rgba(16,185,129,0.25);
  border-color:  var(--color-success);
}
.toggle-input:checked + .toggle-slider::before {
  transform: translate(18px, -50%);
  background: var(--color-success);
}

/* Notes box */
.notes-box {
  margin: 1rem 1.5rem 1.5rem;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem;
}
.notes-box h4 { font-size:0.82rem; color:var(--accent-light); margin-bottom:0.4rem; font-weight:600; }
.notes-box p  { font-size:0.87rem; color:var(--muted); }

/* ============================================================
   REVISION PANEL
   ============================================================ */
.revision-filters {
  display:    flex;
  gap:        0.4rem;
  padding:    0.75rem 1.25rem;
  border-bottom: 1px solid var(--border);
  flex-wrap:  wrap;
}
.rev-filter {
  padding:       0.35rem 0.85rem;
  border:        1px solid var(--border);
  border-radius: 50px;
  background:    transparent;
  color:         var(--muted);
  font-size:     0.8rem;
  font-weight:   500;
  transition:    var(--transition);
  display:       flex;
  align-items:   center;
  gap:           0.35rem;
}
.rev-filter:hover   { color:var(--white); border-color:var(--border-hover); }
.rev-filter.active  { background:rgba(59,130,246,0.15); border-color:var(--accent); color:var(--accent-light); }

.dot {
  width:7px; height:7px; border-radius:50%;
}
.dot-pending  { background:var(--color-danger); }
.dot-progress { background:var(--color-warning); }
.dot-done     { background:var(--color-success); }

/* Revision List */
.revision-list { padding:0.75rem; display:flex; flex-direction:column; gap:0.5rem; }
.revision-item {
  display:       flex;
  align-items:   flex-start;
  gap:           0.75rem;
  background:    var(--surface2);
  border:        1px solid var(--border);
  border-radius: var(--radius);
  padding:       1rem;
  transition:    var(--transition);
  cursor:        default;
}
.revision-item:hover { border-color:var(--border-hover); }

/* Status left border */
.revision-item[data-status="pending"]     { border-left:3px solid var(--color-danger); }
.revision-item[data-status="in_progress"] { border-left:3px solid var(--color-warning); }
.revision-item[data-status="done"]        { border-left:3px solid var(--color-success); }

.rev-drag-handle {
  color:     var(--muted);
  cursor:    grab;
  font-size: 1.1rem;
  padding:   0.1rem 0;
  user-select:none;
  flex-shrink:0;
}
.rev-drag-handle:active { cursor:grabbing; }

.rev-body { flex:1; display:flex; flex-direction:column; gap:0.4rem; min-width:0; }
.rev-header {
  display:     flex;
  align-items: center;
  justify-content: space-between;
  gap:         0.5rem;
  flex-wrap:   wrap;
}
.rev-title { font-weight:600; color:var(--white); font-size:0.9rem; }
.rev-actions { display:flex; align-items:center; gap:0.35rem; flex-shrink:0; }
.rev-desc { font-size:0.82rem; color:var(--muted); line-height:1.5; }

.rev-status-select {
  background:    var(--surface3);
  border:        1px solid var(--border);
  border-radius: 6px;
  padding:       0.25rem 0.5rem;
  font-size:     0.78rem;
  color:         var(--text);
  cursor:        pointer;
  outline:       none;
}

.rev-status-badge {
  display:       inline-block;
  padding:       0.2rem 0.65rem;
  border-radius: 50px;
  font-size:     0.75rem;
  font-weight:   600;
  align-self:    flex-start;
}
.rev-status-badge.status-pending     { background:rgba(239,68,68,0.12);   color:#FCA5A5; border:1px solid rgba(239,68,68,0.3); }
.rev-status-badge.status-in_progress { background:rgba(245,158,11,0.12);  color:#FCD34D; border:1px solid rgba(245,158,11,0.3); }
.rev-status-badge.status-done        { background:rgba(16,185,129,0.12);  color:#6EE7B7; border:1px solid rgba(16,185,129,0.3); }

/* Drag ghost */
.sortable-ghost { opacity:0.3; background:var(--surface3); }

/* ============================================================
   MODAL
   ============================================================ */
.modal-overlay {
  position:  fixed;
  inset:     0;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(6px);
  z-index:   2000;
  display:   flex;
  align-items: center;
  justify-content: center;
  padding:   1rem;
  animation:  fadeIn 0.2s ease;
}
.modal-overlay.hidden { display:none; }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }

.modal {
  background:    var(--surface);
  border:        1px solid var(--border-hover);
  border-radius: var(--radius-xl);
  width:         100%;
  max-width:     520px;
  box-shadow:    0 24px 60px rgba(0,0,0,0.7);
  animation:     slideUp 0.25s cubic-bezier(0.4,0,0.2,1);
}
@keyframes slideUp { from{opacity:0;transform:translateY(24px)} to{opacity:1;transform:translateY(0)} }

.modal-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         1.25rem 1.5rem;
  border-bottom:   1px solid var(--border);
}
.modal-header h2 { font-size:1.05rem; color:var(--white); }
.modal-close {
  background: none;
  border:     none;
  color:      var(--muted);
  font-size:  1.1rem;
  cursor:     pointer;
  transition: var(--transition);
  padding:    0.25rem;
}
.modal-close:hover { color:var(--white); }
.modal-body { padding:1.5rem; display:flex; flex-direction:column; gap:1rem; }
.modal-footer {
  display:         flex;
  justify-content: flex-end;
  gap:             0.75rem;
  padding-top:     0.5rem;
}

/* ============================================================
   TOAST
   ============================================================ */
.toast-container {
  position:   fixed;
  bottom:     1.5rem;
  right:      1.5rem;
  z-index:    9999;
  display:    flex;
  flex-direction: column;
  gap:        0.5rem;
}
.toast {
  background:    var(--surface2);
  border:        1px solid var(--border-hover);
  border-radius: var(--radius);
  padding:       0.75rem 1.25rem;
  color:         var(--white);
  font-size:     0.88rem;
  font-weight:   500;
  box-shadow:    var(--shadow);
  animation:     toastIn 0.3s cubic-bezier(0.4,0,0.2,1);
}
@keyframes toastIn { from{opacity:0;transform:translateX(60px)} to{opacity:1;transform:translateX(0)} }

/* ============================================================
   UTILITIES
   ============================================================ */
.hidden { display:none !important; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .stats-grid { grid-template-columns:repeat(2,1fr); }
  .site-layout { grid-template-columns:1fr; }
}
@media (max-width: 640px) {
  .stats-grid  { grid-template-columns:1fr 1fr; }
  .clients-grid { grid-template-columns:1fr; }
  .page-header { flex-direction:column; align-items:flex-start; }
  .site-header { flex-direction:column; align-items:flex-start; }
  .filter-right { width:100%; }
  .search-input { width:100%; }
  .modal { border-radius:var(--radius-lg); }
}
@media (max-width: 400px) {
  .stats-grid { grid-template-columns:1fr; }
}

/* ============================================================
   CONSOLIDATED PORTFOLIO STYLES (FINAL SOURCE OF TRUTH)
   ============================================================ */

/* Common Portfolio Status Colors */
.p-green  { background: var(--color-success) !important; color: var(--color-success) !important; box-shadow: 0 0 10px rgba(16,185,129,0.4) !important; }
.p-orange { background: var(--color-warning) !important; color: var(--color-warning) !important; box-shadow: 0 0 10px rgba(245,158,11,0.4) !important; }
.p-red    { background: var(--color-danger)  !important; color: var(--color-danger)  !important; box-shadow: 0 0 10px rgba(239, 68, 68, 0.4)  !important; }

/* Base Portfolio Grid Layout Override */
.portfolio-sub-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 1rem !important;
  margin-top: 2rem !important;
  margin-bottom: 2rem !important;
}

/* Stat Cards in Portfolio View */
.portfolio-sub-grid .stat-card {
  cursor: pointer !important;
}
.portfolio-sub-grid .stat-card.active-subfilter {
  border-color: var(--accent) !important;
  background: var(--surface2) !important;
  box-shadow: 0 0 20px var(--accent-glow) !important;
}

/* Base Portfolio List Item Style */
.view-portfolio-list .client-card {
  padding-left: 5.5rem !important;
  background: #000 !important;
  opacity: 1 !important;
  filter: none !important;
  border-width: 2px !important;
  position: relative !important;
  overflow: hidden !important;
}
.view-portfolio-list .client-card::before { display: none !important; }

/* Border Colors by Portfolio Type */
.view-portfolio-list .client-card[data-portfolio="2"] { border-color: var(--color-success) !important; }
.view-portfolio-list .client-card[data-portfolio="1"] { border-color: var(--color-warning) !important; }
.view-portfolio-list .client-card[data-portfolio="0"] { border-color: var(--color-danger) !important; }

/* Numbering on the left */
.portfolio-number {
  position: absolute;
  left: 1.5rem;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  text-align: center;
  font-size: 1.25rem;
  font-weight: 800;
  color: #fff;
  opacity: 0.3;
  pointer-events: none;
  z-index: 2;
}

/* Info Layout: Logo, Business Name, Domain */
.p-admin-info {
  display: flex !important;
  align-items: center !important;
  gap: 1.25rem !important;
  flex-direction: row !important;
}
.p-card-logo, .p-card-logo-placeholder {
  width: 48px; height: 48px;
  border-radius: 8px;
  object-fit: contain;
  background: rgba(255,255,255,0.05);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem;
  border: 1px solid rgba(255,255,255,0.1);
  flex-shrink: 0;
}
.p-admin-text { display: flex; flex-direction: column; gap: 0.15rem; }
.p-admin-text strong { font-size: 1.2rem; color: #fff !important; font-weight: 700; }
.p-card-domain { font-size: 0.9rem !important; color: #94A3B8 !important; }

/* Status Interaction Dot (Green/Orange/Red) */
.portfolio-toggle-dot {
  width: 42px; height: 42px;
  border-radius: 50% !important;
  border: 2px solid rgba(255,255,255,0.2) !important;
  background: currentColor !important;
  position: relative;
  transition: transform 0.2s;
  cursor: pointer !important;
}
.portfolio-toggle-dot::before { display: none !important; }

/* --- ARCHIVED PORTFOLIO ITEM OVERLAY --- */
.client-card.is-archived-portfolio {
  opacity: 1 !important;
  filter: none !important;
}

/* User Request: logo isim ve domaini canli renklerde kalsin (Keep opacity at 1) */
.client-card.is-archived-portfolio .p-admin-info,
.client-card.is-archived-portfolio .portfolio-number { 
  opacity: 1 !important; 
}

/* Large Red Overlay for Archived Items */
/* Rule moved to line 645 for better global application */


/* Mobile Adjustments for Portfolio */
@media (max-width: 768px) {
  .portfolio-sub-grid { grid-template-columns: repeat(2, 1fr) !important; }
}