/* ========================================= */
/* 1. Genel Sıfırlama ve Temel Stiller */
/* ========================================= */
* {
    box-sizing: border-box; /* Tüm elementler padding ve border'ı width'e dahil eder */
}

/* body üzerindeki çakışan ve taşmaya neden olan margin/padding kaldırıldı. */
/* html, body varsayılan genişlik ve marjin/padding sıfırlamaları birleştirildi. */
html, body {
    min-height: 100vh; /* Ensure html and body take at least full viewport height */
    overflow-x: hidden; /* Prevent horizontal scrolling */
}

body {
    margin: 0;
    padding: 0;
    width: 100%; /* Sayfanın her zaman %100 genişliğini kaplamasını sağlar */
    min-width: 320px; /* Çok küçük ekranlar için minimum genişlik sınırı */
    font-family: 'Inter', sans-serif; /* Varsayılan font */
    line-height: 1.6;
    color: #333;
    background: transparent; /* Body background rengi buraya taşındı */
    display: flex; /* Enable flexbox */
    flex-direction: column; /* Arrange children vertically */
    overflow-y: scroll; /* Her zaman dikey kaydırma çubuğunu göster */
    transition: padding-right 0.6s cubic-bezier(0.23, 1, 0.32, 1), padding-bottom 0.3s ease-in-out;
}


/* Scroll to Top Button */
#scrollToTopBtn {
    display: none; /* Hidden by default, controlled by JS */
    position: fixed; /* Fixed at the bottom */
    bottom: 80px; /* Increased from 20px to avoid footer links */
    left: 50%; /* Center horizontally */
    transform: translateX(-50%); /* Adjust for true centering */
    z-index: 999; /* Ensure it's above most content, but below modals */
    border: none;
    outline: none;
    background-color: #007bff; /* Blue background */
    color: white;
    cursor: pointer;
    width: 50px; /* Fixed width for perfect circle */
    height: 50px; /* Fixed height for perfect circle */
    padding: 0; /* Remove padding to control size with width/height */
    border-radius: 50%; /* Make it a perfect circle */
    font-size: 24px; /* Larger icon */
    /* display: flex; is now in .show-scroll-btn to prevent initial visibility */
    justify-content: center; /* Center icon horizontally */
    align-items: center; /* Center icon vertically */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    opacity: 0; /* Initially hidden */
    visibility: hidden; /* Initially hidden */
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out, transform 0.3s ease-in-out;
}

#scrollToTopBtn.show-scroll-btn {
    display: flex; /* Use flexbox to center the icon when shown */
    opacity: 1;
    visibility: visible;
    /* transform: translateX(-50%) translateY(0); */ /* Ensure it's at its base position */
}

#scrollToTopBtn:hover {
    background-color: #0056b3;
    transform: translateX(-50%) translateY(-5px); /* Slight lift on hover */
}

body.no-scroll { /* Menü açıkken dikey kaydırmayı engellemek için */
    overflow: hidden;
    /* position: fixed; ve width: 100%; kaldırıldı, çünkü overflow: hidden yeterli */
    /* Scrollbar boşluğunu telafi etmek için padding-right eklenebilir, ancak bu genellikle JS ile dinamik yapılır */
}
html.no-scroll { /* HTML'e de overflow: hidden ekleyerek kaydırmayı tamamen engelle */
    overflow: hidden;
    position: relative; /* Helps prevent scrolling on some browsers */
    /* Bu, menü açıkken tüm sayfanın kaydırmasını engeller ve yatay taşmayı önler */
}

ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none;
    color: inherit;
}

/* CSS Değişkenleri (Root içinde kalması daha iyidir) */
:root {
    --ortak-genislik: 1200px; /* Increased for wider content area */
    --header-height: 70px; /* Header yüksekliği için değişken */
    --menu-width: 250px; /* Mobil menü genişliği için değişken */
    --primary-color: #007bff;
    --primary-hover-color: #0056b3;
    --text-color: #333;
    --secondary-text-color: #555;
    --light-gray: #f0f0f0;
    --medium-gray: #ddd;
    --dark-gray: #ccc;
    --darker-gray: #555;
    --header-shadow: 0 2px 5px rgba(0,0,0,0.1);
    --menu-shadow: 2px 0 5px rgba(0,0,0,0.2);
}

/* ========================================= */
/* 2. Tipografi (Başlıklar) */
/* ========================================= */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Poppins', sans-serif; /* Başlıklar için Poppins */
    color: #204363; /* Daha koyu, güçlü bir başlık rengi */
    line-height: 1.2; /* Başlıklar için daha dar satır aralığı */
}

h1 {
    font-size: 2.4em;
    font-weight: 700;
    margin-top: 2em; /* Adjusted to push it below the floating search bar */
    margin-bottom: 0em;
}

.color-info h1 {
    margin-top: 0.2em; /* Reduce top margin for h1 inside color-info */
}

h2 {
    font-size: 2em;
    font-weight: 600;
    margin-top: 1.5em;
    margin-bottom: 0.8em;
}

.color-palette-section {
    position: relative; /* For absolute positioning of buttons */
}

.palette-actions {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    gap: 5px;
    z-index: 10; /* Ensure buttons are above color chips */
}

.palette-actions-header {
    display: flex;
    justify-content: flex-end;
    padding: 10px;
    background: #f1f1f1;
    border-radius: 8px;
    margin-bottom: 10px;
}

.palette-actions-header .palette-actions {
    position: static; /* Override absolute positioning to stay in flex flow */
    gap: 10px; /* Add some space between the buttons in the header */
}

.palette-action-btn {
    background-color: rgba(0, 0, 0, 0.6); /* Semi-transparent background */
    color: white;
    border: none;
    border-radius: 5px;
    padding: 8px 10px;
    cursor: pointer;
    font-size: 0.9em;
    transition: background-color 0.3s ease, transform 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.palette-action-btn:hover {
    background-color: rgba(0, 0, 0, 0.8); /* Darker on hover */
    transform: translateY(-2px); /* Slight lift */
}

.palette-action-btn i {
    margin-right: 5px; /* Space between icon and text if any */
}

.palette-action-btn:last-child i {
    margin-right: 0; /* No margin for the last icon */
}

.color-palette-section h2 {
    font-size: 150%;
    font-weight: 600;
    margin-top: 2em;
    margin-bottom: 0.8em;
    top: 20px;
    display: flex;
    align-items: center;
    justify-content: center; /* Added to ensure horizontal centering */
    text-align: center;
}

.color-harmony-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; /* Distribute items with space between them */
    gap: 20px; /* Space between rows and columns */
}

.color-harmony-grid .color-palette-section {
    flex: 1 1 calc(50% - 10px); /* Two columns with a gap */
    max-width: calc(50% - 10px); /* Ensure max width for two columns */
}

h3, h4, h5, h6 {
    font-size: 1.2em; /* Genel başlıklar için varsayılan boyut */
    font-weight: 600;
    margin-top: 1.5em;
    margin-bottom: 0.8em;
}
a {
    text-decoration: none; /* Linklerin altını çizer */
}

a:hover {
    text-decoration: underline; /* Mouse üzerine geldiğinde altını çizer */
}

a.no-underline {
    text-decoration: none; /* Bu sınıfa sahip linklerin altını çizmez */
}
/* ========================================= */
/* 3. Genel Layout Konteynerları */
/* ========================================= */
.container {
    max-width: var(--ortak-genislik);
    margin: 0 auto;
    padding: 0 15px; /* İçeriğin kenarlara yapışmasını engellemek için padding */

}

main { /* Sayfa içeriğinin header'ın altında başlaması için */
    /* padding-top: calc(var(--header-height) + 200px); Removed and moved to .page-container */
    position: relative; /* Menü transition'ı için */
    transition: transform 0.6s ease-in-out; /* Menü açıldığında içeriğin kayması için */
    z-index: 1; /* Menü'nün altında kalması için */
    overflow-x: hidden; /* Main içeriğinin kendi içinde yatay kaydırmayı engelle */
    flex-grow: 1; /* Take up all available vertical space */
    min-height: calc(100vh - var(--header-height) - 100px); /* Ensure main pushes footer down */
}

/* Menü açıkken main içeriğini sağa kaydır (isteğe bağlı, alternatif) */
body.main-shifted main {
    /* transform: translateX(var(--menu-width)); kaldırıldı, ana içeriğin kaymasını engellemek için */
    /* Menü açıldığında main içeriğinin sağa kaymasını sağlar */
    /* Bu, menü genişliği kadar bir boşluk oluşturur ve içeriğin kaymasını sağlar */
}

footer {
    text-align: center;
    padding: 20px;
    background-color: var(--light-gray);
    margin-top: 40px;
    color: #777;
    width: 100%; /* Full width */
    box-sizing: border-box; /* Include padding in width */
    z-index: 2; /* Ensure it's above main content but below modals */
    opacity: 0; /* Initially hidden */
    visibility: hidden; /* Initially hidden */
    transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out; /* Smooth transition */
}

/* ========================================= */
/* 4. Header ve Navigasyon */
/* ========================================= */
#searchBarWrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    background-color: var(--light-gray);
    box-shadow: var(--header-shadow);
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 900;
    /* #centerGroup artık burada olmadığı için hizalama ayarları değişebilir */
}

#leftGroup {
    display: flex;
    align-items: center;
    flex-shrink: 1; /* Allow shrinking */
    min-width: 0; /* Allow shrinking below content size */
    gap: 20px; /* Logo ve menü arasındaki boşluk */
}

#leftGroup ul {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 25px; /* Menü öğeleri arasındaki boşluk */
}

#leftGroup ul li a {
    color: var(--secondary-text-color); /* Varsayılan link rengi */
    font-weight: 700;
    padding: 8px 0; /* Dikey padding */
    transition: color 0.3s ease; /* Renk geçişi */
    text-decoration: none; /* Alt çizgiyi kaldır */
}

#leftGroup ul li a:hover {
    color: var(--primary-color); /* Hover rengi */
}

#leftGroup img {
    height: 50px;
    max-width: 100%; /* Görselin taşmasını engeller */
    margin-right: 10px;
    flex-shrink: 1; /* Allow shrinking */
    min-width: 0; /* Allow shrinking below content size */
}

#countDisplay {
    font-size: 1.1em;
    font-weight: bold;
    color: var(--secondary-text-color);
    flex-shrink: 0;
}

/* Masaüstü Navigasyon Menüsü */
.main-nav {
    /* Side menü özellikleri (varsayılan olarak mobil için) */
    position: fixed; /* Menü açıldığında sabit kalır */
    top: 0;
    left: -100%; /* Başlangıçta ekranın dışında gizli */
    width: var(--menu-width);
    height: 100vh; /* Use viewport height to prevent mobile clipping issues */
    background-color: #333; /* Side menü arka planı */
    box-shadow: var(--menu-shadow);
    transition: left 0.6s cubic-bezier(0.77, 0, 0.175, 1); /* Yumuşak geçiş */
    z-index: 1000; /* Diğer içeriklerin üzerinde */
    padding-top: var(--header-height); /* Header altından başla */
    flex-direction: column; /* Dikey sıralama */
    justify-content: flex-start;
    overflow-y: auto; /* İçerik taşarsa kaydırılabilir */
    display: flex; /* Mobil görünümde flex olarak kalır */
}

.main-nav.is-open {
    left: 0; /* Açıldığında ekrana gelsin */
}

.main-nav ul {
    flex-direction: column; /* Dikey sıralama */
    padding-top: 20px;
    list-style: none;
}

.main-nav ul:not(.footer-menu) {
    flex-grow: 1; /* Push footer items to the bottom */
}

.main-nav ul li {
    margin-right: 0;
}

.main-nav ul li a {
    color: white; /* Mobil link rengi */
    display: block;
    padding: 15px 20px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    font-weight: 600;
    font-size: 1.1em;
    transition: background-color 0.3s ease;
}

.main-nav ul li:last-child a {
    border-bottom: none;
}

.main-nav ul li a:hover {
    background-color: var(--darker-gray);
    color: white;
}

/* Close button for side menu */
.close-menu-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    background: none;
    border: none;
    font-size: 2em;
    color: white;
    cursor: pointer;
    z-index: 1001;
    transition: transform 0.2s ease;
}

.close-menu-btn:hover {
    transform: rotate(90deg);
}

/* Arama Çubuğu ve İkonlar */
#centerGroup {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    /* margin: 0 20px; kaldırıldı */
    max-width: 600px; /* Limit its max width */
    flex-grow: 0;
}

/* New styles for the floating search bar */
.floating-search-bar {
    position: fixed;
    top: 10%; /* 10% from the top */
    left: 50%;
    transform: translateX(-50%);
    background-color: #fff;
    padding: 15px 25px; /* Adjust padding for a modern look */
    border-radius: 12px; /* Rounded corners */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); /* Soft shadow */
    z-index: 800; /* Below header, above main content */
    display: flex;
    align-items: center;
    gap: 15px; /* Space between icons and input */
    max-width: 700px; /* Max width for the floating bar */
    width: 90%; /* Responsive width */
    box-sizing: border-box; /* Include padding in width */
}

/* #centerGroup'un yeni konumu için genel stil */
#centerGroup {
    display: flex;
    align-items: center;
    justify-content: center; /* İçerikleri ortala */
    gap: 15px; /* İkonlar ve input arasındaki boşluk */
    /* flex-wrap: wrap; kaldırıldı */
    /* margin: 0 20px; kaldırıldı */
}

/* New styles for the floating search bar */
.floating-search-bar {
    position: fixed;
    top: 10%; /* 10% from the top */
    left: 50%;
    transform: translateX(-50%);
    background-color: #fff;
    padding: 15px 25px; /* Adjust padding for a modern look */
    border-radius: 12px; /* Rounded corners */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); /* Soft shadow */
    z-index: 800; /* Below header, above main content */
    display: flex;
    align-items: center;
    gap: 15px; /* Space between icons and input */
    max-width: 700px; /* Max width for the floating bar */
    width: 90%; /* Responsive width */
    box-sizing: border-box; /* Include padding in width */
    /* flex-wrap: wrap; kaldırıldı */
    transition: left 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

/* Styles for elements inside the floating search bar */
.floating-search-bar .icon-button {
    border: none;
    background: none;
    font-size: 24px;
    cursor: pointer;
    color: #666;
    transition: color 0.3s ease;
    padding: 0; /* Remove default padding from icon-button class if it causes issues */
    margin: 0; /* Remove default margin from icon-button class if it causes issues */
    flex-shrink: 1; /* Allow icons to shrink */
    min-width: 0; /* Allow shrinking below content size */
}

