/* ==========================================================================
   Turkuaz Davetiye Premium CSS Design System
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Outfit:wght@300;400;500;600;700;800&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&family=Orbitron:wght@500;700;900&family=Space+Grotesk:wght@400;500;700&family=Inter:wght@300;400;500;600;700;800&family=Poppins:wght@300;400;500;600;700;800&family=Great+Vibes&display=swap');

:root {
    /* Fonts default */
    --font-headers: 'Poppins', sans-serif;
    --font-body: 'Poppins', sans-serif;

    /* Platform Color Palette - Sleek Premium Turquoise Theme */
    --primary: hsl(174, 85%, 35%);       /* Premium Turquoise */
    --primary-hover: hsl(174, 90%, 28%); /* Deeper Turquoise */
    --primary-light: hsla(174, 85%, 35%, 0.08);
    --secondary: hsl(188, 85%, 42%);     /* Turquoise Blue / Cyan */
    --secondary-hover: hsl(188, 90%, 35%);
    --dark: hsl(220, 30%, 12%);          /* Slate Dark */
    --light: #f8fafc;
    --card-bg: rgba(255, 255, 255, 0.75);
    --card-border: rgba(226, 232, 240, 0.7);
    --text-main: hsl(220, 20%, 25%);     /* Slate Gray for text */
    --text-muted: hsl(220, 12%, 50%);    /* Soft Slate */
    --sidebar-bg: hsl(190, 35%, 15%);    /* Teal-tinted Dark Sidebar */
    --glass-bg: rgba(255, 255, 255, 0.45);
    --glass-border: rgba(255, 255, 255, 0.25);
    --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.05), 0 1px 2px 0 rgba(0, 0, 0, 0.03);
    --shadow-md: 0 4px 12px -2px rgba(15, 165, 169, 0.06), 0 2px 6px -1px rgba(0, 0, 0, 0.04);
    --shadow-lg: 0 20px 25px -5px rgba(15, 165, 169, 0.08), 0 10px 10px -5px rgba(0, 0, 0, 0.03);
    --shadow-premium: 0 25px 50px -12px rgba(15, 165, 169, 0.18);
    --radius: 16px;
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Font theme overrides on body */
body.font-theme-1 {
    --font-headers: 'Cormorant Garamond', serif;
    --font-body: 'Plus Jakarta Sans', sans-serif;
}
body.font-theme-2 {
    --font-headers: 'Outfit', sans-serif;
    --font-body: 'Inter', sans-serif;
}
body.font-theme-3 {
    --font-headers: 'Space Grotesk', sans-serif;
    --font-body: 'Inter', sans-serif;
}
body.font-theme-4 {
    --font-headers: 'Playfair Display', serif;
    --font-body: 'Outfit', sans-serif;
}
body.font-theme-5 {
    --font-headers: 'Poppins', sans-serif;
    --font-body: 'Poppins', sans-serif;
}

/* Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    font-family: var(--font-body), sans-serif;
    color: var(--text-main);
    background-color: #fafbfc;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-headers), serif;
    font-weight: 700;
}

body {
    font-family: var(--font-body), sans-serif;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
}

a {
    text-decoration: none;
    color: inherit;
}

button, input, textarea, select {
    font-family: inherit;
    outline: none;
}

/* Utilities */
.container {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
}

.hidden {
    display: none !important;
}

.glass {
    background: var(--glass-bg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--glass-border);
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: #f1f5f9;
}
::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* ==========================================================================
   Header & Navigation (Platform)
   ========================================================================== */
.platform-navbar {
    position: sticky;
    top: 0;
    z-index: 100;
    width: 100%;
    height: 70px;
    display: flex;
    align-items: center;
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    transition: var(--transition);
}

.platform-navbar.scrolled {
    background: linear-gradient(135deg, rgba(15, 138, 133, 0.95) 0%, rgba(17, 192, 198, 0.95) 100%);
    backdrop-filter: blur(12px);
    box-shadow: var(--shadow-sm);
    height: 64px;
}

.navbar-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.logo {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 800;
    font-size: 1.5rem;
    color: white;
    letter-spacing: -0.5px;
}

.logo span {
    color: white;
}

.logo-icon {
    width: 32px;
    height: 32px;
    background: white;
    border-radius: 8px;
    display: grid;
    place-items: center;
    color: var(--primary);
    font-size: 1.1rem;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 32px;
}

.nav-link {
    color: rgba(255, 255, 255, 0.85);
    font-weight: 500;
    font-size: 0.95rem;
    transition: var(--transition);
}

.nav-link:hover, .nav-link.active {
    color: white;
    text-decoration: underline;
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 22px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: var(--transition);
    border: none;
}

.btn-primary {
    background: linear-gradient(135deg, var(--primary), var(--primary-hover));
    color: white;
    box-shadow: 0 4px 14px hsla(174, 85%, 35%, 0.35);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px hsla(174, 85%, 35%, 0.45);
}

.btn-secondary {
    background: white;
    border: 1px solid var(--card-border);
    color: var(--text-main);
}

.btn-secondary:hover {
    background: #f8fafc;
    border-color: #cbd5e1;
    transform: translateY(-1px);
}

.btn-outline {
    background: transparent;
    border: 1.5px solid var(--primary);
    color: var(--primary);
}

.btn-outline:hover {
    background: var(--primary-light);
    transform: translateY(-1px);
}

.btn-text {
    background: transparent;
    color: var(--text-muted);
    padding: 8px 16px;
}

.btn-text:hover {
    color: var(--text-main);
    background: #f1f5f9;
}

.btn-danger {
    background: #ef4444;
    color: white;
}

.btn-danger:hover {
    background: #dc2626;
    transform: translateY(-1px);
}

.btn-sm {
    padding: 6px 14px;
    font-size: 0.85rem;
    border-radius: 8px;
}

/* ==========================================================================
   Landing Page (Hero & Pricing & Features)
   ========================================================================== */
.hero-section {
    padding: 100px 0 140px 0;
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    color: white;
    border-bottom-right-radius: 200px;
}

.hero-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 48px;
    align-items: center;
}

.hero-title {
    font-size: 3.5rem;
    font-weight: 800;
    line-height: 1.15;
    color: white;
    letter-spacing: -1.5px;
    margin-bottom: 24px;
}

.hero-title span {
    color: #fef08a;
    background: none;
    -webkit-background-clip: initial;
    -webkit-text-fill-color: initial;
}

.hero-subtitle {
    font-size: 1.2rem;
    line-height: 1.6;
    color: #ccfbf1;
    margin-bottom: 40px;
}

.hero-visual {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.hero-mockup-wrapper {
    position: relative;
    z-index: 2;
    transform: rotate(3deg);
    transition: var(--transition);
}

.hero-mockup-wrapper:hover {
    transform: rotate(0deg) scale(1.03);
}

.hero-bg-glow {
    position: absolute;
    width: 350px;
    height: 350px;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    filter: blur(80px);
    opacity: 0.3;
    border-radius: 50%;
    z-index: 1;
}

/* Feature Grid */
.features-section {
    padding: 80px 0;
    background-color: #f8fafc;
    border-top: 1px solid var(--card-border);
    border-bottom: 1px solid var(--card-border);
}

.section-header {
    text-align: center;
    max-width: 600px;
    margin: 0 auto 56px auto;
}

.section-tag {
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--primary);
    letter-spacing: 1.5px;
    margin-bottom: 12px;
    display: inline-block;
}

.section-title {
    font-size: 2.25rem;
    font-weight: 800;
    color: var(--dark);
    letter-spacing: -0.5px;
    margin-bottom: 16px;
}

.section-desc {
    color: var(--text-muted);
    font-size: 1.05rem;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 32px;
}

.feature-card {
    background: white;
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
    padding: 32px;
    transition: var(--transition);
    box-shadow: var(--shadow-sm);
}

.feature-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
    border-color: hsla(174, 85%, 35%, 0.3);
}

.feature-icon-wrapper {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: var(--primary-light);
    color: var(--primary);
    display: grid;
    place-items: center;
    font-size: 1.25rem;
    margin-bottom: 24px;
}

.feature-card h3 {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 12px;
    color: var(--dark);
}

.feature-card p {
    color: var(--text-muted);
    line-height: 1.5;
    font-size: 0.95rem;
}

/* Pricing Grid */
.pricing-section {
    padding: 100px 0;
}

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 32px;
    align-items: stretch;
    max-width: 1100px;
    margin: 0 auto;
}

.pricing-card {
    background: white;
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
    padding: 40px;
    display: flex;
    flex-direction: column;
    position: relative;
    transition: var(--transition);
    box-shadow: var(--shadow-sm);
}

.pricing-card.popular {
    border: 2px solid var(--primary);
    box-shadow: var(--shadow-premium);
    transform: translateY(-8px);
}

.pricing-card.popular:hover {
    transform: translateY(-12px);
}

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

.pricing-badge {
    position: absolute;
    top: 20px;
    right: 20px;
    background: var(--primary);
    color: white;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 99px;
    text-transform: uppercase;
}

.pricing-header h3 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--dark);
    margin-bottom: 12px;
}

.pricing-header p {
    color: var(--text-muted);
    font-size: 0.95rem;
    margin-bottom: 24px;
}

.pricing-price {
    display: flex;
    align-items: baseline;
    gap: 4px;
    margin-bottom: 32px;
}

.pricing-amount {
    font-size: 2.75rem;
    font-weight: 800;
    color: var(--dark);
}

.pricing-currency {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--dark);
}

.pricing-period {
    color: var(--text-muted);
    font-size: 0.95rem;
}

.pricing-features {
    list-style: none;
    margin-bottom: 40px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    flex-grow: 1;
}

.pricing-features li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.95rem;
    color: #334155;
}

.pricing-features li.disabled {
    color: var(--text-muted);
    text-decoration: line-through;
    opacity: 0.6;
}

.pricing-features i {
    color: #10b981;
}

.pricing-features li.disabled i {
    color: #ef4444;
}

/* ==========================================================================
   User Auth Modal & Panels
   ========================================================================== */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(8px);
    z-index: 1000;
    display: grid;
    place-items: center;
    padding: 24px;
}

.modal-content {
    background: white;
    border-radius: var(--radius);
    border: 1px solid var(--card-border);
    box-shadow: var(--shadow-lg);
    width: 100%;
    max-width: 460px;
    overflow: hidden;
    animation: modalSlideUp 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

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

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

.modal-header h3 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--dark);
}

.modal-close {
    font-size: 1.5rem;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    transition: var(--transition);
}

.modal-close:hover {
    color: var(--dark);
}

.modal-body {
    padding: 24px;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    font-size: 0.88rem;
    font-weight: 600;
    color: #334155;
    margin-bottom: 8px;
}

.form-control {
    width: 100%;
    padding: 12px 16px;
    border-radius: 10px;
    border: 1.5px solid var(--card-border);
    font-size: 0.95rem;
    transition: var(--transition);
    background: #f8fafc;
}

.form-control:focus {
    border-color: var(--primary);
    background: white;
    box-shadow: 0 0 0 3px hsla(174, 85%, 35%, 0.15);
}

