/* Components CSS */

/* Navbar */
.navbar{position:fixed;top:0;left:0;right:0;z-index:1000;padding:16px 0;transition:var(--transition);background:var(--navbar-bg);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid var(--border)}
.navbar.scrolled{padding:10px 0}
.navbar .container, .navbar .container-fluid{display:flex;align-items:center;justify-content:space-between}
.nav-logo{display:flex;align-items:center;text-decoration:none;transition:var(--transition);background:none !important;padding:0 !important;border:none !important;box-shadow:none !important}
.nav-logo img{height:32px;width:auto;display:block;object-fit:contain;background:transparent !important}
.logo-dark { display: none !important; }
[data-theme="dark"] .logo-light { display: none !important; }
[data-theme="dark"] .logo-dark { display: block !important; }
.nav-links{display:flex;align-items:center;gap:12px;list-style:none}
.nav-links a,.nav-dropdown-trigger{padding:8px 16px;border-radius:var(--radius-sm);color:var(--text-secondary);font-weight:500;font-size:0.9rem;transition:var(--transition);background:none;border:none;cursor:pointer;display:inline-flex;align-items:center;gap:4px;font-family:var(--font)}
.nav-links a:hover,.nav-links a.active,.nav-dropdown-trigger:hover{color:var(--text-primary);background:var(--glass-hover)}
.nav-cta{display:flex;align-items:center;gap:8px}

/* Theme Toggle */
.theme-toggle{position:relative}
.theme-toggle svg{transition:var(--transition)}
[data-theme="dark"] .icon-moon{display:none}
[data-theme="light"] .icon-sun{display:none}

/* Mega Menu */
.nav-dropdown{position:relative}
.mega-menu{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(8px);width:1000px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:24px;box-shadow:var(--shadow-xl);opacity:0;visibility:hidden;transition:opacity 0.25s ease,transform 0.25s ease,visibility 0.25s;pointer-events:none;z-index:100}
.nav-dropdown:hover .mega-menu,.nav-dropdown.active .mega-menu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);pointer-events:auto}
.mega-menu-grid{display:flex;gap:32px}
.mega-column{flex:1;display:flex;flex-direction:column;gap:8px}
.mega-title{font-size:0.7rem;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.1em;margin-bottom:12px;padding-left:16px}
.mega-item{display:flex;align-items:flex-start;gap:14px;padding:12px 16px;border-radius:var(--radius-sm);transition:var(--transition);text-decoration:none;color:var(--text-primary)}
.mega-item:hover{background:var(--glass-hover);color:var(--text-primary);transform:translateX(4px)}
.mega-icon{width:36px;height:36px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;font-size:1.1rem;flex-shrink:0}
.mega-item strong{display:block;font-size:0.88rem;font-weight:600;margin-bottom:2px;color:var(--text-primary);white-space:nowrap}
.mega-item span{font-size:0.75rem;color:var(--text-muted);line-height:1.4}


/* Mobile nav */
.mobile-toggle{display:none;background:none;border:none;color:var(--text-primary);font-size:1.5rem;cursor:pointer}
@media(max-width:900px){
  .nav-links{position:fixed;top:0;right:-100%;width:300px;height:100vh;flex-direction:column;background:var(--bg-secondary);padding:80px 24px 24px;transition:var(--transition);border-left:1px solid var(--border);z-index:1001;overflow-y:auto;align-items:stretch}
  .nav-links.open{right:0}
  .mobile-toggle{display:block}
  .nav-cta .btn{display:none}
  .mega-menu{position:static;transform:none;width:100%;opacity:0;visibility:hidden;max-height:0;overflow:hidden;padding:0;border:none;box-shadow:none;transition:max-height 0.3s ease,opacity 0.3s ease,padding 0.3s ease}
  .nav-dropdown.active .mega-menu{opacity:1;visibility:visible;max-height:600px;padding:12px 0;transform:none}
  .mega-menu-grid{grid-template-columns:1fr}
}