.floating-search-bar .icon-button:hover {
    color: var(--primary-color);
}

.search-input-container {
    position: relative;
    flex-grow: 1;
    display: flex;
    align-items: center;
}

.floating-search-bar #searchInput {
    flex-grow: 1;
    padding: 10px 15px; /* Slightly more padding for input */
    border: 1px solid var(--medium-gray);
    border-radius: 8px; /* More rounded input */
    font-size: 16px;
    margin: 0; /* Remove default margin */
    min-width: 0; /* Allow input to shrink below content size */
    flex-shrink: 1; /* Allow input to shrink */
    padding-right: 40px; /* Make space for the clear button */
}

.clear-search-button {
    position: absolute;
    right: 10px;
    background: none;
    border: none;
    font-size: 18px;
    color: #888;
    cursor: pointer;
    padding: 5px;
    display: none; /* Hidden by default, shown by JS when input has value */
    transition: color 0.2s ease;
}

.clear-search-button:hover {
    color: #333;
}

/* Responsive adjustments for the floating search bar */
@media (max-width: 600px) {
    .floating-search-bar {
        padding: 5px 10px; /* Smaller padding on mobile */
        width: calc(100% - 20px); /* Take full width minus padding */
        top: 80px; /* Position consistently below the header */
        left: 10px; /* Align to the left with padding */
        transform: translateX(0); /* Remove translateX to align with left */
        flex-wrap: nowrap; /* Ensure items stay side-by-side */
        justify-content: space-between; /* Distribute items with space between them */
        gap: 0px; /* Further reduce gap between items */
    }

    .floating-search-bar .search-input-container {
        flex-grow: 1; /* Allow search input to take available space */
        margin-top: 0; /* Remove margin-top as items are now side-by-side */
    }

    .floating-search-bar #searchInput {
        padding: 8px 10px; /* Adjust padding for input */
        font-size: 14px; /* Smaller font size for input */
    }

    .floating-search-bar .icon-button {
        font-size: 20px; /* Slightly smaller icons on mobile */
    }

    .favorites-button {
        font-size: 0.8em; /* Smaller font size for favorites button on mobile */
        padding: 8px 12px; /* Adjust padding */
    }
}

#rightGroup {
    display: flex;
    flex-direction: row; /* Ensure horizontal alignment */
    align-items: center;
    flex-shrink: 0;
    margin-left: auto;
    gap: 10px; /* Favorites butonu ile hamburger arası boşluk */
    flex-wrap: nowrap; /* Prevent wrapping of children */
}
#favoritesToggle {
    order: 1; /* Favorites button first */
    flex-shrink: 1; /* Allow shrinking */
    min-width: 0; /* Allow shrinking below content size */
}
.hamburger-menu {
    order: 2; /* Hamburger menu second */
    flex-shrink: 1; /* Allow shrinking */
    min-width: 0; /* Allow shrinking below content size */
}

/* Favorites butonu */
.favorites-button {
    background-color: var(--primary-color);
    color: white;
    border: none;
    padding: 10px 15px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1em;
    display: flex;
    align-items: center;
    margin-right: 15px;
    transition: background-color 0.3s ease; /* Hover transition */
    flex-shrink: 1; /* Allow shrinking */
    min-width: 0; /* Allow shrinking below content size */
}

.favorites-button i {
    margin-right: 5px;
}

.favorites-button:hover {
    background-color: var(--primary-hover-color);
}

/* Hamburger Menü İkonu (Masaüstünde gizli) */
.hamburger-menu {
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
    position: relative;
    z-index: 1001; /* Menünün üzerinde kalması için */
    outline: none; /* Odaklandığında çıkan çerçeveyi kaldırır */
    display: block; /* Ensure it's always visible */
    /* Remove any default button appearance that might cause arrows */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.hamburger-menu .bar {
    display: block;
    width: 25px;
    height: 3px;
    background-color: var(--text-color);
    margin: 5px auto;
    transition: all 0.3s ease-in-out;
}

.hamburger-menu.is-active .bar:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}
.hamburger-menu.is-active .bar:nth-child(2) {
    opacity: 0;
}
.hamburger-menu.is-active .bar:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

/* Diğer İkon Butonları */
#colorWheelToggleBtn,
#pickColor,
#ImageAnalysisModalBtn {
    flex-shrink: 0;
    cursor: pointer;
    border: none;
    background: var(--medium-gray);
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 18px;
    transition: background-color 0.3s ease;
}

#colorWheelToggleBtn:hover,
#pickColor:hover,
#ImageAnalysisModalBtn:hover {
    background: var(--dark-gray);
}

/* ========================================= */
/* 5. Duyarlı (Responsive) Tasarım - Medya Sorguları */
/* ========================================= */
/* 6. Custom Mobile Responsive Styles for Color Chips */
/* ========================================= */

/* Make color harmony sections stack on mobile */
@media (max-width: 767px) {
    .color-harmony-grid {
        flex-direction: column;
        gap: 20px;
    }
    .color-harmony-grid .color-palette-section {
        flex-basis: 100%;
        max-width: 100%;
    }
}

/* Responsive styles for color chips inside main content ONLY */
@media (max-width: 479px) {
  .main-content .NoN331 {
    gap: 5px; /* Small gap between items */
  }

  /* Remove flex properties from the wrapper and apply sizing to the card itself */
  .main-content .NoN332 {
    flex: none;
    max-width: none;
  }

  .main-content .NoNColorPaper-root {
    width: 110px; /* Fixed width for the card */
    height: 150px; /* Fixed height for the card */
    margin: 2px;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch; /* Ensure children fill the width */
  }
  .main-content .NoN335 {
    width: 100% !important;
    height: 80px !important; /* Fixed height for color swatch */
    flex-shrink: 0;
    border-radius: 6px 6px 0 0;
    margin: 0;
  }
  .main-content .NoN338 {
    height: 70px; /* Fixed height for text area */
    padding: 5px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden; /* Hide overflowing text */
    font-size: 12px;
  }
  .main-content .NoN338 h5 {
    font-size: 0.9em;
    margin: 2px 0;
  }
  /* Handle long names with ellipsis */
  .main-content .NoN338 p.NoNColorTypography-caption {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      margin: 2px 0 0;
  }

  .color-info h1 {
    font-size: 1.6em;
  }
}

@media (max-width: 417px) {
  .main-content .NoNColorPaper-root {
    width: 100px;
    height: 140px;
  }
  .main-content .NoN335 {
    height: 70px !important;
  }
  .main-content .NoN338 {
    height: 70px;
    font-size: 11px;
  }
}

/* Tablet ve Mobil Başlangıcı (Ortak Medya Sorgusu) */
@media (max-width: 1220px) {
    #searchBarWrapper {
        flex-wrap: nowrap; /* Changed to nowrap to prevent wrapping */
        padding: 10px 15px;
        justify-content: space-between;
    }

    /* Öğelerin mobil sırası */
    #leftGroup {
        order: 1;
        flex-basis: auto;
        flex-grow: 1;
    }
    #leftGroup ul { /* Hide leftGroup ul on mobile */
        display: none;
    }
    #rightGroup {
        order: 2; /* SaÄŸ grup daha erken gelsin */
        display: flex;
        align-items: center;
        flex-basis: auto;
        flex-shrink: 0;
        margin-left: 0;
        gap: 10px; /* Favorites butonu ile hamburger arası boşluk */
    }
    /* #centerGroup artık searchBarWrapper içinde değil, bu medya sorgusundan kaldırıldı */
    /* #searchInput ve .icon-button stilleri artık .floating-search-bar içinde tanımlanıyor */

    /* Mobil Navigasyon Menüsü (Dikey ve Kaydırmalı) */
    .main-nav {
        display: flex; /* Mobil görünümde side menü olarak kalır */
        order: 4;
        position: fixed;
        top: 0;
        left: -100%; /* Menü kapalıyken ekranın tamamen dışında */
        width: var(--menu-width);
        height: 100%;
        background-color: #333;
        box-shadow: var(--menu-shadow);
        transition: left 0.6s cubic-bezier(0.77, 0, 0.175, 1);
        z-index: 1000;
        padding-top: var(--header-height);
        margin-left: 0;
        flex-direction: column;
        justify-content: flex-start;
        overflow-y: auto;
    }

    .main-nav.is-open {
        left: 0;
    }

    .main-nav ul {
        flex-direction: column; /* Dikey sıralama */
        padding-top: 20px;
    }
    .main-nav ul li {
        margin-right: 0;
    }
    .main-nav ul li a {
        color: white; /* Mobil link rengi */
        display: block;
        padding: 15px 20px;
        border-bottom: 1px solid rgba(255,255,255,0.1);
        font-weight: 600;
        font-size: 1.1em;
        transition: background-color 0.3s ease;
    }
    .main-nav ul li:last-child a {
        border-bottom: none;
    }
    .main-nav ul li a:hover {
        background-color: var(--darker-gray);
        color: white;
    }

    /* Hamburger Menü İkonu (Mobilde görünür) */
    .hamburger-menu {
        display: block;
        margin: 0;
        padding: 10px;
    }
    /* Favorites butonu artık rightGroup içinde, burada gizlemeye gerek yok */
    #pickColor { /* PickColor mobilde gizli */
        display: none;
    }
    /* FavoritesToggle'ın konumunu searchBarWrapper'a göre ayarla */
    #favoritesToggle {
        position: static; /* Fixed konumunu kaldır */
        top: auto;
        right: auto;
        margin-top: 0;
        margin-right: 0;
    }
}

/* Tablet ve Mobil Başlangıcı (Ortak Medya Sorgusu) */
@media (max-width: 1220px) {
    #searchBarWrapper {
        flex-wrap: nowrap;
        padding: 10px 15px;
        justify-content: space-between;
    }

    /* Öğelerin mobil sırası */
    #leftGroup {
        order: 1;
        flex-basis: auto;
        flex-grow: 1;
    }
    #leftGroup ul { /* Hide leftGroup ul on mobile */
        display: none;
    }
    #rightGroup {
        order: 2; /* SaÄŸ grup daha erken gelsin */
        display: flex;
        align-items: center;
        flex-basis: auto;
        flex-shrink: 0;
        margin-left: 0;
        gap: 10px; /* Favorites butonu ile hamburger arası boşluk */
    }
    /* #centerGroup artık searchBarWrapper içinde değil, bu medya sorgusundan kaldırıldı */
    /* #searchInput ve .icon-button stilleri artık .floating-search-bar içinde tanımlanıyor */

    /* Mobil Navigasyon Menüsü (Dikey ve Kaydırmalı) */
    .main-nav {
        display: flex; /* Mobil görünümde side menü olarak kalır */
        order: 4;
        position: fixed;
        top: 0;
        left: -100%; /* Menü kapalıyken ekranın tamamen dışında */
        width: var(--menu-width);
        height: 100%;
        background-color: #333;
        box-shadow: var(--menu-shadow);
        transition: left 0.6s cubic-bezier(0.77, 0, 0.175, 1);
        z-index: 1000;
        padding-top: var(--header-height);
        margin-left: 0;
        flex-direction: column;
        justify-content: flex-start;
        overflow-y: auto;
    }

    .main-nav.is-open {
        left: 0;
    }

    .main-nav ul {
        flex-direction: column; /* Dikey sıralama */
        padding-top: 20px;
    }
    .main-nav ul li {
        margin-right: 0;
    }
    .main-nav ul li a {
        color: white; /* Mobil link rengi */
        display: block;
        padding: 15px 20px;
        border-bottom: 1px solid rgba(255,255,255,0.1);
        font-weight: 600;
        font-size: 1.1em;
        transition: background-color 0.3s ease;
    }
    .main-nav ul li:last-child a {
        border-bottom: none;
    }
    .main-nav ul li a:hover {
        background-color: var(--darker-gray);
        color: white;
    }

    /* Hamburger Menü İkonu (Mobilde görünür) */
    .hamburger-menu {
        display: block;
        margin: 0;
        padding: 10px;
    }
    /* Favorites butonu artık rightGroup içinde, burada gizlemeye gerek yok */
    #pickColor { /* PickColor mobilde gizli */
        display: none;
    }
    /* FavoritesToggle'ın konumunu searchBarWrapper'a göre ayarla */
    #favoritesToggle {
        position: static; /* Fixed konumunu kaldır */
        top: auto;
        right: auto;
        margin-top: 0;
        margin-right: 0;
    }
}

/* Tablet ve Mobil Başlangıcı (Ortak Medya Sorgusu) */
@media (max-width: 1220px) {
    #searchBarWrapper {
        flex-wrap: nowrap;
        padding: 10px 15px;
        justify-content: space-between;
    }

    /* Öğelerin mobil sırası */
    #leftGroup {
        order: 1;
        flex-basis: auto;
        flex-grow: 1;
    }
    #leftGroup ul { /* Hide leftGroup ul on mobile */
        display: none;
    }
    #rightGroup {
        order: 2; /* SaÄŸ grup daha erken gelsin */
        display: flex;
        align-items: center;
        flex-basis: auto;
        flex-shrink: 0;
        margin-left: 0;
        gap: 10px; /* Favorites butonu ile hamburger arası boşluk */
    }
    /* #centerGroup artık searchBarWrapper içinde değil, bu medya sorgusundan kaldırıldı */
    /* #searchInput ve .icon-button stilleri artık .floating-search-bar içinde tanımlanıyor */

    /* Mobil Navigasyon Menüsü (Dikey ve Kaydırmalı) */
    .main-nav {
        display: flex; /* Mobil görünümde side menü olarak kalır */
        order: 4;
        position: fixed;
        top: 0;
        left: -100%; /* Menü kapalıyken ekranın tamamen dışında */
        width: var(--menu-width);
        height: 100%;
        background-color: #333;
        box-shadow: var(--menu-shadow);
        transition: left 0.6s cubic-bezier(0.77, 0, 0.175, 1);
        z-index: 1000;
        padding-top: var(--header-height);
        margin-left: 0;
        flex-direction: column;
        justify-content: flex-start;
        overflow-y: auto;
    }

    .main-nav.is-open {
        left: 0;
    }

    .main-nav ul {
        flex-direction: column; /* Dikey sıralama */
        padding-top: 20px;
    }
    .main-nav ul li {
        margin-right: 0;
    }
    .main-nav ul li a {
        color: white; /* Mobil link rengi */
        display: block;
        padding: 15px 20px;
        border-bottom: 1px solid rgba(255,255,255,0.1);
        font-weight: 600;
        font-size: 1.1em;
        transition: background-color 0.3s ease;
    }
    .main-nav ul li:last-child a {
        border-bottom: none;
    }
    .main-nav ul li a:hover {
        background-color: var(--darker-gray);
        color: white;
    }

    /* Hamburger Menü İkonu (Mobilde görünür) */
    .hamburger-menu {
        display: block;
        margin: 0;
        padding: 10px;
    }
    /* Favorites butonu artık rightGroup içinde, burada gizlemeye gerek yok */
    #pickColor { /* PickColor mobilde gizli */
        display: none;
    }
    /* FavoritesToggle'ın konumunu searchBarWrapper'a göre ayarla */
    #favoritesToggle {
        position: static; /* Fixed konumunu kaldır */
        top: auto;
        right: auto;
        margin-top: 0;
        margin-right: 0;
    }
}