.form-footer-text {
    margin-top: 16px;
    text-align: center;
    font-size: 0.88rem;
    color: var(--text-muted);
}

.form-footer-text a {
    color: var(--primary);
    font-weight: 600;
}

.form-footer-text a:hover {
    text-decoration: underline;
}

/* ==========================================================================
   Dashboard (User panel layout)
   ========================================================================== */
.dashboard-wrapper {
    display: flex;
    flex-grow: 1;
    min-height: calc(100vh - 70px);
}

.dashboard-sidebar {
    width: 260px;
    background: var(--sidebar-bg);
    color: white;
    padding: 24px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-shrink: 0;
}

.sidebar-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 10px;
    font-weight: 500;
    color: #94a3b8;
    cursor: pointer;
    transition: var(--transition);
}

.sidebar-item:hover, .sidebar-item.active {
    color: white;
    background: rgba(255, 255, 255, 0.1);
}

.sidebar-item.active {
    background: var(--primary);
}

.sidebar-profile {
    margin-top: auto;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.profile-info h4 {
    font-size: 0.9rem;
    font-weight: 600;
}

.profile-info p {
    font-size: 0.75rem;
    color: #94a3b8;
}

.dashboard-main {
    flex-grow: 1;
    padding: 40px;
    background-color: #f1f5f9;
    overflow-y: auto;
}

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

.panel-title {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--dark);
}

.panel-desc {
    color: var(--text-muted);
    font-size: 0.95rem;
    margin-top: 4px;
}

/* Stats Cards */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 24px;
    margin-bottom: 32px;
}

.stat-card {
    background: white;
    border-radius: var(--radius);
    border: 1px solid var(--card-border);
    padding: 24px;
    display: flex;
    align-items: center;
    gap: 20px;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
}

.stat-card:hover {
    transform: translateY(-3px);
    border-color: hsla(174, 85%, 35%, 0.25);
    box-shadow: var(--shadow-md);
}

.stat-icon {
    width: 54px;
    height: 54px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    font-size: 1.5rem;
}

.stat-icon.primary { background: var(--primary-light); color: var(--primary); }
.stat-icon.secondary { background: hsla(188, 85%, 42%, 0.1); color: var(--secondary); }
.stat-icon.success { background: rgba(16, 185, 129, 0.1); color: #10b981; }
.stat-icon.warning { background: rgba(245, 158, 11, 0.1); color: #f59e0b; }

.stat-details h5 {
    color: var(--text-muted);
    font-size: 0.88rem;
    font-weight: 500;
    margin-bottom: 4px;
}

.stat-details h3 {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--dark);
}

/* Invitation Dashboard Item List */
.invitations-list-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 24px;
}

.invitation-dash-card {
    background: white;
    border-radius: var(--radius);
    border: 1px solid var(--card-border);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    transition: var(--transition);
}

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

