@import url('../css/lingo-logo.css');
/* Özel İmleç Stilleri - En Üstte */
* {
    cursor: url('../assets/slimicons/orange-pointer.svg'), auto !important;
}

*[style*="cursor: pointer"], 
*[style*="cursor:pointer"], 
a, 
button, 
input[type="button"], 
input[type="submit"], 
.clickable,
[onclick],
[role="button"] {
    cursor: url('../assets/slimicons/orange-hand-pointer.svg'), auto !important;
}

/* Raleway & Luckiest Guy: Google Fonts (vocfount/index.html link) */

:root {
    /* Yeni Renk Paleti */
    --vf-dark-blue-grey: #344c64;
    --vf-light-blue-grey: #b5babe;
    --vf-red: #e7262d; /* Ana kırmızı */
    --vf-bright-red: #ff3131;
    --vf-medium-grey: #7e8388;
    --vf-orange-yellow: #ff8c00; /* Ana vurgu - daha turuncu */
    --vf-yellow: #ff9500; /* İkincil vurgu - turuncu */
    --vf-another-red: #e31c23; /* Hata rengi */
    --vf-bright-yellow: #ffa500;

    /* Tema Renkleri (Beyaz Azaltılmış) */
    --background-color: #92a5b4; /* Açık mavi-gri tonu */
    --surface-color: #e1e2e4; /* Çok açık gri (beyaz yerine) */
    --text-primary: #000000;
    --text-secondary: #ffffff;
    --primary-color: var(--vf-dark-blue-grey);
    --secondary-color: var(--vf-orange-yellow);
    --accent-color: var(--vf-yellow);
    --gray-color: var(--vf-light-blue-grey);
    --dark-gray: var(--vf-medium-grey);
    --light-gray: #d3dbe3; /* Biraz daha belirgin açık gri */
    --border-color: var(--vf-light-blue-grey); /* Sınırlar için */
    --error-color: var(--vf-another-red);
    --success-color: #28a745;
    --warning-color: var(--vf-yellow);
    --purple-color: #6f42c1;

    /* Eski değişkenler (geçiş için) - Güncellenmeyecek */
    /* ... */

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.07);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.12);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.15);
    --border-radius: 8px;
    --header-height: 60px;
    --footer-height: 0px;
}

/* --- Splash Screen Modernized --- */
.splash-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #f6f8fb 0%, #e2e8f0 100%);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.6s;
}

.splash-screen.fade-out {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.splash-content {
    text-align: center;
    animation: splashEntrance 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

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

.splash-logo {
    margin-bottom: 20px;
    display: inline-block;
}

.splash-logo .logo-circle {
    width: 100px;
    height: 100px;
    background: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 25px rgba(52, 76, 100, 0.15);
    position: relative;
    overflow: hidden;
}

.logo-inner {
    position: relative;
    z-index: 2;
}

.logo-icon {
    width: 50px;
    height: 50px;
    object-fit: contain;
}

.splash-title {
    margin-bottom: 30px;
}

.title-main {
    font-family: 'Oswald', sans-serif;
    font-size: 2.5rem;
    color: #344c64;
    margin: 0 0 10px 0;
    letter-spacing: -0.5px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.title-subtitle {
    font-size: 1.1rem;
    color: #6b7280;
    margin: 0;
    font-weight: 400;
}

.splash-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(52, 76, 100, 0.1);
    border-radius: 50%;
    border-top-color: #344c64;
    animation: spin 1s linear infinite;
}

.loading-text {
    font-size: 0.9rem;
    color: #577399;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    animation: pulseText 2s infinite ease-in-out;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

@keyframes pulseText {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

.splash-content {
    text-align: center;
    color: #1a1a1a;
    animation: fadeInUp 0.8s ease-out;
    position: relative;
    z-index: 2;
}

.splash-logo {
    margin-bottom: 3rem;
}

.logo-circle {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: linear-gradient(135deg, #344c64 0%, #4a6fa5 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    position: relative;
    box-shadow: 0 8px 32px rgba(52, 76, 100, 0.2), 
                0 0 0 1px rgba(255, 255, 255, 0.1) inset;
}

.logo-ring {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.3);
    top: 0;
    left: 0;
    z-index: 1;
}

.logo-inner {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) inset;
}

.logo-text {
    font-size: 2.75rem;
    font-weight: normal;
    color: #344c64;
    font-family: 'Luckiest Guy', cursive;
    letter-spacing: 1px;
    background: linear-gradient(135deg, #344c64 0%, #4a6fa5 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-display: swap;
}

.splash-title {
    margin-bottom: 3rem;
}

.title-main {
    font-size: 2.75rem;
    font-weight: 600;
    margin-bottom: 1rem;
    background: linear-gradient(135deg, #1a1a1a 0%, #344c64 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-family: 'Oswald', sans-serif;
    letter-spacing: 1px;
    animation: none;
    position: relative;
}

.title-divider {
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, transparent, #344c64, transparent);
    margin: 1.25rem auto 1.5rem;
    border-radius: 2px;
}

.title-subtitle {
    font-size: 0.95rem;
    opacity: 0.7;
    font-weight: 400;
    font-family: 'Raleway', sans-serif;
    letter-spacing: 0.4px;
    color: #4a5568;
    background: transparent;
    padding: 0;
    border-radius: 0;
    backdrop-filter: none;
    text-shadow: none;
    border: none;
    line-height: 1.7;
    max-width: 500px;
    margin: 0 auto;
}

.splash-loading {
    margin-top: 3rem;
}

.loading-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.loading-dots {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
}

.loading-dots .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: linear-gradient(135deg, #344c64, #4a6fa5);
    box-shadow: 0 2px 4px rgba(52, 76, 100, 0.2);
}

.loading-dots .dot:nth-child(1) {
    opacity: 0.4;
}

.loading-dots .dot:nth-child(2) {
    opacity: 0.7;
}

.loading-dots .dot:nth-child(3) {
    opacity: 1;
}

.loading-text {
    font-size: 0.875rem;
    opacity: 0.6;
    animation: none;
    color: #4a5568;
    background: transparent;
    padding: 0;
    border-radius: 0;
    backdrop-filter: none;
    text-shadow: none;
    border: none;
    font-weight: 500;
    letter-spacing: 1px;
    font-family: 'Raleway', sans-serif;
    text-transform: uppercase;
    font-size: 0.75rem;
}

/* Animasyonlar */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes gradientShift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

@keyframes backgroundPulse {
    0%, 100% {
        opacity: 0.3;
    }
    50% {
        opacity: 0.6;
    }
}

@keyframes logoGradientShift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

@keyframes logoRotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@keyframes logoGlow {
    0%, 100% {
        opacity: 0.2;
        transform: scale(1);
    }
    50% {
        opacity: 0.4;
        transform: scale(1.1);
    }
}

@keyframes logoTextGlow {
    0%, 100% {
        text-shadow: 0 0 40px rgba(52, 76, 100, 0.4);
    }
    50% {
        text-shadow: 0 0 60px rgba(52, 76, 100, 0.7);
    }
}

@keyframes logoTextGradientShift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

@keyframes titleGradientShift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* spinnerGlow animasyonu kaldırıldı - minimal tasarım */

/* Parçacık Animasyonları */
@keyframes particleFloat1 {
    0%, 100% {
        transform: translate(0, 0) scale(1);
        opacity: 0.6;
    }
    25% {
        transform: translate(20px, -30px) scale(1.2);
        opacity: 1;
    }
    50% {
        transform: translate(-10px, -50px) scale(0.8);
        opacity: 0.8;
    }
    75% {
        transform: translate(30px, -20px) scale(1.1);
        opacity: 0.9;
    }
}

@keyframes particleFloat2 {
    0%, 100% {
        transform: translate(0, 0) scale(1);
        opacity: 0.5;
    }
    33% {
        transform: translate(-25px, 20px) scale(1.3);
        opacity: 1;
    }
    66% {
        transform: translate(15px, -40px) scale(0.7);
        opacity: 0.7;
    }
}

@keyframes particleFloat3 {
    0%, 100% {
        transform: translate(0, 0) scale(1);
        opacity: 0.4;
    }
    20% {
        transform: translate(40px, -25px) scale(1.4);
        opacity: 0.9;
    }
    40% {
        transform: translate(-20px, -60px) scale(0.6);
        opacity: 0.6;
    }
    60% {
        transform: translate(25px, 15px) scale(1.1);
        opacity: 0.8;
    }
    80% {
        transform: translate(-35px, -10px) scale(0.9);
        opacity: 0.7;
    }
}

@keyframes particleFloat4 {
    0%, 100% {
        transform: translate(0, 0) scale(1);
        opacity: 0.7;
    }
    30% {
        transform: translate(-30px, -35px) scale(1.2);
        opacity: 1;
    }
    60% {
        transform: translate(20px, -20px) scale(0.8);
        opacity: 0.5;
    }
    90% {
        transform: translate(-15px, 25px) scale(1.1);
        opacity: 0.8;
    }
}

@keyframes particleFloat5 {
    0%, 100% {
        transform: translate(0, 0) scale(1);
        opacity: 0.6;
    }
    25% {
        transform: translate(35px, -15px) scale(1.3);
        opacity: 0.9;
    }
    50% {
        transform: translate(-25px, -45px) scale(0.7);
        opacity: 0.4;
    }
    75% {
        transform: translate(15px, 30px) scale(1.0);
        opacity: 0.8;
    }
}

@keyframes particleFloat6 {
    0%, 100% {
        transform: translate(0, 0) scale(1);
        opacity: 0.5;
    }
    40% {
        transform: translate(-20px, -30px) scale(1.1);
        opacity: 0.8;
    }
    80% {
        transform: translate(30px, -10px) scale(0.9);
        opacity: 0.6;
    }
}

@keyframes logoFloat {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-10px);
    }
}

@keyframes logoPulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

@keyframes logoRing {
    0% {
        transform: scale(1);
        opacity: 0.3;
    }
    50% {
        transform: scale(1.1);
        opacity: 0.1;
    }
    100% {
        transform: scale(1.2);
        opacity: 0;
    }
}

@keyframes logoTextScale {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

@keyframes titleGlow {
    from {
        text-shadow: 0 0 20px rgba(248, 175, 13, 0.5);
    }
    to {
        text-shadow: 0 0 30px rgba(248, 175, 13, 0.8);
    }
}

@keyframes subtitleFade {
    from {
        opacity: 0.7;
    }
    to {
        opacity: 1;
    }
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* loadingPulse animasyonu kaldırıldı - minimal tasarım */

/* Responsive Tasarım */
@media (max-width: 768px) {
    .splash-content {
        padding: 0 2rem;
    }
    
    .logo-circle {
        width: 75px;
        height: 75px;
    }
    
    .logo-inner {
        width: 55px;
        height: 55px;
    }
    
    .logo-text {
        font-size: 2.25rem;
        font-family: 'Luckiest Guy', cursive;
    }
    
    .title-main {
        font-size: 2.25rem;
    }
    
    .title-subtitle {
        font-size: 0.875rem;
    }
    
    .title-divider {
        width: 50px;
        height: 2px;
    }
    
    .loading-dots .dot {
        width: 7px;
        height: 7px;
    }
    
    .loading-text {
        font-size: 0.7rem;
    }
    
    .shape-1 {
        width: 150px;
        height: 150px;
    }
    
    .shape-2 {
        width: 120px;
        height: 120px;
    }
    
    .shape-3 {
        width: 100px;
        height: 100px;
    }
    
    .shape-4 {
        width: 80px;
        height: 80px;
    }
}

@media (max-width: 480px) {
    .splash-content {
        padding: 0 1.5rem;
    }
    
    .logo-circle {
        width: 65px;
        height: 65px;
    }
    
    .logo-inner {
        width: 48px;
        height: 48px;
    }
    
    .logo-text {
        font-size: 2rem;
        font-family: 'Luckiest Guy', cursive;
    }
    
    .title-main {
        font-size: 2rem;
    }
    
    .title-subtitle {
        font-size: 0.8125rem;
    }
    
    .title-divider {
        width: 40px;
        height: 2px;
        margin: 1rem auto 1.25rem;
    }
    
    .splash-logo {
        margin-bottom: 2rem;
    }
    
    .splash-title {
        margin-bottom: 2rem;
    }
    
    .loading-dots {
        gap: 6px;
    }
    
    .loading-dots .dot {
        width: 6px;
        height: 6px;
    }
    
    .loading-text {
        font-size: 0.65rem;
    }
    
    .shape-1 {
        width: 120px;
        height: 120px;
    }
    
    .shape-2 {
        width: 100px;
        height: 100px;
    }
    
    .shape-3 {
        width: 80px;
        height: 80px;
    }
    
    .shape-4 {
        width: 70px;
        height: 70px;
    }
    
    .line-1, .line-2, .line-3 {
        width: 150px;
    }
}

/* Genel stil ayarları */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Raleway', sans-serif; /* Fredoka yerine Raleway kullanıldı */
}

img, video, iframe, embed, object {
    max-width: 100%;
    height: auto; /* Orantıyı korumak için */
}

div, section, article, aside, main, header, footer, nav {
    max-width: 100%;
}

html, body {
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    position: relative;
}

html::-webkit-scrollbar, body::-webkit-scrollbar {
    display: none;
}

body {
    background-color: var(--background-color);
    background-image: 
        linear-gradient(to right, rgba(52, 76, 100, 0.15) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(52, 76, 100, 0.15) 1px, transparent 1px);
    background-size: 100px 100px;
    background-attachment: fixed;
    color: var(--text-primary);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    max-width: 95%;
    margin: 0 auto;
    line-height: 1.6;
    min-height: 100vh;
    height: auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 200px; /* İçeriğe göre ayarlanabilir */
    cursor: url('../assets/slimicons/orange-pointer.svg'), auto !important;
}

.main-container {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
    height: auto;
    padding-bottom: 200px; /* Footer yoksa veya fixed değilse */
    position: relative;
    background: rgba(255, 255, 255, 0.95);
}

/* Logo container removed - now in header */

/* h1 styles moved to header - keeping general h1 styles for other content */
h1:not(.app-title h1) {
    font-size: 2.2rem;
    color: var(--primary-color);
    margin-bottom: 15px;
    font-weight: 700;
    text-align: center;
    letter-spacing: -0.5px;
    text-shadow: none;
}

h2 {
    font-size: 1.5rem;
    color: var(--primary-color); /* Değişti */
    margin-bottom: 12px;
    font-weight: 600;
    letter-spacing: -0.3px;
}

h3 {
    font-size: 1.2rem;
    color: var(--text-primary); /* Değişti */
    margin-bottom: 10px;
    font-weight: 500;
}

.checkbox-container {
    background: rgba(255, 255, 255, 0.95);
    border-radius: var(--border-radius);
    padding: 25px 15px;
    margin-bottom: 20px;
    width: 100%;
    max-width: 100%;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-color); /* Değişti */
}

.checkbox-container > .app-title--page {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-align: center;
    margin: 0 0 1rem;
    padding: 0 12px;
}

.checkbox-container > .app-title--page h1 {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--vf-dark-blue-grey);
    letter-spacing: -0.02em;
    line-height: 1.15;
}

.checkbox-container > .app-title--page .app-version {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--vf-medium-grey);
    letter-spacing: 0.04em;
}

/* ===== Hece Düzeyi Bölümü – Modern & Kullanışlı ===== */
#heceFilterSection {
  max-width: 540px;
  overflow: visible;
}
#heceFilterSection .filter-section {
  overflow: visible;
  padding: 0;
}
#heceFilterSection .modern-filter {
  overflow: visible;
  padding: 0;
  border: none;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.06);
  transition: box-shadow 0.25s ease;
}
#heceFilterSection .modern-filter::before {
  display: none;
}
#heceFilterSection .modern-filter:hover {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1), 0 2px 6px rgba(0, 0, 0, 0.06);
}
#heceFilterSection .modern-filter h3 {
  margin: 0;
  padding: 20px 24px 14px;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--primary-color);
  letter-spacing: -0.02em;
  border-bottom: 3px solid rgba(248, 175, 13, 0.35);
  background: linear-gradient(180deg, rgba(248, 175, 13, 0.06) 0%, transparent 100%);
  border-radius: 20px 20px 0 0;
}
#heceFilterSection .modern-input-group {
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow: visible;
  padding: 20px 24px 24px;
}
#heceFilterSection .input-wrapper {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
#heceFilterSection .input-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: #374151;
  letter-spacing: 0.01em;
}
/* İlk satır: İstenen ses + Danışan adı */
#heceFilterSection .hece-first-row {
  display: flex;
  flex-direction: column;
  gap: 20px;
  overflow: visible;
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
#heceFilterSection .hece-first-row .input-wrapper:first-child {
  min-width: 0;
}
#heceFilterSection .hece-danisan-wrap {
  min-width: 0;
  overflow: visible;
}
#heceFilterSection .hece-danisan-type-wrap .input-label {
  display: block;
  margin-bottom: 6px;
}
#heceFilterSection .hece-danisan-type-options {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
#heceFilterSection .hece-type-option {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 10px 16px;
  border-radius: 10px;
  border: 2px solid #e2e8f0;
  background: #f8fafc;
  transition: border-color 0.2s ease, background 0.2s ease;
}
#heceFilterSection .hece-type-option:hover {
  border-color: #cbd5e1;
  background: #fff;
}
#heceFilterSection .hece-type-option input:checked + span {
  font-weight: 600;
}
#heceFilterSection .hece-danisan-type-wrap input[type="radio"] {
  margin: 0;
  accent-color: var(--secondary-color, #f8af0d);
}
#heceFilterSection .hece-type-option:has(input:checked) {
  border-color: var(--secondary-color, #f8af0d);
  background: rgba(248, 175, 13, 0.08);
}
#heceFilterSection .sound-input-container {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
#heceFilterSection .hece-sound-input {
  width: 200px;
  padding: 12px 14px;
  font-size: 1.2rem;
  font-weight: 600;
  text-transform: lowercase;
  text-align: center;
  color: var(--primary-color);
  background: #f8fafc;
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  box-sizing: border-box;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
#heceFilterSection .hece-sound-input::placeholder {
  color: #94a3b8;
  font-weight: 500;
}
#heceFilterSection .hece-sound-input:hover {
  border-color: #cbd5e1;
  background: #fff;
}
#heceFilterSection .hece-sound-input:focus {
  border-color: var(--secondary-color);
  outline: none;
  box-shadow: 0 0 0 4px rgba(248, 175, 13, 0.18);
  background: #fff;
}
#heceFilterSection .hece-danisan-input-wrapper {
  position: relative;
  width: 100%;
  overflow: visible;
}
#heceFilterSection .hece-student-input {
  width: 100%;
  min-width: 0;
  padding: 12px 48px 12px 14px;
  font-size: 0.95rem;
  color: #1e293b;
  background: #f8fafc;
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  box-sizing: border-box;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
#heceFilterSection .hece-student-input::placeholder {
  color: #94a3b8;
}
#heceFilterSection .hece-student-input:hover {
  border-color: #cbd5e1;
  background: #fff;
}
#heceFilterSection .hece-student-input:focus {
  border-color: var(--secondary-color);
  outline: none;
  box-shadow: 0 0 0 4px rgba(248, 175, 13, 0.18);
  background: #fff;
}
#heceFilterSection .input-hint {
  font-size: 0.8rem;
  color: #64748b;
  margin-top: 0;
  line-height: 1.4;
}
#heceFilterSection .hece-danisan-input-wrapper .danisan-dropdown-btn {
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 10px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  color: #475569;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
#heceFilterSection .hece-danisan-input-wrapper .danisan-dropdown-btn:hover {
  background: #e2e8f0;
  color: var(--primary-color);
  border-color: #cbd5e1;
}
#heceFilterSection .hece-danisan-input-wrapper .danisan-dropdown-btn.active {
  background: rgba(248, 175, 13, 0.15);
  border-color: var(--secondary-color);
  color: var(--secondary-color);
}
#heceFilterSection .hece-danisan-input-wrapper .danisan-dropdown-menu {
  z-index: 1100;
  min-width: 100%;
  border-radius: 14px;
  border: 2px solid #e2e8f0;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
}
/* Kontrol listesi – modern seçim kutusu */
#heceFilterSection .hece-control-list-wrap {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  padding: 14px 16px;
  margin-bottom: 16px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  transition: background 0.2s ease, border-color 0.2s ease;
}
#heceFilterSection .hece-control-list-wrap:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
}
#heceFilterSection .hece-control-list-wrap label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  margin: 0;
  font-weight: 500;
  color: #334155;
}
#heceFilterSection .hece-control-list-wrap .input-hint {
  width: 100%;
  margin: 4px 0 0 0;
  padding-left: 0;
}
#heceFilterSection .hece-control-list-checkbox {
  width: 20px;
  height: 20px;
  cursor: pointer;
  flex-shrink: 0;
  accent-color: var(--secondary-color);
  border-radius: 6px;
}
/* Deneme sayısı */
#heceFilterSection .hece-deneme-count-wrap {
  max-width: 180px;
  margin-bottom: 4px;
}
#heceFilterSection .hece-trial-count-select {
  width: 100%;
  max-width: 180px;
  padding: 12px 14px;
  font-size: 0.95rem;
  background: #f8fafc;
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  color: #334155;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}
#heceFilterSection .hece-trial-count-select:hover {
  border-color: #cbd5e1;
  background: #fff;
}
#heceFilterSection .hece-trial-count-select:focus {
  border-color: var(--secondary-color);
  outline: none;
  box-shadow: 0 0 0 4px rgba(248, 175, 13, 0.18);
}
/* PDF butonu – belirgin CTA */
#heceFilterSection .hece-pdf-download-btn {
  margin-top: 20px;
  align-self: stretch;
  padding: 14px 24px;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 14px;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: linear-gradient(135deg, #f59e0b 0%, #ea580c 100%);
  color: #fff;
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.4);
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
#heceFilterSection .hece-pdf-download-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(245, 158, 11, 0.45);
  filter: brightness(1.05);
}
#heceFilterSection .hece-pdf-download-btn:active {
  transform: translateY(0);
}
#heceFilterSection .hece-pdf-download-btn .button-icon-img {
  width: 20px;
  height: 20px;
  filter: brightness(0) invert(1);
}
/* Açılan danışan listesinin taşmadan görünmesi */
#heceFilterSection .hece-first-row,
#heceFilterSection .hece-danisan-wrap,
#heceFilterSection .hece-danisan-input-wrapper {
  overflow: visible;
}
@media (max-width: 540px) {
  #heceFilterSection .modern-filter h3 {
    padding: 16px 18px 12px;
    font-size: 1.1rem;
  }
  #heceFilterSection .modern-input-group {
    padding: 16px 18px 20px;
  }
  #heceFilterSection .hece-first-row {
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: 16px;
    padding-bottom: 16px;
    margin-bottom: 16px;
  }
  #heceFilterSection .hece-sound-input {
    width: 100%;
    max-width: 200px;
  }
  #heceFilterSection .hece-pdf-download-btn {
    margin-top: 16px;
  }
}
/* Genel hece PDF butonu (sayfa genelinde kullanılıyorsa) */
.hece-pdf-download-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  background: linear-gradient(135deg, #344c64 0%, #2c3e50 100%);
  color: #fff;
  border: none;
  border-radius: var(--border-radius);
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}
.hece-pdf-download-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(52, 76, 100, 0.35);
}
.hece-pdf-download-btn .button-icon-img {
  width: 18px;
  height: 18px;
  filter: brightness(0) invert(1);
}