/* Tablet ve Mobil Başlangıcı (Ortak Medya Sorgusu) */
@media (max-width: 1220px) {
    #searchBarWrapper {
        flex-wrap: nowrap;
        padding: 10px 15px;
        justify-content: space-between;
    }

    /* Öğelerin mobil sırası */
    #leftGroup {
        order: 1;
        flex-basis: auto;
        flex-grow: 1;
    }
    #rightGroup {
        order: 2; /* SaÄŸ grup daha erken gelsin */
        display: flex;
        align-items: center;
        flex-basis: auto;
        flex-shrink: 0;
        margin-left: 0;
        gap: 10px; /* Favorites butonu ile hamburger arası boşluk */
    }
    /* #centerGroup artık searchBarWrapper içinde değil, bu medya sorgusundan kaldırıldı */
    /* #searchInput ve .icon-button stilleri artık .floating-search-bar içinde tanımlanıyor */

    /* Mobil Navigasyon Menüsü (Dikey ve Kaydırmalı) */
    .main-nav {
        display: flex; /* Mobil görünümde side menü olarak kalır */
        order: 4;
        position: fixed;
        top: 0;
        left: -100%; /* Menü kapalıyken ekranın tamamen dışında */
        width: var(--menu-width);
        height: 100%;
        background-color: #333;
        box-shadow: var(--menu-shadow);
        transition: left 0.6s cubic-bezier(0.77, 0, 0.175, 1);
        z-index: 1000;
        padding-top: var(--header-height);
        margin-left: 0;
        flex-direction: column;
        justify-content: flex-start;
        overflow-y: auto;
    }

    .main-nav.is-open {
        left: 0;
    }

    .main-nav ul {
        flex-direction: column; /* Dikey sıralama */
        padding-top: 20px;
    }
    .main-nav ul li {
        margin-right: 0;
    }
    .main-nav ul li a {
        color: white; /* Mobil link rengi */
        display: block;
        padding: 15px 20px;
        border-bottom: 1px solid rgba(255,255,255,0.1);
        font-weight: 600;
        font-size: 1.1em;
        transition: background-color 0.3s ease;
    }
    .main-nav ul li:last-child a {
        border-bottom: none;
    }
    .main-nav ul li a:hover {
        background-color: var(--darker-gray);
        color: white;
    }

    /* Hamburger Menü İkonu (Mobilde görünür) */
    .hamburger-menu {
        display: block;
        margin: 0;
        padding: 10px;
    }
    /* Favorites butonu artık rightGroup içinde, burada gizlemeye gerek yok */
    #pickColor { /* PickColor mobilde gizli */
        display: none;
    }
    /* FavoritesToggle'ın konumunu searchBarWrapper'a göre ayarla */
    #favoritesToggle {
        position: static; /* Fixed konumunu kaldır */
        top: auto;
        right: auto;
        margin-top: 0;
        margin-right: 0;
    }
}

/* 992px ve altı (Tablet Düşük Çözünürlük) */
@media (max-width: 992px) {
    .page-container {
        grid-template-columns: 1fr; /* Switch to a single column layout */
    }

    .sidebar {
        display: none; /* Hide sidebars on smaller screens */
    }

    .main-content {
        max-width: 100%; /* Allow main content to take full width */
    }

    /* Bu medya sorgusu 1220px kuralını geçersiz kılar, bu yüzden burada daha spesifik ayarlar yapabiliriz */
    #leftGroup {
        flex-grow: 1;
    }
    #rightGroup {
        flex-shrink: 0;
    }
    #centerGroup {
        flex-basis: 100%;
    }
}

/* 600px ve altı için özel düzenleme (Mobil Ekranlar) */
@media (max-width: 600px) {
    #leftGroup {
        flex-grow: 1;
    }
    #rightGroup {
        flex-shrink: 0;
    }
    #centerGroup {
        flex-basis: 100%;
        justify-content: center;
    }
    #searchInput {
        flex-grow: 1;
        margin-right: 10px;
    }
    #centerGroup .icon-button {
        margin: 0 5px;
    }

    .main-content,
    .left-sidebar,
    .right-sidebar {
        padding-top: 0px;
    }
}

/* 436px ve altı için özel düzenleme (Çok Küçük Mobil) */
@media (max-width: 436px) {
    #searchBarWrapper {
        padding: 10px;
    }
    #leftGroup img {
        height: 40px;
    }
    .hamburger-menu {
        padding: 8px;
    }
}

  /* Grid kapsayıcı */
/* Similar Colors Slider Styles */
#similarColorsSliderContainer {
    /* display: none; Removed to allow JS to control visibility */
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-top: 20px;
    margin-bottom: 20px;
    padding: 15px 20px; /* More padding for a widespread look */
    background-color: transparent; /* Arka plan kaldırıldı */
    border-radius: 12px; /* More rounded corners */
    max-width: 800px; /* Wider for a more widespread design */
    margin-left: auto;
    margin-right: auto;
    box-shadow: none; /* Gölge kaldırıldı */
}

#similarColorsSliderContainer label {
    font-weight: bold;
    color: #333;
    font-size: 1.1em;
}

#similarColorsSlider {
    width: 90%; /* Make slider wider */
    -webkit-appearance: none;
    appearance: none;
    height: 10px; /* Thicker slider track */
    background: linear-gradient(to right, var(--primary-color) 0%, var(--primary-color) var(--slider-value, 0%), #ddd var(--slider-value, 0%), #ddd 100%); /* Dynamic background */
    outline: none;
    border-radius: 5px;
    transition: background 0.2s;
}

#similarColorsSlider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 24px; /* Larger thumb */
    height: 24px;
    background: var(--primary-color);
    border: 2px solid #fff; /* White border for contrast */
    border-radius: 50%;
    cursor: grab;
    box-shadow: 0 3px 8px rgba(0,0,0,0.3); /* More prominent shadow */
    transition: background 0.2s, transform 0.1s;
}

#similarColorsSlider::-webkit-slider-thumb:active {
    cursor: grabbing;
    transform: scale(1.15); /* More pronounced active state */
}

#similarColorsSlider::-moz-range-thumb {
    width: 24px;
    height: 24px;
    background: var(--primary-color);
    border: 2px solid #fff;
    border-radius: 50%;
    cursor: grab;
    box-shadow: 0 3px 8px rgba(0,0,0,0.3);
    transition: background 0.2s, transform 0.1s;
}

#similarColorsSlider::-moz-range-thumb:active {
    cursor: grabbing;
    transform: scale(1.15);
}

#similarColorsCount {
    font-weight: bold;
    color: var(--primary-color);
    font-size: 1.3em; /* Larger count display */
}

/* Responsive adjustments for the slider */
@media (max-width: 600px) {
    #similarColorsSliderContainer {
        max-width: 95%; /* Take more width on smaller screens */
        padding: 10px 15px; /* Adjust padding */
        gap: 10px;
    }
    #similarColorsSlider {
        width: 95%; /* Wider slider on mobile */
    }
    #similarColorsSliderContainer label {
        font-size: 1em;
    }
    #similarColorsCount {
        font-size: 1.2em;
    }
}

/* Ensure similarColorsContainer is centered and responsive */
#similarColorsContainer {
    max-width: 1500px; /* Max width for similar colors container */
    margin-left: auto;
    margin-right: auto;
    width: 100%; /* Ensure it takes full width up to max-width */
}

@media (max-width: 600px) {
    #similarColorsContainer {
        max-width: 95%; /* Adjust for smaller screens */
    }
}

#mainContentWrapper {
    display: flex;
    flex-direction: column;
    align-items: center; /* İçeriği yatayda ortala */
    width: 100%; /* Varsayılan olarak tam genişlik */
}

#colorLoadSliderContainer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-top: 0px;
    margin-bottom: 0px;
    padding: 15px 20px;
    background-color: transparent; /* Arka plan kaldırıldı */
    border-radius: 12px;
    max-width: 600px;
    width: 100%; /* Ekran genişliğine göre ayarlanır */
    box-shadow: none; /* Gölge kaldırıldı */
}

#colorLoadSliderContainer label {
    font-weight: bold;
    color: #333;
    font-size: 1.1em;
}

#colorLoadSlider {
    width: 90%;
    -webkit-appearance: none;
    appearance: none;
    height: 10px;
    background: linear-gradient(to right, var(--primary-color) 0%, var(--primary-color) var(--slider-value, 0%), #ddd var(--slider-value, 0%), #ddd 100%);
    outline: none;
    border-radius: 5px;
    transition: background 0.2s;
}

#colorLoadSlider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 24px;
    height: 24px;
    background: var(--primary-color);
    border: 2px solid #fff;
    border-radius: 50%;
    cursor: grab;
    box-shadow: 0 3px 8px rgba(0,0,0,0.3);
    transition: background 0.2s, transform 0.1s;
}

#colorLoadSlider::-webkit-slider-thumb:active {
    cursor: grabbing;
    transform: scale(1.15);
}

#colorLoadSlider::-moz-range-thumb {
    width: 24px;
    height: 24px;
    background: var(--primary-color);
    border: 2px solid #fff;
    border-radius: 50%;
    cursor: grab;
    box-shadow: 0 3px 8px rgba(0,0,0,0.3);
    transition: background 0.2s, transform 0.1s;
}

#colorLoadSlider::-moz-range-thumb:active {
    cursor: grabbing;
    transform: scale(1.15);
}

#colorLoadCount {
    font-weight: bold;
    color: var(--primary-color);
    font-size: 1.3em;
}

/* Responsive adjustments for the slider */
@media (max-width: 600px) {
    #colorLoadSliderContainer {
        max-width: 95%;
        padding: 10px 15px;
        gap: 10px;
    }
    #colorLoadSlider {
        width: 95%;
    }
    #colorLoadSliderContainer label {
        font-size: 1em;
    }
    #colorLoadCount {
        font-size: 1.2em;
    }
}

/* Hue Slider Styles */
#hueSliderContainer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-top: 0px;
    margin-bottom: 0px;
    padding: 15px 20px;
    background-color: transparent;
    border-radius: 12px;
    max-width: 600px;
    width: 100%;
    box-shadow: none;
}

#hueSliderContainer label {
    font-weight: bold;
    color: #333;
    font-size: 1.1em;
}

#hueSlider {
    width: 90%;
    -webkit-appearance: none;
    appearance: none;
    height: 10px;
    background: linear-gradient(to right, rgb(254, 133, 173), rgb(255, 133, 158), rgb(255, 134, 142), rgb(254, 137, 128), rgb(250, 142, 115), rgb(243, 147, 103), rgb(234, 152, 93), rgb(223, 158, 85), rgb(211, 163, 80), rgb(198, 169, 77), rgb(184, 173, 78), rgb(168, 178, 82), rgb(152, 182, 89), rgb(134, 185, 99), rgb(115, 188, 111), rgb(94, 190, 124), rgb(67, 192, 138), rgb(21, 193, 154), rgb(0, 194, 170), rgb(0, 194, 185), rgb(0, 194, 201), rgb(0, 193, 215), rgb(0, 192, 228), rgb(0, 190, 240), rgb(0, 187, 249), rgb(0, 184, 255), rgb(38, 180, 255), rgb(89, 176, 255), rgb(122, 171, 255), rgb(150, 165, 255), rgb(174, 159, 250), rgb(195, 153, 241), rgb(212, 147, 230), rgb(227, 142, 217), rgb(239, 138, 203), rgb(248, 135, 188), rgb(254, 133, 173));
    outline: none;
    border-radius: 5px;
    transition: background 0.2s;
}

#hueSlider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 24px;
    height: 24px;
    background: #fff; /* White thumb for hue slider */
    border: 2px solid #007bff; /* Blue border for contrast */
    border-radius: 50%;
    cursor: grab;
    box-shadow: 0 3px 8px rgba(0,0,0,0.3);
    transition: background 0.2s, transform 0.1s;
}

#hueSlider::-webkit-slider-thumb:active {
    cursor: grabbing;
    transform: scale(1.15);
}

#hueSlider::-moz-range-thumb {
    width: 24px;
    height: 24px;
    background: #fff;
    border: 2px solid #007bff;
    border-radius: 50%;
    cursor: grab;
    box-shadow: 0 3px 8px rgba(0,0,0,0.3);
    transition: background 0.2s, transform 0.1s;
}

#hueSlider::-moz-range-thumb:active {
    cursor: grabbing;
    transform: scale(1.15);
}

#hueValue {
    font-weight: bold;
    color: #007bff;
    font-size: 1.3em;
    display: none;
}

#resetHueFilter {
    background-color: #6c757d; /* Gray color for reset button */
    color: white;
    border: none;
    padding: 8px 15px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.9em;
    transition: background-color 0.2s;
}

#resetHueFilter:hover {
    background-color: #5a6268;
}

/* Main content wrapper responsive rules */
@media (min-width: 768px) {
    main {
        width: 95% !important; /* Masaüstünde %90 genişlik */
        margin-left: auto;
        margin-right: auto;
    }
}

@media (max-width: 767px) {
    main {
        width: 95%; /* Mobilde %100 geniÅŸlik */
        padding: 0 10px; /* Yanlarda biraz boÅŸluk */
    }
}

.NoN331 {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* default */
  
}

.NoN332 {
  /* Ensure no extra spacing from the parent */
  padding: 0;
  margin: 0;
}



/* sadece tek kart görünürse ortala */
.NoN331 > .NoNColorPaper-root:only-child {
  margin-left: auto;
  margin-right: auto;
}

