@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&display=swap');

/* ==========================================================================
   CSS Değişkenleri (Variables) - NEO-BRUTALISM THEME
   ========================================================================== */
:root {
  /* Renk Paleti - Neo-Brutalism */
  --bg-primary: #f5f5f0;
  --bg-secondary: #ffffff;
  --surface: #ffffff;
  --border: #000000;
  --border-alt: #000000;
  --accent-primary: #FF5A5F; /* Vibrant Red */
  --accent-secondary: #FFC043; /* Vibrant Yellow */
  --accent-tertiary: #4A90E2; /* Vibrant Blue */
  --text-primary: #000000;
  --text-secondary: #333333;
  --success: #39ff14;
  --error: #ff003c;
  
  /* Fontlar */
  --font-body: 'Space Grotesk', sans-serif;
  --font-heading: 'Space Grotesk', sans-serif;

  /* Geçişler */
  --transition-default: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ==========================================================================
   Sıfırlama (Reset) & Global Stiller
   ========================================================================== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  background-color: var(--bg-primary);
  /* Neo-Brutalism Noktalı Zemin (Tasarım Tahtası Hissi) */
  background-image: radial-gradient(#000 1px, transparent 1px);
  background-size: 20px 20px;
  background-position: center center;
  color: var(--text-primary);
  line-height: 1.6;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 800;
  text-transform: uppercase;
  color: #000;
}

/* Özel Kaydırma Çubuğu (Scrollbar) */
::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}
::-webkit-scrollbar-track {
  background: var(--bg-secondary);
  border-left: 2px solid var(--border);
}
::-webkit-scrollbar-thumb {
  background: var(--accent-primary);
  border: 2px solid var(--bg-secondary);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--accent-secondary);
}

/* ==========================================================================
   Mizanpaj Yapısı (Layout Structure)
   ========================================================================== */

/* Başlık (Header) */
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 64px;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  background-color: rgba(10, 10, 15, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 4px 20px rgba(228, 168, 83, 0.05);
}

.header-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 700;
  color: var(--accent-primary);
}

/* Yükleme Alanı (Upload Zone) */
.upload-zone {
  max-width: 700px;
  margin: 100px auto 40px;
  border: 4px solid var(--border);
  border-radius: 12px;
  padding: 60px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background-color: var(--bg-secondary);
  cursor: pointer;
  transition: var(--transition-default);
  box-shadow: 8px 8px 0 var(--border);
  position: relative;
}

.upload-zone::before {
  content: 'FOTOĞRAF YÜKLE';
  position: absolute;
  top: -16px;
  background: var(--accent-secondary);
  border: 2px solid var(--border);
  border-radius: 16px;
  padding: 4px 16px;
  color: var(--border);
  font-weight: 800;
  font-size: 14px;
}

.upload-zone:hover, .upload-zone.dragover {
  background-color: #FAFAFA;
  transform: translate(-4px, -4px);
  box-shadow: 12px 12px 0 var(--border);
}

.upload-zone:hover::before {
  background: var(--accent-primary);
  color: #fff;
}

.upload-icon {
  font-size: 64px;
  color: var(--border);
  transition: var(--transition-default);
}

.upload-zone:hover .upload-icon {
  transform: scale(1.1) rotate(5deg);
}

/* Editör Bölümü (Editor Section) */
.editor-section {
  display: none; /* Varsayılan olarak gizli */
  max-width: 1200px;
  margin: 100px auto 40px;
  padding: 0 24px;
  animation: fadeIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.editor-section.active {
  display: block;
}

.editor-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}

.canvas-wrapper {
  background: var(--bg-secondary);
  border-radius: 12px;
  padding: 24px;
  border: 4px solid var(--border);
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 8px 8px 0 var(--border);
  position: relative;
}

.canvas-label {
  font-size: 13px;
  font-weight: 800;
  color: #000;
  margin-bottom: 16px;
  margin-top: 0;
  text-transform: uppercase;
  letter-spacing: 1px;
  background: var(--accent-secondary);
  padding: 6px 16px;
  border-radius: 20px;
  border: 3px solid #000;
}

.canvas-wrapper canvas {
  max-width: 100%;
  border-radius: 8px;
  border: 3px solid #000;
  background-color: #000;
  transition: transform 0.3s ease;
}

.canvas-wrapper:hover canvas {
  transform: scale(1.02);
}