.vocfount-assign-homework-btn {
  background: linear-gradient(135deg, #27ae60 0%, #219a52 100%) !important;
}

.vocfount-assign-homework-btn:hover {
  box-shadow: 0 4px 12px rgba(39, 174, 96, 0.35);
}

.quick-create-actions-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: stretch;
  justify-content: center;
  padding: 14px 16px;
  flex-shrink: 0;
  border-bottom: 1px solid rgba(255, 140, 0, 0.22);
}

.quick-create-modal-sheet .quick-create-menu {
  display: flex;
  flex-direction: column;
}

.quick-create-modal-sheet .quick-create-header {
  flex-shrink: 0;
  z-index: 4;
}

.quick-create-modal-sheet .quick-create-actions-row {
  order: 0;
  flex-shrink: 0;
  position: relative;
  z-index: 3;
  margin-bottom: calc(-1 * var(--quick-create-actions-overlap, 80px));
  background: rgba(225, 226, 228, 0.26);
  backdrop-filter: blur(18px) saturate(190%);
  -webkit-backdrop-filter: blur(18px) saturate(190%);
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.06);
}

.quick-create-modal-sheet .quick-create-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding-top: calc(20px + var(--quick-create-actions-overlap, 80px));
}

.quick-create-actions-row .quick-create-action-btn {
  flex: 1 1 160px;
  max-width: 220px;
  min-width: 0;
  min-height: 52px;
  padding: 10px 14px;
  font-size: 0.95rem;
  border-radius: 10px;
  gap: 10px;
  animation: none;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
}

.quick-create-actions-row .quick-create-action-btn::before,
.quick-create-actions-row .quick-create-action-btn::after {
  display: none;
}

.quick-create-actions-row .quick-create-action-btn .quick-button-icon {
  flex-shrink: 0;
  font-size: 1.15rem;
  line-height: 1;
  opacity: 0.95;
}

.quick-create-actions-row .quick-button-labels {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
}

.quick-create-actions-row .quick-create-action-btn .quick-button-text {
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.2;
  color: #fff;
}

.quick-create-actions-row .quick-create-action-btn .quick-create-action-hint {
  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1.25;
  color: rgba(255, 255, 255, 0.72);
  text-align: left;
}

.quick-create-actions-row .quick-create-action-btn:not(.vocfount-assign-homework-btn) {
  background: linear-gradient(135deg, #00043b 0%, #1a1a5e 100%);
  box-shadow: 0 2px 8px rgba(0, 4, 59, 0.25);
}

.quick-create-actions-row .quick-create-action-btn:not(.vocfount-assign-homework-btn):hover {
  background: linear-gradient(135deg, #1a1a5e 0%, #2a2a7e 100%);
  box-shadow: 0 4px 12px rgba(0, 4, 59, 0.35);
}

.quick-create-actions-row .quick-create-action-btn:not(.vocfount-assign-homework-btn) .quick-create-action-hint {
  color: rgba(220, 225, 255, 0.78);
}

.quick-create-actions-row .vocfount-assign-homework-btn {
  background: linear-gradient(135deg, #1e7a45 0%, #27ae60 100%);
  box-shadow: 0 2px 8px rgba(39, 174, 96, 0.22);
}

.quick-create-actions-row .vocfount-assign-homework-btn:hover {
  background: linear-gradient(135deg, #219a52 0%, #2ecc71 100%);
  box-shadow: 0 4px 12px rgba(39, 174, 96, 0.35);
}

.quick-create-actions-row .vocfount-assign-homework-btn .quick-create-action-hint {
  color: rgba(232, 255, 240, 0.82);
}

.quick-create-actions-row .quick-create-action-btn.success .quick-create-action-hint,
.quick-create-actions-row .quick-create-action-btn.loading .quick-create-action-hint {
  display: none;
}

/* Hece bölümü: PDF İndir + Kaydedilen klasörü aç yan yana */
.hece-buttons-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
}

.hece-buttons-row .hece-pdf-download-btn {
  margin-top: 0;
}

.open-folder-button-main {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  background: transparent;
  color: var(--primary-color, #344c64);
  border: 2px solid var(--primary-color, #344c64);
  border-radius: var(--border-radius);
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: transform 0.2s, background-color 0.2s, color 0.2s;
}

.open-folder-button-main:hover {
  background: var(--primary-color, #344c64);
  color: #fff;
  transform: translateY(-1px);
}

.open-folder-button-main .button-icon {
  font-size: 1.1rem;
}

.open-folder-button-main .button-icon-img {
  width: 20px;
  height: 20px;
}

.filter-sections {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    width: 100%;
}

.filter-section {
    background: rgba(255, 255, 255, 0.95);
    border-radius: var(--border-radius);
    padding: 15px; 
    box-shadow: var(--shadow-sm); 
    border: 1px solid var(--border-color);
    margin-bottom: 0;
}

.filter-section h3 {
    font-size: 1.1rem;
    color: var(--primary-color);
    margin-bottom: 15px;
    font-weight: 500;
    border-bottom: 1px solid var(--light-gray); /* Değişti */
    padding-bottom: 8px;
}

.checkbox-group {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
    gap: 10px;
    margin-bottom: 10px;
}

.checkbox-group label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--background-color); /* Değişti (Ana arka planla aynı) */
    border-radius: var(--border-radius);
    cursor: url('../assets/slimicons/orange-hand-pointer.svg'), auto !important;
    border: 1px solid var(--border-color); /* Değişti */
    font-weight: 500;
    color: var(--text-primary);
    font-size: 0.95rem;
    transition: background-color 0.2s, border-color 0.2s;
}

.checkbox-group label:hover {
    background-color: var(--light-gray); /* Değişti */
    border-color: var(--dark-gray);
}

.checkbox-group input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border: 2px solid var(--dark-gray);
    border-radius: 4px;
    background: var(--surface-color); /* Değişti (kutu arka planı) */
    cursor: url('../assets/slimicons/orange-hand-pointer.svg'), auto !important;
    position: relative;
    transition: background-color 0.2s, border-color 0.2s;
}

.checkbox-group input[type="checkbox"]:checked {
    background: var(--secondary-color);
    border-color: var(--secondary-color);
}

.checkbox-group input[type="checkbox"]:checked::after {
    content: "✓";
    position: absolute;
    color: var(--text-secondary); /* Değişti */
    font-size: 14px;
    font-weight: bold;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.input-group {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

input[type="text"], input[type="number"], select {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--border-color); /* Değişti */
    border-radius: var(--border-radius);
    font-size: 1rem;
    background: var(--surface-color); /* Değişti */
    color: var(--text-primary);
    transition: border-color 0.2s, box-shadow 0.2s;
}

input[type="text"]:focus, input[type="number"]:focus, select:focus {
    border-color: var(--secondary-color);
    box-shadow: 0 0 0 3px rgba(248, 175, 13, 0.2); /* Yeni vurgu rengiyle uyumlu */
    outline: none;
}

input::placeholder {
    color: var(--dark-gray);
    opacity: 0.8;
}

.button-group {
    display: flex;
    gap: 12px;
    margin: 20px 0;
    flex-wrap: wrap;
}

button {
    background: var(--primary-color); /* Ana renk olarak değiştirildi */
    color: var(--text-secondary);
    padding: 12px 24px; /* Ayarlandı */
    border: none;
    border-radius: var(--border-radius);
    font-size: 1rem;
    cursor: url('../assets/slimicons/orange-hand-pointer.svg'), auto !important;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-sm);
    transition: background-color 0.2s, transform 0.1s;
}

button:hover {
    background: lighten(var(--primary-color), 10%); /* Çalışmayabilir, düz renk gerekebilir */
    background-color: #4a6b8a; /* primary-color'ın açık tonu */
    transform: translateY(-1px);
}

.result-container {
    display: flex; /* Her zaman flex */
    flex-wrap: nowrap; /* Asla alt satıra kayma */
    justify-content: space-between; /* Aralarında boşluk bırakarak yayıl */
    gap: 15px; /* Boşluk biraz azaltıldı, duruma göre ayarlanabilir */
    margin-top: 25px;
    width: 100%;
}

.result-list, .selected-list {
    background: var(--surface-color);
    border-radius: var(--border-radius);
    padding: 15px; /* Padding biraz azaltıldı */
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    height: 600px;
    flex: 1; /* Eşit alan paylaşımı için */
    min-width: 0; /* Küçülebilmeleri için çok önemli */
    box-sizing: border-box;
    overflow: hidden; /* İçerik taşarsa gizle (idealde içerik de sığmalı) */
}

.result-list {
    /* Önceki gradient kaldırıldı veya ayarlanabilir */
    /* background: linear-gradient(135deg, var(--dark-gray), var(--gray-color)); */
    border-color: var(--success-color); /* Yeşil sınır kalabilir */
}

.selected-list {
    /* Önceki gradient kaldırıldı veya ayarlanabilir */
    /* background: linear-gradient(135deg, var(--dark-gray), var(--gray-color)); */
    border-color: var(--secondary-color); /* Sarı/turuncu sınır */
}

.result-list ul, .selected-list ul {
    list-style: none;
    padding: 0;
    margin: 0;
    overflow-y: auto;
    flex: 1;
    padding-right: 10px;
    scrollbar-width: thin; /* Firefox için scrollbar */
    scrollbar-color: var(--dark-gray) var(--light-gray); /* Firefox için scrollbar renkleri */
}

.result-list ul li, .selected-list ul li {
    padding: 10px 12px;
    border-radius: 10px;
    margin-bottom: 8px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    background: rgba(255, 255, 255, 0.75);
    transition: transform 0.08s ease, background-color 0.15s ease, border-color 0.15s ease;
}

.result-list ul li:hover, .selected-list ul li:hover {
    transform: translateY(-1px);
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(0, 0, 0, 0.12);
}

.toggle-switch.toggle-switch--disabled {
    opacity: 0.55;
    cursor: not-allowed !important;
}

.result-list ul::-webkit-scrollbar, .selected-list ul::-webkit-scrollbar {
    width: 8px;
}

.result-list ul::-webkit-scrollbar-track, .selected-list ul::-webkit-scrollbar-track {
    background: var(--light-gray); /* Değişti */
    border-radius: 4px;
}

.result-list ul::-webkit-scrollbar-thumb, .selected-list ul::-webkit-scrollbar-thumb {
    background: var(--dark-gray); /* Değişti */
    border-radius: 4px;
}

.result-list ul::-webkit-scrollbar-thumb:hover, .selected-list ul::-webkit-scrollbar-thumb:hover {
    background: var(--primary-color); /* Değişti */
}

.list-header {
    display: flex;
    flex-direction: column;
    padding: 10px;
    margin-bottom: 10px;
    gap: 8px;
}

.list-header h2 {
    margin: 0;
    font-size: 1.2rem;
    color: var(--primary-color);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.list-header .header-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-bottom: none;
    flex-wrap: nowrap;
    border-radius: 6px;
    margin: 0;
    margin-bottom: 10px;
    border: 2px solid;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.result-list .header-bottom {
    border-color: rgba(40, 167, 69, 0.3);
    background: rgba(40, 167, 69, 0.05);
}

.result-list .header-bottom:hover {
    background: rgba(40, 167, 69, 0.08);
    border-color: rgba(40, 167, 69, 0.4);
}

.selected-list .header-bottom {
    border-color: rgba(255, 140, 0, 0.3);
    background: rgba(255, 140, 0, 0.05);
}

.selected-list .header-bottom:hover {
    background: rgba(255, 140, 0, 0.08);
    border-color: rgba(255, 140, 0, 0.4);
}

.list-count {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    background: var(--primary-color);
    color: white;
    border-radius: 6px;
    padding: 0 8px;
    font-size: 0.95rem;
    font-weight: bold;
    flex-shrink: 0;
    margin: 0 5px;
    font-size: 1rem; /* Ayarlandı */
    font-weight: 600; /* Artırıldı */
    padding: 4px 10px; /* Ayarlandı */
    border-radius: 15px; /* Ayarlandı */
    background-color: var(--light-gray); /* Değişti */
    color: var(--primary-color); /* Değişti */
    min-width: 30px; /* Eklendi */
    text-align: center; /* Eklendi */
}

.result-list .list-count {
    background: rgba(40, 167, 69, 0.1); /* Açık yeşil arka plan */
    color: #28a745; /* Koyu yeşil metin */
    border: 1px solid rgba(40, 167, 69, 0.2);
}

.selected-list .list-count {
    background: rgba(248, 175, 13, 0.1); /* Açık sarı arka plan */
    color: #e09d0b; /* Koyu sarı metin */
    border: 1px solid rgba(248, 175, 13, 0.2);
}

.selected-buttons {
    display: flex;
    gap: 4px;
    align-items: center;
    flex-shrink: 0;
}

#clear-selected-button, #clear-result-button {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(241, 243, 244, 0.9) 100%);
    border: 2px solid transparent;
    font-size: 1.2rem;
    cursor: pointer;
    padding: 0;
    color: var(--dark-gray);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 8px;
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
}

#clear-selected-button svg, 
#clear-result-button svg,
#add-all-button svg {
    width: 16px;
    height: 16px;
    stroke-width: 2.5;
    pointer-events: none;
}

#clear-selected-button::before, 
#clear-result-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, transparent 0%, rgba(255, 255, 255, 0.5) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

#clear-selected-button:hover::before, 
#clear-result-button:hover::before {
    opacity: 1;
}

#clear-selected-button:hover, #clear-result-button:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

#clear-selected-button:active, #clear-result-button:active {
    transform: translateY(0) scale(0.98);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Temizleme Butonları */
#clear-selected-button, #clear-result-button {
    background: linear-gradient(135deg, #e31c23 0%, #ff3131 100%);
    color: white;
    border-color: rgba(255, 255, 255, 0.3);
}

#clear-selected-button:hover, #clear-result-button:hover {
    background: linear-gradient(135deg, #ff3131 0%, #e31c23 100%);
    box-shadow: 0 4px 12px rgba(227, 28, 35, 0.4);
}

/* Tümünü Ekle Butonu */
#add-all-button {
    background: linear-gradient(135deg, var(--vf-dark-blue-grey) 0%, #4d6376 100%) !important;
    color: white !important;
    border: 2px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 8px !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.1rem !important;
    cursor: pointer !important;
    padding: 0 !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
    position: relative !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
}

#add-all-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, transparent 0%, rgba(255, 255, 255, 0.3) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

#add-all-button:hover::before {
    opacity: 1;
}

#add-all-button:hover {
    background: linear-gradient(135deg, #4d6376 0%, var(--vf-dark-blue-grey) 100%) !important;
    transform: translateY(-2px) scale(1.05) !important;
    box-shadow: 0 4px 12px rgba(52, 76, 100, 0.4) !important;
}

#add-all-button:active {
    transform: translateY(0) scale(0.98) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
}

/* Önceki clear buton stilleri kaldırıldı */
/* #clear-selected-button { ... } */
/* #clear-result-button { ... } */

#preview-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin-top: 20px;
    background-color: var(--surface-color);
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
}

#preview-table th, #preview-table td {
    border: 1px solid var(--border-color); /* Değişti */
    padding: 12px;
    text-align: center;
}

#preview-table th {
    background-color: var(--primary-color);
    font-weight: 600;
    color: var(--text-secondary);
}

#preview-table img {
    border: 2px solid var(--light-gray); /* Değişti */
    border-radius: 6px;
}

.folder {
    background-color: var(--surface-color);
    border-radius: var(--border-radius);
    padding: 24px;
    margin-bottom: 24px;
    width: 100%;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color); /* Değişti */
}

.form-group {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 15px; /* Önceki 20px'ten düşürüldü */
    align-items: center;
    margin-bottom: 15px; /* Önceki 20px'ten düşürüldü */
    background: transparent; /* Arka plan kaldırıldı */
    padding: 0; /* Padding kaldırıldı */
    /* border-radius: var(--border-radius); */ /* Radius kaldırıldı */
    width: 100%;
}

.form-group label {
    font-size: 0.95rem; /* Önceki 1rem'den düşürüldü */
    color: var(--text-primary); /* Değişti */
    font-weight: 500; /* Önceki 600'den düşürüldü */
}

.form-control {
    width: 100%;
    padding: 10px 14px; /* Önceki 12px 16px'ten düşürüldü */
    border: 1px solid var(--border-color); /* Değişti */
    border-radius: var(--border-radius);
    font-size: 1rem;
    background: var(--surface-color);
    color: var(--text-primary);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.form-control:focus {
    border-color: var(--secondary-color); /* Vurgu rengi */
    box-shadow: 0 0 0 3px rgba(248, 175, 13, 0.2); /* Vurgu rengiyle uyumlu */
    outline: none;
}

/* PDF Button Styles */
.pdf-modal-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    align-items: center;
    margin: 20px auto 0;
}

.pdf-modal-actions #generate-pdf,
.pdf-modal-actions .pdf-modal-assign-btn {
    margin: 0;
}

.pdf-modal-assign-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    border: none;
    border-radius: var(--border-radius);
    font-size: 1.1rem;
    font-weight: 600;
    cursor: url('../assets/slimicons/orange-hand-pointer.svg'), auto !important;
    min-width: 200px;
    color: #fff;
    transition: background-color 0.2s, transform 0.1s, box-shadow 0.2s;
}

#generate-pdf {
    /* all: unset; */ /* Kaldırıldı, buton stillerini sıfırlıyordu */
    background: var(--secondary-color);
    color: var(--text-secondary);
    padding: 12px 24px; 
    border: none;
    border-radius: var(--border-radius);
    font-size: 1.1rem;
    font-weight: 600;
    cursor: url('../assets/slimicons/orange-hand-pointer.svg'), auto !important;
    margin: 20px auto 0;
    display: block; /* Inline-flex'ten block'a */
    width: auto; /* Genişlik otomatik */
    min-width: 200px; /* Minimum genişlik */
    text-align: center;
    transition: background-color 0.2s, transform 0.1s; /* Eklendi */
}

#generate-pdf:hover {
    background-color: #e09d0b; 
    transform: translateY(-1px);
}

#generate-pdf:active {
    background: #c88a0a; /* Daha koyu sarı */
    transform: translateY(0);
}

#generate-pdf.loading {
    cursor: progress;
}

#generate-pdf.success {
    cursor: default;
}

#generate-pdf.success:not(:has(.vocfount-btn-label)) {
    background: var(--success-color);
    width: 56px;
    height: 56px;
    border-radius: 50%;
    padding: 0;
    font-size: 0;
    min-width: 56px;
    position: relative;
}

#generate-pdf.success:not(:has(.vocfount-btn-label))::before {
    content: '✓';
    font-size: 24px;
    color: white;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: successPop 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* .pdf-container içindeki stiller gereksiz, kaldırıldı */
/* .pdf-container #generate-pdf { ... } */
/* .pdf-container #generate-pdf:hover { ... } */
/* .pdf-container #generate-pdf:active { ... } */

.pdf-container {
    background: rgba(255, 255, 255, 0.95);
    border-radius: var(--border-radius);
    padding: 30px;
    margin: 20px 0;
    width: 100%;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-color); /* Değişti */
}

.pdf-header {
    display: flex;
    align-items: center;
    gap: 15px; 
    margin-bottom: 25px; 
    padding-bottom: 15px; 
    border-bottom: 1px solid var(--light-gray); /* Değişti */
}

.pdf-header h2 {
    margin: 0;
    color: var(--primary-color); /* Değişti */
    font-size: 1.4rem; /* Ayarlandı */
}

.pdf-icon-img {
    width: 1.8rem;
    height: 1.8rem;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

/* Form group stilleri yukarıda tanımlandı, buradakiler kaldırıldı */
/* .form-group { ... } */
/* .form-group label { ... } */
/* .form-control { ... } */
/* .form-control:focus { ... } */

/* Generate PDF butonu stilleri yukarıda tanımlandı, buradakiler kaldırıldı */
/* #generate-pdf { ... } */
/* #generate-pdf:hover { ... } */
/* #generate-pdf:active { ... } */

.lists-container {
    background: var(--surface-color);
    border-radius: var(--border-radius);
    padding: 30px 15px;
    margin: 20px 0;
    width: 100%;
    max-width: 100%;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-color); /* Değişti */
    position: relative;
    margin-bottom: 200px; 
}

.lists-header {
    display: flex;
    align-items: center;
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--light-gray); /* Değişti */
}

.lists-header h2 {
    font-size: 1.6rem; /* Ayarlandı */
    color: var(--primary-color); /* Değişti */
    margin: 0;
    font-weight: 600;
}

.selected-buttons {
    display: flex;
    gap: 5px;
    align-items: center;
}

.selected-buttons button {
    padding: 5px 10px;
    margin: 0 5px;
    border: none;
    background: none;
    cursor: url('../assets/slimicons/orange-hand-pointer.svg'), auto !important;
    font-size: 1.2em;
    transition: transform 0.2s, color 0.2s; /* Eklendi */
    color: var(--dark-gray); /* Başlangıç rengi */
}

.selected-buttons button:hover {
    color: var(--secondary-color); /* Vurgu rengi */
}

/* Karıştır Butonu */
#shuffle-selected-button {
    background: linear-gradient(135deg, var(--vf-orange-yellow) 0%, var(--vf-bright-yellow) 100%);
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 4px rgba(255, 140, 0, 0.3);
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
}

#shuffle-selected-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, transparent 0%, rgba(255, 255, 255, 0.3) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

#shuffle-selected-button:hover::before {
    opacity: 1;
}

#shuffle-selected-button:hover {
    background: linear-gradient(135deg, var(--vf-bright-yellow) 0%, var(--vf-orange-yellow) 100%);
    transform: translateY(-2px) scale(1.05) rotate(90deg);
    box-shadow: 0 4px 12px rgba(255, 140, 0, 0.4);
}

#shuffle-selected-button:active {
    transform: translateY(0) scale(0.98) rotate(90deg);
    box-shadow: 0 1px 2px rgba(255, 140, 0, 0.3);
}

#shuffle-selected-button svg {
    width: 16px;
    height: 16px;
    stroke-width: 2.5;
    pointer-events: none;
}

