@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');

:root {
    --bg-color: #ffffff;
    --bg-elevated: #f5f7fb;
    --text-color: #111827;
    --text-muted: #6b7280;
    --accent-color: #3b82f6;
    --primary-color: #3b82f6;
    --primary-color-rgb: 59, 130, 246;
    --accent-color-soft: rgba(59, 130, 246, 0.12);
    --danger-color: #ef4444;
    --discount-color: #ef4444;
    --border-color: #e5e7eb;
    --input-bg: #ffffff;
    --card-bg: #ffffff;
    --shadow-soft: 0 24px 60px rgba(15, 23, 42, 0.18);
}

body[data-theme="dark"] {
    --bg-color: #0a1020;
    --bg-elevated: #111827;
    --text-color: #f9fafb;
    --text-muted: #9ca3af;
    --accent-color: #60a5fa;
    --primary-color: #60a5fa;
    --primary-color-rgb: 96, 165, 250;
    --accent-color-soft: rgba(96, 165, 250, 0.16);
    --danger-color: #f97373;
    --discount-color: #f97373;
    --border-color: #1f2937;
    --input-bg: #152a47;
    --card-bg: #111827;
    --shadow-soft: 0 24px 60px rgba(15, 23, 42, 0.85);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

* {
    box-sizing: border-box;
}

html, body {
    margin: 0 !important;
    padding: 0 !important;
    height: 100% !important;
    height: 100vh !important;
    height: 100dvh !important;
    overflow-x: hidden !important; /* Yatay scroll'u engelle */
    overflow-y: hidden !important; /* Split-screen için scroll'u engelle */
    width: 100% !important;
    max-width: 100vw !important; /* Viewport genişliğini aşma */
    min-width: 100vw !important;
    box-sizing: border-box;
    position: relative;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

/* Tüm container elementlerin viewport'u aşmaması için */
div, section, main, article, aside, header, footer, nav {
    max-width: 100%;
    box-sizing: border-box;
}

/* Ancak bazı elementler için istisna */
img, svg, video, iframe {
    max-width: 100%;
    height: auto;
}

html {
    overflow-y: hidden !important; /* Split-screen için scroll'u engelle */
}

/* Scrollbar'ı tamamen gizle (geçiş sırasında) */
html.hide-scrollbar,
body.hide-scrollbar {
    overflow: hidden !important;
}

/* Webkit tarayıcılar için scrollbar stil - Tema Uyumlu */
html::-webkit-scrollbar,
body::-webkit-scrollbar {
    width: 8px;
}

html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track {
    background: transparent;
}

html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 4px;
    transition: background 0.2s ease;
}

html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover {
    background: var(--border-color);
}

/* Firefox için scrollbar stilleri - Tema Uyumlu */
html,
body {
    scrollbar-width: thin;
    scrollbar-color: var(--border-color) transparent;
}

html:hover,
body:hover {
    scrollbar-color: var(--border-color) transparent;
}

body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: 
        radial-gradient(circle at 20% 30%, rgba(59,130,246,0.25), transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(236,72,153,0.22), transparent 50%),
        radial-gradient(circle at 50% 50%, rgba(139, 92, 246, 0.12), transparent 60%),
        var(--bg-color);
    background-attachment: fixed;
    color: var(--text-color);
}

/* Light theme'de background'u çok hafif grimsi beyaz yap */
body[data-theme="light"] {
    background: 
        radial-gradient(circle at 20% 30%, rgba(229, 231, 235, 0.3), transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(243, 244, 246, 0.25), transparent 50%),
        radial-gradient(circle at 50% 50%, rgba(249, 250, 251, 0.2), transparent 60%),
        var(--bg-color) !important;
    color: var(--text-color);
    transition: background 0.3s ease, color 0.2s ease, opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    opacity: 1;
    overflow-x: hidden !important; /* Yatay scroll'u engelle */
    overflow-y: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
    min-width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    max-height: 100vh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box;
}

/* Sayfa geçiş animasyonları */
body.page-transition-out {
    opacity: 0;
    pointer-events: none;
    overflow: hidden !important; /* Geçiş sırasında scroll'u engelle */
}

.page-root,
.page-center {
    opacity: 1;
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), 
                transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    transform: translateY(0);
}

.page-root.page-fade-out,
.page-center.page-fade-out {
    opacity: 0;
    transform: translateY(20px); /* Aşağı kayarak kaybol (scrollbar oluşturmaz) */
}

/* Sayfa yüklendiğinde fade in */
.page-root:not(.page-fade-out),
.page-center:not(.page-fade-out) {
    animation: pageFadeIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes pageFadeIn {
    from {
        opacity: 0;
        transform: translateY(-20px); /* Yukarıdan gelerek belir */
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

body::before {
    content: "";
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    margin: 0 !important;
    padding: 0 !important;
    background: 
        radial-gradient(circle at 30% 20%, rgba(59, 130, 246, 0.08), transparent 40%),
        radial-gradient(circle at 70% 80%, rgba(236, 72, 153, 0.08), transparent 40%);
    pointer-events: none;
    z-index: 0;
    box-sizing: border-box;
}

/* Light theme'de body::before background'u çok hafif grimsi beyaz yap - Sadece açık tema için */
body[data-theme="light"]::before {
    background: 
        radial-gradient(circle at 30% 20%, rgba(243, 244, 246, 0.15), transparent 40%),
        radial-gradient(circle at 70% 80%, rgba(249, 250, 251, 0.12), transparent 40%) !important;
}

/* Koyu tema için eski mavi hali korunuyor (yukarıdaki body::before kuralı) */

.page-root {
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    max-height: 100vh !important;
    max-height: 100dvh !important;
    display: flex;
    align-items: stretch;
    justify-content: stretch;
    padding: 0 !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 1;
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 100vw !important;
    box-sizing: border-box;
    overflow: hidden !important;
    margin: 0 !important;
}

/* Split Screen Container */
.split-screen-container {
    width: 100vw !important;
    width: 100% !important;
    height: 100vh !important;
    height: 100dvh !important;
    height: 100% !important;
    min-width: 100vw !important;
    min-width: 100% !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    min-height: 100% !important;
    max-width: 100vw !important;
    max-width: 100% !important;
    max-height: 100vh !important;
    max-height: 100dvh !important;
    max-height: 100% !important;
    display: flex;
    position: relative;
    overflow: hidden;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box;
}

/* Split Panel Base Styles */
.split-panel {
    width: 50%;
    height: 100vh !important;
    height: 100dvh !important;
    height: 100% !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    min-height: 100% !important;
    max-height: 100vh !important;
    max-height: 100dvh !important;
    max-height: 100% !important;
    position: relative;
    overflow: hidden;
    transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1),
                height 0.8s cubic-bezier(0.4, 0, 0.2, 1),
                filter 0.6s ease,
                transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    z-index: 1;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box;
}

.split-panel-left {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(139, 92, 246, 0.15));
    position: relative;
    z-index: 1;
}

.split-panel-right {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(59, 130, 246, 0.15));
}

/* Light theme'de split panel background'ları çok hafif grimsi beyaz yap - Sadece açık tema için */
body[data-theme="light"] .split-panel-left {
    background: linear-gradient(135deg, rgba(243, 244, 246, 0.2), rgba(249, 250, 251, 0.15)) !important;
}

body[data-theme="light"] .split-panel-right {
    background: linear-gradient(135deg, rgba(249, 250, 251, 0.15), rgba(243, 244, 246, 0.2)) !important;
}

/* Koyu tema için eski mavi hali korunuyor (yukarıdaki .split-panel-left ve .split-panel-right kuralları) */

/* Panel Overlay (Blur ve Label) */
.panel-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.8s ease,
                opacity 0.8s ease;
    z-index: 2;
    margin: 0;
    padding: 0;
}

.split-panel.active .panel-overlay {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(0, 0, 0, 0);
    opacity: 0;
    pointer-events: none;
}

/* Panel Label */
.panel-label {
    font-family: "Bebas Neue", system-ui, sans-serif;
    font-size: clamp(48px, 8vw, 96px);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.95);
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.6),
                 0 0 40px rgba(255, 255, 255, 0.1);
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.6s ease,
                font-size 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    z-index: 3;
}

.split-panel.active .panel-label {
    opacity: 0;
    transform: scale(0.8);
}

/* Hover Effect */
.split-panel:hover:not(.active) {
    width: 55%;
}

.split-panel:hover:not(.active) .panel-overlay {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(0, 0, 0, 0.25);
}

.split-panel:hover:not(.active) .panel-label {
    transform: scale(0.95);
    opacity: 1;
    text-shadow: 0 6px 30px rgba(0, 0, 0, 0.7),
                 0 0 60px rgba(255, 255, 255, 0.2);
}

/* Açık temada hover durumunda gölge yok */
body[data-theme="light"] .split-panel:hover:not(.active) .panel-label {
    text-shadow: none !important;
}

/* Hover durumunda diğer panelin yazısını küçült (JavaScript ile class eklendiğinde) */
.split-panel.hover-shrink .panel-label {
    transform: scale(0.85) !important;
    opacity: 0.85 !important;
}

/* Active State - Full Width */
.split-panel.active {
    width: 100%;
    z-index: 10;
    cursor: default;
}

.split-panel.active ~ .split-panel {
    width: 0%;
    transform: translateX(100%);
}

/* Giriş paneli aktif olduğunda Keşfet panelini daha fazla daralt */
/* ~ selector sadece sonraki kardeşleri seçer, bu yüzden parent container kullanıyoruz */
.split-screen-container:has(.split-panel-right.active) .split-panel-left:not(.active) {
    width: 10% !important;
    transform: translateX(0) !important;
}

/* Giriş paneli aktif olduğunda Keşfet yazısını küçült */
.split-screen-container:has(.split-panel-right.active) .split-panel-left:not(.active) .panel-label {
    font-size: clamp(24px, 4vw, 48px) !important;
    opacity: 0.6;
    transform: scale(0.5);
}

/* Panel Content */
.panel-content {
    width: 100%;
    height: 100%;
    min-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(20px, 4vw, 32px);
    box-sizing: border-box;
    opacity: 0;
    transition: opacity 0.8s ease 0.3s;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    z-index: 1;
}

/* Discover panel için padding'i kaldır */
.split-panel-left .panel-content {
    align-items: flex-start;
    justify-content: flex-start;
    padding: 0;
    position: relative;
    overflow: hidden;
}

.split-panel.active .panel-content {
    opacity: 1;
    overflow-y: auto;
    width: 100%;
    max-width: 100%;
}

/* Discover Content */
.discover-content {
    color: var(--text-color);
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: clamp(3px, 0.5vw, 6px) clamp(20px, 3vw, 40px) 0 clamp(20px, 3vw, 40px);
    position: relative;
    text-align: left;
    display: flex;
    flex-direction: column;
    height: 100%;
    box-sizing: border-box;
}

/* Marka Başlığı */
/* Banner Background - Sadece Anasayfa için */
.home-banner-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
    display: none;
    overflow: hidden;
    pointer-events: none;
}

/* Banner sadece anasayfa sekmesindeyken görünür olmalı */
.home-banner-background:not([style*="display: block"]) {
    pointer-events: none !important;
    z-index: -1 !important;
}

.discover-header {
    text-align: center;
    margin: 0 auto;
    padding: 0;
    border: none;
    width: fit-content;
    position: relative;
    z-index: 10;
    max-width: 90%;
    height: fit-content;
    line-height: 1.2;
}

.discover-brand {
    font-family: "Bebas Neue", system-ui, sans-serif;
    font-size: clamp(36px, 5vw, 64px);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin: 0;
    color: var(--text-color);
    text-align: center;
    line-height: 1.2;
}

/* Menü/Tab Container */
.discover-menu {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(6px, 0.8vw, 10px);
    margin: 0;
    margin-bottom: clamp(8px, 1vw, 12px);
    position: relative;
    z-index: 10;
    margin-top: clamp(3px, 0.5vw, 6px);
    justify-content: center;
    align-items: center;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    padding-top: clamp(8px, 1vw, 12px);
    padding-bottom: clamp(8px, 1vw, 12px);
    width: 100%;
    flex-shrink: 0;
    height: auto;
    box-sizing: border-box;
}

.menu-item {
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: clamp(10px, 1.5vw, 14px) clamp(20px, 2.5vw, 28px);
    font-size: clamp(14px, 1.5vw, 16px);
    font-weight: 500;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    flex-shrink: 0;
    box-sizing: border-box;
    line-height: 1.2;
}

.menu-item::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--primary-color);
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.menu-item:hover {
    color: var(--text-color);
    border-color: var(--primary-color);
    background: rgba(var(--primary-color-rgb), 0.05);
}

.menu-item.active {
    color: var(--primary-color);
    border-color: var(--primary-color);
    background: rgba(var(--primary-color-rgb), 0.1);
    font-weight: 600;
}

.menu-item.active::before {
    transform: scaleX(1);
}

.menu-item span {
    position: relative;
    z-index: 1;
}

.menu-item svg {
    width: 20px;
    height: 20px;
    display: block;
    margin: 0;
    flex-shrink: 0;
    line-height: 1;
}

.menu-item span {
    line-height: 1;
    display: inline-block;
}

.menu-item {
    min-height: auto;
    height: auto;
}

/* İçerik Alanı */
.discover-content-area {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding-bottom: clamp(10px, 1.5vw, 20px);
    position: relative;
    z-index: 10;
    -webkit-overflow-scrolling: touch;
    pointer-events: none;
}

/* İçerik alanındaki tüm elementler tıklanabilir olmalı */
.discover-content-area > * {
    pointer-events: auto;
}

.tab-content {
    display: none !important;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    position: relative;
    z-index: 1;
    pointer-events: none !important;
}

.tab-content.active {
    display: block !important;
    opacity: 1;
    transform: translateY(0);
    animation: fadeIn 0.3s ease;
    pointer-events: auto !important;
}

/* Home tab için özel - banner'ın üstünde olmamalı */
#home-tab {
    z-index: 0 !important;
    pointer-events: none !important;
}

#home-tab.active {
    pointer-events: none !important;
}

/* Anasayfa Banner Slider - Arka Plan Olarak */
.home-banner-background .banner-slider-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: auto;
}

.home-banner-background .banner-slider {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: auto;
}

.banner-slider {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: calc(100vh - 200px);
    overflow: hidden;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
}

.banner-slider:active {
    cursor: grabbing;
}

.banner-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.6s ease-in-out;
    z-index: 1;
    pointer-events: none;
}

.banner-slide.active {
    opacity: 1;
    z-index: 2;
    pointer-events: auto;
}

.banner-slide a {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
    pointer-events: auto;
}

.banner-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.banner-nav-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    color: white;
    border: none;
    width: 40px;
    height: 40px;
    font-size: 20px;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    padding: 0;
    pointer-events: auto;
}

.banner-nav-button:hover {
    opacity: 0.8;
    transform: translateY(-50%) scale(1.1);
}

.banner-prev {
    left: 20px;
}

.banner-next {
    right: 20px;
}

.banner-dots {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 20;
    pointer-events: auto;
}

.banner-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid var(--text-muted);
    background: rgba(var(--primary-color-rgb), 0.3);
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 0;
    pointer-events: auto;
    position: relative;
    z-index: 21;
}

.banner-dot.active {
    background: var(--primary-color);
    border-color: var(--primary-color);
    transform: scale(1.2);
}

.banner-dot:hover {
    background: rgba(var(--primary-color-rgb), 0.6);
    border-color: var(--primary-color);
}

.no-banner {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-muted);
    font-size: clamp(16px, 2vw, 20px);
}

/* Banner responsive - Dikey mod için */
@media (max-width: 768px) and (orientation: portrait) {
    .home-banner-background .banner-slider-wrapper,
    .home-banner-background .banner-slider {
        min-height: 100vh;
    }
    
    .banner-nav-button {
        width: 30px;
        height: 30px;
        font-size: 16px;
    }
    
    .banner-prev {
        left: 10px;
    }
    
    .banner-next {
        right: 10px;
    }
    
    .banner-dots {
        bottom: 15px;
    }
    
    .banner-dot {
        width: 10px;
        height: 10px;
    }
}

/* Banner responsive - Yatay mod için */
@media (max-width: 768px) and (orientation: landscape) {
    .home-banner-background .banner-slider-wrapper,
    .home-banner-background .banner-slider {
        min-height: 100vh;
    }
}

/* Banner responsive - Küçük telefonlar */
@media (max-width: 480px) {
    .banner-nav-button {
        width: 30px;
        height: 30px;
        font-size: 16px;
    }
    
    .banner-prev {
        left: 5px;
    }
    
    .banner-next {
        right: 5px;
    }
    
    .banner-dots {
        bottom: 10px;
        gap: 8px;
    }
    
    .banner-dot {
        width: 8px;
        height: 8px;
    }
}

.tab-content.active {
    display: block;
    animation: fadeIn 0.3s ease;
}

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

/* Paketler Grid */
.packages-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: clamp(20px, 3vw, 30px);
    margin-top: 40px;
    justify-items: center;
    justify-content: center;
}

.package-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: clamp(24px, 3vw, 32px);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 100%;
}

.package-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.package-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
    border-color: var(--primary-color);
}

.package-card:hover::before {
    transform: scaleX(1);
}

.package-name {
    font-size: clamp(24px, 3vw, 32px);
    font-weight: 700;
    color: var(--text-color);
    margin-bottom: 20px;
    text-align: center;
}

.package-licences {
    list-style: none;
    padding: 0;
    margin: 0 0 24px 0;
}

.package-licences li {
    padding: 10px 0;
    font-size: clamp(14px, 1.5vw, 16px);
    color: var(--text-muted);
    border-bottom: 1px solid var(--border-color);
}

.package-licences li:last-child {
    border-bottom: none;
}

.package-price-section {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 8px;
    margin-top: auto;
    padding-top: 24px;
    flex-wrap: wrap;
}

.package-price-original {
    font-size: clamp(28px, 3.5vw, 40px);
    font-weight: 700;
    color: var(--text-color);
    text-decoration: line-through;
    opacity: 0.5;
}

.package-price-normal {
    font-size: clamp(32px, 4vw, 48px);
    font-weight: 700;
    color: var(--primary-color);
}

.package-price-discounted {
    font-size: clamp(32px, 4vw, 48px);
    font-weight: 700;
    color: var(--discount-color);
}

.package-price-currency {
    font-size: clamp(18px, 2vw, 24px);
    color: var(--text-muted);
    font-weight: 400;
}

/* Lisanslar Grid */
.licences-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: clamp(15px, 2vw, 20px);
    margin-top: 40px;
    justify-items: center;
    justify-content: center;
}

.licence-card {
    background: var(--card-bg);
    border: 2px solid var(--border-color);
    border-radius: 12px;
    padding: clamp(20px, 2.5vw, 24px);
    text-align: center;
    transition: all 0.3s ease;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    max-width: 100%;
    min-height: 150px;
}

/* Aynı paketten olan lisanslar aynı renkte çerçeve */
.licence-card[data-package-color] {
    border-color: var(--package-color, var(--border-color));
}

.licence-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    border-color: var(--package-color, var(--primary-color));
}

.licence-name {
    font-size: clamp(16px, 2vw, 20px);
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: auto;
    flex: 1;
}

.licence-price-section {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: auto;
    padding-top: 16px;
}

.licence-price-original {
    font-size: clamp(18px, 2.2vw, 24px);
    font-weight: 600;
    color: var(--text-color);
    text-decoration: line-through;
    opacity: 0.5;
}

.licence-price-normal {
    font-size: clamp(20px, 2.5vw, 28px);
    font-weight: 700;
    color: var(--primary-color);
}

.licence-price-discounted {
    font-size: clamp(20px, 2.5vw, 28px);
    font-weight: 700;
    color: var(--discount-color);
}

.licence-price-currency {
    font-size: clamp(14px, 1.5vw, 16px);
    color: var(--text-muted);
    font-weight: 400;
}

/* Fiyatlandırma Tablosu */
.pricing-table-wrapper {
    overflow-x: auto;
    margin-top: 40px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
}

.pricing-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--card-bg);
}

.pricing-table thead {
    background: var(--primary-color);
    color: white;
}

.pricing-table th {
    padding: clamp(16px, 2vw, 20px);
    text-align: left;
    font-weight: 600;
    font-size: clamp(14px, 1.5vw, 16px);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.pricing-table tbody tr {
    border-bottom: 1px solid var(--border-color);
    transition: background 0.2s ease;
}

.pricing-table tbody tr:hover {
    background: rgba(var(--primary-color-rgb), 0.05);
}

.pricing-table tbody tr:last-child {
    border-bottom: none;
}

.pricing-table td {
    padding: clamp(16px, 2vw, 20px);
    font-size: clamp(14px, 1.5vw, 16px);
    color: var(--text-color);
}

/* Tekli Fiyat Bölümü */
.single-pricing-section {
    text-align: center;
    margin-bottom: 40px;
    padding: 20px 0;
    background: transparent;
    border: none;
}

.single-price-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: clamp(16px, 2.5vw, 24px);
    background: var(--card-bg);
    border: 2px solid var(--primary-color);
    border-radius: 12px;
    margin: 0 auto;
    max-width: 380px;
}

.single-price-label {
    font-size: clamp(18px, 2.5vw, 24px);
    font-weight: 600;
    color: var(--text-color);
}

.single-price-section {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

.single-price-value {
    font-size: clamp(32px, 4.5vw, 48px);
    font-weight: 700;
    color: var(--primary-color);
}

.single-price-value.discounted {
    color: var(--discount-color);
}

.single-price-original {
    font-size: clamp(28px, 3.5vw, 40px);
    font-weight: 700;
    color: var(--text-color);
    text-decoration: line-through;
    opacity: 0.5;
}

.single-price-discounted {
    font-size: clamp(32px, 4.5vw, 48px);
    font-weight: 700;
    color: var(--discount-color);
}

.single-pricing-title {
    font-size: clamp(16px, 2vw, 18px);
    font-weight: 500;
    color: var(--text-muted);
    margin-bottom: 12px;
}

.single-pricing-value {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}

.single-price-original {
    font-size: clamp(20px, 2.5vw, 28px);
    font-weight: 600;
    color: var(--text-color);
    text-decoration: line-through;
    opacity: 0.5;
}

.single-price-original:not(:has(+ .single-price-discounted)) {
    text-decoration: none;
    opacity: 1;
    color: var(--primary-color);
    font-size: clamp(24px, 3vw, 32px);
    font-weight: 700;
}

.single-price-discounted {
    font-size: clamp(24px, 3vw, 32px);
    font-weight: 700;
    color: var(--discount-color);
}

.single-price-currency {
    font-size: clamp(14px, 1.5vw, 18px);
    color: var(--text-muted);
    font-weight: 400;
}

.pricing-range {
    font-weight: 600;
    color: var(--text-color);
}

.pricing-amount {
    display: flex;
    align-items: baseline;
    gap: 6px;
    flex-wrap: wrap;
}

.pricing-amount-original {
    font-weight: 600;
    color: var(--text-color);
    text-decoration: line-through;
    opacity: 0.5;
    font-size: clamp(14px, 1.5vw, 16px);
}

.pricing-amount-original:not(:has(+ .pricing-amount-discounted)) {
    text-decoration: none;
    opacity: 1;
    font-weight: 700;
    color: var(--primary-color);
    font-size: clamp(16px, 2vw, 20px);
}

.pricing-amount-discounted {
    font-weight: 700;
    color: var(--discount-color);
    font-size: clamp(16px, 2vw, 20px);
}

.pricing-amount-currency {
    font-size: clamp(12px, 1.5vw, 14px);
    color: var(--text-muted);
    font-weight: 400;
}

/* ERP Badges */
.erp-badges {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: clamp(15px, 2vw, 20px);
    margin-top: 40px;
}

.erp-badge {
    background: var(--card-bg);
    border: 2px solid var(--border-color);
    border-radius: 12px;
    padding: clamp(20px, 2.5vw, 24px);
    font-size: clamp(16px, 2vw, 20px);
    font-weight: 600;
    color: var(--text-color);
    text-align: center;
    transition: all 0.3s ease;
}

.erp-badge:hover {
    border-color: var(--primary-color);
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

/* Hakkında İçeriği */
.about-content {
    max-width: 900px;
    margin: 40px auto 0;
    padding: clamp(30px, 4vw, 50px);
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    text-align: left;
}

.about-content h1 {
    font-size: clamp(28px, 3.5vw, 36px);
    font-weight: 700;
    color: var(--text-color);
    margin-top: 32px;
    margin-bottom: 20px;
    line-height: 1.4;
}

.about-content h1:first-child {
    margin-top: 0;
}

.about-content h2 {
    font-size: clamp(24px, 3vw, 30px);
    font-weight: 600;
    color: var(--text-color);
    margin-top: 28px;
    margin-bottom: 16px;
    line-height: 1.4;
}

.about-content h3 {
    font-size: clamp(20px, 2.5vw, 24px);
    font-weight: 600;
    color: var(--text-color);
    margin-top: 24px;
    margin-bottom: 12px;
    line-height: 1.4;
}

.about-content p {
    font-size: clamp(16px, 2vw, 18px);
    color: var(--text-color);
    line-height: 1.8;
    margin-bottom: 20px;
}

.about-content p:last-child {
    margin-bottom: 0;
}

.about-content ul,
.about-content ol {
    font-size: clamp(16px, 2vw, 18px);
    color: var(--text-color);
    line-height: 1.8;
    margin-bottom: 20px;
    padding-left: 24px;
}

.about-content li {
    margin-bottom: 8px;
}

.about-content strong,
.about-content b {
    font-weight: 600;
    color: var(--text-color);
}

.about-content em,
.about-content i {
    font-style: italic;
}

.about-content a {
    color: var(--primary-color);
    text-decoration: underline;
    transition: color 0.2s ease;
}

.about-content a:hover {
    color: var(--accent-color);
}

/* İletişim Bilgileri İçeriği */
.contact-content-wrapper {
    max-width: 1000px;
    margin: 40px auto 0;
    padding: clamp(20px, 3vw, 40px);
    display: flex;
    flex-direction: column;
    gap: clamp(30px, 4vw, 50px);
}

/* İletişim Bilgileri Kutusu */
.contact-info-box {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: clamp(25px, 3.5vw, 45px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

.contact-info-box:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}

.contact-title {
    font-size: clamp(24px, 3vw, 32px);
    font-weight: 700;
    color: var(--text-color);
    margin-bottom: clamp(20px, 3vw, 30px);
    padding-bottom: clamp(10px, 1.5vw, 16px);
    border-bottom: 3px solid var(--primary-color);
    position: relative;
    word-wrap: break-word;
}

.contact-title::after {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 0;
    width: 60px;
    height: 3px;
    background: var(--accent-color);
}

.contact-info-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: clamp(16px, 2vw, 24px);
    width: 100%;
    box-sizing: border-box;
}

@media (max-width: 768px) {
    .contact-info-list {
        grid-template-columns: 1fr;
        gap: clamp(14px, 2vw, 20px);
    }
    
    .contact-info-box {
        padding: clamp(20px, 3vw, 30px);
    }
}

@media (max-width: 480px) {
    .contact-info-list {
        grid-template-columns: 1fr;
        gap: clamp(12px, 1.5vw, 18px);
    }
    
    .contact-info-box {
        padding: clamp(18px, 2.5vw, 25px);
    }
}

.contact-info-item {
    display: flex;
    flex-direction: column;
    gap: clamp(6px, 0.8vw, 8px);
    padding: clamp(10px, 1.5vw, 14px);
    background: var(--bg-color);
    border-radius: 12px;
    border: 1px solid transparent;
    transition: all 0.3s ease;
    width: 100%;
    box-sizing: border-box;
    min-width: 0;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.contact-info-item:hover {
    background: var(--card-bg);
    border-color: var(--primary-color);
    transform: translateX(5px);
}

@media (max-width: 768px) {
    .contact-info-item:hover {
        transform: none;
    }
}

.contact-info-title {
    font-size: clamp(12px, 1.4vw, 14px);
    font-weight: 600;
    color: var(--primary-color);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.contact-info-value {
    font-size: clamp(14px, 1.8vw, 17px);
    color: var(--text-color);
    padding: clamp(8px, 1.2vw, 12px);
    background: transparent;
    border: none;
    border-radius: 8px;
    user-select: text;
    cursor: text;
    transition: all 0.2s ease;
    font-weight: 500;
    word-wrap: break-word;
    overflow-wrap: break-word;
    line-height: 1.5;
}

.contact-info-value:hover {
    color: var(--accent-color);
}

/* Harita Kutusu */
.contact-map-box {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: clamp(20px, 3vw, 30px);
    min-height: 500px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    width: 100%;
}

.contact-map-box:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}

.contact-map {
    width: 100%;
    height: 500px;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.2);
    background: var(--bg-color);
}

.contact-map iframe {
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 16px;
    display: block;
}

.contact-map-address {
    padding: clamp(15px, 2vw, 20px);
    text-align: center;
}

.contact-map-address p {
    font-size: clamp(16px, 2vw, 18px);
    color: var(--text-color);
    margin-bottom: clamp(15px, 2vw, 20px);
}

.contact-map-address a {
    display: inline-block;
    padding: clamp(10px, 1.5vw, 15px) clamp(20px, 3vw, 30px);
    background: var(--primary-color);
    color: white;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 600;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.contact-map-address a:hover {
    background: var(--accent-color);
    transform: translateY(-2px);
}

/* Sosyal Medya */
.contact-social-media {
    width: 100%;
    margin-bottom: 0;
}

.social-media-grid {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: clamp(20px, 2.5vw, 25px);
    max-width: 100%;
}

.social-media-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(10px, 1.5vw, 14px);
    padding: clamp(20px, 3vw, 28px);
    background: var(--card-bg);
    border: 2px solid var(--border-color);
    border-radius: 16px;
    text-decoration: none;
    color: var(--text-color);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    min-width: 120px;
    flex: 0 0 auto;
}

.social-media-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transition: left 0.5s ease;
}

.social-media-item:hover::before {
    left: 100%;
}

.social-media-item:hover {
    border-color: var(--primary-color);
    background: var(--bg-color);
    transform: translateY(-8px) scale(1.05);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
}

/* Platform-specific colors */
.social-media-item[data-platform="youtube"]:hover {
    border-color: #FF0000;
    background: rgba(255, 0, 0, 0.1);
}

.social-media-item[data-platform="instagram"]:hover {
    border-color: #E4405F;
    background: rgba(228, 64, 95, 0.1);
}

.social-media-item[data-platform="twitter"]:hover {
    border-color: #1DA1F2;
    background: rgba(29, 161, 242, 0.1);
}

.social-media-item[data-platform="facebook"]:hover {
    border-color: #1877F2;
    background: rgba(24, 119, 242, 0.1);
}

.social-media-icon {
    width: clamp(40px, 5vw, 56px);
    height: clamp(40px, 5vw, 56px);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
}

.social-media-icon svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
    transition: transform 0.3s ease;
}

.social-media-item:hover .social-media-icon svg {
    transform: scale(1.2) rotate(5deg);
}

.social-media-name {
    font-size: clamp(14px, 1.8vw, 16px);
    font-weight: 600;
    text-align: center;
    transition: color 0.3s ease;
}

.social-media-item[data-platform="youtube"]:hover .social-media-name {
    color: #FF0000;
}

.social-media-item[data-platform="instagram"]:hover .social-media-name {
    color: #E4405F;
}

.social-media-item[data-platform="twitter"]:hover .social-media-name {
    color: #1DA1F2;
}

.social-media-item[data-platform="facebook"]:hover .social-media-name {
    color: #1877F2;
}

/* No Data / Error Messages */
.no-data,
.error-message {
    padding: clamp(20px, 3vw, 30px);
    text-align: center;
    color: var(--text-color);
    opacity: 0.7;
    font-size: clamp(14px, 1.8vw, 16px);
}