.NoN331:has(> .NoNColorPaper-root:only-child) {
  justify-content: center;
}


  

  .NoNColorPaper-root {
    /* border: 1px solid #222; */   /* koyu çerçeve */
    border-radius: 8px;
    padding: 10px;
    padding-top: 0; /* Üst padding'i sıfırla */
    margin: 0; /* Remove margin, as gap is used in the container */
    background: white;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 160px; /* sabit geniÅŸlik */
    box-sizing: border-box;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Yumuşak geçiş */
    transform-origin: center;
    /* Default animation removed, will be applied via JS */
  }

  .NoNColorPaper-root:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 14px rgba(0,0,0,0.2);
    z-index: 10;
    position: relative;
  }

  /* Renk kutusu */
.NoN335 {
  width: 160px !important;
  height: 100px !important;
  border: 1px solid #ccc;
  border-radius: 6px;
  margin: 0 auto 6px auto; /* yatayda ortala */
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  position: relative; /* İkonu konumlandırmak için */
  display: block;
cursor: grab; /* 🖐️ Hover'da el simgesi */
}

.NoN335 .info-icon {
  position: absolute;
  top: 5px; /* Ãœstten boÅŸluk */
  left: 50%; /* Yatayda ortala */
  transform: translateX(-50%); /* Tam ortalamak için */
  width: 20px;
  height: 20px;
  background-color: rgba(0, 0, 0, 0.6); /* Yarı şeffaf siyah arka plan */
  border-radius: 50%; /* Yuvarlak ÅŸekil */
  display: flex;
  align-items: center;
  justify-content: center;
  color: white; /* Ä°kon rengi */
  font-size: 12px; /* Ä°kon boyutu */
  font-weight: bold;
  cursor: pointer;
  z-index: 10; /* Diğer içeriğin üzerinde olması için */
  opacity: 0; /* Varsayılan olarak gizli */
  transition: opacity 0.2s ease-in-out;
}

.NoN335:hover .info-icon {
  opacity: 1; /* Hover'da görünür yap */
}

.NoN335 .info-icon::before {
  content: 'i'; /* 'i' harfi ikon olarak */
}

/* Favoriler panelindeki eski info ikonunu gizle */
.favorite-color-item .info-icon {
    display: none !important;
}
.NoN335:active {
  cursor: grabbing; /* ✊ Sürükleme sırasında kapalı yumruk gibi */
}

/* favorite-group içindeki NoN335'lerin genişliği */
.favorite-group .NoN335 {
  width: 100px !important;
}

  /* Yazılar */
  .NoN338 {
    text-align: center;
    line-height: 1.2;
    font-size: 15px;
  }

  .NoN338 p, .NoN338 h5 {
    margin: 2px 0;
  }

  /* RGB yazısı */
  .rgb-text {
    font-size: 12px;
    color: #555;
    margin-top: 4px;
    text-align: center;
  }
.NoNColorPaper-root, .NoNColorPaper-root * {
  user-select: text !important;
  -webkit-user-select: text !important;
  -moz-user-select: text !important;
  -ms-user-select: text !important;
  pointer-events: auto !important;
  -webkit-user-drag: auto !important;
}
 .NoN329  {
    margin: 2px 0;
  }
/* favorite-group-content içinde yer alan copy-btn'leri gizle */
.favorite-group-content .copy-btn {
    display: none;
}
.favorite-group-content .fav-add-to-favorites-btn {
    display: none;
}
/* Unified button style for color cards */
.NoN335 .copy-btn,
.NoN335 .info-btn,
.NoN335 .fav-add-to-favorites-btn {
    position: absolute;
    top: 5px;
    width: 24px;
    height: 24px;
    background-color: rgba(255, 255, 255, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    color: #333; /* Icon color */
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
    z-index: 10;
    opacity: 0; /* Hide by default */
    visibility: hidden; /* Hide by default */
}

/* Show buttons on hover */
.NoN335:hover .copy-btn,
.NoN335:hover .info-btn,
.NoN335:hover .fav-add-to-favorites-btn {
    opacity: 1;
    visibility: visible;
}

.NoN335 .copy-btn:hover,
.NoN335 .info-btn:hover,
.NoN335 .fav-add-to-favorites-btn:hover {
    transform: scale(1.1);
    background-color: rgba(255, 255, 255, 0.4);
}

/* Individual positioning */
.NoN335 .fav-add-to-favorites-btn {
    left: 5px;
}

.NoN335 .info-btn {
    left: 50%;
    transform: translateX(-50%) !important;
}

.NoN335 .copy-btn {
    right: 5px;
}

/* Add icon to copy button */
.NoN335 .copy-btn::before {
    font-family: "Font Awesome 5 Free";
    content: "\f0c5"; /* fa-copy */
    font-weight: 900; /* Solid icon */
    color: #333;
}

/* Ensure icons inside the other buttons are styled correctly */
.NoN335 .info-btn i,
.NoN335 .fav-add-to-favorites-btn i {
    color: #333 !important;
    font-size: 14px !important;
}


.copy-btn .tick {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.copy-btn-similar {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 24px;
    height: 24px;
    background-color: rgba(255, 255, 255, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    color: #333; /* Icon color */
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
    z-index: 10;
}

.copy-btn-similar:hover {
    transform: scale(1.1);
    background-color: rgba(255, 255, 255, 0.4);
}



#similarColorsContainer {
    display: flex;
    /* justify-content: space-evenly; */
    /* grid-template-columns: repeat(auto-fit, minmax(0px, 0fr)); */
    justify-content: center;
    gap: 5px !important; /* Use !important to override inline style from JS */
    padding: 5px 0px;
    overflow-x: visible;
    width: 100%;
    max-width: 1500px;
    margin-left: auto;
    margin-right: auto;
    justify-items: center;
    align-content: center;
    align-items: center;
    flex-wrap: wrap;
    flex-direction: row;
}
 


/* ========================================= */
/* Favoriler Paneli Stilleri */
/* ========================================= */
/* Grup Silme ve Favori Kaldırma Butonları İçin Ortak Stiller */

/* HEX Kodu Kopyalama Butonu Stilleri */
.copy-hex-btn {
    position: absolute;
    top: 5px;
    right: 5px;
    background-color: rgba(0, 0, 0, 0.5); /* Yarı şeffaf siyah */
    color: white;
    border: none;
    border-radius: 4px;
    padding: 4px 8px; /* Daha fazla padding */
    font-size: 0.75em; /* Daha küçük font */
    cursor: pointer;
    opacity: 0; /* Varsayılan olarak gizli */
    transition: opacity 0.3s ease, background-color 0.2s ease;
    display: flex; /* İçindeki metni/ikonu ortalamak için */
    align-items: center;
    justify-content: center;
    gap: 4px; /* Metin ve ikon arasına boşluk */
    line-height: 1; /* Metin yüksekliğini düzelt */
    text-transform: uppercase;
    font-weight: bold; /* Kalın yazı tipi */
    z-index: 10; /* Diğer öğelerin üzerinde görünmesini sağlar */
}

/* Favori kartının üzerine gelince butonu göster */
.favorite-color-item:hover .copy-hex-btn {
    opacity: 1;
}

.copy-hex-btn:hover {
    background-color: rgba(0, 0, 0, 0.7); /* Hover'da daha belirgin */
}

/* Kopyalandı mesajı için */
.copy-message {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Tam ortala */
    background-color: rgba(0, 0, 0, 0.8); /* Daha opak arka plan */
    color: white;
    padding: 8px 15px;
    border-radius: 5px;
    font-size: 0.9em;
    opacity: 0;
    transition: opacity 0.3s ease-out;
    pointer-events: none; /* Üzerine tıklanmasını engelle */
    z-index: 1000;
    white-space: nowrap;
}

.copy-message.show {
    opacity: 1;
}


.remove-favorite-group-btn,
.remove-favorite-btn {
    background: none;
    border: none;
    color: #888; /* Varsayılan renk */
    cursor: pointer;
    font-size: 1em; /* Ä°kon boyutu */
    padding: 5px; /* Tıklama alanını genişletir */
    transition: color 0.2s, transform 0.2s; /* Fare üzerine gelince yumuşak geçiş */
    margin-left: 0px; /* Metinden veya diÄŸer elementlerden boÅŸluk */
    flex-shrink: 0; /* İçeriğin küçülmesini engelle */
}

/* Make the group delete button look like the others in the header */
.favorite-group-header .remove-favorite-group-btn {
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    color: #333;
}
.favorite-group-header .remove-favorite-group-btn:hover {
    background-color: #d0d0d0;
    color: #dc3545; /* Keep the red color for the icon on hover */
    transform: none; /* Override transform from the generic rule */
}

.remove-favorite-group-btn:hover,
.remove-favorite-btn:hover {
    color: #dc3545; /* Kırmızı renk (tehlike rengi) */
    transform: scale(1.1); /* Hafif büyütme efekti */
}
/* Favorites butonu */
#favoritesToggle {
    /* position: fixed; kaldırıldı, normal akışta olacak */
    /* top ve right kaldırıldı, flexbox ile hizalanacak */
    background-color: var(--primary-color);
    color: white;
    padding: 10px 15px;
    border-radius: 8px;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    z-index: 999; /* Diğer elemanların üzerinde olmalı */
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: bold;
    transition: background-color 0.2s, transform 0.2s;
    position: static; /* Önemli: Normal akışa geri döndür */
    margin-top: 0; /* Herhangi bir üst marjı sıfırla */
    margin-right: 0; /* Herhangi bir sağ marjı sıfırla */
}

#favoritesToggle:hover {
    background-color: #0056b3;
    transform: translateY(-2px);
}

#favoritesToggle.open {
    background-color: #dc3545; /* Kapanış rengi */
}

#favoritesToggle.open:hover {
    background-color: #c82333;
}






.favorites-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
}

.favorites-header h3 {
    margin: 0;
    color: #333;
    font-size: 1.5em;
}

#closeFavorites {
    background: none;
    border: none;
    font-size: 1.5em;
    cursor: pointer;
    color: #555;
    transition: color 0.2s;
}

#closeFavorites:hover {
    color: #dc3545;
}

.favorites-group-actions {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
}
.import-group-actions {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
}

#newGroupName {
    flex-grow: 1;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 0.9em;
	max-width: 190px;
}

#import-group-code {
    flex-grow: 1;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 0.9em;
	max-width: 190px;
}
#addNewGroupBtn {
    background-color: #28a745;
    color: white;
    border: none;
    padding: 8px 12px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.2s;
	width: 120px;
}

#addNewGroupBtn:hover {
    background-color: #218838;
}

#import-group-btn {
    background-color: #28a745;
    color: white;
    border: none;
    padding: 8px 12px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.2s;
	width: 120px;
}

#import-group-btn:hover {
    background-color: #218838;
}


#favoritesContent {
    flex-grow: 1; /* İçeriğin kalan alanı doldurmasını sağla */
    overflow-y: auto; /* İçerik taşarsa kaydırma çubuğu */
    padding-right: 10px; /* Kaydırma çubuğu için boşluk */
    margin-right: -10px; /* Kaydırma çubuğu boşluğunu dengelemek için */
}