.dash-card-header {
    height: 140px;
    background: linear-gradient(135deg, #a5b4fc, #818cf8);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    padding: 16px;
}

.dash-card-header.royal { background: linear-gradient(135deg, #e0d1b5, #c5a880); }
.dash-card-header.neon { background: linear-gradient(135deg, #1e1b4b, #311042); }
.dash-card-header.retro { background: linear-gradient(135deg, #fed7aa, #f97316); }
.dash-card-header.classic { background: linear-gradient(135deg, #cbd5e1, #64748b); }

.template-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
    color: white;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 99px;
}

.dash-card-body {
    padding: 20px;
    flex-grow: 1;
}

.dash-card-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--dark);
    margin-bottom: 8px;
}

.dash-card-date {
    font-size: 0.85rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 16px;
}

.dash-card-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    border-top: 1px solid #f1f5f9;
    padding-top: 16px;
}

.dash-card-stat {
    display: flex;
    flex-direction: column;
}

.dash-card-stat-val {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--dark);
}

.dash-card-stat-lbl {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.dash-card-actions {
    display: flex;
    gap: 8px;
    padding: 16px 20px;
    background: #f8fafc;
    border-top: 1px solid #f1f5f9;
}

/* Tables styling */
.table-wrapper {
    background: white;
    border-radius: var(--radius);
    border: 1px solid var(--card-border);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    margin-bottom: 32px;
}

.responsive-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}

.responsive-table th, .responsive-table td {
    padding: 16px 24px;
    border-bottom: 1px solid #f1f5f9;
}

.responsive-table th {
    background: #f8fafc;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--text-muted);
    letter-spacing: 0.5px;
}

.responsive-table tr:last-child td {
    border-bottom: none;
}

.responsive-table tbody tr:hover {
    background: #fafcff;
}

.status-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 99px;
    font-size: 0.75rem;
    font-weight: 700;
}

.status-badge.success { background: #d1fae5; color: #065f46; }
.status-badge.danger { background: #fee2e2; color: #991b1b; }
.status-badge.warning { background: #fef3c7; color: #92400e; }
.status-badge.info { background: #e0f2fe; color: #075985; }

/* ==========================================================================
   Creator Panel (Layout & Live Preview)
   ========================================================================== */
.creator-container {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 32px;
    height: calc(100vh - 150px);
}

@media (max-width: 1024px) {
    .creator-container {
        grid-template-columns: 1fr;
        height: auto;
    }
}

.creator-form-panel {
    background: white;
    border-radius: var(--radius);
    border: 1px solid var(--card-border);
    padding: 32px;
    box-shadow: var(--shadow-sm);
    overflow-y: auto;
}

.wizard-steps {
    display: flex;
    justify-content: space-between;
    margin-bottom: 32px;
    position: relative;
}

.wizard-steps::before {
    content: '';
    position: absolute;
    top: 18px;
    left: 24px;
    right: 24px;
    height: 3px;
    background: #e2e8f0;
    z-index: 1;
}

.wizard-step {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.step-num {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #e2e8f0;
    color: var(--text-muted);
    font-weight: 700;
    display: grid;
    place-items: center;
    border: 3px solid white;
    transition: var(--transition);
}

.wizard-step.active .step-num {
    background: var(--primary);
    color: white;
    box-shadow: 0 0 0 4px hsla(174, 85%, 35%, 0.2);
}

.wizard-step.completed .step-num {
    background: #10b981;
    color: white;
}

.step-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-muted);
}

.wizard-step.active .step-label {
    color: var(--primary);
}

/* Template Select Grid */
.template-select-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 24px;
}

.template-option {
    border: 2px solid var(--card-border);
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: var(--transition);
}

.template-option.selected {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px hsla(174, 85%, 35%, 0.15);
}

.template-option-preview {
    height: 120px;
    background: #cbd5e1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: white;
}

.template-option-preview.royal { background: linear-gradient(135deg, #e0d1b5, #c5a880); }
.template-option-preview.neon { background: linear-gradient(135deg, #1e1b4b, #311042); }
.template-option-preview.retro { background: linear-gradient(135deg, #fed7aa, #f97316); }
.template-option-preview.classic { background: linear-gradient(135deg, #475569, #1e293b); }

.template-option-info {
    padding: 12px;
    background: white;
    font-weight: 600;
    font-size: 0.9rem;
    text-align: center;
}

.creator-preview-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #e2e8f0;
    border-radius: var(--radius);
    padding: 24px;
    position: sticky;
    top: 40px;
}

.preview-mode-toggle {
    display: inline-flex;
    background: #cbd5e1;
    padding: 4px;
    border-radius: 10px;
    gap: 4px;
}

.preview-mode-btn {
    background: transparent;
    border: none;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    transition: var(--transition);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.preview-mode-btn.active {
    background: var(--primary);
    color: white;
    box-shadow: var(--shadow-sm);
}

.preview-mode-btn:hover:not(.active) {
    background: rgba(0, 0, 0, 0.05);
    color: var(--dark);
}

.preview-mode-btn.btn-sm-mode {
    padding: 4px 8px;
    font-size: 0.7rem;
    background: rgba(255, 255, 255, 0.15);
    color: #cbd5e1;
}

.preview-mode-btn.btn-sm-mode.active {
    background: var(--primary);
    color: white;
}

.preview-mode-btn.btn-sm-mode:hover:not(.active) {
    background: rgba(255, 255, 255, 0.25);
    color: white;
}

.phone-mockup {
    width: 320px;
    height: 640px;
    background: white;
    border-radius: 44px;
    border: 8px solid hsl(220, 30%, 12%); /* Sleek bezel */
    box-shadow: 0 25px 60px -15px rgba(15, 165, 169, 0.25), var(--shadow-premium);
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    transition: var(--transition);
}

.phone-screen {
    flex-grow: 1;
    overflow-y: auto;
    background: #f8fafc;
    position: relative;
    /* Styles for content inside preview screen */
}

.phone-screen::-webkit-scrollbar {
    width: 4px;
}

.phone-camera {
    width: 85px;
    height: 20px;
    background: hsl(220, 30%, 12%);
    position: absolute;
    top: 10px; /* Floating dynamic island */
    left: 50%;
    transform: translateX(-50%);
    border-radius: 99px;
    z-index: 10;
    transition: var(--transition);
}

/* Desktop Browser Mockup */
.desktop-mockup {
    width: 100%;
    max-width: 760px;
    height: 500px;
    background: white;
    border-radius: 16px;
    border: 10px solid #1e293b;
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    transition: var(--transition);
}

.desktop-browser-header {
    height: 32px;
    background: #1e293b;
    display: flex;
    align-items: center;
    padding: 0 16px;
    gap: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.browser-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ff5f56;
}
.browser-dot:nth-child(2) { background: #ffbd2e; }
.browser-dot:nth-child(3) { background: #27c93f; }

.browser-address-bar {
    flex-grow: 1;
    height: 18px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 4px;
    margin-left: 12px;
    display: flex;
    align-items: center;
    padding: 0 8px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.65rem;
    font-family: monospace;
}

/* ==========================================================================
   Invitation Template Render Themes (Ultra Professional & Sleek)
   ========================================================================== */

/* 1. Theme: Royal Wedding (Classic Gold Luxury) */
.theme-royal {
    font-family: var(--font-headers), 'Playfair Display', serif;
    background-color: #fcfaf6;
    color: #2c2520;
    padding: 55px 28px;
    text-align: center;
    min-height: 100%;
    position: relative;
    overflow: hidden;
    /* Simulated linen paper texture with circular lace geometric SVG pattern overlay */
    background-image: 
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cpath d='M30 0l30 30-30 30L0 30z' fill='none' stroke='%23c5a880' stroke-width='0.5' stroke-opacity='0.05'/%3E%3Ccircle cx='30' cy='30' r='8' fill='none' stroke='%23c5a880' stroke-width='0.5' stroke-opacity='0.05'/%3E%3C/svg%3E"),
        radial-gradient(circle at center, rgba(255,255,255,0.98) 0%, rgba(252,250,245,0.96) 100%);
    z-index: 2;
}

/* Polished gold frame border decoration with corners */
.theme-royal::before {
    content: '';
    position: absolute;
    top: 15px;
    left: 15px;
    right: 15px;
    bottom: 15px;
    border: 2px solid;
    border-image: linear-gradient(135deg, #b39266 0%, #f3e5cd 50%, #c5a880 100%) 1;
    pointer-events: none;
    z-index: 5;
}

.theme-royal::after {
    content: '';
    position: absolute;
    top: 21px;
    left: 21px;
    right: 21px;
    bottom: 21px;
    border: 0.5px dashed rgba(197, 168, 128, 0.5);
    pointer-events: none;
    z-index: 5;
}

.royal-monogram {
    width: 68px;
    height: 68px;
    margin: 0 auto 20px auto;
    display: grid;
    place-items: center;
    font-size: 1.25rem;
    font-weight: 600;
    position: relative;
    z-index: 6;
    /* Polished gold circle frame */
    background: padding-box white, border-box linear-gradient(135deg, #b39266 0%, #f3e5cd 50%, #c5a880 100%);
    border: 2px solid transparent;
    border-radius: 50%;
    color: #b39266;
    box-shadow: 0 6px 15px rgba(197, 168, 128, 0.15);
}

.royal-header {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 4px;
    color: #b39266;
    margin-bottom: 20px;
    margin-top: 10px;
    text-shadow: 0px 1px 1px white;
    z-index: 6;
}

.royal-title {
    font-family: var(--font-headers), 'Great Vibes', cursive;
    font-size: 3.5rem;
    font-weight: 400;
    color: #b89765;
    margin-bottom: 8px;
    line-height: 1.0;
    letter-spacing: 0px;
    z-index: 6;
}

.royal-and {
    font-size: 2.2rem;
    font-family: var(--font-headers), 'Great Vibes', cursive;
    color: #c5a880;
    margin: 2px 0;
    z-index: 6;
}

.royal-ornament {
    font-size: 1.25rem;
    color: #c5a880;
    margin: 20px 0;
    z-index: 6;
}

.royal-date {
    font-size: 1rem;
    font-weight: 600;
    color: #38302b;
    border-top: 1.5px solid #e5dccf;
    border-bottom: 1.5px solid #e5dccf;
    padding: 10px 0;
    margin: 24px 0;
    letter-spacing: 2px;
    text-transform: uppercase;
    z-index: 6;
}

.royal-details {
    margin: 30px 0;
    font-size: 0.88rem;
    color: #5c524b;
    line-height: 1.75;
    z-index: 6;
}

.royal-location {
    font-weight: 700;
    color: #38302b;
    margin-top: 16px;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    z-index: 6;
}

.royal-lcv-btn {
    background: linear-gradient(135deg, #b39266 0%, #c5a880 50%, #b39266 100%);
    color: #ffffff;
    border: 1px solid #f3e5cd;
    padding: 12px 28px;
    font-family: var(--font-headers), 'Playfair Display', serif;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 2px;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(197, 168, 128, 0.35);
    transition: var(--transition);
    z-index: 6;
    border-radius: 4px;
}

.royal-lcv-btn:hover {
    background: linear-gradient(135deg, #3a322d, #25201d);
    color: #f3e5cd;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}

/* 2. Theme: Neon Party (Glow Synth & Dark Style) */
.theme-neon {
    font-family: 'Orbitron', sans-serif;
    background-color: #05020a;
    color: #fff;
    padding: 45px 24px;
    text-align: center;
    min-height: 100%;
    position: relative;
    overflow: hidden;
    /* Neon diagonal laser background lines */
    background-image: 
        linear-gradient(rgba(255, 0, 127, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 240, 255, 0.03) 1px, transparent 1px);
    background-size: 25px 25px;
    z-index: 2;
}

/* Dynamic moving glow blobs in the background */
.theme-neon::before {
    content: '';
    position: absolute;
    width: 200px;
    height: 200px;
    background: #ff007f;
    filter: blur(90px);
    opacity: 0.25;
    top: 10%;
    left: -10%;
    border-radius: 50%;
    animation: neonGlowMove1 12s infinite alternate ease-in-out;
    pointer-events: none;
    z-index: 1;
}

.theme-neon::after {
    content: '';
    position: absolute;
    width: 250px;
    height: 250px;
    background: #00f0ff;
    filter: blur(100px);
    opacity: 0.22;
    bottom: 10%;
    right: -10%;
    border-radius: 50%;
    animation: neonGlowMove2 15s infinite alternate ease-in-out;
    pointer-events: none;
    z-index: 1;
}

@keyframes neonGlowMove1 {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(120px, 80px) scale(1.3); }
}

@keyframes neonGlowMove2 {
    0% { transform: translate(0, 0) scale(1.1); }
    100% { transform: translate(-100px, -90px) scale(0.9); }
}

.neon-glow-icon {
    font-size: 2.2rem;
    color: #ff007f;
    text-shadow: 0 0 10px #ff007f, 0 0 25px rgba(255,0,127,0.6);
    margin-bottom: 16px;
    animation: neonGlowPulse 2.5s infinite alternate ease-in-out;
    z-index: 3;
    position: relative;
}

@keyframes neonGlowPulse {
    from { transform: scale(0.92); filter: brightness(0.9); }
    to { transform: scale(1.08); filter: brightness(1.2); }
}

.neon-header {
    font-size: 0.75rem;
    color: #00f0ff;
    letter-spacing: 4px;
    text-transform: uppercase;
    margin-bottom: 24px;
    text-shadow: 0 0 10px rgba(0, 240, 255, 0.8), 0 0 20px rgba(0, 240, 255, 0.4);
    font-weight: 700;
    z-index: 3;
    position: relative;
}

.neon-title {
    font-size: 2.15rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1px;
    background: linear-gradient(135deg, #ff007f, #00f0ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 15px rgba(255, 0, 127, 0.3);
    margin-bottom: 16px;
    z-index: 3;
    position: relative;
}

.neon-details {
    /* High-end fütüristik glassmorphism card */
    background: rgba(13, 8, 28, 0.75);
    border: 1px solid rgba(0, 240, 255, 0.35);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 20px;
    padding: 24px;
    margin: 32px 0;
    box-shadow: 
        0 8px 32px 0 rgba(0, 240, 255, 0.15),
        inset 0 0 15px rgba(255, 0, 127, 0.15);
    position: relative;
    z-index: 3;
}

.neon-date {
    font-size: 1.25rem;
    font-weight: 800;
    color: #ff007f;
    margin-bottom: 12px;
    text-shadow: 0 0 8px rgba(255, 0, 127, 0.8);
}

.neon-desc {
    font-family: 'Inter', sans-serif;
    font-size: 0.85rem;
    color: #e2e8f0;
    line-height: 1.65;
}

.neon-btn {
    background: transparent;
    color: #00f0ff;
    border: 2px solid #00f0ff;
    border-radius: 99px;
    padding: 12px 28px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 0.8rem;
    box-shadow: 0 0 18px rgba(0, 240, 255, 0.3);
    cursor: pointer;
    transition: var(--transition);
    z-index: 3;
    position: relative;
}

.neon-btn:hover {
    background: #00f0ff;
    color: #05020a;
    box-shadow: 0 0 35px rgba(0, 240, 255, 0.8);
    transform: translateY(-2px);
}

/* 3. Theme: Retro Birthday (Neobrutalist Arcade) */
.theme-retro {
    font-family: 'Space Grotesk', sans-serif;
    color: #1e293b;
    padding: 45px 24px;
    text-align: center;
    min-height: 100%;
    border: 4px solid #1e293b;
    /* Bold neobrutalist diagonal retro grid background pattern */
    background-color: #fef08a;
    background-image: 
        linear-gradient(45deg, rgba(30, 41, 59, 0.04) 25%, transparent 25%, transparent 75%, rgba(30, 41, 59, 0.04) 75%),
        linear-gradient(45deg, rgba(30, 41, 59, 0.04) 25%, transparent 25%, transparent 75%, rgba(30, 41, 59, 0.04) 75%);
    background-size: 20px 20px;
    background-position: 0 0, 10px 10px;
}

.retro-header {
    background: #f97316;
    color: white;
    border: 3px solid #1e293b;
    display: inline-block;
    padding: 6px 18px;
    font-weight: 800;
    text-transform: uppercase;
    transform: rotate(-2.5deg);
    margin-bottom: 24px;
    font-size: 0.85rem;
    box-shadow: 4px 4px 0px #1e293b;
}

.retro-card {
    background: white;
    border: 3px solid #1e293b;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 6px 6px 0px #1e293b;
    margin: 24px 0;
    text-align: center;
    position: relative;
}

.retro-stamp {
    position: absolute;
    top: -24px;
    right: -10px;
    background: #ec4899;
    color: white;
    border: 3px solid #1e293b;
    font-weight: 800;
    padding: 4px 12px;
    transform: rotate(12deg);
    font-size: 0.75rem;
    box-shadow: 3px 3px 0 #1e293b;
}

.retro-title {
    font-size: 2rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: -0.5px;
    margin-bottom: 6px;
    color: #1e293b;
}

.retro-details {
    font-size: 0.88rem;
    line-height: 1.55;
    margin: 20px 0;
    color: #334155;
    font-weight: 600;
}

.retro-date {
    font-size: 1.15rem;
    font-weight: 800;
    color: #ec4899;
    background: #fff;
    border: 3px solid #1e293b;
    display: inline-block;
    padding: 6px 16px;
    transform: rotate(1deg);
    box-shadow: 4px 4px 0 #1e293b;
    margin-bottom: 12px;
}

.retro-btn {
    background: #10b981;
    color: white;
    border: 3px solid #1e293b;
    padding: 12px 28px;
    font-weight: 800;
    text-transform: uppercase;
    font-size: 0.85rem;
    box-shadow: 4px 4px 0px #1e293b;
    cursor: pointer;
    transition: all 0.1s ease;
}

.retro-btn:hover {
    transform: translate(-1px, -1px);
    box-shadow: 5px 5px 0px #1e293b;
}

.retro-btn:active {
    transform: translate(3px, 3px);
    box-shadow: 1px 1px 0px #1e293b;
}

/* 4. Theme: Classic Event (Sleek Minimalist Luxury) */
.theme-classic {
    font-family: 'Inter', sans-serif;
    background-color: #faf9f5;
    color: #0f172a;
    padding: 55px 28px;
    text-align: center;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    /* Soft center paper radial gradient */
    background-image: radial-gradient(circle at center, #ffffff 0%, #faf9f5 100%);
}

/* Elegant asymmetrical gallery frame */
.theme-classic::before {
    content: '';
    position: absolute;
    top: 16px; 
    left: 16px; 
    right: 16px; 
    bottom: 16px;
    border: 1px solid #1e293b;
    pointer-events: none;
    opacity: 0.85;
}

.theme-classic::after {
    content: '';
    position: absolute;
    top: 22px; 
    left: 22px; 
    right: 22px; 
    bottom: 22px;
    border: 0.5px solid rgba(30, 41, 59, 0.25);
    pointer-events: none;
}

.classic-header {
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 4px;
    margin-bottom: 24px;
    position: relative;
}

.classic-title {
    font-size: 1.85rem;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: 0.5px;
    line-height: 1.3;
    margin-bottom: 16px;
    text-transform: uppercase;
}

.classic-divider {
    width: 50px;
    height: 1px;
    background: #1e293b;
    margin: 24px auto;
}

.classic-desc {
    color: #334155;
    font-size: 0.88rem;
    line-height: 1.7;
    max-width: 280px;
    margin: 0 auto 30px auto;
}

.classic-date {
    font-size: 1rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 12px;
    letter-spacing: 1px;
}

.classic-location {
    font-size: 0.85rem;
    color: var(--text-muted);
    font-weight: 500;
}

.classic-btn {
    background: #1e293b;
    color: white;
    border: 1px solid #1e293b;
    border-radius: 0; /* clean sharp corners */
    padding: 12px 32px;
    font-weight: 600;
    font-size: 0.8rem;
    letter-spacing: 2.5px;
    cursor: pointer;
    transition: all 0.25s ease;
    margin-top: 32px;
    text-transform: uppercase;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.1);
}

.classic-btn:hover {
    background: transparent;
    color: #1e293b;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.15);
}

/* 5. Theme: Boho Botanical (Earthy Terracotta & Sage Green with watercolor leaf accents) */
.theme-boho {
    font-family: 'Playfair Display', serif;
    background-color: #faf6f0;
    color: #2f4f4f;
    padding: 55px 28px;
    text-align: center;
    min-height: 100%;
    position: relative;
    overflow: hidden;
    background-image: 
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cpath d='M10 30c5-5 15-5 20 0s5 15 0 20-15 5-20 0-5-15 0-20z' fill='%23e2725b' fill-opacity='0.03'/%3E%3Cpath d='M90 80c5-5 15-5 20 0s5 15 0 20-15 5-20 0-5-15 0-20z' fill='%236e8b3d' fill-opacity='0.03'/%3E%3C/svg%3E");
    z-index: 2;
}

.theme-boho::before {
    content: '';
    position: absolute;
    top: 18px;
    left: 18px;
    right: 18px;
    bottom: 18px;
    border: 1.5px solid rgba(110, 139, 61, 0.25);
    border-radius: 24px 4px 24px 4px;
    pointer-events: none;
    z-index: 5;
}

.boho-header {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: #6e8b3d;
    margin-bottom: 24px;
    z-index: 6;
}

.boho-title {
    font-size: 2.25rem;
    font-weight: 700;
    color: #b05a46;
    line-height: 1.2;
    margin-bottom: 12px;
    z-index: 6;
}

.boho-divider {
    width: 60px;
    height: 12px;
    margin: 20px auto;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 12' width='60' height='12'%3E%3Cpath d='M 0 6 Q 15 0 30 6 T 60 6' fill='none' stroke='%236e8b3d' stroke-width='1.5'/%3E%3C/svg%3E");
    opacity: 0.7;
}

.boho-date {
    font-size: 1.05rem;
    font-weight: 600;
    color: #4a5d30;
    background: rgba(110, 139, 61, 0.08);
    display: inline-block;
    padding: 8px 20px;
    border-radius: 12px;
    margin: 16px 0;
    letter-spacing: 1px;
    z-index: 6;
}

.boho-details {
    margin: 24px 0;
    font-size: 0.88rem;
    color: #3f4e4f;
    line-height: 1.7;
    z-index: 6;
}

.boho-location {
    font-weight: 600;
    color: #2f4f4f;
    margin-top: 16px;
    font-size: 0.88rem;
}

.boho-btn {
    background: #b05a46;
    color: white;
    border: none;
    border-radius: 30px;
    padding: 12px 30px;
    font-weight: 600;
    font-size: 0.8rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(176, 90, 70, 0.3);
    transition: var(--transition);
    z-index: 6;
}

.boho-btn:hover {
    background: #8e4432;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(176, 90, 70, 0.45);
}

/* 6. Theme: Moody Velvet (Deep Gothic/Velvet Glamour with Golden Wax Seal) */
.theme-moody {
    font-family: 'Playfair Display', serif;
    background: radial-gradient(circle at center, #1b0a1a 0%, #0c020c 100%);
    color: #e5d5e5;
    padding: 55px 28px;
    text-align: center;
    min-height: 100%;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(197, 168, 128, 0.15);
    z-index: 2;
}

.theme-moody::before {
    content: '';
    position: absolute;
    top: 14px;
    left: 14px;
    right: 14px;
    bottom: 14px;
    border: 1px solid rgba(212, 175, 55, 0.3);
    pointer-events: none;
    z-index: 5;
}
.theme-moody::after {
    content: '';
    position: absolute;
    top: 18px;
    left: 18px;
    right: 18px;
    bottom: 18px;
    border: 0.5px solid rgba(212, 175, 55, 0.15);
    pointer-events: none;
    z-index: 5;
}

.moody-wax-seal {
    width: 72px;
    height: 72px;
    margin: 0 auto 24px auto;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #d43f3f 0%, #801818 80%, #5a0f0f 100%);
    border: 1px solid #991b1b;
    box-shadow: 
        0 4px 10px rgba(0, 0, 0, 0.4),
        inset 0 -2px 6px rgba(0,0,0,0.6),
        inset 2px 2px 6px rgba(255,255,255,0.4);
    display: grid;
    place-items: center;
    font-size: 1.6rem;
    color: #ffd700;
    font-weight: 700;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
    transform: rotate(-5deg);
    z-index: 6;
    position: relative;
}

.moody-header {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 4px;
    color: #ffd700;
    margin-bottom: 20px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
    z-index: 6;
}

.moody-title {
    font-family: 'Great Vibes', cursive;
    font-size: 3.25rem;
    font-weight: 400;
    color: #ffffff;
    text-shadow: 0 2px 10px rgba(255, 255, 255, 0.15), 0 0 2px #ffd700;
    margin-bottom: 8px;
    line-height: 1.1;
    z-index: 6;
}

.moody-and {
    font-size: 1.8rem;
    font-family: 'Great Vibes', cursive;
    color: #ffd700;
    margin: 4px 0;
    z-index: 6;
}

.moody-date {
    font-size: 0.95rem;
    font-weight: 600;
    color: #ffd700;
    border-top: 1px solid rgba(212, 175, 55, 0.3);
    border-bottom: 1px solid rgba(212, 175, 55, 0.3);
    padding: 10px 0;
    margin: 24px 0;
    letter-spacing: 2px;
    text-transform: uppercase;
    z-index: 6;
}

.moody-details {
    margin: 24px 0;
    font-size: 0.88rem;
    color: #cbd5e1;
    line-height: 1.8;
    z-index: 6;
}

.moody-location {
    font-weight: 700;
    color: #ffd700;
    margin-top: 16px;
    font-size: 0.88rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.moody-btn {
    background: linear-gradient(135deg, #d4af37 0%, #aa7c11 100%);
    color: #1a081a;
    border: 1px solid #ffe875;
    padding: 12px 28px;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.78rem;
    letter-spacing: 2px;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(170, 124, 17, 0.4);
    transition: var(--transition);
    z-index: 6;
}

.moody-btn:hover {
    background: #ffffff;
    color: #1a081a;
    border-color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 255, 255, 0.3);
}

/* 7. Theme: Playful Pastel (Dreamy Pink/Lavender Gradient with cute illustration cards) */
.theme-pastel {
    font-family: 'Space Grotesk', sans-serif;
    background: linear-gradient(135deg, #fbcfe8 0%, #e9d5ff 50%, #c084fc 100%);
    color: #4c1d95;
    padding: 45px 24px;
    text-align: center;
    min-height: 100%;
    position: relative;
    overflow: hidden;
    z-index: 2;
}

.theme-pastel::before {
    content: '★';
    position: absolute;
    font-size: 1.5rem;
    color: rgba(255, 255, 255, 0.6);
    top: 10%;
    left: 10%;
    animation: float-star 4s infinite ease-in-out;
}
.theme-pastel::after {
    content: '♥';
    position: absolute;
    font-size: 1.5rem;
    color: rgba(255, 255, 255, 0.6);
    bottom: 12%;
    right: 12%;
    animation: float-star 5s infinite ease-in-out alternate;
}

.pastel-header {
    background: white;
    color: #c084fc;
    border-radius: 20px;
    display: inline-block;
    padding: 6px 18px;
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 1px;
    margin-bottom: 20px;
    box-shadow: 0 4px 10px rgba(192, 132, 252, 0.2);
}

.pastel-card {
    background: rgba(255, 255, 255, 0.9);
    border-radius: 24px;
    padding: 24px;
    box-shadow: 0 10px 25px rgba(76, 29, 149, 0.1);
    margin: 20px 0;
    border: 2px solid white;
}

.pastel-title {
    font-size: 1.85rem;
    font-weight: 800;
    color: #5b21b6;
    line-height: 1.2;
    margin-bottom: 8px;
}

.pastel-date {
    font-size: 1rem;
    font-weight: 700;
    color: white;
    background: #db2777;
    display: inline-block;
    padding: 6px 16px;
    border-radius: 99px;
    box-shadow: 0 4px 12px rgba(219, 39, 119, 0.3);
    margin-bottom: 12px;
}

.pastel-details {
    font-size: 0.85rem;
    line-height: 1.6;
    color: #5b21b6;
    font-weight: 500;
}

.pastel-btn {
    background: #7c3aed;
    color: white;
    border: none;
    border-radius: 99px;
    padding: 12px 28px;
    font-weight: 700;
    font-size: 0.8rem;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(124, 58, 237, 0.35);
    transition: var(--transition);
}

.pastel-btn:hover {
    background: #6d28d9;
    transform: scale(1.03);
    box-shadow: 0 6px 18px rgba(124, 58, 237, 0.45);
}

/* 8. Theme: Vintage Ticket (Aged Parchment, Typewriter letters, admitting one ticket cutouts) */
.theme-vintage {
    font-family: 'Courier New', Courier, monospace;
    background-color: #f2ebda;
    color: #3e2723;
    padding: 50px 24px;
    text-align: center;
    min-height: 100%;
    position: relative;
    overflow: hidden;
    border: 3px double #3e2723;
    background-image: 
        radial-gradient(circle at 10% 20%, rgba(0,0,0,0.02) 0%, transparent 80%),
        radial-gradient(circle at 80% 80%, rgba(0,0,0,0.02) 0%, transparent 80%);
    z-index: 2;
}

.theme-vintage::before {
    content: '';
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
    border: 1px dashed rgba(62, 39, 35, 0.4);
    pointer-events: none;
    z-index: 5;
}

.vintage-header {
    font-size: 0.7rem;
    font-weight: bold;
    letter-spacing: 3px;
    color: #5d4037;
    margin-bottom: 16px;
    text-transform: uppercase;
    border-bottom: 2px double #3e2723;
    display: inline-block;
    padding-bottom: 4px;
}

.vintage-ticket-body {
    border: 2px solid #3e2723;
    padding: 20px;
    background: #fffdf9;
    position: relative;
    margin: 24px 0;
}

.vintage-ticket-body::before, .vintage-ticket-body::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #f2ebda;
    border: 2px solid #3e2723;
    transform: translateY(-50%);
}
.vintage-ticket-body::before {
    left: -10px;
}
.vintage-ticket-body::after {
    right: -10px;
}

.vintage-title {
    font-size: 1.5rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0px;
    color: #3e2723;
    margin-bottom: 10px;
    line-height: 1.3;
}

.vintage-stamp {
    width: 54px;
    height: 54px;
    margin: 12px auto;
    border: 2.5px dashed #8d6e63;
    display: grid;
    place-items: center;
    font-size: 0.8rem;
    color: #8d6e63;
    font-weight: bold;
    transform: rotate(-10deg);
}

.vintage-date {
    font-size: 1rem;
    font-weight: bold;
    color: #3e2723;
    background: #efebe9;
    border: 1px solid #3e2723;
    display: inline-block;
    padding: 6px 14px;
    margin: 12px 0;
}

.vintage-details {
    font-size: 0.78rem;
    line-height: 1.6;
    color: #4e342e;
}

.vintage-btn {
    background: #3e2723;
    color: #f2ebda;
    border: 2px solid #3e2723;
    padding: 10px 24px;
    font-family: inherit;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 0.78rem;
    cursor: pointer;
    letter-spacing: 1px;
    transition: var(--transition);
}

.vintage-btn:hover {
    background: transparent;
    color: #3e2723;
}


/* ==========================================================================
   Countdown Component (Common for Guest Views)
.countdown-container {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin: 32px 0;
}

.countdown-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 60px;
    padding: 8px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.theme-royal .countdown-box {
    background: rgba(212, 197, 179, 0.15);
    border: 1px solid #d4c5b3;
    border-radius: 0;
}

.theme-retro .countdown-box {
    background: white;
    border: 2px solid #1c1917;
    border-radius: 0;
    box-shadow: 3px 3px 0px #1c1917;
}

.theme-classic .countdown-box {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}

.countdown-num {
    font-size: 1.5rem;
    font-weight: 700;
}

.theme-neon .countdown-num {
    color: #00f0ff;
    text-shadow: 0 0 5px #00f0ff;
}

.countdown-lbl {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
}

.theme-neon .countdown-lbl {
    color: #cbd5e1;
}

.theme-royal .countdown-lbl {
    color: #5c5346;
}

/* Music Player Floating Panel */
.music-player-panel {
    position: fixed;
    bottom: 24px;
    right: 24px;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    border: 1px solid var(--card-border);
    border-radius: 99px;
    padding: 8px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: var(--shadow-md);
    z-index: 100;
    transition: var(--transition);
}

.theme-neon .music-player-panel {
    background: rgba(11, 7, 25, 0.85);
    border: 1px solid rgba(255, 0, 127, 0.3);
    color: white;
}

.theme-retro .music-player-panel {
    background: white;
    border: 3px solid #1c1917;
    border-radius: 0;
    box-shadow: 4px 4px 0px #1c1917;
}

.music-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--primary);
    color: white;
    border: none;
    display: grid;
    place-items: center;
    cursor: pointer;
    font-size: 0.95rem;
    transition: var(--transition);
}

.theme-retro .music-btn {
    border-radius: 0;
    border: 2px solid #1c1917;
    background: #fb923c;
    box-shadow: 2px 2px 0px #1c1917;
}

.theme-neon .music-btn {
    background: #ff007f;
    box-shadow: 0 0 10px #ff007f;
}

.music-title {
    font-size: 0.8rem;
    font-weight: 500;
    white-space: nowrap;
}

/* ==========================================================================
   Full Screen Public Guest View
   ========================================================================== */
.guest-view-wrapper {
    background: #f1f5f9;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 16px;
}

.guest-card-container {
    width: 100%;
    max-width: 480px;
    background: white;
    border-radius: 24px;
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    margin-bottom: 24px;
    border: 1px solid var(--card-border);
}

.guest-sections-wrapper {
    width: 100%;
    max-width: 480px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.guest-section-card {
    background: white;
    border-radius: 20px;
    padding: 24px;
    border: 1px solid var(--card-border);
    box-shadow: var(--shadow-sm);
}

.guest-section-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--dark);
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.guestbook-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-height: 300px;
    overflow-y: auto;
    margin-top: 16px;
    padding-right: 4px;
}

.guestbook-entry {
    background: #f8fafc;
    border-radius: 12px;
    padding: 16px;
    border: 1px solid var(--card-border);
}

.guestbook-entry-header {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 6px;
}

.guestbook-entry-name {
    color: var(--dark);
}

.guestbook-entry-text {
    font-size: 0.9rem;
    line-height: 1.5;
    color: #334155;
}

/* Map Sim */
.map-sim-box {
    height: 180px;
    background: #e2e8f0;
    border-radius: 12px;
    border: 1.5px dashed var(--text-muted);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    gap: 12px;
    cursor: pointer;
    transition: var(--transition);
}

.map-sim-box:hover {
    background: #cbd5e1;
    color: var(--dark);
    border-color: var(--dark);
}

/* Watermark */
.watermark {
    text-align: center;
    padding: 16px;
    font-size: 0.75rem;
    color: var(--text-muted);
    letter-spacing: 0.5px;
}

.watermark a {
    font-weight: 700;
    color: var(--primary);
}

/* ==========================================================================
   Responsive Adaptation
   ========================================================================== */
@media (max-width: 768px) {
    .nav-links {
        display: none; /* simple burger menu could be added, but for SPA toggle we will use layout tabs */
    }
    
    .hero-grid {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 32px;
    }
    
    .hero-title {
        font-size: 2.5rem;
    }
    
    .dashboard-wrapper {
        flex-direction: column;
    }
    
    .dashboard-sidebar {
        width: 100%;
        flex-direction: row;
        overflow-x: auto;
        padding: 12px;
        gap: 12px;
    }
    
    .sidebar-profile {
        display: none; /* hide profile on mobile sidebar row */
    }
    
    .dashboard-main {
        padding: 20px;
    }
    
    .stats-grid {
        grid-template-columns: 1fr;
    }

    /* Shrink Hemen Başla and other buttons on mobile */
    .btn {
        padding: 8px 18px !important;
        font-size: 0.85rem !important;
        border-radius: 10px !important;
    }
    
    .features-cta-banner .btn-primary {
        padding: 10px 24px !important;
        font-size: 0.9rem !important;
    }

    .hero-actions {
        flex-direction: column;
        width: 100%;
        gap: 12px;
    }

    .hero-actions .btn {
        width: 100%;
    }
}

/* ==========================================================================
   Templates Gallery Showcase Styles
   ========================================================================== */
.templates-gallery-section {
    padding: 100px 0;
    background: radial-gradient(circle at 50% 50%, hsla(174, 85%, 35%, 0.04) 0%, transparent 70%);
    border-bottom: 1px solid var(--card-border);
}

.templates-showcase-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 32px;
    margin-top: 48px;
}

.showcase-card {
    background: white;
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
    position: relative;
    cursor: pointer;
    display: flex;
    flex-direction: column;
}

.showcase-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg);
    border-color: hsla(174, 85%, 35%, 0.25);
}

.showcase-badge {
    position: absolute;
    top: 16px;
    left: 16px;
    background: rgba(15, 23, 42, 0.75);
    backdrop-filter: blur(4px);
    color: white;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 99px;
    z-index: 10;
}

.showcase-badge.premium {
    background: linear-gradient(135deg, #f59e0b, #d97706);
}

.showcase-visual {
    height: 280px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
    padding: 24px;
    text-align: center;
    position: relative;
    overflow: hidden;
    transition: var(--transition);
}

.showcase-card:hover .showcase-visual {
    transform: scale(1.02);
}

.showcase-visual.royal {
    background: linear-gradient(135deg, #fdfbf7, #f3e9dc);
    color: #4a3e3d;
    border-bottom: 1px solid rgba(197, 168, 128, 0.3);
}

.showcase-visual.royal::before {
    content: '';
    position: absolute;
    top: 12px;
    left: 12px;
    right: 12px;
    bottom: 12px;
    border: 1.5px solid rgba(197, 168, 128, 0.4);
    pointer-events: none;
}

.showcase-visual.neon {
    background: linear-gradient(135deg, #090514, #180d2b);
    border-bottom: 1px solid rgba(255, 0, 127, 0.2);
}

.showcase-visual.retro {
    background: #fef9c3;
    color: #1c1917;
    border-bottom: 3px solid #1c1917;
}

.showcase-visual.classic {
    background: #ffffff;
    color: #1e293b;
    border-bottom: 1px solid #cbd5e1;
}

.showcase-visual h4 {
    font-size: 1.35rem;
    font-weight: 800;
    margin-bottom: 12px;
    z-index: 2;
}

.showcase-visual p {
    font-size: 0.85rem;
    opacity: 0.85;
    line-height: 1.4;
    z-index: 2;
    max-width: 200px;
}

.showcase-info {
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: white;
    z-index: 3;
}

.showcase-info h3 {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--dark);
}

/* Enhancements to theme layouts */
.royal-rings {
    display: flex;
    justify-content: center;
    margin-bottom: 16px;
    color: #c5a880;
    font-size: 1.6rem;
}

.royal-rings i:last-child {
    margin-left: -10px;
}

.royal-ornament {
    font-size: 1.15rem;
    color: #c5a880;
    margin: 12px 0;
}

.neon-glow-icon {
    font-size: 2.2rem;
    color: #00f0ff;
    text-shadow: 0 0 10px #00f0ff;
    margin-bottom: 16px;
}

.retro-stamp {
    background: #ff007f;
    color: white;
    border: 3.5px solid #1c1917;
    font-weight: 900;
    padding: 4px 14px;
    transform: rotate(-10deg);
    font-size: 0.95rem;
    margin-bottom: 16px;
    box-shadow: 3px 3px 0px #1c1917;
}

.classic-line {
    width: 40px;
    height: 2.5px;
    background: #1e293b;
    margin-bottom: 16px;
}

/* Demo Preview Modal Layout */
.demo-modal-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 32px;
}

@media (max-width: 768px) {
    .demo-modal-grid {
        grid-template-columns: 1fr;
    }
}

/* Bottom Mobile Navigation Tab Bar */
.mobile-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 64px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid rgba(226, 232, 240, 0.8);
    display: none; /* hidden on desktop */
    justify-content: space-around;
    align-items: center;
    z-index: 999;
    box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.05);
}

.mobile-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    color: var(--text-muted);
    font-size: 0.65rem;
    font-weight: 600;
    text-decoration: none;
    transition: var(--transition);
    flex-grow: 1;
    height: 100%;
}

.mobile-nav-item i {
    font-size: 1.2rem;
}

.mobile-nav-item.active {
    color: var(--primary);
}

.mobile-nav-item:active {
    transform: scale(0.95);
}

@media (max-width: 768px) {
    .mobile-bottom-nav {
        display: flex;
    }
    body {
        padding-bottom: 64px; /* offset bottom tab bar on mobile */
    }
}

/* ==========================================================================
   edijitaldavetiye.com Inspired Overrides & Components
   ========================================================================== */

/* Navbar button overrides */
.platform-navbar .btn-text {
    color: white;
}
.platform-navbar .btn-text:hover {
    color: #ccfbf1;
    background: rgba(255, 255, 255, 0.1);
}
.platform-navbar #nav-user-name {
    color: white !important;
}

/* 3-Step interactive guide */
.step-switcher-container {
    max-width: 800px;
    margin: 40px auto;
    text-align: center;
}

.step-tabs {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-bottom: 24px;
}

.step-tab-btn {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 2px solid #cbd5e1;
    background: white;
    color: #475569;
    font-size: 1.25rem;
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition);
    display: grid;
    place-items: center;
}

.step-tab-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.step-tab-btn.active {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
    box-shadow: 0 4px 12px hsla(174, 85%, 35%, 0.3);
}

.step-panel-content {
    background: white;
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
    padding: 32px;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
}

.step-panel-content h3 {
    font-size: 1.4rem;
    font-weight: 800;
    margin-bottom: 12px;
    color: var(--dark);
}

.step-panel-content p {
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1.6;
}

/* FAQ Accordion */
.faq-section {
    padding: 80px 0;
    background: #f8fafc;
    border-top: 1px solid var(--card-border);
}

.faq-categories {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-bottom: 32px;
}

.faq-category-btn {
    padding: 10px 24px;
    border-radius: 99px;
    border: 1.5px solid var(--card-border);
    background: white;
    color: var(--text-muted);
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: var(--transition);
}

.faq-category-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.faq-category-btn.active {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
    box-shadow: 0 4px 12px hsla(174, 85%, 35%, 0.25);
}

.faq-accordion {
    max-width: 768px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.faq-item {
    background: white;
    border: 1.5px solid var(--card-border);
    border-radius: 14px;
    overflow: hidden;
    transition: var(--transition);
}

.faq-item:hover {
    border-color: hsla(174, 85%, 35%, 0.3);
}

.faq-trigger {
    width: 100%;
    padding: 18px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--dark);
    text-align: left;
    transition: var(--transition);
}

.faq-trigger i {
    color: var(--text-muted);
    transition: transform 0.3s ease;
}

.faq-item.active {
    border-color: var(--primary);
}

.faq-item.active .faq-trigger i {
    transform: rotate(45deg);
    color: var(--primary);
}

.faq-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s cubic-bezier(0, 1, 0, 1);
}

.faq-content-inner {
    padding: 0 24px 20px 24px;
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1.6;
}

/* ==========================================================================
   Canva / E-Dijital Davetiye Premium Themes (Şablon 8 & 9)
   ========================================================================== */

/* 1. Zarif Klasik (Template 9) */
.theme-zarif-klasik {
    font-family: 'Playfair Display', serif;
    background-color: #fdfcf7;
    color: #2c2520;
    padding: 60px 28px;
    text-align: center;
    min-height: 100%;
    position: relative;
    overflow: hidden;
    background-image: 
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cpath d='M40 0l40 40-40 40L0 40z' fill='none' stroke='%23c5a880' stroke-width='0.5' stroke-opacity='0.1'/%3E%3Ccircle cx='40' cy='40' r='10' fill='none' stroke='%23c5a880' stroke-width='0.5' stroke-opacity='0.08'/%3E%3C/svg%3E"),
        radial-gradient(circle at center, rgba(255,255,255,1) 0%, rgba(253,251,245,0.98) 100%);
    z-index: 2;
}

.theme-zarif-klasik::before {
    content: '';
    position: absolute;
    top: 15px;
    left: 15px;
    right: 15px;
    bottom: 15px;
    border: 2px solid;
    border-image: linear-gradient(135deg, #b39266 0%, #f3e5cd 50%, #c5a880 100%) 1;
    pointer-events: none;
    z-index: 5;
}

.theme-zarif-klasik::after {
    content: '';
    position: absolute;
    top: 21px;
    left: 21px;
    right: 21px;
    bottom: 21px;
    border: 0.5px dashed rgba(197, 168, 128, 0.5);
    pointer-events: none;
    z-index: 5;
}

/* 2. Klasik Asil (Template 8) */
.theme-klasik-asil {
    font-family: 'Playfair Display', serif;
    background-color: #0b0c10;
    color: #f1f5f9;
    padding: 60px 28px;
    text-align: center;
    min-height: 100%;
    position: relative;
    overflow: hidden;
    background-image: 
        radial-gradient(circle at center, #1e202c 0%, #08090f 100%);
    z-index: 2;
}

.theme-klasik-asil::before {
    content: '';
    position: absolute;
    top: 15px;
    left: 15px;
    right: 15px;
    bottom: 15px;
    border: 2px solid;
    border-image: linear-gradient(135deg, #aa7c11 0%, #ffd700 50%, #b8860b 100%) 1;
    pointer-events: none;
    z-index: 5;
}

.theme-klasik-asil::after {
    content: '';
    position: absolute;
    top: 21px;
    left: 21px;
    right: 21px;
    bottom: 21px;
    border: 0.5px solid rgba(212, 175, 55, 0.4);
    pointer-events: none;
    z-index: 5;
}

.theme-klasik-asil .asil-monogram {
    width: 64px;
    height: 64px;
    margin: 0 auto 20px auto;
    display: grid;
    place-items: center;
    font-size: 1.35rem;
    font-weight: 800;
    position: relative;
    z-index: 6;
    background: radial-gradient(circle at 35% 35%, #ffd700 0%, #aa7c11 100%);
    border: 2px solid #fff;
    border-radius: 50%;
    color: #0b0c10;
    box-shadow: 0 4px 20px rgba(212, 175, 55, 0.45);
}

.theme-klasik-asil .asil-title {
    font-size: 2.2rem;
    font-weight: 700;
    color: #ffd700;
    letter-spacing: 1.5px;
    margin-bottom: 8px;
    text-shadow: 0 0 8px rgba(212, 175, 55, 0.3);
}

.theme-klasik-asil .asil-date {
    font-size: 0.95rem;
    color: #ffd700;
    border-top: 1.5px solid rgba(212, 175, 55, 0.3);
    border-bottom: 1.5px solid rgba(212, 175, 55, 0.3);
    padding: 10px 0;
    margin: 24px 0;
    letter-spacing: 2.5px;
    text-transform: uppercase;
}

.theme-klasik-asil .asil-btn {
    background: linear-gradient(135deg, #aa7c11 0%, #ffd700 50%, #aa7c11 100%);
    color: #0b0c10;
    border: 1px solid #ffd700;
    padding: 12px 28px;
    font-family: 'Playfair Display', serif;
    text-transform: uppercase;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 2px;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(212, 175, 55, 0.25);
    transition: var(--transition);
    border-radius: 4px;
}

.theme-klasik-asil .asil-btn:hover {
    background: #ffffff;
    color: #0b0c10;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(255, 255, 255, 0.25);
}

/* ==========================================================================
   ADVANCED DASHBOARD AND TEMPLATE MANAGEMENT STYLES
   ========================================================================== */

/* Redesign Dashboard Sidebar as a Light Help Panel */
.dashboard-sidebar.help-panel {
    background: #ffffff;
    color: var(--dark);
    border-right: 1px solid var(--card-border);
    padding: 24px 18px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    flex-shrink: 0;
    overflow-y: auto;
}

.help-panel-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--dark);
    padding-bottom: 12px;
    border-bottom: 2px solid var(--primary-light);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.help-panel-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.help-panel-subtitle {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.help-panel-text {
    font-size: 0.82rem;
    color: var(--text-muted);
    line-height: 1.5;
}

.help-panel-list {
    list-style: none;
    padding-left: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.help-panel-list li {
    font-size: 0.8rem;
    color: #475569;
    position: relative;
    padding-left: 18px;
    line-height: 1.4;
}

.help-panel-list li::before {
    content: '•';
    position: absolute;
    left: 4px;
    color: var(--primary);
    font-weight: bold;
    font-size: 1.1rem;
    top: -2px;
}

.whatsapp-support-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #25d366;
    color: white;
    padding: 10px 16px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.85rem;
    text-decoration: none;
    transition: var(--transition);
    box-shadow: 0 4px 10px rgba(37, 211, 102, 0.25);
    border: none;
    cursor: pointer;
    width: 100%;
}

.whatsapp-support-btn:hover {
    background: #20ba59;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(37, 211, 102, 0.35);
}

/* User Profile Card inside Help Panel Sidebar */
.help-sidebar-profile {
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid var(--card-border);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Redesigned Dashboard Action Headers */
.dashboard-actions-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(135deg, hsla(188, 85%, 42%, 0.04) 0%, hsla(174, 85%, 35%, 0.04) 100%);
    border: 1px solid var(--card-border);
    border-radius: 16px;
    padding: 18px 24px;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 16px;
}

.btn-create-invite-premium {
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    color: white !important;
    font-weight: 600;
    border-radius: 10px;
    padding: 10px 20px;
    font-size: 0.92rem;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 15px hsla(174, 85%, 35%, 0.25);
    border: none;
    cursor: pointer;
    transition: var(--transition);
}

.btn-create-invite-premium:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px hsla(174, 85%, 35%, 0.4);
}

.dashboard-filters-row {
    display: flex;
    gap: 8px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.btn-filter-tag {
    border-radius: 99px;
    padding: 6px 14px;
    font-size: 0.78rem;
    font-weight: 600;
    background: white;
    border: 1px solid var(--card-border);
    color: #475569;
    cursor: pointer;
    transition: var(--transition);
}

.btn-filter-tag:hover, .btn-filter-tag.active {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
    box-shadow: 0 4px 10px hsla(174, 85%, 35%, 0.15);
}

/* Card Miniature Phone Frame & Scaled Previews */
.card-preview-area {
    height: 200px;
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
    border-bottom: 1px solid var(--card-border);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 12px;
}

.mini-phone-frame {
    width: 130px;
    height: 175px;
    background: #0f172a;
    border-radius: 14px;
    padding: 4px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25);
    border: 1px solid #334155;
    position: relative;
    box-sizing: border-box;
}

.mini-phone-frame::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 50%;
    transform: translateX(-50%);
    width: 35px;
    height: 3px;
    background: #1e293b;
    border-radius: 99px;
    z-index: 15;
}

.mini-phone-screen {
    width: 100%;
    height: 100%;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    background: white;
    box-sizing: border-box;
}

/* Miniature scaled template styles */
.mini-preview {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 6px;
    text-align: center;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
}

.theme-zarif-klasik-mini {
    background-color: #fdfcf7;
    color: #2c2520;
    border: 1.5px solid #c5a880;
}

.theme-zarif-klasik-mini .mini-monogram {
    width: 24px;
    height: 24px;
    border: 1px solid;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 0.5rem;
    font-weight: 700;
    font-family: 'Playfair Display', serif;
    margin-bottom: 6px;
}

.theme-zarif-klasik-mini .mini-title {
    font-family: 'Great Vibes', cursive;
    font-size: 0.85rem;
    line-height: 1.1;
}

.theme-zarif-klasik-mini .mini-border-decor {
    position: absolute;
    top: 3px;
    left: 3px;
    right: 3px;
    bottom: 3px;
    border: 0.5px dashed rgba(197, 168, 128, 0.4);
    pointer-events: none;
}

.theme-klasik-asil-mini {
    background: radial-gradient(circle at center, #1e202c 0%, #08090f 100%);
    color: #f1f5f9;
    border: 1.5px solid #ffd700;
}

.theme-klasik-asil-mini .mini-monogram-asil {
    width: 24px;
    height: 24px;
    background: radial-gradient(circle at 35% 35%, #ffd700 0%, #aa7c11 100%);
    border: 1px solid #fff;
    border-radius: 50%;
    color: #0b0c10;
    display: grid;
    place-items: center;
    font-size: 0.5rem;
    font-weight: 700;
    margin-bottom: 6px;
}

.theme-klasik-asil-mini .mini-title-asil {
    font-family: 'Playfair Display', serif;
    font-size: 0.72rem;
    color: #ffd700;
    line-height: 1.1;
    font-weight: 700;
}

.theme-klasik-asil-mini .mini-border-decor-asil {
    position: absolute;
    top: 3px;
    left: 3px;
    right: 3px;
    bottom: 3px;
    border: 0.5px solid rgba(212, 175, 55, 0.3);
    pointer-events: none;
}

.theme-royal-mini {
    background: linear-gradient(135deg, #fbf7f0, #eae1d4);
    border: 1.5px solid #b89765;
    color: #2c2520;
}
.theme-royal-mini .mini-monogram {
    width: 20px;
    height: 20px;
    border: 1px solid;
    border-radius: 50%;
    font-size: 0.45rem;
    display: grid;
    place-items: center;
    margin-bottom: 4px;
}
.theme-royal-mini .mini-title {
    font-size: 0.65rem;
    font-family: 'Great Vibes', cursive;
}

.theme-neon-mini {
    background-color: #0c081c;
    border: 1.5px solid #ff007f;
    color: #fff;
}
.theme-neon-mini .mini-icon-neon {
    font-size: 0.7rem;
    margin-bottom: 4px;
}
.theme-neon-mini .mini-title-neon {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.58rem;
    font-weight: 700;
}

.theme-retro-mini {
    background-color: #fffbeb;
    border: 1.5px solid #000;
    color: #000;
}
.theme-retro-mini .mini-title-retro {
    font-family: sans-serif;
    font-size: 0.6rem;
    font-weight: 800;
    padding: 2px;
    border: 1px solid #000;
}

.theme-boho-mini {
    background-color: #faf8f5;
    border: 1.5px solid #8e9a82;
    color: #4b5243;
}
.theme-boho-mini .mini-title-boho {
    font-size: 0.6rem;
    font-weight: 600;
}

.theme-moody-mini {
    background: #23122c;
    border: 1.5px solid #b392ac;
    color: #eae5eb;
}
.theme-moody-mini .mini-title-moody {
    font-family: 'Playfair Display', serif;
    font-size: 0.65rem;
}

.theme-pastel-mini {
    background: linear-gradient(135deg, #ffe4e6, #f3e8ff);
    border: 1.5px solid #f43f5e;
    color: #4c0519;
}
.theme-pastel-mini .mini-title-pastel {
    font-size: 0.65rem;
    font-weight: 600;
}

.theme-vintage-mini {
    background: #fbf7ec;
    border: 1.5px solid #8c6a5c;
    color: #473229;
}
.theme-vintage-mini .mini-title-vintage {
    font-family: monospace;
    font-size: 0.6rem;
}

.theme-classic-mini {
    background: #ffffff;
    border: 1.5px solid #cbd5e1;
    color: #334155;
}
.theme-classic-mini .mini-title-classic {
    font-size: 0.65rem;
    font-weight: 500;
}

/* Three-dot dropdown menu on cards */
.card-menu-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid var(--card-border);
    display: grid;
    place-items: center;
    cursor: pointer;
    z-index: 10;
    transition: var(--transition);
}

.card-menu-btn:hover {
    background: #f1f5f9;
}

.card-menu-dropdown {
    position: absolute;
    top: 40px;
    right: 8px;
    background: white;
    border: 1px solid var(--card-border);
    border-radius: 10px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
    padding: 6px 0;
    z-index: 20;
    width: 145px;
    display: flex;
    flex-direction: column;
}

.card-menu-dropdown.hidden {
    display: none !important;
}

.card-menu-item {
    padding: 8px 14px;
    font-size: 0.76rem;
    color: #334155;
    cursor: pointer;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: none;
    width: 100%;
    font-weight: 500;
    transition: var(--transition);
}

.card-menu-item:hover {
    background: #f8fafc;
    color: var(--primary);
}

.card-menu-item.danger:hover {
    background: #fee2e2;
    color: #ef4444;
}

/* Digital Envelope & Wax Seal Interaction */
.envelope-cover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    box-sizing: border-box;
    transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.7s ease;
    transform: scale(1);
    opacity: 1;
}

.envelope-cover.open {
    transform: scale(1.15);
    opacity: 0;
    pointer-events: none;
}

.envelope-cover.theme-zarif-klasik {
    background-color: #fdfcf7;
    background-image: 
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cpath d='M40 0l40 40-40 40L0 40z' fill='none' stroke='%23c5a880' stroke-width='0.5' stroke-opacity='0.1'/%3E%3Ccircle cx='40' cy='40' r='10' fill='none' stroke='%23c5a880' stroke-width='0.5' stroke-opacity='0.08'/%3E%3C/svg%3E"),
        radial-gradient(circle at center, rgba(255,255,255,1) 0%, rgba(253,251,245,0.98) 100%);
}

.envelope-cover.theme-klasik-asil {
    background-color: #0b0c10;
    background-image: radial-gradient(circle at center, #1e202c 0%, #08090f 100%);
}

.envelope-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    animation: envelope-float 3s ease-in-out infinite alternate;
    width: 100%;
}

@keyframes envelope-float {
    0% { transform: translateY(0px); }
    100% { transform: translateY(-8px); }
}

.envelope-names {
    font-weight: 700;
    letter-spacing: 1px;
}

.wax-seal-wrapper {
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-top: 32px;
    z-index: 1005;
}

.wax-seal {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 1.5rem;
    box-shadow: 0 6px 18px rgba(0,0,0,0.3);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    border: 2px solid rgba(255, 255, 255, 0.25);
}

.wax-seal:hover {
    transform: scale(1.12) rotate(5deg);
}

.wax-seal::after {
    content: '';
    position: absolute;
    top: 4px;
    left: 4px;
    right: 4px;
    bottom: 4px;
    border-radius: 50%;
    border: 1px dashed rgba(255, 255, 255, 0.45);
}

.gold-seal {
    background: radial-gradient(circle at 35% 35%, #ffd700 0%, #c5a880 70%, #aa7c11 100%);
    color: #fff;
    text-shadow: 0 2px 4px rgba(0,0,0,0.25);
}

.red-seal {
    background: radial-gradient(circle at 35% 35%, #ef4444 0%, #b91c1c 70%, #7f1d1d 100%);
    color: #fff;
    text-shadow: 0 2px 4px rgba(0,0,0,0.25);
}

.blue-seal {
    background: radial-gradient(circle at 35% 35%, #06b6d4 0%, #0d9488 70%, #0f766e 100%);
    color: #fff;
}

.purple-seal {
    background: radial-gradient(circle at 35% 35%, #a855f7 0%, #7e22ce 70%, #581c87 100%);
    color: #fff;
}

.seal-click-text {
    font-size: 0.72rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 700;
    color: #64748b;
    animation: pulse-seal 1.5s infinite alternate;
}

@keyframes pulse-seal {
    0% { opacity: 0.6; }
    100% { opacity: 1; }
}

/* ==========================================================================
   DYNAMIC GUEST VIEW FORM THEMES
   ========================================================================== */

/* Dark & Gold Theme (guest-theme-klasik-asil) */
#guest-invite-page.guest-theme-klasik-asil {
    background-color: #08090f !important;
}

#guest-invite-page.guest-theme-klasik-asil .guest-view-wrapper {
    background: transparent;
}

#guest-invite-page.guest-theme-klasik-asil .guest-section-card {
    background: #0f111a;
    border: 1px solid rgba(212, 175, 55, 0.25);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6);
    color: #cbd5e1;
}

#guest-invite-page.guest-theme-klasik-asil .guest-section-title {
    color: #ffd700;
    font-family: 'Playfair Display', serif;
    border-bottom: 1px solid rgba(212, 175, 55, 0.2);
    padding-bottom: 10px;
}

#guest-invite-page.guest-theme-klasik-asil .form-control {
    background-color: #161925;
    border: 1px solid rgba(212, 175, 55, 0.4);
    color: #ffffff;
}

#guest-invite-page.guest-theme-klasik-asil .form-control::placeholder {
    color: #64748b;
}

#guest-invite-page.guest-theme-klasik-asil .form-control:focus {
    border-color: #ffd700;
    box-shadow: 0 0 0 2px rgba(255, 215, 0, 0.15);
}

#guest-invite-page.guest-theme-klasik-asil label {
    color: #94a3b8;
}

#guest-invite-page.guest-theme-klasik-asil .guestbook-entry {
    background: #161925;
    border: 1px solid rgba(212, 175, 55, 0.15);
    color: #e2e8f0;
}

#guest-invite-page.guest-theme-klasik-asil .guestbook-entry-header strong {
    color: #ffd700;
}

#guest-invite-page.guest-theme-klasik-asil .guestbook-entry-header span {
    color: #64748b;
}

#guest-invite-page.guest-theme-klasik-asil .btn-primary {
    background: linear-gradient(135deg, #aa7c11 0%, #ffd700 50%, #aa7c11 100%);
    border: 1px solid #ffd700;
    color: #0b0c10;
    font-weight: 700;
}

#guest-invite-page.guest-theme-klasik-asil .btn-primary:hover {
    background: #ffffff;
    border-color: #ffffff;
    color: #0b0c10;
}

#guest-invite-page.guest-theme-klasik-asil .btn-secondary {
    background: transparent;
    border: 1px solid rgba(212, 175, 55, 0.5);
    color: #ffd700;
}

#guest-invite-page.guest-theme-klasik-asil .btn-secondary:hover {
    background: #ffd700;
    border-color: #ffd700;
    color: #0b0c10;
}

/* Ivory & Gold Theme (guest-theme-zarif-klasik) */
#guest-invite-page.guest-theme-zarif-klasik {
    background-color: #f5f1eb !important;
}

#guest-invite-page.guest-theme-zarif-klasik .guest-view-wrapper {
    background: transparent;
}

#guest-invite-page.guest-theme-zarif-klasik .guest-section-card {
    background: #fdfcf7;
    border: 1px solid rgba(197, 168, 128, 0.35);
    box-shadow: 0 6px 20px rgba(197, 168, 128, 0.08);
    color: #2c2520;
}

#guest-invite-page.guest-theme-zarif-klasik .guest-section-title {
    color: #b39266;
    font-family: 'Playfair Display', serif;
    border-bottom: 1px solid rgba(197, 168, 128, 0.25);
    padding-bottom: 10px;
}

#guest-invite-page.guest-theme-zarif-klasik .form-control {
    background-color: #ffffff;
    border: 1px solid rgba(197, 168, 128, 0.45);
    color: #2c2520;
}

