/* NIHAI MIMARI v1.0 - Main Stylesheet */
/* Bu dosya form.css ve test.css'i birleştirir. */

/* ==================== A11Y & UX IMPROVEMENTS (v1.1) ==================== */

/* Skip Link - Klavye navigasyonunda görünür olmalı (WCAG 2.4.1) */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.sr-only:focus,
.sr-only:focus-visible,
a.sr-only:focus {
    position: fixed !important;
    top: 10px !important;
    left: 10px !important;
    z-index: 999999 !important;
    width: auto !important;
    height: auto !important;
    padding: 15px 25px !important;
    margin: 0 !important;
    overflow: visible !important;
    clip: auto !important;
    white-space: nowrap !important;
    background: #000 !important;
    color: #FFD700 !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    border: 2px solid #FFD700 !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5) !important;
}

/* Mobil Countdown Timer düzeltmeleri (375px ve altı) */
@media (max-width: 400px) {
    body.tool-form .countdown-timer {
        gap: 8px !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
    }

    body.tool-form .time-block {
        min-width: 50px !important;
    }

    body.tool-form .time-value {
        font-size: clamp(1.5rem, 5vw, 2rem) !important;
    }

    body.tool-form .time-label {
        font-size: clamp(0.65rem, 2vw, 0.8rem) !important;
    }
}