/* Favori Grup Stilleri */
.favorite-group {
    background-color: #f9f9f9;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    margin-bottom: 15px;
    overflow: hidden; /* Çocuk elemanları için */
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.favorite-group-header {
    display: flex; /* Flexbox kullan */
    justify-content: space-between; /* Sol ve sağ içeriği ayır */
    align-items: center;
    padding: 8px 10px;
    background-color: #e0e0e0; /* Açık gri arka plan */
    border-bottom: 1px solid #ddd;
    font-weight: bold;
    cursor: grab; /* Sürükle-bırak için imleç */
    gap: 5px; /* Ana bloklar (sol ve sağ konteynerler) arası boşluk */
}
.favorite-group-header:active {
    cursor: grabbing; /* Tıklama anında imleç değişimi */
}
/* Sol taraftaki içerik: Drag ikonu, İsim Input ve Yeni Butonlar için konteyner */
.grup-header-icerik-sol {
    display: flex;
    align-items: center;
    flex-grow: 1; /* Gerekirse mevcut alanı kapla */
    gap: 2px; /* İç elemanlar arası boşluk (ikon, input, butonlar) */
}

/* Sağ taraftaki içerik: Mevcut Daralt/Genişlet ve Sil butonları için konteyner */
.grup-header-icerik-sag {
    display: flex;
    gap: 2px; /* Butonlar arası boşluk */
    flex-shrink: 0; /* Daralmaya izin verme */
}

/* Grup adı input elementi */
.group-name-input {
    flex-shrink: 1; /* Daralmaya izin ver */
    white-space: nowrap; /* Tek satırda tut */
    overflow: hidden; /* Taşmayı gizle */
    text-overflow: ellipsis; /* Taşarsa üç nokta göster */
    max-width: 120px; /* Bu değeri ihtiyacınıza göre ayarlayın */
    padding: 4px 6px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
    height: 28px; /* Butonlarla aynı yüksekliğe yakın olsun */
    box-sizing: border-box; /* Padding ve border'ın genişliğe dahil olmasını sağlar */
    background-color: transparent;
}
/* Grup adı input elementi */
.group-name-input {
    flex-shrink: 1; /* Daralmaya izin ver */
    white-space: nowrap; /* Tek satırda tut */
    overflow: hidden; /* Taşmayı gizle */
    text-overflow: ellipsis; /* Taşarsa üç nokta göster */
    max-width: 120px; /* Bu değeri ihtiyacınıza göre ayarlayın */
    padding: 4px 6px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
    height: 28px; /* Butonlarla aynı yüksekliğe yakın olsun */
    box-sizing: border-box; /* Padding ve border'ın genişliğe dahil olmasını sağlar */
    background-color: transparent;
}
.group-header {
    display: flex;
    align-items: center;
    padding: 6px 12px;
    background-color: #f0f0f0;
    cursor: grab;
    user-select: none;
    border-radius: 6px;
    margin-bottom: 4px;
}

.drag-icon {
    cursor: grab;
    margin-right: 8px;
    font-size: 1.2em;
    color: #666;
    user-select: none;
}

.group-name-input:focus {
    border-color: #007bff;
    outline: none;
    background-color: #fff;
}

.group-name-display {
    padding: 2px 5px;
    flex-grow: 1;
}


.favorite-group-header .remove-favorite {
    background: none;
    border: none;
    color: #888;
    cursor: pointer;
    font-size: 1.2em;
    margin-left: 10px;
    transition: color 0.2s;
}

.favorite-group-header .remove-favorite:hover {
    color: #dc3545;
}
/* Tüm grup başlığı butonları için genel stiller */
.favorite-group-header button {
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    padding: 4px 6px; /* Metinli butonlar için varsayılan padding */
    cursor: pointer;
    border-radius: 4px;
    font-size: 14px;
    line-height: 1; /* İkonların dikeyde ortalanması için */
    display: flex; /* İkon ve metni ortalamak için */
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s;
    color: #333; /* Ä°kon rengi */
}

.favorite-group-header button:hover {
    background-color: #d0d0d0;
}
/* Favori grup başlığındaki tüm butonları özel olarak küçült */
.favorite-group-header .ase-aktar-buton,
.favorite-group-header .grup-paylas-buton,
.favorite-group-header .pdf-btn,
.favorite-group-header .pinterest-btn,
.favorite-group-header .collapse-toggle-btn,
.favorite-group-header .remove-favorite-group-btn {
    padding: 2px 4px;
    font-size: 0.8rem;
    height: 24px;
    min-width: 24px;
}
.collapse-toggle-btn {
    font-size: 1.2em; /* Ä°kon boyutu */
    cursor: pointer;
    color: #555;
    margin-left: 0px;
    transition: background-color 0.2s; /* Buton rengi geçişi */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0; /* Küçülmesini engelle */
}
.collapse-toggle-btn:hover {
    background-color: #d0d0d0; /* Hover rengi */
}

.favorite-group-content {
    padding: 10px; /* İçerik göründüğünde iç boşluk */
    display: flex; /* İçindeki favori renkleri düzenlemek için (önceki kodunuzda flex-direction: column vardı) */
    flex-direction: column;
    gap: 10px; /* Favori renkler arası boşluk */
    min-height: 50px; /* Boş gruplar için min yükseklik */
    transition: opacity 0.3s ease; /* Yumuşak görünürlük geçişi */
    transition: background-color 0.2s;
	max-height: none; /* Yeterince büyük bir varsayılan yükseklik */
    overflow: hidden;
    transition: max-height 0.4s ease-out; /* Yumuşak geçiş */
    padding: 10px; /* Görünürken iç boşluk */
	
}
.favorite-group-content.hidden {
    display: none; /* İçeriği tamamen gizle */
    opacity: 0; /* Opaklığı sıfırla (eğer transition için kullanılacaksa) */
    padding-top: 0;
    padding-bottom: 0;
}
.favorite-group-content.collapsed {
    max-height: 0; /* İçeriği gizle */
    padding-top: 0;
    padding-bottom: 0;
    border-top: none; /* Gizlendiğinde üst çizgiyi kaldır (isteğe bağlı) */
}
.favorite-group-content.drag-over {
    background-color: #e0e0e0; /* Sürükleme üzerinde efekti */
}

/* Her bir favori renk öğesi */
.favorite-color-item {
    display: flex;
    align-items: center;
    justify-content: space-between; /* EKLENDİ/GÜNCELLENDİ: Öğeleri yana doğru yayar */
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 8px;
    position: relative;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    transition: transform 0.2s, box-shadow 0.2s;
    cursor: grab; /* Sürüklenebilir olduğunu belirt */
}

.favorite-color-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.favorite-color-item.dragging-favorite {
    opacity: 0.5;
    transform: scale(0.95);
    box-shadow: 0 0 0 rgba(0,0,0,0); /* Gölgeleri kaldır */
}


.favorite-color-item .NoNColorPaper-root.NoN332 { /* İçindeki kartın stilini sıfırla */
    flex-grow: 1; /* RENK KUTUSUNUN VE METÄ°NÄ°N KAPSAYICISI */
    padding: 0;
    box-shadow: none;
    border: none;
    background-color: transparent;
    cursor: default; /* Kopyala için kendi cursor'ını kullanır */
    display: flex; /* İçindeki öğeleri (renk kutusu ve metin) hizalamak için */
    align-items: center;
    margin-bottom: 0 !important; /* Favori panelindeki elemanlar arasındaki boşluğu kaldır */
}



.favorite-color-item .NoN338 p,
.favorite-color-item .NoN338 h5 {
    margin: 0;
    line-height: 1.3;
}

.favorite-color-item .NoN338 h5 {
    font-size: 0.95em;
    font-weight: bold;
}

.favorite-color-item .NoN338 p {
    font-size: 0.8em;
    color: #666;
}


.remove-favorite-btn {
    background: none;
    border: none;
    color: #888;
    cursor: pointer;
    font-size: 1em;
    padding: 5px;
    transition: color 0.2s;
    margin-left: 10px; /* Metinden biraz boşluk bırakır */
    flex-shrink: 0; /* Küçülmesini engelle */
}

.remove-favorite-btn:hover {
    color: #dc3545;
}

/* Favoriler panelindeki NoN335 elemanlarının marginini sıfırla */
.favorite-color-item .NoN335 {
    margin: 0 !important;
}


/* Ana sayfadaki kartlar için favori ikonu */
.NoN332 { /* Bu, ana kartınızın sınıfı olmalı */
    position: relative; /* İçindeki ikonları konumlandırmak için */
}

.favorite-icon {
    position: absolute;
    top: 8px;
    right: 8px;
    background: none;
    border: none;
    font-size: 1.2em;
    cursor: pointer;
    color: #ccc; /* Varsayılan renk (boş kalp) */
    transition: color 0.2s, transform 0.2s;
    z-index: 10;
}

.favorite-icon:hover {
    color: #ffc107; /* Hover rengi */
    transform: scale(1.1);
}

.favorite-icon.favorited {
    color: #ffc107; /* Dolu kalp rengi */
}
/* Ana renk kartı sürüklenirken gizlenecek */
.main-color-card.is-dragging-new-card {
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Mevcut custom-drag-shadow CSS'iniz her iki tür kart için de geçerli olmalı */
.custom-drag-shadow {
    position: fixed;
    pointer-events: none;
    z-index: 99999;
    opacity: 0.8;
    background-color: white; /* veya kartın kendi rengi */
    border: 1px solid #ccc;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    border-radius: 4px;
    padding: 5px;
    display: flex;
    align-items: center;
    gap: 8px;
    width: auto;
    height: auto;
    white-space: nowrap;
}
/* Favoriler paneline eklemek için */
#customDragImage {
    position: absolute;
    top: -1000px; /* Ekran dışında tut */
    left: -1000px; /* Ekran dışında tut */
    width: 60px; /* Ä°stediÄŸiniz geniÅŸlik */
    height: 60px; /* İstediğiniz yükseklik */
    border: 2px dashed #007bff; /* Güzel bir görsel ipucu */
    background-color: rgba(255, 255, 255, 0.7); /* Hafif ÅŸeffaf arka plan */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: #333;
    font-weight: bold;
    border-radius: 5px;
    z-index: 9999; /* Diğer her şeyin üzerinde görünmesini sağlayın */
    pointer-events: none; /* Sürükleme esnasında olayları engelle */
    box-sizing: border-box; /* Padding ve border'ı width/height içine dahil et */
}

/* Sürükleme anında hafif bir stil */
.dragging-favorite-placeholder {
    opacity: 0.5; /* Sürüklenen orijinal öğeyi hafifçe soluklaştır */
    border: 1px dashed #ccc;
}




/* Favoriler paneli açıkken body'nin sağ padding'ini ayarla */






/* Mobil görünümde favorites-open iken searchBarWrapper'ın sağ boşluğunu sıfırla */



/* 2. ANA İÇERİK KAPSAYICINIZ (NoN331) İÇİN CSS */
.NoN331 {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* Center the items */
    gap: 15px; /* Add a fixed gap */
    
    /* DAHA YUMUŞAK GEÇİŞ: Body ile uyumlu, hafif bir gecikme hissiyle */
        /* DAHA YUMUŞAK GEÇİŞ: Hızlı başla, yumuşak dur (ease-out-quart benzeri) */
    transition: background-color 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), /* Renk değişimi daha hızlı olsun */
                transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), /* Transform daha hızlı hissetsin */
                right 0.6s cubic-bezier(0.23, 1, 0.32, 1); /* Kayma panelle uyumlu olsun */
    
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    margin-top: auto; /* Added for vertical centering */
    margin-bottom: auto; /* Added for vertical centering */
    box-sizing: border-box;
    padding: 0; /* Remove horizontal padding to fix wrapping */
}



#favoritesToggle:hover {
    background-color: #0056b3;
    transform: translateY(-3px); /* Biraz daha belirgin bir hover efekti */
}

#favoritesToggle.open {
    background-color: #dc3545;
    /* Z-index düzeltmesi: Bu butonu gizliyordu, kaldırdım. */
    /* z-index: -9999; */ 
    right: 390px;
	display: none;
}

#favoritesToggle.open:hover {
    background-color: #c82333;
}

/* Favoriler Paneli (#favoritesPanel) için daha yumuşak ve modern geçişler */
#favoritesPanel {
    position: fixed;
    top: 0;
    right: -380px;
    width: 380px;
    height: 100%;
    background-color: #fff;
    box-shadow: -4px 0 10px rgba(0, 0, 0, 0.2);
    /* Z-index düzeltmesi: Yüksek bir değer, ancak butonun altında kalmalı (açıkken) */
    z-index: 1999; 
    display: flex;
    flex-direction: column;
    padding: 20px;
    box-sizing: border-box;

    /* DAHA YUMUŞAK GEÇİŞ: Hızlı başla, yumuşak dur (ease-out-expo benzeri) */
    transition: right 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

#confirmationModalOverlay {
    z-index: 100000;
}
#favoritesPanel.open {
    right: 0;
    /* Z-index panelin açıkken de aynı kalmalı, kapatma animasyonu için ayrı bir z-index vermeye gerek yok */
    /* z-index: 9999; /* Zaten yukarıda set edildi, tekrar etmeye gerek yok */
}
/* Favoriler panelindeki başlık (önceden h3 idi, h2 yaptık) */
#favoritesPanel h2 {
    font-size: 1.6em; /* Favoriler başlığı için daha küçük ama okunaklı bir boyut */
    font-weight: 600;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}
/* --- Mobilde tam ekran modal gibi yapmak için --- */
@media (max-width: 600px) {
  #favoritesOverlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0,0,0,0.5);
  z-index: 9998;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease;
}

/* Overlay açıkken */
#favoritesOverlay.active {
  opacity: 1;
  visibility: visible;
}

/* Favori panel (mobilde tam ekran) */
#favoritesPanel {
  position: fixed;
  top: 0;
  right: -100vw; /* İlk başta tamamen ekran dışında sağda */
  width: 100vw;   /* Mobilde tam geniÅŸlik */
  height: 100vh;  /* Tam yükseklik */
  background-color: #fff;
  box-shadow: -4px 0 10px rgba(0, 0, 0, 0.2);
  z-index: 9999;  /* Overlay’ın üstünde */
  display: flex;
  flex-direction: column;
  padding: 20px;
  box-sizing: border-box;
  transition: right 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  overflow-y: auto; /* Panel içinde scroll varsa kaydırılabilir */
}

/* Panel açıkken */
#favoritesPanel.open {
  right: 0;
}
	/* Body scroll kilitleme - JS ile body'ye ekleyeceğimiz class için */

}


/* Renk Çarkı ve Kaydırıcı için CSS (Güncellenmiş) */

/* Genel Modal Arka Planı */
.color-wheel-modal {
    position: fixed;
    z-index: 999999; /* Increased z-index to ensure it's on top */
    left: 0;
    top: 0;
    width: 100vw; /* Use viewport width */
    height: 100vh; /* Use viewport height */
    overflow: auto;
    background-color: rgba(0,0,0,0.6);
    display: flex; /* Always display flex, control visibility with opacity/visibility */
    justify-content: center;
    align-items: center;
    opacity: 0; /* Initially hidden */
    visibility: hidden; /* Initially hidden */
    transition: opacity 0.3s ease, visibility 0.3s ease; /* Smooth transition */
}

.color-wheel-modal.active { /* New class to activate the modal */
    opacity: 1;
    visibility: visible;
}
.color-wheel-modal-content {
    background-color: #fff;
    padding: 25px;
    border-radius: 16px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25);
    text-align: center;
    position: relative; /* Changed to relative, as it's centered by parent flex */
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    transform: translateY(20px); /* Initial position for animation */
    opacity: 0; /* Initial opacity for animation */
    transition: transform 0.3s ease, opacity 0.3s ease; /* Smooth transition */
    z-index: 999999; /* Ensure content is also on top */
}

.color-wheel-modal.active .color-wheel-modal-content { /* New rule to animate content */
    transform: translateY(0);
    opacity: 1;
}

.color-wheel-modal-close {
    position: absolute;
    top: 10px;
    right: 15px;
    background: none;
    border: none;
    font-size: 1.8em;
    cursor: pointer;
    color: #555;
    transition: color 0.2s;
}
.color-wheel-modal-close:hover {
    color: #000;
}

#colorPickerMainArea {
    display: flex;
    gap: 30px; /* Çark/Slider ve inputlar arasındaki boşluk */
    align-items: flex-start; /* Ãœstten hizala */
    width: 100%; /* Ebeveyn geniÅŸliÄŸi */
    justify-content: center;
    flex-wrap: wrap; /* Çocukların alt alta sarılmasına izin verir */
}

#colorCanvases {
    display: flex;
    gap: 20px;
    align-items: center; /* Dikey ortalama */
    justify-content: center; /* Yatay ortalama */
    position: relative;
    overflow: visible;
    min-height: 250px;
    --slider-canvas-left: 0px;
    --slider-canvas-width: 30px;
}

#colorWheelContainer, #colorWheelCanvas {
    width: 300px;   /* Sabit geniÅŸlik */
    height: 300px;
    box-sizing: border-box;
    border: 1px solid #ccc;
    display: block;
    padding: 0;
    margin: 0 auto;
}

#colorSliderCanvas {
    width: 30px; /* Slider geniÅŸliÄŸi */
    height: 300px; /* JS'teki WHEEL_SIZE ile aynı olmalı */
    border-radius: 0px;
}

#colorValueInputs {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
    width: 100%;
    max-width: 100%;
}

/* Butonu canvas grubundan ayırıp altına ve ortasına yerleştiriyoruz */
#confirmColorWheelBtn {
    display: block;
    margin: 15px auto 0 auto; /* Ãœstten boÅŸluk, yatayda ortala */
    background-color: #28a745;
    color: white;
    border: none;
    padding: 12px 25px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 17px;
    font-weight: 600;
    transition: background-color 0.2s ease, transform 0.1s ease;
    box-shadow: 0 4px 10px rgba(40, 167, 69, 0.2);
}
#confirmColorWheelBtn:hover {
    background-color: #218838;
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(40, 167, 69, 0.3);
}
#confirmColorWheelBtn:active {
    transform: translateY(0);
    box-shadow: 0 2px 5px rgba(40, 167, 69, 0.2);
}