/* Kontrol Paneli (Controls Panel) */
.controls-panel {
  max-width: 800px;
  margin: 40px auto;
  background: var(--bg-secondary);
  border-radius: 12px;
  padding: 32px;
  border: 4px solid var(--border);
  box-shadow: 10px 10px 0 var(--border);
  position: relative;
}

.control-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 24px;
}

.control-group label {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  letter-spacing: 0.5px;
}

.control-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Premium Range Slider */
input[type=range] {
  -webkit-appearance: none;
  width: 100%;
  background: transparent;
}
input[type=range]:focus {
  outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 4px;
  cursor: pointer;
  background: rgba(255,255,255,0.1);
  border-radius: 4px;
}
input[type=range]::-webkit-slider-thumb {
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background: var(--accent-primary);
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -8px;
  box-shadow: 0 0 15px rgba(228, 168, 83, 0.5);
  border: 2px solid #fff;
  transition: transform 0.2s;
}
input[type=range]::-webkit-slider-thumb:hover {
  transform: scale(1.2);
}

/* İnce Ayar Sliderları 2 Sütunlu Grid */
.adjustments-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 24px;
}

.adj-value {
  font-size: 13px;
  font-weight: 600;
  color: var(--accent-primary);
  min-width: 32px;
  text-align: right;
}

@media (max-width: 600px) {
  .adjustments-grid {
    grid-template-columns: 1fr;
  }
}

/* Palet Bölümü (Palette Section) */
.palette-section, .custom-palette-section {
  max-width: 1200px;
  margin: 40px auto;
  padding: 0 24px;
}

.section-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 24px;
  margin-bottom: 24px;
  color: var(--text-primary);
}

.palette-grid {
  display: flex;
  overflow-x: auto;
  gap: 24px;
  padding: 10px 0 20px;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
}

/* Özel Scrollbar Tasarımı (Neo-Brutalism stiline uygun) */
.palette-grid::-webkit-scrollbar {
  height: 12px;
}

.palette-grid::-webkit-scrollbar-track {
  background: var(--bg-primary);
  border: 2px solid var(--border);
  border-radius: 8px;
}

.palette-grid::-webkit-scrollbar-thumb {
  background-color: var(--accent-primary);
  border: 2px solid var(--border);
  border-radius: 8px;
}

.palette-grid::-webkit-scrollbar-thumb:hover {
  background-color: var(--accent-secondary);
}

.palette-card {
  background: var(--bg-secondary);
  border-radius: 12px;
  padding: 16px;
  border: 3px solid var(--border);
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 200px;
  max-width: 200px;
  scroll-snap-align: start;
  opacity: 1 !important;
  position: relative;
  overflow: hidden;
  box-shadow: 6px 6px 0 var(--border);
}

/* Dinamik Önizleme (Thumbnail) için alan */
.palette-thumbnail {
  width: 100%;
  height: 120px;
  border-radius: 8px;
  border: 3px solid var(--border);
  background-color: var(--bg-primary);
    background-image: url("data:image/jpeg;base64,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");
    filter: sepia(0.2) contrast(1.1);
  background-size: cover;
  background-position: center;
  position: relative;
}



/* Staggered animation for palette cards */
.palette-card:nth-child(1) { animation-delay: 0.1s; }
.palette-card:nth-child(2) { animation-delay: 0.15s; }
.palette-card:nth-child(3) { animation-delay: 0.2s; }
.palette-card:nth-child(4) { animation-delay: 0.25s; }
.palette-card:nth-child(5) { animation-delay: 0.3s; }

.palette-card:hover {
  transform: translate(-4px, -4px);
  background: var(--bg-primary);
  box-shadow: 10px 10px 0 var(--border);
}

.palette-card.active {
  background: var(--accent-secondary);
  border: 3px solid var(--border);
  box-shadow: inset 0 0 0 2px var(--border), 6px 6px 0 var(--border);
  transform: translate(-2px, -2px);
}

