/* ── Genel Değişkenler ve Sıfırlama ── */
        * { box-sizing: border-box; }
        /* ── Scrollbar ── */
        ::-webkit-scrollbar { width: 6px; }
        ::-webkit-scrollbar-track { background: transparent; }
        ::-webkit-scrollbar-thumb { background: #333; border-radius: 3px; }
        ::-webkit-scrollbar-thumb:hover { background: #C0392B; }
        [data-theme="light"] ::-webkit-scrollbar-thumb { background: #C7C7CC; }
        [data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: #C0392B; }
        :root {
            --bg-primary: #000; --bg-secondary: #121212; --bg-card: #141414;
            --bg-elevated: #1a1a1a; --bg-input: #1a1a1a; --bg-hover: #282828;
            --text-primary: #fff; --text-secondary: #a7a7a7; --text-muted: #555;
            --border: #282828; --border-light: #333; --border-subtle: #1a1a1a;
            --accent: #C0392B; --accent-hover: #D94A3D; --accent-bg: #1a0806;
            --search-bg: #282828; --overlay: rgba(0,0,0,0.8);
            --card-shadow: rgba(0,0,0,0.3); --accent-glow: rgba(252,60,68,0.12);
        }
        [data-theme="light"] {
            --bg-primary: #FFFFFF; --bg-secondary: #FFFFFF; --bg-card: #F5F5F7;
            --bg-elevated: #E8E8ED; --bg-input: #E8E8ED; --bg-hover: #DCDCE0;
            --text-primary: #1D1D1F; --text-secondary: #48484A; --text-muted: #8E8E93;
            --border: #D2D2D7; --border-light: #C7C7CC; --border-subtle: #E5E5EA;
            --accent: #C0392B; --accent-hover: #E0343B; --accent-bg: #FFECEE;
            --search-bg: #E8E8ED; --overlay: rgba(0,0,0,0.4);
            --card-shadow: rgba(0,0,0,0.08); --accent-glow: rgba(252,60,68,0.08);
        }
        body { margin: 0; background-color: var(--bg-primary); color: var(--text-primary);  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; }

        /* ── Navbar ── */
        #navbar {
            position: fixed; top: 0; left: 0; right: 0;
            height: 56px; background: var(--bg-primary);
            backdrop-filter: blur(12px);
            display: flex; align-items: center; justify-content: space-between;
            padding: 0 24px; z-index: 999;
            border-bottom: 1px solid var(--border-subtle);
        }
        #navbar .logo { color: #fff; font-weight: 800; font-size: 16px; letter-spacing: -0.5px; }
        #navbar .logo span { color:#C0392B; }
        #navbar .nav-right { display: flex; align-items: center; gap: 12px; }
        
        #btnLogin {
            padding: 8px 18px; background: transparent;
            border: 1px solid #555; color: #fff;
            border-radius: 20px; cursor: pointer; font-size: 13px;
            transition: all 0.2s;
        }
        #btnLogin:hover { border-color: #fff; }
        
        #btnSignup {
            padding: 8px 18px; background:#C0392B;
            border: none; color: #fff; font-weight: bold;
            border-radius: 20px; cursor: pointer; font-size: 13px;
            transition: all 0.2s;
        }
        #btnSignup:hover { background:#D94A3D; }
        
        #userAvatar {
            width: 32px; height: 32px; border-radius: 50%;
            background:#C0392B; font-weight: bold;
            display: flex; align-items: center; justify-content: center;
            font-size: 13px; cursor: pointer;
        }
        #btnPlaylists:hover { border-color:#C0392B; color:#C0392B; }
        
        /* ── Sayfa Kaymalarını (Yamukluğu) Önleyen Padding ── */
        #landingPage { padding-top: 76px !important; }
        #mainPage { padding-top: 76px !important; position: relative; z-index: 1; }
        #onboardingPage { padding-top: 76px !important; }

        /* ── Avatar Dropdown ── */
        .avatar-wrapper { position: relative; }
        #avatarMenu {
            display: none; position: absolute; top: 44px; right: 0;
            background: var(--bg-elevated); border: 1px solid var(--border);
            border-radius: 10px; min-width: 180px;
            box-shadow: 0 8px 24px rgba(0,0,0,0.6);
            overflow: hidden; z-index: 9000;
        }
        #avatarMenu.open { display: block; animation: modalIn 0.15s ease; }
        .avatar-menu-email {
            padding: 12px 16px; font-size: 12px; color: var(--text-muted);
            border-bottom: 1px solid var(--border); white-space: nowrap;
            overflow: hidden; text-overflow: ellipsis;
        }
        .avatar-menu-item {
            padding: 11px 16px; font-size: 13px; color: #ddd;
            cursor: pointer; transition: background 0.15s;
            display: flex; align-items: center; gap: 8px;
        }
        .avatar-menu-item:hover { background: var(--search-bg); }
        .avatar-menu-item.danger { color: #ef4444; }

        /* ── Auth Modal ── */
        #authOverlay {
            display: none; position: fixed; inset: 0;
            background: rgba(0,0,0,0.8); z-index: 10000;
            align-items: center; justify-content: center;
        }
        #authOverlay.active { display: flex; }
        #authModal {
            background: #161618; border: 1px solid var(--border);
            border-radius: 16px; padding: 40px 36px;
            width: 100%; max-width: 400px; position: relative;
            animation: modalIn 0.2s ease;
        }
        @keyframes modalIn {
            from { opacity: 0; transform: scale(0.96) translateY(8px); }
            to   { opacity: 1; transform: scale(1) translateY(0); }
        }
        #authModal h2 { color: #fff; margin: 0 0 6px; font-size: 22px; }
        #authModal p  { color: var(--text-secondary); font-size: 13px; margin: 0 0 28px; }
        .auth-close {
            position: absolute; top: 16px; right: 18px;
            background: none; border: none; color: var(--text-muted);
            font-size: 20px; cursor: pointer; line-height: 1;
        }
        .auth-close:hover { color: #fff; }
        .btn-google {
            width: 100%; padding: 12px; background: #fff;
            border: none; border-radius: 8px; cursor: pointer;
            display: flex; align-items: center; justify-content: center;
            gap: 10px; font-size: 14px; font-weight: 600; color: #000;
            transition: background 0.2s; margin-bottom: 20px;
        }
        .btn-google:hover { background: #f1f1f1; }
        .auth-divider {
            display: flex; align-items: center; gap: 12px;
            color: var(--text-muted); font-size: 12px; margin-bottom: 20px;
        }
        .auth-divider::before, .auth-divider::after {
            content: ''; flex: 1; height: 1px; background: var(--search-bg);
        }
        .auth-input {
            width: 100%; padding: 12px; background: var(--bg-elevated);
           border: 1px solid var(--border-light); color: #fff; border-radius: 8px;
            font-size: 14px; margin-bottom: 12px; box-sizing: border-box;
            transition: border-color 0.2s;
        }
        .auth-input:focus { outline: none; border-color:#C0392B; }
        .btn-auth-submit {
            width: 100%; padding: 13px; background:#C0392B;
            border: none; color: #fff; font-weight: bold;
            border-radius: 8px; cursor: pointer; font-size: 15px;
            transition: background 0.2s; margin-bottom: 16px;
        }
        .btn-auth-submit:hover { background:#D94A3D; }
        .auth-switch { color: var(--text-secondary); font-size: 13px; text-align: center; }
        .auth-switch a { color:#C0392B; cursor: pointer; text-decoration: none; }
        .auth-switch a:hover { text-decoration: underline; }
        #authError { color: #ef4444; font-size: 13px; margin-bottom: 12px; display: none; }

        
        @keyframes slideIn {
            from { transform: translateX(100%); }
            to   { transform: translateX(0); }
        }
       

        /* ── Search Dropdown ── */
        .search-container { position: relative; width: 100%; max-width: 500px; margin: 0 auto 20px auto; }
        #aramaKutusu { width: 100%; padding: 12px; box-sizing: border-box; background: var(--search-bg);border: 1px solid var(--border-light); color: white; border-radius: 8px; font-size: 14px; }
        #searchResults { position: absolute; top: 100%; left: 0; right: 0; background: var(--bg-card);border: 1px solid var(--border-light); border-top: none; border-radius: 0 0 8px 8px; z-index: 1000; max-height: 400px; overflow-y: auto; display: none; box-shadow: 0 8px 16px rgba(0,0,0,0.5); }
        .search-item { display: flex; align-items: center; padding: 8px 12px; cursor: pointer; border-bottom: 1px solid var(--border); transition: background 0.2s; }
        .search-item:last-child { border-bottom: none; }
        .search-item:hover { background: #333; }
        .search-item img { width: 36px; height: 36px; border-radius: 50%; margin-right: 12px; object-fit: cover; flex-shrink: 0; }
        .search-item-info { display: flex; flex-direction: column; text-align: left; }
        .search-item-info strong { color: #fff; font-size: 13px; }
        .search-item-info span { color: var(--text-secondary); font-size: 11px; }

        /* ── Landing / Auth Page ── */
        #landingPage {
            display: none; position: fixed; inset: 0;
            background: #000; z-index: 8000;
            align-items: stretch; justify-content: flex-start;
            flex-direction: column;
            overflow-y: auto;
        }
        #landingPage.active { display: flex; padding-top: 56px; }
        .landing-card {
            background: #161618;  border: 1px solid var(--border-subtle);
            border-radius: 20px; padding: 48px 40px;
            width: 100%; max-width: 420px; text-align: center;
            position: relative; z-index: 1;
            margin: 0 auto;
        }
        .landing-logo { font-size: 28px; font-weight: 900; color: #fff; margin-bottom: 8px; }
        .landing-logo span { color:#C0392B; }
        .landing-tagline { color: var(--text-secondary); font-size: 14px; margin-bottom: 36px; line-height: 1.5; }

        /* ── Onboarding ── */
        #onboardingPage {
            display: none; position: fixed; inset: 0;
            background: #000; z-index: 7000;
            overflow-y: auto; padding: 40px 20px;
        }
        #onboardingPage.active { display: block; }
        .onboarding-inner { max-width: 640px; margin: 0 auto; text-align: center; position: relative; }
        .onboarding-inner h2 { color: #fff; font-size: 24px; margin-bottom: 8px; }
        .onboarding-inner p  { color: var(--text-secondary); font-size: 14px; margin-bottom: 32px; }
        .artist-grid {
            display: grid; grid-template-columns: repeat(4, 1fr);
            gap: 12px; margin-bottom: 32px;
        }
        .artist-chip {
            background: var(--bg-elevated); border: 2px solid transparent;
            border-radius: 12px; padding: 14px 8px;
            cursor: pointer; transition: all 0.18s; text-align: center;
        }
        .artist-chip:hover { border-color: #333; background: #222; }
        .artist-chip.selected { border-color:#C0392B; background:#1a0806; }
        .artist-chip img {
            width: 64px; height: 64px; border-radius: 50%;
            object-fit: cover; margin-bottom: 8px; display: block; margin: 0 auto 8px;
        }
        .artist-chip span { color: #fff; font-size: 12px; font-weight: 600; display: block; }
        .artist-chip .chip-check {
            color:#C0392B; font-size: 14px; margin-top: 4px;
            opacity: 0; transition: opacity 0.15s;
        }
        .artist-chip.selected .chip-check { opacity: 1; }
        .onboarding-counter { color: var(--text-secondary); font-size: 13px; margin-bottom: 16px; }
        .onboarding-counter span { color:#C0392B; font-weight: bold; }
        .btn-onboarding {
            padding: 14px 40px; background:#C0392B;
            border: none; color: #fff; font-weight: bold;
            border-radius: 24px; cursor: pointer; font-size: 15px;
            transition: all 0.2s; opacity: 0.4; pointer-events: none;
        }
        .btn-onboarding.ready { opacity: 1; pointer-events: all; }
        .btn-onboarding.ready:hover { background:#D94A3D; transform: scale(1.02); }

        /* ── Discovery Grid ── */
        #discoverySection {
            padding: 0 16px 60px;
            width: 100%;
            box-sizing: border-box;
        }
        #discoveryGrid {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 16px;
            width: 100%;
        }
        .discovery-card {
            position: relative; cursor: pointer;
            border-radius: 10px; overflow: hidden;
            background: var(--bg-card); aspect-ratio: 1;
            transition: transform 0.2s, box-shadow 0.2s;
        }
        .discovery-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(252, 60, 68, 0.12); }
        .discovery-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
        .discovery-card .dc-overlay {
            position: absolute; bottom: 0; left: 0; right: 0;
            padding: 32px 12px 12px;
            background: linear-gradient(transparent, rgba(0,0,0,0.88));
        }
        .discovery-card .dc-name {
            color: #fff; font-size: 13px; font-weight: 600;
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        }
        .discovery-card-skeleton {
           background: var(--bg-card); border: 1px solid #1e1e1e;
            border-radius: 10px; aspect-ratio: 1;
            display: flex; align-items: center; justify-content: center;
            color: #222; font-size: 28px; animation: pulse 1.5s infinite;
        }
       @keyframes pulse { 0%,100%{opacity:0.5} 50%{opacity:1} }
      @keyframes tickMain { 0%{transform:rotate(0deg)} 5%{transform:rotate(90deg)} 50%{transform:rotate(90deg)} 55%{transform:rotate(180deg)} 100%{transform:rotate(180deg)} }
        @keyframes tickDiag { 0%,25%{transform:rotate(0deg)} 30%{transform:rotate(90deg)} 75%{transform:rotate(90deg)} 80%{transform:rotate(180deg)} 100%{transform:rotate(180deg)} }
        .comp-main { transform-origin:15px 15px; animation: tickMain 8s ease-in-out infinite; }
        .comp-diag { transform-origin:15px 15px; animation: tickDiag 8s ease-in-out infinite; }

       /* ── Light tema override'lar ── */
        [data-theme="light"] #navbar { background: rgba(255,255,255,0.92); border-bottom-color: var(--border); }
        [data-theme="light"] #navbar .logo { color: var(--text-primary); }
        [data-theme="light"] #navbar .logo span { color: #C0392B; }
        [data-theme="light"] #aramaKutusu { color: var(--text-primary); }
        [data-theme="light"] #searchResults { background: #fff; border-color: var(--border); }
        [data-theme="light"] .search-item:hover { background: var(--bg-elevated); }
        [data-theme="light"] .search-item-info strong { color: var(--text-primary); }
        [data-theme="light"] .search-item-info span { color: var(--text-secondary); }
        [data-theme="light"] .landing-card { background: #fff; }
        [data-theme="light"] #authModal { background: #fff; }
        [data-theme="light"] .auth-input { background: var(--bg-input); color: var(--text-primary); border-color: var(--border); }
        [data-theme="light"] .auth-divider { color: var(--text-muted); }
        [data-theme="light"] #onboardingPage { background: #fff; }
        [data-theme="light"] .onboarding-inner h2 { color: #1D1D1F !important; }
        [data-theme="light"] .onboarding-inner p { color: #48484A !important; }
        [data-theme="light"] .onboarding-counter { color: #48484A !important; }
        [data-theme="light"] .onboarding-counter span { color: #C0392B !important; }
        [data-theme="light"] #onboardingSearch { background: #E8E8ED !important; color: #1D1D1F !important; border-color: #D2D2D7 !important; }
        [data-theme="light"] .artist-chip { background: #F5F5F7 !important; }
        [data-theme="light"] .artist-chip:hover { background: #E8E8ED !important; border-color: #D2D2D7 !important; }
        [data-theme="light"] .artist-chip span { color: #1D1D1F !important; }
        [data-theme="light"] .artist-chip.selected { background: #FFECEE !important; border-color: #C0392B !important; }
        [data-theme="light"] .chip-check { color: #C0392B !important; }
        [data-theme="light"] .btn-onboarding { color: #fff !important; }
        [data-theme="light"] .discovery-card .dc-name { color: #fff; }
        [data-theme="light"] #statusUpdate { color: var(--text-secondary) !important; }
        [data-theme="light"] #liste li { background: var(--bg-card) !important; }
        [data-theme="light"] #liste li span { color: var(--text-primary) !important; }
        [data-theme="light"] #liste li:hover { background: var(--bg-elevated) !important; }
        [data-theme="light"] #playlistPanel { background: #fff; }
        [data-theme="light"] #playlistDetailModal > div { background: var(--bg-secondary) !important; border-color: var(--border) !important; }
        [data-theme="light"] #addToPlaylistModal > div { background: var(--bg-secondary) !important; }
        [data-theme="light"] #createPlaylistModal > div { background: var(--bg-secondary) !important; }
        [data-theme="light"] #confirmModal > div { background: var(--bg-secondary) !important; }
        [data-theme="light"] #adminOverlay { background: rgba(0,0,0,0.5); }
        [data-theme="light"] #avatarMenu { background: #fff; border-color: var(--border); }
        [data-theme="light"] .avatar-menu-item { color: var(--text-primary); }
        [data-theme="light"] .avatar-menu-item:hover { background: var(--bg-elevated); }
        [data-theme="light"] .avatar-menu-email { color: var(--text-secondary); border-bottom-color: var(--border); }
        [data-theme="light"] .avatar-menu-item.danger { color: #ef4444; }
        [data-theme="light"] #profileModal { background: #fff !important; border-color: var(--border) !important; color: var(--text-primary); }
        [data-theme="light"] #profileModal h2 { color: #1D1D1F !important; font-weight: 700; }
        [data-theme="light"] #profileModal label { color: #48484A !important; font-weight: 600 !important; }
        [data-theme="light"] #profileModal .auth-close { color: #8E8E93 !important; }
        [data-theme="light"] #profileModal button { color: var(--text-primary); }
        [data-theme="light"] #profileAvatar { color: #fff !important; }
        [data-theme="light"] #profileDisplayName { color: #1D1D1F !important; font-weight: 700 !important; }
        [data-theme="light"] #profileEmail { color: #48484A !important; }
        [data-theme="light"] #profileSince { color: #6E6E73 !important; }
        [data-theme="light"] #profileNameInput { background: #F0F0F2 !important; color: #1D1D1F !important; border-color: #D2D2D7 !important; }
        [data-theme="light"] #themeBtn_dark, [data-theme="light"] #themeBtn_light { background: #F0F0F2 !important; color: #1D1D1F !important; }
        [data-theme="light"] #langBtn_tr, [data-theme="light"] #langBtn_en, [data-theme="light"] #langBtn_de, [data-theme="light"] #langBtn_ja, [data-theme="light"] #langBtn_es, [data-theme="light"] #langBtn_fr { background: #F0F0F2 !important; color: #1D1D1F !important; }
        [data-theme="light"] #profileSaveBtn { background: #C0392B !important; color: #fff !important; }
        [data-theme="light"] #profileModal button[onclick*="changePassword"] { background: #F0F0F2 !important; color: #1D1D1F !important; border-color: #D2D2D7 !important; }
        [data-theme="light"] #profileModal button[onclick*="deleteAccount"] { background: #fff !important; color: #ef4444 !important; border-color: #ef4444 !important; }
        [data-theme="light"] #resetPasswordOverlay div div { background: #fff !important; border-color: var(--border) !important; }
        [data-theme="light"] #resetPasswordOverlay h2 { color: var(--text-primary) !important; }
        [data-theme="light"] #resetPasswordOverlay p { color: var(--text-secondary) !important; }
        [data-theme="light"] #resetPasswordOverlay input { background: var(--bg-input) !important; color: var(--text-primary) !important; border-color: var(--border) !important; }
        [data-theme="light"] #resetMsg { color: #2ECC71 !important; }
        .track-item:hover {
    background: var(--bg-elevated) !important;
    border-color: var(--border-light) !important;
    transform: translateX(4px);
}
/* ── Landing Scroll Sections ── */
#landingPage {
    overflow-y: auto !important;
    align-items: stretch !important;
    flex-direction: column !important;
}
#landingPage.active {
    padding-top: 56px !important;
}
.landing-hero {
    min-height: calc(100vh - 56px); width: 100%;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    position: relative;
}
.landing-hero-tagline {
    font-size: 20px; color: #a7a7a7; font-weight: 400;
    margin-bottom: 48px; max-width: 460px; line-height: 1.6; text-align: center;
}
.landing-scroll-hint {
    position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%);
    color: #333; font-size: 12px; text-transform: uppercase; letter-spacing: 3px;
    animation: scrollBounce 2s ease-in-out infinite;
}
@keyframes scrollBounce {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(6px); }
}
.landing-section {
    width: 100%; padding: 120px 24px;
    max-width: 680px; margin: 0 auto; text-align: center;
}
.landing-section-divider {
    width: 40px; height: 2px; background: #C0392B;
    margin: 0 auto 40px; opacity: 0.6;
}
.landing-section h2 {
    font-size: 32px; font-weight: 800;
    margin-bottom: 24px; letter-spacing: -1px; color: #fff;
}
.landing-section p {
    font-size: 16px; color: #8a8a8a;
    line-height: 1.8; max-width: 520px; margin: 0 auto;
}
.landing-section p + p { margin-top: 20px; }
.landing-highlight { color: #C0392B; font-weight: 600; }

.vinyl-visual { margin: 48px auto 0; width: 200px; height: 200px; position: relative; }
.vinyl-record {
    width: 200px; height: 200px; border-radius: 50%;
    background: repeating-radial-gradient(#111, #111 4px, #1a1a1a 5px, #111 6px);
    border: 1px solid #222; position: relative;
    animation: vinylSpin 12s linear infinite;
}
.vinyl-center {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 54px; height: 54px; border-radius: 50%;
    background: #C0392B;
    display: flex; align-items: center; justify-content: center;
}
@keyframes vinylSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

.how-grid {
    display: flex; gap: 32px; margin-top: 48px; justify-content: center;
}
.how-item { flex: 1; max-width: 200px; text-align: center; }
.how-number { font-size: 36px; font-weight: 900; color: #C0392B; opacity: 0.3; margin-bottom: 12px; }
.how-item h3 { font-size: 14px; font-weight: 700; color: #fff; margin-bottom: 8px; }
.how-item p { font-size: 13px; color: #666; line-height: 1.6; }

.landing-cta-title {
    font-size: 28px; font-weight: 800; margin-bottom: 32px;
    letter-spacing: -0.5px; color: #fff; text-align: center;
}
.landing-footer {
    width: 100%; text-align: center; padding: 40px 24px;
    border-top: 1px solid #111; color: #333; font-size: 12px;
}

.landing-reveal {
    opacity: 0; transform: translateY(40px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}
.landing-reveal.visible { opacity: 1; transform: translateY(0); }

/* ── KESİN VE TEK MOBİL UYUMLULUK KODU ── */

@media (max-width: 1100px) { #discoveryGrid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 800px)  { #discoveryGrid { grid-template-columns: repeat(3, 1fr); } }

@media screen and (max-width: 768px) {
    /* 1. Kutu ve Konteynerleri Daralt */
    .container, .dashboard-container, #playlistPanel {
        width: 100% !important;
        padding: 12px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    /* 2. Keşfet ve Onboarding Gridleri */
    #discoverySection { padding: 0 12px 40px !important; }
    #discoveryGrid { grid-template-columns: repeat(2, 1fr); gap: 10px; } 
    .artist-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }

    /* 3. Navbar Düzenlemesi */
    #navbar { padding: 0 12px; }
    #navbar .logo { font-size: 14px; }
    #btnLogin, #btnSignup { padding: 6px 12px; font-size: 12px; }

    /* 4. SADECE Form ve Arama Butonları %100 Olsun */
    .auth-input, .btn-auth-submit, #aramaKutusu, .landing-card button {
        width: 100%; padding: 14px; font-size: 16px; box-sizing: border-box;
    }

    /* 5. Şarkı Listesi Mimarisi (Çarpı Kaymalarını Önler) */
    #liste li, .track-item, .playlist-item {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 10px !important;
        gap: 12px !important; 
        width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important; 
    }

    #liste li img, .track-item img {
        width: 44px !important; height: 44px !important;
        flex-shrink: 0 !important; object-fit: cover;
    }

    /* 6. Uzun Yazıları Kesme (Ellipsis) */
    .track-info {
        flex: 1 1 auto !important; 
        min-width: 0 !important; 
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
    }
    .track-info div { display: block !important; }
    .track-info strong, .track-info span, .track-name {
        display: block !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        width: 100% !important;
        font-size: 13px !important;
    }

    /* 7. Çarpı (Sil) Butonu - Kale Gibi Sabit */
    .delete-btn, .remove-btn, .close-icon {
        flex: 0 0 36px !important; 
        width: 36px !important; height: 36px !important;
        margin: 0 !important; padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: transparent !important;
    }
    .delete-btn i, .remove-btn svg { font-size: 18px !important; }

    /* 8. Landing Page (Açılış Sayfası) Mobil Düzeltmeleri */
    .landing-hero-tagline { font-size: 16px; padding: 0 20px; }
    .landing-section { padding: 80px 20px; }
    .landing-section h2 { font-size: 24px; }
    .landing-section p { font-size: 14px; }
    .how-grid { flex-direction: column; align-items: center; gap: 24px; }
    .landing-cta-title { font-size: 22px; }
    .vinyl-visual, .vinyl-record { width: 150px; height: 150px; }
}