#modalColorPreview {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    width: 100%;
}
#modalSelectedColorDisplay {
    width: 150px;
    height: 75px;
    border: 2px solid #eee;
    border-radius: 10px;
    flex-shrink: 0;
    box-shadow: inset 0 0 8px rgba(0,0,0,0.1);
    transition: background-color 0.1s ease-out;
}

/* Input Grubu Stili */
.input-group {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    justify-content: center;
}
.input-group label {
    font-weight: bold;
    min-width: 45px;
    text-align: right;
}
.input-group input[type="text"],
.input-group input[type="number"] {
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
    flex-grow: 1;
    max-width: 100px;
    text-align: center;
}
.input-group .small-input {
    width: 60px;
    flex-grow: 0;
}

/* Canvas ve slider stili */
.color-picker-canvases {
    display: flex;
    gap: 20px;
    justify-content: center;
    align-items: center;
    position: relative;
}

/* #colorSliderCanvas için belirginlik */
#colorSliderCanvas {
    outline: 0px dashed red !important; /* Canvas'ı belirginleştirmek için */
    width: 30px; /* Slider geniÅŸliÄŸi */
    height: 250px; /* Slider yüksekliği */
}

#sliderIndicatorLine {
    position: absolute;
    width: 30px;
    height: 0px;
    background-color: transparent;
    z-index: 5;
    cursor: grab;
    user-select: none;
    transform: translateY(-50%);
}
#sliderIndicatorLine::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 100%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-right: 10px solid #333;
    filter: drop-shadow(0 0 1px rgba(0,0,0,0.5));
    pointer-events: none;
}
#sliderIndicatorLine::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 100%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 10px solid #333;
    filter: drop-shadow(0 0 1px rgba(0,0,0,0.5));
    pointer-events: none;
}

/* --- Responsive Ayarlamalar (Tablet ve Masaüstü için) --- */
@media (min-width: 768px) {
    #colorPickerMainArea {
        flex-direction: row; /* Geniş ekranlarda yan yana düzen */
        justify-content: center;
        align-items: flex-start;
    }
    #colorCanvases {
        flex-direction: row; /* Kanvaslar yan yana */
        align-items: center; /* Dikey ortala */
    }
    #colorValueInputs {
        width: auto;
        min-width: 250px;
        align-items: flex-start;
    }
    .input-group {
        justify-content: flex-start;
    }
}

@media (max-width: 940px) {
    .color-wheel-modal-content {
        width: 90vw;
        max-width: 520px; /* Max width for the modal content */
    }

    #colorCanvases {
        flex-wrap: nowrap; /* Ensure wheel and slider stay together */
        justify-content: center;
        width: 100%;
        gap: 15px;
    }

    #colorWheelCanvas {
        width: 65vw; /* Responsive width */
        height: 65vw; /* Maintain aspect ratio */
        max-width: 280px; /* Cap the size */
        max-height: 280px;
    }

    #colorSliderCanvas {
        width: 8vw; /* Responsive width */
        height: 65vw; /* Match wheel height */
        max-width: 30px; /* Cap the size */
        max-height: 280px;
    }
}

/* Ekstra küçük ekranlar için ince ayar */
@media (max-width: 600px) {
    .color-wheel-modal-content {
        padding: 10px;
        gap: 10px;
		width: 100%;
		top: 150px; /* Added for mobile positioning */
		margin-top: 0; /* Removed conflicting margin-top */
    }
    .color-wheel-modal-close {
        font-size: 24px;
        right: 10px;
        top: 5px;
    }
    h3 {
        font-size: 1.2em;
    }
    .confirm-button {
        padding: 8px 15px;
        font-size: 14px;
    }
    .input-group input {
        font-size: 12px;
        padding: 6px;
    }
    .input-group label {
        min-width: 40px;
        font-size: 0.9em;
    }
    #colorCanvases {
        gap: 10px;
        width: 100%;
        max-width: 100vw;
        padding: 0 10px;
    }
    #colorWheelCanvas, #colorSliderCanvas {
        width: 45vw;  /* %45 genişlik vererek toplamda %90 alan kaplasın */
        max-width: 300px;
        height: auto;
    }
}

/* Modern Button Style */
.modern-button {
    background-color: var(--primary-color); /* Use primary color from variables */
    color: white;
    border: none;
    padding: 12px 25px;
    border-radius: 8px; /* Rounded corners */
    cursor: pointer;
    font-size: 17px;
    font-weight: 600;
    transition: background-color 0.2s ease, transform 0.1s ease, box-shadow 0.2s ease;
    box-shadow: 0 4px 10px rgba(0, 123, 255, 0.2); /* Subtle shadow */
    display: inline-flex; /* For icon and text alignment */
    align-items: center;
    justify-content: center;
    gap: 8px; /* Space between icon and text if any */
}

.modern-button:hover {
    background-color: var(--primary-hover-color); /* Darker shade on hover */
    transform: translateY(-2px); /* Slight lift effect */
    box-shadow: 0 6px 15px rgba(0, 123, 255, 0.3); /* More pronounced shadow on hover */
}

.modern-button:active {
    transform: translateY(0); /* Press down effect */
    box-shadow: 0 2px 5px rgba(0, 123, 255, 0.2); /* Smaller shadow when pressed */
}

/* Secondary Button Style (for Clear Selected Colors) */
.modern-button.secondary-button {
    background-color: #f0f0f0; /* Light grey background */
    color: #333; /* Dark text */
    border: 1px solid #ccc; /* Light border */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Softer shadow */
}

.modern-button.secondary-button:hover {
    background-color: #e0e0e0; /* Slightly darker grey on hover */
    color: #000; /* Darker text on hover */
    border-color: #bbb; /* Darker border on hover */
    transform: translateY(-1px); /* Slight lift */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); /* Slightly more pronounced shadow */
}

.modern-button.secondary-button:active {
    transform: translateY(0);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Genel bir ikon butonu sınıfı oluşturun */
.icon-button {
    background: none; /* Arka planı kaldırın */
    border: none; /* Çerçeveyi kaldırın */
    cursor: pointer; /* Fare imlecini işaretçi yapın */
    font-size: 20px; /* İkon ve metin boyutu için (isteğe bağlı) */
    display: inline-flex; /* İçeriği hizalamak için */
    align-items: center; /* Dikeyde ortala */
    justify-content: center; /* Yatayda ortala */
    padding: 5; /* Padding'i sıfırla, ikonun kendi boşluğu vardır */
    color: #333; /* Varsayılan ikon rengi - isteğe göre ayarlayabilirsiniz */
    /* Geçiş efektini ekledik */
    transition: color 0.3s ease, background-color 0.3s ease; 
}

/* Remove arrows from number inputs */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type="number"] {
    -moz-appearance: textfield; /* Firefox */
}

/* İkonların boyutunu ayarlamak için */
.icon-button i {
    font-size: 20px; /* Font Awesome ikonları için boyutu buradan kontrol edebilirsiniz */
}

/* Hover efekti */
.icon-button:hover {
    color: #007bff; /* Hover durumunda ikon rengini değiştir (örneğin mavi) */
    /* EÄŸer arka plan rengi de deÄŸiÅŸsin isterseniz */
    /* background-color: rgba(0, 123, 255, 0.1); */ /* Hafif bir arka plan rengi */
}

/* Eğer butondaki metin için de font-size ayarı yapmak istiyorsanız */
/* (Bu kural, ikon kullandığımız için artık doğrudan "🧪" gibi emojiler için geçerli değil,
   ancak butonda sadece metin olsaydı bu işe yarardı. icon-button i kuralı daha öncelikli.) */
#pickColor {
    /* font-size: 20px; */ /* İkon kullandığımız için bu kurala gerek kalmadı, .icon-button i zaten ayarlıyor */
}

/* Veya daha genel bir şekilde, tüm ikon butonlarının içindeki metin veya emoji için */
.icon-button {
    /* ... diÄŸer stiller ... */
    /* font-size: 20px; */ /* Bu da .icon-button i kuralıyla çakışabilir, ikona odaklanıyorsak yukarıdaki i kuralı daha iyi */
}

/* CMYK Uyarı Stilleri */
.cmyk-warning-container {

}
#cmykWarningModal {
    z-index: 9999999;
    top: 0px !important;
}
.cmyk-warning-toggle {
    margin: 0; /* Başlığın varsayılan marginlerini sıfırla */
    padding: 5px 0;
    cursor: pointer;
    color: #333;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.9em;
    font-weight: bold;
    user-select: none; /* Metin seçimi engellenebilir */
}
/* CMYK uyarı modalındaki metinler için */
#cmykWarningModal p {
    font-family: 'Inter', sans-serif;
    font-size: 0.95em; /* Biraz daha küçük font */
    line-height: 1.5;
}
.cmyk-warning-toggle:hover {
    color: #007bff; /* Hover efekti */
}

.toggle-icon {
    font-size: 0.8em;
    transition: transform 0.2s ease-in-out;
}

.cmyk-warning-toggle.open .toggle-icon {
    transform: rotate(180deg); /* Açıldığında ok yönünü çevir */
}

.cmyk-warning-content {
    /* Başlangıçta display: none; ile gizli olacak */
    padding-top: 10px;
    border-top: 1px solid #eee;
    margin-top: 10px;
}

.cmyk-warning-content p {
    margin-bottom: 0; /* Paragrafın altındaki boşluğu azalt */
}
/* Genel Modal Stilleri (zaten varsa aynen kalsın, yoksa ekleyin) */
.modal {
    display: none; /* Varsayılan olarak gizli */
    position: fixed; /* Ekranı kaplar */
    z-index: 1000; /* Diğer her şeyin üzerinde */
    left: 0;
    top: 110px;
    width: 100%; /* Tam geniÅŸlik */
    height: 100%; /* Tam yükseklik */
    overflow: auto; /* İçerik taşarsa kaydırma çubuğu */
    background-color: rgba(0,0,0,0.4); /* Yarı şeffaf arka plan */
    display: flex; /* İçeriği ortalamak için */
    align-items: center; /* Dikeyde ortala */
    justify-content: center; /* Yatayda ortala */
}

.modal-content {
    background-color: #fefefe;
    margin: auto; /* Flexbox ile ortalamak için auto margin kullanılmayabilir */
    padding: 20px;
    border: 1px solid #888;
    width: 80%; /* Genişlik, ihtiyaca göre ayarlanabilir */
    max-width: 600px; /* Maksimum geniÅŸlik */
    border-radius: 8px;
    position: relative;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    animation-name: animatemodal;
    animation-duration: 0.4s;
}

/* Modal Açılış Animasyonu */
@keyframes animatemodal {
    from {top: -300px; opacity: 0}
    to {top: 0; opacity: 1}
}

.close-button {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    position: absolute;
    top: 10px;
    right: 15px;
}

.close-button:hover,
.close-button:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

/* Yeni info-button stili */
.info-button {
    background-color: #f0f0f0;
    color: #555;
    border: 1px solid #ccc;
    padding: 8px 15px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.9em;
    margin-top: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s, border-color 0.2s;
}

.info-button:hover {
    background-color: #e0e0e0;
    border-color: #bbb;
}

/* intro-text için daha önce verdiğimiz stil */
.intro-text {
    max-width: 785px;
    margin: 0px auto;
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    line-height: 1.5;
    color: #555;
	padding: 5px 5px; /* Metin kutusunun içindeki boşluk */
}

.intro-text p {
    margin-bottom: 15px;
}
/* Metin içeriğini saran yeni kapsayıcı */
#introTextContentWrapper {
    margin-bottom: 20px; /* Metin bloğunun altındaki boşluk */
    /* Transition'ları buraya taşıyoruz, çünkü bu div gizlenecek */
    max-height: 1000px; /* Başlangıçta yeterince büyük */
    opacity: 1;
    overflow: hidden;
    transition: max-height 0.8s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.8s cubic-bezier(0.65, 0, 0.35, 1);
}

/* GizlendiÄŸinde uygulanacak stil */
#introTextContentWrapper {
    margin-bottom: 20px;
    max-height: 1000px; /* Başlangıçta yeterince büyük bir değer */
    opacity: 1;
    overflow: hidden;
    /* Geçiş süresini biraz artırabilir ve timing-function'ı değiştirebiliriz */
    transition: max-height 0.8s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.8s cubic-bezier(0.65, 0, 0.35, 1),
                margin-bottom 0.8s cubic-bezier(0.65, 0, 0.35, 1), padding 0.8s cubic-bezier(0.65, 0, 0.35, 1);
}
#introTextContentWrapper.intro-hidden {
    max-height: 0 !important; /* !important ekleyerek JavaScript'in inline stilini override etmesini engelliyoruz */
    opacity: 0;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}


/* Toggle butonu wrapper'ı (önceki gibi) */
.toggle-intro-wrapper {
    text-align: center;
    margin-top: 15px; /* Butonun üstündeki boşluk (introTextContentWrapper gizlendiğinde de kalır) */
    margin-bottom: 30px; /* Butonun altındaki boşluk */
}

/* Toggle butonu stilleri (önceki gibi) */
#toggleIntroTextBtn {
    background-color: #e0e0e0;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

#toggleIntroTextBtn:hover {
    background-color: #d0d0d0;
    transform: translateY(-2px);
}

#toggleIntroTextBtn i {
    color: #555;
    font-size: 1.2em;
}

/* Ok ikonunun dönüşü için CSS sınıfı */
  /* Bu sınıfı doğrudan toggleIntroTextBtn'e uygulayabiliriz */
.intro-hidden-btn-icon .fa-chevron-up {
    transform: rotate(180deg);
}

/* Animation for flying color card to favorites */
@keyframes fly-to-favorites {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: 1;
    }
    100% {
        transform: translate(50vw, -50vh) scale(0.1);
        opacity: 0;
    }
}

.color-card-fly {
    position: absolute;
    z-index: 10000;
    animation: fly-to-favorites 0.8s ease-in-out forwards;
}