/* Footer */
.footer{background:var(--bg-secondary);border-top:1px solid var(--border);padding:64px 0 32px;width:100%}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1fr;gap:40px;margin-bottom:48px}
.footer-brand p{color:var(--text-secondary);margin-top:12px;font-size:0.9rem;max-width:300px}
.footer-col h4{margin-bottom:16px;color:var(--text-primary);font-size:0.85rem;text-transform:uppercase;letter-spacing:0.1em}
.footer-col a{display:block;color:var(--text-muted);font-size:0.9rem;padding:4px 0;transition:var(--transition)}
.footer-col a:hover{color:var(--text-primary);padding-left:4px}
.footer-bottom{border-top:1px solid var(--border);padding-top:24px;display:flex;justify-content:space-between;align-items:center;color:var(--text-muted);font-size:0.85rem}
@media(max-width:768px){.footer-grid{grid-template-columns:1fr 1fr;gap:32px}.footer-bottom{flex-direction:column;gap:12px}}
@media(max-width:480px){.footer-grid{grid-template-columns:1fr}}

/* Color Card */
.color-card{border-radius:var(--radius);overflow:hidden;transition:var(--transition);border:1px solid var(--border);background:var(--bg-card);position:relative;cursor:pointer}
.color-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--border-hover)}
.color-card .swatch{height:180px;transition:var(--transition);position:relative}
.color-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-xl);border-color:var(--border-hover)}
.color-card .info{padding:16px 14px;text-align:center}
.color-card .info .name{font-weight:500;font-size:0.95rem;margin:0;color:var(--text-primary);letter-spacing:0.02em}
.color-card .info .hex-row{display:flex;align-items:center;justify-content:space-between;gap:8px}
.color-card .info .hex{color:var(--text-secondary);font-size:0.78rem;font-family:monospace}
.color-card .info .formats{display:flex;gap:4px}
.color-card .info .format-tag{font-size:0.62rem;padding:2px 6px;border-radius:4px;background:var(--glass);color:var(--text-muted);font-family:monospace;white-space:nowrap}
.color-card .card-link{position:absolute;inset:0;z-index:1}