.palette-colors {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.color-circle {
  width: 24px;
  height: 24px;
  border-radius: 0;
  border: 2px solid #fff;
}

.palette-info {
  display: flex;
  flex-direction: column;
}

.palette-name {
  font-weight: 600;
  font-size: 14px;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.palette-meta {
  font-size: 12px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Yeni Palet Ekle Düğmesi (Add Palette Button) */
.btn-add-palette {
  background-color: transparent;
  border: 2px dashed var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 8px;
  color: var(--text-secondary);
}

.btn-add-palette:hover {
  border-color: var(--accent-primary);
  color: var(--accent-primary);
  box-shadow: 0 0 15px rgba(228, 168, 83, 0.1);
}

.btn-add-palette i {
  font-size: 24px;
}

/* Paylaşım Çubuğu (Share Toolbar) */
.share-toolbar {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 24px;
  background-color: rgba(30, 30, 46, 0.8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 32px;
  border: 1px solid var(--border);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
  z-index: 90;
}

/* Modal */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(10, 10, 15, 0.8);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: var(--transition-default);
}

.modal-overlay.active {
  opacity: 1;
  visibility: visible;
}

.modal {
  background-color: var(--surface);
  width: 90%;
  max-width: 500px;
  border-radius: 16px;
  padding: 24px;
  border: 1px solid var(--border);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
  transform: translateY(40px);
  transition: var(--transition-default);
  position: relative;
}

.modal-overlay.active .modal {
  transform: translateY(0);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.btn-close {
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 24px;
  cursor: pointer;
  transition: var(--transition-default);
}

.btn-close:hover {
  color: var(--error);
}

.color-picker-group {
  display: flex;
  justify-content: space-between;
  margin-bottom: 24px;
}

.color-picker-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.color-picker-item input[type="color"] {
  -webkit-appearance: none;
  border: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  padding: 0;
  background: none;
}
.color-picker-item input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 0;
}
.color-picker-item input[type="color"]::-webkit-color-swatch {
  border: 2px solid var(--border);
  border-radius: 50%;
}
.color-picker-item input[type="color"]:hover::-webkit-color-swatch {
  border-color: var(--accent-primary);
}

/* ==========================================================================
   Düğmeler (Buttons) - NEO-BRUTALISM STYLE
   ========================================================================== */
.btn {
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 800;
  padding: 10px 20px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.1s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 3px solid var(--border);
  outline: none;
  background-color: var(--bg-secondary);
  color: var(--text-primary);
  text-transform: uppercase;
  box-shadow: 4px 4px 0 var(--border);
}

.btn:active {
  transform: translate(4px, 4px);
  box-shadow: 0 0 0 var(--border);
}

.btn-primary {
  background-color: var(--accent-primary);
  color: #fff;
}

.btn-primary:hover {
  background-color: #e54b4f;
}

.btn-secondary {
  background-color: var(--bg-secondary);
}

.btn-secondary:hover {
  background-color: var(--accent-secondary);
}

.btn-icon {
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 8px;
}

.btn-icon:hover {
  background-color: var(--accent-secondary);
}

.btn-danger {
  background-color: var(--bg-secondary);
  color: var(--error);
}

.btn-danger:hover {
  background-color: var(--error);
  color: #fff;
}

/* Paylaşım Çubuğu (Share Toolbar) */
.share-toolbar {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 24px;
  background-color: var(--bg-secondary);
  border-radius: 12px;
  border: 3px solid var(--border);
  box-shadow: 6px 6px 0 var(--border);
  z-index: 90;
}

/* Paylaşım Düğmeleri (Share Buttons) */
.btn-share {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--surface);
  color: var(--text-primary);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition-default);
}

.btn-share.twitter:hover {
  background-color: var(--twitter);
  border-color: var(--twitter);
  color: white;
}

.btn-share.facebook:hover {
  background-color: var(--facebook);
  border-color: var(--facebook);
  color: white;
}

.btn-share.instagram:hover {
  background-color: var(--instagram);
  border-color: var(--instagram);
  color: white;
}

.btn-share.download:hover {
  background-color: var(--success);
  border-color: var(--success);
  color: white;
}

/* ==========================================================================
   Kaydırıcı Stilleri (Slider Styling)
   ========================================================================== */
input[type=range] {
  -webkit-appearance: none;
  width: 100%;
  background: transparent;
}

input[type=range]:focus {
  outline: none;
}

/* Track */
input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 4px;
  cursor: pointer;
  background: var(--border);
  border: 2px solid var(--border);
}

/* Thumb */
input[type=range]::-webkit-slider-thumb {
  height: 24px;
  width: 12px;
  background: var(--accent-primary);
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -12px;
  border: 2px solid #fff;
  box-shadow: 2px 2px 0 #000;
  transition: var(--transition-default);
}