/* BUTON İKONUNUN DÖNMESİ İÇİN YENİ KURALLAR: */
#toggleIntroTextBtn.rotated i { /* Butonun kendisine bir sınıf ekleyeceğiz */
    transform: rotate(180deg);
}
.group-drag-handle {
    user-select: none;
    cursor: grab;
}
    /* LAB input alanları için özel genişlik */
    #labLInput,
    #labAInput,
    #labBInput {
        width: 80px; /* Bu değeri ihtiyacınıza göre artırın veya azaltın */
        /* Eğer halihazırda 'small-input' sınıfında bir max-width varsa, onu da geçersiz kılmanız gerekebilir */
        max-width: none; 
    }

    /* Genel small-input sınıfını da kontrol edin, çakışma olabilir */
    .small-input {
        /* Mevcut genişlik tanımınız ne ise, buna bakın */
        /* width: 60px; gibi bir şey varsa ve yeterli değilse, yukarıdaki ID'ye özel tanımınız onu geçersiz kılacaktır. */
    }
.return-button {
    background-color: #007bff; /* Mavi arka plan */
    color: white; /* Beyaz yazı rengi */
    padding: 10px 15px; /* İç boşluk */
    border: none; /* Kenarlık yok */
    border-radius: 5px; /* Köşeleri yuvarla */
    cursor: pointer; /* Fare imleci işaretçi olsun */
    font-size: 16px; /* Yazı boyutu */
    margin-top: 20px; /* Ãœstten boÅŸluk */
    display: inline-flex; /* Ä°kon ve metni yanyana hizala */
    align-items: center; /* Dikeyde ortala */
    gap: 8px; /* İkon ile metin arasına boşluk */
    transition: background-color 0.3s ease; /* Hover efekti için geçiş */
}

.return-button:hover {
    background-color: #0056b3; /* Hover'da daha koyu mavi */
}

/* Buton için pulse + scale + shadow animasyonu */
  @keyframes pulseScaleShadow {
    0% {
      transform: scale(1);
      box-shadow: 0 0 0 0 rgba(0, 123, 255, 0.7);
    }
    50% {
      transform: scale(1.05);
      box-shadow: 0 0 15px 5px rgba(0, 123, 255, 0.5);
    }
    100% {
      transform: scale(1);
      box-shadow: 0 0 0 0 rgba(0, 123, 255, 0);
    }
  }

  .pulse-btn {
    animation: pulseScaleShadow 2s infinite;
    cursor: pointer;
    transition: background-color 0.3s ease;
    border-radius: 6px;
    padding: 10px 14px;
    background-color: #007bff; /* Mavi ton, istersen deÄŸiÅŸtirebilirsin */
    color: white;
    border: none;
    outline: none;
    font-size: 16px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }

  /* Gizli durum için max-height 0 */
  .intro-hidden {
    overflow: hidden;
    transition: max-height 0.6s ease;
  }

body.tips-modal-open #centerGroup.floating-search-bar {
    display: none;
}

body.modal-open {
    overflow: hidden;
}

/* Modal arka plan */
#tipsModalOverlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s ease, visibility 0.3s;
}

/* Modal kutu */
#tipsModal {
  background: white;
  border-radius: 12px;
  padding: 20px;
  max-width: 700px;
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
  transform: scale(0.95);
  transition: transform 0.3s ease, opacity 0.3s;
  position: relative;
  opacity: 0;
}
/* Açıldığında görünür hale getir */
#tipsModalOverlay.show {
  visibility: visible;
  opacity: 1;
}

#tipsModalContent {
  font-size: 15px;
  line-height: 1.6;
  padding-top: 60px; /* Add padding to account for the sticky header */
}

.tips-modal-header {
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    border-bottom: 1px solid #eee;
    margin: -20px -20px 0 -20px; /* Absorb the modal's padding */
    width: calc(100% + 40px); /* Counteract the absorbed padding */
}

.tips-modal-header h3 {
    margin: 0;
    font-size: 1.2em;
}

#tipsModalOverlay.show #tipsModal {
  transform: scale(1);
  opacity: 1;
}

/* Kapatma butonu */
#closeTipsBtn {
  position: static; /* Remove absolute positioning */
  font-size: 24px;
  background: none;
  border: none;
  cursor: pointer;
  color: #666;
}
/* SVG Alt Görsel */
.tips-image {
  margin-top: 20px;
  width: 100%;
  max-height: 300px;
  object-fit: contain;
}
/* Responsive */
@media (max-width: 600px) {
  #tipsModalOverlay {
    top: var(--header-height);
    height: calc(100vh - var(--header-height));
  }

  #tipsModal {
    max-width: 95%;
    padding: 15px;
  }

  .tips-image {
    max-height: 200px;
  }
}

.feature-highlights ul {
  list-style: none;
  padding: 0;
}

.feature-highlights li {
  margin-bottom: 10px;
}







/* Mobil cihazlarda göster */
/*@media (hover: none) and (pointer: coarse) {
  .fav-add-to-favorites-btn {
    display: block;
  }
}*/

/* Masaüstü cihazlarda gizle*/
/*@media (hover: hover) and (pointer: fine) {
  .fav-add-to-favorites-btn {
    display: block;
  }
}
*/

/* 1025px üzerindeki genişliklerde gizle */
/*@media (min-width: 1025px) {
  .fav-add-to-favorites-btn {
    display: none;
  }
/*} --- */

/* --- Modal Arka Planı (imageAnalysisModal) --- */
#imageAnalysisModal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99998;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

#imageAnalysisModal.active {
    opacity: 1;
    visibility: visible;
}

/* --- Modal İçerik Kutusu (analysisContent) --- */
#analysisContent {
    background: #ffffff;
    border-radius: 12px;
    max-width: 600px; /* Sabit yatay boyut */
    width: 90%; /* Daha küçük ekranlarda %90 genişlik */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    transform: translateY(20px);
    transition: transform 0.3s ease, opacity 0.3s ease;

    /* **Anahtar**: Flexbox kullanarak içeriği dikeyde düzenle */
    display: flex;
    flex-direction: column;
    max-height: 90vh; /* Modalın toplam yüksekliği */
    overflow: hidden; /* İç kaydırmaları body'e bırak */
}

/* Modal Açıldığında İçerik Kutusu Animasyonu */
#imageAnalysisModal.active #analysisContent {
    transform: translateY(0);
    opacity: 1;
}

/* --- Modal Başlık Bölümü (.modal-header) --- */
.modal-header {
    /* **Anahtar**: Flexbox ile başlık ve butonu yan yana ve ayır */
    display: flex;
    justify-content: space-between; /* İçerikleri (h3 ve buton) ayır */
    align-items: center; /* Dikeyde ortala */
    padding: 15px 25px; /* Başlık ve butona iç boşluk */
    border-bottom: 1px solid #eee; /* İsteğe bağlı: Alt çizgi */
    background: #ffffff; /* Başlık alanının arka planı */
    border-top-left-radius: 12px; /* Köşeleri yuvarlak tut */
    border-top-right-radius: 12px;
    flex-shrink: 0; /* İçerik kaydığında küçülmesini engelle */
}

.modal-header h3 {
    margin: 0; /* Varsayılan başlık marjlarını sıfırla */
    font-size: 26px;
    font-weight: 600;
    color: #333;
}

/* --- Kapatma Butonu (#closeModalBtn) --- */
#closeModalBtn {
    /* **Anahtar**: Artık position:absolute veya fixed'e ihtiyacımız yok */
    font-size: 32px;
    line-height: 1;
    border: none;
    background: none;
    color: #888;
    cursor: pointer;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: color 0.2s ease, transform 0.2s ease, background-color 0.2s ease;
    z-index: 10; /* Başlığın üzerinde */
}

#closeModalBtn:hover {
    color: #333;
    transform: rotate(90deg);
    background-color: rgba(0, 0, 0, 0.05);
}

/* --- Modal İçerik Bölümü (.modal-body) --- */
.modal-body {
    padding: 25px; /* İçerik için boşluk */
    /* **Anahtar**: Sadece bu kısım kaydırılacak */
    overflow-y: auto; /* İçerik taştığında dikeyde kaydırma çubuğu */
    overflow-x: hidden; /* Yatay kaydırmayı engelle */
    flex-grow: 1; /* Kalan dikey alanı doldurmasını sağlar */
}

/* --- Genel Input ve Label Stilleri (eski stilleriniz) --- */
/* Bu kısım aynı kalmalı, sadece .modal-body içindeki elementlere uygulanır */
.modal-body label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: #555;
    font-size: 15px;
}

.modal-body input[type="text"],
.modal-body input[type="number"],
.modal-body input[type="file"] {
    width: 100%;
    padding: 10px 12px;
    margin-bottom: 15px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 16px;
    color: #333;
    box-sizing: border-box;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#analysisContent input[type="text"]:focus,
#analysisContent input[type="number"]:focus {
    border-color: #007bff;
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
}

#analysisContent input[type="file"]::-webkit-file-upload-button {
    padding: 8px 15px;
    border-radius: 6px;
    border: 1px solid #ccc;
    background-color: #f0f0f0;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

#analysisContent input[type="file"]::-webkit-file-upload-button:hover {
    background-color: #e0e0e0;
}

/* --- Görsel Önizleme (modalPreview) --- */
#modalPreview {
    display: block;
    width: 100%;
    max-height: 250px;
    object-fit: contain;
    margin-bottom: 20px;
    border-radius: 8px;
    border: 1px solid #eee;
}

/* --- Analiz Et Butonu (startAnalysisBtn) --- */
#startAnalysisBtn {
    width: 100%;
    padding: 12px 20px;
    font-size: 18px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.1s ease;
    font-weight: 600;
}

#startAnalysisBtn:hover {
    background-color: #0056b3;
    transform: translateY(-1px);
}

#startAnalysisBtn:active {
    transform: translateY(0);
}

#modalColors {
    margin-top: 25px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}

/* Ensure buttons within the modal body take full width */
#imageAnalysisModal .modal-body .modern-button {
    width: 100%;
    box-sizing: border-box; /* Include padding and border in the width */
}

/* Footer Stilleri */
footer {
    background-color: #333; /* Koyu gri arkaplan */
    color: #fff; /* Beyaz metin rengi */
    padding: 30px 0; /* Ãœstte ve altta boÅŸluk */
    text-align: center; /* Metni ortala */
    margin-top: 50px; /* Üstteki içerikle arasında boşluk */
    width: 100%;
}

.footer-content {
    max-width: 1200px; /* İçeriğin genişliğini sınırla */
    margin: 0 auto; /* Ortala */
    padding: 0 20px; /* Yanlarda boÅŸluk */
}

footer p {
    margin: 0;
    padding: 5px 0;
    font-size: 0.9em;
}

.footer-links a {
    color: #f0f0f0; /* Link rengi */
    text-decoration: none; /* Alt çizgiyi kaldır */
    margin: 0 10px; /* Linkler arasında boşluk */
    transition: color 0.3s ease;
}

.footer-links a:hover {
    color: #ff9900; /* Hover rengi */
}

.social-links {
    margin-top: 15px;
}

.social-links a {
    color: #fff;
    font-size: 1.5em;
    margin: 0 10px;
    transition: color 0.3s ease;
}

.social-links a:hover {
    color: #ff9900;
}

/* Sayfa içeriğinin footera yapışmasını sağlamak için (eğer sayfa kısa ise) */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Minimum tam ekran yüksekliği */
}

.NoN329 {
    /* flex-grow: 1; kaldırıldı, header'ın büyümesine gerek yok */
}

main {
    flex-grow: 1; /* Main içeriğinin kalan alanı doldurmasını sağlar */
}

/* Diğer elemanlardan flex-grow kaldırıldı, çünkü artık main kapsayıcı büyüyecek */
/* .container, */
/* #introTextContentWrapper, */
/* .toggle-intro-wrapper, */
/* .doodle-arrow-container, */
/* .NoN331 { */
/*     flex-grow: 1; */
/* } */
/* Bilgi sayfalarındaki h2'ler için özel margin ayarı */
.info-content-section h2,
.info-content-section h2 {
    margin-top: 0.4em !important; /* Mevcut inline veya diğer stilleri geçersiz kılar */
    margin-bottom: 0.4em !important; /* Mevcut inline veya diğer stilleri geçersiz kılar */
}
/* Bilgi sayfalarındaki h2'ler için özel margin ayarı */
.info-content-section ul,
.info-content-section p { /* Her seçiciyi ayrı ayrı belirtmelisin */
    margin-block-start: 0.3em !important;
    margin-block-end: 0.3em !important;
}
/* Önceki modal CSS'inizin üzerine ekleyin veya ilgili yerlere ekleyin */

#magnifier {
    position: absolute;
    /* MAGNIFIER_SIZE will be set by JS, but ensure it's square for the circle to work */
    width: 100px; /* Fixed width */
    height: 100px; /* Fixed height */
    border: 2px solid #007bff; /* Büyüteç çerçevesi */
    border-radius: 50%; /* Yuvarlak büyüteç */
    overflow: hidden; /* Taşmayı gizle */
    box-shadow: 0 0 15px rgba(0, 123, 255, 0.4);
    z-index: 100; /* Resim ve işaretçilerin üzerinde olsun */
    pointer-events: none; /* Fare olaylarını alta geçirmesini sağlar */
    display: flex; /* İçeriği hizalamak için */
    justify-content: center;
    align-items: center;
    background-color: #fff; /* Büyüteç arkaplanı */
    cursor: none; /* Hide the default cursor inside the magnifier */
    transition: none; /* Remove any transitions that might cause scaling */
}

/* Ensure the canvas fills the magnifier and is block level */
#magnifierCanvas {
    width: 100%;
    height: 100%;
    display: block;
    /* Remove any conflicting cursor styles */
    cursor: none;
}

/* Hide the main cursor when magnifier is active */
#modalPreview.magnifier-active {
    cursor: none;
}

#magnifierColorInfo {
    display: none; /* Hide this as color info will be shown below the image */
}

.hidden {
    display: none !important;
}

/* Styles for touch-based mobile devices (small screens) */
@media (max-width: 768px) {
    body.is-touch-device #tipsModalOverlay {
        top: var(--header-height);
        height: calc(100vh - var(--header-height));
        align-items: flex-start;
        justify-content: flex-start;
        padding: 0;
    }

    body.is-touch-device #tipsModal {
        width: 100%;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
        border-radius: 0;
        box-shadow: none;
        padding: 0; /* Remove padding to allow header to be full-width */
    }

    body.is-touch-device .tips-modal-header {
        margin: 0;
        width: 100%;
        border-radius: 0;
        padding: 10px 15px;
    }

    body.is-touch-device #tipsModalContent {
        padding: 15px; /* Restore padding for the content area */
    }
}

/* Hide color cards initially to prevent flash of unfiltered content */
.colors-hidden .NoN332 {
    display: none;
}

