/* ==========================================
   LOUIE - ANA TASARIM DOSYASI
   ========================================== */

/* ==========================================
   1. GENEL RENKLER VE DEĞİŞKENLER
   ========================================== */

:root {
    --primary: #e879ad;
    --primary-dark: #c94f8a;
    --primary-light: #ffe7f1;
    --secondary: #a58ae8;
    --green: #70bf94;
    --red: #e77987;
    --yellow: #eec56d;

    --bg: #fff8fb;
    --surface: #ffffff;
    --surface-soft: #fff0f6;
    --text: #463a4b;
    --muted: #94869a;
    --border: #f0e4eb;

    --shadow: 0 10px 35px rgba(100, 62, 91, 0.065);
    --shadow-hover: 0 16px 45px rgba(100, 62, 91, 0.11);

    --sidebar-width: 266px;
    --radius: 20px;
    --font-scale: 1;
}

/* ==========================================
   2. GENEL SIFIRLAMA
   ========================================== */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    font-size: calc(16px * var(--font-scale));
}

body {
    margin: 0;
    min-height: 100vh;
    background: var(--bg);
    color: var(--text);
    font-family: "Nunito", sans-serif;
    line-height: 1.55;
    transition: background 0.25s, color 0.25s;
}

body[data-font="small"] {
    --font-scale: 0.9;
}

body[data-font="large"] {
    --font-scale: 1.12;
}

button,
input,
select,
textarea {
    font: inherit;
}

button {
    cursor: pointer;
}

button:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 3px solid var(--primary);
    outline-offset: 2px;
}

h1,
h2,
h3,
p {
    margin-top: 0;
}

h1,
h2,
h3 {
    line-height: 1.3;
}

.app-layout {
    min-height: 100vh;
}

/* ==========================================
   3. SOL MENÜ
   Kaydırma çubuğu gizlenmiştir.
   Kaydırma özelliği çalışmaya devam eder.
   ========================================== */

.sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 50;

    width: var(--sidebar-width);
    height: 100vh;

    display: flex;
    flex-direction: column;

    padding: 28px 18px 18px;

    background: var(--surface);
    border-right: 1px solid var(--border);

    overflow-x: hidden;
    overflow-y: auto;

    /* Firefox */
    scrollbar-width: none;

    /* Eski Microsoft tarayıcıları */
    -ms-overflow-style: none;
}

/* Chrome, Edge, Safari */
.sidebar::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

/* ==========================================
   4. LOGO
   ========================================== */

.brand {
    display: flex;
    align-items: center;
    gap: 13px;

    padding: 0 10px 32px;
}

.brand-icon {
    display: grid;
    place-items: center;

    width: 55px;
    height: 55px;

    flex-shrink: 0;

    border-radius: 18px;
    background: var(--primary-light);

    font-size: 30px;
}

.brand-text strong {
    display: block;

    font-family: "Pacifico", cursive;
    font-size: 26px;
    font-weight: 400;

    color: var(--primary-dark);
}

.brand-text small {
    display: block;

    color: var(--muted);
    font-size: 0.65rem;
}

.sidebar-label {
    margin: 0 13px 12px;

    color: var(--muted);

    font-size: 0.65rem;
    font-weight: 900;
    letter-spacing: 2px;
}

/* ==========================================
   5. MENÜ BUTONLARI
   ========================================== */