.error-message {
    color: #e74c3c;
}

/* Skeleton Loading */
.skeleton {
    background: linear-gradient(90deg, 
        var(--card-bg) 0%, 
        rgba(255, 255, 255, 0.05) 50%, 
        var(--card-bg) 100%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s ease-in-out infinite;
    border-radius: 12px;
}

.skeleton-line {
    height: 20px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    margin-bottom: 12px;
}

@keyframes skeleton-loading {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

.app-shell {
    width: 100%;
    max-width: min(480px, calc(100vw - clamp(24px, 4vw, 32px))); /* Viewport'u aşmaması için - padding'i hesaba kat */
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    overflow: visible !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    margin: 0 auto;
    padding: 0;
}

.login-wrapper {
    position: relative;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: visible !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
}

.app-title {
    font-family: "Bebas Neue", system-ui, sans-serif;
    font-size: clamp(28px, 4.5vw, 48px);
    letter-spacing: clamp(0.04em, 0.06vw, 0.06em);
    text-transform: uppercase;
    color: var(--text-color);
    text-align: center;
    position: absolute;
    top: clamp(-28px, -4vw, -30px);
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    z-index: 3;
    pointer-events: none;
    text-shadow: 
        1px 1px 0 rgba(255, 255, 255, 0.1),
        2px 2px 4px rgba(0, 0, 0, 0.4),
        3px 3px 6px rgba(0, 0, 0, 0.3),
        0 0 20px rgba(255, 255, 255, 0.05),
        -1px -1px 0 rgba(0, 0, 0, 0.2);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
    overflow: visible !important;
    clip-path: none !important;
}

.app-title::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 130px);
    height: calc(100% + 8px);
    border-radius: 13.5px;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    z-index: -1;
    pointer-events: none;
    overflow: visible !important;
    clip-path: none !important;
}

body[data-theme="light"] .app-title {
    color: #ffffff;
    text-shadow: 
        1px 1px 0 rgba(0, 0, 0, 0.15),
        2px 2px 4px rgba(0, 0, 0, 0.2),
        3px 3px 6px rgba(0, 0, 0, 0.15),
        0 0 20px rgba(0, 0, 0, 0.1);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.25));
}

body[data-theme="light"] .app-title::before {
    background: rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.12);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.brand-side {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.brand-name {
    font-family: "Bebas Neue", system-ui, sans-serif;
    font-size: clamp(40px, 5vw, 54px);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-color);
}

.brand-tagline {
    font-size: 15px;
    max-width: 520px;
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.brand-tagline-dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: #22c55e;
    box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.18);
}

.brand-pill-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}

.brand-pill {
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 6px 10px;
    border-radius: 999px;
    background: var(--accent-color-soft);
    color: var(--accent-color);
    border: 1px solid rgba(148, 163, 184, 0.4);
}

.brand-device-row {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 14px;
    padding: 16px 24px 12px;
}

.brand-device-row::before {
    content: "";
    position: absolute;
    left: 24px;
    right: 24px;
    top: 30px;
    border-top: 1px solid rgba(148, 163, 184, 0.5);
    opacity: 0.7;
    pointer-events: none;
}

.brand-device-row::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 34px;
    width: 46px;
    height: 22px;
    border-bottom: 1px solid rgba(56, 189, 248, 0.7);
    border-left: 1px solid rgba(56, 189, 248, 0.35);
    border-right: 1px solid rgba(56, 189, 248, 0.35);
    border-radius: 0 0 26px 26px;
    opacity: 0.75;
    pointer-events: none;
}

.device-chip {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.65);
    border: 1px solid rgba(148, 163, 184, 0.4);
}

body[data-theme="light"] .device-chip {
    background: rgba(248, 250, 252, 0.85);
    box-shadow: 0 8px 18px rgba(148, 163, 184, 0.45);
}

.device-icon {
    position: relative;
    display: inline-block;
    width: 20px;
    height: 16px;
}

.device-icon::before,
.device-icon::after {
    content: "";
    position: absolute;
    border-radius: 3px;
}

.device-icon-desktop::before {
    inset: 0;
    border-radius: 3px;
    border: 2px solid rgba(148, 163, 184, 0.95);
}

.device-icon-desktop::after {
    left: 4px;
    right: 4px;
    bottom: -5px;
    height: 3px;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.9);
}

.device-icon-tablet {
    width: 22px;
    height: 16px;
}

.device-icon-tablet::before {
    inset: 0;
    border-radius: 4px;
    border: 2px solid rgba(96, 165, 250, 0.98);
}

.device-icon-tablet::after {
    width: 3px;
    height: 3px;
    border-radius: 999px;
    background: rgba(96, 165, 250, 0.95);
    bottom: 1px;
    left: 50%;
    transform: translateX(-50%);
}

.device-icon-phone {
    width: 14px;
    height: 20px;
}

.device-icon-phone::before {
    inset: 0 3px;
    border-radius: 5px;
    border: 2px solid rgba(248, 250, 252, 0.98);
}

.device-icon-phone::after {
    width: 3px;
    height: 3px;
    border-radius: 999px;
    background: rgba(248, 250, 252, 0.95);
    bottom: 1px;
    left: 50%;
    transform: translateX(-50%);
}

.theme-indicator {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 10px;
}

.theme-dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: linear-gradient(135deg, #fbbf24, #f97316);
    box-shadow: 0 0 0 3px rgba(251,191,36,0.2);
}

.login-card {
    width: 100%;
    max-width: min(420px, calc(100vw - clamp(24px, 4vw, 32px))); /* Viewport'u aşmaması için */
    margin: 0 auto;
    margin-left: auto;
    margin-right: auto;
    background: rgba(17, 24, 39, 0.65);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-radius: clamp(18px, 3vw, 22px);
    padding: clamp(20px, 3.5vw, 26px) clamp(18px, 3vw, 24px) clamp(18px, 2.8vw, 22px);
    padding-top: clamp(58px, 8vw, 66px);
    box-shadow: 0 20px 60px rgba(15, 23, 42, 0.6),
                0 0 0 1px rgba(148, 163, 184, 0.2),
                0 0 40px rgba(59, 130, 246, 0.15);
    border: 1px solid rgba(148, 163, 184, 0.25);
    display: flex;
    flex-direction: column;
    gap: clamp(14px, 2.2vw, 18px);
    position: relative;
    z-index: 2;
    overflow: visible !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    margin-top: 0;
    box-sizing: border-box;
    /* VARKS title'ın kesilmemesi için */
    clip-path: none !important;
}

.login-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(148, 163, 184, 0.15);
    z-index: -1;
    pointer-events: none;
}

body[data-theme="light"] .login-card {
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(30px) saturate(180%);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
    box-shadow: 0 20px 60px rgba(15, 23, 42, 0.15),
                0 0 0 1px rgba(255, 255, 255, 0.2),
                0 0 40px rgba(59, 130, 246, 0.05);
    border-color: rgba(255, 255, 255, 0.3);
}

body[data-theme="light"] .login-card::before {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.15);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* Bu media query yukarıdaki kapsamlı responsive bölümde zaten var */

.login-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: clamp(6px, 1vw, 8px);
    margin-top: clamp(6px, 1vw, 8px);
}

.login-title {
    font-size: clamp(16px, 2.2vw, 18px);
    font-weight: 600;
    color: var(--text-color);
}

.login-subtitle {
    font-size: 13px;
    color: var(--text-muted);
}

.theme-toggle-btn {
    border: 0;
    background: rgba(148, 163, 184, 0.16);
    color: var(--text-color);
    padding: clamp(5px, 0.8vw, 6px) clamp(9px, 1.4vw, 11px);
    border-radius: 999px;
    font-size: clamp(10px, 1.4vw, 11px);
    font-weight: 500;
    letter-spacing: clamp(0.05em, 0.06vw, 0.06em);
    text-transform: uppercase;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: clamp(4px, 0.8vw, 6px);
    transition: background 0.2s ease, transform 0.1s ease;
    min-height: clamp(28px, 4vw, 32px);
}

.theme-toggle-btn:hover {
    background: rgba(148, 163, 184, 0.28);
    transform: translateY(-1px);
}

.theme-toggle-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: linear-gradient(135deg, #fbbf24, #f97316);
}

body[data-theme="dark"] .theme-toggle-dot {
    background: linear-gradient(135deg, #22c55e, #16a34a);
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: clamp(4px, 0.8vw, 6px);
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.form-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-color);
}

.form-description {
    font-size: 11px;
    color: var(--text-muted);
}

.input-field {
    width: 100%;
    max-width: 100%;
    padding: clamp(8px, 1.3vw, 10px) clamp(9px, 1.4vw, 11px);
    border-radius: clamp(8px, 1.3vw, 10px);
    border: 1px solid var(--border-color);
    background: var(--input-bg);
    color: var(--text-color);
    font-size: clamp(14px, 2vw, 16px);
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    box-sizing: border-box;
    user-select: text;
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
}

/* Tüm input, textarea ve select elementleri seçilebilir olmalı */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="search"],
textarea,
select {
    user-select: text !important;
    -webkit-user-select: text !important;
    -moz-user-select: text !important;
    -ms-user-select: text !important;
}

.input-field::placeholder {
    color: rgba(148, 163, 184, 0.95);
}

.input-field:focus {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 1px rgba(59,130,246,0.5);
}

.password-input-wrapper {
    position: relative;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.password-input-wrapper .input-field {
    padding-right: clamp(36px, 5.5vw, 42px);
}

.password-toggle-btn {
    position: absolute;
    right: clamp(6px, 1vw, 8px);
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    padding: clamp(5px, 0.8vw, 6px);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    transition: color 0.2s ease;
    z-index: 1;
    min-width: clamp(32px, 4.5vw, 40px);
    min-height: clamp(32px, 4.5vw, 40px);
}

.password-toggle-btn:hover {
    color: var(--text-color);
}

.eye-icon {
    width: 20px;
    height: 20px;
    display: inline-block;
    position: relative;
}

.eye-icon-closed::before {
    content: "";
    position: absolute;
    width: 18px;
    height: 18px;
    top: 1px;
    left: 1px;
    border: 2px solid currentColor;
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    border-top: 2px solid transparent;
    border-right: 2px solid transparent;
}

.eye-icon-closed::after {
    content: "";
    position: absolute;
    width: 8px;
    height: 8px;
    top: 6px;
    left: 6px;
    background: currentColor;
    border-radius: 50%;
}

.eye-icon-open::before {
    content: "";
    position: absolute;
    width: 18px;
    height: 10px;
    top: 5px;
    left: 1px;
    border: 2px solid currentColor;
    border-bottom: none;
    border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}

.eye-icon-open::after {
    content: "";
    position: absolute;
    width: 6px;
    height: 6px;
    top: 7px;
    left: 7px;
    background: currentColor;
    border-radius: 50%;
}

/* Form stilleri */
form {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.input-row {
    display: flex;
    flex-direction: column;
    gap: clamp(10px, 1.5vw, 12px);
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.options-row {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 18px;
    margin-top: 4px;
    flex-wrap: wrap;
}

.checkbox-field {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-muted);
    cursor: pointer;
    user-select: none;
}

.checkbox-field input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.checkbox-custom {
    width: 15px;
    height: 15px;
    border-radius: 4px;
    border: 1px solid rgba(148, 163, 184, 0.7);
    background: rgba(15,23,42,0.2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}

body[data-theme="light"] .checkbox-custom {
    background: #ffffff;
    border-color: rgba(148,163,184,0.9);
}

.checkbox-field input[type="checkbox"]:checked + .checkbox-custom {
    background: var(--accent-color);
    border-color: var(--accent-color);
}

.checkbox-field input[type="checkbox"]:checked + .checkbox-custom::after {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background: #f9fafb;
}

.checkbox-label {
    font-size: 12px;
}

.buttons-grid {
    display: flex;
    flex-direction: column;
    gap: clamp(8px, 1.2vw, 10px);
    margin-top: clamp(4px, 0.8vw, 6px);
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.buttons-row-main {
    display: flex;
    justify-content: center;
}

.btn-full {
    width: 100%;
}

.buttons-row-secondary {
    display: flex;
    justify-content: center;
    gap: clamp(6px, 1vw, 8px);
}

.buttons-row-secondary .btn {
    flex: 1 1 50%;
    border-radius: 0;
}

.buttons-row-secondary .btn:first-child {
    border-top-left-radius: 999px;
    border-bottom-left-radius: 999px;
}

.buttons-row-secondary .btn:last-child {
    border-top-right-radius: 999px;
    border-bottom-right-radius: 999px;
}

/* Butonlar için responsive düzenlemeler zaten clamp() ile yapıldı */

.btn {
    border-radius: 999px;
    border: 0;
    padding: clamp(6px, 0.9vw, 8px) clamp(12px, 1.8vw, 14px);
    font-size: clamp(12px, 1.8vw, 13px);
    font-weight: 500;
    min-height: auto;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: clamp(4px, 0.8vw, 6px);
    transition: background 0.15s ease, color 0.15s ease, transform 0.08s ease, box-shadow 0.15s ease;
    white-space: nowrap;
    max-width: 100%;
    box-sizing: border-box;
    min-height: auto;
}

.btn-primary {
    background: transparent;
    color: #22c55e;
    border: 1px solid rgba(34, 197, 94, 0.3);
    box-shadow: none;
}

.btn-primary:hover {
    background: rgba(34, 197, 94, 0.1);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.2);
}

.btn-secondary {
    background: transparent;
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-1px);
}

.btn-danger {
    background: #ef4444;
    color: #ffffff;
    border: 1px solid #ef4444;
    box-shadow: none;
}

.btn-danger:hover {
    background: #dc2626;
    border-color: #dc2626;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

/* Genel buton tıklama efekti */
.btn-primary:active,
.btn-secondary:active,
.btn:active:not(.btn-icon) {
    transform: scale(0.95);
    transition: transform 0.1s ease;
}

body[data-theme="light"] .btn-secondary {
    color: #111827;
    border-color: rgba(0, 0, 0, 0.2);
}

body[data-theme="light"] .btn-secondary:hover {
    background: rgba(0, 0, 0, 0.05);
}

.btn-ghost {
    background: transparent;
    color: var(--text-muted);
    border: 1px dashed rgba(148, 163, 184, 0.7);
}

.btn-ghost:hover {
    background: rgba(148, 163, 184, 0.16);
    color: var(--text-color);
}

.btn-accent-outline {
    background: transparent;
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.btn-accent-outline:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-1px);
}

body[data-theme="light"] .btn-accent-outline {
    color: #111827;
    border-color: rgba(0, 0, 0, 0.2);
}

body[data-theme="light"] .btn-accent-outline:hover {
    background: rgba(0, 0, 0, 0.05);
}

.field-hint {
    font-size: 11px;
    color: var(--text-muted);
}

.footer-note {
    margin-top: 6px;
    font-size: 11px;
    color: var(--text-muted);
    text-align: right;
}

.pill-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(34,197,94,0.12);
    color: #22c55e;
}

.pill-dot {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: #22c55e;
}

/* Generic layout for placeholder pages */
.page-center {
    min-height: 100vh;
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 1; /* Dialog'un altında kalmalı */
    position: relative;
}

.placeholder-card {
    max-width: 100%;
    width: 100%;
    background: transparent;
    border-radius: 0;
    padding: clamp(16px, 3vw, 32px);
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Lisans Butonları Container */
.license-buttons-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(clamp(140px, 18vw, 200px), 1fr));
    gap: clamp(16px, 2.5vw, 24px);
    width: 100%;
    margin-top: 0;
}

/* Lisans Detay Dialog - Tam Sayfa (Single Mode) */
.license-detail-dialog-single {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 10000 !important;
    isolation: isolate;
    display: flex !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    background: rgba(0, 0, 0, 0.15) !important;
    backdrop-filter: blur(3px) saturate(110%) !important;
    -webkit-backdrop-filter: blur(3px) saturate(110%) !important;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    width: 100vw !important;
    height: 100vh !important;
    min-width: 100vw !important;
    min-height: 100vh !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    inset: 0 !important;
}

/* Lisans Detay Dialog - Sol Panel (Double Mode) */
.license-detail-dialog-left {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 50% !important;
    bottom: 0 !important;
    z-index: 10000 !important;
    isolation: isolate;
    display: flex !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    background: rgba(0, 0, 0, 0.15) !important;
    backdrop-filter: blur(3px) saturate(110%) !important;
    -webkit-backdrop-filter: blur(3px) saturate(110%) !important;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    width: 50vw !important;
    height: 100vh !important;
    min-width: 50vw !important;
    min-height: 100vh !important;
    max-width: 50vw !important;
    max-height: 100vh !important;
}

/* Lisans Detay Dialog - Sağ Panel (Double Mode) */
.license-detail-dialog-right {
    position: fixed !important;
    top: 0 !important;
    left: 50% !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 10000 !important;
    isolation: isolate;
    display: flex !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    background: rgba(0, 0, 0, 0.15) !important;
    backdrop-filter: blur(3px) saturate(110%) !important;
    -webkit-backdrop-filter: blur(3px) saturate(110%) !important;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    width: 50vw !important;
    height: 100vh !important;
    min-width: 50vw !important;
    min-height: 100vh !important;
    max-width: 50vw !important;
    max-height: 100vh !important;
}

/* Genel Dialog Show State */
.license-detail-dialog-single.show,
.license-detail-dialog-left.show,
.license-detail-dialog-right.show {
    opacity: 1 !important;
    pointer-events: auto !important;
    background: rgba(0, 0, 0, 0.15) !important;
    backdrop-filter: blur(3px) saturate(110%) !important;
    -webkit-backdrop-filter: blur(3px) saturate(110%) !important;
}

.license-detail-dialog.show {
    opacity: 1 !important;
    pointer-events: auto !important;
    background: rgba(0, 0, 0, 0.15) !important;
    backdrop-filter: blur(3px) saturate(110%) !important;
    -webkit-backdrop-filter: blur(3px) saturate(110%) !important;
}

.license-detail-dialog-content {
    position: relative;
    background: var(--bg-color);
    width: 100%;
    height: 100%;
    min-height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    padding: 0;
    margin: 0;
    flex: 1;
}

/* Dialog Content Scrollbar Stilleri - Tema Uyumlu */
.license-detail-dialog-content::-webkit-scrollbar {
    width: 8px;
}

.license-detail-dialog-content::-webkit-scrollbar-track {
    background: transparent;
}

.license-detail-dialog-content::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 4px;
    transition: background 0.2s ease;
}

.license-detail-dialog-content::-webkit-scrollbar-thumb:hover {
    background: var(--border-color);
}

/* Firefox için scrollbar stilleri */
.license-detail-dialog-content {
    scrollbar-width: thin;
    scrollbar-color: var(--border-color) transparent;
}

.license-detail-dialog-content:hover {
    scrollbar-color: var(--border-color) transparent;
}

/* Lisans Detay Dialog Header */
.license-detail-dialog-header {
    position: sticky;
    top: 0;
    z-index: 10001;
    background: var(--bg-elevated);
    border-bottom: 1px solid var(--border-color);
    padding: clamp(12px, 2vw, 20px) clamp(16px, 3vw, 32px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(12px, 2vw, 20px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    margin: 0;
    width: 100%;
    flex-shrink: 0;
}

/* Buton Adı (Masaüstü/Yatay Mod) */
.license-detail-dialog-title {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-size: clamp(14px, 2vw, 18px);
    font-weight: 600;
    color: var(--text-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: calc(100% - 200px);
    text-align: center;
    pointer-events: none;
    z-index: 1;
}

/* Buton Adı Container (Telefon Mod) */
.license-detail-dialog-title-mobile {
    display: none;
    padding: clamp(8px, 1.5vw, 12px) clamp(16px, 3vw, 24px);
    background: transparent;
    border-bottom: 1px solid var(--border-color);
    font-size: clamp(14px, 2vw, 16px);
    font-weight: 600;
    color: var(--text-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
    width: 100%;
    flex-shrink: 0;
}

/* Telefon Mod (Dikey ve Yatay) - Buton Adını Alt Container'da Göster */
/* Hem genişlik hem yükseklik kontrolü - telefon çözünürlüklerinde tutarlı görünüm için */
@media (max-width: 768px), (max-height: 600px) {
    .license-detail-dialog-title {
        display: none !important;
    }
    
    .license-detail-dialog-title-mobile {
        display: block !important;
    }
}

/* Masaüstü ve geniş ekranlar - Title header içinde */
@media (min-width: 769px) and (min-height: 601px) {
    .license-detail-dialog-title {
        display: block;
    }
    
    .license-detail-dialog-title-mobile {
        display: none;
    }
}

.license-detail-dialog-header-left,
.license-detail-dialog-header-right {
    display: flex;
    align-items: center;
    gap: clamp(8px, 1.5vw, 12px);
}

/* Header Icon Butonları */
.license-detail-dialog-header .btn-icon {
    width: clamp(36px, 5vw, 44px);
    height: clamp(36px, 5vw, 44px);
    min-width: clamp(36px, 5vw, 44px);
    min-height: clamp(36px, 5vw, 44px);
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 2px;
    position: relative;
}

.license-detail-dialog-header .btn-icon svg {
    width: 18px;
    height: 18px;
}

.license-detail-dialog-header .store-icon-text,
.license-detail-dialog-header .date-icon-text {
    font-size: 9px;
    margin-top: -2px;
    line-height: 1.2;
    white-space: pre-line;
    text-align: center;
}

.license-detail-dialog-close {
    width: clamp(36px, 5vw, 44px);
    height: clamp(36px, 5vw, 44px);
    min-width: clamp(36px, 5vw, 44px);
    min-height: clamp(36px, 5vw, 44px);
    border-radius: 50%;
    background: var(--bg-elevated);
    border: 2px solid var(--border-color);
    color: var(--text-color);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    box-shadow: var(--shadow-soft);
    padding: 0;
    position: relative;
    flex-shrink: 0;
}

.license-detail-dialog-close:hover {
    background: var(--accent-color-soft);
    border-color: var(--accent-color);
    transform: scale(1.1);
}

.license-detail-dialog-close:active {
    transform: scale(0.95);
    transition: transform 0.1s ease;
}

.license-detail-dialog-close svg {
    width: clamp(18px, 3vw, 24px);
    height: clamp(18px, 3vw, 24px);
}

.license-detail-dialog-body {
    width: 100%;
    max-width: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: clamp(16px, 3vw, 24px);
    padding: clamp(16px, 3vw, 32px);
    overflow: visible;
    position: relative;
    min-height: 0;
}

/* Lisans Detay Dialog Spinner */
.license-detail-spinner-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    gap: 20px;
    z-index: 1;
}

.license-detail-spinner-container .spinner {
    width: clamp(40px, 6vw, 50px);
    height: clamp(40px, 6vw, 50px);
    border: 4px solid transparent;
    border-top-color: var(--accent-color);
    border-right-color: var(--accent-color);
    border-radius: 50%;
    animation: spinner-rotate 0.8s linear infinite;
}

.license-detail-spinner-container .spinner-text {
    font-size: clamp(14px, 2vw, 18px);
    font-weight: 500;
    color: var(--text-color);
    font-family: "Bebas Neue", system-ui, sans-serif;
    letter-spacing: 0.5px;
    text-align: center;
}

/* Tema Iconları Görünürlüğü */
.license-detail-dialog-header .theme-icon-sun {
    display: none;
}

.license-detail-dialog-header .theme-icon-moon {
    display: block;
}

body[data-theme="light"] .license-detail-dialog-header .theme-icon-sun {
    display: block;
}

body[data-theme="light"] .license-detail-dialog-header .theme-icon-moon {
    display: none;
}

/* Responsive - Telefon ve Tablet */
@media (max-width: 768px) {
    .license-detail-dialog-content {
        padding: 0 !important;
        margin: 0 !important;
    }
    
    .license-detail-dialog-header {
        padding: clamp(8px, 1.2vw, 12px) clamp(12px, 2vw, 20px) !important;
        gap: clamp(6px, 1vw, 10px);
        margin: 0 !important;
        top: 0 !important;
    }
    
    .license-detail-dialog-header-left,
    .license-detail-dialog-header-right {
        gap: clamp(6px, 1vw, 10px);
    }
    
    .license-detail-dialog-header .btn-icon,
    .license-detail-dialog-close {
        width: clamp(32px, 4.5vw, 40px);
        height: clamp(32px, 4.5vw, 40px);
        min-width: clamp(32px, 4.5vw, 40px);
        min-height: clamp(32px, 4.5vw, 40px);
    }
    
    .license-detail-dialog-header .btn-icon svg {
        width: 16px;
        height: 16px;
    }
    
    .license-detail-dialog-body {
        padding: clamp(12px, 2vw, 20px);
        margin: 0;
    }
}

/* Telefon Dikey Mod + Karşılaştırma Modu - Tema ve İndirme Iconlarını Gizle */
@media (max-width: 768px) and (orientation: portrait) {
    body.double-mode .license-detail-dialog-header .license-detail-theme-btn,
    .dashboard-page.double-mode .license-detail-dialog-header .license-detail-theme-btn,
    body.double-mode .license-detail-dialog-header .license-detail-download-btn,
    .dashboard-page.double-mode .license-detail-dialog-header .license-detail-download-btn {
        display: none !important;
    }
}

@media (max-width: 480px) {
    .license-detail-dialog-content {
        padding: 0 !important;
        margin: 0 !important;
    }
    
    .license-detail-dialog-header {
        padding: clamp(8px, 1.2vw, 12px) clamp(10px, 1.8vw, 18px) !important;
        gap: clamp(5px, 0.9vw, 9px);
        margin: 0 !important;
        top: 0 !important;
    }
    
    .license-detail-dialog-header .btn-icon,
    .license-detail-dialog-close {
        width: clamp(30px, 4vw, 38px);
        height: clamp(30px, 4vw, 38px);
        min-width: clamp(30px, 4vw, 38px);
        min-height: clamp(30px, 4vw, 38px);
    }
    
    .license-detail-dialog-header .btn-icon svg,
    .license-detail-dialog-close svg {
        width: 15px;
        height: 15px;
    }
}

/* Yatay Mod - Telefon ve Tablet */
@media (orientation: landscape) and (max-height: 600px) {
    .license-detail-dialog-header {
        padding: clamp(6px, 1vw, 10px) clamp(10px, 1.5vw, 16px);
        gap: clamp(4px, 0.8vw, 8px);
    }
    
    .license-detail-dialog-header .btn-icon,
    .license-detail-dialog-close {
        width: clamp(28px, 4vw, 36px);
        height: clamp(28px, 4vw, 36px);
        min-width: clamp(28px, 4vw, 36px);
        min-height: clamp(28px, 4vw, 36px);
    }
    
    .license-detail-dialog-header .btn-icon svg,
    .license-detail-dialog-close svg {
        width: clamp(14px, 2vw, 18px);
        height: clamp(14px, 2vw, 18px);
    }
}

/* Lisans Butonu - Büyük Kare */
.license-button {
    aspect-ratio: 1;
    width: 100%;
    min-height: clamp(140px, 18vw, 200px);
    background: var(--bg-elevated);
    border: 2px solid var(--border-color);
    border-radius: 16px;
    color: var(--text-color);
    font-size: clamp(14px, 2vw, 18px);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: clamp(12px, 2vw, 20px);
    word-wrap: break-word;
    overflow: hidden;
    position: relative;
    line-height: 1.3;
    box-shadow: var(--shadow-soft);
    opacity: 0;
    transform: scale(0.9) translateY(20px);
    animation: licenseButtonFadeIn 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Buton animasyonu - sıralı görünüm */
.license-button:nth-child(1) {
    animation-delay: 0.1s;
}

.license-button:nth-child(2) {
    animation-delay: 0.15s;
}

.license-button:nth-child(3) {
    animation-delay: 0.2s;
}

.license-button:nth-child(4) {
    animation-delay: 0.25s;
}

.license-button:nth-child(5) {
    animation-delay: 0.3s;
}

.license-button:nth-child(6) {
    animation-delay: 0.35s;
}

.license-button:nth-child(7) {
    animation-delay: 0.4s;
}

.license-button:nth-child(8) {
    animation-delay: 0.45s;
}

.license-button:nth-child(9) {
    animation-delay: 0.5s;
}

.license-button:nth-child(10) {
    animation-delay: 0.55s;
}

.license-button:nth-child(n+11) {
    animation-delay: 0.6s;
}

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

.license-button:hover {
    background: var(--accent-color-soft);
    border-color: var(--accent-color);
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(59, 130, 246, 0.2);
}

.license-button:active {
    transform: scale(0.95) translateY(-2px);
    transition: transform 0.1s ease;
}

/* Responsive - Telefon ve Tablet (Dikey ve Yatay) */
/* %40 küçültme: Mevcut boyutun %60'ı kalacak */
@media (max-width: 768px) {
    .license-buttons-container {
        grid-template-columns: repeat(auto-fill, minmax(clamp(84px, 14vw, 120px), 1fr));
        gap: clamp(9px, 1.5vw, 14px);
    }
    
    .license-button {
        min-height: clamp(84px, 14vw, 120px);
        font-size: clamp(9px, 1.5vw, 11px);
        padding: clamp(7px, 1.4vw, 11px);
    }
}

@media (max-width: 480px) {
    .license-buttons-container {
        grid-template-columns: repeat(auto-fill, minmax(clamp(70px, 15vw, 100px), 1fr));
        gap: clamp(8px, 1.4vw, 12px);
    }
    
    .license-button {
        min-height: clamp(70px, 15vw, 100px);
        font-size: clamp(8px, 1.6vw, 10px);
        padding: clamp(6px, 1.4vw, 10px);
    }
}

/* Yatay Mod - Telefon (max-height: 600px) */
@media (max-width: 768px) and (orientation: landscape), (max-height: 600px) {
    .license-buttons-container {
        grid-template-columns: repeat(auto-fill, minmax(clamp(84px, 14vw, 120px), 1fr));
        gap: clamp(9px, 1.5vw, 14px);
    }
    
    .license-button {
        min-height: clamp(84px, 14vw, 120px);
        font-size: clamp(9px, 1.5vw, 11px);
        padding: clamp(7px, 1.4vw, 11px);
    }
}

@media (max-width: 480px) and (orientation: landscape), (max-height: 600px) and (max-width: 480px) {
    .license-buttons-container {
        grid-template-columns: repeat(auto-fill, minmax(clamp(70px, 15vw, 100px), 1fr));
        gap: clamp(8px, 1.4vw, 12px);
    }
    
    .license-button {
        min-height: clamp(70px, 15vw, 100px);
        font-size: clamp(8px, 1.6vw, 10px);
        padding: clamp(6px, 1.4vw, 10px);
    }
}

.placeholder-card {
    box-shadow: none;
    border: none;
    animation: fadeInScale 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.3s forwards;
    opacity: 1 !important; /* Her zaman görünür */
    transform: scale(1) translateY(0) !important; /* Her zaman normal pozisyon */
    visibility: visible !important;
    display: block !important;
}

/* Animasyon çalıştığında başlangıç durumu */
@supports (animation: fadeInScale) {
    .placeholder-card {
        opacity: 0;
        transform: scale(0.95) translateY(20px);
    }
}

.placeholder-title {
    font-family: "Bebas Neue", system-ui, sans-serif;
    font-size: 32px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 4px;
    animation: fadeInUp 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.4s forwards;
    opacity: 1; /* Fallback */
    transform: translateY(0); /* Fallback */
}

@supports (animation: fadeInUp) {
    .placeholder-title {
        opacity: 0;
        transform: translateY(15px);
    }
}

.placeholder-text {
    font-size: 14px;
    color: var(--text-muted);
    margin-bottom: 18px;
    animation: fadeInUp 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.5s forwards;
    opacity: 1; /* Fallback */
    transform: translateY(0); /* Fallback */
}

@supports (animation: fadeInUp) {
    .placeholder-text {
        opacity: 0;
        transform: translateY(15px);
    }
}

.placeholder-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    animation: fadeInUp 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.6s forwards;
    opacity: 1; /* Fallback */
    transform: translateY(0); /* Fallback */
}

@supports (animation: fadeInUp) {
    .placeholder-actions {
        opacity: 0;
        transform: translateY(15px);
    }
}

/* Şifremi Unuttum / Kayıt Oluştur sayfaları için container animasyonları */
.password-reset-container,
.registration-container {
    position: relative;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
}

.reset-container,
.registration-container-inner {
    width: 100%;
    opacity: 0;
    transform: translateX(100%);
    transition: opacity 0.4s ease, transform 0.4s ease;
    pointer-events: none;
    position: absolute;
    top: 0;
    left: 0;
}

.reset-container.active,
.registration-container-inner.active {
    opacity: 1;
    transform: translateX(0);
    pointer-events: all;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
}

.reset-container.slide-left,
.registration-container-inner.slide-left {
    transform: translateX(-100%);
    opacity: 0;
}

.reset-container.slide-right,
.registration-container-inner.slide-right {
    transform: translateX(100%);
    opacity: 0;
}

/* Token timer */
.token-timer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: clamp(6px, 0.8vw, 8px) clamp(10px, 1.2vw, 12px);
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.3);
    border-radius: 10px;
    margin-top: clamp(6px, 0.8vw, 10px);
    margin-bottom: clamp(6px, 0.8vw, 10px);
    width: 100%;
    box-sizing: border-box;
}

.timer-label {
    font-size: 13px;
    color: var(--text-muted);
}

.timer-value {
    font-family: "Bebas Neue", system-ui, sans-serif;
    font-size: 20px;
    font-weight: bold;
    color: #22c55e;
    letter-spacing: 2px;
}

/* ============================================
   Custom Alert/Dialog Styles
   ============================================ */

.custom-alert-container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10002 !important; /* Date picker dialog'dan (10001) daha yüksek */
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    pointer-events: none;
}