/* Reduce font size for color code to prevent wrapping */
.NoN341 {
    font-size: 14px;
}
.bounce-in-top {
      -webkit-animation: bounce-in-top 1.1s ease-in 0.3s both;
      animation: bounce-in-top 1.1s ease-in 0.3s both;
    }

.main-color-actions {
    position: absolute;
    top: 15px;
    right: 15px;
    display: flex;
    gap: 0;
    align-items: center;
}

.download-main-pdf-btn {
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease;
}

.download-main-pdf-btn:hover {
    transform: scale(1.1);
}

.download-main-pdf-btn i.fa-file-pdf {
    font-size: 24px;
    line-height: 1;
}

.main-color-actions .fav-add-to-favorites-btn {
    position: static; /* Keep it in the document flow */
    width: 50px;
    height: 50px;
    padding: 0; /* Remove padding to center the icon properly */
    display: flex; /* Use flexbox for centering */
    align-items: center;
    justify-content: center;
    /*background-color: rgba(255, 255, 255, 0.25);  Style from other buttons */
    /* border: 1px solid rgba(255, 255, 255, 0.4);   Style from other buttons */
    /* border-radius: 50%; /* Make it circular */
    backdrop-filter: blur(4px); /* Style from other buttons */
    -webkit-backdrop-filter: blur(4px); /* For Safari */
    /* box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Style from other buttons */
    cursor: pointer;
    transition: all 0.2s ease;
	background: none;
	border: none;
}

.main-color-actions .fav-add-to-favorites-btn:hover {
    transform: scale(1.1);
    /* background-color: rgba(255, 255, 255, 0.4); */
	background: none;
	border: none;
}

.main-color-actions .fav-add-to-favorites-btn i.fa-heart {
    font-size: 28px;
}

    @-webkit-keyframes bounce-in-top {
      0% {
        -webkit-transform: translateY(-500px);
        transform: translateY(-500px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 0;
      }
      38% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
        opacity: 1;
      }
      55% {
        -webkit-transform: translateY(-65px);
        transform: translateY(-65px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
      }
      72% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
      }
      81% {
        -webkit-transform: translateY(-28px);
        transform: translateY(-28px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
      }
      90% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
      }
      95% {
        -webkit-transform: translateY(-8px);
        transform: translateY(-8px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
      }
      100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
      }
    }
    @keyframes bounce-in-top {
      0% {
        -webkit-transform: translateY(-500px);
        transform: translateY(-500px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 0;
      }
      38% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
        opacity: 1;
      }
      55% {
        -webkit-transform: translateY(-65px);
        transform: translateY(-65px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
      }
      72% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
      }
      81% {
        -webkit-transform: translateY(-28px);
        transform: translateY(-28px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
      }
      90% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
      }
      95% {
        -webkit-transform: translateY(-8px);
        transform: translateY(-8px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
      }
      100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
      }
    }
/* JavaScript tarafından tıklanınca oluşturulacak animasyon kapsayıcısı */
.lottie-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Tam ortaya hizalar */
    
    /* Animasyonun boyutunu butonun biraz dışına taşacak şekilde ayarlayalım */
    width: 100px;  
    height: 100px; 
    
    z-index: 10;   /* Diğer elemanların üzerinde kalması için */
    pointer-events: none; /* Tıklamaları engellememesi için */
}
/* Animasyon oynarken butonun içindeki kalp ikonunu gizlemek için */
.fav-add-to-favorites-btn.animation-playing .fa-heart {
    opacity: 0;
    transition: opacity 0.1s ease-out;
}

.page-container {
    margin-top: 50px;
    display: grid;
    grid-template-columns: 0.2fr 0.6fr 0.2fr;
    align-items: start;
    
    width: 96%;
    margin: 0 auto;
    z-index: 1; /* Added z-index */
}

.right-sidebar {
    /* order: 1; /* No longer needed for grid */
    display: flex;
    flex-direction: column;
    align-items: center;
}

.left-sidebar {
    /* order: 1; /* No longer needed for grid */
    display: flex;
    flex-direction: column;
    align-items: center;
}

.main-content,
.left-sidebar,
.right-sidebar {
    padding-top: 0px;
}

.main-content {
    min-height: 800px; /* Fallback min-height */
    background-color: #ffffff; /* White background */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); /* Soft shadow */
    border: 1px solid #e0e0e0; /* Light border */
    border-radius: 8px; /* Rounded corners for consistency */
}
.trend-colors-page .main-content {
    background-color: none;
    box-shadow: none;
    border: none;
    border-radius: none;
}
.trend-colors-page .container{
        border: 1px solid #ddd !important; /* Light border */
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); /* Soft shadow */
}
/* Sidebar alignment helpers */
.page-container.sidebar-aligned .left-sidebar {
    padding-top: calc(180px + 2.5em); /* 4em * 2.4em font-size */
}

.page-container.sidebar-aligned-color-details .left-sidebar {
    padding-top: calc(180px + 0.48em); /* 0.2em * 2.4em font-size */
}

.page-container.sidebar-aligned .right-sidebar {
    padding-top: calc(180px + 2.5em); /* Match left sidebar alignment */
}

.page-container.sidebar-aligned-color-details .right-sidebar {
    padding-top: calc(180px + 0.48em); /* Match left sidebar alignment */
}

.main-content {
    /* flex-grow, order, and max-width calc are no longer needed for grid */
    max-width: 1800px; /* Keep this as a general constraint */
}

.right-sidebar {
    order: 3; /* No longer needed for grid */
}

.showcase-item {
    background-color: white;
    margin-bottom: 20px;
    border: 1px solid #ddd;
    padding: 10px;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15); /* Added shadow */
    /* max-width: 300px; */ /* Removed to allow filling the sidebar */
}

.showcase-item img {
    width: 100%;
    height: auto;
    border-radius: 8px;
}

.showcase-color-chips {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 10px;
    width: 100%;
}

.showcase-color-chips .NoN332 {
    flex-shrink: 0; /* Prevent shrinking to ensure consistent size */
}

/* Override the main component styles for the showcase context */
.showcase-item .NoNColorPaper-root {
    width: 85px; /* Set a fixed width directly on the card */
    padding: 0;
    margin: 0;
    align-items: stretch; /* Force children to fill the width */
}

/* Disable hover effect for showcase items */
.showcase-item .NoNColorPaper-root:hover {
    transform: none;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

.showcase-item .NoN335 {
    width: 100% !important;
    height: 60px !important;
    margin: 0;
    border-radius: 8px 8px 0 0;
}

.showcase-item .NoN338 {
    font-size: 12px;
    height: 45px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    padding: 5px;
    width: 100%;
    box-sizing: border-box;
}

.showcase-item .NoN338 h5 {
    font-size: 0.9em;
    font-weight: bold;
    margin: 0;
    line-height: 1.1;
}

.showcase-item .NoN338 p {
    font-size: 0.8em;
    white-space: normal;
    line-height: 1.2;
    margin: 2px 0 0;
}

/* --- Button Positioning Overrides --- */
.showcase-item .NoN335 .fav-add-to-favorites-btn {
    left: 4px !important;
    right: auto !important;
    top: 4px !important;
    transform: none !important;
}

.showcase-item .NoN335 .copy-btn {
    right: 4px !important;
    left: auto !important;
    top: 4px !important;
    transform: none !important;
}

.showcase-item .NoN335 .info-btn {
    left: 50% !important;
    top: 4px !important;
    transform: translateX(-50%) !important;
    right: auto !important;
}

/* --- Showcase Button Style Override --- */
.showcase-item .NoN335 .copy-btn,
.showcase-item .NoN335 .info-btn,
.showcase-item .NoN335 .fav-add-to-favorites-btn {
    border: 1px solid rgba(255, 255, 255, 0.4);
    background-color: rgba(255, 255, 255, 0.25);
}

@media (max-width: 1545px) {
  .page-container {
    display: flex;
    flex-direction: column;
  }

  .main-content {
    order: 2;
  }

  .left-sidebar {
    order: 1;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    padding: 20px 0;
  }

  .left-sidebar .showcase-item {
    max-width: 400px;
    flex-grow: 1;
    flex-basis: 350px;
  }

  .right-sidebar {
    order: 3;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    padding: 20px 0;
  }
}
@media (max-width: 1220px) {
  .page-container {
    display: flex;
    flex-direction: column;
  }

  .main-content {
    order: 1;
  }

  .left-sidebar {
    order: 2;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    padding: 20px 0;
  }

  .left-sidebar .showcase-item {
    max-width: 400px;
    flex-grow: 1;
    flex-basis: 350px;
  }

  .right-sidebar {
    order: 3;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    padding: 20px 0;
  }
}
.pdf-btn {
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
    border: none;
    border-radius: 5px;
    padding: 8px 10px;
    cursor: pointer;
    font-size: 0.9em;
    transition: background-color 0.3s ease, transform 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pdf-btn:hover {
    background-color: rgba(0, 0, 0, 0.8);
    transform: translateY(-2px);
}

/* Stop the PDF button from moving on hover inside the favorites panel */
.favorite-group-header .pdf-btn:hover {
    transform: none;
    background-color: #d0d0d0; /* Match other header buttons hover */
}

.showcase-item {
    position: relative;
}

.showcase-item-actions {
    position: absolute;
    top: 15px;
    right: 15px;
    z-index: 10;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.showcase-item-actions .pdf-btn,
.showcase-item-actions .pinterest-btn {
    position: static; /* Override absolute positioning */
    margin: 0; /* Reset margin */
}

.pinterest-btn {
    background-color: #E60023; /* Pinterest Red */
    color: white;
    border: none;
    border-radius: 5px;
    padding: 8px 10px;
    cursor: pointer;
    font-size: 0.9em;
    transition: background-color 0.3s ease, transform 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pinterest-btn:hover {
    background-color: #B8001C; /* Darker Pinterest Red */
    transform: translateY(-2px);
}

.palette-actions .pinterest-btn {
    background-color: #E60023; /* Ensure correct color in palettes */
}

.palette-actions .pinterest-btn:hover {
    background-color: #B8001C;
}


/* Stop the Pinterest button from moving on hover inside the favorites panel */
.favorite-group-header .pinterest-btn {
    background-color: #E60023; /* Pinterest Kırmızısı */
    color: white;
}

.favorite-group-header .pinterest-btn:hover {
    transform: none;
    background-color: #B8001C; /* Koyu Pinterest Kırmızısı */
}

/* Remove the individual positioning for the showcase pdf button */
.showcase-pdf-btn {
    position: static;
}
.shutterstock-link-btn {
        background-color: rgba(0, 0, 0, 0.6);
    color: white;
    border: none;
    border-radius: 5px;
    padding: 8px 10px;
    cursor: pointer;
    font-size: 0.9em;
    transition: background-color 0.3s ease, transform 0.2s ease;
    display: flex
;
}

.shutterstock-link-btn:hover {
    background-color: rgba(0, 0, 0, 0.8);
    transform: translateY(-2px);
}

/* ========================================= */
/* 6. Custom Mobile Responsive Styles for Color Chips */
/* ========================================= */

/* Make color harmony sections stack on mobile */
@media (max-width: 767px) {
    .color-harmony-grid {
        flex-direction: column;
        gap: 20px;
    }
    .color-harmony-grid .color-palette-section {
        flex-basis: 100%;
        max-width: 100%;
    }
}

/* Responsive styles for color chips inside main content ONLY */
@media (max-width: 479px) {
  .main-content .NoN331 {
    gap: 5px; /* Small gap between items */
  }

  /* Remove flex properties from the wrapper and apply sizing to the card itself */
  .main-content .NoN332 {
    flex: none;
    max-width: none;
  }

  .main-content .NoNColorPaper-root {
    width: 110px; /* Fixed width for the card */
    height: 150px; /* Fixed height for the card */
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch; /* Ensure children fill the width */
  }
  .main-content .NoN335 {
    width: 100% !important;
    height: 80px !important; /* Fixed height for color swatch */
    flex-shrink: 0;
    border-radius: 6px 6px 0 0;
  }
  .main-content .NoN338 {
    height: 70px; /* Fixed height for text area */
    padding: 5px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden; /* Hide overflowing text */
    font-size: 12px;
  }
  .main-content .NoN338 h5 {
    font-size: 0.9em;
    margin: 2px 0;
  }
  /* Handle long names with ellipsis */
  .main-content .NoN338 p.NoNColorTypography-caption {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      margin: 2px 0 0;
  }

  .color-info h1 {
    font-size: 1.6em;
  }
}

@media (max-width: 417px) {
  .main-content .NoNColorPaper-root {
    width: 100px;
    height: 140px;
  }
  .main-content .NoN335 {
    height: 70px !important;
  }
  .main-content .NoN338 {
    height: 70px;
    font-size: 11px;
  }
}

.trend-palette-actions-header {
    justify-content: center;
    flex-direction: column;
}
@media (min-width: 1220px) {
    .page-container {
        display: grid;
        /* Ana içerik alanını hem esnek hem de minimum genişliğe sahip yapın */
        grid-template-columns: 
          minmax(10rem, 0.2fr) /* Sol sidebar */
          minmax(700px, 0.6fr) /* Ana içerik, minimum 700px olacak */
          minmax(10rem, 0.2fr); /* Sağ sidebar */
        align-items: start;
        width: 96%;
        margin: 0 auto;
    }

    .main-content,
    .left-sidebar,
    .right-sidebar {
        padding-top: 0px;
    }

    .right-sidebar {
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .left-sidebar {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
}

.sidebar {
    z-index: 2; /* Ensure sidebars are above other content */
}

/* New styles for trend-colors page */
.color-info {
    position: relative;
    overflow: hidden;
    padding: 40px 20px; /* Adjust padding as needed */
    border-radius: 8px;
    text-align: center;
}

.color-info h1 {
    position: relative;
    z-index: 1;
    text-align: center;
    /* Removed color: white; for now */
    margin-top: 0;
    margin-bottom: 20px;
}

#gradient-canvas {
    position: fixed; /* Changed from absolute to fixed */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -9999; /* Changed from -1 to -9999 */
}
.trend-colors-page .right-sidebar,
.trend-colors-page .left-sidebar {
  margin-top: 175px !important;
}

.trend-colors-page .page-container {
  margin-top: 50px;
}
.pattern-library-page .page-container {

    margin-top: 200px;
}
.color-details-page .main-content {
border: none;
box-shadow: none;
    margin-top: 0px !important;
}
.color-details-page .right-sidebar {

    margin-top: 220px !important;
}
.color-details-page .left-sidebar {

    margin-top: 220px !important;
}