/* Step kartlerinde sayı badge düzeltmesi */
body.tool-form .step-number {
    position: absolute;
    top: 15px;
    left: 15px;
    z-index: 10;
    background: linear-gradient(145deg, #FFD700, #B8860B);
    color: #000;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.2rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

/* Blue glow efekti yoğunluğu azaltıldı */
body.tool-form .section::before {
    opacity: 0.4 !important;
}

/* ==================== END A11Y & UX IMPROVEMENTS ==================== */

/* --- 0. GLOBAL RESET --- */

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

html {
    scroll-behavior: smooth;
}


/* --- 1. FORM ARACI STİLLERİ (body.tool-form) --- */

body.tool-form {
    --gold-color: #FFD700;
    --primary-color: #FFD700;
    --gold-gradient: linear-gradient(145deg, #FFDE59, #FFD700, #B8860B);
    --text-color: #ffffff;
    --background-color: #0a0a0a;
    --card-background: #191919cc;
    --card-border-color: #ffd7004d;
    --font-main: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

    background: #0A0A0A;
    /* Solid dark background */
    color: var(--text-color);
    font-family: var(--font-main);
    /* Assuming --font-primary should be --font-main based on existing variables */
    line-height: 1.6;
    margin: 0;
    padding: 0;
    min-height: 100vh;
    text-align: center;
    /* Center all content */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

/* Scroll animasyonları animations.css'de tanımlı */

body.tool-form .section {
    padding: clamp(60px, 8vw, 100px) 20px;
    margin: 0 auto;
    border-bottom: none;
    position: relative;
    z-index: 5;
    background-color: var(--background-color);
    clear: both;
    overflow: hidden;
    width: 100%;
    box-sizing: border-box;
}

body.tool-form .section:last-child {
    border-bottom: none;
}

/* Çakışma önleme - Tüm section içi elementler için */
body.tool-form .section>* {
    position: relative;
    z-index: 1;
}

body.tool-form .section .animate-on-scroll {
    position: relative;
    z-index: 1;
}

body.tool-form h1,
body.tool-form h2 {
    font-weight: 700;
    line-height: 1.3;
}

body.tool-form h1 {
    font-size: clamp(2.2rem, 5vw, 3.2rem);
}

body.tool-form h2 {
    font-size: clamp(2rem, 4vw, 2.8rem);
    margin-bottom: 20px;
}

body.tool-form p {
    font-size: clamp(1rem, 2.5vw, 1.1rem);
    line-height: 1.8;
    max-width: 700px;
    margin: 15px auto;
}

body.tool-form em {
    color: var(--gold-color);
    font-style: normal;
    font-weight: 700;
}

body.tool-form .gold-text {
    background: linear-gradient(90deg, #FFD700, #FFA500, #FFD700, #FFA500);
    background-size: 300% 300%;
    animation: form-gradient-shift 3s ease infinite;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

body.tool-form .event-banner {
    background-color: var(--primary-color);
    color: var(--background-color);
    padding: 12px 20px;
    font-weight: 600;
    font-size: clamp(0.85rem, 2.5vw, 1.05rem);
    position: relative;
    z-index: 100;
    text-align: center;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
}

body.tool-form .event-banner p {
    margin: 0;
    padding: 0 10px;
}

body.tool-form .cta-wrapper {
    margin-top: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

/* cta-button styles removed - see form/buttons.css */


/* cta-button pseudo-element styles removed */

body.tool-form .hero-section {
    padding: clamp(60px, 8vw, 100px) 20px;
}

body.tool-form .logo-container .site-logo {
    max-width: 256px;
    max-height: 256px;
    width: 256px;
    height: auto;
}

@media (min-width: 769px) and (max-width: 1024px) {
    body.tool-form .logo-container .site-logo {
        max-width: 192px;
        max-height: 192px;
        width: 192px;
    }
}

@media (max-width: 768px) {
    body.tool-form .logo-container .site-logo {
        max-width: 128px;
        max-height: 128px;
        width: 128px;
    }
}

body.tool-form .countdown-timer {
    display: flex;
    gap: clamp(10px, 4vw, 20px);
    margin: 30px 0;
    justify-content: center;
}

body.tool-form .time-block {
    display: flex;
    flex-direction: column;
}

body.tool-form .time-value {
    font-size: clamp(2rem, 6vw, 2.8rem);
    font-weight: 700;
    transition: transform 0.3s ease;
}

/* Countdown Animation - animations.css'den gelir */
body.tool-form .countdown-flip {
    animation: form-countdown-flip 0.6s ease-in-out;
}

body.tool-form .time-label {
    font-size: clamp(0.8rem, 2.5vw, 1rem);
    text-transform: capitalize;
    color: #ccc;
}

body.tool-form .event-started-title {
    margin: 20px 0 10px 0;
    font-size: clamp(1.2rem, 3vw, 1.5rem);
    font-weight: 700;
    text-align: center;
    color: var(--text-color);
    position: relative;
    z-index: 1;
}

body.tool-form .event-date-display {
    margin-top: 20px;
    font-weight: 600;
    font-size: clamp(0.9rem, 2.5vw, 1rem);
    text-align: center;
    color: var(--text-color);
    position: relative;
    z-index: 1;
}

body.tool-form .event-free-online {
    margin-top: 10px;
    text-align: center;
    position: relative;
    z-index: 1;
    font-size: clamp(1rem, 2.5vw, 1.2rem);
    font-weight: 700;
}

body.tool-form .event-info {
    margin-top: 20px;
    font-weight: 600;
    font-size: clamp(0.9rem, 2.5vw, 1rem);
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 5px;
}

body.tool-form .event-info>span {
    position: relative;
    z-index: 1;
    display: inline-block;
}

body.tool-form .details-section .grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    text-align: left;
    align-items: start;
}

body.tool-form .details-section ul {
    list-style: none;
    padding-left: 0;
    margin-top: 25px;
}

body.tool-form .details-section li {
    padding-left: 30px;
    position: relative;
    margin-bottom: 20px;
    font-size: clamp(0.9rem, 2.5vw, 1rem);
}

body.tool-form .details-section li::before {
    content: '✓';
    color: var(--gold-color);
    position: absolute;
    left: 0;
    top: 2px;
    font-weight: 900;
}

body.tool-form .event-details-card {
    background: var(--card-background);
    border: 1px solid var(--card-border-color);
    border-radius: 20px;
    padding: 30px;
    margin-top: 40px;
    text-align: center;
}

body.tool-form .presenter-visual-container {
    width: clamp(150px, 40vw, 180px);
    height: clamp(150px, 40vw, 180px);
    border-radius: 50%;
    margin: 0 auto 20px auto;
    position: relative;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

body.tool-form .presenter-image-wrapper {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid var(--background-color);
}

body.tool-form .presenter-image-wrapper img,
body.tool-form .presenter-image-wrapper svg {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

body.tool-form .frame-gold-pulse {
    background: var(--gold-gradient);
    /* Pulse animasyonu animations.css'de tanımlı - gerekirse eklenebilir */
}

body.tool-form .presenter-info h3 {
    font-size: clamp(1.5rem, 4vw, 1.8rem);
    margin-bottom: 5px;
}

body.tool-form .presenter-info p {
    margin-top: 0;
    color: #ccc;
}

body.tool-form .steps-section-wrapper {
    position: relative;
    height: 300vh;
    margin-top: 50px;
}

body.tool-form .sticky-container {
    position: sticky;
    top: 0;
    height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

body.tool-form .step-card {
    position: absolute;
    width: 90%;
    max-width: 600px;
    padding: clamp(25px, 5vw, 40px);
    background-color: var(--card-background);
    border: 1px solid var(--card-border-color);
    border-radius: 40px;
    box-shadow: 0 10px 30px #00000080;
    opacity: 0;
    transform: translateY(30px) scale(0.95);
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    min-height: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

body.tool-form .step-card.is-active {
    opacity: 1;
    transform: translateY(0) scale(1);
}

body.tool-form .step-card.is-active:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 20px 50px #ffd7004d, 0 0 40px #ffd70033;
    border-color: #ffd70080;
}

body.tool-form .step-card-visual {
    overflow: hidden;
    border-radius: 15px;
    width: 100%;
}

body.tool-form .step-card-visual img {
    width: 100%;
    height: auto;
    border-radius: 15px;
    border: 1px solid var(--card-border-color);
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

body.tool-form .step-card:hover .step-card-visual img {
    transform: scale(1.1) rotate(2deg);
}

body.tool-form .step-card-content h3 {
    font-size: clamp(1.2rem, 4vw, 2rem);
    margin-top: 0;
    margin-bottom: clamp(10px, 2.5vw, 15px);
    line-height: 1.3;
}

body.tool-form .step-trigger {
    position: absolute;
    left: 0;
    width: 100%;
    height: 1vh;
}

@media (max-width: 768px) {
    body.tool-form .details-section .grid {
        grid-template-columns: 1fr;
    }

    body.tool-form .steps-section-wrapper {
        height: auto;
        margin-top: 80px;
    }

    body.tool-form .sticky-container {
        position: static;
        height: auto;
    }

    body.tool-form .step-card {
        position: static;
        opacity: 1;
        transform: none;
        margin: 0 auto 30px auto;
    }

    body.tool-form .step-trigger {
        display: none;
    }
}

body.tool-form .summary-point {
    background: var(--card-background);
    border-radius: 15px;
    padding: 25px;
    margin-bottom: 20px;
    text-align: left;
    border: 1px solid transparent;
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

body.tool-form .summary-point:hover {
    transform: translateY(-5px);
    border-color: var(--card-border-color);
    box-shadow: 0 5px 25px #ffd7001a;
}



/* Compact all spacing */
.urgency-badge {
    margin: 8px 0 5px 0;
    /* Top margin for spacing from close button */
    padding: 5px 8px;
    font-size: 0.85rem;
}

.trust-badges {
    margin: 5px 0 10px 0;
    /* Bottom margin before form */
}

body.tool-form .form-grid-compact {
    gap: 8px;
    margin-bottom: 8px;
}

body.tool-form .form-group label {
    margin-bottom: 3px;
    font-size: 0.8rem;
}

body.tool-form .form-group input,
body.tool-form .form-group select {
    padding: 7px;
    font-size: 0.9rem;
}

body.tool-form .submit-btn {
    padding: 9px;
    margin-top: 8px;
    font-size: 0.95rem;
}

body.tool-form .privacy-note {
    margin-top: 6px;
    font-size: 0.7rem;
}

body.tool-form .modal-content::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg,
            #ffd7004d,
            #ffa5004d,
            #ffd7004d);
    border-radius: 20px;
    z-index: -1;
    opacity: 0;
    /* Always hidden, no hover effect */
    animation: form-border-rotate 6s linear infinite;
}

/* Modal animasyonları animations.css'de tanımlı */

body.tool-form .modal-header {
    margin-bottom: 10px;
    /* Reduced from 15px */
}

body.tool-form .modal-header h3 {
    margin-bottom: 5px;
    font-size: 1.4rem;
    /* Slightly smaller */
}

body.tool-form .modal-header p {
    margin: 0 0 5px 0;
    /* Reduced spacing */
    font-size: 0.85rem;
}

/* Compact urgency and trust badges */
.urgency-badge {
    margin: 5px 0;
    /* Reduced from 10px */
    padding: 6px 10px;
    /* Reduced from 8px 12px */
    font-size: 0.85rem;
}

.trust-badges {
    margin-top: 5px;
    /* Reduced from 10px */
}

body.tool-form .form-group label {
    margin-bottom: 4px;
    /* Reduced from 6px */
    font-size: 0.85rem;
    /* Smaller */
    text-align: center;
    display: block;
    width: 100%;
}

body.tool-form .form-group input,
body.tool-form .form-group select {
    padding: 8px;
    /* Reduced from 10px */
    font-size: 0.9rem;
    text-align: center;
    /* Optional: Center input text too if desired, but user asked for labels. Let's keep inputs standard or center them? User said "kutucukların üstünde ortalı olsun" (labels centered above boxes). Usually inputs are left aligned. I will keep inputs left aligned for readability unless requested. */
}

body.tool-form .form-grid-compact {
    gap: 10px;
    /* Reduced from 15px */
    margin-bottom: 10px;
    /* Reduced from 20px */
}

/* submit-btn styles removed - see form/buttons.css */

/* submit-btn pseudo-element styles removed */

body.tool-form .privacy-note {
    margin-top: 8px;
    /* Reduced */
    font-size: 0.75rem;
    /* Smaller */
}

body.tool-form .form-grid-compact .span-full {
    grid-column: span 2;
    width: 100%;
}

/* If user wants the phone input specifically centered and not full width, I can adjust. But standard is full width. */

/* Intl Tel Input Styling for Dark Theme */
.iti {
    width: 100%;
    display: block;
}

/* ITI (Intl Tel Input) Override - Daha spesifik selector'lar ile !important kaldırıldı */
body.tool-form.module-form .iti__country-list,
body .iti__country-list {
    background-color: #1a1a1a;
    border: 1px solid var(--gold-color);
    color: #fff;
    z-index: 999999;
    /* Ensure it's on top */
}

body.tool-form.module-form .iti__country,
body .iti__country {
    color: #fff;
    background-color: #1a1a1a;
}

body.tool-form.module-form .iti__country:hover,
body.tool-form.module-form .iti__country.iti__highlight,
body .iti__country:hover,
body .iti__country.iti__highlight {
    background-color: #333;
}

body.tool-form.module-form .iti__country-name,
body .iti__country-name {
    color: #fff;
}

body.tool-form.module-form .iti__dial-code,
body .iti__dial-code {
    color: #aaa;
}

/* Ensure input has correct padding for the flag */
body.tool-form .form-group input[type="tel"] {
    padding-left: 52px !important;
    /* Override ITI default if needed, but ITI usually handles this. Let's trust ITI but ensure color is right */
    background: #1a1a1a;
    color: #fff;
}

/* Enhanced Feedback Box */

/* Animasyonlar animations.css'de tanımlı */

.blur-content {
    filter: blur(4px);
    opacity: 0.3;
    pointer-events: none;
    transition: all 0.5s ease;
}

.invisible-content {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* Animasyonlar animations.css'de tanımlı */

/* Layout Utilities */
.normal-margin {
    margin-bottom: 60px;
}

.large-margin {
    margin-bottom: 100px;
}

.small-margin {
    margin-bottom: 30px;
}

/* Section Backgrounds */
.bg-light {
    background-color: #ffffff;
}

.bg-dark {
    background-color: #f8f9fa;
}

/* Borders */
.border-none {
    border: none;
}

.border-thin {
    border: 1px solid #e9ecef;
}

.border-glow {
    border: 1px solid #d4af374d;
    box-shadow: 0 0 15px #d4af371a;
}

/* Mobile Responsiveness Enhancements */
@media (max-width: 768px) {
    .hero-section {
        text-align: center !important;
        /* Force center on mobile usually looks better */
        padding: 40px 20px;
    }

    .hero-section h1 {
        font-size: 2rem;
    }

    .normal-margin {
        margin-bottom: 40px;
    }

    .large-margin {
        margin-bottom: 60px;
    }

    /* Ensure images are responsive */
    img {
        max-width: 100%;
        height: auto;
    }
}

/* Scroll animasyonları animations.css'de tanımlı */


/* --- 2. TEST ARACI STİLLERİ --- */
/* TEST STİLLERİ test.css DOSYASINA TAŞINDI - Burada kaldırıldı (tekrar önlendi) */


/* ========================================== */

body.tool-test .container {
    max-width: 100%;
    margin: 0 auto;
    padding: 20px;
    background-color: var(--beyaz);
    flex-grow: 1;
}

body.tool-test header {
    text-align: center;
    padding: 30px 20px;
    margin-bottom: 30px;
    background: linear-gradient(135deg, var(--header-bg-start), var(--header-bg-end));
    color: var(--header-text);
    border-radius: 10px;
    box-shadow: 0 4px 15px #0000001a;
}

body.tool-test h1 {
    font-size: clamp(1.7rem, 4vw, 2.0rem);
    margin-bottom: 10px;
    font-weight: 600;
}

body.tool-test header p {
    font-size: clamp(0.9rem, 2.5vw, 1rem);
    opacity: 0.9;
}

body.tool-test .intro {
    text-align: center;
    margin-bottom: 30px;
    padding: 0 20px;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

body.tool-test .intro p {
    margin-bottom: 15px;
    line-height: 1.8;
}

body.tool-test .intro strong {
    font-weight: 600;
    color: var(--ana-vurgu);
}

body.tool-test .user-info-form {
    background-color: var(--beyaz);
    padding: 25px;
    border-radius: 10px;
    margin-bottom: 15px;
    box-shadow: 0 2px 10px #0000000d;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

body.tool-test .user-info-form h2 {
    color: var(--ana-vurgu);
    margin-bottom: 20px;
    font-size: 1.5rem;
    text-align: center;
}

body.tool-test #personalInfoText {
    margin-bottom: 20px;
    text-align: center;
}

body.tool-test .form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

body.tool-test .form-group {
    margin-bottom: 15px;
}

body.tool-test .form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: var(--koyu-gri);
}

body.tool-test .form-group input,
.form-group select {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-family: inherit;
    font-size: 1rem;
    transition: all 0.3s;
}

body.tool-test .form-group input:focus,
.form-group select:focus {
    border-color: var(--ana-vurgu);
    outline: none;
    box-shadow: 0 0 0 3px rgba(var(--gold-dark-rgb), 0.2);
}

body.tool-test .form-error {
    color: var(--kirmizi);
    font-size: 0.8rem;
    margin-top: 5px;
    display: none;
}

body.tool-test .form-group input:invalid+.form-error,
body.tool-test .form-group select:invalid+.form-error {
    display: block;
}

body.tool-test .form-group.error .form-error {
    display: block;
}

body.tool-test .start-test-btn {
    display: block;
    width: 100%;
    max-width: 300px;
    margin: 20px auto 0;
    padding: 15px 25px;
    background-color: var(--ana-vurgu);
    color: var(--gold-text-dark);
    border: none;
    border-radius: 20px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 4px 10px rgba(var(--gold-dark-rgb), 0.3);
}

body.tool-test .start-test-btn:hover {
    background-color: var(--gold-dark);
    color: var(--gold-text-light);
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(var(--gold-dark-rgb), 0.4);
}

body.tool-test .start-test-btn:disabled {
    background-color: var(--gri);
    color: var(--beyaz);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

body.tool-test .test-container {
    display: none;
    flex-direction: column;
    gap: 20px;
    margin-top: 30px;
    margin-bottom: 40px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

body.tool-test .question {
    background-color: var(--beyaz);
    padding: 25px;
    border-radius: 10px;
    box-shadow: 0 2px 10px #0000000d;
    transition: all 0.3s ease;
    position: relative;
}

body.tool-test .question:hover {
    box-shadow: 0 5px 15px #0000001a;
    transform: translateY(-3px);
}

body.tool-test .question-text {
    font-weight: 600;
    margin-bottom: 20px;
    font-size: 1.1rem;
    color: var(--siyah);
    text-align: center;
}

body.tool-test .options {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

body.tool-test .option {
    padding: 15px 50px 15px 55px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s;
    position: relative;
    background-color: var(--beyaz);
    text-align: left;
}

body.tool-test .option:hover {
    background-color: #f8f9fa;
    border-color: var(--ana-vurgu);
}

body.tool-test .option.selected-xx {
    border: 2px solid var(--ana-vurgu);
    background-color: rgba(var(--gold-dark-rgb), 0.1);
}

body.tool-test .option.selected-x {
    border: 1px solid var(--ana-vurgu);
    background-color: rgba(var(--gold-dark-rgb), 0.05);
}

body.tool-test .option-letter {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    background-color: var(--koyu-gri);
    color: white;
    border-radius: 20%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 14px;
}

body.tool-test .option.selected-xx .option-letter,
.option.selected-x .option-letter {
    background-color: var(--ana-vurgu);
}

body.tool-test .option-points {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.8rem;
    color: var(--ana-vurgu);
    padding: 3px 8px;
    background-color: rgba(var(--gold-dark-rgb), 0.1);
    border-radius: 12px;
    font-weight: bold;
}

body.tool-test .option.disabled {
    opacity: 0.5;
    pointer-events: none;
}

body.tool-test .selection-instruction {
    font-size: 0.7rem;
    color: var(--koyu-gri);
    margin-top: 10px;
    font-style: italic;
    text-align: center;
}

body.tool-test .submit-btn {
    display: none;
    width: 100%;
    max-width: 300px;
    margin: 30px auto 0;
    padding: 15px 25px;
    background-color: var(--ana-vurgu);
    color: var(--gold-text-dark);
    border: none;
    border-radius: 20px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 4px 10px rgba(var(--gold-dark-rgb), 0.3);
}

body.tool-test .submit-btn:hover {
    background-color: var(--gold-dark);
    color: var(--gold-text-light);
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(var(--gold-dark-rgb), 0.4);
}

body.tool-test .submit-btn:disabled {
    background-color: var(--gri);
    color: var(--beyaz);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

body.tool-test .submit-note {
    display: none;
    text-align: center;
    margin-top: 15px;
    margin-bottom: 20px;
    font-size: 0.9rem;
    color: var(--koyu-gri);
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 20px;
}

body.tool-test .submit-note strong span {
    color: var(--kirmizi);
    font-weight: bold;
}

body.tool-test .result-container {
    display: none;
    padding: 30px;
    background-color: var(--beyaz);
    border-radius: 10px;
    box-shadow: 0 0 20px #0000001a;
    margin-top: 30px;
    animation: fadeIn 0.5s ease;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

body.tool-test .result-title {
    text-align: center;
    color: var(--ana-vurgu);
    margin-bottom: 30px;
    font-size: 1.8rem;
}

body.tool-test .user-info-display {
    background-color: var(--acik-gri);
    padding: 20px;
    border-radius: 10px;
    margin-bottom: 30px;
}

body.tool-test .user-info-display h3 {
    color: var(--ana-vurgu);
    margin-bottom: 15px;
    text-align: center;
}

body.tool-test .user-info-row {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 10px;
    justify-content: center;
}

body.tool-test .user-info-item {
    background-color: var(--beyaz);
    padding: 10px 15px;
    border-radius: 8px;
    box-shadow: 0 1px 3px #0000000d;
    text-align: left;
    flex-basis: 220px;
    flex-grow: 1;
}

body.tool-test .user-info-item strong {
    color: var(--koyu-gri);
    margin-right: 5px;
}

body.tool-test .test-date {
    margin-top: 15px;
    font-size: 0.9rem;
    color: var(--koyu-gri);
    width: 100%;
    text-align: center;
}

body.tool-test .answers-summary {
    margin-top: 0;
    margin-bottom: 30px;
    background-color: var(--acik-gri);
    padding: 25px;
    border-radius: 10px;
}

body.tool-test .answers-summary h3 {
    color: var(--ana-vurgu);
    margin-bottom: 20px;
    text-align: center;
}

body.tool-test .answers-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    text-align: center;
}

body.tool-test .answer-item {
    background-color: var(--beyaz);
    padding: 10px;
    border-radius: 8px;
    box-shadow: 0 2px 5px #0000000d;
    font-size: 0.9rem;
    flex-basis: calc(20% - 10px);
    max-width: 120px;
    min-width: 80px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

body.tool-test .answer-question {
    font-weight: 600;
    margin-bottom: 5px;
}

body.tool-test .answer-options {
    font-size: 0.8rem;
}

body.tool-test .contact-note {
    background-color: var(--acik-gri);
    padding: 25px;
    border-radius: 10px;
    margin-bottom: 30px;
    text-align: center;
}

body.tool-test .contact-note h3 {
    color: var(--ana-vurgu);
    margin-bottom: 15px;
    font-size: 1.3rem;
}

body.tool-test .contact-note p {
    margin-bottom: 15px;
}

body.tool-test .action-buttons {
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
}

body.tool-test .action-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    border: none;
    border-radius: 50px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    font-size: 0.9rem;
}

body.tool-test .action-btn svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

body.tool-test .whatsapp-btn {
    background-color: #25D366;
    color: white;
}

body.tool-test .whatsapp-btn:hover {
    background-color: #128C7E;
}

body.tool-test .screenshot-btn {
    background-color: var(--gold-light);
    color: var(--gold-text-dark);
}

body.tool-test .screenshot-btn:hover {
    background-color: var(--gold-medium);
    color: var(--gold-text-light);
}

body.tool-test .download-btn {
    background-color: var(--ana-vurgu);
    color: var(--gold-text-dark);
}

body.tool-test .download-btn:hover {
    background-color: var(--gold-dark);
    color: var(--gold-text-light);
}

body.tool-test .restart-btn {
    background-color: var(--koyu-gri);
    color: white;
}

body.tool-test .restart-btn:hover {
    background-color: #5a6268;
}

body.tool-test .action-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px #0000001a;
}

body.tool-test .modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #000000cc;
    overflow: auto;
}

body.tool-test .modal-content {
    background-color: var(--beyaz);
    margin: 5% auto;
    padding: 20px;
    border-radius: 10px;
    max-width: 90%;
    max-height: 90%;
    overflow: auto;
    position: relative;
}

body.tool-test .close-modal {
    position: absolute;
    top: 10px;
    right: 20px;
    color: var(--siyah);
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

body.tool-test .close-modal:hover {
    color: var(--kirmizi);
}



body.tool-test .modal-actions {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 20px;
}

body.tool-test .modal-btn {
    padding: 10px 20px;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s;
}

body.tool-test .modal-cancel-btn {
    background-color: var(--gri);
    color: white;
}

body.tool-test .modal-download-btn {
    background-color: var(--ana-vurgu);
    color: var(--gold-text-dark);
}

body.tool-test .modal-download-btn:hover {
    background-color: var(--gold-dark);
    color: var(--gold-text-light);
}

body.tool-test footer {
    background: linear-gradient(135deg, var(--footer-bg-start), var(--footer-bg-end));
    color: var(--footer-text);
    text-align: center;
    padding: 25px 20px;
    font-size: clamp(0.8rem, 2.5vw, 0.9rem);
    width: 100%;
    margin-top: auto;
}

body.tool-test footer .contact-links {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 15px;
}

body.tool-test footer .contact-links a {
    color: var(--footer-text);
    text-decoration: none;
    border-bottom: 1px dotted var(--footer-text);
    transition: color 0.3s, border-bottom-color 0.3s;
}

body.tool-test footer .contact-links .link-separator {
    margin: 0 10px;
    color: var(--footer-text);
    opacity: 0.8;
}

body.tool-test footer .contact-links a:hover {
    color: var(--gold-light);
    border-bottom-color: var(--gold-light);
}

body.tool-test footer .copyright {
    margin-top: 0;
    font-size: 0.85em;
    opacity: 0.9;
}

@media (max-width: 768px) {
    body.tool-test .container {
        padding: 15px;
    }

    body.tool-test header,
    body.tool-test footer {
        padding: 20px 15px;
    }

    body.tool-test h1 {
        font-size: 1.6rem;
    }

    body.tool-test .question {
        padding: 20px;
    }

    body.tool-test .user-info-item {
        flex-basis: 100%;
        text-align: center;
    }

    body.tool-test .user-info-item strong {
        display: block;
        margin-bottom: 3px;
    }

    body.tool-test .action-buttons {
        flex-direction: column;
        align-items: center;
    }

    body.tool-test .action-btn {
        width: 100%;
        max-width: 300px;
        justify-content: center;
    }

    body.tool-test .answers-grid .answer-item {
        flex-basis: calc(33.33% - 10px);
    }

    body.tool-test .form-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    body.tool-test .answers-grid .answer-item {
        flex-basis: calc(50% - 10px);
    }

    body.tool-test .option {
        padding-left: 50px;
    }

    body.tool-test .option-letter {
        left: 10px;
    }

    body.tool-test footer .contact-links {
        flex-direction: column;
        gap: 10px;
    }

    body.tool-test footer .contact-links .link-separator {
        display: none;
    }

    body.tool-test footer .contact-links a {
        margin: 0;
    }
}

body.tool-test .welcome-popup-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000000bf;
    z-index: 2000;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

body.tool-test .welcome-popup-content {
    background-color: var(--popup-bg);
    padding: 30px 25px;
    border-radius: 15px;
    border: 2px solid var(--gold-light);
    box-shadow: 0 8px 30px rgba(var(--gold-dark-rgb), 0.25);
    text-align: center;
    position: relative;
    width: 100%;
    max-width: 560px;
    min-width: 280px;
    max-height: 90vh;
    overflow-y: auto;
    animation: welcomePopupScaleIn 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
}

@keyframes welcomePopupScaleIn {
    from {
        opacity: 0;
        transform: scale(0.85) translateY(-10px);
    }

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

body.tool-test .welcome-popup-content h2 {
    margin-top: 0;
    margin-bottom: 20px;
    color: var(--ana-vurgu);
    font-size: clamp(1.3rem, 4.5vw, 1.7rem);
    font-weight: 700;
}

body.tool-test .welcome-popup-content p {
    color: var(--siyah);
    margin-bottom: 18px;
    font-size: clamp(0.85rem, 2.8vw, 0.95rem);
    line-height: 1.65;
    text-align: center;
}

body.tool-test .welcome-popup-content p.sub-heading {
    font-weight: 600;
    color: var(--gold-dark);
    margin-top: 20px;
    font-size: clamp(0.9rem, 3vw, 1rem);
}

body.tool-test .welcome-popup-content strong {
    color: var(--ana-vurgu);
    font-weight: 600;
}

body.tool-test .welcome-popup-content ol,
body.tool-test .welcome-popup-content ul {
    text-align: center;
    list-style-position: inside;
    padding-left: 0;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 18px;
    max-width: 90%;
}

body.tool-test .welcome-popup-content ol li,
body.tool-test .welcome-popup-content ul li {
    margin-bottom: 10px;
    font-size: clamp(0.8rem, 2.5vw, 0.9rem);
}

body.tool-test .welcome-popup-content ul ul {
    margin-top: 8px;
    margin-bottom: 10px;
    padding-left: 0;
}

body.tool-test .welcome-popup-content ul ul li {
    font-size: clamp(0.75rem, 2.3vw, 0.85rem);
}

body.tool-test .welcome-popup-close-button {
    position: absolute;
    top: 15px;
    right: 15px;
    font-size: 28px;
    font-weight: 300;
    color: var(--koyu-gri);
    cursor: pointer;
    border: none;
    background: none;
    padding: 5px;
    line-height: 1;
    transition: color 0.3s, transform 0.2s;
}

body.tool-test .welcome-popup-close-button:hover {
    color: var(--kirmizi);
    transform: scale(1.1);
}

body.tool-test .welcome-popup-action-button {
    display: inline-block;
    padding: 14px 30px;
    background-image: linear-gradient(135deg, var(--gold-light), var(--ana-vurgu));
    color: var(--gold-text-dark);
    border: none;
    border-radius: 25px;
    font-size: clamp(0.95rem, 3.2vw, 1.1rem);
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(var(--gold-dark-rgb), 0.3);
    margin-top: 15px;
}

body.tool-test .welcome-popup-action-button:hover {
    background-image: linear-gradient(135deg, var(--ana-vurgu), var(--gold-dark));
    color: var(--gold-text-light);
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 6px 20px rgba(var(--gold-dark-rgb), 0.4);
}

body.tool-test .welcome-popup-action-button:active {
    transform: translateY(-1px) scale(0.98);
    box-shadow: 0 2px 10px rgba(var(--gold-dark-rgb), 0.3);
}

body.tool-test .welcome-popup-overlay.show {
    display: flex;
}


/* ========================================== */
/* === ADMIN PANEL STYLES (Merged) === */
/* ========================================== */

/* --- 1. GENEL STİLLER --- */
body {
    background-color: #f4f7f6;
}

/* --- 2. ANA PANEL STİLLERİ --- */
/* NOT: .nav-tabs ve .card-header stilleri admin-utilities.css'de tanımlı - tekrar kaldırıldı */

/* --- 3. GİRİŞ SAYFASI STİLLERİ --- */
.login-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 20px;
}

.login-card {
    max-width: 400px;
    width: 100%;
    border: 1px solid #dee2e6;
    box-shadow: 0 0.5rem 1rem #0000001a;
    border-radius: 0.5rem;
}

/* .card-header-custom stilleri admin-utilities.css'de tanımlı - tekrar kaldırıldı */

.toggle-password {
    cursor: pointer;
    background: none;
    border: none;
    color: #6c757d;
    padding: 0 10px;
    height: 100%;
    display: flex;
    align-items: center;
}

/* Giriş formundaki şifre gösterme butonu için kenarlık ayarı */
.login-card .input-group-append {
    border: 1px solid #ced4da;
    border-left: none;
}

/* 5 BÖLÜM LANDING PAGE CSS */
body.tool-form .pain-section {
    padding: 80px 20px;
    background: linear-gradient(180deg, #0a0a0a 0%, #1a1a1a 100%);
}

body.tool-form .pain-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

body.tool-form .pain-card {
    background: var(--card-background);
    border: 2px solid var(--card-border-color);
    border-radius: 20px;
    padding: 40px 30px;
}

body.tool-form .pain-icon {
    font-size: 4rem;
    margin-bottom: 20px;
}

body.tool-form .stats-section-v2 {
    padding: clamp(60px, 8vw, 100px) 20px;
    background: #0A0A0A;
}

body.tool-form .stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 40px;
    max-width: 1000px;
    margin: 0 auto;
}

body.tool-form .stat-card {
    background: var(--card-background);
    border: 2px solid var(--card-border-color);
    border-radius: 20px;
    padding: 50px 30px;
}

body.tool-form .stat-number {
    font-size: 4rem;
    font-weight: bold;
    color: var(--gold-color);
}

body.tool-form .final-call-v2 {
    padding: clamp(60px, 8vw, 100px) 20px;
    background: #0A0A0A;
}

body.tool-form .choice-container {
    display: flex;
    gap: 30px;
    max-width: 1000px;
    margin: 0 auto;
}

/* Flip Card Container */
body.tool-form .choice-box {
    flex: 1;
    min-height: 280px;
    position: relative;
    perspective: 1000px;
    cursor: pointer;
}

/* Flip Card Inner */
body.tool-form .choice-box::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    transform-style: preserve-3d;
    transition: transform 0.8s cubic-bezier(0.4, 0.0, 0.2, 1);
    border-radius: 20px;
}

body.tool-form .choice-box:hover::after {
    transform: rotateY(180deg);
}

/* Kırmızı Kart - Geçmişin Tekrarı */
body.tool-form .choice-old {
    background: linear-gradient(135deg, #c0392b 0%, #8e24aa 100%);
    background-image:
        linear-gradient(135deg, #c0392b 0%, #8e24aa 100%),
        repeating-linear-gradient(45deg, transparent, transparent 10px, #ffffff0d 10px, #ffffff0d 20px);
    border: 2px solid #ff646499;
    border-radius: 20px;
    padding: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.4s ease;
}

body.tool-form .choice-old:hover {
    border-color: rgba(255, 100, 100, 1);
    box-shadow: 0 20px 60px rgba(192, 57, 43, 0.6);
    transform: scale(1.02);
    cursor: pointer;
}

body.tool-form .choice-old:active {
    transform: scale(0.98);
}

/* Mavi Kart - Geleceğin Mimarı */
body.tool-form .choice-new {
    background: linear-gradient(135deg, #2980b9 0%, #1abc9c 100%);
    background-image:
        linear-gradient(135deg, #2980b9 0%, #1abc9c 100%),
        repeating-linear-gradient(-45deg, transparent, transparent 10px, #ffffff0d 10px, #ffffff0d 20px);
    border: 2px solid rgba(100, 200, 255, 0.6);
    border-radius: 20px;
    padding: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.4s ease;
}

body.tool-form .choice-new:hover {
    border-color: rgba(100, 200, 255, 1);
    box-shadow: 0 20px 60px rgba(41, 128, 185, 0.6);
    transform: scale(1.02);
}

/* Ön Yüz - Sadece Hap */
body.tool-form .choice-box p {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    backface-visibility: hidden;
    border-radius: 20px;
    margin: 0;
    padding: 40px;
    box-sizing: border-box;
    font-size: 0;
    color: transparent;
    opacity: 1;
    transform: scale(1);
    transition: all 0.6s cubic-bezier(0.4, 0.0, 0.2, 1);
    white-space: pre-line;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

body.tool-form .choice-box p::before {
    content: '💊';
    font-size: 5rem;
    filter: drop-shadow(0 0 20px currentColor);
    animation: form-float-pill 3s ease-in-out infinite;
    transition: all 0.6s ease;
}

/* Kırmızı hap rengi */
body.tool-form .choice-old p::before {
    color: #ff6b6b;
    filter: drop-shadow(0 0 20px rgba(192, 57, 43, 0.8));
}

/* Mavi hap rengi */
body.tool-form .choice-new p::before {
    color: #4ecdc4;
    filter: drop-shadow(0 0 20px rgba(41, 128, 185, 0.8));
}

/* Hover'da metni göster - Yavaş yavaş açılma */
body.tool-form .choice-box:hover p {
    font-size: 1.1rem;
    color: white;
    text-shadow: 2px 2px 10px #00000080;
    line-height: 1.6;
    opacity: 1;
    transform: scale(1.05);
    font-weight: 600;
    display: flex;
    justify-content: center;
    align-items: center;
}

body.tool-form .choice-box:hover p::before {
    content: '';
    font-size: 0;
    opacity: 0;
    transform: scale(0);
}

/* Animasyonlar animations.css'de tanımlı */

/* Duplicate modal-overlay definition removed - using unified definition above (line 662) */

body.tool-form .modal-close {
    position: absolute;
    top: clamp(15px, 3vw, 20px);
    right: clamp(15px, 3vw, 20px);
    font-size: clamp(1.5rem, 5vw, 2rem);
    width: clamp(32px, 8vw, 40px);
    height: clamp(32px, 8vw, 40px);
    background: transparent;
    border: none;
    color: var(--gold-color);
    font-size: 2rem;
    cursor: pointer;
}

body.tool-form .form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}

body.tool-form .form-group input,
body.tool-form .form-group select {
    width: 100%;
    padding: 12px;
    background: #00000080;
    border: 1px solid #ffd7004d;
    border-radius: 8px;
    color: #fff;
}

body.tool-form .form-group.error input {
    border-color: #ff6b6b;
}

body.tool-form .error-message {
    display: none;
    color: #ff6b6b;
    font-size: 0.85rem;
    margin-top: 5px;
}

body.tool-form .form-group.error .error-message {
    display: block;
}

body.tool-form .pulse-cta {
    position: relative;
    overflow: hidden;
    animation: form-pulse-scale 3s ease-in-out infinite;
    transition: all 0.3s ease;
}

body.tool-form .pulse-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px #ffd70066;
}

body.tool-form .pulse-cta:active {
    transform: translateY(0);
}

/* Animasyonlar animations.css'de tanımlı */


/* ==================== OPTIMIZED v3.0 STYLES ==================== */

/* Benefits Section (4'lü Grid) */
body.tool-form .benefits-section {
    padding: clamp(60px, 8vw, 100px) 20px;
    background: #0A0A0A;
}

body.tool-form .benefits-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    max-width: 1000px;
    margin: 0 auto 60px;
    position: relative;
    z-index: 1;
    clear: both;
}

body.tool-form .benefit-card {
    background: var(--card-background);
    border: 2px solid var(--card-border-color);
    border-radius: 20px;
    padding: 40px 30px;
    text-align: center;
    transition: all 0.3s;
    position: relative;
    z-index: 1;
    margin: 0;
}

body.tool-form .benefit-card:hover {
    transform: translateY(-10px);
    border-color: var(--gold-color);
    box-shadow: 0 10px 40px #ffd7004d;
}

/* Emoji zıplama sorununu önle - icon'u card hover'dan bağımsız tut */
body.tool-form .benefit-card:hover .benefit-icon {
    transform: none !important;
    animation: none !important;
    transition: none !important;
}

body.tool-form .benefit-icon {
    font-size: 3.5rem;
    margin-bottom: 20px;
    /* Emoji zıplama sorununu önle - icon'u sabit tut */
    transform: none !important;
    animation: none !important;
    transition: none !important;
    will-change: auto !important;
}

body.tool-form .benefit-card h3 {
    color: var(--gold-color);
    font-size: clamp(1rem, 3.5vw, 1.3rem);
    margin-bottom: clamp(10px, 2.5vw, 15px);
    line-height: 1.3;
}

body.tool-form .benefit-card p {
    color: #ccc;
    line-height: 1.6;
    font-size: clamp(0.85rem, 2.5vw, 0.95rem);
}

/* Pain Points v2 (2x3 Grid) */
body.tool-form .pain-section-v2 {
    padding: clamp(60px, 8vw, 100px) 20px;
    background: #0A0A0A;
}

body.tool-form .pain-grid-v2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    max-width: 1000px;
    margin: 0 auto 60px;
    position: relative;
    z-index: 1;
    clear: both;
}

body.tool-form .pain-card-v2 {
    background: #ffd7000d;
    border: 2px solid #ffd70033;
    border-radius: 15px;
    padding: 35px 25px;
    transition: all 0.3s;
}

body.tool-form .pain-card-v2:hover {
    transform: scale(1.05);
    border-color: var(--gold-color);
}

body.tool-form .pain-icon-v2 {
    font-size: clamp(2rem, 6vw, 3rem);
    margin-bottom: clamp(10px, 2.5vw, 15px);
}

body.tool-form .pain-card-v2 h3 {
    color: var(--gold-color);
    font-size: clamp(1rem, 3.5vw, 1.2rem);
    margin-bottom: clamp(8px, 2vw, 12px);
    line-height: 1.3;
}

body.tool-form .pain-card-v2 p {
    color: #ddd;
    font-size: clamp(0.85rem, 2.5vw, 0.95rem);
    line-height: 1.5;
}

/* Solution Steps v2 */
body.tool-form .solution-section-v2 {
    padding: clamp(60px, 8vw, 100px) 20px;
    background: #0A0A0A;
}

body.tool-form .steps-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    max-width: 700px;
    margin: 0 auto 60px;
    position: relative;
    z-index: 1;
    clear: both;
}

body.tool-form .step-card-v2 {
    background: var(--card-background);
    border: 2px solid var(--card-border-color);
    border-radius: 20px;
    padding: 30px;
    position: relative;
    transition: all 0.3s;
    z-index: 1;
    margin: 0;
}

body.tool-form .step-card-v2:hover {
    transform: translateY(-10px);
    border-color: var(--gold-color);
}

body.tool-form .step-image {
    width: 100%;
    height: clamp(180px, 25vw, 250px);
    border-radius: 15px;
    overflow: hidden;
    margin-bottom: 20px;
    background: rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    position: relative;
}

body.tool-form .step-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

body.tool-form .step-number {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    background: var(--gold-gradient);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: bold;
    color: #000;
}

body.tool-form .step-card-v2 h3 {
    color: var(--gold-color);
    font-size: clamp(1.1rem, 3.5vw, 1.4rem);
    margin-bottom: clamp(10px, 2.5vw, 15px);
    line-height: 1.3;
}

body.tool-form .step-card-v2 p {
    color: #ccc;
    line-height: 1.6;
    font-size: clamp(0.85rem, 2.5vw, 0.95rem);
}

/* Presenter Section v2 */
body.tool-form .presenter-section-v2 {
    padding: clamp(60px, 8vw, 100px) 20px;
    background: #0A0A0A;
}

body.tool-form .presenter-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    max-width: 1000px;
    margin: 0 auto;
    align-items: center;
    position: relative;
    z-index: 1;
}

body.tool-form .presenter-frame {
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
}

body.tool-form .presenter-frame {
    width: 100%;
    max-width: clamp(250px, 30vw, 400px);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    overflow: hidden;
}

body.tool-form .presenter-frame img {
    width: 100%;
    height: 100%;
    max-height: 400px;
    object-fit: cover;
    object-position: center;
    border-radius: 20px;
    border: 3px solid var(--gold-color);
    display: block;
}

body.tool-form .presenter-placeholder {
    width: 100%;
    max-width: clamp(250px, 30vw, 400px);
    height: clamp(250px, 30vw, 400px);
    background: #ffd7001a;
    border: 2px dashed var(--gold-color);
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    box-sizing: border-box;
    overflow: hidden;
    position: relative;
}

body.tool-form .presenter-placeholder img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 20px;
}

body.tool-form .placeholder-icon {
    font-size: 8rem;
    opacity: 0.3;
}

body.tool-form .presenter-info-col h3 {
    color: var(--gold-color);
    font-size: 2.5rem;
    margin-bottom: 10px;
}

body.tool-form .presenter-title-text {
    color: #ccc;
    font-size: clamp(1rem, 3.5vw, 1.3rem);
    margin-bottom: clamp(15px, 3vw, 25px);
    line-height: 1.5;
}

body.tool-form .presenter-bio {
    color: #ddd;
    font-size: 1.1rem;
    line-height: 1.8;
    margin-bottom: 30px;
}

/* Stats Section v2 */
body.tool-form .stats-section-v2 {
    padding: 100px 20px;
    background: linear-gradient(180deg, #1a1a1a 0%, #0a0a0a 100%);
}

body.tool-form .stats-grid-v2 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    max-width: 900px;
    margin: 0 auto 40px;
    position: relative;
    z-index: 1;
    clear: both;
}

body.tool-form .stat-card-v2 {
    background: #ffd7000d;
    border: 2px solid #ffd70033;
    border-radius: 15px;
    padding: 40px 20px;
    text-align: center;
}

/* Testimonials (inside Stats Section) */
body.tool-form .testimonials-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    max-width: 1000px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    clear: both;
}

body.tool-form .testimonial-card {
    background: rgba(25, 25, 25, 0.8);
    backdrop-filter: blur(10px);
    border: 2px solid #ffd70033;
    border-radius: 20px;
    padding: 30px;
    text-align: center;
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
    z-index: 1;
    margin: 0;
}

body.tool-form .testimonial-card::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, #ffd7001a 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.4s ease;
}

body.tool-form .testimonial-card:hover {
    transform: translateY(-10px);
    border-color: #ffd70080;
    box-shadow: 0 20px 40px #ffd70033;
}

body.tool-form .testimonial-card:hover::before {
    opacity: 1;
}

body.tool-form .testimonial-stars {
    display: flex;
    justify-content: center;
    gap: 5px;
    margin-bottom: 20px;
}

body.tool-form .testimonial-stars .star {
    color: var(--gold-color);
    font-size: 1.5rem;
    animation: form-star-twinkle 2s ease-in-out infinite;
    animation-delay: calc(var(--star-index, 0) * 0.1s);
}

body.tool-form .testimonial-stars .star:nth-child(1) {
    --star-index: 0;
}

body.tool-form .testimonial-stars .star:nth-child(2) {
    --star-index: 1;
}

body.tool-form .testimonial-stars .star:nth-child(3) {
    --star-index: 2;
}

body.tool-form .testimonial-stars .star:nth-child(4) {
    --star-index: 3;
}

body.tool-form .testimonial-stars .star:nth-child(5) {
    --star-index: 4;
}

/* Animasyonlar animations.css'de tanımlı */

body.tool-form .testimonial-text {
    color: #ddd;
    font-size: clamp(0.85rem, 2.5vw, 0.95rem);
    line-height: 1.6;
    margin-bottom: clamp(15px, 3vw, 25px);
    font-style: italic;
    min-height: clamp(50px, 8vw, 60px);
}

body.tool-form .testimonial-author {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    padding-top: 20px;
    border-top: 1px solid #ffd7001a;
}

body.tool-form .author-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid var(--gold-color);
    flex-shrink: 0;
}

body.tool-form .author-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

body.tool-form .avatar-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--gold-color) 0%, #B8860B 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: bold;
    color: #000;
}

body.tool-form .author-info {
    text-align: left;
}

body.tool-form .author-name {
    color: var(--gold-color);
    font-weight: 600;
    font-size: clamp(0.9rem, 2.5vw, 1rem);
    margin-bottom: clamp(2px, 1vw, 3px);
}

body.tool-form .author-title {
    color: #999;
    font-size: clamp(0.75rem, 2vw, 0.85rem);
}

/* Responsive - Testimonials */
@media (max-width: 768px) {
    body.tool-form .testimonials-grid {
        grid-template-columns: 1fr !important;
        gap: 20px;
    }

    body.tool-form .testimonial-card {
        padding: 25px;
    }

    body.tool-form .testimonial-text {
        font-size: 0.9rem;
        min-height: auto;
    }
}

/* Guarantee Section */
body.tool-form .guarantee-section {
    padding: clamp(60px, 8vw, 100px) 20px;
    background: #0A0A0A;
}

body.tool-form .guarantee-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    max-width: 1000px;
    margin: 0 auto 50px;
    position: relative;
    z-index: 1;
    clear: both;
}

body.tool-form .guarantee-item {
    background: rgba(76, 175, 80, 0.1);
    border: 2px solid rgba(76, 175, 80, 0.3);
    border-radius: 12px;
    padding: 25px;
    text-align: center;
}

body.tool-form .guarantee-item p {
    color: #4CAF50;
    font-size: 1.1rem;
    font-weight: 500;
    margin: 0;
}

/* Hero Section Enhancements */
body.tool-form .hero-section {
    padding: 80px 20px;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, #0a0a0a 0%, #1a1a1a 100%);
}

body.tool-form .hero-subtitle {
    font-size: 1.2rem;
    max-width: 800px;
    margin: 20px auto 40px;
    color: #ddd;
    line-height: 1.8;
}

body.tool-form .event-info {
    font-size: 1.1rem;
    margin: 30px 0;
    color: #ccc;
}

body.tool-form .mega-cta {
    font-size: clamp(1rem, 4vw, 1.5rem) !important;
    padding: clamp(18px, 4vw, 25px) clamp(40px, 8vw, 60px) !important;
}

/* Section Headers */
body.tool-form .section-header {
    text-align: center;
    margin-bottom: 60px;
}

body.tool-form .section-header h2 {
    font-size: clamp(1.5rem, 5vw, 2.5rem);
    margin-bottom: clamp(10px, 2.5vw, 15px);
    line-height: 1.3;
}

body.tool-form .section-subtitle {
    font-size: clamp(0.95rem, 3vw, 1.2rem);
    color: #ccc;
    max-width: clamp(300px, 80vw, 800px);
    margin: 0 auto;
    line-height: 1.6;
}

/* ==================== RESPONSIVE GRID - SIMETRIK YERLEŞİM ==================== */
/* Tüm cihazlarda simetrik 2x2 veya 1x3 yerleşim */

/* Mobile (< 481px) - Çok küçük ekranlarda tek sütun */
@media (max-width: 480px) {
    body.tool-form .benefits-grid {
        grid-template-columns: 1fr !important;
        gap: 20px;
        max-width: 100% !important;
    }

    body.tool-form .steps-grid {
        grid-template-columns: 1fr !important;
        gap: 25px;
        max-width: 100% !important;
    }

    body.tool-form .pain-grid-v2 {
        grid-template-columns: 1fr !important;
        gap: 20px;
        max-width: 100% !important;
    }

    body.tool-form .testimonials-grid {
        grid-template-columns: 1fr !important;
        gap: 20px;
        max-width: 100% !important;
    }

    body.tool-form .stats-grid-v2 {
        grid-template-columns: 1fr !important;
        gap: 20px;
        max-width: 100% !important;
    }

    body.tool-form .guarantee-grid,
    body.tool-form .guarantee-grid-v2 {
        grid-template-columns: 1fr !important;
        gap: 20px;
        max-width: 100% !important;
    }

    body.tool-form .presenter-container {
        grid-template-columns: 1fr !important;
        gap: 30px;
        max-width: 100% !important;
    }
}

/* Tablet ve üzeri (481px+) - Her zaman simetrik */
@media (min-width: 481px) {
    body.tool-form .benefits-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: clamp(20px, 3vw, 35px);
    }

    body.tool-form .steps-grid {
        grid-template-columns: 1fr !important;
        gap: clamp(30px, 4vw, 50px);
        max-width: clamp(500px, 60vw, 700px) !important;
    }

    body.tool-form .pain-grid-v2 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: clamp(20px, 3vw, 35px);
    }

    body.tool-form .testimonials-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: clamp(25px, 3vw, 35px);
    }

    body.tool-form .stats-grid-v2 {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: clamp(20px, 3vw, 30px);
    }

    body.tool-form .guarantee-grid,
    body.tool-form .guarantee-grid-v2 {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: clamp(20px, 3vw, 30px);
    }
}

/* Tablet (481px - 768px) */
@media (min-width: 481px) and (max-width: 768px) {
    body.tool-form .benefits-grid {
        gap: 25px;
        max-width: 800px !important;
    }

    body.tool-form .steps-grid {
        gap: 35px;
        max-width: 600px !important;
    }

    body.tool-form .pain-grid-v2 {
        gap: 25px;
        max-width: 800px !important;
    }

    body.tool-form .testimonials-grid {
        gap: 25px;
        max-width: 800px !important;
    }

    body.tool-form .stats-grid-v2 {
        gap: 25px;
        max-width: 750px !important;
    }

    body.tool-form .guarantee-grid,
    body.tool-form .guarantee-grid-v2 {
        gap: 20px;
        max-width: 800px !important;
    }
}

/* Tablet Landscape / Small Desktop (769px - 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
    body.tool-form .benefits-grid {
        gap: 30px;
        max-width: 900px !important;
    }

    body.tool-form .steps-grid {
        gap: 40px;
        max-width: 650px !important;
    }

    body.tool-form .testimonials-grid {
        gap: 30px;
        max-width: 900px !important;
    }
}

/* Desktop (1025px - 1920px) - Ideal genişlik */
@media (min-width: 1025px) and (max-width: 1920px) {
    body.tool-form .benefits-grid {
        gap: 30px;
        max-width: 1000px !important;
    }

    body.tool-form .steps-grid {
        gap: 40px;
        max-width: 700px !important;
    }

    body.tool-form .testimonials-grid {
        gap: 30px;
        max-width: 1000px !important;
    }

    body.tool-form .stats-grid-v2 {
        max-width: 900px !important;
    }

    body.tool-form .guarantee-grid,
    body.tool-form .guarantee-grid-v2 {
        max-width: 1000px !important;
    }
}

/* Large Desktop / TV (> 1920px) - Geniş ekranlar için özel */
@media (min-width: 1921px) {
    body.tool-form .benefits-grid {
        gap: 40px;
        max-width: 1200px !important;
    }

    body.tool-form .steps-grid {
        gap: 50px;
        max-width: 800px !important;
    }

    body.tool-form .testimonials-grid {
        gap: 35px;
        max-width: 1200px !important;
    }

    body.tool-form .stats-grid-v2 {
        max-width: 1100px !important;
    }

    body.tool-form .guarantee-grid,
    body.tool-form .guarantee-grid-v2 {
        max-width: 1200px !important;
    }
}

/* Legacy Mobile Support */
@media (max-width: 768px) {

    body.tool-form .stats-grid-v2,
    body.tool-form .guarantee-grid {
        grid-template-columns: 1fr;
    }

    body.tool-form .presenter-container {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    body.tool-form .section-header h2 {
        font-size: clamp(1.3rem, 4vw, 2rem) !important;
    }

    body.tool-form .mega-cta {
        font-size: clamp(0.95rem, 3.5vw, 1.2rem) !important;
        padding: clamp(15px, 3.5vw, 20px) clamp(30px, 6vw, 40px) !important;
    }
}


/* Logo Styles */
body.tool-form .site-logo-container {
    margin-bottom: 40px;
}

body.tool-form .site-logo {
    max-width: 256px;
    max-height: 256px;
    width: 256px;
    height: auto;
    object-fit: contain;
}

/* Tablet için orta boyut */
@media (min-width: 769px) and (max-width: 1024px) {
    body.tool-form .site-logo {
        max-width: 192px;
        max-height: 192px;
        width: 192px;
    }
}

/* Mobile için küçük boyut */
@media (max-width: 768px) {
    body.tool-form .site-logo {
        max-width: 128px;
        max-height: 128px;
        width: 128px;
    }
}

body.tool-form .logo-placeholder {
    background: #ffd7001a;
    border: 2px dashed var(--gold-color);
    border-radius: 15px;
    padding: 30px 40px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    overflow: hidden;
    position: relative;
    width: 256px;
    height: 256px;
    margin: 0 auto;
}

/* Tablet için orta boyut */
@media (min-width: 769px) and (max-width: 1024px) {
    body.tool-form .logo-placeholder {
        width: 192px;
        height: 192px;
        padding: 25px 35px;
    }
}

/* Mobile için küçük boyut */
@media (max-width: 768px) {
    body.tool-form .logo-placeholder {
        width: 128px;
        height: 128px;
        padding: 20px 25px;
    }
}

body.tool-form .logo-placeholder img,
body.tool-form .site-logo-container img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
    object-position: center;
    display: block;
    margin: 0 auto;
}

body.tool-form .logo-text {
    font-size: 2rem;
    font-weight: bold;
    color: var(--gold-color);
    margin-bottom: 10px;
}

body.tool-form .logo-hint {
    font-size: 0.9rem;
    color: #888;
}

/* Guarantee Cards v2 (6 cards, detailed) */
body.tool-form .guarantee-grid-v2 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    max-width: 1000px;
    margin: 0 auto 50px;
    position: relative;
    z-index: 1;
    clear: both;
}

/* 6 item için 3x2 veya 2x3 */
@media (min-width: 1025px) {
    body.tool-form .guarantee-grid-v2 {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    body.tool-form .guarantee-grid-v2 {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 481px) and (max-width: 768px) {
    body.tool-form .guarantee-grid-v2 {
        grid-template-columns: repeat(2, 1fr);
    }
}

body.tool-form .guarantee-card {
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.15) 0%, rgba(76, 175, 80, 0.05) 100%);
    border: 2px solid rgba(76, 175, 80, 0.4);
    border-radius: 15px;
    padding: 30px;
    text-align: center;
    position: relative;
    overflow: hidden;
    transition: all 0.3s;
    z-index: 1;
    margin: 0;
}

body.tool-form .guarantee-card::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(76, 175, 80, 0.2) 0%, transparent 70%);
    animation: rotate 10s linear infinite;
    opacity: 0;
    transition: opacity 0.3s;
}

/* Visual Editor: dekoratif pseudo-elementler tıklamayı engellemesin */
body.editor-mode .testimonial-card::before,
body.editor-mode .guarantee-card::before {
    pointer-events: none !important;
}

body.tool-form .guarantee-card:hover::before {
    opacity: 1;
}

body.tool-form .guarantee-card:hover {
    transform: translateY(-10px);
    border-color: #4CAF50;
    box-shadow: 0 10px 30px rgba(76, 175, 80, 0.3);
}

body.tool-form .guarantee-icon {
    font-size: clamp(2rem, 6vw, 3rem);
    margin-bottom: clamp(10px, 2.5vw, 15px);
    /* Emoji zıplama sorununu önle - animation kaldırıldı */
    animation: none !important;
    transform: translateZ(0) !important;
    isolation: isolate !important;
}

body.tool-form .guarantee-card h4 {
    color: #4CAF50;
    font-size: clamp(1rem, 3.5vw, 1.2rem);
    margin-bottom: clamp(8px, 2vw, 10px);
    font-weight: 600;
    line-height: 1.3;
}

body.tool-form .guarantee-card p {
    color: #ccc;
    font-size: clamp(0.85rem, 2.5vw, 0.95rem);
    line-height: 1.5;
}

@keyframes bounce {

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

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



/* Logo Positioning Fix */
body.tool-form .hero-section {
    flex-direction: column;
}

/* Editor Mode Fixes - Iframe içinde hero section yükseklik sorununu düzelt */
body.editor-mode .hero-section {
    min-height: auto !important;
    height: auto !important;
    max-height: none !important;
}

body.editor-mode .section {
    min-height: auto !important;
}

body.tool-form .site-logo-container {
    margin-bottom: 30px;
    width: 100%;
    display: flex;
    justify-content: center;
}

body.tool-form .logo-placeholder {
    margin: 0 auto;
}


/* Modal Responsive & UX Improvements */

/* Conversion Optimization Elements */
.urgency-badge {
    background: linear-gradient(135deg, rgba(255, 69, 0, 0.1), rgba(255, 140, 0, 0.1));
    border: 1px solid rgba(255, 140, 0, 0.3);
    border-radius: 8px;
    padding: 8px 12px;
    margin: 10px 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    color: #ffa500;
    animation: form-urgency-pulse 2s ease-in-out infinite;
}

.pulse-dot {
    width: 8px;
    height: 8px;
    background: #ff4500;
    border-radius: 50%;
    animation: dot-pulse 1.5s ease-in-out infinite;
    box-shadow: 0 0 10px rgba(255, 69, 0, 0.5);
}

@keyframes dot-pulse {

    0%,
    100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.3);
        opacity: 0.7;
    }
}