#guest-invite-page.guest-theme-zarif-klasik .form-control:focus {
    border-color: #b39266;
    box-shadow: 0 0 0 2px rgba(179, 146, 102, 0.1);
}

#guest-invite-page.guest-theme-zarif-klasik label {
    color: #5c524b;
}

#guest-invite-page.guest-theme-zarif-klasik .guestbook-entry {
    background: #faf8f5;
    border: 1px solid rgba(197, 168, 128, 0.2);
    color: #2c2520;
}

#guest-invite-page.guest-theme-zarif-klasik .guestbook-entry-header strong {
    color: #b39266;
}

#guest-invite-page.guest-theme-zarif-klasik .guestbook-entry-header span {
    color: #8c827a;
}

#guest-invite-page.guest-theme-zarif-klasik .btn-primary {
    background: linear-gradient(135deg, #b39266 0%, #c5a880 100%);
    border: 1px solid #b39266;
    color: #ffffff;
    font-weight: 700;
}

#guest-invite-page.guest-theme-zarif-klasik .btn-primary:hover {
    background: #2c2520;
    border-color: #2c2520;
}

#guest-invite-page.guest-theme-zarif-klasik .btn-secondary {
    background: transparent;
    border: 1px solid #b39266;
    color: #b39266;
}

#guest-invite-page.guest-theme-zarif-klasik .btn-secondary:hover {
    background: #b39266;
    color: #ffffff;
}