.custom-alert-container.custom-alert-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
}

.custom-alert-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
}

.custom-alert-modal {
    position: relative;
    background: var(--bg-elevated);
    border-radius: 16px;
    box-shadow: var(--shadow-soft);
    width: 90%;
    max-width: 420px;
    max-height: 90vh;
    overflow: hidden;
    transform: scale(0.95) translateY(10px);
    transition: transform 0.2s ease;
    border: 1px solid var(--border-color);
    z-index: 10002 !important; /* Date picker dialog'dan (10001) daha yüksek */
}

.custom-alert-container.custom-alert-visible .custom-alert-modal {
    transform: scale(1) translateY(0);
}

.custom-alert-header {
    padding: 20px 24px 16px;
    border-bottom: 1px solid var(--border-color);
}

.custom-alert-title {
    font-family: "Bebas Neue", system-ui, sans-serif;
    font-size: 24px;
    font-weight: bold;
    color: var(--text-color);
    margin: 0;
    letter-spacing: 0.5px;
}

.custom-alert-body {
    padding: 20px 24px;
}

.custom-alert-message {
    font-size: 15px;
    line-height: 1.6;
    color: var(--text-color);
    margin: 0;
    word-wrap: break-word;
}

.custom-alert-footer {
    padding: 16px 24px 20px;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    border-top: 1px solid var(--border-color);
}

.custom-alert-btn {
    padding: 10px 24px;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
    outline: none;
}

.custom-alert-btn:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

.custom-alert-btn-primary {
    background: var(--accent-color);
    color: white;
}

.custom-alert-btn-primary:hover {
    background: var(--accent-color);
    opacity: 0.9;
    transform: translateY(-1px);
}

.custom-alert-btn-primary:active {
    transform: translateY(0);
}

.custom-alert-btn-secondary {
    background: var(--bg-elevated);
    color: var(--text-color);
    border: 1px solid var(--border-color);
}

.custom-alert-btn-secondary:hover {
    background: var(--accent-color-soft);
    border-color: var(--accent-color);
    transform: translateY(-1px);
}

.custom-alert-btn-secondary:active {
    transform: translateY(0);
}

/* Alert tipi stilleri */
.custom-alert-info .custom-alert-title {
    color: var(--accent-color);
}

.custom-alert-error .custom-alert-title {
    color: var(--danger-color);
}

.custom-alert-success .custom-alert-title {
    color: #22c55e;
}

.custom-alert-warning .custom-alert-title {
    color: #f59e0b;
}

/* Responsive */
@media (max-width: 480px) {
    .custom-alert-modal {
        width: 95%;
        border-radius: 12px;
    }
    
    .custom-alert-header,
    .custom-alert-body,
    .custom-alert-footer {
        padding-left: 20px;
        padding-right: 20px;
    }
    
    .custom-alert-title {
        font-size: 20px;
    }
    
    .custom-alert-message {
        font-size: 14px;
    }
}

/* ============================================
   SPINNER (Yükleme Göstergesi)
   ============================================ */

.spinner-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99999 !important; /* Her zaman en üstte - dialogların üstünde */
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    pointer-events: none;
}

.spinner-overlay.spinner-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
}

.spinner-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

body[data-theme="dark"] .spinner-backdrop {
    background: rgba(0, 0, 0, 0.6);
}

body[data-theme="light"] .spinner-backdrop {
    background: rgba(255, 255, 255, 0.6);
}

.spinner-container {
    position: relative;
    z-index: 100000 !important; /* Spinner içeriği overlay'in üstünde */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.spinner {
    width: 50px;
    height: 50px;
    border: 4px solid transparent;
    border-top-color: var(--accent-color);
    border-right-color: var(--accent-color);
    border-radius: 50%;
    animation: spinner-rotate 0.8s linear infinite;
}

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

.spinner-text {
    font-size: 16px;
    font-weight: 500;
    color: var(--text-color);
    font-family: "Bebas Neue", system-ui, sans-serif;
    letter-spacing: 0.5px;
    text-align: center;
    margin: 0;
}

/* ============================================
   RESPONSIVE DESIGN - Tüm Cihazlar İçin
   ============================================ */

/* Mobile Portrait (320px - 480px) */
@media (max-width: 480px) and (orientation: portrait) {
    .spinner {
        width: 40px;
        height: 40px;
        border-width: 3px;
    }
    
    .spinner-text {
        font-size: 14px;
    }

    .page-root {
        padding: clamp(12px, 2vw, 16px) clamp(10px, 1.5vw, 12px);
    }

    .app-shell {
        max-width: min(420px, calc(100vw - clamp(20px, 3vw, 24px)));
    }

    .app-title {
        font-size: clamp(28px, 6vw, 42px);
        top: clamp(-26px, -4vw, -28px);
    }

    .app-title::before {
        width: calc(100% - clamp(80px, 20vw, 100px));
    }

    .login-card {
        padding: clamp(18px, 3vw, 24px) clamp(16px, 2.5vw, 20px) clamp(16px, 2.5vw, 20px);
        padding-top: clamp(54px, 7.5vw, 58px);
        gap: clamp(12px, 2vw, 16px);
        margin-top: clamp(20px, 3vw, 28px);
    }

    .form-group {
        gap: clamp(4px, 0.6vw, 6px);
    }

    .input-field {
        padding: clamp(8px, 1.2vw, 10px) clamp(9px, 1.3vw, 11px);
        font-size: clamp(14px, 2vw, 16px);
    }
}

/* Telefon ve Tablet - Beni Hatırla Gizle */
@media (max-width: 1024px) {
    .options-row {
        display: none !important;
    }
}

/* Küçük Telefon Yatay (max-width: 640px) */
@media (max-width: 640px) and (orientation: landscape) {
    html, body {
        overflow-y: hidden !important;
        max-height: 100vh;
        max-height: 100dvh;
    }

    .page-root {
        padding: clamp(12px, 2vw, 16px) clamp(4px, 0.8vw, 8px);
        max-width: 100vw;
        max-height: 100vh;
        max-height: 100dvh;
        overflow-x: hidden !important;
        overflow-y: visible !important;
        min-height: 100vh;
        min-height: 100dvh;
        align-items: center;
        justify-content: center;
        padding-top: clamp(40px, 6vw, 50px);
        padding-bottom: clamp(8px, 1.5vw, 12px);
    }

    .app-shell {
        max-width: min(100%, calc(100vw - clamp(8px, 1.5vw, 16px)));
        padding: 0;
        margin: 0;
        align-items: center;
        overflow: visible !important;
        overflow-y: visible !important;
    }

    .login-wrapper {
        overflow: visible !important;
        overflow-y: visible !important;
        padding-top: 0;
        margin-top: 0;
    }

    .login-card {
        padding: clamp(4px, 0.8vw, 8px) clamp(4px, 0.7vw, 7px);
        padding-top: clamp(42px, 6.5vw, 52px);
        padding-bottom: clamp(4px, 0.8vw, 8px);
        max-width: 100%;
        width: 100%;
        margin-top: 0;
        gap: clamp(3px, 0.5vw, 5px);
        overflow: visible !important;
        overflow-x: visible !important;
        overflow-y: visible !important;
        position: relative;
        max-height: calc(100vh - clamp(20px, 3.5vw, 28px));
        max-height: calc(100dvh - clamp(20px, 3.5vw, 28px));
    }

    .login-card-header {
        margin-top: clamp(2px, 0.4vw, 4px) !important;
    }

    .registration-container,
    .password-reset-container {
        overflow: hidden !important;
        max-height: 100%;
        width: 100%;
        box-sizing: border-box;
    }

    .registration-container-inner,
    .reset-container {
        gap: clamp(2px, 0.4vw, 4px);
        max-height: 100%;
        padding-bottom: clamp(2px, 0.4vw, 4px);
        overflow: hidden;
        width: 100%;
        box-sizing: border-box;
    }

    /* İlk container (Kod Gönder) için özel optimizasyon */
    .registration-container-inner.active:first-child,
    .reset-container.active:first-child {
        gap: clamp(3px, 0.5vw, 5px);
    }

    .registration-container-inner.active:first-child .input-row,
    .reset-container.active:first-child .input-row {
        gap: clamp(4px, 0.6vw, 6px);
    }

    .registration-container-inner.active:first-child .form-group,
    .reset-container.active:first-child .form-group {
        gap: clamp(1px, 0.2vw, 2px);
    }

    .registration-container-inner.active:first-child .buttons-grid,
    .reset-container.active:first-child .buttons-grid {
        gap: clamp(4px, 0.6vw, 6px);
        margin-top: clamp(2px, 0.3vw, 4px);
    }

    .token-timer {
        padding: clamp(4px, 0.6vw, 6px) clamp(8px, 1vw, 10px);
        margin-top: clamp(4px, 0.6vw, 8px);
        margin-bottom: clamp(4px, 0.6vw, 8px);
        font-size: clamp(10px, 1.2vw, 12px);
        gap: clamp(4px, 0.6vw, 6px);
    }

    .timer-label {
        font-size: clamp(10px, 1.2vw, 12px);
    }

    .timer-value {
        font-size: clamp(14px, 1.8vw, 16px);
        letter-spacing: 1px;
    }

    .registration-container-inner .input-row,
    .reset-container .input-row {
        gap: clamp(4px, 0.6vw, 6px);
    }

    .registration-container-inner .form-group,
    .reset-container .form-group {
        gap: clamp(1px, 0.2vw, 2px);
    }

    .registration-container-inner .buttons-grid,
    .reset-container .buttons-grid {
        gap: clamp(4px, 0.6vw, 6px);
        margin-top: clamp(2px, 0.3vw, 4px);
    }

    .app-title {
        font-size: clamp(20px, 3vw, 32px);
        top: clamp(-14px, -2.2vw, -18px);
        overflow: visible !important;
        clip-path: none !important;
    }

    .app-title::before {
        width: calc(100% - clamp(50px, 12vw, 70px));
        overflow: visible !important;
        clip-path: none !important;
    }

    .form-group {
        gap: clamp(3px, 0.5vw, 5px);
    }

    .input-field {
        padding: clamp(4px, 0.7vw, 6px) clamp(5px, 0.8vw, 7px);
        font-size: clamp(11px, 1.4vw, 13px);
    }

    .input-row {
        gap: clamp(4px, 0.6vw, 6px);
    }

    .buttons-grid {
        gap: clamp(4px, 0.6vw, 6px);
        margin-top: clamp(1px, 0.2vw, 3px);
        margin-bottom: clamp(1px, 0.2vw, 3px);
        width: 100%;
        box-sizing: border-box;
        overflow: hidden;
    }

    /* Container 2 (Şifre Değiştirme) için yatay modda butonları yan yana */
    .reset-container-2 .buttons-grid,
    #container-2.registration-container-inner .buttons-grid {
        flex-direction: row !important;
        align-items: center;
        justify-content: space-between;
        gap: clamp(6px, 1vw, 10px);
    }

    .reset-container-2 .buttons-row-secondary,
    #container-2.registration-container-inner .buttons-row-secondary {
        order: 1;
        flex: 1 1 50%;
    }

    .reset-container-2 .buttons-row-main,
    #container-2.registration-container-inner .buttons-row-main {
        order: 2;
        flex: 1 1 50%;
    }

    .reset-container-2 .buttons-row-main .btn-full,
    .reset-container-2 .buttons-row-secondary .btn,
    #container-2.registration-container-inner .buttons-row-main .btn-full,
    #container-2.registration-container-inner .buttons-row-secondary .btn {
        width: 100%;
    }

    .btn {
        padding: clamp(3px, 0.5vw, 5px) clamp(8px, 1.2vw, 12px);
        font-size: clamp(11px, 1.4vw, 13px);
        min-height: auto;
        max-height: clamp(24px, 3vw, 28px);
        height: clamp(24px, 3vw, 28px);
        white-space: nowrap;
        flex-shrink: 0;
        box-sizing: border-box;
    }

    .buttons-row-secondary {
        gap: clamp(6px, 0.9vw, 8px);
        flex-wrap: nowrap;
    }

    .buttons-row-secondary .btn {
        flex: 1 1 auto;
        min-width: 0;
        border-radius: 999px !important;
    }

    .buttons-row-secondary .btn:first-child {
        border-top-left-radius: 999px !important;
        border-bottom-left-radius: 999px !important;
        border-top-right-radius: 999px !important;
        border-bottom-right-radius: 999px !important;
    }

    .buttons-row-secondary .btn:last-child {
        border-top-left-radius: 999px !important;
        border-bottom-left-radius: 999px !important;
        border-top-right-radius: 999px !important;
        border-bottom-right-radius: 999px !important;
    }

    .login-card-header {
        margin-bottom: clamp(1px, 0.2vw, 3px);
    }

    .login-title {
        font-size: clamp(12px, 1.5vw, 14px);
    }

    /* İlk container için header margin'i daha da azalt */
    .registration-container .login-card-header,
    .password-reset-container .login-card-header {
        margin-bottom: clamp(0px, 0.1vw, 2px);
    }

    .options-row {
        margin-top: clamp(2px, 0.3vw, 4px);
        gap: 10px;
    }
}

/* Mobile Landscape (481px - 768px) */
@media (min-width: 481px) and (max-width: 768px) and (orientation: landscape) {
    html, body {
        overflow-y: hidden !important;
        max-height: 100vh;
        max-height: 100dvh;
    }

    .page-root {
        padding: clamp(12px, 2vw, 16px) clamp(6px, 1vw, 10px);
        max-width: 100vw;
        max-height: 100vh;
        max-height: 100dvh;
        overflow-x: hidden !important;
        overflow-y: visible !important;
        min-height: 100vh;
        min-height: 100dvh;
        align-items: center;
        justify-content: center;
        padding-top: clamp(40px, 6vw, 50px);
        padding-bottom: clamp(8px, 1.5vw, 12px);
    }

    .app-shell {
        max-width: min(100%, calc(100vw - clamp(12px, 2vw, 20px)));
        padding: 0;
        margin: 0;
        align-items: center;
        overflow: visible !important;
    }

    .login-wrapper {
        overflow: visible !important;
        padding-top: 0;
        margin-top: 0;
    }

    .login-card {
        padding: clamp(5px, 0.9vw, 9px) clamp(5px, 0.9vw, 9px);
        padding-top: clamp(46px, 7vw, 56px);
        padding-bottom: clamp(5px, 0.9vw, 9px);
        max-width: 100%;
        width: 100%;
        margin-top: 0;
        gap: clamp(3px, 0.5vw, 5px);
        overflow: visible !important;
        overflow-x: visible !important;
        overflow-y: visible !important;
        position: relative;
        max-height: calc(100vh - clamp(20px, 3.5vw, 28px));
        max-height: calc(100dvh - clamp(20px, 3.5vw, 28px));
    }

    .login-card-header {
        margin-top: clamp(2px, 0.4vw, 4px) !important;
    }

    .registration-container,
    .password-reset-container {
        overflow: hidden !important;
        max-height: 100%;
        width: 100%;
        box-sizing: border-box;
    }

    .registration-container-inner,
    .reset-container {
        gap: clamp(2px, 0.4vw, 4px);
        max-height: 100%;
        padding-bottom: clamp(2px, 0.4vw, 4px);
        overflow: hidden;
        width: 100%;
        box-sizing: border-box;
    }

    /* İlk container (Kod Gönder) için özel optimizasyon */
    .registration-container-inner.active:first-child,
    .reset-container.active:first-child {
        gap: clamp(2px, 0.4vw, 4px);
    }

    .registration-container-inner.active:first-child .input-row,
    .reset-container.active:first-child .input-row {
        gap: clamp(3px, 0.5vw, 5px);
    }

    .registration-container-inner.active:first-child .form-group,
    .reset-container.active:first-child .form-group {
        gap: clamp(1px, 0.15vw, 1.5px);
    }

    .registration-container-inner.active:first-child .buttons-grid,
    .reset-container.active:first-child .buttons-grid {
        gap: clamp(3px, 0.5vw, 5px);
        margin-top: clamp(1px, 0.2vw, 3px);
        margin-bottom: clamp(1px, 0.2vw, 3px);
    }

    .token-timer {
        padding: clamp(3px, 0.5vw, 5px) clamp(6px, 0.8vw, 8px);
        margin-top: clamp(3px, 0.5vw, 6px);
        margin-bottom: clamp(3px, 0.5vw, 6px);
        font-size: clamp(9px, 1.1vw, 11px);
        gap: clamp(3px, 0.5vw, 5px);
    }

    .timer-label {
        font-size: clamp(9px, 1.1vw, 11px);
    }

    .timer-value {
        font-size: clamp(12px, 1.6vw, 14px);
        letter-spacing: 0.5px;
    }

    .registration-container-inner .input-row,
    .reset-container .input-row {
        gap: clamp(3px, 0.5vw, 5px);
    }

    .registration-container-inner .form-group,
    .reset-container .form-group {
        gap: clamp(3px, 0.5vw, 5px);
    }

    .registration-container-inner .buttons-grid,
    .reset-container .buttons-grid {
        gap: clamp(3px, 0.5vw, 5px);
        margin-top: clamp(1px, 0.2vw, 3px);
        margin-bottom: clamp(1px, 0.2vw, 3px);
    }

    .app-title {
        font-size: clamp(20px, 3.2vw, 32px);
        top: clamp(-16px, -2.5vw, -20px);
        overflow: visible !important;
        clip-path: none !important;
    }

    .app-title::before {
        width: calc(100% - clamp(60px, 15vw, 80px));
        overflow: visible !important;
        clip-path: none !important;
    }

    .form-group {
        gap: clamp(2px, 0.4vw, 4px);
    }

    .input-field {
        padding: clamp(6px, 0.9vw, 8px) clamp(7px, 1vw, 9px);
        font-size: clamp(13px, 1.6vw, 15px);
    }

    .input-row {
        gap: clamp(6px, 1vw, 10px);
    }

    .buttons-grid {
        gap: clamp(6px, 0.9vw, 8px);
        margin-top: clamp(2px, 0.4vw, 4px);
    }

    /* Container 2 (Şifre Değiştirme) için yatay modda butonları yan yana */
    .reset-container-2 .buttons-grid,
    #container-2.registration-container-inner .buttons-grid {
        flex-direction: row !important;
        align-items: center;
        justify-content: space-between;
        gap: clamp(8px, 1.2vw, 12px);
    }

    .reset-container-2 .buttons-row-secondary,
    #container-2.registration-container-inner .buttons-row-secondary {
        order: 1;
        flex: 1 1 50%;
    }

    .reset-container-2 .buttons-row-main,
    #container-2.registration-container-inner .buttons-row-main {
        order: 2;
        flex: 1 1 50%;
    }

    .reset-container-2 .buttons-row-main .btn-full,
    .reset-container-2 .buttons-row-secondary .btn,
    #container-2.registration-container-inner .buttons-row-main .btn-full,
    #container-2.registration-container-inner .buttons-row-secondary .btn {
        width: 100%;
    }

    .btn {
        padding: clamp(6px, 0.9vw, 8px) clamp(14px, 2vw, 18px);
        font-size: clamp(13px, 1.6vw, 15px);
        min-height: clamp(28px, 4vw, 34px);
        max-height: clamp(28px, 4vw, 34px);
        height: clamp(28px, 4vw, 34px);
        white-space: nowrap;
        flex-shrink: 0;
    }

    .buttons-row-secondary {
        gap: clamp(6px, 0.9vw, 8px);
        flex-wrap: nowrap;
    }

    .buttons-row-secondary .btn {
        flex: 1 1 auto;
        min-width: 0;
        border-radius: 999px !important;
    }

    .buttons-row-secondary .btn:first-child {
        border-top-left-radius: 999px !important;
        border-bottom-left-radius: 999px !important;
        border-top-right-radius: 999px !important;
        border-bottom-right-radius: 999px !important;
    }

    .buttons-row-secondary .btn:last-child {
        border-top-left-radius: 999px !important;
        border-bottom-left-radius: 999px !important;
        border-top-right-radius: 999px !important;
        border-bottom-right-radius: 999px !important;
    }

    .login-card-header {
        margin-bottom: clamp(4px, 0.8vw, 8px);
    }

    .options-row {
        margin-top: clamp(2px, 0.4vw, 4px);
        gap: 12px;
    }
}

/* Tablet Portrait (769px - 1024px) */
@media (min-width: 769px) and (max-width: 1024px) and (orientation: portrait) {
    .page-root {
        padding: clamp(16px, 2.5vw, 24px) clamp(14px, 2vw, 20px);
    }

    .app-shell {
        max-width: min(520px, calc(100vw - clamp(28px, 4vw, 40px)));
    }

    .login-card {
        padding: clamp(24px, 3.5vw, 32px) clamp(20px, 3vw, 28px);
        padding-top: clamp(60px, 8vw, 66px);
    }

    .app-title {
        font-size: clamp(32px, 4.5vw, 44px);
    }
}

/* Tablet Landscape (1025px - 1366px) */
@media (min-width: 1025px) and (max-width: 1366px) and (orientation: landscape) {
    .page-root {
        padding: clamp(12px, 2vw, 20px) clamp(16px, 2.5vw, 24px);
        min-height: auto;
    }

    .app-shell {
        max-width: min(560px, calc(100vw - clamp(32px, 5vw, 48px)));
    }

    .login-card {
        padding: clamp(20px, 3vw, 26px) clamp(18px, 2.5vw, 24px);
        padding-top: clamp(58px, 8vw, 64px);
    }
}

/* Desktop (1367px+) */
@media (min-width: 1367px) {
    .page-root {
        padding: clamp(20px, 2.5vw, 24px) clamp(16px, 2vw, 20px);
    }

    .app-shell {
        max-width: min(480px, calc(100vw - clamp(32px, 4vw, 40px)));
    }

    .login-card {
        padding: clamp(24px, 3vw, 26px) clamp(20px, 2.5vw, 24px);
        padding-top: clamp(64px, 8.5vw, 66px);
    }
    
    /* Discover Menu - Masaüstü için düzeltme */
    .discover-menu {
        align-items: center;
        justify-content: center;
        padding-top: clamp(10px, 1.2vw, 14px);
        padding-bottom: clamp(10px, 1.2vw, 14px);
        border-top: none;
        border-bottom: none;
    }
    
    /* VARKS Logo - Masaüstü için büyüt */
    .discover-brand {
        font-size: clamp(60px, 4.8vw, 120px) !important;
    }
}

/* Desktop Full HD (1920x1080 ve üzeri) */
@media (min-width: 1920px) {
    .discover-brand {
        font-size: 75px !important;
    }
}

/* Masaüstü (1024px - 1366px) */
@media (min-width: 1024px) and (max-width: 1366px) {
    .discover-menu {
        align-items: center;
        justify-content: center;
        padding-top: clamp(10px, 1.2vw, 14px);
        padding-bottom: clamp(10px, 1.2vw, 14px);
        border-top: none;
        border-bottom: none;
    }
    
    /* VARKS Logo - Orta masaüstü için */
    .discover-brand {
        font-size: clamp(56px, 5.5vw, 80px);
    }
}

/* Yatay (Landscape) Modu - Tüm Cihazlar */
@media (orientation: landscape) and (max-height: 600px) {
    html, body {
        overflow-y: hidden !important;
        max-height: 100vh;
        max-height: 100dvh;
    }

    .page-root {
        padding: clamp(6px, 1.2vw, 12px) clamp(4px, 0.8vw, 8px);
        min-height: 100vh;
        min-height: 100dvh;
        max-height: 100vh;
        max-height: 100dvh;
        align-items: center;
        justify-content: center;
        padding-top: clamp(40px, 6vw, 50px);
        padding-bottom: clamp(4px, 0.8vw, 8px);
        max-width: 100vw;
        overflow-x: hidden !important;
        overflow-y: visible !important;
    }

    .app-shell {
        max-width: min(100%, calc(100vw - clamp(8px, 1.5vw, 16px)));
        align-items: center;
        overflow: visible !important;
        overflow-y: visible !important;
    }

    .login-wrapper {
        overflow: visible !important;
        overflow-y: visible !important;
        padding-top: 0;
        margin-top: 0;
    }

    .login-card {
        padding: clamp(3px, 0.6vw, 6px) clamp(3px, 0.6vw, 6px);
        padding-top: clamp(40px, 6vw, 50px);
        padding-bottom: clamp(3px, 0.6vw, 6px);
        margin-top: 0;
        gap: clamp(2px, 0.4vw, 4px);
        max-width: 100%;
        width: 100%;
        overflow: visible !important;
        overflow-x: visible !important;
        overflow-y: visible !important;
        position: relative;
        max-height: calc(100vh - clamp(16px, 2.8vw, 24px));
        max-height: calc(100dvh - clamp(16px, 2.8vw, 24px));
    }

    .login-card-header {
        margin-top: clamp(2px, 0.4vw, 4px) !important;
    }

    .registration-container,
    .password-reset-container {
        overflow: hidden !important;
        max-height: 100%;
        width: 100%;
        box-sizing: border-box;
    }

    .registration-container-inner,
    .reset-container {
        gap: clamp(2px, 0.4vw, 4px);
        max-height: 100%;
        padding-bottom: clamp(1px, 0.3vw, 3px);
        overflow: hidden;
        width: 100%;
        box-sizing: border-box;
    }

    /* İlk container (Kod Gönder) için özel optimizasyon */
    .registration-container-inner.active:first-child,
    .reset-container.active:first-child {
        gap: clamp(2px, 0.4vw, 4px);
    }

    .registration-container-inner.active:first-child .input-row,
    .reset-container.active:first-child .input-row {
        gap: clamp(3px, 0.5vw, 5px);
    }

    .registration-container-inner.active:first-child .form-group,
    .reset-container.active:first-child .form-group {
        gap: clamp(1px, 0.15vw, 1.5px);
    }

    .registration-container-inner.active:first-child .buttons-grid,
    .reset-container.active:first-child .buttons-grid {
        gap: clamp(3px, 0.5vw, 5px);
        margin-top: clamp(1px, 0.2vw, 3px);
        margin-bottom: clamp(1px, 0.2vw, 3px);
    }

    .token-timer {
        padding: clamp(2px, 0.4vw, 4px) clamp(5px, 0.7vw, 7px);
        margin-top: clamp(2px, 0.4vw, 5px);
        margin-bottom: clamp(2px, 0.4vw, 5px);
        font-size: clamp(8px, 1vw, 10px);
        gap: clamp(2px, 0.4vw, 4px);
    }

    .timer-label {
        font-size: clamp(8px, 1vw, 10px);
    }

    .timer-value {
        font-size: clamp(11px, 1.4vw, 13px);
        letter-spacing: 0.5px;
    }

    .registration-container-inner .input-row,
    .reset-container .input-row {
        gap: clamp(3px, 0.5vw, 5px);
    }

    .registration-container-inner .form-group,
    .reset-container .form-group {
        gap: clamp(3px, 0.5vw, 5px);
    }

    .registration-container-inner .buttons-grid,
    .reset-container .buttons-grid {
        gap: clamp(3px, 0.5vw, 5px);
        margin-top: clamp(1px, 0.2vw, 3px);
        margin-bottom: clamp(1px, 0.2vw, 3px);
    }

    .app-title {
        top: clamp(-12px, -2vw, -16px);
        font-size: clamp(18px, 2.8vw, 28px);
        overflow: visible !important;
        clip-path: none !important;
    }

    .app-title::before {
        width: calc(100% - clamp(50px, 12vw, 70px));
        overflow: visible !important;
        clip-path: none !important;
    }

    .form-group {
        gap: clamp(1px, 0.3vw, 3px);
    }

    .input-field {
        padding: clamp(4px, 0.7vw, 6px) clamp(5px, 0.8vw, 7px);
        font-size: clamp(11px, 1.4vw, 13px);
    }

    .input-row {
        gap: clamp(3px, 0.5vw, 5px);
    }

    .buttons-grid {
        gap: clamp(3px, 0.5vw, 5px);
        margin-top: clamp(1px, 0.2vw, 3px);
        margin-bottom: clamp(1px, 0.2vw, 3px);
        width: 100%;
        box-sizing: border-box;
        overflow: hidden;
    }

    /* Container 2 (Şifre Değiştirme) için yatay modda butonları yan yana */
    .reset-container-2 .buttons-grid,
    #container-2.registration-container-inner .buttons-grid {
        flex-direction: row !important;
        align-items: center;
        justify-content: space-between;
        gap: clamp(6px, 1vw, 10px);
    }

    .reset-container-2 .buttons-row-secondary,
    #container-2.registration-container-inner .buttons-row-secondary {
        order: 1;
        flex: 1 1 50%;
    }

    .reset-container-2 .buttons-row-main,
    #container-2.registration-container-inner .buttons-row-main {
        order: 2;
        flex: 1 1 50%;
    }

    .reset-container-2 .buttons-row-main .btn-full,
    .reset-container-2 .buttons-row-secondary .btn,
    #container-2.registration-container-inner .buttons-row-main .btn-full,
    #container-2.registration-container-inner .buttons-row-secondary .btn {
        width: 100%;
    }

    .btn {
        padding: clamp(3px, 0.5vw, 5px) clamp(8px, 1.2vw, 12px);
        font-size: clamp(11px, 1.4vw, 13px);
        min-height: auto;
        max-height: clamp(24px, 3vw, 28px);
        height: clamp(24px, 3vw, 28px);
        white-space: nowrap;
        flex-shrink: 0;
        box-sizing: border-box;
    }

    .buttons-row-secondary {
        gap: clamp(4px, 0.6vw, 6px);
        flex-wrap: nowrap;
    }

    .buttons-row-secondary .btn {
        flex: 1 1 auto;
        min-width: 0;
        border-radius: 999px !important;
    }

    .buttons-row-secondary .btn:first-child {
        border-top-left-radius: 999px !important;
        border-bottom-left-radius: 999px !important;
        border-top-right-radius: 999px !important;
        border-bottom-right-radius: 999px !important;
    }

    .buttons-row-secondary .btn:last-child {
        border-top-left-radius: 999px !important;
        border-bottom-left-radius: 999px !important;
        border-top-right-radius: 999px !important;
        border-bottom-right-radius: 999px !important;
    }

    .login-card-header {
        margin-bottom: clamp(1px, 0.3vw, 3px);
    }

    .login-title {
        font-size: clamp(11px, 1.3vw, 13px);
    }

    .options-row {
        margin-top: clamp(1px, 0.2vw, 3px);
        gap: clamp(6px, 0.9vw, 10px);
    }
}