@media (max-width: 768px) {
    body {
        padding: 10px;
        height: auto;
        min-height: 100vh;
        overflow-y: auto;
        padding-bottom: 150px;
        background-attachment: fixed;
    }

    .main-container {
        padding-bottom: 150px;
    }

    .lists-container {
        margin-bottom: 150px;
    }

    .result-container {
        margin-bottom: 15px;
        gap: 5px;            /* Küçültüldü */
        padding: 5px;
        grid-template-columns: 1fr; /* Tek sütunlu düzen sağlandı */
    }

    .pdf-container, .lists-container {
        padding: 20px;
    }

    .pdf-header {
        margin-bottom: 20px;
        padding-bottom: 10px;
    }

    .pdf-header h2, .lists-header h2 {
        font-size: 1.3rem;
    }

    .form-group {
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 10px;
    }

    #generate-pdf {
        padding: 12px 24px; /* Geri yüklenen değer */
        font-size: 1rem; /* Geri yüklenen değer */
        min-width: 180px; /* Geri yüklenen değer */
        margin: 20px auto 80px; /* Geri yüklenen değer */
    }

    .result-container {
        /* grid-template-columns: 1fr 1fr; Artık flexbox ile yönetiliyor */
        gap: 10px; /* Orta boyutta boşluk biraz daha az */
        padding: 10px;
        margin-bottom: 20px;
    }

    .result-list, .selected-list {
        padding: 10px; /* Orta boyutta iç boşluk biraz daha az */
        height: 550px; /* Tablet için daha da artırıldı */
        /* flex, min-width varsayılanları devralır */
    }

    .list-header {
        padding: 10px;
        gap: 6px;
    }

    .list-header h2 {
        font-size: 1.05rem;
    }

    .list-header .header-bottom {
        gap: 6px;
        margin-left: -10px;
        margin-right: -10px;
        width: calc(100% + 20px);
    }

    .list-count {
        min-width: 28px;
        height: 28px;
        padding: 0 6px;
        font-size: 0.85rem;
    }

    .selected-buttons {
        margin-top: 0;
        gap: 3px;
    }

    .selected-buttons button {
        width: 28px;
        height: 28px;
        font-size: 0.95rem;
        padding: 0;
    }

    #clear-selected-button, #clear-result-button, #add-all-button {
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        min-height: 28px !important;
        font-size: 0.95rem !important;
        padding: 0 !important;
    }

    #clear-selected-button svg, 
    #clear-result-button svg,
    #add-all-button svg,
    #shuffle-selected-button svg {
        width: 14px !important;
        height: 14px !important;
    }

    #shuffle-selected-button {
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        min-height: 28px !important;
    }

    .list-header .header-bottom {
        padding: 8px 10px;
        gap: 6px;
        border-width: 2px;
        margin: 0;
    }
}

@media (max-width: 480px) {
    body {
        padding: 5px;
        padding-bottom: 100px;
    }

    .main-container {
        padding-bottom: 100px;
    }

    .lists-container {
        margin-bottom: 100px;
    }

    .result-container {
        margin-bottom: 10px; /* Bu değer daha önce 15px idi, 10px olabilir */
        gap: 5px; /* En küçük boyutta boşluk minimum */
        padding: 5px; /* Kenar boşluğu minimum */
        /* grid-template-columns yorumda kalabilir */
    }

    .pdf-container, .lists-container {
        padding: 15px;
    }

    .pdf-header {
        margin-bottom: 15px;
        padding-bottom: 8px;
    }

    .pdf-header h2, .lists-header h2 {
        font-size: 1.2rem;
    }

    .form-group {
        padding: 8px;
    }

    #generate-pdf {
        padding: 12px 24px; /* Geri yüklenen değer */
        font-size: 1rem; /* Geri yüklenen değer */
        min-width: 180px; /* Geri yüklenen değer */
        margin: 20px auto 80px; /* Geri yüklenen değer */
    }

    .result-container {
        margin-bottom: 15px;
        gap: 8px;
        padding: 5px;
        /* grid-template-columns: 1fr; Artık flexbox ile yönetiliyor, ancak tek sütun davranışı flex-basis ile sağlanacak */
    }

    .result-list, .selected-list {
        padding: 5px; /* En küçük boyutta iç boşluk minimum */
        height: 420px; /* Mobil için daha da artırıldı */
        /* flex: 1; varsayılanı devralır, 100% kuralı kaldırıldı */
        /* min-width: 0; varsayılanı devralır */
        /* box-sizing: border-box; varsayılanı devralır */
    }

    .list-header {
        padding: 5px;
        gap: 4px;
        margin-bottom: 6px;
    }

    .list-header h2 {
        font-size: 0.9rem;
    }

    .list-header .header-bottom {
        gap: 4px;
        padding-bottom: 6px;
        margin-left: -5px;
        margin-right: -5px;
        width: calc(100% + 10px);
    }

    .list-count {
        min-width: 24px;
        height: 24px;
        padding: 0 5px;
        font-size: 0.75rem;
    }

    .selected-buttons {
        gap: 2px;
    }

    #clear-selected-button, #clear-result-button, #add-all-button {
        width: 24px !important;
        height: 24px !important;
        min-width: 24px !important;
        min-height: 24px !important;
        font-size: 0.85rem !important;
        padding: 0 !important;
        border-radius: 6px !important;
    }

    #clear-selected-button svg, 
    #clear-result-button svg,
    #add-all-button svg,
    #shuffle-selected-button svg {
        width: 12px !important;
        height: 12px !important;
    }

    #shuffle-selected-button {
        width: 24px !important;
        height: 24px !important;
        min-width: 24px !important;
        min-height: 24px !important;
    }

    .list-header .header-bottom {
        padding: 6px 8px;
        gap: 4px;
        margin: 0;
        border-width: 1.5px;
        border-radius: 4px;
    }
}

/* Çok küçük ekranlar için ekstra ayarlar */
@media (max-width: 360px) {
    .list-header h2 {
        font-size: 0.8rem;
    }

    .list-header .header-bottom {
        gap: 3px;
        margin-left: -5px;
        margin-right: -5px;
        width: calc(100% + 10px);
    }

    .list-count {
        min-width: 22px;
        height: 22px;
        padding: 0 4px;
        font-size: 0.7rem;
    }

    .selected-buttons {
        gap: 2px;
    }

    #clear-selected-button, #clear-result-button, #add-all-button {
        width: 22px !important;
        height: 22px !important;
        min-width: 22px !important;
        min-height: 22px !important;
        font-size: 0.75rem !important;
        border-radius: 5px !important;
    }

    #clear-selected-button svg, 
    #clear-result-button svg,
    #add-all-button svg,
    #shuffle-selected-button svg {
        width: 11px !important;
        height: 11px !important;
    }

    #shuffle-selected-button {
        width: 22px !important;
        height: 22px !important;
        min-width: 22px !important;
        min-height: 22px !important;
    }

    .list-header .header-bottom {
        padding: 5px 6px;
        gap: 3px;
        margin: 0;
        border-width: 1.5px;
        border-radius: 3px;
    }
}

.tools-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin: 20px 0;
    width: 100%;
}

.pdf-container, .puzzle-container {
    background: rgba(255, 255, 255, 0.95);
    border-radius: var(--border-radius);
    padding: 30px;
    width: 100%;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-color); /* Değişti */
}

.pdf-header, .puzzle-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--light-gray); /* Değişti */
}

.pdf-header h2, .puzzle-header h2 {
    color: var(--primary-color); /* Değişti */
    margin: 0;
    font-size: 1.6rem;
}

.pdf-icon-img, .puzzle-icon-img {
    width: 2rem;
    height: 2rem;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

.modal-title-icon {
    width: 1.2rem;
    height: 1.2rem;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
    vertical-align: middle;
    margin-right: 5px;
}

@media (max-width: 768px) {
    .tools-container {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .pdf-container, .puzzle-container {
        padding: 20px;
    }

    .pdf-header, .puzzle-header {
        margin-bottom: 20px;
        padding-bottom: 10px;
    }

    .pdf-header h2, .puzzle-header h2 {
        font-size: 1.3rem;
    }
}

@media (max-width: 480px) {
    .tools-container {
        gap: 10px;
    }

    .pdf-container, .puzzle-container {
        padding: 15px;
    }

    .pdf-header, .puzzle-header {
        margin-bottom: 15px;
        padding-bottom: 8px;
    }

    .pdf-header h2, .puzzle-header h2 {
        font-size: 1.2rem;
    }
}

.puzzle-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* width: 100vw; */ /* Gereksiz olabilir */
    /* height: 100vh; */ /* Gereksiz olabilir */
    background-color: rgba(52, 76, 100, 0.8); /* Koyu mavi-gri transparan */
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.puzzle-modal.active {
    display: flex !important;
}

.puzzle-modal-content {
    background: var(--background-color); /* Ana arka plan rengi */
    padding: 30px;
    border-radius: var(--border-radius);
    width: 95%;
    max-width: 1200px;
    height: 95vh;
    max-height: 95vh;
    overflow-y: auto;
    position: relative;
    box-shadow: var(--shadow-lg);
    margin: 2.5vh auto;
    border: 1px solid var(--border-color);
}

.close-modal {
    position: absolute;
    right: 15px;
    top: 15px;
    width: 30px;
    height: 30px;
    background: var(--gray-color); /* Değişti */
    color: var(--primary-color); /* Değişti */
    border: 1px solid var(--dark-gray); /* Eklendi */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: url('../assets/slimicons/orange-hand-pointer.svg'), auto !important;
    font-size: 20px;
    z-index: 1;
    transition: background-color 0.2s, color 0.2s, transform 0.1s;
}

.close-modal:hover {
    background: var(--error-color); /* Kırmızı */
    color: var(--text-secondary); /* Beyaz */
    transform: scale(1.1);
}

.puzzle-preview {
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
}

.puzzle-preview h3 {
    text-align: center;
    margin-bottom: 30px;
    color: var(--primary-color); /* Değişti */
    font-size: 1.8rem;
}

.word-search-container {
    width: 65%;
    padding-right: 20px;
}

.word-list {
    /* width: 30%; */ /* Yüzdeler yerine flex kullanıldı */
    /* padding-left: 20px; */ /* Flex gap ile değiştirildi */
    /* border-left: 2px solid #000; */ /* Kaldırıldı */
    background: rgba(255, 255, 255, 0.95);
    padding: 20px;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
}

.word-search-grid, .crossword-grid {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-color);
}

.grid-row {
    display: flex;
    justify-content: center;
    background: transparent;
    line-height: 0; /* Eklendi */
}

.grid-cell {
    /* width: 80px; */ /* Flex veya grid ile boyut ayarlanacak */
    /* height: 80px; */ /* Aspect ratio ile ayarlanabilir */
    aspect-ratio: 1 / 1; /* Kare hücreler */
    border: 1px solid var(--light-gray);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: clamp(1rem, 4vw, 1.8rem); /* Responsive font */
    color: var(--text-primary);
    background: var(--surface-color);
    position: relative;
    margin: -0.5px; /* Sınırların üst üste binmesi için */
    padding: 0;
    box-sizing: border-box;
    line-height: 1;
}

.grid-cell.empty {
    border: none;
    background: transparent;
}

/* .grid-cell:not(.empty) { ... } */ /* Zaten border var */

/* .grid-cell[style*="color: transparent"] { ... } */ /* Özel durumlar JS ile yönetilebilir */

.grid-cell.black {
    background-color: var(--primary-color); /* Değişti */
    border-color: var(--primary-color);
}

.word-number {
    position: absolute;
    top: 1px;
    left: 2px; /* Ayarlandı */
    font-size: clamp(6px, 1.5vw, 9px); /* Responsive */
    font-weight: 500;
    color: var(--dark-gray); /* Değişti */
    background: rgba(248, 249, 250, 0.7); /* Hafif arka plan */
    padding: 1px 2px; /* Eklendi */
    border-radius: 2px; /* Eklendi */
    z-index: 2;
    line-height: 1;
}

.word-lists {
    display: flex;
    /* flex-direction: column; */ /* Yan yana olabilir */
    gap: 20px;
    flex: 1;
}

/* .word-list stilleri yukarıda tanımlandı */

.word-list h4 {
    color: var(--primary-color); /* Değişti */
    margin-bottom: 15px;
    font-size: 1.2rem;
    border-bottom: 1px solid var(--light-gray); /* Değişti */
    padding-bottom: 8px;
    font-weight: 600;
}

.word-list ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    max-width: 100%;
    overflow: hidden;
}

.word-list li {
    margin-bottom: 10px; /* Ayarlandı */
    font-size: 1rem; /* Ayarlandı */
    color: var(--text-primary);
    line-height: 1.4; /* Eklendi */
}

.word-list li strong {
    color: var(--primary-color);
    margin-right: 8px;
    font-weight: 600;
}

.scrambled-words {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 15px;
    padding: 20px;
    background: var(--surface-color);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
}

.scrambled-word {
    padding: 15px;
    background: var(--background-color); /* Değişti */
    border-radius: var(--border-radius);
    font-size: 1.2rem;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--border-color);
}

.number {
    font-weight: bold;
    color: var(--secondary-color);
}

.print-puzzle {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    padding: 15px 30px;
    background: linear-gradient(135deg, var(--secondary-color), #f4a236);
    color: white;
    border: none;
    border-radius: var(--border-radius); /* Değişti */
    cursor: url('../assets/slimicons/orange-hand-pointer.svg'), auto !important;
    font-size: 1rem;
    font-weight: 600;
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 999999;
    width: auto; /* Değişti */
    min-width: 160px;
    height: auto; /* Değişti */
    box-shadow: var(--shadow-md); /* Değişti */
    overflow: hidden;
    transition: background-color 0.2s, transform 0.1s;
}

.print-puzzle::before {
    content: "📄";
    font-size: 1.4rem;
    margin-right: 8px;
}

.print-puzzle:hover {
    background: #e09d0b; /* Koyu sarı */
    transform: translateX(-50%) translateY(-2px);
}

.print-puzzle:active {
    background: #c88a0a; /* Daha koyu sarı */
    transform: translateX(-50%) translateY(0);
}

.print-puzzle.loading {
    background: var(--secondary-color); /* Rengi koru */
    width: 56px; /* Küçült */
    height: 56px; /* Küçült */
    min-width: 56px;
    border-radius: 50%;
    font-size: 0;
    cursor: progress;
    position: fixed; /* Sabit kalmalı */
}

.print-puzzle.loading::before {
    content: ''; /* İkonu kaldır */
    position: absolute;
    width: 24px;
    height: 24px;
    top: 50%;
    left: 50%;
    margin-top: -12px;
    margin-left: -12px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 1s infinite linear;
}

.print-puzzle.success {
    background: var(--success-color); /* Yeşil */
    width: 56px;
    height: 56px;
    min-width: 56px;
    border-radius: 50%;
    font-size: 0;
    position: fixed;
}

.print-puzzle.success::before {
    content: '✓';
    font-size: 24px;
    color: white;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: successPop 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.prepare-work-container {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--light-gray); /* Değişti */
}

#prepare-work-button, #custom-work-button {
    background: var(--secondary-color);
    color: var(--text-secondary);
    padding: 15px 30px;
    font-size: 1.2rem;
    font-weight: 600;
    min-width: 200px;
    border: none;
    border-radius: var(--border-radius);
    cursor: url('../assets/slimicons/orange-hand-pointer.svg'), auto !important;
    transition: background-color 0.2s, transform 0.1s;
    box-shadow: var(--shadow-sm);
}

#prepare-work-button:hover, #custom-work-button:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

#prepare-work-button:hover {
     background-color: #e09d0b; /* Koyu sarı */
}

#custom-work-button {
    background: var(--primary-color); /* Koyu mavi-gri */
}

#custom-work-button:hover {
    background: var(--secondary-color); /* Sarı/Turuncu */
}

.custom-work-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(52, 76, 100, 0.8); /* Koyu mavi-gri transparan */
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.custom-work-modal.active {
    display: flex !important;
}

.custom-work-content {
    background: var(--surface-color);
    padding: 30px;
    border-radius: var(--border-radius);
    max-width: 500px;
    width: 90%;
    position: relative;
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border-color);
}

.prepare-work-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(52, 76, 100, 0.8); /* Koyu mavi-gri transparan */
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.prepare-work-modal.active {
    display: flex !important;
}

.prepare-work-content {
    background: var(--surface-color);
    padding: 30px;
    border-radius: var(--border-radius);
    max-width: 500px;
    width: 90%;
    position: relative;
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border-color);
}

.work-type-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 20px;
}

.work-type-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 20px;
    background: var(--background-color); /* Değişti */
    border: 1px solid var(--border-color); /* Değişti */
    color: var(--text-primary);
    font-size: 1.1rem;
    font-weight: 600;
    border-radius: var(--border-radius);
    transition: background-color 0.2s, border-color 0.2s, transform 0.1s;
    cursor: url('../assets/slimicons/orange-hand-pointer.svg'), auto !important;
}

.work-type-button:hover {
    background: var(--surface-color);
    border-color: var(--secondary-color);
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

.button-icon-img {
    width: 2rem;
    height: 2rem;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

.pdf-modal, .puzzle-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(52, 76, 100, 0.8); /* Koyu mavi-gri transparan */
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.pdf-modal.active, .puzzle-modal.active {
    display: flex !important;
}

.pdf-modal-content {
    background: var(--surface-color);
    padding: 30px;
    border-radius: var(--border-radius);
    max-width: 500px;
    width: 90%;
    position: relative;
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    align-items: center;
    /* justify-content: center; */ /* Kaldırıldı, içerik yukarı yaslanabilir */
    margin: 0 auto;
}

/* Modal Stilleri */
.prepare-work-modal,
.pdf-modal,
.puzzle-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(52, 76, 100, 0.8); /* Koyu mavi-gri transparan */
    z-index: 1000;
    align-items: center; /* Eklendi */
    justify-content: center; /* Eklendi */
}

.prepare-work-modal.active,
.pdf-modal.active,
.puzzle-modal.active {
    display: flex;
}

.prepare-work-content,
.pdf-modal-content,
.puzzle-modal-content {
    background: var(--surface-color);
    padding: 30px;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-lg);
    position: relative;
    width: auto; /* Genişlik içeriğe göre */
    max-width: 90%; /* Maksimum genişlik */
    /* height: auto; */ /* Yükseklik kaldırıldı */
    /* max-height: 95vh; */ /* Maksimum yükseklik kaldırıldı */
    margin: 20px; /* Kenar boşluğu */
    overflow-y: auto; /* Gerektiğinde scroll */
    border: 1px solid var(--border-color);
}

/* Modal içeriği için başlık ve butonlar */
.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--light-gray); /* Değişti */
}

.modal-buttons {
    display: flex;
    gap: 10px;
}

.back-button,
.close-modal {
    background: none;
    border: none;
    font-size: 1.2rem;
    cursor: url('../assets/slimicons/orange-hand-pointer.svg'), auto !important;
    color: var(--dark-gray); /* Değişti */
    padding: 5px 10px;
    border-radius: var(--border-radius);
}

.back-button {
    display: flex;
    align-items: center;
    gap: 5px;
}

.back-button:hover,
.close-modal:hover {
    background-color: var(--light-gray); /* Değişti */
    color: var(--secondary-color);
}

/* Mobil cihazlar için düzenlemeler */
@media (max-width: 768px) {
    .prepare-work-content,
    .pdf-modal-content,
    .puzzle-modal-content {
        /* width: 95%; */ /* Max-width kullanılıyor */
        /* height: 95vh; */ /* Kaldırıldı */
        padding: 20px;
        /* margin: 2.5vh auto; */ /* Margin 20px yapıldı */
    }
}

@media (max-width: 480px) {
    .prepare-work-content,
    .pdf-modal-content,
    .puzzle-modal-content {
        /* width: 98%; */ /* Max-width kullanılıyor */
        /* height: 98vh; */ /* Kaldırıldı */
        padding: 15px;
        /* margin: 1vh auto; */ /* Margin 20px yapıldı */
    }
}

.crossword-grid {
    /* display: inline-block; */ /* Grid layout için gereksiz */
    padding: 10px; /* Azaltıldı */
    background: var(--surface-color); /* Değişti */
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color); /* Eklendi */
    display: grid; /* Grid layout */
    /* grid-template-columns, grid-template-rows JS ile ayarlanacak */
    gap: 1px; /* Hücreler arası ince boşluk */
}

.crossword-container {
    display: flex;
    gap: 30px;
    align-items: flex-start;
    background-color: transparent; /* Arka plan kaldırıldı */
    max-width: 100%;
    /* overflow: hidden; */ /* İçerik taşabilir */
}

/* .crossword-grid stilleri yukarıda tanımlandı */

/* .grid-row stilleri gereksiz, grid layout kullanılıyor */

/* .grid-cell stilleri yukarıda .puzzle-preview içinde tanımlandı, birleştirilebilir veya özelleştirilebilir */
.crossword-cell {
    /* width: 40px; */
    /* height: 40px; */
    aspect-ratio: 1 / 1;
    border: 1px solid var(--dark-gray); /* Sınır rengi */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(1rem, 4vw, 1.6rem);
    font-weight: 500; /* Normalden biraz kalın */
    background: var(--surface-color);
    position: relative;
    padding: 0;
    box-sizing: border-box;
}

.crossword-cell.black {
    background: var(--primary-color);
    border-color: var(--primary-color);
}

.crossword-cell input {
    width: 90%; /* İçeride biraz boşluk bırak */
    height: 90%;
    border: none;
    text-align: center;
    font-size: inherit; /* Hücre fontuyla aynı */
    font-weight: inherit;
    padding: 0;
    background: transparent;
    outline: none;
    color: var(--text-primary);
    text-transform: uppercase; /* Büyük harf */
}

.crossword-cell .cell-number {
    position: absolute;
    top: 1px;
    left: 2px;
    font-size: clamp(6px, 1.5vw, 9px);
    color: var(--dark-gray);
    font-weight: 500;
    background: rgba(248, 249, 250, 0.7); /* Hafif arka plan */
    padding: 1px 2px;
    border-radius: 2px;
}

.crossword-cell input:focus {
    background: var(--light-gray); /* Odaklanınca hafif arka plan */
}

.crossword-cell.correct input {
    color: var(--success-color); /* Doğru cevap yeşil */
}

.crossword-cell.incorrect input {
    color: var(--error-color); /* Yanlış cevap kırmızı */
    text-decoration: line-through; /* Üstü çizili */
}

/* Eski .crossword-cell stilleri kaldırıldı */

/* .word-lists, .word-list stilleri yukarıda tanımlandı */

@media print {
    body { background-color: white !important; color: black !important; }
    .crossword-container, .crossword-grid, .word-lists, .word-list {
        page-break-inside: avoid;
        background-color: white !important;
        box-shadow: none !important;
        border: 1px solid black !important;
    }
    .grid-cell, .crossword-cell {
        border: 1px solid black !important;
        color: black !important;
        background-color: white !important;
        -webkit-print-color-adjust: exact; 
        print-color-adjust: exact;
    }
    .crossword-cell.black {
         background-color: black !important;
         border-color: black !important;
    }
    .crossword-cell input {
        color: black !important;
    }
    .word-number, .crossword-cell .cell-number {
        color: black !important;
        background: white !important;
    }
    .word-list li, .word-list h4, .puzzle-preview h3 {
        color: black !important;
        border-color: black !important;
    }
    .word-list li strong {
        color: black !important;
    }
    /* Yazdırılmayacak öğeler */
    .minimal-header, .user-header, .logout-button, .print-puzzle, .quick-create-container, .modal, .button-group, #filter-button, .selected-buttons button {
        display: none !important;
    }
}