/* Neon Guest Theme Layout adaptation */
#guest-invite-page.guest-theme-neon {
    background-color: #090514 !important;
}

#guest-invite-page.guest-theme-neon .guest-view-wrapper {
    background: transparent;
}

#guest-invite-page.guest-theme-neon .guest-section-card {
    background: rgba(26, 15, 46, 0.7);
    border: 1px solid var(--primary-light);
    color: #ffffff;
    backdrop-filter: blur(10px);
    box-shadow: 0 8px 32px rgba(147, 51, 234, 0.15);
}

#guest-invite-page.guest-theme-neon .guest-section-title {
    color: var(--primary-light);
    font-family: 'Orbitron', sans-serif;
    border-bottom: 1px solid rgba(6, 182, 212, 0.2);
    padding-bottom: 10px;
}

#guest-invite-page.guest-theme-neon .form-control {
    background-color: rgba(9, 5, 20, 0.8);
    border: 1px solid var(--primary-light);
    color: #ffffff;
}

#guest-invite-page.guest-theme-neon .form-control:focus {
    border-color: #ff007f;
    box-shadow: 0 0 10px rgba(255, 0, 127, 0.4);
}

#guest-invite-page.guest-theme-neon label {
    color: #cbd5e1;
}

#guest-invite-page.guest-theme-neon .guestbook-entry {
    background: rgba(9, 5, 20, 0.6);
    border: 1px solid rgba(6, 182, 212, 0.2);
    color: #f1f5f9;
}