.navigation {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.nav-item {
    position: relative;

    display: flex;
    align-items: center;
    gap: 13px;

    width: 100%;
    min-height: 48px;

    padding: 11px 14px;

    border: 0;
    border-radius: 13px;

    background: transparent;
    color: var(--muted);

    text-align: left;
    font-size: 0.86rem;
    font-weight: 800;

    transition:
        background 0.2s,
        color 0.2s,
        transform 0.2s;
}

.nav-item i {
    display: grid;
    place-items: center;

    width: 21px;

    flex-shrink: 0;
    font-size: 1rem;
}

.nav-item:hover {
    background: var(--surface-soft);
    color: var(--primary-dark);

    transform: translateX(2px);
}

.nav-item.active {
    background: var(--primary-light);
    color: var(--primary-dark);
}

.nav-item.active::before {
    content: "";

    position: absolute;

    left: 0;
    top: 10px;
    bottom: 10px;

    width: 3px;

    border-radius: 5px;
    background: var(--primary);
}

.nav-count {
    display: grid;
    place-items: center;

    min-width: 24px;
    height: 23px;

    padding: 0 6px;
    margin-left: auto;

    border-radius: 30px;

    background: var(--primary);
    color: white;

    font-size: 0.65rem;
    font-weight: 900;
}

/* ==========================================
   6. SOL MENÜ ALT BÖLÜMÜ
   ========================================== */

.sidebar-bottom {
    margin-top: auto;
    padding-top: 25px;
}

.sidebar-tip {
    padding: 18px 15px;
    margin-bottom: 15px;

    border: 1px solid var(--border);
    border-radius: 17px;

    background: var(--surface-soft);

    text-align: center;
}

.sidebar-tip span {
    font-size: 29px;
}

.sidebar-tip p {
    margin: 7px 0 0;

    color: var(--muted);

    font-size: 0.75rem;
    font-weight: 700;
}

.app-version {
    margin: 18px 0 0;

    color: var(--muted);

    font-size: 0.65rem;
    text-align: center;
}

.sidebar-overlay {
    display: none;
}

/* ==========================================
   7. ANA İÇERİK ALANI
   ========================================== */

.main-area {
    min-height: 100vh;
    margin-left: var(--sidebar-width);
}

.topbar {
    position: sticky;
    top: 0;
    z-index: 20;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    min-height: 91px;

    padding: 17px 35px;

    background: var(--surface);
    border-bottom: 1px solid var(--border);

    box-shadow: 0 3px 18px rgba(50, 30, 50, 0.025);
}

.topbar-left,
.topbar-actions {
    display: flex;
    align-items: center;
    gap: 13px;
}

.topbar h1 {
    margin: 0;

    font-size: 1.35rem;
    font-weight: 900;
}

.topbar p {
    margin: 4px 0 0;

    color: var(--muted);

    font-size: 0.76rem;
    text-transform: capitalize;
}

/* ==========================================
   8. ARAMA ÇUBUĞU
   ========================================== */

.search-box {
    display: flex;
    align-items: center;
    gap: 10px;

    width: 255px;
    min-height: 43px;

    padding: 0 13px;

    border: 1px solid var(--border);
    border-radius: 13px;

    background: var(--bg);
    color: var(--muted);

    transition:
        border-color 0.2s,
        width 0.2s;
}

.search-box:focus-within {
    border-color: var(--primary);
}

.search-box input {
    width: 100%;
    min-width: 0;

    border: 0;
    outline: 0;

    background: transparent;
    color: var(--text);

    font-size: 0.76rem;
}

.search-box input::placeholder {
    color: var(--muted);
}

.search-shortcut {
    flex-shrink: 0;

    padding: 3px 5px;

    border: 1px solid var(--border);
    border-radius: 5px;

    font-size: 0.61rem;
}

/* ==========================================
   9. ÜST MENÜ BUTONLARI
   ========================================== */

.icon-button,
.profile-button {
    display: inline-grid;
    place-items: center;

    width: 42px;
    height: 42px;

    flex-shrink: 0;
    padding: 0;

    border: 1px solid var(--border);
    border-radius: 13px;

    background: var(--surface);
    color: var(--text);

    transition: 0.2s;
}

.icon-button:hover {
    background: var(--primary-light);
    color: var(--primary-dark);
    border-color: var(--primary-light);
}

.profile-button {
    border: 0;
    border-radius: 50%;

    background: var(--primary-light);

    font-size: 1.35rem;
}

.mobile-menu-button {
    display: none;
}

.content-area {
    max-width: 1550px;

    padding: 35px 38px 70px;
    margin: 0 auto;
}

/* ==========================================
   10. SAYFA GEÇİŞLERİ
   ========================================== */

.page-section {
    display: none;
}

.page-section.active {
    display: block;
    animation: pageEnter 0.3s ease both;
}

@keyframes pageEnter {
    from {
        opacity: 0;
        transform: translateY(9px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ==========================================
   11. BÖLÜM BAŞLIKLARI
   ========================================== */

.section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 15px;

    margin-bottom: 23px;
}

.section-heading h2 {
    margin: 3px 0 5px;

    font-size: 1.55rem;
    font-weight: 900;
}

.section-heading p {
    margin: 0;

    color: var(--muted);
    font-size: 0.84rem;
}

.eyebrow {
    color: var(--primary-dark);

    font-size: 0.65rem;
    font-weight: 900;
    letter-spacing: 1.8px;
}

/* ==========================================
   12. ANA BUTONLAR
   ========================================== */

.primary-button,
.secondary-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    min-height: 44px;

    padding: 10px 19px;

    border: 0;
    border-radius: 12px;

    background: var(--primary);
    color: white;

    font-size: 0.82rem;
    font-weight: 900;
    text-decoration: none;

    transition:
        background 0.2s,
        box-shadow 0.2s,
        transform 0.2s;
}

.primary-button:hover {
    background: var(--primary-dark);

    box-shadow: 0 7px 20px rgba(150, 65, 120, 0.15);
    transform: translateY(-2px);
}

.secondary-button {
    background: var(--surface-soft);
    color: var(--primary-dark);
}

.secondary-button:hover {
    background: var(--primary-light);
}

.text-button {
    padding: 4px;

    border: 0;
    background: transparent;

    color: var(--primary-dark);

    font-size: 0.8rem;
    font-weight: 900;

    white-space: nowrap;
}

.text-button:hover {
    text-decoration: underline;
}

.full-button {
    width: 100%;
}

/* ==========================================
   13. PANELLER VE KARTLAR
   ========================================== */

.panel {
    min-width: 0;

    padding: 23px;
    margin-bottom: 22px;

    border: 1px solid var(--border);
    border-radius: var(--radius);

    background: var(--surface);
    box-shadow: var(--shadow);
}

.panel h3 {
    margin: 0 0 18px;

    font-size: 1.04rem;
    font-weight: 900;
}

.panel-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;

    margin-bottom: 18px;
}

.panel-heading h3 {
    margin: 0;
}

.panel-heading p {
    margin: 4px 0 0;

    color: var(--muted);
    font-size: 0.76rem;
}

/* ==========================================
   14. KARŞILAMA ALANI
   ========================================== */

.welcome-banner {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: space-between;

    min-height: 240px;

    padding: 34px 40px;
    margin-bottom: 35px;

    border-radius: 25px;
    overflow: hidden;

    background: linear-gradient(
        120deg,
        #ffe3ee,
        #f2e8ff
    );
}

.welcome-banner::before,
.welcome-banner::after {
    content: "";

    position: absolute;

    width: 235px;
    height: 235px;

    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 50%;

    pointer-events: none;
}

.welcome-banner::before {
    right: -50px;
    top: -115px;
}

.welcome-banner::after {
    right: 80px;
    bottom: -190px;
}

.welcome-content {
    position: relative;
    z-index: 1;

    max-width: 580px;
}

.welcome-small {
    color: #bd5487;

    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: 1.4px;
}

.welcome-banner h2 {
    margin: 10px 0;

    color: #4c3f51;

    font-size: clamp(1.6rem, 2.8vw, 2.25rem);
    font-weight: 900;
}

.welcome-banner p {
    max-width: 430px;

    margin-bottom: 20px;

    color: #806e83;
    font-size: 0.88rem;
}

.welcome-mascot {
    position: relative;
    z-index: 1;

    padding: 0 35px;

    font-size: clamp(75px, 10vw, 120px);

    filter: drop-shadow(
        0 12px 12px rgba(130, 80, 120, 0.15)
    );

    animation: mascotFloat 4s ease-in-out infinite;
}

@keyframes mascotFloat {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-9px);
    }
}