/* Animasyonlar animations.css'de tanımlı */

.trust-badges {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 10px;
    flex-wrap: wrap;
}

.trust-badge {
    background: #ffd7001a;
    border: 1px solid #ffd70033;
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 0.75rem;
    color: var(--gold-color);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}


/* Mobile responsive for conversion elements */
@media (max-width: 600px) {
    .urgency-badge {
        font-size: 0.85rem;
        padding: 6px 10px;
    }

    .trust-badges {
        gap: 6px;
    }

    .trust-badge {
        font-size: 0.7rem;
        padding: 3px 8px;
    }
}

/* Premium Success Message Typography */
.success-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 15px;
    color: #ffffff;
    text-shadow: 0 2px 10px rgba(74, 222, 128, 0.5);
    letter-spacing: 0px;
    line-height: 1.3;
}

.success-subtitle {
    font-size: 1rem;
    font-weight: 400;
    margin-bottom: 12px;
    color: #e0e0e0;
    line-height: 1.6;
}

.success-subtitle strong {
    color: #4ade80;
    font-weight: 600;
}

.success-note {
    font-size: 0.9rem;
    font-weight: 500;
    color: #ffd700;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

/* Mobile responsive */
@media (max-width: 600px) {
    .success-title {
        font-size: 1.2rem;
    }

    .success-subtitle {
        font-size: 0.9rem;
    }

    .success-note {
        font-size: 0.8rem;
    }
}

/* BACKGROUND PATTERN LIBRARY */
/* These patterns will be applied to form page black sidebars */

/* 1. Dots Pattern */
.bg-pattern-dots {
    background-color: #000;
    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
    background-size: 20px 20px;
}

/* 2. Grid Pattern */
.bg-pattern-grid {
    background-color: #000;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 30px 30px;
}

/* 3. Diagonal Lines */
.bg-pattern-diagonal {
    background-color: #000;
    background-image: repeating-linear-gradient(45deg,
            transparent,
            transparent 10px,
            rgba(255, 255, 255, 0.05) 10px,
            rgba(255, 255, 255, 0.05) 20px);
}

/* 4. Hexagon Pattern */
.bg-pattern-hexagon {
    background-color: #000;
    background-image: url("data:image/svg+xml,%3Csvg width='50' height='44' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M25 0l12.5 7.5v15L25 30 12.5 22.5v-15L25 0z' fill='none' stroke='rgba(255,255,255,0.1)' stroke-width='1'/%3E%3C/svg%3E");
    background-size: 50px 44px;
}

/* 5. Circuit Pattern */
.bg-pattern-circuit {
    background-color: #000;
    background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 10h20M30 10v20M30 30h20M50 30v20M50 50h20M70 50v20M70 70h20' stroke='rgba(255,255,255,0.1)' stroke-width='2' fill='none'/%3E%3Ccircle cx='30' cy='10' r='3' fill='rgba(255,255,255,0.15)'/%3E%3Ccircle cx='30' cy='30' r='3' fill='rgba(255,255,255,0.15)'/%3E%3Ccircle cx='50' cy='30' r='3' fill='rgba(255,255,255,0.15)'/%3E%3Ccircle cx='50' cy='50' r='3' fill='rgba(255,255,255,0.15)'/%3E%3Ccircle cx='70' cy='50' r='3' fill='rgba(255,255,255,0.15)'/%3E%3Ccircle cx='70' cy='70' r='3' fill='rgba(255,255,255,0.15)'/%3E%3C/svg%3E");
    background-size: 100px 100px;
}

/* 6. Topography Pattern */
.bg-pattern-topography {
    background-color: #000;
    background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 50c10-10 20-10 30 0s20 10 30 0M20 70c10-10 20-10 30 0s20 10 30 0M20 30c10-10 20-10 30 0s20 10 30 0' stroke='rgba(255,255,255,0.08)' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
    background-size: 100px 100px;
}

/* 7. Waves Pattern */
.bg-pattern-waves {
    background-color: #000;
    background-image: url("data:image/svg+xml,%3Csvg width='100' height='20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 10c10-5 15-5 25 0s15 5 25 0 15-5 25 0 15 5 25 0' stroke='rgba(255,255,255,0.1)' stroke-width='2' fill='none'/%3E%3C/svg%3E");
    background-size: 100px 20px;
}

/* 8. Triangles Pattern */
.bg-pattern-triangles {
    background-color: #000;
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 10L50 50H10z' fill='none' stroke='rgba(255,255,255,0.08)' stroke-width='1'/%3E%3C/svg%3E");
    background-size: 60px 60px;
}

/* 9. Squares Pattern */
.bg-pattern-squares {
    background-color: #000;
    background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='5' y='5' width='30' height='30' fill='none' stroke='rgba(255,255,255,0.08)' stroke-width='1'/%3E%3Crect x='15' y='15' width='10' height='10' fill='rgba(255,255,255,0.05)'/%3E%3C/svg%3E");
    background-size: 40px 40px;
}

/* 10. Stars Pattern */
.bg-pattern-stars {
    background-color: #000;
    background-image: url("data:image/svg+xml,%3Csvg width='80' height='80' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M40 15l3 9h9l-7 5 3 9-8-6-8 6 3-9-7-5h9z' fill='rgba(255,255,255,0.08)'/%3E%3C/svg%3E");
    background-size: 80px 80px;
}

/* 11. Zigzag Pattern */
.bg-pattern-zigzag {
    background-color: #000;
    background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 20L20 0L40 20L20 40z' fill='none' stroke='rgba(255,255,255,0.08)' stroke-width='1'/%3E%3C/svg%3E");
    background-size: 40px 40px;
}

/* 12. Plus Pattern */
.bg-pattern-plus {
    background-color: #000;
    background-image: url("data:image/svg+xml,%3Csvg width='30' height='30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15 5v20M5 15h20' stroke='rgba(255,255,255,0.08)' stroke-width='2'/%3E%3C/svg%3E");
    background-size: 30px 30px;
}

/* Dynamic pattern application */
body.tool-form {
    position: relative;
}

body.tool-form::before,
body.tool-form::after {
    content: '';
    position: fixed;
    top: 0;
    bottom: 0;
    width: calc((100vw - 1200px) / 2);
    /* Sidebar width */
    z-index: -1;
}

body.tool-form::before {
    left: 0;
}

body.tool-form::after {
    right: 0;
}

/* Responsive: hide patterns on small screens */
@media (max-width: 1200px) {

    body.tool-form::before,
    body.tool-form::after {
        display: none;
    }
}

/* FORM PAGE UNIFIED BACKGROUND FIX */
/* Ensure all sections have same background and no gaps */

body.tool-form main {
    background: #0A0A0A;
    margin: 0;
    padding: 0;
}

body.tool-form .section {
    background: #0A0A0A !important;
    /* margin: 0 !important; REMOVED per user request to fix centering */
    border: none !important;
    /* NO max-width here - let content determine width */
}

/* Remove any section borders or separators */
body.tool-form .section::before,
body.tool-form .section::after {
    display: none !important;
}

/* Ensure last section touches footer */
body.tool-form main>.section:last-child {
    padding-bottom: 100px;
    margin-bottom: 0 !important;
}

/* Hero section background */
body.tool-form .hero-section {
    background: #0A0A0A !important;
}

/* FIX: Center all hero section content */
body.tool-form .hero-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

body.tool-form .countdown-timer {
    justify-content: center !important;
}

body.tool-form .site-logo-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

body.tool-form .cta-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
}