#guest-invite-page.guest-theme-neon .guestbook-entry-header strong {
    color: var(--primary-light);
}

#guest-invite-page.guest-theme-neon .btn-primary {
    background: transparent;
    border: 1.5px solid var(--primary-light);
    color: var(--primary-light);
    font-weight: 700;
}

#guest-invite-page.guest-theme-neon .btn-primary:hover {
    background: var(--primary-light);
    color: #090514;
    box-shadow: 0 0 15px var(--primary-light);
}

#guest-invite-page.guest-theme-neon .btn-secondary {
    background: transparent;
    border: 1.5px solid #ff007f;
    color: #ff007f;
}

#guest-invite-page.guest-theme-neon .btn-secondary:hover {
    background: #ff007f;
    color: #ffffff;
    box-shadow: 0 0 15px #ff007f;
}

/* ==========================================================================
   FEATURES PAGE STYLES (#features-page)
   ========================================================================== */
.features-container {
    padding: 80px 0 100px 0;
    position: relative;
    overflow: hidden;
}

.features-bg-glow-left {
    position: absolute;
    width: 450px;
    height: 450px;
    background: radial-gradient(circle, hsla(174, 85%, 35%, 0.12) 0%, transparent 70%);
    top: -10%;
    left: -15%;
    pointer-events: none;
    z-index: 0;
}