/* Dikey (Portrait) Modu - Tüm Cihazlar */
@media (orientation: portrait) {
    .page-root {
        min-height: 100vh;
        min-height: 100dvh; /* Dynamic viewport height */
        align-items: center;
    }
    
    /* Sol taraftaki iconlar dikey modda birbirine daha yakın */
    .dashboard-header-icons-left {
        gap: clamp(3px, 0.6vw, 6px);
    }
}

/* iOS Safari için özel düzeltmeler */
@supports (-webkit-touch-callout: none) {
    body {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    .page-root {
        min-height: -webkit-fill-available;
    }

    /* iOS Safe Area için padding */
    .page-root {
        padding-left: max(clamp(12px, 2vw, 16px), env(safe-area-inset-left));
        padding-right: max(clamp(12px, 2vw, 16px), env(safe-area-inset-right));
        padding-top: max(clamp(16px, 3vw, 24px), env(safe-area-inset-top));
        padding-bottom: max(clamp(16px, 3vw, 24px), env(safe-area-inset-bottom));
    }
}

/* Android Chrome için özel düzeltmeler */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
    .page-root {
        min-height: 100dvh; /* Dynamic viewport height */
    }
}

/* Touch cihazlar için */
@media (hover: none) and (pointer: coarse) {
    .btn {
        min-height: 44px; /* iOS touch target minimum */
    }

    .input-field {
        font-size: 16px; /* iOS zoom önleme */
    }
}

/* Yüksek çözünürlük ekranlar */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .app-title {
        text-shadow: 
            0.5px 0.5px 0 rgba(255, 255, 255, 0.1),
            1px 1px 2px rgba(0, 0, 0, 0.4),
            1.5px 1.5px 3px rgba(0, 0, 0, 0.3);
    }
}

/* Sayfa yüklendiğinde scrollbar'ı göster (geçiş sonrası) */
body:not(.page-transition-out) {
    overflow-y: auto;
}

html:not(.hide-scrollbar) {
    overflow-y: auto;
}

/* ============================================
   DASHBOARD HEADER - DINAMIK TASARIM
   Görseldeki mantığa göre - Her çözünürlükte aynı görünüm
   ============================================ */

/* Dashboard Header Wrapper - Üst VARKS Container */
.dashboard-header-wrapper-top {
    position: fixed;
    top: clamp(8px, 1.5vw, 20px);
    left: 0;
    right: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0 clamp(12px, 2vw, 24px);
    box-sizing: border-box;
    pointer-events: none;
    overflow: visible; /* Notification dropdown'ın kesilmemesi için */
    animation: slideDownFadeIn 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    opacity: 1;
}

/* Dialog açıkken header blur'un altında kalmalı */
.settings-dialog.show ~ .dashboard-header-wrapper-top,
body:has(.settings-dialog.show) .dashboard-header-wrapper-top {
    z-index: 999 !important;
    pointer-events: none !important;
}

@supports (animation: slideDownFadeIn) {
    .dashboard-header-wrapper-top {
        opacity: 0;
    }
}

.dashboard-header-wrapper-top > * {
    pointer-events: auto;
}

.dashboard-header-wrapper-top .btn-icon,
.dashboard-header-wrapper-top .theme-toggle-icon-btn,
.dashboard-header-wrapper-top .logout-btn {
    pointer-events: auto !important;
    z-index: 10;
    position: relative;
}

/* Üst Container - VARKS (Tam Genişlik, Iconlar İçinde) */
.dashboard-header-top {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 100%;
    height: clamp(48px, 8vw, 64px);
    min-height: clamp(48px, 8vw, 64px);
    padding: clamp(12px, 2vw, 18px) clamp(20px, 3vw, 36px);
    gap: clamp(12px, 2vw, 20px);
    background: rgba(17, 24, 39, 0.85);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(148, 163, 184, 0.3);
    border-bottom: 2px solid rgba(148, 163, 184, 0.5);
    border-radius: 999px;
    box-shadow: 
        0 4px 30px rgba(15, 23, 42, 0.5),
        0 8px 40px rgba(15, 23, 42, 0.3),
        0 0 0 1px rgba(148, 163, 184, 0.3),
        0 2px 0 rgba(255, 255, 255, 0.08) inset,
        inset 0 1px 0 rgba(148, 163, 184, 0.2);
    box-sizing: border-box;
    overflow: visible; /* Notification dropdown'ın kesilmemesi için */
    white-space: nowrap;
    animation: popInScale 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s forwards;
    opacity: 0;
    transform: scale(0.9);
    /* Tıklanabilir yap */
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    /* Metin seçilemez yap */
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.dashboard-header-top:hover {
    transform: translateY(-1px) scale(1.01);
    box-shadow: 
        0 6px 35px rgba(15, 23, 42, 0.6),
        0 10px 45px rgba(15, 23, 42, 0.4),
        0 0 0 1px rgba(148, 163, 184, 0.3),
        0 2px 0 rgba(255, 255, 255, 0.08) inset,
        inset 0 1px 0 rgba(148, 163, 184, 0.2);
}

.dashboard-header-top:active {
    transform: translateY(0) scale(0.99);
}

.dashboard-header-top::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 2px solid rgba(148, 163, 184, 0.3);
    z-index: -1;
    pointer-events: none;
    box-shadow: 
        0 1px 0 rgba(255, 255, 255, 0.1) inset,
        inset 0 -1px 0 rgba(148, 163, 184, 0.15);
}

.dashboard-header-top::after {
    content: "";
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 2px;
    border-radius: 0 0 999px 999px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(148, 163, 184, 0.5) 10%, 
        rgba(148, 163, 184, 0.6) 50%, 
        rgba(148, 163, 184, 0.5) 90%, 
        transparent 100%);
    pointer-events: none;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.3);
    z-index: -1;
}

/* VARKS Title (Ortada - Absolute Position ile Sabit) */
.dashboard-header-title {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-family: "Bebas Neue", system-ui, sans-serif;
    font-size: clamp(22px, 4.5vw, 42px);
    letter-spacing: clamp(0.05em, 0.1vw, 0.1em);
    text-transform: uppercase;
    color: var(--text-color);
    font-weight: 400;
    text-shadow: 
        1px 1px 0 rgba(255, 255, 255, 0.05),
        2px 2px 4px rgba(0, 0, 0, 0.3),
        0 0 20px rgba(148, 163, 184, 0.2);
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4));
    white-space: nowrap;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    pointer-events: auto;
    cursor: pointer;
    z-index: 1;
    animation: fadeInUpCentered 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.2s forwards;
    opacity: 0;
}

/* Dikey modda VARKS yazısını büyüt */
@media (orientation: portrait) {
    .dashboard-header-title {
        font-size: clamp(28px, 6vw, 52px);
    }
}

@keyframes fadeInUpCentered {
    from {
        opacity: 0;
        transform: translate(-50%, calc(-50% - 10px));
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%);
    }
}

/* Icon Container'ları */
.dashboard-header-icons-left,
.dashboard-header-icons-right {
    display: flex;
    align-items: center;
    gap: clamp(4px, 0.8vw, 8px);
    flex-shrink: 0;
    position: relative;
    z-index: 2;
    flex: 1 1 0;
    min-width: 0;
    max-width: 50%;
    box-sizing: border-box;
}

/* Notification badge container'ının genişliğini sabitle */
.dashboard-header-icons-left > div[style*="position: relative"] {
    width: clamp(32px, 5.5vw, 40px);
    height: clamp(32px, 5.5vw, 40px);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dashboard-header-icons-left {
    justify-content: flex-start;
}

.dashboard-header-icons-right {
    justify-content: flex-end;
}

/* Dikey modda ayarlar iconunu biraz daha sola al */
@media (orientation: portrait) {
    .dashboard-header-icons-right {
        padding-left: clamp(12px, 4vw, 28px);
    }
}


@supports (animation: fadeInUp) {
    .dashboard-header-title {
        opacity: 0;
        transform: translateY(10px);
    }
}

.dashboard-header-top::after {
    content: "";
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 2px;
    border-radius: 0 0 999px 999px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(148, 163, 184, 0.5) 10%, 
        rgba(148, 163, 184, 0.6) 50%, 
        rgba(148, 163, 184, 0.5) 90%, 
        transparent 100%);
    pointer-events: none;
    box-shadow: none;
    z-index: -1;
}

/* Light Theme - Container'lar */
body[data-theme="light"] .dashboard-header-top {
    background: rgba(255, 255, 255, 0.75);
    border-color: rgba(0, 0, 0, 0.15);
    box-shadow: 
        0 4px 30px rgba(15, 23, 42, 0.2),
        0 8px 40px rgba(15, 23, 42, 0.1),
        0 0 0 1px rgba(0, 0, 0, 0.1),
        0 2px 0 rgba(255, 255, 255, 0.5) inset,
        inset 0 1px 0 rgba(0, 0, 0, 0.08);
}

body[data-theme="light"] .dashboard-header-top {
    border-bottom: 2px solid rgba(0, 0, 0, 0.15);
}

body[data-theme="light"] .dashboard-header-top::before {
    background: rgba(255, 255, 255, 0.15);
    border-bottom: 2px solid rgba(0, 0, 0, 0.12);
    box-shadow: 
        0 2px 8px rgba(0, 0, 0, 0.05),
        0 1px 0 rgba(255, 255, 255, 0.6) inset,
        inset 0 -1px 0 rgba(0, 0, 0, 0.08);
}

body[data-theme="light"] .dashboard-header-top::after {
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(0, 0, 0, 0.15) 10%, 
        rgba(0, 0, 0, 0.22) 50%, 
        rgba(0, 0, 0, 0.15) 90%, 
        transparent 100%);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

body[data-theme="light"] .dashboard-header-title {
    text-shadow: 
        1px 1px 0 rgba(0, 0, 0, 0.1),
        2px 2px 4px rgba(0, 0, 0, 0.15),
        0 0 15px rgba(0, 0, 0, 0.1);
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
}

/* Icon Butonları - Her zaman yuvarlak - Çerçevesiz */
.btn-icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: clamp(32px, 5.5vw, 40px);
    height: clamp(32px, 5.5vw, 40px);
    min-width: clamp(32px, 5.5vw, 40px);
    min-height: clamp(32px, 5.5vw, 40px);
    max-width: clamp(32px, 5.5vw, 40px);
    max-height: clamp(32px, 5.5vw, 40px);
    padding: 0 !important; /* Padding kaldırıldı - icon tam ortada olacak */
    margin: 0 !important; /* Margin kaldırıldı - gap container'da kontrol ediliyor */
    border-radius: 999px;
    background: transparent;
    border: none; /* Çerçeve kaldırıldı */
    color: var(--text-color);
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.2s ease;
    animation: iconPopIn 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    opacity: 1; /* Fallback */
    transform: scale(1); /* Fallback */
    /* Seçim çerçevesini kaldır */
    outline: none !important;
    -webkit-tap-highlight-color: transparent;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

/* Focus durumunda outline kaldır */
.btn-icon:focus,
.btn-icon:focus-visible,
.btn-icon:focus-within {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
}

/* Active durumunda çerçeveyi kaldır (telefon stilinde seçili hali) */
.btn-icon:active::before {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    background: transparent !important;
    content: none !important;
    width: 0 !important;
    height: 0 !important;
    border: none !important;
    box-shadow: none !important;
}

.btn-icon:active {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    -webkit-tap-highlight-color: transparent !important;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
    transform: scale(0.9) translateY(0) !important;
    transition: transform 0.1s ease !important;
}

/* Notifications ve Search iconları için dokunmatik odak efektini kaldır */
#notifications-btn,
.tasks-search-btn,
#tasks-search-btn {
    -webkit-tap-highlight-color: transparent !important;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
    outline: none !important;
    -webkit-touch-callout: none;
}

#notifications-btn:active,
.tasks-search-btn:active,
#tasks-search-btn:active,
#notifications-btn:focus,
.tasks-search-btn:focus,
#tasks-search-btn:focus,
#notifications-btn:focus-visible,
.tasks-search-btn:focus-visible,
#tasks-search-btn:focus-visible {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    -webkit-tap-highlight-color: transparent !important;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
}

@supports (animation: iconPopIn) {
    .btn-icon {
        opacity: 0;
        transform: scale(0.8);
    }
}

/* Notification Dropdown - Tüm sayfalarda geçerli */
.notification-dropdown {
    /* Konumlandırma tamamen JavaScript'te yapılacak - CSS'te hiçbir konum kuralı yok */
    background: var(--bg-elevated);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    min-width: 320px;
    max-width: 400px;
    max-height: 500px;
    overflow-y: auto;
    z-index: 10001 !important; /* VARKS container'ından (z-index: 1000) daha yüksek */
}

/* Notification item checkbox'ları için koyu tema uyumlu stil */
.notification-item input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 18px;
    height: 18px;
    border: 2px solid var(--border-color);
    border-radius: 4px;
    background: var(--bg-color);
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease;
    flex-shrink: 0;
    margin-top: 2px;
}

.notification-item input[type="checkbox"]:hover {
    border-color: var(--primary-color);
    background: var(--bg-elevated);
}

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

.notification-item input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 10px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.notification-item input[type="checkbox"]:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(var(--primary-color-rgb, 59, 130, 246), 0.1);
}

/* Icon butonları için sıralı animasyon delay'leri */
.dashboard-header-side .btn-icon:nth-child(1) {
    animation-delay: 0.2s;
}

.dashboard-header-side .btn-icon:nth-child(2) {
    animation-delay: 0.25s;
}

.dashboard-header-side .btn-icon:nth-child(3) {
    animation-delay: 0.3s;
}

.dashboard-header-side .btn-icon:nth-child(4) {
    animation-delay: 0.35s;
}

.dashboard-header-side .btn-icon:nth-child(5) {
    animation-delay: 0.4s;
}

/* Hover efekti - Yuvarlak odak */
.btn-icon::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
}

.btn-icon:hover::before {
    opacity: 1;
}

/* Ayarlar butonu için active/focus durumunda çerçeveyi kaldır */
.settings-btn:active::before,
.settings-btn:focus::before,
.settings-btn:focus-visible::before {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    background: transparent !important;
    content: none !important;
    width: 0 !important;
    height: 0 !important;
    border: none !important;
    box-shadow: none !important;
}

.settings-btn:active,
.settings-btn:focus,
.settings-btn:focus-visible {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

/* Tarih ve Mağaza butonları için de aynı düzeltme - Dialog açıkken aktif görünmemesi */
.date-btn:active::before,
.date-btn:focus::before,
.date-btn:focus-visible::before,
.store-btn:active::before,
.store-btn:focus::before,
.store-btn:focus-visible::before {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    background: transparent !important;
    content: none !important;
    width: 0 !important;
    height: 0 !important;
    border: none !important;
    box-shadow: none !important;
}

.date-btn:active,
.date-btn:focus,
.date-btn:focus-visible,
.store-btn:active,
.store-btn:focus,
.store-btn:focus-visible {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

/* Dialog açıkken tarih ve mağaza butonlarının aktif görünmemesi */
.date-picker-dialog.show ~ .dashboard-header-wrapper-top .date-btn:active,
.date-picker-dialog.show ~ .dashboard-header-wrapper-top .date-btn:focus,
.date-picker-dialog.show ~ .dashboard-header-wrapper-top .date-btn:focus-visible,
body:has(.date-picker-dialog.show) .date-btn:active,
body:has(.date-picker-dialog.show) .date-btn:focus,
body:has(.date-picker-dialog.show) .date-btn:focus-visible {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

/* Dialog açıkken tarih butonunun ::before çemberini kaldır */
.date-picker-dialog.show ~ .dashboard-header-wrapper-top .date-btn::before,
body:has(.date-picker-dialog.show) .date-btn::before {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    background: transparent !important;
    content: none !important;
    width: 0 !important;
    height: 0 !important;
    border: none !important;
    box-shadow: none !important;
}

.store-picker-dialog.show ~ .dashboard-header-wrapper-top .store-btn:active,
.store-picker-dialog.show ~ .dashboard-header-wrapper-top .store-btn:focus,
.store-picker-dialog.show ~ .dashboard-header-wrapper-top .store-btn:focus-visible,
body:has(.store-picker-dialog.show) .store-btn:active,
body:has(.store-picker-dialog.show) .store-btn:focus,
body:has(.store-picker-dialog.show) .store-btn:focus-visible {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

/* Dialog açıkken mağaza butonunun ::before çemberini kaldır */
.store-picker-dialog.show ~ .dashboard-header-wrapper-top .store-btn::before,
body:has(.store-picker-dialog.show) .store-btn::before {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    background: transparent !important;
    content: none !important;
    width: 0 !important;
    height: 0 !important;
    border: none !important;
    box-shadow: none !important;
}

.btn-icon:hover {
    transform: translateY(-1px);
}

/* Logout butonu hover efekti - Kırmızı */
.logout-btn:hover {
    color: #ef4444 !important;
}

.logout-btn:hover::before {
    background: rgba(239, 68, 68, 0.15) !important;
}

/* Kişisel Mod ve Karşılaştırma Modu - Aktif durumda icon yeşil renk */
.personal-mode-btn.active,
.compare-btn.active {
    color: #22c55e !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.personal-mode-btn.active svg,
.compare-btn.active svg {
    stroke: #22c55e !important;
    color: #22c55e !important;
    fill: none !important;
}

/* Aktif durumda tüm ::before ve ::after pseudo-element'lerini tamamen kaldır */
.personal-mode-btn.active,
.compare-btn.active {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Tüm ::before ve ::after elementlerini kaldır - en yüksek öncelik */
.personal-mode-btn.active::before,
.compare-btn.active::before,
.personal-mode-btn.active::after,
.compare-btn.active::after,
.btn-icon.personal-mode-btn.active::before,
.btn-icon.compare-btn.active::before,
.btn-icon.personal-mode-btn.active::after,
.btn-icon.compare-btn.active::after {
    content: none !important;
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    background: transparent !important;
    width: 0 !important;
    height: 0 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: 0 !important;
    max-height: 0 !important;
    border: none !important;
    box-shadow: none !important;
    position: static !important;
    inset: auto !important;
    pointer-events: none !important;
    z-index: -999 !important;
    transform: none !important;
    border-radius: 0 !important;
}

/* Dialog içindeki butonlar için de aynı - Tüm ::before ve ::after elementlerini kaldır */
.settings-item-btn.personal-mode-btn.active,
.settings-item-btn.compare-btn.active {
    background: transparent !important;
}

/* Dialog butonunun kendi ::before elementi (hover efekti) */
.settings-item-btn.personal-mode-btn.active::before,
.settings-item-btn.compare-btn.active::before {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    background: transparent !important;
    content: none !important;
    pointer-events: none !important;
}

.settings-item-btn.personal-mode-btn.active::after,
.settings-item-btn.compare-btn.active::after {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    background: transparent !important;
    content: none !important;
    pointer-events: none !important;
}

/* Dialog içindeki butonların içindeki icon'lar için de */
.settings-item-btn.personal-mode-btn.active .btn-icon::before,
.settings-item-btn.compare-btn.active .btn-icon::before {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    background: transparent !important;
    content: none !important;
    pointer-events: none !important;
}

.settings-item-btn.personal-mode-btn.active .btn-icon::after,
.settings-item-btn.compare-btn.active .btn-icon::after {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    background: transparent !important;
    content: none !important;
    pointer-events: none !important;
}

.personal-mode-btn.active:hover::before,
.compare-btn.active:hover::before,
.personal-mode-btn.active:hover::after,
.compare-btn.active:hover::after {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    background: transparent !important;
    content: none !important;
}

/* Dialog içindeki hover durumları */
.settings-item-btn.personal-mode-btn.active:hover::before,
.settings-item-btn.compare-btn.active:hover::before,
.settings-item-btn.personal-mode-btn.active:hover::after,
.settings-item-btn.compare-btn.active:hover::after {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    background: transparent !important;
    content: none !important;
}

.settings-item-btn.personal-mode-btn.active:hover .btn-icon::before,
.settings-item-btn.compare-btn.active:hover .btn-icon::before,
.settings-item-btn.personal-mode-btn.active:hover .btn-icon::after,
.settings-item-btn.compare-btn.active:hover .btn-icon::after {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    background: transparent !important;
    content: none !important;
}

.personal-mode-btn.active:active::before,
.compare-btn.active:active::before,
.personal-mode-btn.active:active::after,
.compare-btn.active:active::after {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    background: transparent !important;
    content: none !important;
}

/* Light theme'de de aynı */
body[data-theme="light"] .personal-mode-btn.active,
body[data-theme="light"] .compare-btn.active {
    color: #22c55e !important;
}

body[data-theme="light"] .personal-mode-btn.active svg,
body[data-theme="light"] .compare-btn.active svg {
    stroke: #22c55e !important;
    color: #22c55e !important;
}

body[data-theme="light"] .personal-mode-btn.active::before,
body[data-theme="light"] .compare-btn.active::before,
body[data-theme="light"] .personal-mode-btn.active::after,
body[data-theme="light"] .compare-btn.active::after {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    background: transparent !important;
    content: none !important;
}

body[data-theme="light"] .personal-mode-btn.active:hover::before,
body[data-theme="light"] .compare-btn.active:hover::before,
body[data-theme="light"] .personal-mode-btn.active:hover::after,
body[data-theme="light"] .compare-btn.active:hover::after {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    background: transparent !important;
    content: none !important;
}

/* Light theme - Dialog içindeki butonlar */
body[data-theme="light"] .settings-item-btn.personal-mode-btn.active::before,
body[data-theme="light"] .settings-item-btn.compare-btn.active::before,
body[data-theme="light"] .settings-item-btn.personal-mode-btn.active::after,
body[data-theme="light"] .settings-item-btn.compare-btn.active::after {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    background: transparent !important;
    content: none !important;
}

body[data-theme="light"] .settings-item-btn.personal-mode-btn.active .btn-icon::before,
body[data-theme="light"] .settings-item-btn.compare-btn.active .btn-icon::before,
body[data-theme="light"] .settings-item-btn.personal-mode-btn.active .btn-icon::after,
body[data-theme="light"] .settings-item-btn.compare-btn.active .btn-icon::after {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    background: transparent !important;
    content: none !important;
}

body[data-theme="light"] .settings-item-btn.personal-mode-btn.active:hover::before,
body[data-theme="light"] .settings-item-btn.compare-btn.active:hover::before,
body[data-theme="light"] .settings-item-btn.personal-mode-btn.active:hover::after,
body[data-theme="light"] .settings-item-btn.compare-btn.active:hover::after {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    background: transparent !important;
    content: none !important;
}

body[data-theme="light"] .settings-item-btn.personal-mode-btn.active:hover .btn-icon::before,
body[data-theme="light"] .settings-item-btn.compare-btn.active:hover .btn-icon::before,
body[data-theme="light"] .settings-item-btn.personal-mode-btn.active:hover .btn-icon::after,
body[data-theme="light"] .settings-item-btn.compare-btn.active:hover .btn-icon::after {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    background: transparent !important;
    content: none !important;
}

.btn-icon:active {
    transform: translateY(0) scale(0.95);
}

.btn-icon:active::before {
    opacity: 0.8;
}

body[data-theme="light"] .btn-icon::before {
    background: rgba(0, 0, 0, 0.05);
}

.btn-icon svg {
    width: clamp(16px, 2.5vw, 20px);
    height: clamp(16px, 2.5vw, 20px);
    flex-shrink: 0;
    stroke: currentColor;
    color: var(--text-color);
}

.logout-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* Logout hover - Kırmızı renk */
.logout-btn::before {
    background: rgba(239, 68, 68, 0.15) !important;
}

.logout-btn:hover {
    color: #ef4444 !important;
}

.logout-btn:hover::before {
    background: rgba(239, 68, 68, 0.15) !important;
    opacity: 1 !important;
}

body[data-theme="light"] .logout-btn::before {
    background: rgba(239, 68, 68, 0.2) !important;
}

body[data-theme="light"] .logout-btn:hover {
    color: #dc2626 !important;
}

body[data-theme="light"] .logout-btn:hover::before {
    background: rgba(239, 68, 68, 0.2) !important;
    opacity: 1 !important;
}

/* Karşılaştırma modu aktif durumu (aşağıda animasyonlu versiyonu var) */

/* Ayarlar Dialog */
.settings-dialog {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 10001 !important; /* Card detail modal'dan (10000) daha yüksek */
    /* VARKS container'ını blur'dan korumak için */
    isolation: isolate;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(0, 0, 0, 0.15) !important;
    backdrop-filter: blur(3px) saturate(110%) !important;
    -webkit-backdrop-filter: blur(3px) saturate(110%) !important;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    padding: 0 !important;
    margin: 0 !important;
    overflow-y: auto;
    /* Tam ekran kaplama - en üstteki alanı da kapsar */
    width: 100vw !important;
    height: 100vh !important;
    min-width: 100vw !important;
    min-height: 100vh !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    inset: 0 !important;
}

.settings-dialog.show {
    opacity: 1 !important;
    pointer-events: auto !important;
    /* Blur ve karartma tüm ekranı kapsar - en üstteki alanı da kapsar */
    background: rgba(0, 0, 0, 0.15) !important;
    backdrop-filter: blur(3px) saturate(110%) !important;
    -webkit-backdrop-filter: blur(3px) saturate(110%) !important;
    /* Tam ekran kaplama garantisi - en üstteki alanı da kapsar */
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    min-width: 100vw !important;
    min-height: 100vh !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    /* Viewport'un tamamını kaplaması için */
    position: fixed !important;
    margin: 0 !important;
    padding: 0 !important;
    /* En üstteki alanı da kapsaması için */
    transform: none !important;
    inset: 0 !important;
    /* En üstteki alanı da kapsaması için ekstra garantiler */
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
}

.settings-dialog-content {
    position: relative;
    background: var(--bg-elevated);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    box-shadow: var(--shadow-soft);
    max-width: 440px;
    width: 90%;
    max-height: calc(100vh - 40px);
    overflow: hidden;
    transform: scale(0.95);
    transition: transform 0.3s ease;
    margin: auto;
    z-index: 10002; /* Dialog içeriği blur'un üstünde */
    padding: 0; /* İçerik padding'i kaldırıldı - header ve body kendi padding'lerine sahip */
    display: flex;
    flex-direction: column;
}

.settings-dialog.show .settings-dialog-content {
    transform: scale(1);
}

.settings-dialog-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-color);
}

.settings-dialog-title {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: var(--text-color);
}

.settings-dialog-close {
    background: transparent;
    border: none;
    color: var(--text-color);
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    transition: background 0.2s ease;
}

.settings-dialog-close:hover {
    background: var(--accent-color-soft);
}

.settings-dialog-body {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow-y: auto;
    max-height: calc(100vh - 120px); /* Header ve padding için alan bırak */
    -webkit-overflow-scrolling: touch; /* iOS için smooth scroll */
}

.settings-dialog-footer {
    padding: 0 16px 16px 16px;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    width: 100%;
}

/* ============================================
   FULLSCREEN DIALOG STYLES
   ============================================ */

.fullscreen-dialog {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 10001 !important;
    isolation: isolate;
    display: flex !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    background: var(--bg-color) !important;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden;
    width: 100vw !important;
    height: 100vh !important;
    min-width: 100vw !important;
    min-height: 100vh !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    inset: 0 !important;
}

.fullscreen-dialog.show {
    opacity: 1 !important;
    pointer-events: auto !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    min-width: 100vw !important;
    min-height: 100vh !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    position: fixed !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    inset: 0 !important;
}

.fullscreen-dialog-content {
    position: relative;
    background: var(--bg-color);
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    z-index: 10002;
    padding: 0;
    margin: 0;
}

.fullscreen-dialog-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: clamp(16px, 3vw, 24px) clamp(20px, 4vw, 32px);
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
    background: var(--bg-elevated);
}

.fullscreen-dialog-title {
    margin: 0;
    font-size: clamp(20px, 4vw, 28px);
    font-weight: 600;
    color: var(--text-color);
}

.fullscreen-dialog-close {
    background: transparent;
    border: none;
    color: var(--text-color);
    cursor: pointer;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    transition: background 0.2s ease;
}

.fullscreen-dialog-close:hover {
    background: var(--accent-color-soft);
}

.fullscreen-dialog-body {
    padding: clamp(16px, 3vw, 24px);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    flex: 1;
    -webkit-overflow-scrolling: touch;
}

.settings-item {
    width: 100%;
}

.settings-item-btn {
    width: 100%;
    justify-content: flex-start; /* Icon solda, text sağda */
    padding: 12px 12px; /* Sol padding azaltıldı (16px -> 12px) */
    border-radius: 12px;
    gap: 16px; /* Icon ve text arası boşluk */
    position: relative;
    display: flex;
    align-items: center;
    flex-direction: row; /* Icon solda, text sağda */
}

/* Ayarlar dialog butonlarındaki iconlar - Daha büyük ve sola hizalı */
.settings-item-btn svg,
.settings-item-btn .btn-icon svg {
    width: 28px !important;
    height: 28px !important;
    flex-shrink: 0; /* Icon'un küçülmesini engelle */
    margin: 0; /* Margin'i sıfırla */
    display: block; /* Icon'un düzgün görünmesi için */
}

/* Ayarlar dialog butonları için dikdörtgen hover efekti - Tüm satırı kapsar */
.settings-item-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.1);
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
}

.settings-item-btn:hover::before {
    opacity: 1;
}

.settings-item-btn:active {
    transform: scale(0.97);
    transition: transform 0.1s ease;
}

.settings-item-btn:active::before {
    opacity: 0.8;
}

body[data-theme="light"] .settings-item-btn::before {
    background: rgba(0, 0, 0, 0.05);
}

/* Ayarlar dialog butonlarındaki iconlar için yuvarlak hover efekti */
.settings-item-btn .btn-icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Ayarlar dialog butonlarındaki iconlar için özel yuvarlak hover efekti */
.settings-item-btn .btn-icon::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 44px; /* Icon'un etrafında yuvarlak çerçeve (28px icon + 16px padding) */
    height: 44px;
    border-radius: 50% !important; /* Yuvarlak - !important ile zorla */
    background: rgba(255, 255, 255, 0.1);
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
    z-index: -1;
}

.settings-item-btn .btn-icon:hover::before {
    opacity: 1;
}

body[data-theme="light"] .settings-item-btn .btn-icon::before {
    background: rgba(0, 0, 0, 0.05);
}

/* Kişisel Menü Dialog */
.personal-menu-dialog {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 10000 !important;
    isolation: isolate;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(0, 0, 0, 0.15) !important;
    backdrop-filter: blur(3px) saturate(110%) !important;
    -webkit-backdrop-filter: blur(3px) saturate(110%) !important;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    padding: 0 !important;
    margin: 0 !important;
    overflow-y: auto;
    width: 100vw !important;
    height: 100vh !important;
    min-width: 100vw !important;
    min-height: 100vh !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    inset: 0 !important;
}