/* ==========================================
   15. İSTATİSTİK KARTLARI
   ========================================== */

.stats-grid {
    display: grid;

    grid-template-columns: repeat(
        4,
        minmax(0, 1fr)
    );

    gap: 17px;
    margin-bottom: 24px;
}

.stat-card {
    min-height: 160px;

    padding: 21px;

    border: 1px solid var(--border);
    border-radius: 19px;

    background: var(--surface);
    box-shadow: var(--shadow);

    transition:
        transform 0.2s,
        box-shadow 0.2s;
}

.stat-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-hover);
}

.stat-icon {
    display: grid;
    place-items: center;

    width: 45px;
    height: 45px;

    margin-bottom: 15px;

    border-radius: 14px;

    background: var(--primary-light);
    color: var(--primary-dark);

    font-size: 1.25rem;
}

.stat-card span {
    display: block;

    color: var(--muted);

    font-size: 0.77rem;
    font-weight: 800;
}

.stat-card strong {
    display: block;

    margin-top: 4px;

    font-size: 1.9rem;
    font-weight: 900;
}

.pink-card {
    background: linear-gradient(
        130deg,
        var(--surface),
        #fff0f7
    );
}

.purple-card {
    background: linear-gradient(
        130deg,
        var(--surface),
        #f3efff
    );
}

.green-card {
    background: linear-gradient(
        130deg,
        var(--surface),
        #edfff5
    );
}

.yellow-card {
    background: linear-gradient(
        130deg,
        var(--surface),
        #fff9ec
    );
}

.purple-card .stat-icon {
    background: #eee7ff;
    color: #9074d7;
}

.green-card .stat-icon {
    background: #e4f9eb;
    color: #4ea577;
}

.yellow-card .stat-icon {
    background: #fff1cf;
    color: #c69a38;
}

/* ==========================================
   16. GENEL BAKIŞ PANELLERİ
   ========================================== */

.dashboard-grid,
.charts-grid,
.backup-grid {
    display: grid;

    grid-template-columns: repeat(
        2,
        minmax(0, 1fr)
    );

    gap: 20px;
}

.compact-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.compact-item {
    display: flex;
    align-items: flex-start;
    gap: 11px;

    padding: 11px;

    border-radius: 11px;
    background: var(--bg);
}

.compact-dot {
    width: 9px;
    height: 9px;

    flex-shrink: 0;

    margin-top: 6px;

    border-radius: 50%;
    background: var(--primary);
}