.features-bg-glow-right {
    position: absolute;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, hsla(188, 85%, 42%, 0.1) 0%, transparent 70%);
    bottom: 10%;
    right: -10%;
    pointer-events: none;
    z-index: 0;
}

.features-header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 56px auto;
    position: relative;
    z-index: 1;
}

.features-header h1 {
    font-size: 2.75rem;
    font-weight: 800;
    color: var(--dark);
    letter-spacing: -1px;
    margin-bottom: 16px;
}

.features-header p {
    color: var(--text-muted);
    font-size: 1.15rem;
    line-height: 1.6;
}

.features-grid-large {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 24px;
    position: relative;
    z-index: 1;
    margin-bottom: 80px;
}

.feature-card-premium {
    background: white;
    border: 1.5px solid var(--card-border);
    border-radius: 20px;
    padding: 32px;
    transition: var(--transition);
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
}

.feature-card-premium:hover {
    transform: translateY(-5px);
    border-color: hsla(174, 85%, 35%, 0.25);
    box-shadow: var(--shadow-md), 0 10px 20px -10px hsla(174, 85%, 35%, 0.15);
}

.feature-card-icon-wrapper {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    background: var(--primary-light);
    color: var(--primary);
    display: grid;
    place-items: center;
    font-size: 1.35rem;
    margin-bottom: 24px;
    transition: var(--transition);
}