body.tool-form .event-info {
    text-align: center;
}

/* Center section headers */
body.tool-form .section-header {
    text-align: center;
    margin: 0 auto;
}

/* FINAL LAYOUT FIX: Center Content Containers */
/* Ideal genişlik - geniş ekranlarda ortada, yanlarda boşluk (sidebar alanları için) */

body.tool-form .hero-content,
body.tool-form .section-header {
    max-width: 1000px !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 20px;
    padding-right: 20px;
}

body.tool-form .benefits-grid,
body.tool-form .pain-grid-v2,
body.tool-form .steps-grid,
body.tool-form .testimonials-grid,
body.tool-form .stats-grid-v2,
body.tool-form .guarantee-grid,
body.tool-form .guarantee-grid-v2,
body.tool-form .presenter-container {
    max-width: 1000px !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 20px;
    padding-right: 20px;
}

body.tool-form .cta-wrapper,
body.tool-form .site-logo-container {
    max-width: 1000px !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 20px;
    padding-right: 20px;
}

/* Ensure text alignment is centered */
body.tool-form .hero-content {
    align-items: center !important;
    text-align: center !important;
}

/* Fix logo container specifically */
body.tool-form .site-logo-container {
    display: flex !important;
    justify-content: center !important;
    margin-bottom: 20px !important;
}