.compact-item strong,
.compact-item small {
    display: block;
}

.compact-item strong {
    overflow-wrap: anywhere;

    font-size: 0.8rem;
}

.compact-item small {
    margin-top: 3px;

    color: var(--muted);
    font-size: 0.72rem;
}

/* ==========================================
   17. GÜNÜN SÖZÜ
   ========================================== */

.quote-card {
    padding: 25px 20px;
    margin-top: 4px;

    border: 1px solid var(--border);
    border-radius: 18px;

    background: var(--surface-soft);

    text-align: center;
}

.quote-card span {
    color: var(--primary-dark);

    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 1.2px;
}

.quote-card p {
    margin: 11px 0 0;

    font-family: "Pacifico", cursive;
    font-size: 1.08rem;
    font-weight: 400;
}

/* ==========================================
   18. FORM TASARIMLARI
   ========================================== */

.form-grid {
    display: grid;

    grid-template-columns: repeat(
        2,
        minmax(0, 1fr)
    );

    gap: 17px;
}

.field {
    display: flex;
    flex-direction: column;
    gap: 8px;

    min-width: 0;
}

.full-field {
    grid-column: 1 / -1;
}

.field label {
    font-size: 0.8rem;
    font-weight: 900;
}

.field input,
.field select,
.field textarea,
.settings-group select,
.list-toolbar select,
.panel-heading select {
    width: 100%;
    min-height: 45px;

    padding: 11px 13px;

    border: 1px solid var(--border);
    border-radius: 12px;

    outline: none;

    background: var(--bg);
    color: var(--text);

    font-size: 0.84rem;

    transition: border-color 0.2s;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
    border-color: var(--primary);
}

.field input::placeholder,
.field textarea::placeholder {
    color: var(--muted);
}

.field textarea {
    min-height: 125px;
    resize: vertical;
}

.form-button-field {
    justify-content: flex-end;
}

.form-button-field .primary-button {
    width: 100%;
}

/* ==========================================
   19. LİSTE FİLTRELERİ
   ========================================== */

.list-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    margin: 25px 0 14px;

    color: var(--muted);

    font-size: 0.8rem;
    font-weight: 800;
}

.list-toolbar select,
.panel-heading select {
    width: auto;
    min-width: 145px;
}

.item-list {
    display: flex;
    flex-direction: column;
    gap: 11px;
}

/* ==========================================
   20. GÖREV VE DİĞER LİSTE KARTLARI
   ========================================== */

.task-item,
.event-item,
.finance-item,
.shopping-item,
.archive-item {
    display: flex;
    align-items: center;
    gap: 14px;

    min-height: 78px;

    padding: 16px 18px;

    border: 1px solid var(--border);
    border-radius: 15px;

    background: var(--surface);

    box-shadow: 0 3px 15px rgba(60, 30, 60, 0.025);

    transition:
        border-color 0.2s,
        transform 0.2s;
}

.task-item:hover,
.event-item:hover,
.finance-item:hover,
.shopping-item:hover,
.archive-item:hover {
    border-color: var(--primary);
    transform: translateY(-1px);
}

.task-info,
.event-info,
.finance-info,
.shopping-info,
.archive-info-text {
    min-width: 0;
    flex: 1;
}

.task-info strong,
.event-info strong,
.finance-info strong,
.shopping-info strong,
.archive-info-text strong {
    display: block;

    overflow-wrap: anywhere;

    font-size: 0.85rem;
    font-weight: 900;
}

.task-info small,
.event-info small,
.finance-info small,
.shopping-info small,
.archive-info-text small {
    display: block;

    margin-top: 5px;

    color: var(--muted);
    font-size: 0.72rem;
}

/* ==========================================
   21. GÖREV VE ALIŞVERİŞ TİK KUTULARI
   ========================================== */

.task-checkbox,
.shopping-checkbox {
    width: 19px;
    height: 19px;

    flex-shrink: 0;

    accent-color: var(--primary);
    cursor: pointer;
}

.task-item.completed .task-info strong,
.shopping-item.bought .shopping-info strong {
    color: var(--muted);
    text-decoration: line-through;
}

/* ==========================================
   22. GÖREV ÖNCELİKLERİ
   ========================================== */

.priority {
    flex-shrink: 0;

    padding: 5px 10px;

    border-radius: 30px;

    background: #f2eeff;
    color: #8468cc;

    font-size: 0.69rem;
    font-weight: 900;
}

.priority.high {
    background: #fff0f0;
    color: #ce6875;
}

.priority.low {
    background: #e9faef;
    color: #4d9c70;
}

/* ==========================================
   23. KÜÇÜK İŞLEM BUTONLARI
   ========================================== */

.item-actions {
    display: flex;
    gap: 6px;
}