.personal-menu-dialog.show {
    opacity: 1 !important;
    pointer-events: auto !important;
    background: rgba(0, 0, 0, 0.15) !important;
    backdrop-filter: blur(3px) saturate(110%) !important;
    -webkit-backdrop-filter: blur(3px) saturate(110%) !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    min-width: 100vw !important;
    min-height: 100vh !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    position: fixed !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    inset: 0 !important;
}

.personal-menu-dialog-content {
    position: relative;
    background: var(--bg-elevated);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    box-shadow: var(--shadow-soft);
    max-width: 900px;
    width: 90%;
    max-height: calc(100vh - 40px);
    overflow: hidden;
    transform: scale(0.95);
    transition: transform 0.3s ease;
    margin: auto;
    z-index: 10001;
    padding: 0;
}

.personal-menu-dialog.show .personal-menu-dialog-content {
    transform: scale(1);
}

.personal-menu-dialog-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-color);
    gap: 12px;
}

.personal-menu-dialog-title {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: var(--text-color);
    flex: 1;
}

.personal-menu-dialog-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.reset-quick-menu-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    font-size: 14px;
    border-radius: 8px;
    transition: all 0.2s ease;
    background: var(--bg-elevated);
    border: 1px solid var(--border-color);
    color: var(--text-color);
    cursor: pointer;
}

.reset-quick-menu-btn:hover {
    background: var(--accent-color-soft);
    border-color: var(--accent-color);
    transform: translateY(-1px);
}

.reset-quick-menu-btn svg {
    width: 16px;
    height: 16px;
}

.personal-menu-dialog-close {
    background: transparent;
    border: none;
    color: var(--text-color);
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    transition: background 0.2s ease;
}

.personal-menu-dialog-close:hover {
    background: var(--accent-color-soft);
}

.personal-menu-dialog-body {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow-y: auto;
    max-height: calc(100vh - 120px); /* Header ve padding için alan bırak */
    -webkit-overflow-scrolling: touch; /* iOS için smooth scroll */
}

/* Hızlı Menü Tasarım Dialog */
.quick-menu-designer-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    min-height: 400px;
}

.quick-menu-designer-left,
.quick-menu-designer-right {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.quick-menu-section-title {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-color);
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-color);
}

.quick-menu-all-buttons,
.quick-menu-selected-buttons {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 300px;
    max-height: 500px;
    overflow-y: auto;
    padding: 8px;
    border: 2px dashed var(--border-color);
    border-radius: 8px;
    background: var(--bg-color);
    position: relative;
}

.quick-menu-all-buttons.drag-over,
.quick-menu-selected-buttons.drag-over {
    border-color: var(--accent-color);
    background: var(--accent-color-soft);
}

.quick-menu-button-item {
    padding: 12px 16px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    cursor: move;
    user-select: none;
    transition: all 0.2s ease;
    color: var(--text-color);
    font-size: 14px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Seçili olanlar (sağ tarafta) - Yeşil çizgi */
.quick-menu-selected-buttons .quick-menu-button-item {
    border-color: #22c55e;
    border-width: 2px;
}

/* Seçili olmayanlar (sol tarafta) - Kırmızı çizgi */
.quick-menu-all-buttons .quick-menu-button-item {
    border-color: #ef4444;
    border-width: 2px;
}

.quick-menu-button-item:hover {
    background: var(--accent-color-soft);
    border-color: var(--accent-color);
    transform: translateX(4px);
}

.quick-menu-button-item.dragging {
    opacity: 0.5;
    cursor: grabbing;
}

.quick-menu-button-item.drag-over {
    border-color: var(--accent-color);
    background: var(--accent-color-soft);
}

.quick-menu-button-item .remove-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.quick-menu-button-item:hover .remove-btn {
    opacity: 1;
}

.quick-menu-button-item .remove-btn:hover {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.quick-menu-selected-buttons .quick-menu-button-item {
    cursor: move;
    -webkit-user-select: none;
    user-select: none;
    touch-action: none; /* Mobil dokunmatik için */
}

.quick-menu-all-buttons .quick-menu-button-item {
    cursor: grab;
    -webkit-user-select: none;
    user-select: none;
    touch-action: none; /* Mobil dokunmatik için */
}

.quick-menu-all-buttons .quick-menu-button-item:active {
    cursor: grabbing;
}

/* Mobil dokunmatik için drag desteği */
@media (max-width: 768px) {
    .quick-menu-button-item {
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        user-select: none;
    }
    
    .quick-menu-selected-buttons .quick-menu-button-item,
    .quick-menu-all-buttons .quick-menu-button-item {
        cursor: grab;
    }
    
    .quick-menu-selected-buttons .quick-menu-button-item:active,
    .quick-menu-all-buttons .quick-menu-button-item:active {
        cursor: grabbing;
    }
}

/* Responsive */
@media (max-width: 768px) {
    .quick-menu-designer-container {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    
    .quick-menu-all-buttons,
    .quick-menu-selected-buttons {
        min-height: 200px;
        max-height: 300px;
    }
}

/* Hesap Makinesi */
.calculator-dialog {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10005;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(3px) saturate(110%);
    -webkit-backdrop-filter: blur(3px) saturate(110%);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    padding: 0;
    margin: 0;
}

.calculator-dialog.show {
    opacity: 1;
    pointer-events: auto;
}

.calculator-dialog-content {
    position: fixed;
    background: var(--bg-elevated);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    box-shadow: var(--shadow-soft);
    width: 320px;
    max-width: calc(100vw - 20px);
    max-height: calc(100vh - 20px);
    overflow: hidden;
    transform: scale(0.95);
    transition: transform 0.3s ease, left 0s, top 0s;
    left: 50%;
    top: 50%;
    margin-left: -160px; /* width/2 */
    margin-top: -200px; /* yaklaşık yükseklik/2 */
    display: flex;
    flex-direction: column;
}

.calculator-dialog.show .calculator-dialog-content {
    transform: scale(1);
}

.calculator-dialog-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color);
    cursor: move;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
}

.calculator-dialog-title {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--text-color);
    flex: 1;
}

.calculator-dialog-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.calculator-dialog-theme-btn {
    background: transparent;
    border: none;
    color: var(--text-color);
    cursor: pointer;
    padding: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    transition: background 0.2s ease;
    flex-shrink: 0;
}

.calculator-dialog-theme-btn:hover {
    background: var(--accent-color-soft);
}

.calculator-dialog-theme-btn svg {
    width: 18px;
    height: 18px;
}

.calculator-dialog-close {
    background: transparent;
    border: none;
    color: var(--text-color);
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    transition: background 0.2s ease;
    flex-shrink: 0;
}

.calculator-dialog-close:hover {
    background: var(--accent-color-soft);
}

/* Tema iconları */
body[data-theme="dark"] .calculator-dialog-theme-btn .theme-icon-sun {
    display: block;
}

body[data-theme="dark"] .calculator-dialog-theme-btn .theme-icon-moon {
    display: none;
}

body[data-theme="light"] .calculator-dialog-theme-btn .theme-icon-sun {
    display: none;
}

body[data-theme="light"] .calculator-dialog-theme-btn .theme-icon-moon {
    display: block;
}

.calculator-dialog-body {
    padding: 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.calculator-display {
    width: 100%;
    min-height: 60px;
    max-height: 80px;
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 16px;
    font-size: clamp(20px, 5vw, 32px);
    font-weight: 600;
    color: var(--text-color);
    text-align: right;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    margin-bottom: 16px;
    font-family: 'Courier New', monospace;
    flex-shrink: 0;
}

.calculator-buttons {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(6px, 1.5vw, 8px);
    flex: 1;
    min-height: 0;
}

.calculator-btn {
    padding: clamp(10px, 2.5vw, 16px);
    font-size: clamp(16px, 4vw, 20px);
    font-weight: 600;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-elevated);
    color: var(--text-color);
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    min-height: 44px; /* Dokunmatik için minimum yükseklik */
}

.calculator-btn:hover {
    background: var(--accent-color-soft);
    border-color: var(--accent-color);
    transform: translateY(-2px);
}

.calculator-btn:active {
    transform: translateY(0);
    background: var(--accent-color);
    color: white;
}

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

.calculator-btn-number:hover {
    background: var(--bg-elevated);
}

.calculator-btn-operator {
    background: var(--accent-color-soft);
    color: var(--accent-color);
}

.calculator-btn-operator:hover {
    background: var(--accent-color);
    color: white;
}

.calculator-btn-equals {
    background: var(--accent-color);
    color: white;
    grid-column: span 1;
}

.calculator-btn-equals:hover {
    background: var(--accent-color);
    opacity: 0.9;
}

.calculator-btn-clear {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.calculator-btn-clear:hover {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

.calculator-btn-zero {
    grid-column: span 2;
}

/* Responsive - Telefon Dikey */
@media (max-width: 480px) {
    .calculator-dialog-content {
        width: calc(100vw - 16px);
        max-width: calc(100vw - 16px);
        max-height: calc(100vh - 16px);
        margin-left: 0;
        margin-top: 0;
        left: 8px;
        right: 8px;
        top: 8px;
        bottom: 8px;
        transform: scale(0.95);
    }
    
    .calculator-dialog.show .calculator-dialog-content {
        transform: scale(1);
    }
    
    .calculator-dialog-header {
        padding: clamp(10px, 2vw, 16px) clamp(12px, 3vw, 20px);
    }
    
    .calculator-dialog-title {
        font-size: clamp(14px, 3.5vw, 18px);
    }
    
    .calculator-dialog-body {
        padding: clamp(12px, 3vw, 20px);
    }
    
    .calculator-display {
        min-height: clamp(45px, 12vw, 60px);
        max-height: clamp(50px, 13vw, 80px);
        padding: clamp(10px, 2.5vw, 16px);
        margin-bottom: clamp(10px, 2.5vw, 16px);
    }
    
    .calculator-buttons {
        gap: clamp(4px, 1vw, 6px);
    }
    
    .calculator-btn {
        min-height: clamp(40px, 10vw, 44px);
    }
}

/* Responsive - Telefon Yatay */
@media (max-width: 768px) and (orientation: landscape), (max-height: 600px) {
    .calculator-dialog-content {
        width: auto;
        max-width: calc(100vw - 12px);
        max-height: calc(100vh - 12px);
        margin-left: 0;
        margin-top: 0;
        left: 6px;
        right: 6px;
        top: 6px;
        bottom: 6px;
        transform: scale(0.95);
        border-radius: 12px;
    }
    
    .calculator-dialog.show .calculator-dialog-content {
        transform: scale(1);
    }
    
    .calculator-dialog-header {
        padding: clamp(6px, 1.2vh, 10px) clamp(8px, 1.5vw, 14px);
        flex-shrink: 0;
        min-height: 36px;
    }
    
    .calculator-dialog-title {
        font-size: clamp(11px, 2vh, 14px);
    }
    
    .calculator-dialog-theme-btn,
    .calculator-dialog-close {
        padding: 4px;
    }
    
    .calculator-dialog-theme-btn svg,
    .calculator-dialog-close svg {
        width: clamp(14px, 2.5vh, 16px);
        height: clamp(14px, 2.5vh, 16px);
    }
    
    .calculator-dialog-body {
        padding: clamp(6px, 1.2vh, 10px);
        flex: 1;
        min-height: 0;
        overflow: hidden;
    }
    
    .calculator-display {
        min-height: clamp(30px, 7vh, 45px);
        max-height: clamp(35px, 8vh, 50px);
        padding: clamp(6px, 1.2vh, 10px);
        margin-bottom: clamp(6px, 1.2vh, 10px);
        font-size: clamp(16px, 3.5vh, 22px);
        flex-shrink: 0;
    }
    
    .calculator-buttons {
        gap: clamp(3px, 0.8vh, 5px);
        flex: 1;
        min-height: 0;
        grid-template-columns: repeat(4, 1fr);
    }
    
    .calculator-btn {
        padding: clamp(4px, 1vh, 8px);
        font-size: clamp(12px, 2.5vh, 16px);
        min-height: clamp(30px, 7vh, 38px);
        border-radius: 6px;
    }
}

/* Çok küçük yatay ekranlar için ekstra optimizasyon */
@media (max-width: 640px) and (orientation: landscape), (max-height: 400px) {
    .calculator-dialog-content {
        max-width: calc(100vw - 8px);
        max-height: calc(100vh - 8px);
        left: 4px;
        right: 4px;
        top: 4px;
        bottom: 4px;
        border-radius: 10px;
    }
    
    .calculator-dialog-header {
        padding: 4px 8px;
        min-height: 32px;
    }
    
    .calculator-dialog-title {
        font-size: 10px;
    }
    
    .calculator-dialog-body {
        padding: 4px;
    }
    
    .calculator-display {
        min-height: 28px;
        max-height: 32px;
        padding: 4px 8px;
        margin-bottom: 4px;
        font-size: 14px;
    }
    
    .calculator-buttons {
        gap: 2px;
    }
    
    .calculator-btn {
        padding: 3px;
        font-size: 11px;
        min-height: 26px;
    }
}

/* Tablet */
@media (min-width: 481px) and (max-width: 768px) {
    .calculator-dialog-content {
        width: clamp(300px, 80vw, 400px);
        max-width: calc(100vw - 20px);
        max-height: calc(100vh - 20px);
    }
}

.settings-item-label {
    font-size: 15px;
    color: var(--text-color);
    font-weight: 500;
}

/* Mağaza Seç Dialog */
.store-picker-dialog {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 10001 !important;
    isolation: isolate;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(0, 0, 0, 0.15) !important;
    backdrop-filter: blur(3px) saturate(110%) !important;
    -webkit-backdrop-filter: blur(3px) saturate(110%) !important;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    padding: 0 !important;
    margin: 0 !important;
    overflow-y: auto;
    width: 100vw !important;
    height: 100vh !important;
    min-width: 100vw !important;
    min-height: 100vh !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    inset: 0 !important;
}

.store-picker-dialog.show {
    opacity: 1 !important;
    pointer-events: auto !important;
    background: rgba(0, 0, 0, 0.15) !important;
    backdrop-filter: blur(3px) saturate(110%) !important;
    -webkit-backdrop-filter: blur(3px) saturate(110%) !important;
}

.store-picker-dialog-content {
    position: relative;
    background: var(--bg-elevated);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    box-shadow: var(--shadow-soft);
    max-width: 500px;
    width: 90%;
    max-height: 80vh;
    height: auto;
    min-height: 300px;
    overflow: hidden;
    transform: scale(0.95);
    transition: transform 0.3s ease;
    margin: auto;
    z-index: 10001;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.store-picker-dialog.show .store-picker-dialog-content {
    transform: scale(1);
}

.store-picker-dialog-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-color);
}

.store-picker-dialog-title {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: var(--text-color);
}

.store-picker-dialog-close {
    background: transparent;
    border: none;
    color: var(--text-color);
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    transition: background 0.2s ease;
}

.store-picker-dialog-close:hover {
    background: var(--accent-color-soft);
}

.store-picker-dialog-close:active {
    transform: scale(0.9);
    transition: transform 0.1s ease;
}

.store-picker-dialog-body {
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    flex: 1;
    height: 100%;
    min-height: 0;
    overflow-y: auto;
}

.store-picker-search-container {
    position: relative;
    width: 100%;
}

.store-picker-search-input {
    width: 100%;
    padding: 10px 40px 10px 12px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-elevated);
    color: var(--text-color);
    font-size: 14px;
    transition: border-color 0.2s ease;
    box-sizing: border-box;
}

.store-picker-search-input:focus {
    outline: none;
    border-color: var(--accent-color);
}

.store-picker-search-icon {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-color);
    opacity: 0.5;
    pointer-events: none;
}

.store-picker-no-results {
    padding: 20px;
    text-align: center;
    color: var(--text-color);
    opacity: 0.6;
    font-size: 14px;
}

/* Mağaza Seç Dialog - Loading Spinner */
.store-picker-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    min-height: 200px;
}

.store-picker-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid rgba(59, 130, 246, 0.2);
    border-top-color: var(--accent-color);
    border-right-color: var(--accent-color);
    border-radius: 50%;
    animation: spinner-rotate 0.8s linear infinite;
    display: block;
    flex-shrink: 0;
    box-sizing: border-box;
}

.store-picker-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.store-picker-btn-select-all,
.store-picker-btn-deselect-all {
    flex: 1;
    min-width: 120px;
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s ease;
    border: 1px solid var(--border-color);
    background: var(--bg-elevated);
    color: var(--text-color);
    cursor: pointer;
}

.store-picker-btn-select-all:hover,
.store-picker-btn-deselect-all:hover {
    background: var(--accent-color-soft);
    transform: translateY(-1px);
}

.store-picker-btn-select-all:active,
.store-picker-btn-deselect-all:active {
    transform: scale(0.95);
    transition: transform 0.1s ease;
}

.store-picker-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 350px; /* 7 mağaza için (her biri ~50px: padding 24px + content 18px + gap 8px) */
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 4px; /* Scrollbar için biraz padding */
}

/* Scrollbar stilleri */
.store-picker-list::-webkit-scrollbar {
    width: 6px;
}

.store-picker-list::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 3px;
}

.store-picker-list::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 3px;
}

.store-picker-list::-webkit-scrollbar-thumb:hover {
    background: var(--border-color);
}

.store-picker-item {
    width: 100%;
}

.store-picker-label {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    user-select: none;
    -webkit-user-select: none;
    border: 2px solid transparent;
    background: var(--bg-elevated);
    position: relative;
    overflow: hidden;
}

.store-picker-label::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--accent-color);
    transform: scaleY(0);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: bottom;
}

.store-picker-label:hover {
    background: var(--accent-color-soft);
    transform: translateX(4px);
    border-color: var(--accent-color);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.store-picker-label:hover::before {
    transform: scaleY(1);
}

.store-picker-checkbox {
    width: 0;
    height: 0;
    opacity: 0;
    position: absolute;
    pointer-events: none;
}

.store-picker-checkbox + .store-picker-name {
    position: relative;
    padding-left: 40px;
}

.store-picker-checkbox + .store-picker-name::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    border: 2px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-color);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.store-picker-checkbox:checked + .store-picker-name::before {
    background: linear-gradient(135deg, var(--accent-color), #4f9cf9);
    border-color: var(--accent-color);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
    transform: translateY(-50%) scale(1.1);
}

.store-picker-checkbox:checked + .store-picker-name::after {
    content: '✓';
    position: absolute;
    left: 6px;
    top: 50%;
    transform: translateY(-50%);
    color: white;
    font-size: 16px;
    font-weight: bold;
    line-height: 1;
    z-index: 1;
}

.store-picker-name {
    font-size: 15px;
    color: var(--text-color);
    font-weight: 400;
    flex: 1;
}

.store-picker-checkbox:checked + .store-picker-name {
    font-weight: 600;
    color: var(--accent-color);
}

/* Light Theme */
body[data-theme="light"] .store-picker-btn-select-all:hover,
body[data-theme="light"] .store-picker-btn-deselect-all:hover {
    background: rgba(0, 0, 0, 0.05);
}

body[data-theme="light"] .store-picker-label:hover {
    background: rgba(0, 0, 0, 0.05);
    border-color: var(--accent-color);
}

/* Tarih Seç Dialog */
.date-picker-dialog {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 10001 !important;
    isolation: isolate;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(0, 0, 0, 0.15) !important;
    backdrop-filter: blur(3px) saturate(110%) !important;
    -webkit-backdrop-filter: blur(3px) saturate(110%) !important;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    padding: 0 !important;
    margin: 0 !important;
    overflow-y: auto;
    width: 100vw !important;
    height: 100vh !important;
    min-width: 100vw !important;
    min-height: 100vh !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    inset: 0 !important;
}

.date-picker-dialog.show {
    opacity: 1 !important;
    pointer-events: auto !important;
    background: rgba(0, 0, 0, 0.15) !important;
    backdrop-filter: blur(3px) saturate(110%) !important;
    -webkit-backdrop-filter: blur(3px) saturate(110%) !important;
}

.date-picker-dialog-content {
    position: relative;
    background: var(--bg-elevated) !important;
    border: 1px solid var(--border-color);
    border-radius: 16px;
    box-shadow: var(--shadow-soft);
    max-width: 500px;
    width: 90%;
    min-height: 400px;
    max-height: calc(100vh - 40px);
    overflow: visible !important;
    transform: scale(0.95);
    transition: transform 0.3s ease;
    margin: auto;
    z-index: 10001;
    padding: 0;
    display: flex !important;
    flex-direction: column;
}

.date-picker-dialog.show .date-picker-dialog-content {
    transform: scale(1);
}

.date-picker-dialog-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-color);
}

.date-picker-dialog-title {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: var(--text-color);
}

.date-picker-dialog-close {
    background: transparent;
    border: none;
    color: var(--text-color);
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    transition: background 0.2s ease;
}

.date-picker-dialog-close:hover {
    background: var(--accent-color-soft);
}

.date-picker-dialog-close:active {
    transform: scale(0.9);
    transition: transform 0.1s ease;
}

.date-picker-dialog-body {
    padding: 20px 24px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
    min-height: 300px !important;
    flex: 1 !important;
    overflow-y: auto !important;
    overflow-x: visible !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    position: relative !important;
    z-index: 10 !important;
}

.date-picker-dialog-body > * {
    visibility: visible !important;
    opacity: 1 !important;
    display: block !important;
}

/* Date Picker Dialog Body Scrollbar Stilleri - Tema Uyumlu */
.date-picker-dialog-body::-webkit-scrollbar {
    width: 8px;
}

.date-picker-dialog-body::-webkit-scrollbar-track {
    background: transparent;
}

.date-picker-dialog-body::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 4px;
    transition: background 0.2s ease;
}

.date-picker-dialog-body::-webkit-scrollbar-thumb:hover {
    background: var(--border-color);
}

/* Firefox için scrollbar stilleri */
.date-picker-dialog-body {
    scrollbar-width: thin;
    scrollbar-color: var(--border-color) transparent;
}

.date-picker-dialog-body:hover {
    scrollbar-color: var(--border-color) transparent;
}

.date-picker-method-selector {
    display: flex;
    gap: 8px;
    border-bottom: 2px solid var(--border-color);
    padding-bottom: 16px;
    margin-bottom: 24px;
    background: transparent;
    padding-top: 12px;
}

.date-picker-method-btn {
    flex: 1;
    padding: 12px 20px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 500;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 2px solid var(--border-color);
    background: transparent;
    color: var(--text-color);
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.date-picker-method-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transition: left 0.5s ease;
}

.date-picker-method-btn:hover::before {
    left: 100%;
}

.date-picker-method-btn:hover {
    background: var(--accent-color-soft);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.date-picker-method-btn.active {
    background: transparent;
    border-color: var(--accent-color);
    color: var(--accent-color);
    font-weight: 600;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    transform: translateY(-2px);
}

.date-picker-method-btn:active {
    transform: scale(0.95);
    transition: transform 0.1s ease;
}

.date-picker-method-content {
    display: none !important;
    flex-direction: column !important;
    gap: 16px !important;
    width: 100% !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.date-picker-method-content.active {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.date-input-wrapper {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px;
    background: var(--bg-elevated);
    border-radius: 12px;
    border: 1px solid var(--border-color);
    transition: all 0.3s ease;
    position: relative;
}

.date-input-wrapper::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--accent-color), transparent);
    border-radius: 12px 12px 0 0;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.date-input-wrapper:focus-within::before {
    opacity: 1;
}

.date-input-wrapper:focus-within {
    border-color: var(--accent-color);
    box-shadow: 0 4px 16px rgba(59, 130, 246, 0.1);
    transform: translateY(-2px);
}

.date-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-color);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.date-input-field {
    padding: 14px 16px;
    border: 2px solid var(--border-color);
    border-radius: 10px;
    background: var(--bg-color);
    color: var(--text-color);
    font-size: 15px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    width: 100%;
    box-sizing: border-box;
}

/* Tarih input calendar icon rengi - Tema uyumlu */
.date-input-field::-webkit-calendar-picker-indicator {
    filter: invert(0);
    cursor: pointer;
    opacity: 0.8;
    transition: opacity 0.2s ease;
}

.date-input-field::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}

/* Koyu temada calendar icon rengini açık yap */
body[data-theme="dark"] .date-input-field::-webkit-calendar-picker-indicator {
    filter: invert(1);
    opacity: 0.9;
}

body[data-theme="dark"] .date-input-field::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}

.date-input-field:hover {
    border-color: var(--accent-color);
    background: var(--bg-elevated);
}

.date-input-field:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    transform: translateY(-1px);
}

.date-select-field {
    padding: 14px 16px;
    border: 2px solid var(--border-color);
    border-radius: 10px;
    background: var(--bg-color);
    color: var(--text-color);
    font-size: 15px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    width: 100%;
    box-sizing: border-box;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 40px;
}

.date-select-field:hover {
    border-color: var(--accent-color);
    background-color: var(--bg-elevated);
}

.date-select-field:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    transform: translateY(-1px);
}

.period-buttons-wrapper {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    width: 100%;
    padding: 4px;
    background: var(--bg-elevated);
    border-radius: 12px;
    border: 1px solid var(--border-color);
}

.period-button {
    padding: 14px 16px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 2px solid transparent;
    background: var(--bg-color);
    color: var(--text-color);
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.period-button::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(59, 130, 246, 0.1);
    transform: translate(-50%, -50%);
    transition: width 0.4s ease, height 0.4s ease;
}

.period-button:hover::before {
    width: 200px;
    height: 200px;
}

.period-button:hover {
    background: var(--accent-color-soft);
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
    border-color: var(--accent-color);
}

.period-button.active {
    background: linear-gradient(135deg, var(--accent-color), #4f9cf9);
    border-color: var(--accent-color);
    color: white;
    font-weight: 700;
    box-shadow: 0 6px 24px rgba(59, 130, 246, 0.4);
    transform: translateY(-3px) scale(1.02);
}

.period-button.active::before {
    background: rgba(255, 255, 255, 0.2);
    width: 200px;
    height: 200px;
}

.period-button:active {
    transform: scale(0.95);
    transition: transform 0.1s ease;
}

.date-picker-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding-top: 20px;
    margin-top: 20px;
    border-top: 2px solid var(--border-color);
}

.date-confirm-btn {
    padding: 14px 32px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 2px solid var(--accent-color);
    background: linear-gradient(135deg, var(--accent-color), #4f9cf9);
    color: white;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(59, 130, 246, 0.3);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.date-confirm-btn::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.5s ease;
}

.date-confirm-btn:hover::before {
    left: 100%;
}

.date-confirm-btn:hover {
    background: linear-gradient(135deg, #4f9cf9, var(--accent-color));
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(59, 130, 246, 0.4);
}

.date-confirm-btn:active {
    transform: scale(0.95) translateY(0);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
    transition: transform 0.1s ease;
}

/* Tarih icon butonu için özel stil */
.date-btn {
    flex-direction: column;
    gap: 2px;
    position: relative;
}

.date-btn svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    transition: stroke 0.3s ease;
}

.date-btn.has-selection svg {
    stroke: var(--accent-color);
    color: var(--accent-color);
}

.store-btn {
    position: relative;
    flex-direction: column;
    gap: 2px;
}

.store-btn svg {
    transition: stroke 0.3s ease;
}

.store-btn.has-selection svg {
    stroke: var(--accent-color);
    color: var(--accent-color);
}

/* Mağaza icon üzerinde text gösterimi */
.store-icon-text {
    font-size: 9px;
    font-weight: 600;
    color: currentColor;
    pointer-events: none;
    white-space: nowrap;
    line-height: 1;
    margin-top: -2px;
    position: absolute;
    bottom: -2px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--accent-color);
    color: white;
    border-radius: 10px;
    padding: 1px 4px;
    min-width: 14px;
    text-align: center;
    z-index: 1;
}

/* X icon butonu (sağ üst köşe) */
.icon-close-btn {
    position: absolute;
    top: -5px;
    right: -5px;
    width: 18px;
    height: 18px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    transition: all 0.2s ease;
    backdrop-filter: blur(8px);
}

.icon-close-btn:hover {
    background: var(--bg-color);
    border-color: var(--border-color);
    transform: scale(1.15);
    box-shadow: 0 3px 15px rgba(0, 0, 0, 0.4);
}

.icon-close-btn:active {
    transform: scale(0.9);
    transition: transform 0.1s ease;
}

.icon-close-btn svg {
    width: 9px;
    height: 9px;
    stroke: var(--text-color);
    color: var(--text-color);
    stroke-width: 3;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.3));
}

/* Telefonlarda X ikonunu gizle */
@media (max-width: 1024px) {
    .icon-close-btn {
        display: none !important;
    }
    
    /* Telefonda takvim iconunu 17px yap */
    .date-btn svg {
        width: 17px !important;
        height: 17px !important;
    }
}

/* Tarih icon altında text gösterimi */
.date-icon-text {
    font-size: 9px;
    font-weight: 600;
    color: currentColor;
    pointer-events: none;
    white-space: pre-line;
    line-height: 1.2;
    text-align: center;
    position: absolute;
    bottom: -2px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--accent-color);
    color: white;
    border-radius: 8px;
    padding: 2px 4px;
    min-width: 18px;
    z-index: 1;
}

/* Double modda ana sayfa iconlarını gizle */
.dashboard-page.double-mode #date-btn,
.dashboard-page.double-mode #store-btn {
    display: none !important;
}

/* Double modda mobil portrait container'daki filtre iconlarını gizle */
.dashboard-page.double-mode .dashboard-filters-container-mobile-portrait {
    display: none !important;
}

/* Light Theme */
body[data-theme="light"] .date-picker-method-btn:hover {
    background: rgba(0, 0, 0, 0.05);
}

body[data-theme="light"] .period-btn:hover {
    background: rgba(0, 0, 0, 0.05);
}