/* FORCE CENTER ALIGNMENT FOR GRIDS */
body.tool-form .benefits-grid,
body.tool-form .pain-grid-v2,
body.tool-form .steps-grid {
    justify-content: center !important;
    /* Also ensure items inside are centered if needed */
    justify-items: center !important;
}

/* Presenter container specific fix */
body.tool-form .presenter-container {
    justify-content: center !important;
    align-items: center !important;
}

/* Ensure section headers are absolutely centered */
body.tool-form .section-header {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    width: 100% !important;
}

/* RESPONSIVE OPTIMIZATIONS */

/* Mobile Landscape Fixes (Short screens) */
@media (max-height: 500px) and (orientation: landscape) {
    body.tool-form .section {
        padding: 40px 20px !important;
    }

    body.tool-form .hero-section {
        padding-top: 20px !important;
        padding-bottom: 40px !important;
    }

    body.tool-form .benefits-grid,
    body.tool-form .pain-grid-v2,
    body.tool-form .steps-grid {
        gap: 15px !important;
        margin-bottom: 30px !important;
    }

    body.tool-form .section-header h2 {
        font-size: clamp(1.2rem, 4vw, 1.8rem) !important;
        margin-bottom: clamp(12px, 3vw, 20px) !important;
    }
}

/* Mobile Portrait Fixes (Narrow screens) */
@media (max-width: 480px) {
    body.tool-form .section {
        padding: 60px 20px !important;
    }

    body.tool-form .benefits-grid,
    body.tool-form .pain-grid-v2,
    body.tool-form .steps-grid {
        gap: 20px !important;
    }

    body.tool-form .hero-title {
        font-size: 2rem !important;
    }

    /* Ensure cards don't get too wide/tall */
    body.tool-form .benefit-card,
    body.tool-form .pain-card-v2 {
        padding: 20px !important;
    }
}