.small-icon-button {
    display: inline-grid;
    place-items: center;

    width: 35px;
    height: 35px;

    flex-shrink: 0;
    padding: 0;

    border: 0;
    border-radius: 10px;

    background: var(--surface-soft);
    color: var(--primary-dark);

    transition: 0.2s;
}

.small-icon-button:hover {
    transform: translateY(-2px);
    filter: brightness(0.97);
}

.small-icon-button.danger {
    background: #fff0f1;
    color: #cf6875;
}

/* ==========================================
   24. ETKİNLİK KARTLARI
   ========================================== */

.event-date-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    width: 52px;
    height: 56px;

    flex-shrink: 0;

    border-radius: 12px;

    background: var(--primary-light);
    color: var(--primary-dark);
}

.event-date-box strong {
    font-size: 1.24rem;
    line-height: 1;
}

.event-date-box span {
    margin-top: 4px;

    font-size: 0.64rem;
    font-weight: 900;
}

.event-category {
    display: inline-block;

    margin-top: 5px;

    color: var(--secondary);

    font-size: 0.71rem;
    font-weight: 900;
}

/* ==========================================
   25. FİNANS LİSTE KARTLARI
   ========================================== */

.finance-type-icon {
    display: grid;
    place-items: center;

    width: 42px;
    height: 42px;

    flex-shrink: 0;

    border-radius: 13px;
}

.finance-type-icon.income {
    background: #e7faee;
    color: #4da776;
}

.finance-type-icon.expense {
    background: #fff0f0;
    color: #ce6875;
}

.finance-amount {
    flex-shrink: 0;

    white-space: nowrap;
    font-size: 0.85rem;
}

.finance-amount.income {
    color: #4da776;
}

.finance-amount.expense {
    color: #ce6875;
}

.shopping-price {
    flex-shrink: 0;

    color: var(--primary-dark);

    font-size: 0.84rem;
    font-weight: 900;
}

/* ==========================================
   26. BOŞ LİSTE GÖRÜNÜMÜ
   ========================================== */

.empty-state {
    padding: 35px 20px;

    border: 1px dashed var(--border);
    border-radius: 16px;

    background: var(--surface);

    text-align: center;
}

.empty-icon {
    margin-bottom: 8px;
    font-size: 2.2rem;
}

.empty-state h3 {
    margin-bottom: 5px;
    font-size: 0.95rem;
}

.empty-state p {
    margin: 0;

    color: var(--muted);
    font-size: 0.8rem;
}

/* ==========================================
   27. TAKVİM DÜZENİ
   ========================================== */

.calendar-layout {
    display: grid;

    grid-template-columns:
        minmax(0, 1.55fr)
        minmax(250px, 0.85fr);

    gap: 20px;
}

.calendar-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;

    margin-bottom: 19px;
}

.calendar-toolbar h3 {
    flex: 1;
    margin: 0;

    text-align: center;
    text-transform: capitalize;
}

.calendar-weekdays,
.calendar-days {
    display: grid;

    grid-template-columns: repeat(
        7,
        minmax(0, 1fr)
    );

    gap: 6px;
}

.calendar-weekdays {
    margin-bottom: 8px;
}

.calendar-weekdays span {
    padding: 7px 0;

    color: var(--muted);

    font-size: 0.7rem;
    font-weight: 900;

    text-align: center;
}

.calendar-day {
    position: relative;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 7px;

    min-height: 66px;

    padding: 10px 4px;

    border: 1px solid transparent;
    border-radius: 11px;

    background: var(--bg);
    color: var(--text);

    font-size: 0.79rem;

    transition: 0.2s;
}

.calendar-day:hover {
    border-color: var(--primary);
}

.calendar-day.today {
    background: var(--primary-light);
    color: var(--primary-dark);

    font-weight: 900;
}

.calendar-day.selected {
    border-color: var(--primary);
    box-shadow: inset 0 0 0 1px var(--primary);
}

.calendar-day.other-month {
    opacity: 0.38;
}

.calendar-dots {
    display: flex;
    align-items: center;
    gap: 3px;
}

.calendar-dots span {
    width: 6px;
    height: 6px;

    border-radius: 50%;
    background: var(--primary);
}

.selected-day-panel {
    min-height: 320px;
}

.selected-event {
    padding: 13px;
    margin-bottom: 10px;

    border-radius: 12px;
    background: var(--surface-soft);
}

.selected-event strong {
    display: block;

    overflow-wrap: anywhere;
    font-size: 0.82rem;
}

.selected-event small {
    display: block;

    margin: 5px 0 8px;

    color: var(--muted);
    font-size: 0.73rem;
}

.form-panel {
    margin-top: 20px;
}

/* ==========================================
   28. FİNANS ÖZET KARTLARI
   ========================================== */

.finance-summary {
    display: grid;

    grid-template-columns: repeat(
        3,
        minmax(0, 1fr)
    );

    gap: 16px;
    margin-bottom: 23px;
}