/* Tüm iOS/Android Telefon Yatay Mod - Dialog Ölçeklendirme */
@media (orientation: landscape) and (max-height: 600px) {
    /* Sayfa scroll'unu engelle */
    html, body {
        overflow: hidden !important;
        height: 100vh !important;
        height: 100dvh !important;
    }
    
    .date-picker-dialog-content {
        max-width: 90% !important;
        width: 90% !important;
        max-height: 70vh !important;
        height: auto !important;
        min-height: auto !important;
    }
    
    .store-picker-dialog-content {
        max-width: 90% !important;
        width: 90% !important;
        max-height: 70vh !important;
        height: auto !important;
        min-height: auto !important;
    }
    
    .date-picker-dialog-header {
        padding: 8px 12px !important;
        flex-shrink: 0;
    }
    
    .date-picker-dialog-title {
        font-size: 14px !important;
    }
    
    .date-picker-dialog-body {
        padding: 8px 12px !important;
        gap: 8px !important;
        min-height: 0 !important;
        max-height: calc(100vh - 80px) !important;
        overflow-y: auto !important;
        flex: 1;
    }
    
    .store-picker-dialog-header {
        padding: 8px 12px !important;
        flex-shrink: 0;
    }
    
    .store-picker-dialog-title {
        font-size: 14px !important;
    }
    
    .store-picker-dialog-body {
        padding: 8px 12px !important;
        gap: 8px !important;
        min-height: 0 !important;
        max-height: calc(100vh - 80px) !important;
        overflow-y: auto !important;
        flex: 1;
    }
    
    .date-picker-method-selector {
        padding-bottom: 6px !important;
        margin-bottom: 6px !important;
        gap: 6px !important;
        flex-shrink: 0;
    }
    
    .date-picker-method-btn {
        padding: 6px 10px !important;
        font-size: 11px !important;
    }
    
    .date-picker-method-content {
        gap: 8px !important;
        flex: 1;
        min-height: 0;
        overflow-y: auto;
    }
    
    .date-picker-method-content.active {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    .date-input-wrapper {
        gap: 4px !important;
    }
    
    .date-label {
        font-size: 11px !important;
    }
    
    .date-input-field {
        padding: 6px 8px !important;
        font-size: 11px !important;
    }
    
    .date-select-field {
        padding: 6px 8px !important;
        font-size: 11px !important;
    }
    
    .period-buttons-wrapper {
        gap: 4px !important;
    }
    
    .period-button {
        padding: 6px 8px !important;
        font-size: 11px !important;
    }
}

/* Tarih Dialog (card-detail-date-dialog) için telefon yatay görünüm - Scroll düzeltmesi */
@media (orientation: landscape) and (max-height: 600px) {
    /* Tarih dialogu için özel ayarlar */
    #card-detail-date-dialog.settings-dialog .settings-dialog-content {
        max-width: 90% !important;
        width: 90% !important;
        max-height: calc(100vh - 10px) !important;
        height: calc(100vh - 10px) !important;
        min-height: calc(100vh - 10px) !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
    }
    
    #card-detail-date-dialog.settings-dialog .settings-dialog-header {
        padding: 8px 12px !important;
        flex-shrink: 0 !important;
    }
    
    #card-detail-date-dialog.settings-dialog .settings-dialog-title {
        font-size: 14px !important;
    }
    
    #card-detail-date-dialog.settings-dialog .settings-dialog-body {
        padding: 8px 12px !important;
        gap: 8px !important;
        min-height: 0 !important;
        flex: 1 !important;
        overflow-y: auto !important;
        overflow-x: visible !important;
        max-height: none !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    #card-detail-date-dialog.settings-dialog .settings-dialog-footer {
        padding: 8px 12px !important;
        flex-shrink: 0 !important;
    }
    
    /* Date picker container için */
    #card-detail-date-dialog.settings-dialog #card-detail-date-picker-container {
        flex-shrink: 0 !important;
    }
    
    /* Form input'lar için */
    #card-detail-date-dialog.settings-dialog .form-input {
        padding: 6px 8px !important;
        font-size: 12px !important;
    }
    
    #card-detail-date-dialog.settings-dialog label {
        font-size: 12px !important;
    }
    
    #card-detail-date-dialog.settings-dialog label span {
        font-size: 12px !important;
    }
    
    /* Button'lar için */
    #card-detail-date-dialog.settings-dialog .btn {
        padding: 6px 12px !important;
        font-size: 12px !important;
    }
}

/* Tüm Settings Dialog'lar için telefon yatay görünüm - Scroll düzeltmesi */
@media (orientation: landscape) and (max-height: 600px) {
    /* Tüm settings dialog'lar için genel ayarlar */
    .settings-dialog .settings-dialog-content {
        max-width: 90% !important;
        width: 90% !important;
        max-height: calc(100vh - 10px) !important;
        height: calc(100vh - 10px) !important;
        min-height: calc(100vh - 10px) !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
    }
    
    /* Küçük dialoglar için (max-width: 400px) - gereksiz boşluğu kaldır */
    .settings-dialog .settings-dialog-content[style*="max-width: 400px"],
    .settings-dialog .settings-dialog-content[style*="max-width:400px"],
    #card-delete-dialog .settings-dialog-content,
    #workspace-delete-dialog .settings-dialog-content,
    #board-delete-dialog .settings-dialog-content,
    #list-delete-dialog .settings-dialog-content,
    #workspace-member-remove-dialog .settings-dialog-content,
    #list-dialog .settings-dialog-content,
    #comment-edit-dialog .settings-dialog-content,
    #checklist-dialog .settings-dialog-content {
        height: auto !important;
        min-height: auto !important;
        max-height: calc(100vh - 10px) !important;
    }
    
    /* Küçük dialoglar için body - flex: 1 yerine auto */
    .settings-dialog .settings-dialog-content[style*="max-width: 400px"] .settings-dialog-body,
    .settings-dialog .settings-dialog-content[style*="max-width:400px"] .settings-dialog-body,
    #card-delete-dialog .settings-dialog-body,
    #workspace-delete-dialog .settings-dialog-body,
    #board-delete-dialog .settings-dialog-body,
    #list-delete-dialog .settings-dialog-body,
    #workspace-member-remove-dialog .settings-dialog-body,
    #list-dialog .settings-dialog-body,
    #comment-edit-dialog .settings-dialog-body,
    #checklist-dialog .settings-dialog-body {
        flex: 0 1 auto !important;
        min-height: 0 !important;
        overflow-y: visible !important;
    }
    
    .settings-dialog .settings-dialog-header {
        padding: 8px 12px !important;
        flex-shrink: 0 !important;
    }
    
    .settings-dialog .settings-dialog-title {
        font-size: 14px !important;
    }
    
    .settings-dialog .settings-dialog-body {
        padding: 8px 12px !important;
        gap: 8px !important;
        min-height: 0 !important;
        flex: 1 !important;
        overflow-y: auto !important;
        overflow-x: visible !important;
        max-height: none !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    .settings-dialog .settings-dialog-footer {
        padding: 8px 12px !important;
        flex-shrink: 0 !important;
    }
    
    /* Form input'lar için */
    .settings-dialog .form-input {
        padding: 6px 8px !important;
        font-size: 12px !important;
    }
    
    .settings-dialog label {
        font-size: 12px !important;
    }
    
    .settings-dialog label span {
        font-size: 12px !important;
    }
    
    /* Button'lar için */
    .settings-dialog .btn {
        padding: 6px 12px !important;
        font-size: 12px !important;
    }
    
    /* Textarea için */
    .settings-dialog textarea {
        font-size: 12px !important;
        padding: 6px 8px !important;
    }
    
    /* Select için */
    .settings-dialog select {
        font-size: 12px !important;
        padding: 6px 8px !important;
    }
}
    
    .date-picker-actions {
        padding-top: 4px !important;
        margin-top: 4px !important;
        flex-shrink: 0;
    }
    
    .date-confirm-btn {
        padding: 6px 16px !important;
        font-size: 11px !important;
    }
    
    .store-picker-dialog-content {
        max-width: 90% !important;
        width: 90% !important;
        max-height: 85vh !important;
        height: auto !important;
        min-height: 300px !important;
    }
    
    .store-picker-dialog-header {
        padding: 8px 12px !important;
        flex-shrink: 0;
    }
    
    .store-picker-dialog-title {
        font-size: 14px !important;
    }
    
    .store-picker-dialog-body {
        padding: 8px 12px !important;
        gap: 8px !important;
        min-height: 0 !important;
        max-height: calc(100vh - 80px) !important;
        overflow-y: auto !important;
        flex: 1;
    }
    
    .store-picker-search-container {
        flex-shrink: 0;
    }
    
    .store-picker-search-input {
        padding: 6px 30px 6px 8px !important;
        font-size: 11px !important;
    }
    
    .store-picker-search-icon {
        width: 14px !important;
        height: 14px !important;
        right: 8px !important;
    }
    
    .store-picker-actions {
        gap: 4px !important;
        flex-shrink: 0;
    }
    
    .store-picker-btn-select-all,
    .store-picker-btn-deselect-all {
        padding: 4px 8px !important;
        font-size: 10px !important;
        min-width: auto !important;
        border-radius: 6px !important;
    }
    
    .store-picker-list {
        max-height: calc(100vh - 220px) !important;
        gap: 4px !important;
        flex: 1;
        min-height: 0;
        overflow-y: auto;
    }
    
    .store-picker-label {
        padding: 6px 8px !important;
        gap: 6px !important;
    }
    
    .store-picker-checkbox {
        width: 14px !important;
        height: 14px !important;
    }
    
    .store-picker-name {
        font-size: 11px !important;
    }
}