/* #generate-pdf.loading::after, ... */ /* Animasyonlar için gereksiz */

.table-container {
    margin: 20px 0;
    overflow-x: auto;
    background: rgba(255, 255, 255, 0.95);
    padding: 20px;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-color);
}

.word-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 auto;
}

.word-table th,
.word-table td {
    border: 1px solid var(--border-color); /* Değişti */
    padding: 12px;
    text-align: center;
    font-size: 1.3rem;
    font-weight: 500;
    letter-spacing: 0.75px;
}

.word-table th {
    background-color: var(--primary-color);
    color: var(--text-secondary);
    font-size: 1.3rem;
    font-weight: 600;
}

.word-table td {
    background-color: var(--surface-color);
    color: var(--text-primary);
}

.word-table tr:nth-child(even) td {
    background-color: var(--background-color); /* Ana arka plan rengi */
}

#download-table {
    margin-top: 20px;
    background: var(--secondary-color);
    color: var(--text-secondary);
    padding: 12px 24px; /* Boyut ayarlandı */
    font-size: 1.1rem;
    font-weight: 600;
    min-width: auto; /* Kaldırıldı */
    border: none;
    border-radius: var(--border-radius);
    cursor: url('../assets/slimicons/orange-hand-pointer.svg'), auto !important;
    transition: background-color 0.2s, transform 0.1s;
    box-shadow: var(--shadow-sm);
    display: inline-flex; /* Eklendi */
    align-items: center;
    gap: 8px; /* Eklendi */
}

#download-table::before { /* İkon eklendi */
    content: '💾';
    font-size: 1.2rem;
}

#download-table:hover {
    background-color: #e09d0b; /* Koyu sarı */
    transform: translateY(-1px);
}

#download-table.loading {
    cursor: progress;
}

#download-table.success {
    cursor: default;
}

#download-table.success:not(:has(.vocfount-btn-label)) {
    background: var(--success-color);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    padding: 0;
    font-size: 0;
    min-width: 48px;
    position: relative;
}

#download-table.success:not(:has(.vocfount-btn-label))::before {
    content: '✓';
    font-size: 20px;
    color: white;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: successPop 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.word-image-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 2px;
}

.word-image {
    max-width: 120px;
    max-height: 120px;
    width: auto;
    height: auto;
    object-fit: contain;
    border: none;
    border-radius: 0;
    background: transparent;
}

.word-text {
    font-size: 1.08rem;
    letter-spacing: 0.75px;
    color: var(--text-primary);
    text-align: center;
    margin-top: 5px;
}

/* Ana buton container stili */
.main-buttons-container {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin: 20px 0;
    flex-wrap: wrap;
    padding: 0 15px;
    /* flex-direction: row; */ /* Varsayılan */
    width: 100%;
    /* max-width: 1200px; */ /* body içinde zaten sınırlı */
    /* margin: 0 auto; */ /* body içinde zaten ortalı */
}

/* Ana buton stili - Yeni renkler */
.main-button {
    flex: 0 1 auto;
    background: var(--primary-color); /* Koyu mavi-gri */
    color: white;
    border: none;
    border-radius: var(--border-radius);
    padding: 12px 20px;
    font-size: 14px;
    font-weight: 500;
    cursor: url('../assets/slimicons/orange-hand-pointer.svg'), auto !important;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
    min-width: 140px;
    max-width: 180px;
    justify-content: center;
    box-shadow: var(--shadow-sm);
    text-align: center; /* Metin ortalaması */
}

.main-button:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    background: var(--secondary-color); /* Sarı/Turuncu hover */
}

/* Resimli PDF butonu için özel stil - İkincil renk (sarı) */
#create-table-button {
    background: var(--secondary-color) !important; /* Önemli, özgüllük için */
    box-shadow: var(--shadow-sm) !important;
}

#create-table-button:hover {
    background: #e09d0b !important; /* Koyu sarı */
    box-shadow: var(--shadow-md) !important;
}

/* PDF butonu için özel stil - Birincil renk (mavi-gri) */
.main-button.pdf-button {
    background: var(--primary-color);
    box-shadow: var(--shadow-sm);
}

.main-button.pdf-button:hover {
    background: var(--secondary-color);
    box-shadow: var(--shadow-md);
}

/* Bulmaca butonu için özel stil - Vurgu rengi (açık sarı) veya kırmızı? */
.main-button.puzzle-button {
    background: var(--accent-color); /* Açık sarı */
    color: var(--primary-color); /* Kontrast için koyu metin */
    box-shadow: var(--shadow-sm);
}

.main-button.puzzle-button:hover {
    background: var(--secondary-color); /* Turuncu */
    color: var(--text-secondary); /* Beyaz metin */
    box-shadow: var(--shadow-md);
}

.quick-create-btn {
    background: #00043b;
    color: white;
    border: none;
    border-radius: 50px;
    padding: 16px 24px;
    font-size: 16px;
    font-weight: 600;
    cursor: url('../assets/slimicons/orange-hand-pointer.svg'), auto !important;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 4px 15px rgba(108, 99, 255, 0.3),
                0 0 20px rgba(108, 99, 255, 0.2),
                inset 0 0 15px rgba(255, 255, 255, 0.2);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
    position: relative;
    overflow: hidden;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    letter-spacing: 0.3px;
}

/* Shimmer sadece sözcük seçiliyken (turuncu buton) */
.quick-create-btn:not(.quick-create-btn--has-words)::before {
    display: none;
}
.quick-create-btn.quick-create-btn--has-words::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.3),
        transparent
    );
    transition: 0.5s;
    animation: shimmer 2s infinite;
}

@keyframes shimmer {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}

.quick-create-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(108, 99, 255, 0.4),
                0 0 30px rgba(108, 99, 255, 0.3),
                inset 0 0 20px rgba(255, 255, 255, 0.3);
}

.quick-create-btn.quick-create-btn--has-words:hover::before {
    animation: none;
    left: 100%;
}

.quick-create-icon {
    font-size: 20px;
    transition: all 0.3s ease;
    position: relative;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

.quick-create-btn:hover .quick-create-icon {
    transform: scale(1.1);
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.8);
}

.quick-create-menu {
    position: absolute;
    bottom: calc(100% + 10px); /* Butonun 10px üzerine */
    right: 0;
    /* margin-bottom: 10px; */ /* Yukarıdaki bottom ile değiştirildi */
    background: var(--surface-color);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-lg); /* Gölge güncellendi */
    /* padding: 8px; */ /* İçerik padding'i ile değiştirildi */
    display: none;
    width: 350px; /* Sabit genişlik */
    max-width: calc(100vw - 40px); /* Ekran kenarlarından boşluk */
    max-height: calc(100vh - 100px); /* Maksimum yükseklik, buton boşluğu dahil */
    overflow: hidden; /* İçerik taşarsa scroll olacak */
    animation: menuSlideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: bottom right;
    /* backdrop-filter: blur(10px); */ /* Kaldırıldı veya ayarlanabilir */
    border: 1px solid var(--border-color); /* Sınır eklendi/güncellendi */
    z-index: 999; /* Konteynerin altında ama diğerlerinin üstünde */
    display: flex; /* Flex container */
    flex-direction: column; /* Dikey yerleşim */
}

@keyframes menuSlideIn {
    from {
        opacity: 0;
        transform: translateY(10px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.quick-create-menu.active {
    display: flex; /* Flex olarak göster */
}

/* Hızlı Menü Başlığı */
.quick-menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color);
    background-color: var(--background-color); /* Hafif farklı arka plan */
}

.quick-menu-header h3 {
    margin: 0;
    font-size: 1.1rem;
    color: var(--primary-color);
    font-weight: 600;
}

.quick-close-btn {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: url('../assets/slimicons/orange-hand-pointer.svg'), auto !important;
    color: var(--dark-gray);
    padding: 0;
    line-height: 1;
}

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

/* Hızlı Menü İçeriği */
.quick-menu-content {
    padding: 16px;
    overflow-y: auto; /* İçerik taşarsa scroll */
    flex-grow: 1; /* Kalan alanı doldur */
}

.quick-form-group {
    margin-bottom: 15px;
}

.quick-form-group label {
    display: block;
    margin-bottom: 6px;
    font-size: 0.9rem;
    color: var(--text-primary);
    font-weight: 500;
}

.quick-input, .quick-select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    font-size: 0.95rem;
    background: var(--surface-color);
    color: var(--text-primary);
}

.quick-input:focus, .quick-select:focus {
    border-color: var(--secondary-color);
    box-shadow: 0 0 0 2px rgba(248, 175, 13, 0.2);
    outline: none;
}

.quick-form-row {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    margin-bottom: 20px;
    padding: 20px;
    background: var(--surface-color);
    border-radius: 12px;
    border: 1px solid var(--border-color);
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
}

.quick-form-row:hover {
    border-color: rgba(0, 4, 59, 0.3);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.quick-form-row:last-child {
    margin-bottom: 0;
}

.quick-form-row > .quick-form-group {
    flex: 1; /* Eşit genişlik */
    margin-bottom: 0; /* Satır içindeyse alttaki boşluğu kaldır */
}

.quick-option-tabs {
    display: flex;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    overflow: hidden;
}

.quick-tab {
    flex: 1;
    text-align: center;
    padding: 8px 10px;
    background-color: var(--background-color);
    cursor: url('../assets/slimicons/orange-hand-pointer.svg'), auto !important;
    transition: background-color 0.2s;
    font-size: 0.9rem;
    position: relative; /* Input için */
}

.quick-tab input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.quick-tab span {
    color: var(--text-primary);
    font-weight: 500;
}

.quick-tab:not(:last-child) {
    border-right: 1px solid var(--border-color);
}

.quick-tab input[type="radio"]:checked + span {
    color: var(--text-secondary); /* Seçili metin rengi */
}

.quick-tab input[type="radio"]:checked ~ * {
    color: var(--text-secondary);
}

.quick-tab:has(input[type="radio"]:checked) { /* Tarayıcı desteği? */
    background-color: var(--secondary-color); /* Seçili sekme arka planı */
}

.quick-tab:hover {
    background-color: var(--light-gray);
}

.quick-tab:has(input[type="radio"]:checked):hover {
    background-color: #e09d0b; /* Koyu sarı */
}

/* Özel alanlar */
.trial-count-row {
    display: none; /* Başlangıçta gizli, JS ile yönetilir */
}

.letters-input-container {
    position: relative;
    display: flex;
    align-items: center;
}

.letters-input-container .quick-input {
    padding-right: 40px; /* Sayaç için yer */
}

.letter-counter {
    position: absolute;
    right: 10px;
    font-size: 0.8rem;
    color: var(--dark-gray);
}

.letters-group label .quick-hint {
    font-size: 0.8rem;
    color: var(--dark-gray);
    margin-left: 5px;
}

.letter-exercise-group {
    opacity: 0.5;
    pointer-events: none;
    transition: opacity 0.3s;
}

.quick-checkbox-label {
    display: flex;
    align-items: center;
    cursor: url('../assets/slimicons/orange-hand-pointer.svg'), auto !important;
    user-select: none;
    padding: 5px 0;
}

.quick-checkbox {
    position: absolute;
    opacity: 0;
    cursor: url('../assets/slimicons/orange-hand-pointer.svg'), auto !important;
    height: 0;
    width: 0;
}

.checkmark {
    position: relative;
    display: inline-block;
    width: 18px;
    height: 18px;
    background-color: var(--surface-color);
    border: 2px solid var(--dark-gray);
    border-radius: 4px;
    margin-right: 10px;
    transition: background-color 0.2s, border-color 0.2s;
}

.quick-checkbox:checked ~ .checkmark {
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
}

.checkmark:after {
    content: "";
    position: absolute;
    display: none;
    left: 5px;
    top: 1px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    transform: rotate(45deg);
}

.quick-checkbox:checked ~ .checkmark:after {
    display: block;
}

.quick-checkbox-label span:not(.checkmark) {
    font-size: 0.95rem;
    color: var(--text-primary);
}

/* Hızlı Menü Alt Bilgisi */
.quick-menu-footer {
    padding: 12px 16px;
    border-top: 1px solid var(--border-color);
    background-color: var(--background-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
}

.color-guide {
    display: flex;
    gap: 10px;
    font-size: 0.8rem;
    color: var(--dark-gray);
}

.color-item {
    display: flex;
    align-items: center;
    gap: 4px;
}

.color-item span {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 3px;
}

.quick-create-pdf-btn {
    background: var(--secondary-color); /* Ana vurgu rengi */
    color: var(--text-secondary); /* Beyaz metin */
    border: none;
    border-radius: var(--border-radius);
    padding: 10px 20px; /* Boyut ayarlandı */
    font-size: 1rem; /* Boyut ayarlandı */
    font-weight: 600;
    cursor: url('../assets/slimicons/orange-hand-pointer.svg'), auto !important;
    transition: background-color 0.2s, transform 0.1s;
    display: inline-flex; /* İkonla hizalama için */
    align-items: center;
    gap: 8px;
    box-shadow: var(--shadow-sm);
}

.quick-create-pdf-btn .btn-icon {
    font-size: 1.2rem;
}

.quick-create-pdf-btn:hover {
    background-color: #e09d0b; /* Koyu sarı */
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

/* Eski stiller kaldırıldı/güncellendi */
/* .quick-create-option { ... } */
/* ... */

@media (max-width: 768px) {
    .quick-create-modal-sheet .quick-create-menu {
        max-width: 100%;
    }

    .quick-create-modal-sheet {
        max-height: min(99vh, 960px);
    }

    body.quick-create-modal-open .quick-create-btn {
        opacity: 0;
        visibility: hidden;
        transform: scale(0.92);
        pointer-events: none;
        transition: all 0.3s ease;
    }

    .quick-create-header {
        padding: 14px 18px;
        min-height: 55px;
        max-height: 12px;
    }
    
    .quick-create-header h3 {
        font-size: 1.0rem;
    }
    
    .header-subtitle {
        font-size: 0.75rem;
    }
    
    .quick-close-btn {
        width: 28px;
        height: 28px;
        margin-left: 10px;
    }
    
    .close-icon {
        width: 12px;
        height: 12px;
    }
    
    .close-icon:before,
    .close-icon:after {
        width: 12px;
        height: 1.2px;
        top: 5.4px;
    }
    
    .quick-menu-content {
        padding: 12px;
    }
    .quick-menu-footer {
        padding: 10px 12px;
        flex-direction: column; /* Alt bilgiyi dikey yap */
        align-items: stretch; /* İçeriği genişlet */
    }
    .quick-create-pdf-btn {
        width: 100%; /* Butonu tam genişlik yap */
        justify-content: center; /* İçeriği ortala */
        padding: 12px; /* Padding artırıldı */
    }
    .color-guide {
        justify-content: center; /* Renkleri ortala */
        margin-bottom: 10px; /* Butonla araya boşluk */
    }
}

/* ... existing code ... */

.quick-create-form {
    padding: 10px;
    margin-bottom: 15px;
    background: var(--background-color); /* Değişti */
    border-radius: var(--border-radius);
    display: grid;
    grid-template-columns: auto 1fr; /* Etiket genişliği otomatik */
    gap: 10px 15px; /* Satır ve sütun aralığı */
    align-items: center;
    border: 1px solid var(--border-color);
}

.quick-create-form label {
    color: var(--text-primary);
    font-weight: 500;
    font-size: 0.9rem;
    text-align: right; /* Etiketleri sağa yasla */
}

.quick-create-form .form-control {
    padding: 8px 12px;
    font-size: 0.9rem;
    background-color: var(--surface-color); /* Input arka planı */
}

.login-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(52, 76, 100, 0.85); /* Daha opak */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.login-box {
    background: rgba(255, 255, 255, 0.95);
    padding: 40px; 
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-lg); 
    text-align: center;
    width: 100%;
    max-width: 400px;
    border: 1px solid var(--border-color);
}

.login-box h2 {
    margin-bottom: 25px; /* Artırıldı */
    color: var(--primary-color);
    font-size: 1.8rem; /* Artırıldı */
}

.login-box input {
    width: 100%;
    padding: 12px 15px; 
    margin-bottom: 15px; 
    border: 1px solid var(--border-color); /* Değişti */
    border-radius: var(--border-radius);
    font-size: 1rem;
    background-color: var(--surface-color);
    color: var(--text-primary);
}

.login-box input:focus {
    border-color: var(--secondary-color);
    box-shadow: 0 0 0 3px rgba(248, 175, 13, 0.2);
    outline: none;
}

.login-box button {
    width: 100%;
    padding: 12px; 
    background-color: var(--secondary-color);
    color: var(--text-secondary);
    border: none;
    border-radius: var(--border-radius);
    font-size: 1.1rem; 
    font-weight: 600;
    cursor: url('../assets/slimicons/orange-hand-pointer.svg'), auto !important;
    transition: background-color 0.2s, transform 0.1s;
    margin-top: 10px; 
}

.login-box button:hover {
    background-color: #e09d0b; 
    transform: translateY(-1px);
}

/* Minimal Header Styles */
.minimal-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: linear-gradient(135deg, var(--vf-dark-blue-grey) 0%, #2a4054 100%);
    border-bottom: 2px solid rgba(255, 140, 0, 0.35);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.14);
}

/* VocFount header: Araçlarım | Logo | Geçmiş PDF (açık saydam stil tool-header-light ile) */
.vocfount-header.user-header.tool-header-light {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    height: 60px;
    padding: 8px 20px;
    box-sizing: border-box;
}

.vocfount-header .user-header-left {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-width: 0;
}

.vocfount-header .logo-container-header {
    display: flex;
    align-items: center;
    justify-content: center;
    justify-self: center;
}

.vocfount-header .header-logo-img {
    display: block;
    object-position: center;
}

.vocfount-header .user-header-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    min-width: 0;
}

.minimal-header .header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 32px;
    max-width: 100%;
    margin: 0 auto;
}

.minimal-header .header-left {
    display: flex;
    align-items: center;
    flex: 1;
}

.logo-section {
    display: flex;
    align-items: center;
    gap: 14px;
}

.app-title {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

.minimal-header .app-title h1 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
    color: #ffffff;
    letter-spacing: -0.3px;
    line-height: 1.2;
}

.minimal-header .app-version {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.72);
    font-weight: 400;
    letter-spacing: 0.3px;
}

.minimal-header .header-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Header: Kaydedilen klasörü aç butonu */
.minimal-header .header-open-folder-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 6px;
    color: #f1f5f9;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

.minimal-header .header-open-folder-btn:hover {
    background: rgba(255, 140, 0, 0.18);
    border-color: rgba(255, 140, 0, 0.45);
    color: #ffffff;
}

.header-open-folder-icon {
    font-size: 1rem;
}

.minimal-header .header-open-folder-icon-img {
    width: 20px;
    height: 20px;
    display: block;
    filter: brightness(0) invert(1);
    opacity: 0.92;
}

.header-materials-list-btn .header-open-folder-icon {
    font-size: 1rem;
}

.user-info {
    display: flex;
    align-items: center;
}

.minimal-header .user-name {
    color: #f1f5f9;
    font-weight: 500;
    font-size: 0.875rem;
    padding: 0;
    border: none;
    display: inline-block;
}

/* İçerik üst boşluğu: sabit header kapatmasın */
body:has(.minimal-header) #mainContent,
body:has(.vocfount-header) #mainContent {
    padding-top: 72px;
}

/* VocFount için hesap butonu stilleri */
.minimal-header .auth-cta-account {
    position: relative;
    z-index: 10001;
}

.minimal-header .auth-cta-account .cta-button {
    background-color: rgba(255, 255, 255, 0.1);
    color: #f1f5f9;
    padding: 8px 14px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: background-color 0.2s, border-color 0.2s;
}

.minimal-header .auth-cta-account .cta-button:hover {
    background-color: rgba(255, 140, 0, 0.18);
    border-color: rgba(255, 140, 0, 0.45);
    color: #ffffff;
}

.minimal-header .auth-cta-account .nav-icon {
    width: 16px;
    height: 16px;
    opacity: 0.92;
    filter: brightness(0) invert(1);
}

.account-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    padding: 4px 0;
    min-width: 160px;
    z-index: 10000;
    list-style: none;
}

.auth-cta-account.show > .account-dropdown {
    display: block;
}

.account-dropdown li {
    margin: 0;
}

.account-dropdown li a {
    display: block;
    padding: 10px 16px;
    color: #374151;
    font-size: 0.875rem;
    font-weight: 400;
    text-decoration: none;
}

.account-dropdown li a:hover {
    background-color: #f9fafb;
    color: #111827;
}

.minimal-header .user-name:hover {
    color: #ffffff;
}

/* Watermark ikonlar – açık header üzerinde koyu mavi */
.vocfount-header.tool-header-light .araclarim-back,
.vocfount-header.tool-header-light .tool-watermark-btn {
    --tool-watermark-color: #344c64;
    --araclarim-back-color: #344c64;
}

/* Nasıl Kullanılır Butonu - Minimal */
.how-to-use-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
}

.how-to-use-btn:hover {
    background: #f3f4f6;
    border-color: #d1d5db;
}

.how-to-use-btn svg,
.how-to-use-btn .how-to-use-icon {
    width: 18px;
    height: 18px;
    color: #6b7280;
}

.how-to-use-btn svg path,
.how-to-use-btn .how-to-use-icon path {
    stroke: #6b7280;
    fill: none;
}

.how-to-use-btn svg circle,
.how-to-use-btn .how-to-use-icon circle {
    fill: #6b7280;
}

@media (max-width: 768px) {
    .modal-content {
        padding: 20px;
        width: 95%;
    }
    
    .how-to-use-wrapper {
        margin-bottom: 0.75rem;
    }
    
    .how-to-use-btn {
        width: 32px;
        height: 32px;
    }
    
    .how-to-use-btn svg,
    .how-to-use-btn .how-to-use-icon {
        width: 16px;
        height: 16px;
    }
}

/* Modal Stilleri */
.how-to-use-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 10000;
}