input[type=range]::-webkit-slider-thumb:hover {
  transform: scale(1.2);
}

/* Firefox Support */
input[type=range]::-moz-range-track {
  width: 100%;
  height: 4px;
  cursor: pointer;
  background: var(--border);
  border-radius: 2px;
}

input[type=range]::-moz-range-thumb {
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background: var(--accent-primary);
  cursor: pointer;
  border: none;
  box-shadow: 0 0 10px rgba(228, 168, 83, 0.5);
}

/* ==========================================================================
   Animasyonlar (Animations)
   ========================================================================== */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pulse {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(228, 168, 83, 0.4); }
  70% { transform: scale(1.02); box-shadow: 0 0 0 10px rgba(228, 168, 83, 0); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(228, 168, 83, 0); }
}

.pulse-anim {
  animation: pulse 2s infinite;
}

/* ==========================================================================
   Bildirimler (Toast Notifications)
   ========================================================================== */
.toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.toast {
  padding: 12px 24px;
  border-radius: 30px;
  background-color: var(--surface);
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 500;
  border-left: 4px solid var(--accent-primary);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  gap: 12px;
  transform: translateX(120%);
  animation: slideInRight 0.3s forwards, fadeOut 0.3s forwards 3s; /* Auto dismiss in 3s */
}

.toast-success { border-left-color: var(--success); }
.toast-error { border-left-color: var(--error); }
.toast-info { border-left-color: var(--accent-secondary); }

@keyframes slideInRight {
  to { transform: translateX(0); }
}

@keyframes fadeOut {
  to { opacity: 0; transform: translateX(120%); }
}

/* ==========================================================================
   Yardımcı Sınıflar (Utilities)
   ========================================================================== */
.hidden { display: none !important; }
.text-center { text-align: center; }
.mt-1 { margin-top: 8px; }
.mt-2 { margin-top: 16px; }
.mt-3 { margin-top: 24px; }
.mt-4 { margin-top: 32px; }
.mb-1 { margin-bottom: 8px; }
.mb-2 { margin-bottom: 16px; }
.mb-3 { margin-bottom: 24px; }
.mb-4 { margin-bottom: 32px; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.w-full { width: 100%; }

/* ==========================================================================
   Duyarlı Tasarım (Responsive Breakpoints)
   ========================================================================== */

/* Tablet (768px - 1024px) */
@media (max-width: 1024px) {
  .editor-grid {
    grid-template-columns: 1fr;
  }
  
  .palette-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .controls-panel {
    max-width: 100%;
  }
}

/* Mobile (< 768px) */
@media (max-width: 767px) {
  .header {
    padding: 0 16px;
  }
  
  .editor-section, .palette-section, .custom-palette-section {
    padding: 0 16px;
  }
  
  .palette-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .upload-zone {
    margin-top: 80px;
    padding: 40px 16px;
  }
  
  .btn {
    width: 100%;
  }
  
  .btn-icon, .btn-share {
    width: 44px; /* Maintain circle */
  }
  
  .share-toolbar {
    width: 90%;
    justify-content: space-between;
  }
}

/* Small Mobile (< 480px) */
@media (max-width: 479px) {
  .palette-grid {
    grid-template-columns: 1fr;
  }
  
  .color-picker-group {
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
  }
}


/* ==========================================================================
   PRO & FREEMIUM STILLERI (NEO-BRUTALISM)
   ========================================================================== */
.palette-card {
  position: relative;
}

/* Kilitli PRO Palet Kartı */
.palette-card.is-pro {
  border-color: #000;
}

.palette-card.is-pro .palette-thumbnail::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.12);
  border-radius: 5px;
  pointer-events: none;
}

/* PRO Rozeti */
.palette-card .pro-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  background: #FFC043;
  color: #000;
  border: 2px solid #000;
  font-family: var(--font-heading);
  font-size: 10px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 4px;
  box-shadow: 2px 2px 0 #000;
  z-index: 10;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  gap: 3px;
  pointer-events: none;
}

/* FREE Rozeti */
.palette-card .free-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  background: #39FF14;
  color: #000;
  border: 2px solid #000;
  font-family: var(--font-heading);
  font-size: 9px;
  font-weight: 800;
  padding: 2px 5px;
  border-radius: 4px;
  box-shadow: 2px 2px 0 #000;
  z-index: 10;
  letter-spacing: 0.5px;
  pointer-events: none;
}