/* Tablet Portrait Fixes - Grid layouts already handled in responsive section */
@media (min-width: 481px) and (max-width: 768px) {
    body.tool-form .section {
        padding: 80px 20px !important;
    }
}

/* Ensure touch targets are large enough on mobile */
@media (max-width: 768px) {

    body.tool-form .cta-button,
    body.tool-form .accordion-header,
    body.tool-form .input-group input,
    body.tool-form .input-group select {
        min-height: 48px;
    }
}

/* FINAL CTA MOBILE FIX */
/* Force choice boxes to stack vertically on mobile to prevent overflow */

@media (max-width: 768px) {
    body.tool-form .choice-container {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 20px !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 10px !important;
    }

    body.tool-form .choice-box {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        /* Ensure padding doesn't increase width */
    }

    body.tool-form .choice-or {
        margin: 10px 0 !important;
        transform: none !important;
        /* Reset any rotation/positioning */
    }
}

/* Ensure container itself doesn't overflow */
body.tool-form .final-call-v2 {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* CLICKABLE BARS */
.clickable-bar {
    cursor: pointer;
    transition: opacity 0.3s ease, transform 0.2s ease;
}

.clickable-bar:hover {
    opacity: 0.9;
}

.clickable-bar:active {
    transform: scale(0.99);
}

/* STICKY CARD ANIMATION (Desktop Only) */
@media (min-width: 1024px) {

    /* Benefits Section Animation */
    body.tool-form .benefits-section.sticky-active {
        height: 300vh;
        /* Create scroll space */
        position: relative;
    }

    body.tool-form .benefits-section.sticky-active .section-header {
        position: relative;
        z-index: 10;
        margin-bottom: 50px;
    }

    body.tool-form .benefits-section.sticky-active .benefits-grid {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        position: relative;
        height: 100%;
        width: 100%;
        max-width: 600px;
        /* Limit width for card look */
        margin: 0 auto;
    }

    body.tool-form .benefits-section.sticky-active .benefit-card {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 300px;
        /* Fixed height for uniformity */
        background: #151515;
        border: 1px solid #ffd70033;
        box-shadow: 0 10px 30px #00000080;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        transform-origin: center top;
        will-change: transform, opacity;
    }

    /* Guarantee Section Animation */
    body.tool-form .guarantee-section.sticky-active {
        height: 300vh;
        position: relative;
    }

    body.tool-form .guarantee-section.sticky-active .guarantee-grid-v2 {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        position: relative;
        height: 100%;
        width: 100%;
        max-width: 600px;
        margin: 0 auto;
    }

    body.tool-form .guarantee-section.sticky-active .guarantee-card {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 250px;
        background: #151515;
        border: 1px solid rgba(76, 175, 80, 0.3);
        box-shadow: 0 10px 30px #00000080;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        transform-origin: center top;
        will-change: transform, opacity;
    }
}

/* CLICKABLE BARS */
.clickable-bar {
    cursor: pointer;
    transition: opacity 0.3s ease, transform 0.2s ease;
}

.clickable-bar:hover {
    opacity: 0.9;
}

.clickable-bar:active {
    transform: scale(0.99);
}

/* STICKY CARD ANIMATION (Desktop Only) */
@media (min-width: 1024px) {

    /* Benefits Section Animation */
    body.tool-form .benefits-section.sticky-active {
        height: 300vh;
        /* Create scroll space */
        position: relative;
    }

    body.tool-form .benefits-section.sticky-active .section-header {
        position: relative;
        z-index: 10;
        margin-bottom: 50px;
    }

    body.tool-form .benefits-section.sticky-active .benefits-grid {
        display: flex !important;
        /* FORCE FLEX */
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        position: relative !important;
        height: 100% !important;
        width: 100% !important;
        max-width: 600px !important;
        /* Limit width for card look */
        margin: 0 auto !important;
    }

    body.tool-form .benefits-section.sticky-active .benefit-card {
        position: absolute !important;
        /* FORCE ABSOLUTE */
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 300px !important;
        /* Fixed height for uniformity */
        background: #151515;
        border: 1px solid #ffd70033;
        box-shadow: 0 10px 30px #00000080;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        text-align: center !important;
        transform-origin: center top !important;
        will-change: transform, opacity;
        margin: 0 !important;
        /* Remove grid margins */
    }

    /* Guarantee Section Animation */
    body.tool-form .guarantee-section.sticky-active {
        height: 300vh;
        position: relative;
    }

    body.tool-form .guarantee-section.sticky-active .guarantee-grid-v2 {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        position: relative !important;
        height: 100% !important;
        width: 100% !important;
        max-width: 600px !important;
        margin: 0 auto !important;
    }

    body.tool-form .guarantee-section.sticky-active .guarantee-card {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 250px !important;
        background: #151515;
        border: 1px solid rgba(76, 175, 80, 0.3);
        box-shadow: 0 10px 30px #00000080;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        text-align: center !important;
        transform-origin: center top !important;
        will-change: transform, opacity;
        margin: 0 !important;
    }
}

/* Countdown Second Animations */
body.tool-form .countdown-flip,
body.tool-form .form-countdown-flip {
    animation: countdown-flip-animation 0.6s ease-in-out;
}

body.tool-form .countdown-bounce,
body.tool-form .form-countdown-bounce {
    animation: countdown-bounce-animation 0.6s ease-in-out;
}

body.tool-form .countdown-pulse,
body.tool-form .form-countdown-pulse {
    animation: countdown-pulse-animation 0.6s ease-in-out;
}

body.tool-form .countdown-shake,
body.tool-form .form-countdown-shake {
    animation: countdown-shake-animation 0.6s ease-in-out;
}

body.tool-form .countdown-zoom,
body.tool-form .form-countdown-zoom {
    animation: countdown-zoom-animation 0.6s ease-in-out;
}

body.tool-form .countdown-fade,
body.tool-form .form-countdown-fade {
    animation: countdown-fade-animation 0.6s ease-in-out;
}

body.tool-form .countdown-slide,
body.tool-form .form-countdown-slide {
    animation: countdown-slide-animation 0.6s ease-in-out;
}

body.tool-form .countdown-rotate,
body.tool-form .form-countdown-rotate {
    animation: countdown-rotate-animation 0.6s ease-in-out;
}

body.tool-form .countdown-glow,
body.tool-form .form-countdown-glow {
    animation: countdown-glow-animation 0.6s ease-in-out;
}

@keyframes countdown-flip-animation {
    0% {
        transform: rotateX(0deg);
        opacity: 1;
    }

    50% {
        transform: rotateX(90deg);
        opacity: 0.3;
    }

    100% {
        transform: rotateX(0deg);
        opacity: 1;
    }
}

@keyframes countdown-bounce-animation {

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

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

@keyframes countdown-pulse-animation {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.2);
    }
}

@keyframes countdown-shake-animation {

    0%,
    100% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-10px);
    }

    75% {
        transform: translateX(10px);
    }
}

@keyframes countdown-zoom-animation {
    0% {
        transform: scale(0.8);
        opacity: 0;
    }

    50% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes countdown-fade-animation {
    0% {
        opacity: 0;
    }

    50% {
        opacity: 0.5;
    }

    100% {
        opacity: 1;
    }
}

@keyframes countdown-slide-animation {
    0% {
        transform: translateY(-20px);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes countdown-rotate-animation {
    0% {
        transform: rotate(0deg);
    }

    50% {
        transform: rotate(180deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes countdown-glow-animation {

    0%,
    100% {
        text-shadow: 0 0 5px rgba(255, 215, 0, 0.5);
    }

    50% {
        text-shadow: 0 0 20px rgba(255, 215, 0, 1), 0 0 30px rgba(255, 215, 0, 0.8);
    }
}