.finance-summary-card {
    padding: 23px;
    border-radius: 18px;
}

.finance-summary-card span,
.finance-summary-card strong {
    display: block;
}

.finance-summary-card span {
    margin-bottom: 9px;

    font-size: 0.8rem;
    font-weight: 800;
}

.finance-summary-card strong {
    overflow-wrap: anywhere;

    font-size: 1.5rem;
    font-weight: 900;
}

.income-bg {
    background: #e5f9ed;
    color: #438c62;
}

.expense-bg {
    background: #fff0f0;
    color: #bd5b67;
}

.balance-bg {
    background: #f0ebff;
    color: #7e66c5;
}

/* ==========================================
   29. FİNANS GRAFİKLERİ
   ========================================== */

.chart-panel canvas {
    display: block;

    width: 100%;
    height: 260px;
}

.chart-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 15px;

    margin-top: 15px;
}

.legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    color: var(--muted);
    font-size: 0.72rem;
}

.legend-color {
    width: 10px;
    height: 10px;

    flex-shrink: 0;

    border-radius: 50%;
}

/* ==========================================
   30. NOT KARTLARI
   ========================================== */

.notes-grid {
    display: grid;

    grid-template-columns: repeat(
        3,
        minmax(0, 1fr)
    );

    gap: 17px;
}

.note-card {
    position: relative;

    min-height: 190px;

    padding: 22px;

    border: 1px solid var(--border);
    border-radius: 18px;

    background: var(--surface);
    box-shadow: var(--shadow);

    transition: transform 0.2s;
}

.note-card:hover {
    transform: translateY(-3px);
}

.note-card h3 {
    padding-right: 32px;
    margin: 0 0 12px;

    overflow-wrap: anywhere;

    font-size: 0.96rem;
}

.note-card p {
    margin: 0;

    color: var(--muted);

    font-size: 0.79rem;
    line-height: 1.8;

    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.note-date {
    display: block;

    margin-top: 20px;

    color: var(--primary-dark);

    font-size: 0.7rem;
    font-weight: 900;
}

.note-delete {
    position: absolute;
    top: 14px;
    right: 14px;
}

/* ==========================================
   31. ALIŞVERİŞ İLERLEME ÇUBUĞU
   ========================================== */

.progress-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;

    margin-bottom: 12px;

    color: var(--muted);

    font-size: 0.81rem;
    font-weight: 800;
}

.progress-track {
    height: 10px;

    margin-bottom: 25px;
    overflow: hidden;

    border-radius: 20px;
    background: var(--border);
}

.progress-track div {
    width: 0;
    height: 100%;

    border-radius: inherit;
    background: var(--primary);

    transition: width 0.35s ease;
}

/* ==========================================
   32. YEDEKLEME
   ========================================== */

.backup-card {
    text-align: center;
}

.backup-icon {
    margin-bottom: 14px;
    font-size: 2.8rem;
}

.backup-card h3 {
    margin-bottom: 8px;
}

.backup-card p {
    min-height: 64px;
    margin-bottom: 20px;

    color: var(--muted);
    font-size: 0.81rem;
}

.file-label {
    cursor: pointer;
}

.notice-card {
    display: flex;
    align-items: flex-start;
    gap: 13px;

    padding: 19px;
    margin-top: 2px;

    border-radius: 14px;

    background: #fff6e4;
    color: #99763f;

    font-size: 0.8rem;
}

.notice-card p {
    margin: 0;
}

.notice-card i {
    margin-top: 3px;
}

/* ==========================================
   33. GÖRÜNÜM AYARLARI PENCERESİ
   ========================================== */

.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 100;

    display: none;
    align-items: center;
    justify-content: center;

    padding: 20px;

    background: rgba(37, 25, 42, 0.55);

    backdrop-filter: blur(5px);
}

.modal-overlay.open {
    display: flex;
}

.modal-card {
    width: 100%;
    max-width: 455px;
    max-height: 90vh;

    padding: 27px;
    overflow-y: auto;

    border: 1px solid var(--border);
    border-radius: 23px;

    background: var(--surface);

    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.18);

    animation: pageEnter 0.2s ease;
}

.modal-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 15px;

    margin-bottom: 28px;
}

.modal-heading h2 {
    margin: 0;
    font-size: 1.35rem;
}

.modal-heading p {
    margin: 5px 0 0;

    color: var(--muted);
    font-size: 0.77rem;
}

.settings-group {
    margin-bottom: 25px;
}

.settings-group h3 {
    margin: 0 0 13px;
    font-size: 0.87rem;
}

/* ==========================================
   34. RENK VE TEMA SEÇENEKLERİ
   ========================================== */

.color-options,
.theme-options {
    display: flex;
    flex-wrap: wrap;
    gap: 11px;
}