/* Filtre Tab Butonları */
.palette-filter-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.btn-tab {
  background: #fff;
  color: #000;
  border: 2px solid #000;
  padding: 6px 12px;
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 700;
  border-radius: 6px;
  box-shadow: 2px 2px 0 #000;
  cursor: pointer;
  transition: all 0.1s;
}

.btn-tab:hover {
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0 #000;
}

.btn-tab.active {
  background: #000;
  color: #fff;
  box-shadow: 2px 2px 0 var(--accent-secondary);
}

/* Özel Palet Kilitli Buton */
.btn-add-palette.is-locked {
  position: relative;
  background: repeating-linear-gradient(
    45deg,
    #ffffff,
    #ffffff 10px,
    #f5f5f0 10px,
    #f5f5f0 20px
  );
}

/* PRO Modal Stili */
.pro-modal {
  background: #ffffff !important;
  border: 3px solid #000 !important;
  box-shadow: 8px 8px 0 #000 !important;
  border-radius: 12px !important;
}

/* Dil Değiştirici Butonu */
.btn-lang {
  background: #ffffff;
  color: #000000;
  border: 2px solid #000;
  padding: 6px 10px;
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 800;
  border-radius: 6px;
  box-shadow: 2px 2px 0 #000;
  cursor: pointer;
  transition: all 0.1s;
  display: flex;
  align-items: center;
  gap: 4px;
}

.btn-lang:hover {
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0 #000;
  background: #f5f5f0;
}


/* ==========================================================================
   ENHANCED MOBILE RESPONSIVENESS (ADDED)
   ========================================================================== */
@media (max-width: 768px) {
  /* Header Adjustments */
  .header {
    flex-wrap: wrap;
    height: auto;
    padding: 12px 16px;
    gap: 12px;
    position: relative; /* Avoid overlapping on mobile */
  }
  
  .header > div:first-child {
    width: 100%;
    justify-content: center;
  }
  
  .header > div:last-child {
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
  }

  .header .btn, .header .btn-lang {
    padding: 6px 12px;
    font-size: 11px;
    flex: 1;
    text-align: center;
    justify-content: center;
    white-space: nowrap;
  }
  
  .upload-zone {
    margin-top: 20px;
  }
  
  /* Canvas Auto Sizing */
  .canvas-wrapper canvas {
    max-width: 100%;
    height: auto;
    width: 100% !important;
    object-fit: contain;
  }
  
  /* Modals */
  .pro-modal, #custom-palette-modal > div {
    width: 95% !important;
    padding: 20px !important;
    max-height: 90vh;
    overflow-y: auto;
  }
  
  .pro-modal ul {
    padding-left: 0;
  }
  .pro-modal li {
    font-size: 13px !important;
    line-height: 1.4;
  }
  
  .pro-modal h2 {
    font-size: 20px !important;
  }
  
  /* Filter Tabs */
  .palette-filter-tabs {
    justify-content: center;
    width: 100%;
  }
  
  .btn-tab {
    flex: 1;
    text-align: center;
  }
  
  /* Palette Grid Layout */
  .palette-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px;
  }
  
  .palette-card {
    padding: 12px !important;
  }
  .palette-thumbnail {
    height: 70px !important;
  }
  
  /* Form & Controls */
  .adjustments-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  .toggle-group {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .toggle-group > label {
    margin-bottom: 12px;
  }
  
  /* Share Toolbar Fix */
  .share-toolbar {
    width: 95%;
    padding: 12px;
    border-radius: 16px;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    flex-direction: row;
  }
  
  .share-toolbar .btn-share {
    flex: 0 0 auto;
    width: 44px !important;
    height: 44px;
    padding: 0;
    border-radius: 50% !important;
  }

  .share-toolbar #btn-ig-story {
    width: 100% !important;
    border-radius: 8px !important;
    height: 44px;
    margin-bottom: 4px;
  }
  
  .share-toolbar > div {
    display: none; /* Hide the vertical separator line on mobile */
  }
}

@media (max-width: 480px) {
  .palette-grid {
    grid-template-columns: 1fr !important;
  }
  
  .header .btn, .header .btn-lang {
    font-size: 10px;
    padding: 6px 8px;
  }
}