.how-to-use-modal.show {
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-content {
    position: relative;
    background: #ffffff;
    border-radius: 8px;
    padding: 30px;
    max-width: 700px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.modal-close {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 32px;
    height: 32px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    background: #f9fafb;
    color: #374151;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-close:hover {
    background: #f3f4f6;
    border-color: #d1d5db;
}

/* VocFount Materyal Listesi Modal */
.vocfount-materials-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 10001;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.vocfount-materials-modal.active {
    display: flex;
}

.vocfount-materials-modal-content {
    background: #fff;
    border-radius: 12px;
    width: min(calc(100vw - 24px), 100%);
    max-width: calc(100vw - 24px);
    height: min(calc(100vh - 24px), 98vh);
    max-height: calc(100vh - 24px);
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.vocfount-materials-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #e5e7eb;
}

.vocfount-materials-modal-header h3 {
    margin: 0;
    font-size: 1.2rem;
    color: #111827;
}

.vocfount-materials-modal-close {
    width: 32px;
    height: 32px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    background: #f9fafb;
    color: #374151;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vocfount-materials-modal-close:hover {
    background: #f3f4f6;
    border-color: #d1d5db;
}

.vocfount-materials-filter-wrap {
    padding: 12px 20px;
    border-bottom: 1px solid #f3f4f6;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: nowrap;
}

.vocfount-materials-danisan-select {
    padding: 8px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    font-size: 0.9rem;
    min-width: 180px;
}

.vocfount-materials-date-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    background: #fff;
    color: #374151;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}

.vocfount-materials-date-wrap:hover {
    background: #f9fafb;
    border-color: #d1d5db;
}

.vocfount-materials-date-icon {
    font-size: 1rem;
    pointer-events: none;
}

.vocfount-materials-date-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 6px;
    font-size: 0;
    opacity: 0;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.vocfount-materials-date-input::-webkit-calendar-picker-indicator {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    cursor: pointer;
    opacity: 0;
}

/* PDF indir butonu — soldan sağa dolum (gerçek eleman) */
.vocfount-btn-loading,
.download-button.loading,
.assign-homework-button.loading,
.hece-pdf-download-btn.loading,
#generate-pdf.loading,
#download-table.loading,
.quick-create-button.loading {
    position: relative !important;
    overflow: hidden !important;
    cursor: progress !important;
    pointer-events: none;
    isolation: isolate;
    display: flex !important;
    align-items: center;
    justify-content: center;
}

.vocfount-btn-fill-wrap {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    transform: scaleX(0);
    transform-origin: left center;
    will-change: transform;
    z-index: 0;
    border-radius: inherit;
    overflow: hidden;
    pointer-events: none;
}

.vocfount-btn-fill {
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, #f5a623 0%, #ffb347 45%, #ff8c00 100%);
    background-size: 200% 100%;
    animation: vocfountFillShimmer 2.2s ease-in-out infinite;
}

.vocfount-btn-fill-shine {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        105deg,
        transparent 0%,
        rgba(255, 255, 255, 0.22) 45%,
        transparent 70%
    );
    animation: vocfountFillShine 1.8s ease-in-out infinite;
    pointer-events: none;
}

@keyframes vocfountFillShimmer {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

@keyframes vocfountFillShine {
    0% { transform: translateX(-120%); }
    100% { transform: translateX(120%); }
}

.vocfount-btn-label {
    position: relative;
    z-index: 1;
    font-weight: 700;
    letter-spacing: 0.04em;
    font-variant-numeric: tabular-nums;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 4, 59, 0.5);
    transition: transform 0.2s ease;
}

.vocfount-btn-loading.success .vocfount-btn-fill-wrap,
.download-button.success .vocfount-btn-fill-wrap,
#download-table.success .vocfount-btn-fill-wrap,
#generate-pdf.success .vocfount-btn-fill-wrap,
.hece-pdf-download-btn.success .vocfount-btn-fill-wrap,
.quick-create-button.success .vocfount-btn-fill-wrap {
    transform: scaleX(1) !important;
}

.vocfount-btn-loading.success .vocfount-btn-fill,
.download-button.success .vocfount-btn-fill,
#download-table.success .vocfount-btn-fill,
#generate-pdf.success .vocfount-btn-fill,
.hece-pdf-download-btn.success .vocfount-btn-fill,
.quick-create-button.success .vocfount-btn-fill {
    background: linear-gradient(105deg, #2ecc71 0%, #27ae60 50%, #219a52 100%);
    animation: none;
}

.vocfount-btn-loading.success .vocfount-btn-fill-shine,
.download-button.success .vocfount-btn-fill-shine {
    display: none;
}

.vocfount-btn-loading.success .vocfount-btn-label,
.download-button.success .vocfount-btn-label,
#download-table.success .vocfount-btn-label,
#generate-pdf.success .vocfount-btn-label,
.hece-pdf-download-btn.success .vocfount-btn-label,
.quick-create-button.success .vocfount-btn-label {
    color: #fff;
}

.vocfount-materials-list-wrap {
    padding: 16px 20px;
    overflow-y: auto;
    flex: 1;
    min-height: 120px;
}

.vocfount-materials-loading,
.vocfount-materials-empty {
    text-align: center;
    color: #6b7280;
    padding: 24px;
    font-size: 0.95rem;
}

.vocfount-materials-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.vocfount-materials-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    grid-template-rows: auto auto;
    gap: 6px 12px;
    align-items: center;
    padding: 10px 14px;
    background: #f9fafb;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    font-size: 0.9rem;
}

.vocfount-materials-row .vocfount-materials-danisan {
    grid-column: 1;
    grid-row: 1;
    font-weight: 600;
    color: #374151;
}

.vocfount-materials-row .vocfount-materials-title {
    grid-column: 1 / -1;
    grid-row: 2;
    color: #4b5563;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-clamp: 2;
}

.vocfount-materials-row .vocfount-materials-date {
    grid-column: 2;
    grid-row: 1;
    color: #6b7280;
    font-size: 0.85rem;
}

.vocfount-materials-row .vocfount-materials-actions {
    grid-column: 3;
    grid-row: 1;
    display: flex;
    align-items: center;
    gap: 6px;
    align-self: center;
}

.vocfount-materials-row .vocfount-materials-preview-btn,
.vocfount-materials-row .vocfount-materials-remix-btn {
    align-self: center;
}

.vocfount-materials-preview-btn,
.vocfount-materials-remix-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #fff;
    color: #374151;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}

.vocfount-materials-preview-btn:hover,
.vocfount-materials-remix-btn:hover {
    background: #f3f4f6;
    border-color: #d1d5db;
}

.vocfount-preview-icon {
    font-size: 1.1rem;
}

.vocfount-remix-icon {
    width: 18px;
    height: 18px;
    display: block;
}

/* PDF Önizleme Modal */
.vocfount-pdf-preview-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 10002;
    align-items: center;
    justify-content: center;
    padding: 12px;
}

.vocfount-pdf-preview-modal.active {
    display: flex;
}

.vocfount-pdf-preview-content {
    position: relative;
    background: #fff;
    border-radius: 12px;
    width: min(calc(100vw - 24px), 100%);
    max-width: calc(100vw - 24px);
    height: min(calc(100vh - 24px), 98vh);
    max-height: calc(100vh - 24px);
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.vocfount-pdf-preview-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    border-bottom: 1px solid #e5e7eb;
}

.vocfount-pdf-preview-header h3 {
    margin: 0;
    font-size: 1.1rem;
    color: #111827;
}

.vocfount-pdf-preview-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.vocfount-pdf-preview-download-btn.lingo-pdf-preview-btn { /* shared */ }

.vocfount-pdf-preview-download-btn.lingo-pdf-preview-btn:hover { /* shared */ }

.vocfount-pdf-preview-iframe {
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;
    border: none;
    border-radius: 0 0 12px 12px;
    background: #f3f4f6;
}

.vocfount-pdf-preview-content #vocfount-pdf-preview-loading {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
}

.modal-content .steps-info-container {
    margin: 0;
    padding: 0;
    background: transparent;
    box-shadow: none;
    border: none;
}

@media (max-width: 768px) {
    .modal-content {
        padding: 20px;
        width: 95%;
    }
    
    .how-to-use-btn {
        width: 28px;
        height: 28px;
    }
    
    .how-to-use-btn .how-to-use-icon {
        width: 16px;
        height: 16px;
    }
}

/* Body padding for fixed header - only when main content is visible */
#mainContent {
    padding-top: 70px;
}

/* Responsive Header */
@media (max-width: 1200px) {
    .minimal-header .header-content {
        padding: 14px 24px;
    }
    
    
    
    .app-title h1 {
        font-size: 1.35rem;
    }
    
    .app-version {
        font-size: 0.68rem;
    }
}

@media (max-width: 768px) {
    .minimal-header {
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    }

    .vocfount-header.user-header {
        padding: 8px 14px;
        gap: 8px;
    }

    .vocfount-header .user-header-right {
        gap: 8px;
    }
    
    .minimal-header .header-content {
        padding: 8px 14px;
        flex-wrap: nowrap;
        gap: 8px;
    }
    
    .minimal-header .header-left {
        flex: 0 1 auto;
        min-width: 0;
        overflow: hidden;
    }
    
    .logo-section {
        gap: 10px;
        min-width: 0;
    }
    
    .header-logo {
        flex-shrink: 0;
    }
    
    .app-title {
        min-width: 0;
        overflow: hidden;
    }
    
    .app-title h1 {
        font-size: 1.15rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 150px;
    }
    
    .app-version {
        font-size: 0.68rem;
        white-space: nowrap;
    }
    
    .header-right {
        gap: 6px;
        flex-shrink: 0;
        flex-wrap: nowrap;
    }
    
    .user-info {
        min-width: 0;
    }
    
    .user-name {
        font-size: 0.75rem;
        padding-bottom: 4px;
        max-width: 100px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    .auth-cta-account .cta-button {
        padding: 5px 10px;
        font-size: 0.75rem;
        gap: 6px;
    }
    
    .auth-cta-account .nav-icon {
        width: 14px;
        height: 14px;
    }
    
    .home-btn {
        width: 34px;
        height: 34px;
    }
    
    .home-btn svg {
        width: 17px;
        height: 17px;
    }
    
    .how-to-use-btn {
        width: 34px;
        height: 34px;
    }
    
    .how-to-use-btn .how-to-use-icon {
        width: 17px;
        height: 17px;
    }
    
    body:has(.minimal-header) #mainContent {
        padding-top: 60px;
    }
    
    body:has(header.header-shrunk.minimal-header) #mainContent {
        padding-top: 52px;
    }
    
    /* Shrunk durumda mobil */
    header.header-shrunk.minimal-header .header-content {
        padding: 5px 12px;
    }
    
    header.header-shrunk.minimal-header 
    
    header.header-shrunk.minimal-header .app-title h1 {
        font-size: 1rem;
        max-width: 120px;
    }
    
    header.header-shrunk.minimal-header .app-version {
        font-size: 0.62rem;
    }
    
    header.header-shrunk.minimal-header .user-name {
        font-size: 0.7rem;
    }
    
    header.header-shrunk.minimal-header .home-btn,
    header.header-shrunk.minimal-header .how-to-use-btn {
        width: 30px;
        height: 30px;
    }
    
    header.header-shrunk.minimal-header .home-btn svg,
    header.header-shrunk.minimal-header .how-to-use-btn .how-to-use-icon {
        width: 15px;
        height: 15px;
    }
    
    header.header-shrunk.minimal-header .header-open-folder-btn .header-open-folder-text {
        display: none;
    }
    
    header.header-shrunk.minimal-header .header-open-folder-btn {
        width: 30px;
        height: 30px;
        padding: 0;
        justify-content: center;
    }
    
    header.header-shrunk.minimal-header .header-materials-list-btn .header-open-folder-text {
        display: none;
    }
    
    header.header-shrunk.minimal-header .header-materials-list-btn {
        width: 30px;
        height: 30px;
        padding: 0;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .minimal-header .header-content {
        padding: 10px 16px;
        gap: 8px;
    }
    
    .logo-section {
        gap: 10px;
    }
    
    
    
    .app-title h1 {
        font-size: 1.1rem;
        max-width: 130px;
    }
    
    .app-version {
        font-size: 0.62rem;
    }
    
    .user-name {
        font-size: 0.75rem;
        max-width: 100px;
    }
    
    .auth-cta-account .cta-button {
        padding: 6px 10px;
        font-size: 0.75rem;
    }
    
    .home-btn,
    .how-to-use-btn {
        width: 30px;
        height: 30px;
    }
    
    .home-btn svg,
    .how-to-use-btn svg,
    .how-to-use-btn .how-to-use-icon {
        width: 15px;
        height: 15px;
    }
    
    .header-open-folder-btn {
        padding: 6px 10px;
        font-size: 0.8rem;
    }
    
    .header-open-folder-text {
        display: none;
    }
    
    .header-materials-list-btn .header-open-folder-text {
        display: none;
    }
    
    body:has(.minimal-header) #mainContent {
        padding-top: 60px;
    }
}

@media (max-width: 360px) {
    .minimal-header .header-content {
        padding: 8px 12px;
        gap: 6px;
    }
    
    
    
    .app-title h1 {
        font-size: 1rem;
        max-width: 110px;
    }
    
    .app-version {
        font-size: 0.6rem;
    }
    
    .user-name {
        font-size: 0.7rem;
        max-width: 80px;
    }
    
    .home-btn,
    .how-to-use-btn {
        width: 28px;
        height: 28px;
    }
    
    .header-open-folder-btn {
        width: 30px;
        height: 30px;
        padding: 0;
        justify-content: center;
    }
    
    .header-open-folder-text {
        display: none;
    }
    
    .header-materials-list-btn .header-open-folder-text {
        display: none;
    }
    
    body:has(.minimal-header) #mainContent {
        padding-top: 56px;
    }
}

/* Büyük ekranlar için */
@media (min-width: 1400px) {
    .minimal-header .header-content {
        padding: 18px 40px;
    }
    
    
    
    .app-title h1 {
        font-size: 1.6rem;
    }
    
    .app-version {
        font-size: 0.75rem;
    }
    
    .home-btn,
    .how-to-use-btn {
        width: 38px;
        height: 38px;
    }
    
    .home-btn svg,
    .how-to-use-btn svg,
    .how-to-use-btn .how-to-use-icon {
        width: 19px;
        height: 19px;
    }
}

/* Hızlı Oluşturma Butonu ve Menüsü (Yeni Stil) */
.quick-create-container {
    position: fixed; /* Sabit konumlandırma */
    bottom: 20px; /* Alttan 20px boşluk */
    right: 20px; /* Sağdan 20px boşluk */
    z-index: 1000; /* Diğer elemanların üzerinde kalması için */
    /* Mevcut stiller korunabilir veya buraya eklenebilir */
    /* Örneğin: text-align: right; */
}

.quick-create-btn {
    background: linear-gradient(135deg, var(--vf-orange-yellow), var(--vf-yellow)); /* Canlı gradyan */
    color: var(--text-primary); /* Koyu metin */
    border: none;
    padding: 12px 20px;
    border-radius: 50px; /* Tam yuvarlak kenarlar */
    cursor: url('../assets/slimicons/orange-hand-pointer.svg'), auto !important;
    font-size: 1rem;
    font-weight: 600; /* Biraz daha kalın */
    box-shadow: var(--shadow-md), 0 0 15px rgba(248, 175, 13, 0.4); /* Daha belirgin gölge + parlama */
    transition: all 0.3s ease;
    display: inline-flex; /* İçeriği hizalamak için */
    align-items: center;
    gap: 8px;
    position: relative;
    overflow: hidden; /* Parlama efekti için */
}

/* Liste Öğesi Stilleri (Düzeltildi) */
.result-list li, .selected-list li {
    padding: 8px 12px;
    margin: 3px 0;
    background: var(--surface-color);
    border-radius: var(--border-radius);
    cursor: url('../assets/slimicons/orange-hand-pointer.svg'), auto !important;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    overflow-wrap: break-word;
    min-width: 0;
}

.result-list li:hover {
    background: var(--surface-color);
}

.selected-list li {
    background: var(--surface-color);
    border-color: var(--border-color);
    font-weight: 600;
}

.selected-list li:hover {
    background: var(--surface-color);
}

/* --- VOCFOUNT: İstenen/Bulunan listesi butonlarında hover'ı kaldır --- */
.result-list .header-bottom:hover,
.selected-list .header-bottom:hover {
    background: inherit !important;
    border-color: inherit !important;
}

#clear-selected-button:hover::before,
#clear-result-button:hover::before {
    opacity: 0 !important;
}

#clear-selected-button:hover,
#clear-result-button:hover {
    transform: none !important;
    box-shadow: none !important;
    background: linear-gradient(135deg, #e31c23 0%, #ff3131 100%) !important;
}

.selected-buttons button:hover {
    color: var(--dark-gray) !important;
    transform: none !important;
    box-shadow: none !important;
}

/* Hızlı Oluştur Menüsü Stilleri (table-generator.js'den taşındı) */
/* Hızlı Oluştur butonu: sözcük yokken gri, sözcük seçilince turuncu ve canlı */
.quick-create-btn {
    background: linear-gradient(135deg, #9ca3af 0%, #6b7280 100%);
    color: rgba(255, 255, 255, 0.9);
    border: none;
    border-radius: 50px;
    padding: 16px 24px;
    font-size: 16px;
    font-weight: 600;
    cursor: url('../assets/slimicons/orange-hand-pointer.svg'), auto !important;
    transition: background 0.3s ease, box-shadow 0.3s ease, transform 0.2s ease;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}
.quick-create-btn--has-words {
    background: linear-gradient(135deg, #FF8C00 0%, #f59e0b 100%);
    color: white;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2), 0 0 20px rgba(255, 140, 0, 0.35);
}
.quick-create-btn--has-words:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25), 0 0 28px rgba(255, 140, 0, 0.45);
    transform: translateY(-1px);
}

/* Hızlı Oluştur — alt sheet modal (ai-sub-tabs benzeri) */
.quick-create-modal {
    position: fixed;
    inset: 0;
    z-index: 10050;
    opacity: 1;
    pointer-events: auto;
    transition: opacity 280ms cubic-bezier(0.32, 0.72, 0, 1);
}

.quick-create-modal.hidden {
    opacity: 0;
    pointer-events: none;
}

.quick-create-modal-backdrop {
    position: absolute;
    inset: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    background:
        radial-gradient(ellipse 120% 85% at 50% 100%, rgba(255, 140, 0, 0.22) 0%, rgba(15, 45, 64, 0.28) 48%, rgba(15, 45, 64, 0.1) 100%),
        rgba(12, 52, 68, 0.38);
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    opacity: 1;
    transition: opacity 280ms cubic-bezier(0.32, 0.72, 0, 1);
}

.quick-create-modal-backdrop::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.06) 0%,
        transparent 28%,
        rgba(15, 23, 42, 0.14) 100%
    );
    pointer-events: none;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .quick-create-modal-backdrop {
        background: rgba(12, 52, 68, 0.62);
    }
}