.color-option {
    width: 38px;
    height: 38px;

    border: 3px solid var(--surface);
    border-radius: 50%;

    box-shadow: 0 0 0 1px var(--border);

    transition: transform 0.2s;
}

.color-option:hover {
    transform: scale(1.12);
}

.color-option.selected {
    box-shadow: 0 0 0 2px var(--text);
}

.pink-option {
    background: #e879ad;
}

.purple-option {
    background: #a58ae8;
}

.blue-option {
    background: #70a9e8;
}

.green-option {
    background: #70bd91;
}

.orange-option {
    background: #e8a15e;
}

.setting-choice {
    padding: 10px 15px;

    border: 1px solid var(--border);
    border-radius: 11px;

    background: var(--bg);
    color: var(--text);

    font-size: 0.82rem;
    font-weight: 800;
}

.setting-choice.selected {
    border-color: var(--primary);

    background: var(--primary-light);
    color: var(--primary-dark);
}

/* ==========================================
   35. BİLDİRİM MESAJLARI
   ========================================== */

.toast {
    position: fixed;

    right: 24px;
    bottom: 24px;

    z-index: 200;

    max-width: min(
        420px,
        calc(100% - 35px)
    );

    padding: 15px 20px;

    border-radius: 14px;

    background: #463a4b;
    color: white;

    font-size: 0.83rem;
    font-weight: 800;

    box-shadow: var(--shadow-hover);

    opacity: 0;
    pointer-events: none;

    transform: translateY(15px);

    transition: 0.25s;
}

.toast.show {
    opacity: 1;
    transform: translateY(0);
}

/* ==========================================
   36. MOR RENK TEMASI
   ========================================== */

body[data-color="purple"] {
    --primary: #a58ae8;
    --primary-dark: #8061cc;
    --primary-light: #eee8ff;
    --surface-soft: #f5f0ff;
}

/* ==========================================
   37. MAVİ RENK TEMASI
   ========================================== */

body[data-color="blue"] {
    --primary: #70a9e8;
    --primary-dark: #4787cf;
    --primary-light: #e4f1ff;
    --surface-soft: #eff7ff;
}

/* ==========================================
   38. YEŞİL RENK TEMASI
   ========================================== */

body[data-color="green"] {
    --primary: #70bd91;
    --primary-dark: #429966;
    --primary-light: #e4f9ec;
    --surface-soft: #effbf3;
}

/* ==========================================
   39. TURUNCU RENK TEMASI
   ========================================== */

body[data-color="orange"] {
    --primary: #e8a15e;
    --primary-dark: #c47b3a;
    --primary-light: #fff0df;
    --surface-soft: #fff7eb;
}

/* ==========================================
   40. KARANLIK MOD
   ========================================== */

body[data-theme="dark"] {
    --bg: #211d29;
    --surface: #2d2736;
    --surface-soft: #393040;
    --text: #f1e9f4;
    --muted: #b7a9bb;
    --border: #423a4c;

    --shadow: 0 10px 32px rgba(0, 0, 0, 0.12);
    --shadow-hover: 0 16px 40px rgba(0, 0, 0, 0.2);

    --primary-light: #49354b;
}

body[data-theme="dark"] .welcome-banner {
    background: linear-gradient(
        120deg,
        #493449,
        #3e3457
    );
}

body[data-theme="dark"] .welcome-banner h2 {
    color: #f9f1fc;
}

body[data-theme="dark"] .welcome-banner p {
    color: #d4c4d7;
}

body[data-theme="dark"] .welcome-small {
    color: #f3b9d2;
}

body[data-theme="dark"] .pink-card,
body[data-theme="dark"] .purple-card,
body[data-theme="dark"] .green-card,
body[data-theme="dark"] .yellow-card {
    background: var(--surface);
}

body[data-theme="dark"] .income-bg {
    background: #254535;
    color: #a5e5bc;
}

body[data-theme="dark"] .expense-bg {
    background: #4a303b;
    color: #efb1b7;
}

body[data-theme="dark"] .balance-bg {
    background: #39334d;
    color: #d4c3ff;
}

body[data-theme="dark"] .notice-card {
    background: #463c2d;
    color: #f0d8a3;
}

body[data-theme="dark"] .priority {
    background: #39334d;
    color: #d4c3ff;
}

body[data-theme="dark"] .priority.high,
body[data-theme="dark"] .small-icon-button.danger,
body[data-theme="dark"] .finance-type-icon.expense {
    background: #4a303b;
    color: #f0b1b7;
}

body[data-theme="dark"] .priority.low,
body[data-theme="dark"] .finance-type-icon.income {
    background: #254535;
    color: #a5e5bc;
}

body[data-theme="dark"] .purple-card .stat-icon,
body[data-theme="dark"] .green-card .stat-icon,
body[data-theme="dark"] .yellow-card .stat-icon {
    background: var(--surface-soft);
}