/* Karşılaştırma modu aktif durumu */
.compare-btn {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.compare-btn.active {
    background: rgba(59, 130, 246, 0.2);
    color: var(--accent-color);
    transform: scale(1.05);
}

.compare-btn.active:hover {
    transform: scale(1.08);
}

body[data-theme="light"] .compare-btn.active {
    background: rgba(59, 130, 246, 0.15);
}

/* Karşılaştırma modu icon geçiş animasyonu */
.compare-icon {
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.compare-btn.active .compare-icon-single {
    opacity: 0;
    transform: rotate(-90deg) scale(0.8);
}

.compare-btn.active .compare-icon-double {
    display: block !important;
    opacity: 1;
    transform: rotate(0deg) scale(1);
    animation: iconPopIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.compare-btn.active .compare-icon-single {
    display: none !important;
}

.compare-btn:not(.active) .compare-icon-single {
    display: block !important;
    opacity: 1;
    transform: rotate(0deg) scale(1);
    animation: iconPopIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.compare-btn:not(.active) .compare-icon-double {
    display: none !important;
    opacity: 0;
    transform: rotate(90deg) scale(0.8);
}

@keyframes iconPopIn {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Sayfa yükleme animasyonları */
@keyframes slideDownFadeIn {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes popInScale {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

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

/* Dashboard Page Center - Header için padding */
/* Karşılaştırma Modu - Single/Double Layout */
.dashboard-page .page-center {
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), 
                transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                grid-template-columns 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                gap 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                padding 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.dashboard-page.single-mode .page-center {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-direction: column;
    padding-top: calc(clamp(48px, 8vw, 64px) + clamp(8px, 1.5vw, 20px) + clamp(12px, 2vw, 24px) + 16px);
    padding-left: clamp(12px, 2vw, 24px);
    padding-right: clamp(12px, 2vw, 24px);
    padding-bottom: clamp(24px, 4vw, 48px);
    overflow-y: auto;
    max-height: calc(100vh - clamp(48px, 8vw, 64px) - clamp(8px, 1.5vw, 20px) - clamp(12px, 2vw, 24px) - 16px);
}

.dashboard-page.double-mode .page-center {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(12px, 2vw, 24px);
    align-items: start;
    justify-items: start;
    padding-top: calc(clamp(48px, 8vw, 64px) + clamp(8px, 1.5vw, 20px) + clamp(12px, 2vw, 24px) + 16px);
    padding-left: clamp(12px, 2vw, 24px);
    padding-right: clamp(12px, 2vw, 24px);
    padding-bottom: clamp(24px, 4vw, 48px);
    overflow-y: auto;
    max-height: calc(100vh - clamp(48px, 8vw, 64px) - clamp(8px, 1.5vw, 20px) - clamp(12px, 2vw, 24px) - 16px);
}

.dashboard-page.double-mode .page-center > * {
    width: 100%;
    min-width: 0; /* Grid overflow önleme */
    animation: fadeInScale 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.dashboard-page.single-mode .page-center > * {
    animation: fadeInScale 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Panel görünürlüğü kontrolü */
.dashboard-page.single-mode .single-panel {
    display: block !important;
}

.dashboard-page.single-mode .double-panel-left,
.dashboard-page.single-mode .double-panel-right {
    display: none !important;
}

.dashboard-page.double-mode .single-panel {
    display: none !important;
}

.dashboard-page.double-mode .double-panel-left,
.dashboard-page.double-mode .double-panel-right {
    display: block !important;
}

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

/* ============================================
   RESPONSIVE - TÜM ÇÖZÜNÜRLÜKLER İÇİN
   Her çözünürlükte aynı görünüm korunur
   ============================================ */

/* Mobile Portrait (320px - 480px) */
@media (max-width: 480px) and (orientation: portrait) {
    .dashboard-header-wrapper {
        gap: clamp(6px, 1vw, 10px);
    }
    
    .dashboard-header-top {
        padding: clamp(10px, 1.8vw, 14px) clamp(16px, 2.5vw, 24px);
        gap: clamp(8px, 1.5vw, 16px);
    }
    
    .dashboard-header-icons-left,
    .dashboard-header-icons-right {
        gap: clamp(4px, 0.8vw, 8px);
    }
}

/* Mobile Landscape (481px - 768px) */
@media (min-width: 481px) and (max-width: 768px) and (orientation: landscape) {
    .dashboard-header-top {
        padding: clamp(10px, 1.8vw, 14px) clamp(16px, 2.5vw, 24px);
        gap: clamp(8px, 1.5vw, 16px);
    }
    
    .dashboard-header-icons-left,
    .dashboard-header-icons-right {
        gap: clamp(4px, 0.8vw, 8px);
    }
}

/* Tablet Portrait (769px - 1024px) */
@media (min-width: 769px) and (max-width: 1024px) and (orientation: portrait) {
    .dashboard-header-top {
        padding: clamp(12px, 2vw, 16px) clamp(20px, 3vw, 32px);
        gap: clamp(10px, 1.8vw, 18px);
    }
    
    .dashboard-header-icons-left,
    .dashboard-header-icons-right {
        gap: clamp(4px, 0.8vw, 8px);
    }
}

/* Tablet Landscape (1025px - 1366px) */
@media (min-width: 1025px) and (max-width: 1366px) and (orientation: landscape) {
    .dashboard-header-top {
        padding: clamp(12px, 2vw, 16px) clamp(20px, 3vw, 32px);
        gap: clamp(10px, 1.8vw, 18px);
    }
    
    .dashboard-header-icons-left,
    .dashboard-header-icons-right {
        gap: clamp(4px, 0.8vw, 8px);
    }
}

/* Desktop (1367px+) */
@media (min-width: 1367px) {
    .dashboard-header-top {
        padding: clamp(14px, 2vw, 18px) clamp(24px, 3vw, 36px);
        gap: clamp(12px, 2vw, 20px);
    }
    
    .dashboard-header-icons-left,
    .dashboard-header-icons-right {
        gap: clamp(6px, 1vw, 10px);
    }
}

/* Genel Landscape Kuralları */
@media (orientation: landscape) {
    .dashboard-header-wrapper-top {
        top: clamp(6px, 1.2vw, 16px);
    }
}

/* Genel Portrait Kuralları */
@media (orientation: portrait) {
    .dashboard-header-wrapper-top {
        top: clamp(8px, 1.5vw, 20px);
    }
}

/* Mobil ve Tablet Portrait - Iconları Header'dan Gizle, Dialog'a Taşı */
@media (max-width: 1024px) and (orientation: portrait) {
    /* Desktop iconlarını gizle */
    .header-icon-desktop {
        display: none !important;
    }
    
    /* Ayarlar iconunu göster */
    .dashboard-header-icons-right {
        display: flex !important;
        justify-content: flex-end;
    }
    
    .settings-item-mobile-only {
        display: block !important;
    }
    
    /* Sol taraftaki iconları birbirine daha yakın yap */
    .dashboard-header-icons-left {
        gap: clamp(2px, 0.4vw, 4px) !important;
    }
    
    /* Dashboard filtreleri container'ını göster (VARKS containerının altında) */
    .dashboard-filters-container-mobile-portrait {
        display: flex !important;
        align-items: center;
        justify-content: center;
    }
    
    /* Header içindeki filtre iconlarını gizle */
    .dashboard-header-icons-left .dashboard-filters-mobile-portrait {
        display: none !important;
    }
}

/* Mobil Yatay Mod - Kişisel Mod ve Karşılaştırma Modu iconlarını header'dan gizle, Tarih ve Mağaza göster */
@media (max-width: 1024px) and (orientation: landscape) {
    /* Kişisel Mod ve Karşılaştırma Modu iconlarını gizle */
    .dashboard-header-icons-right .personal-mode-btn.header-icon-desktop,
    .dashboard-header-icons-right .compare-btn.header-icon-desktop {
        display: none !important;
    }
    
    /* Tarih ve Mağaza iconlarını göster */
    .dashboard-header-icons-right .date-btn.header-icon-desktop,
    .dashboard-header-icons-right .store-btn.header-icon-desktop {
        display: flex !important;
    }
    
    .settings-item-mobile-only {
        display: block !important;
    }
    
    /* Dashboard filtreleri container'ını gizle (yatay modda header'da gösterilecek) */
    .dashboard-filters-container-mobile-portrait {
        display: none !important;
    }
}

/* Desktop - Dialog'daki Mobil Iconları Gizle ve Desktop Iconlarını Göster */
@media (min-width: 1025px) {
    .settings-item-mobile-only {
        display: none !important;
    }
    
    .dashboard-header-icons-right {
        display: flex !important;
    }
    
    /* Dashboard filtreleri container'ını gizle (desktop'ta header'da gösterilecek) */
    .dashboard-filters-container-mobile-portrait {
        display: none !important;
    }
    
    /* Desktop'ta header-icon-desktop class'ına sahip iconları göster */
    .header-icon-desktop {
        display: flex !important;
    }
}

/* Landscape - Mobil ve Desktop için ayrı kurallar */
@media (orientation: landscape) {
    /* Mobil landscape'ta (max-width: 1024px) mobil iconları göster */
    @media (max-width: 1024px) {
        .settings-item-mobile-only {
            display: block !important;
        }
        
        .header-icon-desktop {
            display: none !important;
        }
        
        /* Dashboard filtreleri container'ını gizle (yatay modda header'da gösterilecek) */
        .dashboard-filters-container-mobile-portrait {
            display: none !important;
        }
    }
    
    /* Desktop landscape'ta (min-width: 1025px) mobil iconları gizle */
    @media (min-width: 1025px) {
        .settings-item-mobile-only {
            display: none !important;
        }
        
        .header-icon-desktop {
            display: flex !important;
        }
    }
}

/* Dashboard filtreleri container için base stil */
.dashboard-filters-container-mobile-portrait {
    display: none;
    position: fixed;
    /* Butonların başladığı yerden container yüksekliği kadar yukarıda konumlandır */
    /* page-center padding-top - container yüksekliği (yaklaşık 32px) + biraz daha aşağı (8px) */
    top: calc(clamp(48px, 8vw, 64px) + clamp(8px, 1.5vw, 20px) + clamp(12px, 2vw, 24px) + 16px - 40px);
    left: 0;
    right: 0;
    z-index: 999; /* Header'ın altında ama içerikten üstte */
    background: transparent;
    border-bottom: none; /* Alt çizgi kaldırıldı */
    padding: 12px 16px; /* Üst padding artırıldı (8px -> 12px) iconları daha aşağıya almak için */
    margin-top: 0; /* Margin'i sıfırla */
}

/* iOS Safe Area */
@supports (-webkit-touch-callout: none) {
    .dashboard-header-wrapper {
        top: max(clamp(8px, 1.5vw, 20px), env(safe-area-inset-top));
        padding-left: max(clamp(12px, 2vw, 24px), env(safe-area-inset-left));
        padding-right: max(clamp(12px, 2vw, 24px), env(safe-area-inset-right));
    }
}

/* Touch Cihazlar */
@media (hover: none) and (pointer: coarse) {
    .btn-icon {
        min-width: 44px;
        min-height: 44px;
        -webkit-tap-highlight-color: transparent;
    }
}

/* ============================================
   SPLIT SCREEN RESPONSIVE TASARIM
   ============================================ */

/* Tablet - Yatay (768px - 1024px) */
@media (max-width: 1024px) and (orientation: landscape) {
    .split-panel {
        width: 50%;
    }
    
    .panel-label {
        font-size: clamp(36px, 6vw, 64px);
    }
    
    .discover-content {
        flex-direction: row;
        gap: 20px;
        align-items: flex-start;
        height: 100%;
        padding: 20px;
    }
    
    /* Sol taraf: Logo ve Butonlar Container */
    .discover-header {
        display: block;
        width: auto;
        min-width: 200px;
        max-width: 240px;
        flex-shrink: 0;
        margin: 0;
        padding: 0;
        padding-right: 20px;
        border-bottom: none;
        border-right: 1px solid var(--border-color);
        height: auto;
        order: 1;
    }
    
    .discover-content {
        padding: clamp(3px, 0.5vw, 6px) clamp(15px, 2vw, 25px) 0 clamp(15px, 2vw, 25px);
        flex-direction: column;
        gap: 0;
        align-items: stretch;
        height: 100%;
        position: relative;
        box-sizing: border-box;
    }
    
    /* Üstte VARKS Logo */
    .discover-header {
        display: block;
        width: 100%;
        flex-shrink: 0;
        margin: 0 auto;
        padding: 0;
        border: none;
        height: fit-content;
        order: 0;
        text-align: center;
        line-height: 1.2;
    }
    
    .discover-brand {
        font-size: clamp(22px, 3vw, 36px);
        margin: 0;
        padding: 0;
        border: none;
        line-height: 1.2;
    }
    
    /* Ortada Yatay Scroll Butonlar */
    .discover-menu {
        order: 1;
        flex-direction: row;
        flex-wrap: nowrap;
        width: 100%;
        border-top: 1px solid var(--border-color);
        border-bottom: 1px solid var(--border-color);
        border-left: none;
        border-right: none;
        margin: 0;
        margin-top: clamp(3px, 0.5vw, 6px);
        padding: clamp(5px, 0.7vw, 8px) clamp(8px, 1.2vw, 12px);
        gap: clamp(6px, 0.8vw, 10px);
        flex-shrink: 0;
        height: auto;
        max-height: clamp(50px, 6.5vw, 70px);
        overflow-y: hidden;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        justify-content: flex-start;
    }
    
    .discover-menu::-webkit-scrollbar {
        display: none;
    }
    
    .menu-item {
        width: auto;
        min-width: fit-content;
        max-width: clamp(130px, 17vw, 190px);
        text-align: center;
        padding: clamp(7px, 0.9vw, 11px) clamp(13px, 1.7vw, 19px);
        font-size: clamp(10px, 1.2vw, 13px);
        white-space: nowrap;
        flex-shrink: 0;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    /* Altta İçerik Alanı */
    .discover-content-area {
        order: 2;
        flex: 1;
        min-width: 0;
        min-height: 0;
        height: 100%;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
    }
    
    /* Telefonlarda içerik boyutlarını küçült */
    .package-card {
        padding: clamp(14px, 1.8vw, 20px);
    }
    
    .package-name {
        font-size: clamp(18px, 2.2vw, 24px);
        margin-bottom: clamp(12px, 1.5vw, 16px);
    }
    
    .package-licences li {
        padding: clamp(7px, 0.9vw, 9px) 0;
        font-size: clamp(12px, 1.3vw, 14px);
    }
    
    .licence-card {
        padding: clamp(12px, 1.5vw, 16px);
    }
    
    .single-pricing-section {
        padding: clamp(14px, 1.8vw, 20px);
    }
    
    .pricing-table {
        font-size: clamp(12px, 1.3vw, 14px);
    }
    
    .discover-menu::-webkit-scrollbar {
        width: 5px;
    }
    
    .menu-item {
        width: 100%;
        text-align: left;
        padding: 10px 12px;
        font-size: 13px;
        white-space: nowrap;
        flex-shrink: 0;
    }
    
    .discover-content-area {
        order: 3;
        flex: 1;
        min-width: 0;
        height: 100%;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
    }
    
    .discover-content h1 {
        font-size: clamp(36px, 6vw, 64px);
    }
    
    .discover-content p {
        font-size: clamp(16px, 2vw, 20px);
    }
}

/* Tablet - Dikey (768px - 1024px) */
@media (max-width: 1024px) and (orientation: portrait) {
    .split-panel {
        width: 50%;
    }
    
    .panel-label {
        font-size: clamp(32px, 5vw, 56px);
    }
    
    .discover-content {
        padding: clamp(3px, 0.5vw, 6px) clamp(15px, 2vw, 25px) 0 clamp(15px, 2vw, 25px);
        gap: 0;
        box-sizing: border-box;
    }
    
    .discover-header {
        margin-bottom: 0;
        padding: 0;
        height: fit-content;
        line-height: 1.2;
    }
    
    .discover-brand {
        line-height: 1.2;
    }
    
    .discover-menu {
        margin-top: clamp(3px, 0.5vw, 6px);
    }
    
    .discover-content h1 {
        font-size: clamp(32px, 5vw, 56px);
    }
    
    .discover-content p {
        font-size: clamp(16px, 2vw, 20px);
    }
}

/* Telefon - Yatay (480px - 768px) */
@media (max-width: 768px) and (orientation: landscape) {
    .split-panel {
        width: 50%;
    }
    
    .panel-label {
        font-size: clamp(24px, 4vw, 40px);
        letter-spacing: 0.1em;
    }
    
    .panel-overlay {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
    
    .discover-content {
        padding: clamp(2px, 0.4vw, 5px) clamp(12px, 1.5vw, 18px) 0 clamp(12px, 1.5vw, 18px) !important;
        flex-direction: column;
        gap: 0 !important;
        align-items: stretch;
        height: 100%;
        position: relative;
        box-sizing: border-box;
    }
    
    /* Üstte VARKS Logo */
    .discover-header {
        display: block;
        width: 100%;
        flex-shrink: 0;
        margin: 0 auto;
        padding: 0 !important;
        border: none;
        height: fit-content !important;
        order: 0;
        text-align: center;
        line-height: 1.2 !important;
    }
    
    .discover-brand {
        font-size: clamp(18px, 2.5vw, 28px);
        margin: 0 !important;
        padding: 0 !important;
        border: none;
        line-height: 1.2 !important;
    }
    
    /* Ortada Yatay Scroll Butonlar */
    .discover-menu {
        order: 1;
        flex-direction: row;
        flex-wrap: nowrap;
        width: 100%;
        border-top: 1px solid var(--border-color);
        border-bottom: 1px solid var(--border-color);
        border-left: none;
        border-right: none;
        margin: 0;
        margin-top: clamp(2px, 0.4vw, 5px) !important;
        margin-bottom: clamp(6px, 0.8vw, 10px) !important;
        padding: clamp(4px, 0.6vw, 7px) clamp(8px, 1.2vw, 12px) !important;
        gap: clamp(5px, 0.7vw, 8px);
        flex-shrink: 0;
        height: auto;
        max-height: clamp(45px, 5.5vw, 60px);
        overflow-y: hidden;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        justify-content: flex-start;
    }
    
    .discover-menu::-webkit-scrollbar {
        display: none;
    }
    
    .menu-item {
        width: auto;
        min-width: fit-content;
        max-width: clamp(120px, 15vw, 180px);
        text-align: center;
        padding: clamp(6px, 0.8vw, 10px) clamp(12px, 1.5vw, 18px);
        font-size: clamp(10px, 1.2vw, 13px);
        white-space: nowrap;
        flex-shrink: 0;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    /* Altta İçerik Alanı */
    .discover-content-area {
        order: 2;
        flex: 1;
        min-width: 0;
        min-height: 0;
        height: 100%;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
    }
    
    .discover-content h1 {
        font-size: clamp(24px, 4vw, 40px);
        margin-bottom: 15px;
    }
    
    .discover-content p {
        font-size: clamp(14px, 1.8vw, 18px);
    }
    
    .panel-content {
        padding: 0;
    }
}

/* Telefon - Dikey (max-width: 768px) */
@media (max-width: 768px) and (orientation: portrait) {
    .split-screen-container {
        flex-direction: row;
        height: 100vh;
        height: 100dvh;
    }
    
    .split-panel {
        width: 50%;
        height: 100vh;
        height: 100dvh;
        min-height: 100vh;
        min-height: 100dvh;
    }
    
    .split-panel.active {
        width: 100%;
        height: 100vh;
        height: 100dvh;
        min-height: 100vh;
        min-height: 100dvh;
    }
    
    .split-panel.active ~ .split-panel {
        width: 0%;
        height: 100vh;
        height: 100dvh;
        min-height: 100vh;
        min-height: 100dvh;
        transform: translateX(100%);
    }
    
    /* Giriş paneli aktif olduğunda Keşfet panelini daha fazla daralt */
    /* Giriş paneli aktif olduğunda Keşfet panelini daha fazla daralt */
    .split-screen-container:has(.split-panel-right.active) .split-panel-left:not(.active) {
        width: 10% !important;
        transform: translateX(0) !important;
    }
    
    /* Giriş paneli aktif olduğunda Keşfet yazısını küçült */
    .split-screen-container:has(.split-panel-right.active) .split-panel-left:not(.active) .panel-label {
        font-size: clamp(14px, 2vw, 24px) !important;
        opacity: 0.6;
        transform: scale(0.5);
    }
    
    .panel-label {
        font-size: clamp(28px, 5vw, 48px);
        letter-spacing: 0.05em;
    }
    
    .panel-overlay {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
    
    .discover-content {
        padding: clamp(2px, 0.4vw, 5px) clamp(12px, 1.5vw, 18px) 0 clamp(12px, 1.5vw, 18px) !important;
        height: 100%;
        overflow: hidden;
        gap: 0 !important;
        box-sizing: border-box;
    }
    
    .discover-header {
        margin-bottom: 0 !important;
        padding: 0 !important;
        height: fit-content !important;
        line-height: 1.2 !important;
    }
    
    .discover-brand {
        line-height: 1.2 !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    .discover-menu {
        margin-top: clamp(2px, 0.4vw, 5px) !important;
        margin-bottom: clamp(6px, 0.8vw, 10px) !important;
        padding-top: clamp(4px, 0.6vw, 7px) !important;
        padding-bottom: clamp(4px, 0.6vw, 7px) !important;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        justify-content: flex-start;
    }
    
    .discover-menu::-webkit-scrollbar {
        display: none;
    }
    
    .discover-content h1 {
        font-size: clamp(28px, 5vw, 48px);
        margin-bottom: 15px;
    }
    
    .discover-content p {
        font-size: clamp(14px, 2vw, 18px);
    }
    
    .discover-content-area {
        height: 100%;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
    }
    
    .panel-content {
        padding: 0;
    }
    
    /* Hover efektini mobilde kaldır */
    .split-panel:hover:not(.active) {
        width: 100%;
        filter: none;
    }
}

/* iPhone 6/7/8 - Yatay (667px width) */
@media (max-width: 667px) and (orientation: landscape) and (min-width: 480px) {
    .discover-content {
        padding: clamp(2px, 0.4vw, 5px) clamp(12px, 1.5vw, 18px) 0 clamp(12px, 1.5vw, 18px) !important;
        flex-direction: column;
        gap: 0 !important;
        box-sizing: border-box;
    }
    
    .discover-header {
        margin-bottom: 0 !important;
        padding: 0 !important;
        height: fit-content !important;
        line-height: 1.2 !important;
    }
    
    .discover-brand {
        line-height: 1.2 !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    .discover-menu {
        margin-top: clamp(2px, 0.4vw, 5px) !important;
        margin-bottom: clamp(6px, 0.8vw, 10px) !important;
        padding: clamp(4px, 0.6vw, 7px) clamp(7px, 1vw, 10px) !important;
    }
}

/* Galaxy Z Fold 5 - Yatay (1812px - 1919px width) - Sadece tablet için */
@media (min-width: 1800px) and (max-width: 1919px) and (orientation: landscape) {
    .discover-content {
        padding: clamp(2px, 0.4vw, 5px) clamp(12px, 1.5vw, 18px) 0 clamp(12px, 1.5vw, 18px) !important;
        flex-direction: column;
        gap: 0 !important;
        box-sizing: border-box;
    }
    
    .discover-header {
        margin-bottom: 0 !important;
        padding: 0 !important;
        height: fit-content !important;
        line-height: 1.2 !important;
    }
    
    .discover-brand {
        font-size: clamp(20px, 2vw, 32px) !important;
        line-height: 1.2 !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    .discover-menu {
        margin-top: clamp(2px, 0.4vw, 5px) !important;
        margin-bottom: clamp(6px, 0.8vw, 10px) !important;
        padding: clamp(4px, 0.6vw, 7px) clamp(7px, 1vw, 10px) !important;
        max-height: clamp(40px, 4vw, 55px) !important;
    }
}

/* Küçük Telefon - Yatay (max-width: 480px) */
@media (max-width: 480px) and (orientation: landscape) {
    .panel-label {
        font-size: clamp(20px, 3.5vw, 32px);
    }
    
    .discover-content {
        padding: clamp(2px, 0.4vw, 5px) clamp(12px, 1.5vw, 18px) 0 clamp(12px, 1.5vw, 18px) !important;
        flex-direction: column;
        gap: 0 !important;
        align-items: stretch;
        height: 100%;
        position: relative;
        box-sizing: border-box;
    }
    
    /* Üstte VARKS Logo */
    .discover-header {
        display: block;
        width: 100%;
        flex-shrink: 0;
        margin: 0 auto;
        padding: 0 !important;
        border: none;
        height: fit-content !important;
        order: 0;
        text-align: center;
        line-height: 1.2 !important;
    }
    
    .discover-brand {
        font-size: clamp(16px, 2.2vw, 24px);
        margin: 0 !important;
        padding: 0 !important;
        border: none;
        line-height: 1.2 !important;
    }
    
    /* Ortada Yatay Scroll Butonlar */
    .discover-menu {
        order: 1;
        flex-direction: row;
        flex-wrap: nowrap;
        width: 100%;
        border-top: 1px solid var(--border-color);
        border-bottom: 1px solid var(--border-color);
        border-left: none;
        border-right: none;
        margin: 0;
        margin-top: clamp(2px, 0.4vw, 5px) !important;
        margin-bottom: clamp(6px, 0.8vw, 10px) !important;
        padding: clamp(4px, 0.6vw, 7px) clamp(7px, 1vw, 10px) !important;
        gap: clamp(4px, 0.6vw, 7px);
        flex-shrink: 0;
        height: auto;
        max-height: clamp(42px, 5.5vw, 58px);
        overflow-y: hidden;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        justify-content: flex-start;
    }
    
    .discover-menu::-webkit-scrollbar {
        display: none;
    }
    
    .menu-item {
        width: auto;
        min-width: fit-content;
        max-width: clamp(110px, 14vw, 160px);
        text-align: center;
        padding: clamp(5px, 0.7vw, 8px) clamp(10px, 1.3vw, 14px);
        font-size: clamp(9px, 1.1vw, 12px);
        white-space: nowrap;
        flex-shrink: 0;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    /* Altta İçerik Alanı */
    .discover-content-area {
        order: 2;
        flex: 1;
        min-width: 0;
        min-height: 0;
        height: 100%;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
    }
    
    /* Telefonlarda içerik boyutlarını küçült */
    .package-card {
        padding: clamp(8px, 1vw, 12px) !important;
    }
    
    .package-name {
        font-size: clamp(12px, 1.5vw, 18px) !important;
        margin-bottom: clamp(6px, 0.8vw, 10px) !important;
    }
    
    .package-licences li {
        padding: clamp(4px, 0.6vw, 6px) 0 !important;
        font-size: clamp(9px, 1vw, 11px) !important;
    }
    
    .licence-card {
        padding: clamp(6px, 0.8vw, 10px) !important;
    }
    
    .single-pricing-section {
        padding: clamp(8px, 1vw, 12px) !important;
    }
    
    .pricing-table {
        font-size: clamp(9px, 1vw, 11px) !important;
    }
    
    .discover-content h1 {
        font-size: clamp(20px, 3.5vw, 32px);
    }
    
    .discover-content p {
        font-size: clamp(12px, 1.5vw, 16px);
    }
    
    .panel-content {
        padding: 0;
    }
}

/* iPhone 6/7/8 - Dikey (375px width) */
@media (max-width: 375px) and (orientation: portrait) {
    .discover-content {
        height: 100% !important;
        overflow: hidden !important;
        padding: clamp(2px, 0.4vw, 5px) clamp(12px, 1.5vw, 18px) 0 clamp(12px, 1.5vw, 18px) !important;
        gap: 0 !important;
        box-sizing: border-box !important;
    }
    
    .discover-header {
        margin-bottom: 0 !important;
        padding: 0 !important;
        height: fit-content !important;
        line-height: 1.2 !important;
    }
    
    .discover-brand {
        font-size: clamp(24px, 4vw, 40px) !important;
        line-height: 1.2 !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    .discover-menu {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        justify-content: flex-start !important;
        margin-top: clamp(2px, 0.4vw, 5px) !important;
        margin-bottom: clamp(6px, 0.8vw, 10px) !important;
        padding: clamp(4px, 0.6vw, 7px) clamp(7px, 1vw, 10px) !important;
        max-height: clamp(40px, 5vw, 55px) !important;
    }
}

/* iPhone 6/7/8 Plus ve diğer küçük telefonlar - Dikey (376px - 480px) */
@media (min-width: 376px) and (max-width: 480px) and (orientation: portrait) {
    .discover-content {
        height: 100% !important;
        overflow: hidden !important;
        padding: clamp(2px, 0.4vw, 5px) clamp(12px, 1.5vw, 18px) 0 clamp(12px, 1.5vw, 18px) !important;
        gap: 0 !important;
        box-sizing: border-box !important;
    }
    
    .discover-header {
        margin-bottom: 0 !important;
        padding: 0 !important;
        height: fit-content !important;
        line-height: 1.2 !important;
    }
    
    .discover-brand {
        font-size: clamp(24px, 4vw, 40px) !important;
        line-height: 1.2 !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    .discover-menu {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        justify-content: flex-start !important;
        margin-top: clamp(2px, 0.4vw, 5px) !important;
        margin-bottom: clamp(6px, 0.8vw, 10px) !important;
        padding: clamp(4px, 0.6vw, 7px) clamp(7px, 1vw, 10px) !important;
        max-height: clamp(40px, 5vw, 55px) !important;
    }
}

/* Küçük Telefon - Dikey (max-width: 480px) - Fallback */
@media (max-width: 480px) and (orientation: portrait) {
    .split-screen-container {
        flex-direction: row;
        height: 100vh;
        height: 100dvh;
    }
    
    .split-panel {
        width: 50%;
        height: 100vh;
        height: 100dvh;
        min-height: 100vh;
        min-height: 100dvh;
    }
    
    .discover-content {
        height: 100% !important;
        overflow: hidden !important;
        padding: clamp(2px, 0.4vw, 5px) clamp(12px, 1.5vw, 18px) 0 clamp(12px, 1.5vw, 18px) !important;
        gap: 0 !important;
        box-sizing: border-box !important;
    }
    
    .discover-header {
        margin-bottom: 0 !important;
        padding: 0 !important;
        height: fit-content !important;
        line-height: 1.2 !important;
    }
    
    .discover-brand {
        font-size: clamp(24px, 4vw, 40px) !important;
        line-height: 1.2 !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    .discover-menu {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        justify-content: flex-start !important;
        margin-top: clamp(2px, 0.4vw, 5px) !important;
        margin-bottom: clamp(6px, 0.8vw, 10px) !important;
        padding: clamp(4px, 0.6vw, 7px) clamp(7px, 1vw, 10px) !important;
        max-height: clamp(40px, 5vw, 55px) !important;
    }
    
    .discover-menu::-webkit-scrollbar {
        display: none;
    }
    
    
    .discover-content-area {
        height: 100%;
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
    }
    
    /* Telefonlarda içerik boyutlarını küçült */
    .package-card {
        padding: clamp(8px, 1vw, 12px) !important;
    }
    
    .package-name {
        font-size: clamp(12px, 1.5vw, 18px) !important;
        margin-bottom: clamp(6px, 0.8vw, 10px) !important;
    }
    
    .package-licences li {
        padding: clamp(4px, 0.6vw, 6px) 0 !important;
        font-size: clamp(9px, 1vw, 11px) !important;
    }
    
    .licence-card {
        padding: clamp(6px, 0.8vw, 10px) !important;
    }
    
    .single-pricing-section {
        padding: clamp(8px, 1vw, 12px) !important;
    }
    
    .pricing-table {
        font-size: clamp(9px, 1vw, 11px) !important;
    }
    
    .split-panel.active {
        width: 100%;
        height: 100vh;
        height: 100dvh;
        min-height: 100vh;
        min-height: 100dvh;
    }
    
    .split-panel.active ~ .split-panel {
        width: 0%;
        height: 100vh;
        height: 100dvh;
        min-height: 100vh;
        min-height: 100dvh;
        transform: translateX(100%);
    }
    
    /* Giriş paneli aktif olduğunda Keşfet panelini yazı genişliğine göre daralt */
    .split-screen-container:has(.split-panel-right.active) .split-panel-left:not(.active) {
        width: 10% !important;
        transform: translateX(0) !important;
    }
    
    /* Giriş paneli aktif olduğunda Keşfet yazısını küçült */
    .split-screen-container:has(.split-panel-right.active) .split-panel-left:not(.active) .panel-label {
        font-size: clamp(12px, 2vw, 20px) !important;
        opacity: 0.6;
        transform: scale(0.5);
    }
    
    .panel-label {
        font-size: clamp(24px, 4.5vw, 40px);
    }
    
    .discover-content {
        padding: 15px 10px;
    }
    
    .discover-content h1 {
        font-size: clamp(24px, 4.5vw, 40px);
        margin-bottom: 12px;
    }
    
    .discover-content p {
        font-size: clamp(12px, 1.8vw, 16px);
    }
    
    .panel-content {
        padding: 0;
    }
}

/* Yükseklik kısıtlı ekranlar */
@media (max-height: 600px) {
    .panel-label {
        font-size: clamp(24px, 4vw, 40px);
    }
    
    .discover-content {
        padding: 15px;
    }
    
    .discover-content h1 {
        font-size: clamp(24px, 4vw, 40px);
        margin-bottom: 10px;
    }
    
    .discover-content p {
        font-size: clamp(12px, 1.5vw, 16px);
    }
}

/* ============================================
   KEŞFET SAYFASI TEMA UYUMLULUĞU
   ============================================ */

body[data-theme="light"] .split-panel-left {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.08), rgba(139, 92, 246, 0.08));
}

body[data-theme="light"] .split-panel-right {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.08), rgba(59, 130, 246, 0.08));
}

body[data-theme="light"] .panel-overlay {
    background: rgba(255, 255, 255, 0.3);
}

body[data-theme="light"] .panel-label {
    color: rgba(0, 0, 0, 0.9);
    text-shadow: none !important;
}

body[data-theme="light"] .discover-content h1,
body[data-theme="light"] .discover-brand {
    color: #000000;
}

body[data-theme="light"] .discover-content p,
body[data-theme="light"] .discover-subtitle {
    color: var(--text-muted);
}

/* Açık temada border'ları ve yazıları siyah yap */

body[data-theme="light"] .discover-menu {
    border-top-color: #000000;
    border-bottom-color: #000000;
    border-right-color: #000000;
}

body[data-theme="light"] .menu-item {
    border-color: #000000;
    color: #000000;
}

body[data-theme="light"] .menu-item:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

body[data-theme="light"] .menu-item.active {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

/* Koyu temada border'ları beyaz yap */

body[data-theme="dark"] .discover-menu {
    border-top-color: rgba(255, 255, 255, 0.2);
    border-bottom-color: rgba(255, 255, 255, 0.2);
    border-right-color: rgba(255, 255, 255, 0.2);
}

body[data-theme="dark"] .menu-item {
    border-color: rgba(255, 255, 255, 0.3);
}

/* Responsive - Discover Content Sections */
@media (max-width: 1024px) {
    .discover-menu {
        gap: 8px;
    }
    
    .menu-item {
        padding: 10px 16px;
        font-size: 14px;
    }
    
    .packages-grid {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 20px;
    }
    
    .licences-grid {
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
        gap: 15px;
    }
}

@media (max-width: 768px) {
    .discover-content {
        padding: clamp(20px, 3vw, 40px) clamp(15px, 2.5vw, 25px);
    }
    
    .discover-header {
        margin-bottom: 0;
        padding-bottom: clamp(15px, 2vw, 20px);
    }
    
    .discover-menu {
        gap: 6px;
        margin-bottom: clamp(20px, 3vw, 30px);
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    
    .discover-menu::-webkit-scrollbar {
        display: none;
    }
    
    .menu-item {
        padding: 8px 10px;
        font-size: 12px;
        white-space: nowrap;
        flex-shrink: 0;
    }
    
    .packages-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .licences-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 12px;
    }
    
    .pricing-table-wrapper {
        font-size: 14px;
    }
    
    .pricing-table th,
    .pricing-table td {
        padding: 12px;
    }
}

@media (max-width: 480px) {
    .discover-header {
        margin-bottom: clamp(12px, 2vw, 18px);
        padding: clamp(8px, 1.2vw, 12px) clamp(14px, 2vw, 20px);
    }
    
    .discover-brand {
        font-size: clamp(24px, 4vw, 36px);
    }
    
    .discover-menu {
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 6px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    
    .discover-menu::-webkit-scrollbar {
        display: none;
    }
    
    .menu-item {
        width: auto;
        min-width: fit-content;
        text-align: center;
        padding: 8px 10px;
        font-size: 11px;
        white-space: nowrap;
        flex-shrink: 0;
    }
    
    .packages-grid {
        gap: 15px;
    }
    
    .licences-grid {
        grid-template-columns: 1fr;
    }
    
    .erp-badges {
        gap: 10px;
    }
    
    .pricing-table {
        font-size: 12px;
    }
    
    .pricing-table th,
    .pricing-table td {
        padding: 10px 8px;
    }
}

/* =============================================
   FORM PAGE STYLES
   ============================================= */

.form-page-root {
    min-height: 100vh;
    min-height: 100dvh;
    height: 100vh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    background: var(--bg-color);
    color: var(--text-color);
    overflow: hidden; /* Root container scroll yapmasın */
}

.form-page-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: var(--bg-color);
    color: var(--text-color);
    overflow: hidden; /* Container scroll yapmasın, sadece content scroll yapsın */
    min-height: 0; /* Flexbox overflow için gerekli */
}

.form-page-header {
    padding: clamp(20px, 3vw, 30px) clamp(20px, 4vw, 40px);
    border-bottom: 1px solid var(--border-color);
    background: var(--card-bg);
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border-radius: 0 0 16px 16px; /* Alt kenarları yumuşat */
}

.form-page-brand {
    font-family: "Bebas Neue", system-ui, sans-serif;
    font-size: clamp(32px, 5vw, 52px);
    font-weight: 400;
    letter-spacing: clamp(0.05em, 0.1vw, 0.1em);
    text-transform: uppercase;
    margin: 0;
    text-align: center;
    /* Koyu temada beyaz, açık temada siyah */
    color: var(--text-color);
    transition: color 0.3s ease;
    cursor: pointer; /* Tıklanabilir olduğunu göster */
}

.form-page-brand:hover {
    opacity: 0.8;
}

.form-page-content {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: flex-start; /* Üstten hizala (scroll için) */
    padding: clamp(20px, 4vw, 40px);
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch; /* iOS smooth scroll */
    min-height: calc(100vh - 100px);
    min-height: calc(100dvh - 100px);
    position: relative;
    margin-top: 0; /* VARKS header'dan sonra başlasın */
}

.form-wrapper {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    position: relative;
}

/* Loading State */
.form-loading {
    text-align: center;
    padding: 60px 20px;
}

.form-loading .spinner {
    width: 50px;
    height: 50px;
    border: 4px solid var(--border-color);
    border-top-color: var(--primary-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 20px;
}

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

.form-loading p {
    color: var(--text-muted);
    font-size: 16px;
}

/* Error State */
.form-error {
    text-align: center;
    padding: 60px 20px;
    background: var(--card-bg);
    border-radius: 12px;
    border: 1px solid var(--border-color);
}

.form-error h2 {
    color: var(--error-color, #ef4444);
    margin-bottom: 16px;
}

.form-error p {
    color: var(--text-muted);
    margin-bottom: 24px;
}

/* Form Content */
.form-content {
    background: var(--card-bg);
    border-radius: 12px;
    border: 1px solid var(--border-color);
    padding: clamp(24px, 4vw, 40px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.form-header {
    margin-bottom: 32px;
    text-align: center;
}

.form-title {
    font-size: clamp(24px, 3.5vw, 32px);
    font-weight: bold;
    color: var(--text-color);
    margin: 0 0 12px 0;
}

.form-description {
    font-size: 16px;
    color: var(--text-muted);
    margin: 0;
    line-height: 1.6;
}

/* Form Questions */
.form-questions {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-bottom: 32px;
}

.form-question {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-question.has-error .form-input {
    border-color: var(--error-color, #ef4444);
}

.form-question-label {
    font-size: 16px;
    font-weight: 500;
    color: var(--text-color);
    margin-bottom: 4px;
}

.required-mark {
    color: var(--error-color, #ef4444);
    margin-left: 4px;
}

.form-input {
    width: 100%;
    padding: 12px 16px;
    font-size: 16px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--input-bg, var(--bg-color));
    color: var(--text-color);
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
}

.form-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(var(--primary-color-rgb), 0.1);
}

.form-input:invalid {
    border-color: var(--error-color, #ef4444);
}

.form-textarea {
    resize: vertical;
    min-height: 100px;
    font-family: inherit;
}

.form-select {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 40px;
}

/* Radio & Checkbox */
.form-radio-container,
.form-checkbox-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.form-radio-option,
.form-checkbox-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    border-radius: 6px;
    transition: background 0.2s;
}

.form-radio-option:hover,
.form-checkbox-option:hover {
    background: var(--hover-bg, rgba(var(--primary-color-rgb), 0.05));
}

.form-radio-option input[type="radio"],
.form-checkbox-option input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--primary-color);
}

.form-radio-option label,
.form-checkbox-option label {
    cursor: pointer;
    flex: 1;
    user-select: none;
}

/* File Input */
.form-file-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-file-input {
    padding: 8px;
    cursor: pointer;
}

.form-file-info {
    font-size: 14px;
    color: var(--text-muted);
}

/* Datetime */
.form-datetime-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

/* Rating */
.form-rating-container {
    display: flex;
    gap: 8px;
    justify-content: center;
    padding: 12px 0;
}

.form-rating-star {
    font-size: 32px;
    cursor: pointer;
    transition: transform 0.2s;
    user-select: none;
}

.form-rating-star:hover {
    transform: scale(1.2);
}

.form-rating-container input[type="radio"]:checked ~ label,
.form-rating-container input[type="radio"]:checked + label {
    filter: brightness(1.2);
    transform: scale(1.1);
}

/* Rating hover effect */
.form-rating-container label:hover {
    transform: scale(1.15);
}

/* Range */
.form-range-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-range {
    width: 100%;
    height: 8px;
    cursor: pointer;
    accent-color: var(--primary-color);
}

.form-range-value {
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    color: var(--primary-color);
}

/* Color */
.form-color {
    width: 100%;
    height: 50px;
    cursor: pointer;
    border: none;
    border-radius: 8px;
}

/* Divider & Heading */
.form-divider {
    border: none;
    border-top: 1px solid var(--border-color);
    margin: 24px 0;
}

.form-heading {
    font-size: 20px;
    font-weight: bold;
    color: var(--text-color);
    margin: 24px 0 16px 0;
}

/* Error Message */
.form-question-error {
    color: var(--error-color, #ef4444);
    font-size: 14px;
    margin-top: 4px;
}

/* Submit Section */
.form-submit-section {
    margin-top: 32px;
    text-align: center;
}

.btn-submit {
    min-width: 200px;
    padding: 14px 32px;
    font-size: 16px;
    font-weight: 600;
}

.btn-submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Success Message */
.form-success {
    text-align: center;
    padding: clamp(40px, 6vw, 80px) clamp(24px, 4vw, 40px);
    background: var(--card-bg);
    border-radius: 12px;
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    box-sizing: border-box;
}

.success-icon {
    width: clamp(60px, 10vw, 100px);
    height: clamp(60px, 10vw, 100px);
    border-radius: 50%;
    background: var(--success-color, #10b981);
    color: white;
    font-size: clamp(36px, 6vw, 64px);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto clamp(20px, 3vw, 32px);
    animation: scaleIn 0.3s ease;
    font-weight: bold;
}

@keyframes scaleIn {
    from {
        transform: scale(0);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

.form-success h2 {
    color: var(--text-color);
    margin-bottom: clamp(12px, 2vw, 20px);
    font-size: clamp(20px, 3vw, 28px);
    font-weight: bold;
}

.form-success p {
    color: var(--text-muted);
    font-size: clamp(14px, 2vw, 18px);
    line-height: 1.6;
    margin: 0;
}

.no-questions {
    text-align: center;
    color: var(--text-muted);
    padding: 40px 20px;
    font-style: italic;
}

/* Responsive - Mobile (Portrait) */
@media (max-width: 768px) and (orientation: portrait) {
    .form-page-content {
        padding: clamp(16px, 2.5vw, 24px);
        align-items: flex-start; /* Üstten hizala (scroll için) */
        justify-content: center;
        padding-top: clamp(20px, 4vw, 32px);
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        height: calc(100vh - var(--form-header-height, 80px));
        height: calc(100dvh - var(--form-header-height, 80px));
    }
    
    .form-content {
        padding: clamp(20px, 3vw, 28px);
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
    }
    
    .form-wrapper {
        max-width: 100%;
        margin: 0 auto;
    }
}

/* Responsive - Mobile (Landscape) */
@media (max-width: 768px) and (orientation: landscape) {
    .form-page-header {
        position: sticky;
        top: 0;
        z-index: 100;
        border-radius: 0 0 16px 16px;
    }
    
    .form-page-content {
        padding: clamp(12px, 2vw, 20px);
        align-items: flex-start; /* Üstten hizala */
        padding-top: clamp(16px, 2.5vw, 24px);
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        margin-top: 0; /* VARKS header'dan sonra başlasın */
        height: calc(100vh - var(--form-header-height, 70px));
        height: calc(100dvh - var(--form-header-height, 70px));
    }
    
    .form-content {
        padding: clamp(16px, 2.5vw, 24px);
    }
}

/* Responsive - Tablet (Portrait) */
@media (min-width: 769px) and (max-width: 1024px) and (orientation: portrait) {
    .form-page-content {
        padding: clamp(24px, 3.5vw, 36px);
    }
    
    .form-content {
        padding: clamp(28px, 3.5vw, 36px);
    }
}

/* Responsive - Tablet (Landscape) */
@media (min-width: 769px) and (max-width: 1024px) and (orientation: landscape) {
    .form-page-content {
        padding: clamp(20px, 3vw, 32px);
    }
    
    .form-content {
        padding: clamp(24px, 3vw, 32px);
    }
}

/* Responsive - Desktop */
@media (min-width: 1025px) {
    .form-page-content {
        padding: clamp(32px, 4vw, 48px);
    }
    
    .form-content {
        padding: clamp(32px, 4vw, 48px);
    }
    
    .form-datetime-container {
        grid-template-columns: 1fr;
    }
    
    .form-questions {
        gap: 20px;
    }
}

@media (max-width: 480px) {
    .form-page-header {
        padding: 16px;
        border-radius: 0 0 12px 12px; /* Mobilde daha küçük border-radius */
        position: sticky;
        top: 0;
        z-index: 100;
    }
    
    .form-page-content {
        padding-top: clamp(16px, 3vw, 24px);
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        margin-top: 0;
    }
    
    .form-content {
        padding: 20px;
    }
    
    .form-title {
        font-size: 22px;
    }
    
    .form-description {
        font-size: 14px;
    }
    
    .form-question-label {
        font-size: 14px;
    }
    
    .form-input {
        font-size: 14px;
        padding: 10px 12px;
    }
}

/* =============================================
   Forms Dialog Styles
   ============================================= */

.forms-dialog,
.form-responses-dialog {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 9999 !important;
    isolation: isolate;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(0, 0, 0, 0.15) !important;
    backdrop-filter: blur(3px) saturate(110%) !important;
    -webkit-backdrop-filter: blur(3px) saturate(110%) !important;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    padding: 0 !important;
    margin: 0 !important;
    overflow-y: auto;
    width: 100vw !important;
    height: 100vh !important;
    min-width: 100vw !important;
    min-height: 100vh !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
}

.forms-dialog[style*="display: flex"],
.form-responses-dialog[style*="display: flex"] {
    opacity: 1 !important;
    pointer-events: auto !important;
}

.forms-dialog-content,
.form-responses-dialog-content {
    position: relative;
    background: var(--bg-elevated);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    box-shadow: var(--shadow-soft);
    max-width: 600px;
    width: 90%;
    max-height: calc(100vh - 40px);
    overflow: hidden;
    transform: scale(0.95);
    transition: transform 0.3s ease;
    margin: auto;
    z-index: 10000;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.forms-dialog[style*="display: flex"] .forms-dialog-content,
.form-responses-dialog[style*="display: flex"] .form-responses-dialog-content {
    transform: scale(1);
}

.forms-dialog-header,
.form-responses-dialog-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.forms-dialog-title,
.form-responses-dialog-title {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: var(--text-color);
}

.forms-dialog-close,
.form-responses-dialog-close {
    background: transparent;
    border: none;
    color: var(--text-color);
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    transition: background 0.2s ease;
}

.forms-dialog-close:hover,
.form-responses-dialog-close:hover {
    background: var(--accent-color-soft);
}

.forms-dialog-body,
.form-responses-dialog-body {
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

/* Forms Tabs */
.forms-tabs {
    display: flex;
    gap: 8px;
    border-bottom: 1px solid var(--border-color);
    margin: -20px -24px 16px -24px;
    padding: 0 24px;
    flex-shrink: 0;
}

.forms-tab-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 12px 16px;
    font-size: 14px;
    font-weight: 500;
    border-bottom: 2px solid transparent;
    transition: all 0.2s ease;
    position: relative;
    bottom: -1px;
}

.forms-tab-btn:hover {
    color: var(--text-color);
    background: var(--accent-color-soft);
}

.forms-tab-btn.active {
    color: var(--accent-color);
    border-bottom-color: var(--accent-color);
}

/* Forms Tab Content */
.forms-tab-content {
    display: none;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

.forms-tab-content.active {
    display: block;
}

/* Forms List */
.forms-list,
.form-responses-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
    min-height: 0;
}

.form-item,
.form-response-item {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    transition: all 0.2s ease;
}

.form-item:hover,
.form-response-item:hover {
    border-color: var(--accent-color);
    box-shadow: 0 4px 12px rgba(var(--primary-color-rgb), 0.1);
}

.form-item-info,
.form-response-info {
    flex: 1;
    min-width: 0;
}

.form-item-name,
.form-response-form-name {
    margin: 0 0 4px 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-color);
}

.form-item-code,
.form-response-date,
.form-response-user,
.form-response-status {
    margin: 4px 0;
    font-size: 13px;
    color: var(--text-muted);
}

.form-item-description {
    margin: 8px 0 0 0;
    font-size: 14px;
    color: var(--text-muted);
    line-height: 1.5;
}

.form-item-actions,
.form-response-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.form-open-btn,
.form-view-responses-btn,
.form-response-view-btn {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-color);
    cursor: pointer;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.form-open-btn:hover,
.form-view-responses-btn:hover,
.form-response-view-btn:hover {
    background: var(--accent-color-soft);
    border-color: var(--accent-color);
    color: var(--accent-color);
}

.form-open-btn svg,
.form-view-responses-btn svg,
.form-response-view-btn svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
}

/* Empty/Error Messages */
.empty-message,
.error-message,
.loading-spinner {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-muted);
    font-size: 14px;
}

.error-message {
    color: var(--danger-color);
}

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

.loading-spinner::before {
    content: "";
    width: 20px;
    height: 20px;
    border: 2px solid var(--border-color);
    border-top-color: var(--accent-color);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

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

/* Responsive */
@media (max-width: 768px) {
    .forms-dialog-content,
    .form-responses-dialog-content {
        max-width: 95%;
        max-height: calc(100vh - 20px);
    }
    
    .forms-dialog-header,
    .form-responses-dialog-header {
        padding: 16px 20px;
    }
    
    .forms-dialog-body,
    .form-responses-dialog-body {
        padding: 16px 20px;
    }
    
    .forms-tabs {
        margin: -16px -20px 12px -20px;
        padding: 0 20px;
    }
    
    .forms-tab-btn {
        padding: 10px 12px;
        font-size: 13px;
    }
    
    .form-item,
    .form-response-item {
        padding: 12px;
        flex-direction: column;
        align-items: flex-start;
    }
    
    .form-item-actions,
    .form-response-actions {
        width: 100%;
        justify-content: flex-end;
    }
}

/* ============================================
   FORMS PAGE STYLES (forms.html)
   ============================================ */

/* Forms Page Container */
.forms-page {
    min-height: 100vh;
    min-height: 100dvh;
}

.forms-page .page-root {
    padding-top: calc(clamp(48px, 8vw, 64px) + clamp(8px, 1.5vw, 20px) + clamp(24px, 4vw, 48px)) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    align-items: center !important;
    justify-content: center !important;
    flex-direction: column !important;
}

.forms-page-container {
    max-width: none;
    margin: auto;
    padding: clamp(16px, 3vw, 24px);
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: fit-content;
    box-sizing: border-box;
    padding-top: 0;
    flex: 0 0 auto;
}

/* Ana Butonlar (2 Büyük Buton) - Dashboard Mantığıyla Dinamik */
.forms-main-buttons {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(clamp(280px, 35vw, 480px), 1fr));
    gap: clamp(16px, 2.5vw, 50px);
    max-width: 1200px;
    width: 100%; /* Telefonlar için tam genişlik */
    margin: 0 auto;
    position: relative;
    padding: 0 clamp(20px, 4vw, 40px);
    box-sizing: border-box;
    justify-items: center; /* Butonları grid içinde ortala */
}

.forms-main-btn {
    width: 100%;
    max-width: clamp(280px, 35vw, 480px);
    min-width: clamp(280px, 35vw, 480px);
    background: var(--card-bg);
    border: 2px solid var(--border-color);
    border-radius: 20px;
    padding: clamp(30px, 6vw, 70px) clamp(24px, 5vw, 56px);
    cursor: pointer;
    transition: all 0.3s ease, transform 0.1s ease;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(16px, 3vw, 32px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    min-height: clamp(240px, 30vh, 380px);
    height: auto; /* Yüksekliği otomatik yap */
    max-height: none;
    box-sizing: border-box;
    overflow: visible;
    opacity: 0;
    transform: scale(0.9) translateY(20px);
}

.forms-main-btn:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    border-color: var(--primary-color);
}

.forms-main-btn:active {
    transform: scale(0.95) translateY(-2px);
    transition: transform 0.1s ease;
}

.forms-main-btn-icon {
    width: clamp(80px, 12vw, 192px);
    height: clamp(80px, 12vw, 192px);
    min-width: clamp(80px, 12vw, 192px);
    min-height: clamp(80px, 12vw, 192px);
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-color); /* Koyu temada mavi, açık temada override edilecek */
    border-radius: 50%;
    color: white;
    transition: all 0.3s ease;
    flex-shrink: 0;
    flex-grow: 0;
    box-sizing: border-box;
}


.forms-main-btn-icon svg {
    width: 100%;
    height: 100%;
    padding: 20%;
    stroke: currentColor;
    color: white;
    box-sizing: border-box;
}

.forms-main-btn:hover .forms-main-btn-icon {
    transform: scale(1.1);
    background: var(--primary-color-hover); /* Koyu temada mavi hover */
}

/* Açık temada hover'da biraz daha koyu gri */
body[data-theme="light"] .forms-main-btn:hover .forms-main-btn-icon {
    background: #d1d5db !important;
}

.forms-main-btn-title {
    font-size: clamp(18px, 3vw, 48px);
    font-weight: 600;
    color: var(--text-color);
    margin: 0;
    line-height: 1.4;
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
    max-width: 100%;
    min-height: 2.8em; /* 2 satır için minimum yükseklik (line-height * 2) */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.forms-main-btn-description {
    font-size: clamp(14px, 2vw, 16px);
    color: var(--text-color-secondary);
    margin: 0;
    line-height: 1.5;
}

/* Tam Ekran Dialog */
.forms-fullscreen-dialog {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    padding: clamp(16px, 3vw, 32px);
    overflow-y: auto;
}

.forms-fullscreen-dialog.show {
    opacity: 1;
}

.forms-fullscreen-dialog-content {
    background: var(--bg-color);
    border-radius: 16px;
    width: 100%;
    max-width: 1200px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: dialogSlideIn 0.3s ease;
}

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

.forms-fullscreen-dialog-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: clamp(20px, 3vw, 32px);
    border-bottom: 1px solid var(--border-color);
}

.forms-fullscreen-dialog-title {
    font-size: clamp(20px, 3vw, 28px);
    font-weight: 600;
    color: var(--text-color);
    margin: 0;
}

.forms-fullscreen-dialog-close {
    background: transparent;
    border: none;
    color: var(--text-color);
    cursor: pointer;
    padding: 8px;
    border-radius: 8px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.forms-fullscreen-dialog-close:hover {
    background: var(--bg-color-hover);
    color: var(--primary-color);
}

.forms-fullscreen-dialog-body {
    padding: clamp(20px, 3vw, 32px);
    overflow-y: auto;
    flex: 1;
}

/* Form Yanıtları Detay Container */
.form-responses-detail-container {
    display: none;
    animation: fadeIn 0.3s ease;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.form-responses-detail-container.form-responses-fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bg-color);
    z-index: 10000;
    padding: clamp(16px, 2.5vw, 24px);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    opacity: 1;
    transform: translateX(0);
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.form-responses-detail-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: clamp(20px, 3vw, 32px);
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.form-responses-header-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
}

.form-responses-detail-header .form-responses-clear-filters-btn,
.form-responses-detail-header .form-responses-clear-locks-btn,
.form-responses-detail-header .form-responses-export-excel-btn {
    padding: 8px 12px;
    background: var(--accent-color-soft);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-color);
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 6px;
}

.form-responses-detail-header .form-responses-clear-filters-btn:hover,
.form-responses-detail-header .form-responses-clear-locks-btn:hover,
.form-responses-detail-header .form-responses-export-excel-btn:hover {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

.form-responses-detail-title {
    font-size: clamp(18px, 2.5vw, 24px);
    font-weight: 600;
    color: var(--text-color);
    margin: 0;
}

.form-responses-detail-list {
    display: flex;
    flex-direction: column;
    gap: clamp(12px, 2vw, 16px);
}

/* Forms Tabs */
.forms-tabs-container {
    display: flex;
    gap: 8px;
    margin-bottom: clamp(20px, 3vw, 32px);
    border-bottom: 2px solid var(--border-color);
    padding-bottom: 0;
}

.forms-tab-btn {
    background: transparent;
    border: none;
    padding: clamp(10px, 1.5vw, 14px) clamp(16px, 2.5vw, 24px);
    font-size: clamp(13px, 1.8vw, 16px);
    font-weight: 500;
    color: var(--text-color-secondary);
    cursor: pointer;
    position: relative;
    transition: color 0.2s ease;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
}

.forms-tab-btn:hover {
    color: var(--text-color);
}

.forms-tab-btn.active {
    color: var(--text-color);
    border-bottom-color: var(--primary-color);
}

.forms-tab-label {
    white-space: nowrap;
}

/* Tab Content */
.forms-tab-content {
    display: none;
}

.forms-tab-content.active {
    display: block;
    animation: fadeInUp 0.3s ease;
}

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

/* Forms List Container */
.forms-list-container {
    margin-top: clamp(16px, 2.5vw, 24px);
}

.forms-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: clamp(16px, 2.5vw, 24px);
}

/* Form Card */
.form-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: clamp(16px, 2.5vw, 24px);
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.form-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-color: var(--primary-color);
}

.form-card-header {
    margin-bottom: 12px;
}

.form-card-title {
    font-size: clamp(16px, 2vw, 20px);
    font-weight: 600;
    color: var(--text-color);
    margin: 0;
    line-height: 1.4;
}

.form-card-description {
    font-size: clamp(13px, 1.5vw, 15px);
    color: var(--text-color-secondary);
    margin: 0 0 16px 0;
    line-height: 1.5;
}

.form-card-actions {
    display: flex;
    gap: 8px;
    margin-top: 16px;
}

.form-fill-btn,
.form-view-responses-btn {
    flex: 1;
    padding: 10px 16px;
    font-size: clamp(13px, 1.5vw, 15px);
    border-radius: 8px;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.form-fill-btn {
    background: var(--primary-color);
    color: white;
}

.form-fill-btn:hover {
    background: var(--primary-color-hover);
    transform: scale(1.02);
}

.form-view-responses-btn {
    background: transparent;
    color: var(--text-color);
    border: 1px solid var(--border-color);
}

.form-view-responses-btn:hover {
    background: var(--bg-color-hover);
    border-color: var(--primary-color);
}

/* Form Responses Container */
.form-responses-container {
    margin-top: clamp(20px, 3vw, 32px);
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: clamp(16px, 2.5vw, 24px);
}

.form-responses-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: clamp(16px, 2.5vw, 24px);
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-color);
}

.btn-back {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-color);
    padding: 8px 16px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: clamp(13px, 1.5vw, 15px);
    transition: all 0.2s ease;
}

.btn-back:hover {
    background: var(--bg-color-hover);
    border-color: var(--primary-color);
}

.form-responses-title {
    font-size: clamp(18px, 2.5vw, 24px);
    font-weight: 600;
    color: var(--text-color);
    margin: 0;
}

.form-responses-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Form Response Card */
.form-response-card {
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: clamp(12px, 2vw, 16px);
    transition: all 0.2s ease;
}

.form-response-card:hover {
    border-color: var(--primary-color);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.form-response-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    flex-wrap: wrap;
    gap: 8px;
}

.form-response-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.form-response-date {
    font-size: clamp(12px, 1.5vw, 14px);
    color: var(--text-color-secondary);
}

.form-response-user {
    font-size: clamp(13px, 1.5vw, 15px);
    color: var(--text-color);
    font-weight: 500;
}

.form-response-user.anonymous {
    color: var(--text-color-secondary);
    font-style: italic;
}

.form-response-status {
    padding: 4px 12px;
    border-radius: 12px;
    font-size: clamp(11px, 1.3vw, 13px);
    font-weight: 500;
    text-transform: uppercase;
}

.form-response-status.status-submitted {
    background: rgba(59, 130, 246, 0.1);
    color: rgb(59, 130, 246);
}

.form-response-status.status-reviewed {
    background: rgba(34, 197, 94, 0.1);
    color: rgb(34, 197, 94);
}

.form-response-status.status-rejected {
    background: rgba(239, 68, 68, 0.1);
    color: rgb(239, 68, 68);
}

.form-response-notes {
    font-size: clamp(13px, 1.5vw, 15px);
    color: var(--text-color-secondary);
    margin: 8px 0 0 0;
    line-height: 1.5;
}

/* Empty State */
.empty-state {
    text-align: center;
    padding: clamp(40px, 6vw, 60px);
    color: var(--text-color-secondary);
    font-size: clamp(14px, 2vw, 16px);
}

.loading-spinner {
    text-align: center;
    padding: clamp(40px, 6vw, 60px);
    color: var(--text-color-secondary);
    font-size: clamp(14px, 2vw, 16px);
}

/* Responsive - Mobile (Portrait) */
@media (max-width: 768px) and (orientation: portrait) {
    .forms-fullscreen-dialog {
        padding: 0;
    }
    
    .forms-fullscreen-dialog-content {
        max-height: 100vh;
        border-radius: 0;
    }
    
    .forms-list {
        grid-template-columns: 1fr;
    }
    
    .form-card-actions {
        flex-direction: column;
    }
    
    .form-fill-btn,
    .form-view-responses-btn {
        width: 100%;
    }
    
    .form-responses-detail-header {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* Responsive - Tablet (Portrait) */
@media (min-width: 769px) and (max-width: 1024px) and (orientation: portrait) {
    .forms-list {
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    }
}

/* Responsive - Tablet (Landscape) */
@media (min-width: 769px) and (max-width: 1024px) and (orientation: landscape) {
    .forms-main-buttons {
        grid-template-columns: repeat(3, minmax(clamp(200px, 28vw, 350px), 1fr));
        gap: clamp(16px, 2.5vw, 32px);
        width: 100%;
        max-width: 100%;
        justify-items: center;
    }
    
    .forms-main-btn {
        max-width: 100%;
        min-width: 0;
    }
    
    .forms-list {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    }
}

/* Responsive - Desktop (Landscape) */
@media (min-width: 1025px) and (orientation: landscape) {
    .forms-main-buttons {
        grid-template-columns: repeat(3, auto);
        gap: clamp(24px, 3vw, 40px);
        width: fit-content;
        max-width: calc(100vw - clamp(32px, 6vw, 48px));
        margin: 0 auto;
        justify-items: center;
        padding: 0;
    }
    
    .forms-main-btn {
        width: clamp(280px, 30vw, 420px);
        min-width: clamp(280px, 30vw, 420px);
        max-width: clamp(280px, 30vw, 420px);
    }
}

/* Responsive - Desktop (Portrait) */
@media (min-width: 1025px) and (orientation: portrait) {
    .forms-main-buttons {
        grid-template-columns: repeat(3, auto);
        gap: clamp(20px, 3vw, 40px);
        width: fit-content;
        max-width: calc(100vw - clamp(32px, 6vw, 48px));
        margin: 0 auto;
        justify-items: center;
        padding: 0;
    }
    
    .forms-main-btn {
        width: clamp(250px, 28vw, 400px);
        min-width: clamp(250px, 28vw, 400px);
        max-width: clamp(250px, 28vw, 400px);
    }
    
    .forms-main-btn {
        max-width: 100%;
        min-width: 0;
    }
}

/* Responsive - Mobile (Landscape) - Dashboard Mantığıyla Dinamik */
@media (max-width: 768px) and (orientation: landscape), (max-height: 600px) {
    .forms-page .page-root {
        padding-top: calc(clamp(48px, 8vw, 64px) + clamp(8px, 1.5vw, 20px) + clamp(16px, 3vw, 32px)) !important;
    }
    
    .forms-main-buttons {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: clamp(10px, 1.5vw, 20px);
        padding: 0 clamp(8px, 1.5vw, 14px);
        width: fit-content;
        max-width: 100%;
        margin: 0 auto;
    }
    
    .forms-main-btn {
        flex: 0 0 auto;
        width: clamp(120px, 28vw, 200px);
        min-width: clamp(120px, 28vw, 200px);
        max-width: clamp(120px, 28vw, 200px);
        min-height: clamp(140px, 22vh, 200px);
        padding: clamp(14px, 2.5vw, 24px) clamp(12px, 2vw, 20px);
        box-sizing: border-box;
        justify-content: center; /* İçeriği dikey olarak ortala */
        align-items: center; /* İçeriği yatay olarak ortala */
    }
    
    .forms-main-btn-icon {
        width: clamp(50px, 9vw, 70px);
        height: clamp(50px, 9vw, 70px);
        min-width: clamp(50px, 9vw, 70px);
        min-height: clamp(50px, 9vw, 70px);
    }
    
    .forms-main-btn-title {
        font-size: clamp(13px, 2vw, 18px);
    }
}

/* Responsive - Küçük Telefonlar (Landscape) */
@media (max-width: 480px) and (orientation: landscape), (max-height: 600px) and (max-width: 480px) {
    .forms-page .page-root {
        padding-top: calc(clamp(48px, 8vw, 64px) + clamp(8px, 1.5vw, 20px) + clamp(12px, 2vw, 24px)) !important;
    }
    
    .forms-main-buttons {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: clamp(8px, 1.5vw, 16px);
        padding: 0 clamp(6px, 1.2vw, 10px);
        width: fit-content;
        max-width: 100%;
        margin: 0 auto;
    }
    
    .forms-main-btn {
        flex: 0 0 auto;
        width: clamp(100px, 25vw, 170px);
        min-width: clamp(100px, 25vw, 170px);
        max-width: clamp(100px, 25vw, 170px);
        min-height: clamp(110px, 19vh, 170px);
        padding: clamp(12px, 2.2vw, 20px) clamp(10px, 1.8vw, 18px);
        box-sizing: border-box;
        justify-content: center; /* İçeriği dikey olarak ortala */
        align-items: center; /* İçeriği yatay olarak ortala */
    }
    
    .forms-main-btn-icon {
        width: clamp(42px, 8vw, 60px);
        height: clamp(42px, 8vw, 60px);
        min-width: clamp(42px, 8vw, 60px);
        min-height: clamp(42px, 8vw, 60px);
    }
    
    .forms-main-btn-title {
        font-size: clamp(11px, 1.8vw, 16px);
    }
}

/* Responsive - Mobile (Portrait) */
@media (max-width: 768px) and (orientation: portrait) {
    .forms-page .page-root {
        padding-top: calc(clamp(48px, 8vw, 64px) + clamp(8px, 1.5vw, 20px) + clamp(20px, 3vw, 40px)) !important;
    }
    
    .forms-page-container {
        padding: clamp(10px, 1.5vw, 16px);
        justify-content: flex-start;
        padding-top: 0;
        width: 100%;
        box-sizing: border-box;
    }
    
    .forms-main-buttons {
        grid-template-columns: 1fr;
        gap: clamp(12px, 2vw, 24px);
        padding: 0 clamp(12px, 2vw, 24px);
        margin-top: 0;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
    
    .forms-main-btn {
        min-width: 100%;
        max-width: 100%;
        width: 100%;
        justify-content: center; /* İçeriği dikey olarak ortala */
        align-items: center; /* İçeriği yatay olarak ortala */
    }
}

/* Responsive - Tablet (Portrait) */
@media (min-width: 769px) and (max-width: 1024px) and (orientation: portrait) {
    .forms-main-buttons {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: clamp(16px, 2.5vw, 32px);
        width: 100%;
        max-width: 100%;
    }
    
    .forms-main-btn {
        max-width: 100%;
        min-width: 0;
    }
}

/* Touch Device Optimizations */
@media (hover: none) and (pointer: coarse) {
    .forms-main-btn {
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
        min-height: clamp(200px, 25vh, 320px);
    }
    
    .forms-main-btn:active {
        transform: scale(0.98) translateY(-1px); 
    }
}

/* Light Theme Adjustments */
body[data-theme="light"] .forms-main-btn {
    background: rgba(255, 255, 255, 0.8);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

body[data-theme="light"] .forms-main-btn:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

body[data-theme="light"] .forms-main-btn:hover .forms-main-btn-icon {
    background: #d1d5db !important; /* Hover'da biraz daha koyu gri */
}

/* Açık temada icon container background'u açık gri yap */
body[data-theme="light"] .forms-main-btn-icon {
    background: #e5e7eb !important;
    color: #000000 !important;
}

body[data-theme="light"] .forms-main-btn-icon svg {
    stroke: #000000 !important;
    fill: none !important;
    color: #000000 !important;
}

body[data-theme="light"] .forms-main-btn-icon svg path,
body[data-theme="light"] .forms-main-btn-icon svg rect,
body[data-theme="light"] .forms-main-btn-icon svg line,
body[data-theme="light"] .forms-main-btn-icon svg polyline,
body[data-theme="light"] .forms-main-btn-icon svg circle {
    stroke: #000000 !important;
    fill: none !important;
}

/* SVG'nin tüm child elementlerini override et */
body[data-theme="light"] .forms-main-btn-icon svg * {
    stroke: #000000 !important;
    fill: none !important;
    color: #000000 !important;
}

body[data-theme="light"] .forms-fullscreen-dialog {
    background: rgba(0, 0, 0, 0.6);
}

body[data-theme="light"] .forms-fullscreen-dialog-content {
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}

body[data-theme="light"] .form-card {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

body[data-theme="light"] .form-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

body[data-theme="light"] .form-response-card {
    background: rgba(255, 255, 255, 0.5);
}

body[data-theme="light"] .form-response-card:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* Form Response Details Styles */
.form-response-details-header {
    margin-bottom: clamp(20px, 3vw, 32px);
    padding-bottom: clamp(16px, 2.5vw, 24px);
    border-bottom: 1px solid var(--border-color);
}

.form-response-details-title {
    font-size: clamp(18px, 2.5vw, 24px);
    font-weight: 600;
    color: var(--text-color);
    margin: 0 0 clamp(8px, 1.2vw, 12px) 0;
}

.form-response-details-meta {
    display: flex;
    gap: clamp(12px, 2vw, 20px);
    flex-wrap: wrap;
    font-size: clamp(12px, 1.5vw, 14px);
    color: var(--text-muted);
}

.form-response-details-date,
.form-response-details-user {
    display: inline-flex;
    align-items: center;
}

.form-response-details-user.anonymous {
    color: var(--text-muted);
    font-style: italic;
}

.form-answers-container {
    display: flex;
    flex-direction: column;
    gap: clamp(16px, 2.5vw, 24px);
}

.form-answer-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: clamp(16px, 2.5vw, 24px);
    transition: all 0.2s ease;
}

.form-answer-card:hover {
    border-color: var(--primary-color);
    box-shadow: 0 4px 12px rgba(var(--primary-color-rgb), 0.1);
}

.form-answer-question {
    display: flex;
    align-items: flex-start;
    gap: clamp(8px, 1.2vw, 12px);
    margin-bottom: clamp(12px, 2vw, 16px);
}

.form-answer-question-number {
    font-weight: 600;
    color: var(--primary-color);
    font-size: clamp(14px, 2vw, 16px);
    min-width: 24px;
}

.form-answer-question-text {
    font-weight: 500;
    color: var(--text-color);
    font-size: clamp(14px, 2vw, 16px);
    flex: 1;
}

.form-answer-value {
    color: var(--text-color);
    font-size: clamp(14px, 2vw, 16px);
    line-height: 1.6;
    word-wrap: break-word;
}

.form-answer-empty {
    color: var(--text-muted);
    font-style: italic;
}

.form-answer-file-link {
    color: var(--primary-color);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: color 0.2s ease;
}

.form-answer-file-link:hover {
    color: var(--accent-color);
    text-decoration: underline;
}

.form-answer-image-preview {
    margin-top: clamp(8px, 1.2vw, 12px);
}

.form-answer-image {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    display: block;
    margin-bottom: clamp(8px, 1.2vw, 12px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.form-answer-image-error {
    padding: clamp(16px, 2.5vw, 24px);
    background: var(--bg-elevated);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    text-align: center;
    color: var(--text-muted);
}

.form-answer-file-name {
    font-size: clamp(12px, 1.5vw, 14px);
    color: var(--text-muted);
    margin: 0;
}

.form-response-actions {
    display: flex;
    align-items: center;
    gap: clamp(8px, 1.2vw, 12px);
}

.form-response-view-btn {
    background: transparent;
    border: none;
    color: var(--primary-color);
    cursor: pointer;
    padding: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    border-radius: 4px;
}

.form-response-view-btn:hover {
    background: var(--accent-color-soft);
    transform: scale(1.1);
}

/* Light Theme Adjustments for Answer Cards */
body[data-theme="light"] .form-answer-card {
    background: rgba(255, 255, 255, 0.8);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

body[data-theme="light"] .form-answer-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

body[data-theme="light"] .form-answer-image {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Form Responses Table */
.form-responses-table-wrapper {
    overflow-x: auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    max-width: 100%;
    max-height: calc(100vh - 200px);
    position: relative; /* Dropdown için referans */
    overflow-y: auto; /* Dikey scroll */
    overflow-x: auto; /* Yatay scroll */
}

/* Scroll bar görünür yap */
.form-responses-table-wrapper::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

.form-responses-table-wrapper::-webkit-scrollbar-track {
    background: var(--bg-elevated);
    border-radius: 6px;
}

.form-responses-table-wrapper::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 6px;
    border: 2px solid var(--bg-elevated);
}

.form-responses-table-wrapper::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

.form-responses-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--card-bg);
    border-radius: 8px;
    overflow: visible; /* Dropdown'ların görünmesi için */
    min-width: 600px; /* Minimum genişlik - mobilde scroll olacak */
}

.form-responses-table thead {
    background: var(--bg-elevated);
    position: sticky;
    top: 0;
    z-index: 100; /* Yüksek z-index - her zaman üstte */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Gölge efekti - sabit olduğunu göster */
}

.form-responses-table th {
    padding: clamp(12px, 2vw, 16px);
    text-align: left;
    font-weight: 600;
    color: var(--text-color);
    font-size: clamp(13px, 1.8vw, 15px);
    border-bottom: 2px solid var(--border-color);
    border-right: 1px solid var(--border-color);
    vertical-align: top;
    transition: background-color 0.2s ease, left 0.2s ease;
    position: relative; /* Kilitlenen sütunlar için referans */
}

/* Kilitlenen sütunlar - sticky pozisyon */
.form-responses-table th.locked-column,
.form-responses-table td.locked-column {
    position: sticky;
    z-index: 50; /* Header'dan daha yüksek, dropdown'dan daha düşük */
    background: var(--bg-elevated);
    box-shadow: 2px 0 4px rgba(0, 0, 0, 0.1); /* Sağda gölge - sabit olduğunu göster */
}

.form-responses-table tbody td.locked-column {
    background: var(--card-bg);
    z-index: 40;
}

/* Filtre aktif olan sütun - Arka plan rengi */
.form-responses-table th.filter-active {
    background-color: rgba(34, 197, 94, 0.15) !important; /* Yeşil arka plan */
}

body[data-theme="light"] .form-responses-table th.filter-active {
    background-color: rgba(34, 197, 94, 0.2) !important; /* Light tema için biraz daha koyu */
}

.form-responses-table th:last-child {
    border-right: none;
}

.form-responses-table td {
    padding: clamp(10px, 1.5vw, 14px);
    border-bottom: 1px solid var(--border-color);
    border-right: 1px solid var(--border-color);
    color: var(--text-color);
    font-size: clamp(13px, 1.8vw, 15px);
    vertical-align: top;
    word-wrap: break-word;
    max-width: 300px;
}

.form-responses-table td:last-child {
    border-right: none;
}

.form-responses-table tbody tr:hover {
    background: var(--bg-elevated);
}

.form-responses-table tbody tr:last-child td {
    border-bottom: none;
}

/* Table Header with Filter */
.form-table-header-content {
    display: flex;
    flex-direction: column;
    gap: clamp(4px, 0.8vw, 6px);
    position: relative;
    min-height: 70px; /* Minimum yükseklik - tüm header'lar aynı yükseklikte */
}

.form-table-header-controls-row {
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
    min-height: 32px; /* Minimum yükseklik - sıralama ikonları aynı hizada */
}

.form-table-header-text-row {
    display: flex;
    align-items: flex-start;
    position: relative;
    flex: 1;
    min-height: 24px;
}

.form-table-lock-btn {
    background: transparent;
    border: none;
    padding: 4px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    transition: color 0.2s ease, transform 0.1s ease;
    margin-left: 4px;
    vertical-align: middle;
    flex-shrink: 0;
}

.form-table-lock-btn:hover {
    color: var(--primary-color);
    transform: scale(1.1);
}

.form-table-lock-btn.locked {
    color: #ef4444 !important; /* Kırmızı renk */
}

.form-table-lock-btn.locked:hover {
    color: #dc2626 !important; /* Daha koyu kırmızı */
}

.form-table-sort-icon {
    font-size: clamp(12px, 1.6vw, 14px);
    color: var(--text-muted);
    cursor: pointer;
    user-select: none;
    transition: color 0.2s ease;
    padding: 2px 4px;
    flex-shrink: 0;
    line-height: 1;
    z-index: 1;
    white-space: nowrap;
}

th[data-sort] {
    cursor: pointer;
    user-select: none;
}

th[data-sort]:hover .form-table-sort-icon {
    color: var(--primary-color);
}

th.sort-asc .form-table-sort-icon,
th.sort-desc .form-table-sort-icon {
    color: var(--primary-color);
}


.form-table-filter-wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
    width: 100%;
    position: relative; /* Dropdown için referans noktası */
    overflow: visible; /* Dropdown kesilmesin */
    flex: 1;
}

.form-table-filter-input {
    flex: 1;
    padding: clamp(6px, 1vw, 8px) clamp(60px, 5vw, 80px) clamp(6px, 1vw, 8px) clamp(6px, 1vw, 8px); /* Sağda çöp kutusu ve dropdown için daha fazla padding */
    font-size: clamp(11px, 1.5vw, 13px);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--input-bg);
    color: var(--text-color);
    transition: border-color 0.2s ease;
    height: 32px; /* Sabit yükseklik - tüm filtre kutuları aynı yükseklikte */
    box-sizing: border-box;
    overflow: hidden; /* Taşan yazıları gizle */
    text-overflow: ellipsis; /* Taşan yazıları ... ile göster */
    white-space: nowrap; /* Tek satırda göster */
}

.form-table-filter-clear-btn,
.form-table-filter-dropdown-btn {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease;
    z-index: 2;
}

.form-table-filter-clear-btn {
    right: 24px;
}

.form-table-filter-clear-btn:hover,
.form-table-filter-dropdown-btn:hover {
    color: var(--primary-color);
}

.form-table-filter-dropdown {
    position: fixed !important; /* Fixed position - viewport'a göre konumlanır, kesilmez, scroll'dan etkilenmez */
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 10001; /* Çok yüksek z-index - header'dan bile üstte */
    max-height: 200px;
    display: flex;
    flex-direction: column;
    overflow: hidden; /* İçerik taşmasını engelle */
    min-width: 200px; /* Minimum genişlik */
    /* Position JavaScript ile ayarlanacak */
}

.form-table-filter-dropdown-header {
    padding: 8px 12px;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-elevated);
}

.form-table-filter-select-all {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: clamp(12px, 1.5vw, 13px);
    color: var(--text-color);
    user-select: none;
}

.form-table-filter-select-all input[type="checkbox"] {
    cursor: pointer;
}

.form-table-filter-dropdown-list {
    overflow-y: auto;
    height: calc(5 * 32px); /* Sabit yükseklik - 5 öğe için (her öğe ~32px) */
    min-height: calc(5 * 32px); /* Minimum yükseklik */
    max-height: calc(5 * 32px); /* Maximum yükseklik */
    padding: 4px 0;
    box-sizing: border-box;
}

.form-table-filter-dropdown-list::-webkit-scrollbar {
    width: 8px;
}

.form-table-filter-dropdown-list::-webkit-scrollbar-track {
    background: var(--bg-elevated);
}

.form-table-filter-dropdown-list::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 4px;
}

.form-table-filter-dropdown-list::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

.form-table-filter-dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    cursor: pointer;
    font-size: clamp(12px, 1.5vw, 13px);
    color: var(--text-color);
    user-select: none;
    transition: background 0.2s ease;
}

.form-table-filter-dropdown-item:hover {
    background: var(--bg-elevated);
}

.form-table-filter-dropdown-item input[type="checkbox"] {
    cursor: pointer;
}

.form-table-filter-dropdown-item-hidden {
    display: none;
}

/* Dropdown list scroll - 5'erli gösterim için */
.form-table-filter-dropdown-list {
    height: calc(5 * 32px); /* Sabit yükseklik - 5 öğe için (her öğe ~32px) */
    min-height: calc(5 * 32px); /* Minimum yükseklik */
    max-height: calc(5 * 32px); /* Maximum yükseklik */
    overflow-y: auto;
    box-sizing: border-box;
}

.form-table-filter-dropdown-list::-webkit-scrollbar {
    width: 8px;
}

.form-table-filter-dropdown-list::-webkit-scrollbar-track {
    background: var(--bg-elevated);
    border-radius: 4px;
}

.form-table-filter-dropdown-list::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 4px;
}

.form-table-filter-dropdown-list::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

/* Column Resize Handle (Excel gibi) */
.form-table-resize-handle {
    position: absolute;
    top: 0;
    right: 0;
    width: 8px;
    height: 100%;
    cursor: col-resize;
    z-index: 100;
    background: transparent;
    transition: background 0.2s ease;
    pointer-events: auto;
}

.form-table-resize-handle:hover {
    background: var(--primary-color);
    opacity: 0.5;
}

.form-table-resize-handle::after {
    content: '';
    position: absolute;
    top: 0;
    right: 3px;
    width: 2px;
    height: 100%;
    background: var(--border-color);
}

.form-table-filter-input:hover {
    border-color: var(--primary-color);
}

.form-table-filter-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px var(--accent-color-soft);
}

.form-table-filter-input::placeholder {
    color: var(--text-muted);
    font-size: clamp(10px, 1.3vw, 12px);
}


.form-table-no-filter {
    font-size: clamp(10px, 1.3vw, 12px);
    color: var(--text-muted);
    font-style: italic;
}

.form-table-col-file {
    min-width: clamp(180px, 22vw, 280px);
}

.form-table-header-text small {
    font-size: 0.85em;
    color: var(--text-muted);
    font-weight: normal;
}

/* Table Column Widths */
.form-table-col-date {
    min-width: clamp(120px, 15vw, 160px);
    width: clamp(120px, 15vw, 160px);
}

.form-table-col-user {
    min-width: clamp(100px, 12vw, 140px);
    width: clamp(100px, 12vw, 140px);
}

.form-table-col-question {
    min-width: clamp(150px, 20vw, 250px);
}

.form-table-cell-date,
.form-table-cell-user {
    white-space: nowrap;
}

.form-table-cell-file {
    min-width: 200px;
}

/* Table Image Cell */
.form-table-image-cell {
    display: flex;
    flex-direction: column;
    gap: clamp(6px, 1vw, 8px);
    align-items: flex-start;
}

.form-table-image {
    width: 60px;
    height: 90px;
    border-radius: 4px;
    border: 1px solid var(--border-color);
    object-fit: cover;
    object-position: center;
}

.form-table-file-name {
    font-size: clamp(11px, 1.5vw, 13px);
    color: var(--text-muted);
    word-break: break-word;
}

.form-table-file-link {
    color: var(--primary-color);
    text-decoration: none;
    transition: color 0.2s ease;
}

.form-table-file-link:hover {
    color: var(--accent-color);
    text-decoration: underline;
}

/* Responsive - Mobile */
@media (max-width: 768px) {
    .form-responses-table-wrapper {
        border-radius: 8px;
        border: 1px solid var(--border-color);
    }
    
    .form-responses-table {
        font-size: clamp(12px, 1.6vw, 14px);
    }
    
    .form-table-col-date {
        min-width: 100px;
        width: 100px;
    }
    
    .form-table-col-user {
        min-width: 80px;
        width: 80px;
    }
    
    .form-table-col-question {
        min-width: 120px;
    }
}

/* Form Response Answers Container */
.form-response-answers {
    margin-top: clamp(12px, 2vw, 16px);
    display: flex;
    flex-direction: column;
    gap: clamp(12px, 2vw, 16px);
}

.form-answer-item {
    padding: clamp(12px, 2vw, 16px);
    background: var(--bg-elevated);
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

.form-answer-item.form-answer-file {
    padding: clamp(16px, 2.5vw, 20px);
}

.form-answer-question {
    display: flex;
    align-items: flex-start;
    gap: clamp(8px, 1.2vw, 12px);
    margin-bottom: clamp(8px, 1.2vw, 12px);
}

.form-answer-question-number {
    font-weight: 600;
    color: var(--primary-color);
    font-size: clamp(14px, 2vw, 16px);
    min-width: 24px;
}

.form-answer-question-text {
    font-weight: 500;
    color: var(--text-color);
    font-size: clamp(14px, 2vw, 16px);
    flex: 1;
}

.form-answer-value {
    color: var(--text-color);
    font-size: clamp(14px, 2vw, 16px);
    line-height: 1.6;
    word-wrap: break-word;
    padding-left: clamp(28px, 4vw, 36px);
}

.form-answer-file-item {
    margin-top: clamp(8px, 1.2vw, 12px);
}

/* Light Theme Adjustments */
body[data-theme="light"] .form-responses-filter-container {
    background: rgba(245, 247, 251, 0.8);
}

body[data-theme="light"] .form-answer-item {
    background: rgba(255, 255, 255, 0.6);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}