.quick-create-modal-sheet {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    max-height: min(98vh, 920px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    transform: translateY(0);
    transition: transform 320ms cubic-bezier(0.32, 0.72, 0, 1);
    padding: 0;
}

.quick-create-modal-sheet::before {
    content: "";
    display: block;
    width: 44px;
    height: 4px;
    margin: 8px auto 0;
    border-radius: 999px;
    background: rgba(255, 140, 0, 0.45);
    flex-shrink: 0;
}

.quick-create-modal.hidden .quick-create-modal-backdrop {
    opacity: 0;
}

.quick-create-modal.hidden .quick-create-modal-sheet {
    transform: translateY(100%);
}

body.quick-create-modal-open {
    overflow: hidden;
}

body.quick-create-modal-open .quick-create-btn {
    opacity: 0;
    visibility: hidden;
    transform: scale(0.92);
    pointer-events: none;
}

/* Hızlı Oluştur menü düzeni — sheet içinde */
.quick-create-modal-sheet .quick-create-menu {
    width: 100%;
    min-width: 0;
    max-width: 560px;
    margin: 0 auto;
    padding: 0;
    border-radius: 20px 20px 0 0;
    box-shadow:
        0 -4px 6px rgba(15, 23, 42, 0.04),
        0 -16px 48px rgba(15, 23, 42, 0.18),
        0 -2px 0 rgba(255, 255, 255, 0.85) inset;
    background: var(--surface-color);
    display: flex;
    flex-direction: column;
    opacity: 1;
    transform: none;
    visibility: visible;
    overflow: hidden;
    max-height: min(94vh, 880px);
    font-family: 'Fredoka', sans-serif;
    position: relative;
    right: auto;
    bottom: auto;
    z-index: 1;
    border: 1px solid rgba(255, 140, 0, 0.35);
    border-bottom: none;
}

.quick-create-modal-sheet .quick-create-menu.active {
    opacity: 1;
    transform: none;
    visibility: visible;
}

.quick-create-modal-sheet .quick-create-body {
    background: var(--surface-color);
}

/* Hızlı Oluştur menü düzeni */
.quick-create-menu {
    width: 450px;
    min-width: 320px;
    max-width: 95vw;
    padding: 0;
    border-radius: var(--border-radius); /* Değişken Kullanımı */
    box-shadow: 0 35px 70px rgba(0, 0, 0, 0.4), 
                0 20px 40px rgba(0, 0, 0, 0.25),
                0 10px 20px rgba(0, 0, 0, 0.15),
                0 0 0 3px rgba(255, 140, 0, 0.3); /* Daha belirgin turuncu iç kenarlık */
    background: var(--surface-color); /* Değişken Kullanımı */
    display: flex;
    flex-direction: column;
    opacity: 0;
    transform: translateY(15px) scale(0.98);
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    overflow: hidden;
    max-height: 90vh;
    font-family: 'Fredoka', sans-serif;
    position: fixed;
    right: 20px;
    bottom: 40px; /* Daha aşağı taşındı */
    z-index: 1000;
    border: 4px solid rgba(255, 140, 0, 0.7); /* Daha kalın ve belirgin turuncu kenarlık */
}

.quick-create-menu.active {
    opacity: 1;
    transform: translateY(0) scale(1);
    visibility: visible;
}

/* Başlık kısmı */
.quick-create-header {
    background: linear-gradient(135deg, #00043b 0%, #1a1a5e 100%);
    color: white;
    padding: 16px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid rgba(255, 140, 0, 0.3);
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
    border-radius: 12px 12px 0 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    min-height: 60px;
}

.quick-create-header .header-content {
    flex: 1;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0;
    max-width: none;
    margin: 0;
    justify-content: flex-start;
    align-items: stretch;
}

.header-icon {
    font-size: 1.8rem;
    margin-bottom: 0;
    display: inline-block;
    opacity: 1;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.quick-create-header h3 {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: 0.3px;
    color: white;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    line-height: 1.1;
}

.header-subtitle {
    margin: 0;
    font-size: 0.8rem;
    opacity: 0.95;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.2;
}

.quick-close-btn {
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, 0.1);
    position: relative;
    z-index: 2;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: url('../assets/slimicons/orange-hand-pointer.svg'), auto !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
    margin-left: 12px;
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.quick-close-btn:hover {
    background: rgba(255, 140, 0, 0.2);
    border-color: rgba(255, 140, 0, 0.4);
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(255, 140, 0, 0.2);
}

.quick-close-btn:active {
    transform: scale(0.95);
    background: rgba(255, 140, 0, 0.3);
}

.close-icon {
    position: relative;
    display: block;
    width: 14px;
    height: 14px;
}

.close-icon:before,
.close-icon:after {
    position: absolute;
    content: '';
    width: 14px;
    height: 1.5px;
    background-color: rgba(255, 255, 255, 0.9);
    top: 6.25px;
    left: 0;
    transition: all 0.2s ease;
    border-radius: 1px;
}

.close-icon:before {
    transform: rotate(45deg);
}

.close-icon:after {
    transform: rotate(-45deg);
}

.quick-close-btn:hover .close-icon:before,
.quick-close-btn:hover .close-icon:after {
    background-color: white;
    height: 2px;
}

/* İçerik kısmı */
.quick-create-body {
    padding: 20px 24px 24px;
    overflow-y: auto;
    background: var(--surface-color);
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Resim Yükleme Progress Bar */
.image-loading-progress {
    background: var(--surface-color);
    border: 2px solid var(--border-color);
    border-radius: 12px;
    padding: 16px;
    margin: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    order: -1; /* En üste taşı */
    z-index: 10;
    position: relative;
    width: 100%;
    box-sizing: border-box;
}

.quick-create-menu {
    display: flex;
    flex-direction: column;
}

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

.progress-text {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.progress-percentage {
    font-size: 16px;
    font-weight: 700;
    color: var(--primary-color);
}

.progress-bar-container {
    width: 100%;
    height: 8px;
    background-color: var(--border-color);
    border-radius: 4px;
    overflow: hidden;
}

.progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--primary-color), #FF8C00);
    border-radius: 4px;
    transition: width 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.quick-form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.quick-form-group label:not(.quick-checkbox-container):not(.quick-toggle-option) {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 14px;
    color: var(--text-primary);
    margin-bottom: 0;
}

.quick-label-icon {
    font-size: 17px; /* Biraz küçültüldü */
    color: var(--primary-color);
    flex-shrink: 0; /* Küçülmesini engelle */
    width: 20px; /* Sabit genişlik */
    text-align: center;
}

.quick-form-control {
    padding: 12px 16px;
    border: 2px solid var(--border-color);
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.3s ease;
    box-shadow: none;
    background-color: var(--surface-color);
    color: var(--text-primary);
    height: 44px;
    box-sizing: border-box;
    width: 100%;
}

.quick-form-control:focus {
    border-color: rgba(0, 4, 59, 0.5);
    box-shadow: 0 0 0 3px rgba(0, 4, 59, 0.1);
    outline: none;
    background-color: var(--background-color);
}

select.quick-form-control {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='%23${getComputedStyle(document.documentElement).getPropertyValue('--primary-color').substring(1)}' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E"); /* İkon rengi dinamik */
    background-repeat: no-repeat;
    background-position: right 12px center; /* Konum ayarlandı */
    background-size: 14px; /* Boyut ayarlandı */
    padding-right: 35px; /* İkon için yer */
}

.quick-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    background: #ffffff;
    border: 2px solid #e9ecef;
    border-radius: 12px;
    padding: 4px;
    transition: all 0.3s ease;
}

.quick-input-wrapper:focus-within {
    border-color: #FF8C00;
    box-shadow: 0 0 0 3px rgba(255,140,0,0.1);
}

.quick-input-wrapper .quick-form-control {
    border: none;
    background: transparent;
    padding: 12px 16px;
    font-size: 1rem;
    font-weight: 600;
    text-align: center;
    letter-spacing: 2px;
    text-transform: uppercase;
    flex-grow: 1;
    padding-right: 50px;
}

.quick-input-wrapper .quick-form-control:focus {
    outline: none;
    box-shadow: none;
}

.letter-counter {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: #FF8C00;
    color: white;
    padding: 4px 8px;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 600;
    pointer-events: none;
    min-width: 32px;
    text-align: center;
    font-weight: 500;
    z-index: 2; /* Input'un üzerinde kalması için */
}

/* Toggle düğmeleri */
.quick-toggle-group {
    display: grid; /* Grid layout kullan */
    grid-template-columns: repeat(2, 1fr); /* Eşit iki sütun */
    gap: 10px; /* Aralarındaki boşluk */
}

/* Düzen seçimi stilleri */
.quick-layout-options {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: 15px;
}

.quick-radio-option {
    position: relative;
}

.quick-radio-option input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.quick-radio-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 10px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm, 8px);
    background: var(--surface-color);
    cursor: url('../assets/slimicons/orange-hand-pointer.svg'), auto !important;
    transition: all 0.2s ease;
    text-align: center;
    color: var(--text-primary);
    height: 80px;
    box-sizing: border-box;
}

.quick-radio-btn:hover {
    border-color: var(--gray-color);
    background: var(--background-color);
    transform: none;
}

.quick-radio-icon {
    font-size: 22px;
    color: var(--primary-color);
}

.quick-radio-btn span:not(.quick-radio-icon) {
    font-size: 13px;
    line-height: 1.3;
}

.quick-radio-option input:checked + .quick-radio-btn {
    background: var(--secondary-color);
    color: var(--text-secondary);
    border-color: var(--secondary-color);
    box-shadow: none;
    transform: none;
}

.quick-radio-option input:checked + .quick-radio-btn .quick-radio-icon {
    color: var(--text-secondary);
}

.quick-layout-selector {
    margin-top: 15px;
    padding: 15px;
    background: var(--background-color);
    border-radius: var(--border-radius-sm, 8px);
    border: 1px solid var(--border-color);
}

.quick-layout-selector label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    font-weight: 500;
    font-size: 15px;
    color: var(--text-primary);
}

.quick-layout-selector .quick-form-control {
    width: 100%;
}

/* .pdf-type-group için özel ayar gerekmiyorsa kaldırılabilir */

.quick-toggle-option {
     /* flex kaldırıldı */
     /* min-width kaldırıldı */
     position: relative; /* Input için */
}

.quick-toggle-option input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.quick-toggle-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px 12px;
    border: 2px solid var(--border-color);
    border-radius: 12px;
    background: var(--surface-color);
    cursor: url('../assets/slimicons/orange-hand-pointer.svg'), auto !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-align: center;
    color: var(--text-primary);
    min-height: 85px;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
}

.quick-toggle-btn:hover {
    border-color: rgba(0, 4, 59, 0.4);
    background: var(--background-color);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 4, 59, 0.15);
}

.quick-toggle-btn:active {
    transform: translateY(0);
    box-shadow: 0 4px 15px rgba(0, 4, 59, 0.2);
}

.quick-toggle-icon {
    font-size: 24px;
    color: rgba(0, 4, 59, 0.8);
    transition: all 0.3s ease;
}

.quick-toggle-btn span:not(.quick-toggle-icon) {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--text-primary);
    transition: all 0.3s ease;
}

.quick-toggle-btn small {
    font-size: 12px;
    opacity: 0.7;
    font-weight: 400;
    margin-top: 2px;
    transition: all 0.3s ease;
}

.quick-toggle-option input:checked + .quick-toggle-btn {
    background: linear-gradient(135deg, #00043b 0%, #1a1a5e 100%);
    color: white;
    border-color: rgba(0, 4, 59, 0.8);
    box-shadow: 0 8px 25px rgba(0, 4, 59, 0.3);
    transform: translateY(-2px);
}

.quick-toggle-option input:checked + .quick-toggle-btn .quick-toggle-icon {
    color: white;
}

.quick-toggle-option input:checked + .quick-toggle-btn span:not(.quick-toggle-icon) {
    color: white;
}

.quick-toggle-option input:checked + .quick-toggle-btn small {
    color: rgba(255, 255, 255, 0.8);
}

/* Checkbox stili */
.quick-checkbox-container {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    cursor: url('../assets/slimicons/orange-hand-pointer.svg'), auto !important;
    user-select: none;
}

.quick-checkbox-container:hover {
    border-color: rgba(0, 4, 59, 0.4);
}

.quick-checkbox {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.quick-checkbox-icon {
    width: 16px;
    height: 16px;
    border: 2px solid var(--border-color);
    border-radius: 3px;
    background: var(--background-color);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.quick-checkbox:checked + .quick-checkbox-icon {
    background: #00043b;
    border-color: #00043b;
}

.quick-checkbox:checked + .quick-checkbox-icon::after {
    content: '✓';
    color: white;
    font-size: 10px;
}

.quick-checkbox-label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 14px;
    color: var(--text-primary);
    cursor: url('../assets/slimicons/orange-hand-pointer.svg'), auto !important;
    flex: 1;
}

.quick-checkbox-label .label-main {
    display: flex;
    align-items: center;
    gap: 6px;
}

.quick-checkbox-label .quick-label-icon {
    font-size: 14px;
    color: rgba(0, 4, 59, 0.8);
}

.quick-checkbox-label small {
    font-size: 11px;
    color: rgba(0, 4, 59, 0.6);
    margin-left: 20px;
}

.quick-create-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: linear-gradient(135deg, #00043b 0%, #1a1a5e 100%);
    color: white;
    border: none;
    border-radius: 10px;
    padding: 14px 28px;
    font-size: 1.8rem;
    font-weight: 600;
    cursor: url('../assets/slimicons/orange-hand-pointer.svg'), auto !important;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    min-width: 230px;
    min-height: 65px;
    position: relative;
    overflow: hidden;
    animation: pulse 2s infinite;
    isolation: isolate;
    contain: layout style paint;
}

.quick-create-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    transition: left 0.6s ease;
    animation: shimmer 3s infinite;
    z-index: 1;
    pointer-events: none;
}

@keyframes shimmer {
    0% {
        left: -100%;
    }
    50% {
        left: 100%;
    }
    100% {
        left: 100%;
    }
}

.quick-create-button::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255,255,255,0.2);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: all 0.3s ease;
    animation: ripple 4s infinite;
    z-index: 0;
    pointer-events: none;
}

@keyframes ripple {
    0% {
        width: 0;
        height: 0;
        opacity: 1;
    }
    50% {
        width: 200px;
        height: 200px;
        opacity: 0.3;
    }
    100% {
        width: 300px;
        height: 300px;
        opacity: 0;
    }
}

.quick-create-button:hover {
    background: linear-gradient(135deg, #1a1a5e 0%, #2a2a7e 100%);
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 8px 25px rgba(0, 4, 59, 0.4);
}

.quick-create-button:hover::before {
    left: 100%;
}

.quick-create-button:hover::after {
    width: 300px;
    height: 300px;
}

.quick-create-button:active {
    transform: translateY(-1px) scale(0.98);
    box-shadow: 0 4px 15px rgba(0, 4, 59, 0.3);
}

/* Pulse animasyonu */
@keyframes pulse {
    0% {
        box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    }
    50% {
        box-shadow: 0 4px 15px rgba(0, 4, 59, 0.4), 0 0 0 10px rgba(0, 4, 59, 0.1);
    }
    100% {
        box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    }
}

.quick-create-button.pulse {
    animation: pulse 2s infinite;
}

/* Loading animasyonu — dolum .vocfount-btn-loading ile yönetilir */
.quick-create-button.loading {
    pointer-events: none;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Success animasyonu */
.quick-create-button.success {
    background: linear-gradient(135deg, #27ae60, #219a52);
    animation: successPulse 0.6s ease;
}

/* Error animasyonu */
.quick-create-button.error {
    background: linear-gradient(135deg, #e74c3c, #c0392b);
    animation: errorPulse 0.6s ease;
}

@keyframes errorPulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

/* Form Bölümleri */
.form-section {
    margin-bottom: 30px;
    background: var(--surface-color);
    border-radius: 12px;
    padding: 20px;
    border: 1px solid var(--border-color);
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

/* Çalışma Ayarları bölümü özel stilleri */

.section-header {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--border-color);
}

.section-icon {
    font-size: 1.2rem;
    margin-right: 10px;
    opacity: 0.8;
}

.section-header h4 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
}

/* Form Label İyileştirmeleri */
.form-label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    font-weight: 500;
    color: var(--text-primary);
    position: relative;
}

.required-badge, .optional-badge {
    font-size: 0.75rem;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 500;
    margin-left: auto;
}

.required-badge {
    background: #ffebee;
    color: #c62828;
    border: 1px solid #ffcdd2;
}

.optional-badge {
    background: #e8f5e8;
    color: #2e7d32;
    border: 1px solid #c8e6c9;
}

/* Input Hint */
.input-hint {
    display: block;
    margin-top: 5px;
    font-size: 0.8rem;
    color: var(--text-secondary);
    opacity: 0.8;
    color: var(--text-primary);
}

/* Color Info İyileştirmeleri */
.quick-colors-info {
    display: flex;
    gap: 16px;
    margin-top: 12px;
    padding: 12px 16px 20px 16px;
    background: var(--surface-color);
    border-radius: 8px;
    border: 1px solid var(--border-color);
    justify-content: center;
    align-items: center;
    min-height: 50px;
}

.quick-colors-info .color-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-primary);
    font-weight: 500;
    padding: 0;
    background: none;
    border: none;
    transition: none;
    flex: none;
}

.quick-colors-info .color-item:hover {
    transform: none;
    box-shadow: none;
    background: none;
}

.quick-colors-info .color-box {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    display: inline-block;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.1);
    border: none;
}

.quick-colors-info .quick-typed-letter {
    font-weight: 600;
    color: var(--text-primary);
    min-width: 16px;
    text-align: center;
    font-size: 12px;
}

/* Boşluk doldurma modu için özel stil */
.quick-colors-info.blank-mode .quick-typed-letter {
    font-family: monospace;
    letter-spacing: 1px;
    position: relative;
}

.quick-colors-info.blank-mode .color-box {
    background: var(--text-secondary) !important;
    opacity: 0.3;
    position: relative;
}

.quick-colors-info.blank-mode .color-box::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 2px;
    background: var(--text-secondary);
    opacity: 0.6;
}

.quick-colors-info.blank-mode .color-item {
    position: relative;
}

.quick-colors-info.blank-mode .color-item::after {
    content: 'Boşluk';
    position: absolute;
    bottom: -18px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 9px;
    color: #e74c3c;
    opacity: 0.9;
    white-space: nowrap;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    font-weight: 600;
}

.color-label {
    font-size: 0.8rem;
    color: var(--text-secondary);
    font-weight: 600;
    text-align: center;
}

.quick-typed-letter {
    font-weight: 700;
    color: var(--text-primary);
    min-width: 20px;
    text-align: center;
    font-size: 1.1rem;
    background: rgba(0,0,0,0.05);
    border-radius: 4px;
    padding: 4px 8px;
    min-height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Toggle Button İyileştirmeleri */
.quick-toggle-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 12px;
}

.quick-toggle-option {
    position: relative;
}

/* Radio input gizleme */
.quick-toggle-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* Checkbox İyileştirmeleri */

.quick-checkbox-container:has(.quick-checkbox:checked) {
    border-color: rgba(0, 4, 59, 0.6);
    background: rgba(0, 4, 59, 0.05);
}

.quick-checkbox-container:has(.quick-checkbox:checked) .quick-checkbox-label {
    color: rgba(0, 4, 59, 0.9);
}

.quick-checkbox-container:has(.quick-checkbox:checked) .quick-checkbox-label .label-main {
    color: rgba(0, 4, 59, 0.9);
}

.quick-checkbox-container:has(.quick-checkbox:checked) .quick-checkbox-label .quick-label-icon {
    color: rgba(0, 4, 59, 0.9);
}

.button-loading {
    display: none;
    font-size: 0.9rem;
    opacity: 0.8;
}

.quick-button-icon {
    font-size: 20px; /* Biraz küçültüldü */
}

/* Renk bilgisi kısmı */
.quick-colors-info {
    display: flex;
    justify-content: space-around; /* Değiştirildi: Ortala yerine etrafa dağıt */
    gap: 25px; /* Artırıldı: Öğeler arası boşluk */
    margin-top: 8px; /* Üstündeki elemandan boşluk */
    flex-wrap: wrap;
    padding: 12px 40px; /* Yatay padding önemli ölçüde artırıldı */
    background: var(--surface-color);
    border-radius: var(--border-radius-sm, 8px); /* Küçük radius */
    border: 1px solid var(--border-color);
}

.quick-colors-info .color-item { /* Quick create içindeki color-item */
    display: flex;
    align-items: center;
    gap: 8px; /* Artırıldı: Kutu ve yazı arası */
    font-size: 13px; /* Biraz küçültüldü */
    color: var(--text-primary); /* Değişti */
    font-weight: 500;
}

.quick-colors-info .color-box { /* Quick create içindeki color-box */
    width: 14px; /* Biraz küçültüldü */
    height: 14px; /* Biraz küçültüldü */
    border-radius: 4px; /* Daha az yuvarlak */
    display: inline-block;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.1);
}

/* Deneme Sayısı Grubu */
.deneme-count {
     margin-top: 15px; /* PDF tipi grubundan sonra boşluk */
}

/* Harf Çalışması Tipi Konteyneri */
 #quick-exercise-type-container {
     transition: opacity 0.3s ease, filter 0.3s ease;
 }

/* Mobil ayarlamalar (Renkleri etkilemez) */
@media (max-width: 480px) {
    .quick-create-modal-sheet .quick-create-menu {
         width: 100%;
         max-width: 100%;
         border-radius: 18px 18px 0 0;
    }
     .quick-toggle-group {
        grid-template-columns: 1fr; /* Mobilde tek sütun */
        gap: 10px;
     }
     
     .quick-toggle-btn {
         min-height: 75px;
         padding: 14px 10px;
     }
     
     .quick-toggle-icon {
         font-size: 20px;
     }
     
     .quick-toggle-btn span:not(.quick-toggle-icon) {
         font-size: 13px;
     }
     
     .quick-toggle-btn small {
         font-size: 11px;
     }
     .quick-layout-options {
        grid-template-columns: 1fr; /* Mobilde tek sütun */
     }
     .quick-form-control {
         font-size: 13px;
         height: 40px;
         padding: 10px 12px;
         border-width: 1px;
     }
     .quick-input-wrapper .quick-form-control {
          padding-right: 45px;
     }
     .letter-counter {
         font-size: 11px;
         padding: 2px 6px;
     }
     select.quick-form-control {
          padding-right: 30px;
          background-size: 12px;
     }

    /* Sözcük listesi elemanları için font küçültme */
    .result-list li,
    .selected-list li {
        font-size: 0.8rem; /* Liste elemanı font boyutu daha da küçültüldü */
        padding: 4px 6px; /* İç boşluklar daha da azaltıldı */
    }
}

/* Devre dışı bırakılmış durumlar */
.disabled-option {
    opacity: 0.5; /* Daha belirgin */
    pointer-events: none;
    filter: grayscale(50%); /* Biraz daha gri */
    background-color: var(--light-gray) !important;
    border-color: var(--border-color) !important;
}

/* Devre dışı bırakılmış grubun içindeki elemanlar */
.disabled-option > * {
     pointer-events: none !important;
}

/* Yeni eklenen "Hepsi" seçeneği stilleri */
.select-all-option {
  width: 100%;
  padding: 6px 0;
  margin-bottom: 10px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  position: relative;
}

.select-all-option label {
  display: flex;
  align-items: center;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  padding: 8px 12px;
  border-radius: 6px;
  background-color: #f0f5ff;
  border: 1px solid #d6e4ff;
  color: #1a56db;
  width: fit-content;
}

.select-all-option label:hover {
  background-color: #e6f0ff;
  border-color: #bfd4ff;
}

.select-all-option input[type="checkbox"] {
  transform: scale(1.2);
  margin-right: 10px;
  accent-color: #1a56db;
}

.select-all-label {
  font-size: 1.05em;
  display: flex;
  align-items: center;
  position: relative;
  padding-right: 22px; /* İkon için yer */
}

.select-all-label::after {
  content: "✓";
  position: absolute;
  right: 0;
  opacity: 0;
  transition: all 0.2s ease;
  color: #0039a6;
  font-weight: bold;
}

.select-all-option input[type="checkbox"]:checked + .select-all-label::after {
  opacity: 1;
}

/* Düzenli Seçenekler için Stiller */
.regular-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.regular-options label {
  display: inline-flex;
  align-items: center;
  background-color: #f8f9fa;
  padding: 6px 10px;
  border-radius: 4px;
  font-size: 0.95em;
  border: 1px solid #e0e0e0;
  transition: all 0.2s ease;
  user-select: none;
  cursor: pointer;
}

.regular-options label:hover {
  background-color: #e9ecef;
  border-color: #d0d0d0;
}

.regular-options input[type="checkbox"] {
  margin-right: 5px;
  accent-color: #4a6da7;
}

.regular-options input[type="checkbox"]:checked + span {
  font-weight: bold;
  color: #1a56db;
}

.regular-options label:has(input[type="checkbox"]:checked) {
  background-color: #e6f7ff;
  border-color: #91d5ff;
  box-shadow: 0 0 0 1px #1990ff inset;
}

/* Genel filtre bölümü stilleri */
.filter-section {
  margin-bottom: 20px;
  transition: all 0.3s ease;
}

.filter-section h3 {
  font-size: 1.1em;
  margin: 0 0 10px 0;
  color: #333;
  font-weight: 600;
}

.filter-section.disabled {
  opacity: 0.6;
  pointer-events: none;
}

.checkbox-group {
  display: flex;
  flex-direction: column;
  background-color: white;
  border-radius: 8px;
  padding: 15px;
  margin-top: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* Tooltip */
.select-all-option label {
  position: relative;
}

.select-all-option label::before {
  content: "Tüm seçenekleri işaretler/kaldırır";
  position: absolute;
  bottom: calc(100% + 5px);
  left: 50%;
  transform: translateX(-50%);
  background-color: #333;
  color: white;
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 4px;
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease;
  white-space: nowrap;
  pointer-events: none;
  z-index: 10;
}

.select-all-option label::after {
  content: "";
  position: absolute;
  top: -5px;
  left: 50%;
  transform: translateX(-50%);
  border-width: 5px;
  border-style: solid;
  border-color: #333 transparent transparent transparent;
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease;
  pointer-events: none;
  z-index: 10;
}

.select-all-option label:hover::before,
.select-all-option label:hover::after {
  opacity: 1;
  visibility: visible;
}

/* Responsive düzenlemeler */
@media (max-width: 768px) {
  .select-all-option label {
    padding: 6px 10px;
  }
  
  .regular-options {
    gap: 6px;
  }
  
  .regular-options label {
    padding: 4px 8px;
    font-size: 0.9em;
  }
  
  .select-all-option label::before,
  .select-all-option label::after {
    display: none; /* Mobilde tooltip gösterme */
  }
}

/* Modern Filtre Bölümü Stilleri */
.modern-filter {
  border-radius: 16px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: linear-gradient(145deg, #ffffff, #dde1e4);
  padding: 20px;
  position: relative;
  overflow: hidden;
}

.modern-filter::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 80px;
  height: 80px;
  background: radial-gradient(circle at top right, rgba(221, 225, 228, 0.3), transparent 70%);
  border-radius: 0 16px 0 80px;
  z-index: 0;
}

.modern-filter h3 {
  font-size: 1.2rem;
  color: var(--primary-color);
  margin-bottom: 16px;
  font-weight: 600;
  position: relative;
  padding-bottom: 10px;
  z-index: 1;
}

.modern-filter h3::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 40px;
  height: 3px;
  background: var(--secondary-color);
  border-radius: 2px;
}