/* ==========================================
   41. TABLET UYUMLULUĞU
   ========================================== */

@media (max-width: 1200px) {
    .stats-grid {
        grid-template-columns: repeat(
            2,
            minmax(0, 1fr)
        );
    }

    .notes-grid {
        grid-template-columns: repeat(
            2,
            minmax(0, 1fr)
        );
    }

    .content-area {
        padding: 28px 25px 55px;
    }

    .topbar {
        padding: 15px 25px;
    }
}

/* ==========================================
   42. MOBİL MENÜ
   ========================================== */

@media (max-width: 900px) {
    .sidebar {
        transform: translateX(-100%);
        transition: transform 0.25s;
    }

    .sidebar.open {
        transform: translateX(0);
    }

    .sidebar-overlay.show {
        position: fixed;
        inset: 0;
        z-index: 40;

        display: block;

        background: rgba(0, 0, 0, 0.4);
    }

    .main-area {
        margin-left: 0;
    }

    .mobile-menu-button {
        display: inline-grid;
    }

    .dashboard-grid,
    .charts-grid,
    .calendar-layout {
        grid-template-columns: 1fr;
    }

    .selected-day-panel {
        min-height: auto;
    }
}

/* ==========================================
   43. TELEFON EKRANLARI
   ========================================== */

@media (max-width: 650px) {
    .topbar {
        min-height: 76px;
        padding: 12px 15px;
    }

    .topbar h1 {
        font-size: 1.05rem;
    }

    .topbar p {
        font-size: 0.66rem;
    }

    .topbar-left,
    .topbar-actions {
        gap: 8px;
    }

    .topbar .icon-button,
    .topbar .profile-button {
        width: 37px;
        height: 37px;
    }

    .search-box {
        width: 39px;
        height: 39px;
        min-height: 39px;

        padding: 0 11px;
    }

    .search-box input,
    .search-shortcut {
        display: none;
    }

    .search-box:focus-within {
        position: absolute;

        top: 81px;
        left: 15px;
        right: 15px;

        z-index: 25;

        width: auto;
        background: var(--surface);
    }

    .search-box:focus-within input {
        display: block;
    }

    .content-area {
        padding: 23px 14px 45px;
    }

    .section-heading h2 {
        font-size: 1.3rem;
    }

    .welcome-banner {
        min-height: 220px;
        padding: 25px 20px;
    }

    .welcome-banner h2 {
        font-size: 1.5rem;
    }

    .welcome-banner p {
        font-size: 0.79rem;
    }

    .welcome-mascot {
        padding: 0;
        font-size: 60px;
    }

    .stats-grid {
        gap: 11px;
    }

    .stat-card {
        min-height: 135px;
        padding: 15px;
    }

    .stat-icon {
        width: 38px;
        height: 38px;
        margin-bottom: 10px;
    }

    .stat-card span {
        font-size: 0.68rem;
    }

    .stat-card strong {
        font-size: 1.55rem;
    }

    .form-grid,
    .finance-summary,
    .backup-grid,
    .notes-grid {
        grid-template-columns: 1fr;
    }

    .panel {
        padding: 18px;
    }

    .task-item,
    .event-item,
    .finance-item,
    .shopping-item,
    .archive-item {
        gap: 9px;
        padding: 13px 11px;
    }

    .priority {
        display: none;
    }

    .finance-amount,
    .shopping-price {
        font-size: 0.72rem;
    }

    .calendar-day {
        min-height: 50px;

        padding: 7px 2px;

        font-size: 0.72rem;
    }

    .calendar-weekdays span {
        font-size: 0.63rem;
    }

    .calendar-toolbar {
        gap: 5px;
    }

    .calendar-toolbar h3 {
        font-size: 0.89rem;
    }

    .calendar-toolbar .icon-button {
        width: 33px;
        height: 33px;
    }

    .calendar-toolbar .text-button {
        font-size: 0.7rem;
    }

    .modal-card {
        padding: 20px;
    }
}

/* ==========================================
   44. KÜÇÜK TELEFON EKRANLARI
   ========================================== */

@media (max-width: 400px) {
    .welcome-mascot {
        display: none;
    }

    .topbar p {
        max-width: 150px;

        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .finance-summary-card {
        padding: 18px;
    }
}

/* ==========================================
   45. AZALTILMIŞ HAREKET TERCİHİ
   ========================================== */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ==========================================
   46. KAYDIRMA ÇUBUĞU DÜZELTMESİ
   Sol menüdeki gri çubuğu gizler.
   Kaydırma özelliği korunur.
   ========================================== */

.sidebar {
    overflow-x: hidden;
    overflow-y: auto;

    scrollbar-width: none;
    -ms-overflow-style: none;
}

.sidebar::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}