/* PlanBudur Extracted Styles */

/* ===== LANDING PAGE STYLES ===== */
/* ===== LANDING PAGE — minimal & clean ===== */

/* Full-screen scrollable layout — always dark */
#landing-page {
    background: linear-gradient(160deg, #13103a 0%, #0f1528 50%, #0d1220 100%) !important;
    color: #e2e8f0;
    flex-direction: column !important;
    overflow: hidden !important;
}
/* Landing page JS tarafından kontrol edilir — display JS ile yönetilir */
#lp-scroll-wrap {
    flex: 1;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    position: relative;
    width: 100%;
    min-height: 0;
    background: linear-gradient(160deg, #13103a 0%, #0f1528 50%, #0d1220 100%);
    color: #e2e8f0;
}

/* Nav: always dark */
.lp-nav {
    flex-shrink: 0;
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
    background: rgba(9,9,15,0.85) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
}
.lp-nav-inner { height: 56px !important; }
.lp-logo-text { color: #f1f5f9 !important; }
.lp-logo-text .lp-logo-budur { color: #818cf8 !important; }
.lp-btn-ghost {
    border-color: rgba(255,255,255,0.12) !important;
    color: rgba(255,255,255,0.7) !important;
}
.lp-btn-ghost:hover {
    border-color: #6366f1 !important;
    color: #a5b4fc !important;
    background: rgba(99,102,241,0.1) !important;
}
.lp-btn-primary {
    background: linear-gradient(135deg, #6366f1, #4f46e5) !important;
}

/* Hero: doğal yükseklik, tam ekrana uzatma */
.lp-hero {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 100px 24px 80px !important;
    background: radial-gradient(ellipse 80% 55% at 50% -5%, rgba(120,100,255,0.22) 0%, transparent 68%) !important;
    overflow: hidden;
    position: relative;
    width: 100%;
    box-sizing: border-box;
}

/* Decorative rings */
.lp-hero::before {
    content: '';
    position: absolute;
    width: 680px;
    height: 680px;
    border-radius: 50%;
    border: 1px solid rgba(99,102,241,0.12);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}
.lp-hero::after {
    content: '';
    position: absolute;
    width: 440px;
    height: 440px;
    border-radius: 50%;
    border: 1px solid rgba(99,102,241,0.18);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

/* Hero content wrapper */
.lp-hero > div {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 1;
    width: 100% !important;
    max-width: 640px !important;
    box-sizing: border-box !important;
    overflow: hidden;
}

.lp-hero-title {
    font-size: clamp(2.8rem, 7.5vw, 5rem) !important;
    letter-spacing: -3px !important;
    margin-bottom: 18px !important;
    color: #f1f5f9 !important;
    max-width: 100%;
    word-break: break-word;
    overflow-wrap: break-word;
}

.lp-hero-sub {
    font-size: 1rem !important;
    max-width: 100% !important;
    margin-bottom: 40px !important;
    color: rgba(148,163,184,0.85) !important;
    font-weight: 400;
    box-sizing: border-box;
    padding: 0 8px;
}

/* Buttons */
.lp-hero-cta {
    padding: 14px 32px !important;
    font-size: 0.95rem !important;
    border-radius: 10px !important;
    box-shadow: 0 4px 20px rgba(99,102,241,0.3) !important;
}
.lp-hero-secondary {
    padding: 14px 28px !important;
    font-size: 0.9rem !important;
    border-radius: 10px !important;
    border-color: rgba(255,255,255,0.12) !important;
    color: rgba(255,255,255,0.75) !important;
    background: rgba(255,255,255,0.04) !important;
}
.lp-hero-secondary:hover {
    border-color: #6366f1 !important;
    color: #a5b4fc !important;
    background: rgba(99,102,241,0.08) !important;
}

/* Feature chips row */
.lp-chips-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 36px;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}
.lp-chip-item {
    padding: 8px 16px;
    border-radius: 50px;
    background: rgba(99,102,241,0.1);
    border: 1px solid rgba(99,102,241,0.2);
    font-size: 0.82rem;
    font-weight: 600;
    color: #a5b4fc;
    white-space: nowrap;
    letter-spacing: 0.1px;
    transition: background 0.18s, border-color 0.18s;
    cursor: pointer;
    flex-shrink: 0;
}
.lp-chip-item:hover {
    background: rgba(99,102,241,0.25);
    border-color: rgba(99,102,241,0.5);
    color: #c7d2fe;
}

@media (max-width: 480px) {
    .lp-hero-title {
        letter-spacing: -0.5px !important;
        font-size: clamp(1.4rem, 5.5vw, 1.9rem) !important;
        word-break: break-word;
        overflow-wrap: break-word;
        max-width: 100%;
    }
    .lp-hero-sub {
        font-size: 0.88rem !important;
        padding: 0 4px;
    }
    /* Butonlar alt alta gelsin */
    .lp-hero-actions {
        flex-direction: column !important;
        align-items: center !important;
        width: 100% !important;
    }
    .lp-hero-cta, .lp-hero-secondary {
        width: 100% !important;
        justify-content: center !important;
        text-align: center !important;
        max-width: 320px;
    }
    .lp-hero::before { width: 280px; height: 280px; }
    .lp-hero::after { width: 180px; height: 180px; }
    /* Chips: yatay scroll — tüm chip'ler görünür */
    .lp-chips-row {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        justify-content: flex-start;
        padding: 4px 0 12px;
        margin-left: 0;
        margin-right: 0;
        max-width: 100%;
        width: 100%;
        scrollbar-width: none;
        margin-top: 24px;
        box-sizing: border-box;
    }
    .lp-chips-row::-webkit-scrollbar { display: none; }
}

/* Legacy variables (unused but harmless) */
#landing-page, #lp-scroll-wrap {
    --lp-primary: #6366f1;
    --lp-purple: #a855f7;
    --lp-green: #10b981;
    --lp-pink: #f43f5e;
}

/* Stats Strip */
.lp-stats-strip {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 18px 24px;
    border-top: 1px solid rgba(255,255,255,0.06);
    border-bottom: 1px solid rgba(255,255,255,0.06);
    flex-wrap: wrap;
    background: rgba(255,255,255,0.02);
}
.lp-stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 32px;
    gap: 4px;
}
.lp-stat-num {
    font-size: 1.35rem;
    font-weight: 900;
    color: #f1f5f9;
    letter-spacing: -0.5px;
}
.lp-stat-label {
    font-size: 0.72rem;
    color: rgba(148,163,184,0.7);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.lp-stat-divider {
    width: 1px;
    height: 32px;
    background: rgba(255,255,255,0.08);
    flex-shrink: 0;
}
@media (max-width: 480px) {
    .lp-stat-divider { display: none; }
    .lp-stat-item { padding: 6px 16px; }
}

/* Section wrapper */
.lp-section { max-width: 1140px; margin: 0 auto; width: 100%; box-sizing: border-box; overflow: hidden; }

/* App Mockup */
.lp-mockup-section {
    padding: 60px 24px;
    display: flex;
    justify-content: center;
    overflow: hidden;
    width: 100%;
    box-sizing: border-box;
}
.lp-mockup-wrap {
    position: relative;
    display: inline-block;
    max-width: 780px;
    width: 100%;
    box-sizing: border-box;
}
.lp-mockup-browser {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 32px 80px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.05);
}
.lp-mockup-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: rgba(255,255,255,0.05);
    border-bottom: 1px solid rgba(255,255,255,0.07);
}
.lp-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}
.lp-dot-red { background: #ef4444; }
.lp-dot-yellow { background: #f59e0b; }
.lp-dot-green { background: #10b981; }
.lp-mockup-url {
    flex: 1;
    text-align: center;
    font-size: 0.72rem;
    color: rgba(148,163,184,0.5);
    font-weight: 600;
    letter-spacing: 0.3px;
}
.lp-mockup-body {
    display: flex;
    min-height: 280px;
}
.lp-mock-sidebar {
    width: 160px;
    flex-shrink: 0;
    padding: 12px 10px;
    border-right: 1px solid rgba(255,255,255,0.07);
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.lp-mock-mode-row {
    display: flex;
    flex-direction: column;
    gap: 3px;
    background: rgba(255,255,255,0.04);
    border-radius: 8px;
    padding: 4px;
    margin-bottom: 4px;
}
.lp-mock-mode {
    cursor: pointer;
    font-size: 0.65rem;
    font-weight: 700;
    color: rgba(148,163,184,0.5);
    padding: 5px 6px;
    border-radius: 5px;
    cursor: default;
}
.lp-mock-mode.active {
    background: #6366f1;
    color: white;
}
.lp-mock-btn {
    font-size: 0.62rem;
    font-weight: 700;
    padding: 7px 8px;
    border-radius: 8px;
    cursor: pointer;
    text-align: center;
    background: rgba(255,255,255,0.06);
    color: rgba(148,163,184,0.6);
}
.lp-mock-main {
    flex: 1;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow: hidden;
}
.lp-mock-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.72rem;
    color: rgba(241,245,249,0.8);
}
.lp-mock-nav {
    font-size: 0.65rem;
    padding: 2px 6px;
    background: rgba(255,255,255,0.06);
    border-radius: 4px;
    color: rgba(148,163,184,0.6);
    cursor: pointer;
}
.lp-mock-nav:hover { background: rgba(99,102,241,0.25); color: #a5b4fc; }
.lp-mock-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    font-size: 0.58rem;
    text-align: center;
    color: rgba(148,163,184,0.5);
    font-weight: 700;
}
.lp-mock-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 3px;
    flex: 1;
}
.lp-mock-cell {
    background: rgba(255,255,255,0.03);
    border-radius: 5px;
    padding: 3px 4px;
    font-size: 0.6rem;
    color: rgba(148,163,184,0.5);
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-height: 38px;
}
.lp-mock-cell.lp-mock-today {
    background: rgba(99,102,241,0.15);
    border: 1px solid rgba(99,102,241,0.35);
}
.lp-mock-cell.lp-mock-today > span {
    color: #818cf8;
    font-weight: 800;
}
.lp-mock-task {
    font-size: 0.5rem;
    padding: 1px 3px;
    border-radius: 3px;
    color: white;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.lp-float-badge {
    position: absolute;
    background: rgba(15,15,30,0.9);
    border: 1px solid rgba(99,102,241,0.3);
    border-radius: 50px;
    padding: 8px 16px;
    font-size: 0.75rem;
    font-weight: 700;
    color: rgba(165,180,252,0.9);
    display: flex;
    align-items: center;
    gap: 6px;
    backdrop-filter: blur(12px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
    cursor: pointer;
    transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s;
}
.lp-float-badge:hover { transform: scale(1.04); border-color: rgba(99,102,241,0.6); box-shadow: 0 12px 32px rgba(99,102,241,0.25); }
.lp-float-top-right {
    top: -14px;
    right: -14px;
    animation: floatBadge 3s ease-in-out infinite;
}
.lp-float-bottom-left {
    bottom: -14px;
    left: -14px;
    animation: floatBadge 3s ease-in-out infinite 1.5s;
}
@keyframes floatBadge {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}
@media (max-width: 600px) {
    .lp-mock-sidebar { display: none; }
    .lp-float-top-right { top: -10px; right: 4px; }
    .lp-float-bottom-left { bottom: -10px; left: 4px; }
    .lp-float-badge { font-size: 0.68rem; padding: 6px 12px; }
}

/* Blobs kaldırıldı – hero arka planı CSS'de radial-gradient ile yapılıyor */

/* Glassmorphism nav */
.lp-nav {
    position: sticky;
    top: 0;
    z-index: 100;
    padding: 0 24px;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    background: rgba(var(--bg-color-rgb, 249,250,251), 0.75);
    border-bottom: 1px solid rgba(99,102,241,0.12);
    transition: background 0.3s;
}
body.dark-mode .lp-nav, body.dark-black .lp-nav, body.dark-navy .lp-nav {
    background: rgba(15,15,25,0.75);
}
.lp-nav-inner {
    max-width: 1140px;
    margin: 0 auto;
    height: 68px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.lp-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    cursor: pointer;
}
.lp-logo-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    filter: drop-shadow(0 2px 8px rgba(0,51,102,0.25));
    transition: transform 0.25s;
}
.lp-logo:hover .lp-logo-icon { transform: scale(1.08) rotate(-3deg); }
.lp-logo-text {
    font-size: 1.25rem;
    font-weight: 900;
    color: var(--text-strong);
    letter-spacing: -0.5px;
}
.lp-logo-text .lp-logo-budur { color: var(--logo-blue, #003366); }
.lp-nav-actions { display: flex; gap: 10px; align-items: center; }
.lp-btn-ghost {
    padding: 9px 20px;
    border-radius: 10px;
    border: 1.5px solid var(--border);
    background: transparent;
    color: var(--text-main);
    font-weight: 700;
    font-size: 0.88rem;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.2s;
}
.lp-btn-ghost:hover { border-color: #6366f1; color: #6366f1; background: rgba(99,102,241,0.06); }
.lp-btn-primary {
    padding: 9px 20px;
    border-radius: 10px;
    border: none;
    background: linear-gradient(135deg, #6366f1, #4f46e5);
    color: #fff;
    font-weight: 700;
    font-size: 0.88rem;
    cursor: pointer;
    font-family: inherit;
    box-shadow: 0 4px 14px rgba(99,102,241,0.35);
    transition: all 0.2s;
}
.lp-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(99,102,241,0.5); }

/* Badge kaldırıldı – yerine .lp-hero-eyebrow kullanılıyor */
.lp-badge-dot {
    width: 8px;
    height: 8px;
    background: #10b981;
    border-radius: 50%;
    box-shadow: 0 0 0 3px rgba(16,185,129,0.25);
    animation: lp-pulse-dot 2s infinite;
}
@keyframes lp-pulse-dot {
    0%, 100% { box-shadow: 0 0 0 3px rgba(16,185,129,0.25); }
    50% { box-shadow: 0 0 0 6px rgba(16,185,129,0.1); }
}
.lp-badge-text { font-size: 0.82rem; font-weight: 700; color: #6366f1; }

/* Hero */
.lp-hero {
    position: relative;
    overflow: hidden;
    padding: 130px 24px 110px;
    text-align: center;
    background: radial-gradient(ellipse 90% 55% at 50% -5%, rgba(99,102,241,0.11) 0%, transparent 65%);
    width: 100%;
    box-sizing: border-box;
}
@media (max-width: 480px) {
    .lp-hero { padding: 72px 20px 56px !important; overflow: hidden; }
}
.lp-hero-eyebrow {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: #6366f1;
    margin: 0 0 32px;
    opacity: 0.9;
}
.lp-hero-title {
    font-size: clamp(2.4rem, 6vw, 4.2rem);
    font-weight: 900;
    line-height: 1.08;
    letter-spacing: -2px;
    color: var(--text-strong);
    margin: 0 0 24px;
}
.lp-hero-title .gradient-text {
    background: linear-gradient(135deg, #6366f1 0%, #a855f7 55%, #ec4899 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.lp-hero-sub {
    font-size: 1.08rem;
    color: var(--text-secondary);
    max-width: 520px;
    margin: 0 auto 48px;
    line-height: 1.8;
    font-weight: 400;
}
.lp-hero-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}
.lp-hero-cta {
    padding: 15px 34px;
    border-radius: 12px;
    border: none;
    background: linear-gradient(135deg, #6366f1, #4f46e5);
    color: #fff;
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    font-family: inherit;
    box-shadow: 0 6px 24px rgba(99,102,241,0.38);
    transition: all 0.22s;
    display: flex;
    align-items: center;
    gap: 8px;
}
.lp-hero-cta:hover { transform: translateY(-2px); box-shadow: 0 10px 32px rgba(99,102,241,0.5); }
.lp-hero-cta-arrow { font-size: 1rem; transition: transform 0.2s; }
.lp-hero-cta:hover .lp-hero-cta-arrow { transform: translateX(4px); }
.lp-hero-secondary {
    padding: 15px 34px;
    border-radius: 12px;
    border: 1.5px solid var(--border);
    background: transparent;
    color: var(--text-main);
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.22s;
}
.lp-hero-secondary:hover { border-color: #6366f1; color: #6366f1; background: rgba(99,102,241,0.05); }

/* Stats strip — kaldırıldı */

/* Section header */
.lp-section-header { text-align: center; margin-bottom: 56px; }
.lp-section-eyebrow {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    color: #6366f1;
    background: rgba(99,102,241,0.08);
    padding: 5px 14px;
    border-radius: 50px;
    margin-bottom: 16px;
}
.lp-section-title {
    font-size: clamp(1.5rem, 3.5vw, 2.2rem);
    font-weight: 900;
    color: var(--text-strong);
    margin: 0;
    letter-spacing: -0.5px;
}
.lp-section-sub {
    font-size: 0.95rem;
    color: var(--text-secondary);
    margin: 12px auto 0;
    max-width: 500px;
    line-height: 1.7;
}

/* Feature cards — large bento style */
.lp-features-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    max-width: 1100px;
    margin: 0 auto;
}
@media (max-width: 700px) { .lp-features-grid { grid-template-columns: 1fr; } }

.lp-feature-card {
    border-radius: 24px;
    padding: 32px;
    border: 1.5px solid var(--border);
    background: var(--card-bg);
    cursor: pointer;
    transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
    position: relative;
    overflow: hidden;
}
.lp-feature-card::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.3s;
    border-radius: 24px;
}
.lp-feature-card:hover { transform: translateY(-6px); }
.lp-feature-card:hover::before { opacity: 1; }

.lp-fc-green::before { background: linear-gradient(135deg, rgba(16,185,129,0.05) 0%, transparent 60%); }
.lp-fc-green:hover { box-shadow: 0 16px 50px rgba(16,185,129,0.18); border-color: rgba(16,185,129,0.4); }
.lp-fc-pink::before { background: linear-gradient(135deg, rgba(244,63,94,0.05) 0%, transparent 60%); }
.lp-fc-pink:hover { box-shadow: 0 16px 50px rgba(244,63,94,0.18); border-color: rgba(244,63,94,0.4); }
.lp-fc-indigo::before { background: linear-gradient(135deg, rgba(99,102,241,0.05) 0%, transparent 60%); }
.lp-fc-indigo:hover { box-shadow: 0 16px 50px rgba(99,102,241,0.18); border-color: rgba(99,102,241,0.4); }
.lp-fc-purple::before { background: linear-gradient(135deg, rgba(168,85,247,0.05) 0%, transparent 60%); }
.lp-fc-purple:hover { box-shadow: 0 16px 50px rgba(168,85,247,0.18); border-color: rgba(168,85,247,0.4); }

.lp-fc-icon {
    width: 58px;
    height: 58px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.7rem;
    margin-bottom: 22px;
    position: relative;
    z-index: 1;
}
.lp-fc-icon-green { background: linear-gradient(135deg, #10b981, #059669); box-shadow: 0 8px 24px rgba(16,185,129,0.35); }
.lp-fc-icon-pink { background: linear-gradient(135deg, #f43f5e, #be123c); box-shadow: 0 8px 24px rgba(244,63,94,0.35); }
.lp-fc-icon-indigo { background: linear-gradient(135deg, #6366f1, #4338ca); box-shadow: 0 8px 24px rgba(99,102,241,0.35); }
.lp-fc-icon-purple { background: linear-gradient(135deg, #a855f7, #7c3aed); box-shadow: 0 8px 24px rgba(168,85,247,0.35); }

.lp-fc-tag {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 3px 10px;
    border-radius: 6px;
    margin-bottom: 10px;
    position: relative;
    z-index: 1;
}
.lp-fc-tag-green { background: rgba(16,185,129,0.12); color: #059669; }
.lp-fc-tag-pink { background: rgba(244,63,94,0.12); color: #e11d48; }
.lp-fc-tag-indigo { background: rgba(99,102,241,0.12); color: #4f46e5; }
.lp-fc-tag-purple { background: rgba(168,85,247,0.12); color: #7c3aed; }

.lp-fc-title {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--text-strong);
    margin-bottom: 10px;
    letter-spacing: -0.3px;
    position: relative;
    z-index: 1;
}
.lp-fc-desc {
    font-size: 0.88rem;
    color: var(--text-secondary);
    line-height: 1.7;
    position: relative;
    z-index: 1;
}
.lp-fc-footer {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 20px;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-secondary);
    position: relative;
    z-index: 1;
    transition: color 0.2s;
}
.lp-feature-card:hover .lp-fc-footer { color: var(--text-main); }
.lp-fc-bullet { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }

/* Steps */
.lp-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    max-width: 900px;
    margin: 0 auto;
    position: relative;
}
@media (max-width: 640px) { .lp-steps { grid-template-columns: 1fr; gap: 24px; } }
.lp-steps::before {
    content: '';
    position: absolute;
    top: 30px;
    left: 16%;
    right: 16%;
    height: 2px;
    background: linear-gradient(90deg, #6366f1, #a855f7, #10b981);
    opacity: 0.25;
}
@media (max-width: 640px) { .lp-steps::before { display: none; } }

.lp-step {
    cursor: pointer;
    text-align: center;
    padding: 32px 20px;
    border-radius: 20px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    position: relative;
    transition: transform 0.2s, box-shadow 0.2s;
}
.lp-step:hover { transform: translateY(-4px); box-shadow: 0 12px 36px rgba(99,102,241,0.12); }
.lp-step-num {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    font-weight: 900;
    color: #fff;
    margin: 0 auto 18px;
}
.lp-step-title { font-weight: 800; color: var(--text-strong); margin-bottom: 8px; font-size: 1rem; }
.lp-step-desc { font-size: 0.85rem; color: var(--text-secondary); line-height: 1.65; }

/* CTA block */
.lp-cta-block {
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 50%, #a855f7 100%);
    border-radius: 28px;
    padding: 64px 40px;
    text-align: center;
    position: relative;
    overflow: hidden;
    max-width: 900px;
    margin: 0 auto;
}
.lp-cta-block::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.lp-cta-title {
    font-size: clamp(1.6rem, 4vw, 2.4rem);
    font-weight: 900;
    color: #fff;
    margin: 0 0 14px;
    letter-spacing: -0.5px;
    position: relative;
}
.lp-cta-sub {
    font-size: 1rem;
    color: rgba(255,255,255,0.75);
    margin: 0 auto 36px;
    max-width: 480px;
    line-height: 1.7;
    position: relative;
}
.lp-cta-btn {
    padding: 16px 44px;
    border-radius: 14px;
    border: none;
    background: #fff;
    color: #4f46e5;
    font-weight: 800;
    font-size: 1.05rem;
    cursor: pointer;
    font-family: inherit;
    box-shadow: 0 8px 28px rgba(0,0,0,0.2);
    transition: all 0.25s;
    position: relative;
}
.lp-cta-btn:hover { transform: translateY(-3px); box-shadow: 0 14px 36px rgba(0,0,0,0.3); }
.lp-cta-chips {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 24px;
    position: relative;
}
.lp-cta-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    color: rgba(255,255,255,0.7);
    font-weight: 600;
}

/* ===== LANDING PAGE — DARK BACKGROUND OVERRIDES ===== */
/* Başlıklar: dark bg üzerinde okunaklı açık renkler */
#landing-page .lp-section-title {
    color: #f1f5f9;
}
#landing-page .lp-section-sub {
    color: rgba(148, 163, 184, 0.85);
}
#landing-page .lp-section-eyebrow {
    background: rgba(99, 102, 241, 0.18);
    color: #a5b4fc;
}

/* Özellik kartları: saf beyaz yerine şeffaf cam görünümü */
#landing-page .lp-feature-card {
    background: rgba(255, 255, 255, 0.055);
    border-color: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
#landing-page .lp-feature-card:hover {
    background: rgba(255, 255, 255, 0.08);
}
#landing-page .lp-fc-title {
    color: #f1f5f9;
}
#landing-page .lp-fc-desc {
    color: rgba(148, 163, 184, 0.8);
}
#landing-page .lp-fc-footer {
    color: rgba(148, 163, 184, 0.7);
}
#landing-page .lp-feature-card:hover .lp-fc-footer {
    color: rgba(241, 245, 249, 0.9);
}
#landing-page .lp-fc-tag-indigo { background: rgba(99,102,241,0.22); color: #a5b4fc; }
#landing-page .lp-fc-tag-pink   { background: rgba(244,63,94,0.22);  color: #fda4af; }
#landing-page .lp-fc-tag-green  { background: rgba(16,185,129,0.22); color: #6ee7b7; }
#landing-page .lp-fc-tag-purple { background: rgba(168,85,247,0.22); color: #d8b4fe; }

/* Adım kartları: aynı şeffaf cam görünümü */
#landing-page .lp-step {
    background: rgba(255, 255, 255, 0.055);
    border-color: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
#landing-page .lp-step:hover {
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 12px 36px rgba(99, 102, 241, 0.2);
}
#landing-page .lp-step-title {
    color: #f1f5f9;
}
#landing-page .lp-step-desc {
    color: rgba(148, 163, 184, 0.8);
}
#landing-page .lp-steps::before {
    background: rgba(255, 255, 255, 0.1);
}

/* ===== COMPONENT STYLES ===== */
.chain-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: 16px; padding: 20px; position: relative; box-shadow: 0 4px 15px rgba(0,0,0,0.02); }
            /* === BİLDİRİM TOGGLE STİLİ === */
            .notif-toggle { position:relative; display:inline-block; width:52px; height:28px; flex-shrink:0; }
            .notif-toggle input { opacity:0; width:0; height:0; }
            .notif-toggle-slider { position:absolute; cursor:pointer; top:0; left:0; right:0; bottom:0; background:#d1d5db; border-radius:28px; transition:.3s; }
            .notif-toggle-slider:before { position:absolute; content:""; height:20px; width:20px; left:4px; bottom:4px; background:white; border-radius:50%; transition:.3s; box-shadow:0 1px 3px rgba(0,0,0,.3); }
            .notif-toggle input:checked + .notif-toggle-slider { background:var(--primary); }
            .notif-toggle input:checked + .notif-toggle-slider:before { transform:translateX(24px); }
            .notif-section { background:var(--card-bg); border:1px solid var(--border); border-radius:16px; padding:20px 22px; margin-bottom:14px; }
            .notif-section-header { display:flex; align-items:center; justify-content:space-between; gap:12px; }
            .notif-section-title { font-size:1.05rem; font-weight:800; color:var(--text-strong); margin:0 0 3px; }
            .notif-section-sub { font-size:0.8rem; color:var(--text-secondary); margin:0; }
            .notif-time-row { display:flex; align-items:center; gap:12px; margin-top:14px; padding-top:14px; border-top:1px solid var(--border); flex-wrap:wrap; }
            .notif-time-row label { font-size:0.88rem; font-weight:700; color:var(--text-main); white-space:nowrap; }
            .notif-time-input { padding:8px 14px; border-radius:10px; border:1px solid var(--border); background:var(--bg-color); color:var(--text-main); font-family:inherit; font-size:1rem; font-weight:700; }
            .chain-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; border-bottom: 1px solid var(--border); padding-bottom: 10px; }
            .chain-card-title { font-size: 1.2rem; font-weight: 800; color: var(--primary); margin: 0; }
            .chain-card-stats { font-size: 0.85rem; font-weight: bold; color: var(--text-secondary); background: rgba(0,0,0,0.04); padding: 4px 10px; border-radius: 12px;}
            .chain-rings-container { display: flex; flex-wrap: wrap; gap: 8px; }
            
            /* === YENİ ZİNCİR HALKA STİLLERİ === */
            .chain-rings-container { display: flex; flex-wrap: wrap; align-items: center; gap: 0; row-gap: 8px; padding: 10px 0; }

            .chain-link-wrap { display: inline-flex; align-items: center; position: relative; }

            .chain-link-svg { width: 46px; height: 28px; flex-shrink: 0; transition: all 0.35s cubic-bezier(0.34,1.56,0.64,1); filter: drop-shadow(0 1px 2px rgba(0,0,0,0.15)); }

            .chain-connector { width: 10px; height: 6px; background: var(--border); border-radius: 3px; flex-shrink: 0; transition: background 0.3s; margin: 0 -2px; z-index: 1; }
            .chain-connector.active { background: linear-gradient(90deg, #f59e0b, #ef4444); }
            .chain-connector.broken { background: #fca5a5; }

            .chain-link-label { position: absolute; left: 50%; transform: translateX(-50%); font-size: 0.6rem; font-weight: 800; color: var(--text-secondary); pointer-events: none; line-height: 1; white-space: nowrap; }
            .chain-link-wrap.active .chain-link-label { color: white; }
            .chain-link-wrap.broken .chain-link-label { color: #ef4444; }

            @keyframes chainLinkPop {
                0%   { transform: scale(0.3) rotate(-30deg); opacity: 0; }
                55%  { transform: scale(1.3) rotate(8deg); opacity: 1; }
                80%  { transform: scale(0.95) rotate(-3deg); }
                100% { transform: scale(1) rotate(0deg); opacity: 1; }
            }
            @keyframes chainShake {
                0%,100% { transform: rotate(0deg); }
                20% { transform: rotate(-12deg); }
                40% { transform: rotate(12deg); }
                60% { transform: rotate(-7deg); }
                80% { transform: rotate(7deg); }
            }
            @keyframes chainGlow {
                0%,100% { filter: drop-shadow(0 0 3px rgba(245,158,11,0.5)); }
                50% { filter: drop-shadow(0 0 10px rgba(245,158,11,0.9)); }
            }
            .chain-link-wrap.link-animate .chain-link-svg {
                animation: chainLinkPop 0.6s cubic-bezier(0.34,1.56,0.64,1) forwards, chainGlow 1.5s ease-in-out 0.6s infinite;
            }
            .chain-link-wrap.broken .chain-link-svg { animation: chainShake 0.5s ease-in-out; }
            .tooltip-wrap:hover .tooltip-bubble { opacity: 1 !important; }
            /* ── Gelişmiş mod layout ── */
            .adv-week-wrap, .adv-day-wrap { display:flex; flex-direction:column; height:100%; min-height:0; }
            .adv-week-header { display:flex; flex-shrink:0; border-bottom:1px solid var(--border,#333); background:var(--card-bg,#18181b); position:sticky; top:0; z-index:20; width:100%; box-sizing:border-box; }
            .adv-week-corner { width:52px; min-width:52px; flex-shrink:0; }
            .adv-week-col-hdr { flex:1; min-width:0; text-align:center; padding:6px 2px; display:flex; flex-direction:column; align-items:center; gap:2px; border-left:1px solid var(--border,#333); overflow:hidden; }
            .adv-week-col-hdr.adv-today-hdr { background:rgba(99,102,241,0.08); }
            .adv-wday { font-size:11px; font-weight:700; color:var(--text-secondary,#888); text-transform:uppercase; letter-spacing:.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
            .adv-wnum { font-size:18px; font-weight:800; color:var(--text-main,#fff); }
            .adv-today-num { background:var(--primary,#6366f1); color:#fff; border-radius:50%; width:32px; height:32px; display:flex; align-items:center; justify-content:center; font-size:16px; }
            .adv-scroll { flex:1; overflow-y:auto; overflow-x:hidden; min-height:0; }
            .adv-grid-inner { display:flex; width:100%; box-sizing:border-box; }
            .adv-time-col { width:52px; min-width:52px; flex-shrink:0; display:flex; flex-direction:column; }
            .adv-hour-lbl { height:30px; flex-shrink:0; font-size:10px; color:var(--text-secondary,#888); padding:2px 6px 0 0; text-align:right; box-sizing:border-box; }
            .adv-lbl-full { border-top:1px solid var(--border,#333); }
            .adv-lbl-half { border-top:1px solid rgba(128,128,128,0.28); font-size:9px; opacity:0.6; }
            .adv-days-wrap { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); flex:1; min-width:0; }
            .adv-day-col { position:relative; overflow:hidden; border-left:1px solid var(--border,#333); box-sizing:border-box; min-width:0; }
            .adv-day-col::before { content:''; position:absolute; inset:0; background:repeating-linear-gradient(to bottom, transparent, transparent 29px, rgba(128,128,128,0.15) 29px, rgba(128,128,128,0.15) 30px, transparent 30px, transparent 59px, rgba(128,128,128,0.32) 59px, rgba(128,128,128,0.32) 60px); pointer-events:none; }
            /* ── Görev bloğu ── */
            .adv-block { position:absolute; left:2px; right:2px; width:auto; box-sizing:border-box; overflow:hidden; border-radius:8px; }
            .adv-block-row { display:flex; align-items:center; gap:4px; width:100%; overflow:hidden; padding:4px 6px; box-sizing:border-box; }
            .adv-block-name { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; font-weight:600; color:#fff; cursor:text; min-width:0; }
            .adv-block-time { flex-shrink:0; font-size:11px; color:rgba(255,255,255,0.85); white-space:nowrap; cursor:pointer; }
            .adv-block-check { flex-shrink:0; width:16px; height:16px; border-radius:50%; border:2px solid rgba(255,255,255,0.7); display:flex; align-items:center; justify-content:center; font-size:10px; color:#fff; cursor:pointer; }
            .adv-block-del { flex-shrink:0; color:rgba(255,80,80,0.9); font-size:1.9rem; font-weight:700; cursor:pointer; line-height:1; padding:0 2px; pointer-events:all; z-index:10; }
            .adv-block-del:hover { color:#ff3333; }
            /* Gün görünümü */
            .adv-day-header { padding:12px 16px; border-bottom:1px solid var(--border,#333); flex-shrink:0; }
            .adv-day-name { font-size:13px; font-weight:700; color:var(--text-secondary,#888); text-transform:uppercase; margin-right:8px; }
            .adv-day-num { font-size:22px; font-weight:800; color:var(--text-main,#fff); }
            /* Gün görünümünde tek sütun */
            .adv-day-wrap .adv-days-wrap { grid-template-columns:1fr; }
            /* adv-block ::after tooltip kaldırıldı — JS tooltip kullanılıyor */
            @keyframes advTipIn {
                from { opacity:0; transform:translateY(6px) scale(0.95); }
                to   { opacity:1; transform:translateY(0)   scale(1);    }
            }
            #adv-tooltip {
                position: fixed;
                z-index: 99999;
                pointer-events: none;
                background: linear-gradient(135deg, rgba(30,27,75,0.97) 0%, rgba(45,35,100,0.97) 100%);
                color: #e0e7ff;
                font-size: 13px;
                font-weight: 600;
                font-family: 'Plus Jakarta Sans', sans-serif;
                line-height: 1.5;
                padding: 9px 14px;
                border-radius: 11px;
                max-width: 260px;
                word-break: break-word;
                white-space: pre-wrap;
                box-shadow: 0 8px 32px rgba(0,0,0,0.55), 0 2px 8px rgba(99,102,241,0.25);
                border: 1px solid rgba(99,102,241,0.4);
                backdrop-filter: blur(8px);
                -webkit-backdrop-filter: blur(8px);
                display: none;
                animation: advTipIn 0.18s cubic-bezier(0.34,1.56,0.64,1) both;
            }
            #adv-tooltip.visible { display: block; }