.modern-checkbox-group {
  position: relative;
  z-index: 1;
}

/* Hece sayısı için farklı renk teması */
.filter-section:first-child .modern-option {
  border-color: rgba(26, 86, 219, 0.1);
}

.filter-section:first-child .modern-option-checked {
  background: #1a56db !important;
  border-color: #1a56db !important;
  box-shadow: 0 4px 12px rgba(26, 86, 219, 0.25) !important;
}

.filter-section:first-child .modern-option span {
  font-size: 1.1rem;
}

/* Ses pozisyonu için farklı renk teması */
.filter-section:nth-child(2) .modern-option-checked {
  background: var(--secondary-color) !important;
  border-color: var(--secondary-color) !important;
}

.modern-filter:hover {
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}

.modern-checkbox-group {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.modern-checkbox-group .select-all-option {
  width: 100%;
  margin-bottom: 5px;
  padding: 0;
  border-bottom: none;
}

.modern-checkbox-group .select-all-option label {
  background-color: var(--primary-color);
  color: white;
  padding: 10px 15px;
  border-radius: 8px;
  border: none;
  font-weight: 600;
  width: auto;
  box-shadow: 0 2px 8px rgba(52, 76, 100, 0.2);
  transition: all 0.3s ease;
}

.modern-checkbox-group .select-all-option label:hover {
  background-color: var(--secondary-color);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(248, 175, 13, 0.3);
}

.modern-checkbox-group .select-all-option input[type="checkbox"] {
  margin-right: 8px;
  transform: scale(1.1);
  accent-color: white;
}

.modern-checkbox-group .select-all-label {
  color: white;
  position: relative;
}

.modern-checkbox-group .select-all-label::after {
  color: white;
  margin-left: 8px;
}

.modern-options {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}

.modern-option {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 12px 8px;
  cursor: pointer;
  overflow: hidden;
  border-radius: 16px;
  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  min-height: 65px;
  border: 2px solid #e5e7eb;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.modern-option::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--secondary-color) 0%, #e09d0b 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 0;
}

.modern-option:hover {
  border-color: var(--secondary-color);
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(248, 175, 13, 0.2);
}

.modern-option:hover::before {
  opacity: 0.05;
}

.modern-option input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.modern-option span {
  position: relative;
  z-index: 2;
  font-size: 0.95rem;
  font-weight: 600;
  transition: all 0.3s ease;
  color: var(--primary-color);
  text-align: center;
  line-height: 1.4;
  word-wrap: break-word;
  overflow-wrap: break-word;
  white-space: normal;
  display: block;
  width: 100%;
}

.modern-option:has(input[type="checkbox"]:checked) {
  background: linear-gradient(135deg, var(--secondary-color) 0%, #e09d0b 100%);
  border-color: var(--secondary-color);
  box-shadow: 0 6px 20px rgba(248, 175, 13, 0.35);
  transform: translateY(-2px);
}

.modern-option:has(input[type="checkbox"]:checked) span {
  color: white;
  font-weight: 700;
}

.modern-option:has(input[type="checkbox"]:checked)::before {
  opacity: 0;
}

.modern-option-checked {
  background: linear-gradient(135deg, var(--secondary-color) 0%, #e09d0b 100%) !important;
  border-color: var(--secondary-color) !important;
  box-shadow: 0 6px 20px rgba(248, 175, 13, 0.35) !important;
}

.modern-option-checked span {
  color: white !important;
  font-weight: 700 !important;
}

/* Title özelliği için tooltip stil */
.modern-option[title]::after {
  content: attr(title);
  position: absolute;
  top: -35px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 5px 10px;
  border-radius: 5px;
  font-size: 0.75rem;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  pointer-events: none;
  white-space: nowrap;
  z-index: 10;
}

.modern-option[title]:hover::after {
  opacity: 1;
  visibility: visible;
}

/* Responsive ayarlar */
@media (min-width: 769px) and (max-width: 1199px) {
  .modern-options {
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 10px;
  }
  
  .modern-option {
    min-height: 60px;
    padding: 10px 6px;
    border-radius: 14px;
  }
  
  .modern-option span {
    font-size: 0.88rem;
    line-height: 1.35;
  }
}

@media (max-width: 768px) {
  .modern-options {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }
  
  .modern-option {
    min-height: 55px;
    padding: 10px 6px;
    border-radius: 12px;
  }
  
  .modern-option span {
    font-size: 0.85rem;
    line-height: 1.3;
  }
}

@media (max-width: 480px) {
  .modern-options {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  
  .modern-option {
    min-height: 50px;
    padding: 8px 4px;
  }
  
  .modern-filter {
    padding: 15px;
  }
  
  .modern-filter h3 {
    font-size: 1.1rem;
  }
}

/* JavaScript ile çalışması için sınıf ekleyelim */
.modern-option-checked {
  background: linear-gradient(135deg, var(--secondary-color) 0%, #e09d0b 100%) !important;
  border-color: var(--secondary-color) !important;
  box-shadow: 0 6px 20px rgba(248, 175, 13, 0.35) !important;
  transform: translateY(-2px) !important;
}

.modern-option-checked span {
  color: white !important;
  font-weight: 700 !important;
}

/* Hece sayısı için renk teması - turuncu */
.filter-section:first-child .modern-option {
  border-color: rgba(248, 175, 13, 0.2); /* Turuncu tonunda sınır */
}

.filter-section:first-child .modern-option-checked {
  background: var(--secondary-color) !important; /* Turuncu arka plan */
  border-color: var(--secondary-color) !important; /* Turuncu sınır */
  box-shadow: 0 4px 12px rgba(248, 175, 13, 0.25) !important; /* Turuncu gölge */
}

.filter-section:first-child .modern-option span {
  font-size: 1rem; /* Font boyutunu biraz küçülttüm, isterseniz 1.1rem kalabilir */
}

/* Ses pozisyonu için renk teması (Zaten turuncu, kontrol amaçlı duruyor) */
.filter-section:nth-child(2) .modern-option-checked {
  background: var(--secondary-color) !important;
  border-color: var(--secondary-color) !important;
  box-shadow: 0 4px 12px rgba(248, 175, 13, 0.25) !important;
}

/* Modern Input Grubu Stilleri */
.modern-input-group {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-top: 10px;
}

.input-wrapper {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.input-label {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--primary-color);
  opacity: 0.9;
}

.modern-input-group input[type="text"] {
  width: 100%;
  padding: 12px 15px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 8px;
  font-size: 1rem;
  background: #ffffff;
  color: var(--text-primary);
  transition: border-color 0.2s, box-shadow 0.2s;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.modern-input-group input[type="text"]:focus {
  border-color: var(--secondary-color);
  box-shadow: 0 0 0 3px rgba(248, 175, 13, 0.2);
  outline: none;
}

.modern-input-group input[type="text"]::placeholder {
  color: var(--dark-gray);
  opacity: 0.7;
}

/* Özel input renkleri */
#sound {
  border-color: rgba(34, 197, 94, 0.3) !important;
  background: rgba(34, 197, 94, 0.05) !important;
}

#sound:focus {
  border-color: rgba(34, 197, 94, 0.6) !important;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.2) !important;
}

#exclude-letters {
  border-color: rgba(239, 68, 68, 0.3) !important;
  background: rgba(239, 68, 68, 0.05) !important;
}

#exclude-letters:focus {
  border-color: rgba(239, 68, 68, 0.6) !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2) !important;
}

/* Responsive ayarlar */
@media (max-width: 768px) {
  .modern-input-group input[type="text"] {
    padding: 10px 12px;
    font-size: 0.95rem;
  }
}

.steps-info {
  text-align: left; /* Metni sola yasla */
  margin-top: 15px;
  margin-bottom: 25px;
  padding: 15px 20px; /* İç boşluk artırıldı */
  background-color: var(--surface-color); /* Tema yüzey rengi */
  border-radius: var(--border-radius);
  border: 1px solid var(--border-color); /* Tema sınır rengi */
  font-size: 0.9em;
  color: var(--text-primary); /* Tema birincil metin rengi */
  line-height: 1.7; /* Satır yüksekliği artırıldı */
  box-shadow: var(--shadow-sm); /* Hafif bir gölge eklendi */
}

.steps-info p {
  margin: 0;
  display: flex; /* Adımları yatayda hizalamak için */
  flex-wrap: wrap; /* Küçük ekranlarda alt satıra geçmesi için */
  align-items: center; /* Dikeyde ortalamak için */
}

.steps-info .step-marker {
  display: inline-flex; /* İçeriği ortalamak için */
  align-items: center;
  justify-content: center;
  background-color: var(--vf-orange-yellow); /* Tema vurgu rengi */
  color: var(--text-secondary); /* Vurgu rengi üzerinde beyaz metin */
  border-radius: 50%;
  width: 22px; /* Boyut biraz artırıldı */
  height: 22px;
  font-weight: bold;
  font-size: 0.85em; /* Ana metne göre biraz daha küçük */
  margin-right: 8px; /* Sayı ve metin arası boşluk */
  flex-shrink: 0; /* Küçülmesini engelle */
}

/* Her bir adım metnini ayrı bir span içine alarak daha iyi kontrol sağlayabiliriz,
   ancak şimdilik sadece sayılar ve genel metin arasındaki boşluğu ayarlayalım.
   Sayıdan sonraki metin için gerekirse ek bir sınıf eklenebilir.
*/
.steps-info p span.step-marker + textNode { /* Bu CSS seçicisi doğrudan çalışmaz, JS veya ek HTML gerekebilir */
   margin-left: 5px; /* Sayıdan sonraki metin için */
}

/* Şimdilik sayılar arasında ve metin blokları arasında boşluk bırakmak için daha genel bir yaklaşım */
.steps-info p > .step-marker {
    margin-left: 10px; /* Adım blokları arası sol boşluk */
}
.steps-info p > .step-marker:first-child {
    margin-left: 0; /* İlk adımda sol boşluk olmasın */
}

.steps-info-container {
  margin: 25px 0;
  padding: 20px 25px;
  background-color: var(--surface-color); /* Tema yüzey rengi */
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-md); /* Biraz daha belirgin bir gölge */
  border: 1px solid var(--border-color);
}

.steps-title {
  font-size: 1.3rem; /* Başlık boyutu ayarlandı */
  color: var(--primary-color); /* Tema ana rengi */
  margin-bottom: 18px; /* Başlık ve liste arası boşluk */
  font-weight: 600; /* Daha kalın font */
  padding-bottom: 10px; /* Altına çizgi için boşluk */
  border-bottom: 2px solid var(--vf-orange-yellow); /* Tema vurgu rengiyle çizgi */
  display: inline-block; /* Çizginin sadece metin genişliğinde olması için */
}

.steps-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.steps-list li {
  display: flex; /* Numara ve metni yan yana getirmek için */
  align-items: flex-start; /* Dikeyde üste hizala (uzun metinler için daha iyi) */
  margin-bottom: 12px; /* Liste elemanları arası boşluk */
  font-size: 0.95em;
  color: var(--text-primary);
  line-height: 1.6; /* Satır yüksekliği artırıldı */
}

.steps-list li:last-child {
  margin-bottom: 0; /* Son elemanın altında boşluk olmasın */
}

.steps-list .step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;   /* Boyut ayarlandı */
  height: 26px;  /* Boyut ayarlandı */
  border-radius: 50%;
  background-color: var(--vf-orange-yellow); /* Tema vurgu rengi */
  color: var(--text-secondary); /* Vurgu rengi üzerinde beyaz metin */
  font-weight: bold;
  font-size: 0.9em; /* Liste elemanı font boyutuna göre */
  margin-right: 12px; /* Numara ve metin arası boşluk */
  flex-shrink: 0; /* Numaranın küçülmesini engelle */
  margin-top: 1px; /* Metinle daha iyi hizalanması için ince ayar */
}

/* ... existing code ... */

/* Filtre Seçim Butonları */
/* Nasıl Kullanılır Butonu Wrapper */
.how-to-use-wrapper {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 1rem;
  padding: 0;
}

.how-to-use-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
}

.how-to-use-btn:hover {
  background: #f3f4f6;
  border-color: #d1d5db;
}

.how-to-use-btn svg,
.how-to-use-btn .how-to-use-icon {
  width: 18px;
  height: 18px;
  color: #6b7280;
  stroke: #6b7280;
}

.how-to-use-btn svg path,
.how-to-use-btn .how-to-use-icon path {
  stroke: #6b7280;
  fill: none;
}

.how-to-use-btn svg circle,
.how-to-use-btn .how-to-use-icon circle {
  fill: #6b7280;
}

.filter-toggle-buttons {
  position: relative;
  display: flex;
  justify-content: center;
  gap: 0; /* Butonlar arası boşluk kaldırıldı */
  margin: 0 0 1.5rem;
  background-color: #aec0d1; /* Renk Paletinden: Açık mavi-gri arka plan */
  border-radius: 30px;
  padding: 6px;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.06);
  overflow: hidden; /* Taşan içeriği gizle */
}

.filter-toggle-slider {
  position: absolute;
  top: 6px;
  left: 6px;
  height: calc(100% - 12px);
  width: calc((100% - 12px) / 3); /* Her butonla aynı genişlik - yazıyı tam kaplar */
  background: linear-gradient(135deg, #344c64 0%, #2c3e50 100%);
  border-radius: 25px;
  box-shadow: 0 4px 15px rgba(52, 76, 100, 0.4);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1;
  will-change: transform;
}

/* Hece Düzeyi seçili: slider sol */
.filter-toggle-buttons.hece-active .filter-toggle-slider {
  transform: translateX(0);
}

/* Sözcük Ara seçili (varsayılan): slider 2. konum */
.filter-toggle-buttons:not(.hece-active):not(.concept-active) .filter-toggle-slider {
  transform: translateX(100%);
}

/* Kavramlar seçili: slider 3. konum */
.filter-toggle-buttons.concept-active .filter-toggle-slider {
  transform: translateX(200%);
}

.filter-toggle-btn {
  flex: 1; /* Her buton eşit genişlik - koyu mavi slider yazıyı tam kaplasın */
  padding: 0.8rem 1.5rem;
  border: none;
  background: transparent;
  color: #344c64; /* Renk Paletinden: Koyu mavi-gri metin */
  border-radius: 25px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* Tüm özellikler için geçiş */
  min-width: 0; /* flex:1 ile eşit bölünme için */
  z-index: 2; /* Metnin slider'ın üstünde kalmasını sağlar */
  position: relative; /* Pozisyon eklendi */
  user-select: none; /* Metin seçimini engelle */
  white-space: nowrap; /* Metin satır atlamasın */
  display: flex;
  align-items: center;
  justify-content: center;
}

.filter-toggle-btn:hover {
  color: #2c3e50; /* Hover durumunda daha koyu renk */
  transform: translateY(-1px); /* Hafif yukarı hareket */
  background: transparent !important; /* Hover ve seçili durumda tek arka plan (sadece slider) */
}

.filter-toggle-btn.active:hover {
  background: transparent !important;
  color: white;
}

.filter-toggle-btn.active {
  color: white; /* Aktif buton metin rengi */
  font-weight: 700; /* Aktif buton daha kalın */
  background: transparent !important;
}

.filter-toggle-btn:active {
  transform: translateY(0); /* Tıklama sırasında hareketi sıfırla */
}

/* Responsive tasarım için medya sorguları */
@media (max-width: 768px) {
  .checkbox-container > .app-title--page h1 {
    font-size: 1.45rem;
  }

  .filter-toggle-buttons {
    margin: 0 auto 1.25rem;
    padding: 4px;
    border-radius: 25px;
    width: fit-content;
    display: flex;
    justify-content: center;
  }
  
  .filter-toggle-slider {
    top: 4px;
    left: 4px;
    height: calc(100% - 8px);
    width: calc((100% - 8px) / 3);
    border-radius: 21px;
  }
  
  .filter-toggle-btn {
    padding: 0.7rem 1rem;
    font-size: 0.9rem;
    min-width: 0;
    border-radius: 21px;
  }
}

@media (max-width: 480px) {
  .checkbox-container > .app-title--page {
    margin-bottom: 0.75rem;
  }

  .checkbox-container > .app-title--page h1 {
    font-size: 1.25rem;
  }

  .filter-toggle-buttons {
    margin: 0 auto 1rem;
    padding: 3px;
    border-radius: 20px;
    width: fit-content;
    display: flex;
    justify-content: center;
  }
  
  .filter-toggle-slider {
    top: 3px;
    left: 3px;
    height: calc(100% - 6px);
    width: calc((100% - 6px) / 3);
    border-radius: 17px;
  }
  
  .filter-toggle-btn {
    padding: 0.6rem 0.75rem;
    font-size: 0.8rem;
    min-width: 0;
    border-radius: 17px;
  }
}

/* Filtre Satırı Yerleşimi */
.filter-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  margin-bottom: 1.5rem;
  width: 100%;
}

.filter-row .filter-section {
  margin-bottom: 0;
}

/* Tablet ve orta ekranlar için */
@media (min-width: 769px) and (max-width: 1024px) {
  .filter-sections {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.25rem;
  }
  
  .filter-row {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.25rem;
  }
}

/* Büyük ekranlar için */
@media (min-width: 1200px) {
  .filter-sections {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
  }
  
  .filter-row {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
  }
}

/* Mobil cihazlar için responsive düzenleme */
@media (max-width: 768px) {
  .filter-sections {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  .filter-row {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  .filter-row .filter-section {
    width: 100%;
  }
  
  .quick-checkbox-container {
    padding: 6px 10px;
    gap: 6px;
  }
  
  .quick-checkbox-icon {
    width: 14px;
    height: 14px;
  }
  
  .quick-checkbox-label {
    font-size: 13px;
    gap: 3px;
  }
  
  .quick-checkbox-label .label-main {
    gap: 4px;
  }
  
  .quick-checkbox-label .quick-label-icon {
    font-size: 12px;
  }
  
  .quick-checkbox-label small {
    font-size: 10px;
    margin-left: 16px;
  }
  
  .quick-colors-info {
    gap: 12px;
    padding: 10px 12px 16px 12px;
    margin-top: 8px;
    min-height: 45px;
  }
  
  .quick-colors-info .color-item {
    gap: 4px;
    font-size: 11px;
  }
  
  .quick-colors-info .color-box {
    width: 10px;
    height: 10px;
  }
  
  .quick-colors-info .quick-typed-letter {
    font-size: 11px;
    min-width: 14px;
  }
  
  .quick-colors-info.blank-mode .color-item::after {
    font-size: 8px;
    bottom: -16px;
    color: #e74c3c;
    opacity: 0.9;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    font-weight: 600;
  }
}

.filter-toggle-btn.active {
  color: white; /* Aktif buton metin rengi */
}

/* ... existing code ... */

/* PDF Düzeni Toggle Switch */
.pdf-layout-toggle {
    position: relative;
    display: inline-block;
    width: 220px;
    height: 44px;
    background-color: var(--light-gray);
    border-radius: 22px;
    cursor: url('../assets/slimicons/orange-hand-pointer.svg'), auto !important;
    transition: background-color 0.3s ease;
    border: 1px solid var(--border-color);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}

.pdf-layout-toggle input {
    display: none;
}

.pdf-layout-toggle .toggle-label {
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 2;
    color: var(--dark-gray);
    font-weight: 500;
    font-size: 14px;
    user-select: none;
    padding: 0 10px;
}

.pdf-layout-toggle .toggle-handle {
    position: absolute;
    top: 3px;
    left: 4px;
    width: 108px;
    height: 36px;
    background-color: var(--primary-color); /* 'Otomatik' için varsayılan renk */
    border-radius: 18px;
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), background-color 0.3s ease;
    z-index: 1;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.pdf-layout-toggle input:checked ~ .toggle-label .toggle-handle {
    transform: translateX(104px);
    background-color: var(--secondary-color); /* 'Manuel' için yeni renk */
}

.pdf-layout-toggle .toggle-text-left,
.pdf-layout-toggle .toggle-text-right {
    flex: 1;
    text-align: center;
    transition: color 0.3s ease;
    z-index: 2; /* Metnin handle üzerinde kalmasını sağlar (1'den 2'ye yükseltildi) */
    font-weight: 600; /* Yazıyı daha belirgin yapalım */
}

/* Varsayılan durum: Otomatik seçili */
.pdf-layout-toggle input:not(:checked) ~ .toggle-label .toggle-text-left {
    color: var(--text-secondary); /* Koyu mavi handle üzerinde beyaz yazı */
}
.pdf-layout-toggle input:not(:checked) ~ .toggle-label .toggle-text-right {
    color: var(--text-primary); /* Gri arka plan üzerinde siyah yazı */
}

/* Seçili durum: Manuel seçili */
.pdf-layout-toggle input:checked ~ .toggle-label .toggle-text-left {
    color: var(--text-primary); /* Gri arka plan üzerinde siyah yazı */
}

.pdf-layout-toggle input:checked ~ .toggle-label .toggle-text-right {
    color: var(--text-primary); /* Sarı handle üzerinde siyah yazı (daha iyi kontrast) */
}

/* Toggle Switch Styles */
.toggle-section {
    margin-top: 16px;
    padding: 16px;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 12px;
    border: 1px solid #dee2e6;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    display: none; /* Başlangıçta gizli */
}

.toggle-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.toggle-switch {
    display: flex;
    align-items: center;
    cursor: url('../assets/slimicons/orange-hand-pointer.svg'), auto !important;
    font-size: 15px;
    color: #495057;
    font-weight: 500;
    flex: 1;
}

.toggle-switch input[type="checkbox"] {
    opacity: 0;
    position: absolute;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: relative;
    width: 54px;
    height: 28px;
    background-color: #ced4da;
    border-radius: 28px;
    transition: all 0.3s ease;
    margin-right: 12px;
    flex-shrink: 0;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

.toggle-slider::before {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 22px;
    height: 22px;
    background-color: white;
    border-radius: 50%;
    transition: all 0.3s ease;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.1);
}

.toggle-switch input:checked + .toggle-slider {
    background-color: #28a745;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1), 0 0 0 3px rgba(40, 167, 69, 0.2);
}

.toggle-switch input:checked + .toggle-slider::before {
    transform: translateX(26px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2), 0 2px 4px rgba(0, 0, 0, 0.1);
}

.toggle-label {
    font-weight: 600;
    user-select: none;
    color: #495057;
}

.toggle-label small {
    display: block;
    font-weight: 500;
    font-size: 12px;
    color: #6b7280;
    margin-top: 2px;
    line-height: 1.2;
}

/* Text Toggle Switch Stilleri */
.text-toggle-container {
    display: flex;
    align-items: center;
    margin-top: 8px;
}

.text-toggle-switch {
    display: flex;
    align-items: center;
    cursor: url('../assets/slimicons/orange-hand-pointer.svg'), auto !important;
    font-size: 15px;
    color: #495057;
    font-weight: 500;
    gap: 12px;
}

.text-toggle-switch input[type="checkbox"] {
    opacity: 0;
    position: absolute;
    width: 0;
    height: 0;
}

.text-toggle-slider {
    position: relative;
    width: 54px;
    height: 28px;
    background-color: #ced4da;
    border-radius: 28px;
    transition: all 0.3s ease;
    flex-shrink: 0;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

.text-toggle-slider::before {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 22px;
    height: 22px;
    background-color: white;
    border-radius: 50%;
    transition: all 0.3s ease;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.1);
}

.text-toggle-switch input:checked + .text-toggle-slider {
    background-color: #28a745;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1), 0 0 0 3px rgba(40, 167, 69, 0.2);
}

.text-toggle-switch input:checked + .text-toggle-slider::before {
    transform: translateX(26px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2), 0 2px 4px rgba(0, 0, 0, 0.1);
}

.text-toggle-label {
    font-weight: 600;
    user-select: none;
    color: #495057;
}

.toggle-info-text {
    margin-top: 12px;
    padding: 12px 16px;
    background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%);
    border: 1px solid #ffc107;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(255, 193, 7, 0.1);
}

.toggle-info-text p {
    margin: 0 0 8px 0;
    font-size: 13px;
    line-height: 1.4;
    color: #856404;
}

.toggle-info-text p:last-child {
    margin-bottom: 0;
}

.toggle-info-text strong {
    color: #533f03;
    font-weight: 600;
}

/* Açık mod için mavi tema */
#toggle-info-text-open {
    background: linear-gradient(135deg, #d1ecf1 0%, #bee5eb 100%);
    border: 1px solid #17a2b8;
    box-shadow: 0 2px 4px rgba(23, 162, 184, 0.1);
}

#toggle-info-text-open p {
    color: #0c5460;
}