.feature-card-premium:hover .feature-card-icon-wrapper {
    background: var(--primary);
    color: white;
    transform: scale(1.05);
}

.feature-card-premium h3 {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 12px;
    color: var(--dark);
}

.feature-card-premium p {
    color: var(--text-muted);
    font-size: 0.92rem;
    line-height: 1.6;
}

/* CTA Banner at bottom */
.features-cta-banner {
    background: linear-gradient(135deg, hsla(174, 85%, 35%, 0.08) 0%, hsla(188, 85%, 42%, 0.08) 100%);
    border: 1.5px solid hsla(174, 85%, 35%, 0.2);
    border-radius: 24px;
    padding: 60px 40px;
    text-align: center;
    position: relative;
    overflow: hidden;
    z-index: 1;
    max-width: 900px;
    margin: 0 auto;
}

.features-cta-banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 10% 10%, hsla(188, 85%, 42%, 0.06) 0%, transparent 60%);
    pointer-events: none;
}

.features-cta-banner h2 {
    font-size: 2rem;
    font-weight: 800;
    color: var(--dark);
    margin-bottom: 12px;
}

.features-cta-banner p {
    color: var(--text-muted);
    font-size: 1.1rem;
    margin-bottom: 32px;
}

.features-cta-banner .btn-primary {
    padding: 14px 36px;
    font-size: 1rem;
    border-radius: 99px;
    box-shadow: 0 4px 18px hsla(174, 85%, 35%, 0.3);
}

.features-cta-banner .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px hsla(174, 85%, 35%, 0.45);
}

.features-cta-sublink {
    margin-top: 20px;
    font-size: 0.88rem;
    color: var(--text-muted);
}

.features-cta-sublink a {
    color: var(--primary);
    font-weight: 600;
    text-decoration: underline;
}

.features-cta-sublink a:hover {
    color: var(--primary-hover);
}

/* ==========================================================================
   dijitaldavetiniz BRANDING OVERRIDES
   ========================================================================== */
.logo-img {
    height: 40px;
    width: 40px;
    padding: 3px;
    background: white;
    border-radius: 8px;
    border: 1px solid rgba(0,0,0,0.06);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
    object-fit: contain;
    transition: var(--transition);
}

.logo:hover .logo-img {
    transform: scale(1.05);
}

/* "Diğer Paketler" Section Styles */
.other-packages-section {
    margin-top: 56px;
    padding-top: 48px;
    border-top: 1px dashed var(--card-border);
    text-align: center;
    width: 100%;
}

.other-packages-title {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--dark);
    margin-bottom: 8px;
}

.other-packages-desc {
    color: var(--text-muted);
    font-size: 0.95rem;
    margin-bottom: 32px;
}

.other-packages-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 24px;
    max-width: 960px;
    margin: 0 auto;
}

.other-package-card {
    background: white;
    border: 1.5px solid var(--card-border);
    border-radius: var(--radius);
    padding: 28px;
    text-align: left;
    transition: var(--transition);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 200px;
    box-shadow: var(--shadow-sm);
}

.other-package-card:hover {
    transform: translateY(-4px);
    border-color: hsla(174, 85%, 35%, 0.25);
    box-shadow: var(--shadow-md);
}

.other-package-card h4 {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--dark);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.other-package-card h4 i {
    color: var(--primary);
}

.other-package-card p {
    font-size: 0.85rem;
    color: var(--text-muted);
    line-height: 1.5;
    margin-bottom: 20px;
    flex-grow: 1;
}

.other-package-card .price-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #f1f5f9;
    padding-top: 14px;
    margin-top: auto;
}

.other-package-card .price-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
}

.other-package-card .price-value {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--primary);
}

/* Footer Credit & Instagram Styles */
.footer-credit-text {
    font-size: 0.85rem;
    color: #94a3b8;
    margin-top: 8px;
    font-weight: 500;
    line-height: 1.5;
}

.footer-instagram-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #e1306c !important;
    font-weight: 700;
    font-size: 0.85rem;
    margin-top: 14px;
    transition: var(--transition);
    padding: 8px 18px;
    border-radius: 99px;
    background: rgba(225, 48, 108, 0.08);
    border: 1px solid rgba(225, 48, 108, 0.15);
    text-decoration: none;
}

.footer-instagram-link:hover {
    background: rgba(225, 48, 108, 0.15);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(225, 48, 108, 0.15);
}

.footer-instagram-link i {
    font-size: 1rem;
}

/* ==========================================================================
   ADMIN LOGIN & SETTINGS PANEL STYLES
   ========================================================================== */
.admin-login-card {
    max-width: 450px;
    margin: 80px auto;
    background: white;
    border: 1.5px solid var(--card-border);
    border-radius: var(--radius);
    padding: 40px;
    box-shadow: var(--shadow-md);
    transition: var(--transition);
}

.admin-settings-card {
    max-width: 650px;
    margin: 40px auto;
    background: white;
    border: 1.5px solid var(--card-border);
    border-radius: var(--radius);
    padding: 40px;
    box-shadow: var(--shadow-md);
    transition: var(--transition);
}

.admin-login-card form,
.admin-settings-card form {
    display: flex;
    flex-direction: column;
}