/* Palette Card */
.palette-card{border-radius:var(--radius);overflow:hidden;cursor:pointer;transition:var(--transition);border:1px solid var(--border);background:var(--bg-card)}
.palette-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--border-hover)}
.palette-card .colors{display:flex;height:180px}
.palette-card .colors .stripe{flex:1;transition:var(--transition);position:relative}
.palette-card .colors .stripe:hover{flex:1.5}
.palette-card .colors .stripe .hex-tip{position:absolute;bottom:4px;left:50%;transform:translateX(-50%);font-size:0.65rem;font-family:monospace;opacity:0;transition:var(--transition);white-space:nowrap;padding:2px 6px;border-radius:4px;background:rgba(0,0,0,0.7);color:#fff}
.palette-card .colors .stripe:hover .hex-tip{opacity:1}
.palette-card .meta{padding:12px 16px;display:flex;justify-content:space-between;align-items:center}
.palette-card .meta .name{font-weight:500;font-size:0.95rem;color:var(--text-primary);letter-spacing:0.02em}
.palette-card .meta .tags{display:flex;gap:6px}
.palette-card .meta .tag{font-size:0.62rem;padding:1px 6px;border-radius:var(--radius-full);background:var(--glass);color:var(--text-muted);font-weight:500;letter-spacing:0.01em}

/* Toast */
/* Sabit sağ-alt; yalnız #toast-container iken sınıf yoktu → toast DOM sonunda görünmezdi */
#toast-container,
.toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.toast{padding:12px 16px 12px 14px;border-radius:var(--radius);background:var(--bg-card);border:1px solid var(--border);color:var(--text-primary);font-size:0.85rem;font-weight:500;animation:toastIn 0.3s ease;display:flex;align-items:center;gap:10px;box-shadow:var(--shadow-lg);min-width:240px;max-width:400px}
.toast-icon{flex-shrink:0;display:flex;align-items:center}
.toast-msg{flex:1;line-height:1.4}
.toast-close{background:none;border:none;color:var(--text-muted);font-size:0.75rem;cursor:pointer;padding:4px;opacity:0.5;transition:var(--transition);flex-shrink:0}
.toast-close:hover{opacity:1;color:var(--text-primary)}
.toast-success{border-left:3px solid #22c55e}
.toast-error{border-left:3px solid #ef4444}
.toast-info{border-left:3px solid #3b82f6}
@keyframes toastIn{from{opacity:0;transform:translateX(40px) scale(0.95)}to{opacity:1;transform:translateX(0) scale(1)}}
@keyframes toastOut{from{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(40px)}}

/* Modal */
.modal-overlay{position:fixed;inset:0;z-index:5000;background:rgba(0,0,0,0.7);backdrop-filter:blur(4px);display:none;align-items:center;justify-content:center}
.modal-overlay.active{display:flex}
.modal{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:32px;max-width:560px;width:90%;max-height:90vh;overflow-y:auto;animation:modalIn 0.3s ease}
@keyframes modalIn{from{opacity:0;transform:scale(0.95)}to{opacity:1;transform:scale(1)}}
.modal h3{margin-bottom:16px}

/* Inputs */
.input-group{position:relative}
.input-group input{width:100%;padding:12px 16px;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--bg-elevated);color:var(--text-primary);font-size:0.9rem;transition:var(--transition)}
.input-group input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-subtle)}
.input-group input::placeholder{color:var(--text-muted)}
.search-input{padding-left:44px !important}
.search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--text-muted);pointer-events:none}

/* Tabs */
.tabs{display:flex;gap:4px;background:var(--bg-secondary);padding:4px;border-radius:var(--radius);border:1px solid var(--border);overflow-x:auto}
.tab{padding:8px 20px;border-radius:var(--radius-sm);font-size:0.85rem;font-weight:500;color:var(--text-secondary);background:transparent;transition:var(--transition);white-space:nowrap;cursor:pointer;border:none}
.tab.active,.tab:hover{background:var(--bg-elevated);color:var(--text-primary)}
.tab.active{background:var(--accent);color:#fff}

/* Skeleton */
.skeleton{background:linear-gradient(90deg,var(--bg-card) 25%,var(--bg-elevated) 50%,var(--bg-card) 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:var(--radius-sm)}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* Like Buttons */
.palette-likes {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-secondary);
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 0.8rem;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid var(--border);
}
.palette-likes:hover {
  background: var(--bg-elevated);
  transform: scale(1.05);
  color: var(--accent);
  border-color: var(--accent);
}
.palette-likes.active {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
  border-color: rgba(239, 68, 68, 0.3);
}
.palette-likes.active svg {
  fill: #ef4444;
}
.trending-color-item .item-likes {
  position: absolute;
  top: 12px;
  right: 12px;
  background: rgba(0,0,0,0.4);
  color: #fff;
  padding: 4px 8px;
  border-radius: 20px;
  font-size: 0.65rem;
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid rgba(255,255,255,0.1);
  z-index: 5;
}
.trending-color-item .item-likes:hover {
  background: rgba(239, 68, 68, 0.8);
  transform: scale(1.1);
}
.trending-color-item .item-likes.active {
  background: #ef4444;
}
.color-like-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 0;
  transform: scale(0.8);
  z-index: 10;
}
.color-card:hover .color-like-btn {
  opacity: 1;
  transform: scale(1);
}
.color-like-btn:hover {
  background: #fff;
  color: #ef4444;
  transform: scale(1.1);
}
.color-like-btn.active {
  opacity: 1;
  transform: scale(1);
  background: #fff;
  color: #ef4444;
}
.color-like-btn svg {
  fill: currentColor;
}