#toggle-info-text-open strong {
    color: #062c33;
    font-weight: 600;
}

/* Bilgi Butonu */
.info-btn {
    background: rgba(108, 117, 125, 0.1);
    border: 1px solid #dee2e6;
    color: #6c757d;
    cursor: url('../assets/slimicons/orange-hand-pointer.svg'), auto !important;
    padding: 8px;
    border-radius: 50%;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.info-btn:hover {
    color: #28a745;
    background-color: rgba(40, 167, 69, 0.1);
    border-color: #28a745;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.info-btn svg {
    width: 16px;
    height: 16px;
}

/* Bilgi Modal */
.info-modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.3s ease;
}

.info-modal-content {
    background-color: white;
    border-radius: 12px;
    padding: 0;
    max-width: 500px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    animation: slideIn 0.3s ease;
}

.info-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px 16px;
    border-bottom: 1px solid #eee;
}

.info-modal-header h3 {
    margin: 0;
    color: #333;
    font-size: 18px;
    font-weight: 600;
}

.info-modal-close {
    background: none;
    border: none;
    font-size: 24px;
    cursor: url('../assets/slimicons/orange-hand-pointer.svg'), auto !important;
    color: #999;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s ease;
}

.info-modal-close:hover {
    background-color: #f5f5f5;
    color: #666;
}

.info-modal-body {
    padding: 20px 24px 24px;
}

.info-explanation h4 {
    margin: 0 0 12px 0;
    color: #333;
    font-size: 16px;
    font-weight: 600;
}

.info-explanation p {
    margin: 8px 0;
    color: #555;
    line-height: 1.5;
}

.info-example {
    background-color: #f8f9fa;
    border-radius: 8px;
    padding: 16px;
    margin: 16px 0;
    border-left: 4px solid #4CAF50;
}

.info-example h5 {
    margin: 0 0 8px 0;
    color: #333;
    font-size: 14px;
    font-weight: 600;
}

.info-example p {
    margin: 4px 0;
    font-weight: 500;
}

.info-example ul {
    margin: 8px 0 0 0;
    padding-left: 20px;
}

.info-example li {
    margin: 4px 0;
    color: #555;
    line-height: 1.4;
}

.info-tip {
    background-color: #e3f2fd;
    border-radius: 8px;
    padding: 12px 16px;
    margin: 16px 0 0 0;
    border-left: 4px solid #2196F3;
}

.info-tip strong {
    color: #1976D2;
}

/* Yeni Modal İçerik Stilleri */
.info-mode {
    margin: 16px 0;
}

.mode-item {
    background-color: #f8f9fa;
    border-radius: 8px;
    padding: 16px;
    margin: 12px 0;
    border-left: 4px solid #dee2e6;
}

.mode-item:first-child {
    border-left-color: #28a745;
}

.mode-item:last-child {
    border-left-color: #dc3545;
}

.mode-header {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
}

.mode-icon {
    font-size: 18px;
    margin-right: 8px;
}

.mode-item p {
    margin: 0;
    color: #495057;
    line-height: 1.5;
}

.example-comparison {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 12px;
}

.example-side {
    background-color: #fff;
    border-radius: 8px;
    padding: 16px;
    border: 1px solid #dee2e6;
}

.example-side h6 {
    margin: 0 0 12px 0;
    color: #333;
    font-size: 14px;
    font-weight: 600;
}

.example-side ul {
    margin: 8px 0;
    padding-left: 16px;
}

.example-side li {
    margin: 4px 0;
    color: #555;
    line-height: 1.4;
    font-size: 13px;
}

.example-side p {
    margin: 8px 0 0 0;
    font-size: 12px;
    color: #6c757d;
    font-style: italic;
}

.info-tip ul {
    margin: 8px 0 0 0;
    padding-left: 20px;
}

.info-tip li {
    margin: 6px 0;
    color: #555;
    line-height: 1.4;
}

.info-important {
    background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%);
    border-radius: 8px;
    padding: 16px 20px;
    margin: 20px 0 0 0;
    border-left: 5px solid #f39c12;
    box-shadow: 0 2px 8px rgba(243, 156, 18, 0.15);
}

.info-important strong {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #d68910;
    font-size: 15px;
    margin-bottom: 12px;
    font-weight: 600;
}

.info-important strong .modal-title-icon {
    width: 20px;
    height: 20px;
    filter: brightness(0) saturate(100%) invert(67%) sepia(95%) saturate(1234%) hue-rotate(1deg) brightness(98%) contrast(88%);
}

.info-important p {
    margin: 0;
    color: #856404;
    line-height: 1.6;
    font-size: 14px;
}

.info-important ul {
    margin: 8px 0 0 0;
    padding-left: 20px;
    color: #856404;
}

.info-important li {
    margin: 8px 0;
    color: #856404;
    line-height: 1.6;
    font-size: 14px;
}

.info-important li strong {
    display: inline;
    color: #d68910;
    font-weight: 600;
    margin: 0;
    font-size: inherit;
}

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

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideIn {
    from { 
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
    }
    to { 
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.quick-radio-option {
    position: relative;
}

/* Ses Grupları Combobox Stilleri - İyileştirilmiş */
.sound-input-container {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    position: relative;
}

.sound-input-main-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 200px;
}

.sound-input-main-row input[type="text"] {
    flex: 1;
    min-width: 100px;
}

/* Alofon Seçim Container Stilleri - Kompakt */
.alofon-selection-container {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    width: auto;
}

.alofon-group {
    margin: 0;
    padding: 4px 8px;
    background: #f0f9ff;
    border: 1px solid #bae6fd;
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.alofon-group:last-child {
    margin-bottom: 0;
}

.alofon-group label {
    display: inline-block;
    margin: 0;
    font-weight: 700;
    color: #0284c7;
    font-size: 12px;
}

.alofon-select {
    width: auto;
    padding: 2px 6px;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    font-size: 12px;
    background: #ffffff;
    color: #334155;
    cursor: pointer;
    height: 24px;
    line-height: 1.2;
}

.alofon-select:hover {
    border-color: #3b82f6;
}

.alofon-select:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
}

.sound-mode-description {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 16px;
    padding: 16px;
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    transition: all 0.3s ease;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

@keyframes flash-bg {
    0% { 
        background-color: #ffedd5; /* Daha belirgin turuncu */
        border-color: #fdba74; 
        box-shadow: 0 0 15px rgba(251, 146, 60, 0.3);
        transform: scale(1.01);
    }
    100% { 
        background-color: #ffffff; 
        border-color: #e2e8f0;
        box-shadow: 0 1px 3px rgba(0,0,0,0.04);
        transform: scale(1);
    }
}

.sound-mode-description.flash-animation {
    animation: flash-bg 0.8s ease-out;
}

.sound-mode-description:hover {
    border-color: #cbd5e1;
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
    transform: translateY(-1px);
}

.sound-mode-header-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.sound-mode-icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background-color: #f1f5f9;
    border-radius: 8px;
    color: #475569;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.sound-mode-icon-wrapper svg {
    width: 18px;
    height: 18px;
}

.sound-mode-description:hover .sound-mode-icon-wrapper {
    background-color: #e0f2fe;
    color: #0284c7;
}

.sound-mode-title {
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
    margin: 0;
    line-height: 1.2;
}

.sound-mode-content {
    padding-left: 44px; /* 32px icon + 12px gap */
}

.sound-mode-text {
    font-size: 13px;
    color: #64748b;
    line-height: 1.5;
    margin: 0;
}

/* Temizleme - Eski stillerin etkisini kaldırmak için */
.sound-mode-description::before,
.sound-mode-description::after {
    display: none;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.7;
        transform: scale(1.2);
    }
}

.sound-mode-description:empty {
    display: none;
}

.sound-groups-select {
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    border: 2px solid #e1e5e9;
    border-radius: 12px;
    padding: 12px 16px;
    font-family: 'Raleway', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #2c3e50;
    min-width: 220px;
    cursor: url('../assets/slimicons/orange-hand-pointer.svg'), auto !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    padding-right: 40px;
}

.sound-groups-select:hover {
    border-color: #ff8c00;
    box-shadow: 0 4px 12px rgba(255, 140, 0, 0.15);
    transform: translateY(-1px);
    background: linear-gradient(135deg, #ffffff 0%, #fff8f0 100%);
}

.sound-groups-select:focus {
    outline: none;
    border-color: #ff8c00;
    box-shadow: 0 0 0 4px rgba(255, 140, 0, 0.1), 0 4px 16px rgba(255, 140, 0, 0.2);
    transform: translateY(-1px);
    background: linear-gradient(135deg, #ffffff 0%, #fff8f0 100%);
}

.sound-groups-select:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(255, 140, 0, 0.2);
}

.sound-groups-select option {
    padding: 12px 16px;
    background: #ffffff;
    color: #2c3e50;
    font-weight: 500;
    border: none;
    border-bottom: 1px solid #e1e5e9;
    transition: background-color 0.2s ease;
    position: relative;
}

.sound-groups-select option:last-child {
    border-bottom: none;
}

.sound-groups-select option:hover {
    background: #f8f9fa;
    color: #ff8c00;
    border-bottom-color: #ff8c00;
}

.sound-groups-select option:checked {
    background: #ff8c00;
    color: #ffffff;
    font-weight: 600;
    border-bottom-color: #ff8c00;
}

/* Grup kategorileri için özel stiller */
.sound-groups-select option[value="bilabial"],
.sound-groups-select option[value="labiodental"],
.sound-groups-select option[value="alveolar"],
.sound-groups-select option[value="postalveolar"],
.sound-groups-select option[value="palatal"],
.sound-groups-select option[value="velar"],
.sound-groups-select option[value="glottal"] {
    font-weight: 600;
    color: #34495e;
}

.sound-groups-select option[value="plosive"],
.sound-groups-select option[value="fricative"],
.sound-groups-select option[value="affricate"],
.sound-groups-select option[value="nasal"],
.sound-groups-select option[value="liquid"],
.sound-groups-select option[value="approximant"] {
    font-weight: 600;
    color: #8e44ad;
}

.sound-groups-select option[value="voiced"],
.sound-groups-select option[value="voiceless"] {
    font-weight: 600;
    color: #27ae60;
}

.sound-groups-select option[value="early-sounds"],
.sound-groups-select option[value="middle-sounds"],
.sound-groups-select option[value="late-sounds"] {
    font-weight: 600;
    color: #e67e22;
}

.sound-groups-select option[value="front-sounds"],
.sound-groups-select option[value="back-sounds"] {
    font-weight: 600;
    color: #3498db;
}

.sound-groups-select option[value="high-frequency"],
.sound-groups-select option[value="low-frequency"] {
    font-weight: 600;
    color: #e74c3c;
}

.sound-groups-select option[value="thick-vowels"],
.sound-groups-select option[value="thin-vowels"],
.sound-groups-select option[value="wide-vowels"],
.sound-groups-select option[value="narrow-vowels"],
.sound-groups-select option[value="straight-vowels"],
.sound-groups-select option[value="rounded-vowels"] {
    font-weight: 600;
    color: #9b59b6;
}

/* Responsive tasarım için */
@media (max-width: 768px) {
    .sound-input-container {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
    
    .sound-groups-select {
        min-width: auto;
        width: 100%;
        padding: 10px 14px;
        font-size: 13px;
    }
    
    .sound-mode-description {
        padding: 12px;
        gap: 12px;
    }
}

@media (max-width: 480px) {
    .sound-groups-select {
        padding: 8px 12px;
        font-size: 12px;
        background-size: 14px;
        padding-right: 36px;
    }
    
    .sound-mode-description {
        flex-direction: column;
        gap: 10px;
    }
    
    .sound-mode-icon-wrapper {
        width: 36px;
        height: 36px;
    }
}

/* Rastgele Seçim Container Stilleri - Kompakt Tasarım */
.random-selection-container {
    padding: 8px 16px;
    background: linear-gradient(135deg, var(--vf-dark-blue-grey) 0%, #4d6376 100%);
    border-radius: 8px;
    margin-bottom: 16px;
    box-shadow: 0 2px 6px rgba(52, 76, 100, 0.3);
    border: 1px solid rgba(181, 186, 190, 0.2);
}

.random-input-group {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: center;
}

.random-input-group label {
    font-weight: 600;
    color: white;
    font-size: 13px;
    white-space: nowrap;
}

.random-input-group input[type="number"] {
    width: 60px;
    padding: 5px 8px;
    border: 2px solid var(--vf-orange-yellow);
    border-radius: 4px;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    transition: all 0.2s ease;
    background: white;
    color: var(--vf-dark-blue-grey);
}

.random-input-group input[type="number"]:focus {
    outline: none;
    border-color: var(--vf-bright-yellow);
    box-shadow: 0 0 0 2px rgba(255, 140, 0, 0.2);
    background: white;
}

.random-input-group input[type="number"]:hover {
    border-color: var(--vf-bright-yellow);
}

#random-select-button {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 5px 12px;
    background: linear-gradient(135deg, var(--vf-orange-yellow) 0%, var(--vf-bright-yellow) 100%);
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(255, 140, 0, 0.3);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

#random-select-button:hover {
    background: linear-gradient(135deg, var(--vf-bright-yellow) 0%, var(--vf-orange-yellow) 100%);
    transform: translateY(-1px);
    box-shadow: 0 3px 6px rgba(255, 140, 0, 0.4);
}

#random-select-button:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(255, 140, 0, 0.3);
}

#random-select-button:disabled {
    background: var(--vf-medium-grey);
    color: rgba(255, 255, 255, 0.5);
    cursor: not-allowed;
    box-shadow: none;
}

#random-select-button svg {
    width: 14px;
    height: 14px;
    stroke-width: 2.5;
}

/* Responsive tasarım */
@media (max-width: 768px) {
    .random-selection-container {
        padding: 7px 12px;
        margin-bottom: 12px;
    }
    
    .random-input-group {
        gap: 6px;
    }
    
    .random-input-group label {
        font-size: 12px;
    }
    
    .random-input-group input[type="number"] {
        width: 55px;
        padding: 4px 6px;
        font-size: 12px;
    }
    
    #random-select-button {
        padding: 4px 10px;
        font-size: 11px;
    }
}

@media (max-width: 480px) {
    .random-selection-container {
        padding: 6px 10px;
    }
    
    .random-input-group {
        gap: 5px;
    }
    
    .random-input-group label {
        font-size: 11px;
    }
    
    .random-input-group input[type="number"] {
        width: 50px;
        padding: 4px 6px;
        font-size: 11px;
    }
    
    #random-select-button {
        font-size: 11px;
        padding: 4px 8px;
    }
    
    #random-select-button svg {
        width: 12px;
        height: 12px;
    }
}

/* Danışan Dropdown Stilleri - Geliştirilmiş Tasarım */
.danisan-input-wrapper {
    position: relative;
    width: 100%;
}

.danisan-input-wrapper .quick-input {
    padding-right: 50px;
    transition: all 0.3s ease;
}

.danisan-input-wrapper .quick-input:focus {
    box-shadow: 0 0 0 3px rgba(52, 76, 100, 0.1);
}

.danisan-dropdown-btn {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border: 2px solid var(--vf-light-blue-grey);
    cursor: pointer;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--vf-dark-blue-grey);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 6px;
    z-index: 1;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.danisan-dropdown-btn:hover {
    background: linear-gradient(135deg, var(--vf-dark-blue-grey) 0%, #2a3d52 100%);
    color: white;
    border-color: var(--vf-dark-blue-grey);
    box-shadow: 0 4px 8px rgba(52, 76, 100, 0.2);
    transform: translateY(-50%) scale(1.05);
}

.danisan-dropdown-btn.active {
    background: linear-gradient(135deg, var(--vf-dark-blue-grey) 0%, #2a3d52 100%);
    color: white;
    border-color: var(--vf-dark-blue-grey);
    box-shadow: 0 4px 12px rgba(52, 76, 100, 0.3);
}

.danisan-dropdown-btn.active svg {
    transform: rotate(180deg);
}

.danisan-dropdown-btn svg {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    width: 18px;
    height: 18px;
}

.danisan-dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    background: white;
    border: 2px solid var(--vf-dark-blue-grey);
    border-radius: 0 0 12px 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15), 0 4px 8px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    display: none;
    max-height: min(350px, calc(100vh - 200px));
    overflow: hidden;
    flex-direction: column;
    opacity: 0;
    transform: translateY(-10px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.danisan-dropdown-menu.show {
    display: flex;
    opacity: 1;
    transform: translateY(0);
}

.danisan-dropdown-search {
    padding: 12px;
    border-bottom: 2px solid #f0f0f0;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
}

.danisan-search-input {
    width: 100%;
    padding: 10px 14px;
    border: 2px solid var(--vf-light-blue-grey);
    border-radius: 8px;
    font-size: 0.95rem;
    box-sizing: border-box;
    transition: all 0.3s ease;
    background: white;
    font-family: 'Raleway', sans-serif;
}

.danisan-search-input:focus {
    outline: none;
    border-color: var(--vf-dark-blue-grey);
    box-shadow: 0 0 0 3px rgba(52, 76, 100, 0.1);
    transform: scale(1.02);
}

.danisan-search-input::placeholder {
    color: #adb5bd;
    font-style: italic;
}

.danisan-dropdown-list {
    max-height: 280px;
    overflow-y: auto;
    padding: 6px 0;
    background: white;
}

.danisan-dropdown-item {
    padding: 14px 18px;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 0.95rem;
    color: var(--vf-dark-blue-grey);
    position: relative;
    margin: 2px 8px;
    border-radius: 8px;
    font-weight: 500;
    display: flex;
    align-items: center;
    font-family: 'Raleway', sans-serif;
}

.danisan-dropdown-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 0;
    background: var(--vf-dark-blue-grey);
    border-radius: 0 4px 4px 0;
    transition: height 0.25s ease;
}

.danisan-dropdown-item:hover {
    background: linear-gradient(135deg, rgba(52, 76, 100, 0.08) 0%, rgba(52, 76, 100, 0.12) 100%);
    color: var(--vf-dark-blue-grey);
    transform: translateX(4px);
    box-shadow: 0 2px 8px rgba(52, 76, 100, 0.1);
}

.danisan-dropdown-item:hover::before {
    height: 60%;
}

.danisan-dropdown-item.selected {
    background: linear-gradient(135deg, var(--vf-dark-blue-grey) 0%, #2a3d52 100%);
    color: white;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(52, 76, 100, 0.25);
    transform: translateX(4px);
}

.danisan-dropdown-item.selected::before {
    height: 60%;
    background: rgba(255, 255, 255, 0.3);
}

.danisan-dropdown-item.selected:hover {
    background: linear-gradient(135deg, #2a3d52 0%, var(--vf-dark-blue-grey) 100%);
    box-shadow: 0 6px 16px rgba(52, 76, 100, 0.3);
}

.danisan-dropdown-empty {
    padding: 32px 16px;
    text-align: center;
    color: var(--vf-medium-grey);
    font-size: 0.95rem;
    font-style: italic;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    font-family: 'Raleway', sans-serif;
}

.danisan-dropdown-empty::before {
    content: '🔍';
    display: block;
    font-size: 2rem;
    margin-bottom: 8px;
    opacity: 0.5;
}

.danisan-dropdown-list::-webkit-scrollbar {
    width: 10px;
}

.danisan-dropdown-list::-webkit-scrollbar-track {
    background: linear-gradient(180deg, #f8f9fa 0%, #ffffff 100%);
    border-radius: 10px;
    margin: 4px 0;
}

.danisan-dropdown-list::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--vf-dark-blue-grey) 0%, #2a3d52 100%);
    border-radius: 10px;
    border: 2px solid white;
    transition: background 0.3s ease;
}

.danisan-dropdown-list::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #2a3d52 0%, var(--vf-dark-blue-grey) 100%);
    box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.1);
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.danisan-dropdown-menu.show {
    animation: slideDown 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@media (max-width: 768px) {
    .danisan-dropdown-menu {
        max-height: min(250px, calc(100vh - 200px));
    }
    
    .danisan-dropdown-item {
        padding: 12px 16px;
        font-size: 0.9rem;
    }
    
    .danisan-dropdown-btn {
        padding: 8px 10px;
    }
}

/* Local preview header deferred to lingo-pdf-preview-actions.css */
[class*="-pdf-preview-header"].lingo-pdf-preview-header,
[class*="-pdf-preview-header"].lingo-pdf-preview-header h3,
[class*="-pdf-preview-header-actions"].lingo-pdf-preview-header-actions,
[class*="-pdf-preview-download-btn"].lingo-pdf-preview-btn,
[class*="-pdf-preview-download-btn"].lingo-pdf-preview-btn:hover {
  /* shared design wins via pdf-preview-actions.css */
}