/* =============================================================================
   CONTACT.CSS — Conversational commission onboarding form
   main.css CSS değişkenlerine bağımlı. Yalnızca is_page('contact') yükler.

   Bölüm sırası:
     1.  Sayfa başlığı
     2.  Form wrapper + progress
     3.  Cevap chip'leri
     4.  Adım (step) + staggered animasyonlar
     5.  Seçim kartları (step 1)
     6.  Underline text/email input'ları (step 2-3)
     7.  Budget pill'leri (step 4)
     8.  Textarea (step 5)
     9.  Navigasyon butonları
    10.  Send brief butonu (gradient border)
    11.  Başarı durumu
    12.  What Happens Next
    13.  Location strip
    14.  Responsive
    19.  Upsell adımı
    20.  Marquee galeri
   ============================================================================= */


/* =============================================================================
   1. SAYFA BAŞLIĞI
   ============================================================================= */

.page-contact {
    padding-top:    calc( var(--header-height) + var(--space-16) );
    padding-bottom: var(--space-32);
}

.contact-header {
    margin-bottom: var(--space-12);
}

.contact-header .section-label {
    margin-bottom: var(--space-4);
}

.contact-header__title {
    font-family:    var(--font-display);
    font-size:      clamp( var(--text-4xl), 5vw, var(--text-6xl) );
    font-weight:    var(--weight-light);
    letter-spacing: -0.03em;
    line-height:    1;
    color:          var(--color-cream);
}


/* =============================================================================
   2. FORM WRAPPER + PROGRESS BAR
   ============================================================================= */

.cv-wrap {
    max-width:     580px;
    margin-inline: auto;
    margin-bottom: var(--space-20);
    position:      relative;
}

.cv-form {
    position: relative;
}

/* İnce altın progress çizgisi */
.cv-progress {
    height:        2px;
    background:    rgba(58, 58, 58, 0.3);
    border-radius: 2px;
    overflow:      hidden;
    margin-top:    var(--space-4);
}

.cv-progress__fill {
    height:        100%;
    width:         20%;
    background:    linear-gradient( to right, var(--color-copper), var(--color-gold) );
    border-radius: 2px;
    transition:    width 0.55s cubic-bezier( 0.4, 0, 0.2, 1 );
}


/* =============================================================================
   3. CEVAP CHIP'LERİ — Tıklanınca o adıma geri döner
   ============================================================================= */

.cv-answers {
    display:       flex;
    flex-wrap:     wrap;
    gap:           var(--space-2);
    min-height:    28px;
    margin-top:    var(--space-8);
    margin-bottom: var(--space-2);
}

.cv-chip {
    display:        inline-flex;
    align-items:    center;
    padding:        3px var(--space-3);
    border:         1px solid rgba(201, 166, 107, 0.3);
    border-radius:  100px;
    font-family:    var(--font-mono);
    font-size:      10px;
    letter-spacing: 0.1em;
    color:          rgba(201, 166, 107, 0.75);
    background:     transparent;
    cursor:         pointer;
    transition:     border-color 0.2s ease, color 0.2s ease;
    animation:      chip-pop 0.25s ease forwards;
}

.cv-chip:hover {
    border-color: var(--color-gold);
    color:        var(--color-gold);
}

.cv-chip::after {
    content:     ' ↩';
    opacity:     0;
    font-size:   9px;
    transition:  opacity 0.15s ease;
    margin-left: var(--space-1);
}

.cv-chip:hover::after {
    opacity: 1;
}

@keyframes chip-pop {
    from { opacity: 0; transform: scale(0.8); }
    to   { opacity: 1; transform: scale(1);   }
}


/* =============================================================================
   4. ADIM (STEP) — Staggered arrival animasyonu
   Her adım elementi sırayla aşağıdan yukarıya gelir.
   ============================================================================= */

.cv-step {
    display: none;
}

.cv-step.is-active {
    display: block;
}

/* Sender — sıfır gecikme, ilk gelen */
.cv-step.is-active .cv-step__sender {
    animation: cv-arrive 0.35s ease 0s forwards;
    opacity:   0;
}

/* Soru — 80ms sonra + sürekli goldish shine */
.cv-step.is-active .cv-step__q {
    animation: cv-arrive 0.5s ease 0.08s forwards,
               cv-shine  4.2s ease-in-out 0.9s infinite;
    opacity:   0;
}

/* Hint — 130ms sonra */
.cv-step.is-active .cv-step__hint {
    animation: cv-arrive 0.45s ease 0.13s forwards;
    opacity:   0;
}

/* Cevap alanı — 200ms sonra */
.cv-step.is-active .cv-step__body {
    animation: cv-arrive 0.45s ease 0.20s forwards;
    opacity:   0;
}

/* Navigasyon — 290ms sonra */
.cv-step.is-active .cv-step__nav {
    animation: cv-arrive 0.4s ease 0.29s forwards;
    opacity:   0;
}

/* Geri gelince hafifçe sola kayar */
.cv-step.is-entering-back .cv-step__sender,
.cv-step.is-entering-back .cv-step__q,
.cv-step.is-entering-back .cv-step__hint,
.cv-step.is-entering-back .cv-step__body,
.cv-step.is-entering-back .cv-step__nav {
    animation-name: cv-arrive-back;
}

@keyframes cv-arrive {
    from { opacity: 0; transform: translateY( 14px ); }
    to   { opacity: 1; transform: translateY( 0 );    }
}

@keyframes cv-arrive-back {
    from { opacity: 0; transform: translateY( -10px ); }
    to   { opacity: 1; transform: translateY( 0 );     }
}

/* Sender label — "IRONHUSH" */
.cv-step__sender {
    font-family:    var(--font-mono);
    font-size:      9px;
    letter-spacing: 0.22em;
    color:          var(--color-gold);
    display:        block;
    margin-bottom:  var(--space-4);
    max-width:      none;
}

/* Soru metni — büyük, display font + goldish shine */
.cv-step__q {
    font-family:             var(--font-display);
    font-size:               clamp( var(--text-2xl), 4vw, 2.6rem );
    font-weight:             var(--weight-light);
    letter-spacing:          -0.025em;
    line-height:             1.12;
    margin-bottom:           var(--space-8);
    white-space:             pre-line;
    /* Shine gradient — position animasyonuyla kayar */
    background:              linear-gradient(
                                 100deg,
                                 var(--color-cream)          22%,
                                 rgba(201, 166, 107, 0.88)   50%,
                                 var(--color-cream)          78%
                             );
    background-size:         260% 100%;
    background-position:     120% 0;
    -webkit-background-clip: text;
    background-clip:         text;
    -webkit-text-fill-color: transparent;
}

/* Küçük hint metni */
.cv-step__hint {
    font-size:     var(--text-sm);
    color:         rgba(239, 230, 215, 0.4);
    line-height:   1.6;
    margin-top:    calc( -1 * var(--space-6) );
    margin-bottom: var(--space-8);
    max-width:     46ch;
}

/* Hata mesajı */
.cv-step__err {
    font-family:  var(--font-mono);
    font-size:    var(--text-xs);
    color:        #d97474;
    margin-top:   var(--space-4);
    min-height:   1.2em;
    opacity:      0;
    transition:   opacity 0.2s ease;
    max-width:    none;
}

.cv-step__err.is-visible {
    opacity: 1;
}

/* Adım body */
.cv-step__body {
    margin-bottom: var(--space-8);
}

/* Navigasyon satırı */
.cv-step__nav {
    display:     flex;
    align-items: center;
    gap:         var(--space-6);
}


/* =============================================================================
   5. SEÇİM KARTLARI — Step 1
   ============================================================================= */

.cv-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap:     var(--space-3);
}

.cv-card {
    position:      relative;
    display:       flex;
    align-items:   flex-start;
    cursor:        pointer;
    border:        1px solid rgba(58, 58, 58, 0.5);
    border-radius: var(--radius-lg);
    padding:       var(--space-6);
    transition:    border-color 0.25s ease, background 0.25s ease;
    user-select:   none;
}

.cv-card input[type='radio'],
.cv-card input[type='checkbox'] {
    position: absolute;
    opacity:  0;
    width:    0;
    height:   0;
}

.cv-card__dot { display: none; }

.cv-card__inner {
    display:        flex;
    flex-direction: column;
    gap:            var(--space-2);
    flex:           1;
}

.cv-card__mark {
    font-family:    var(--font-mono);
    font-size:      10px;
    letter-spacing: 0.15em;
    color:          rgba(58, 58, 58, 0.8);
    display:        block;
    margin-bottom:  var(--space-2);
    transition:     color 0.2s ease;
}

.cv-card__title {
    font-family: var(--font-display);
    font-size:   var(--text-lg);
    font-weight: var(--weight-light);
    color:       var(--color-cream);
    line-height: 1.2;
    display:     block;
}

.cv-card__sub {
    font-size:   var(--text-sm);
    color:       rgba(239, 230, 215, 0.4);
    line-height: 1.5;
    display:     block;
    transition:  color 0.2s ease;
}

/* Seçme göstergesi — sağ üst dot */
.cv-card__dot {
    display:       block;
    width:         16px;
    height:        16px;
    border-radius: 50%;
    border:        1px solid rgba(58, 58, 58, 0.5);
    flex-shrink:   0;
    margin-left:   var(--space-3);
    margin-top:    2px;
    position:      relative;
    transition:    border-color 0.2s ease;
}

.cv-card__dot::after {
    content:       '';
    position:      absolute;
    inset:         3px;
    border-radius: 50%;
    background:    var(--color-gold);
    transform:     scale(0);
    transition:    transform 0.2s ease;
}

.cv-card:hover {
    border-color: rgba(201, 166, 107, 0.4);
}

.cv-card:has(input:checked) {
    border-color: var(--color-gold);
    background:   rgba(201, 166, 107, 0.06);
}

.cv-card:has(input:checked) .cv-card__mark {
    color: var(--color-gold);
}

.cv-card:has(input:checked) .cv-card__sub {
    color: rgba(239, 230, 215, 0.6);
}

.cv-card:has(input:checked) .cv-card__dot {
    border-color: var(--color-gold);
}

.cv-card:has(input:checked) .cv-card__dot::after {
    transform: scale(1);
}

.cv-card:focus-within {
    outline:        2px solid var(--color-gold);
    outline-offset: 2px;
}


/* =============================================================================
   6. UNDERLINE INPUT — Step 2 & 3 (text / email)
   Kutu değil, alt çizgi — sohbet hissi.
   ============================================================================= */

.cv-input {
    background:         transparent;
    border:             none;
    border-bottom:      1px solid rgba(58, 58, 58, 0.5);
    color:              var(--color-cream);
    font-family:        var(--font-display);
    font-size:          clamp( var(--text-lg), 2.5vw, var(--text-2xl) );
    font-weight:        var(--weight-light);
    letter-spacing:     -0.01em;
    padding:            var(--space-3) 0 var(--space-4);
    width:              100%;
    outline:            none;
    -webkit-appearance: none;
    appearance:         none;
    transition:         border-color 0.25s ease;
}

.cv-input:focus {
    border-bottom-color: var(--color-gold);
}

.cv-input::placeholder {
    color:      rgba(58, 58, 58, 0.8);
    font-style: italic;
}

/* Tarayıcı autofill mavi/sarı arka planını sıfırla */
.cv-input:-webkit-autofill,
.cv-input:-webkit-autofill:hover,
.cv-input:-webkit-autofill:focus {
    -webkit-box-shadow:      0 0 0 1000px var(--color-black) inset;
    -webkit-text-fill-color: var(--color-cream);
    caret-color:             var(--color-cream);
    transition:              background-color 5000s ease-in-out 0s,
                             border-color 0.25s ease;
}


/* =============================================================================
   7. BUDGET PILL'LERİ — Step 4
   ============================================================================= */

.cv-pills {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   var(--space-2);
}

.cv-pill {
    position:      relative;
    display:       flex;
    align-items:   center;
    cursor:        pointer;
    border:        1px solid rgba(58, 58, 58, 0.4);
    border-radius: var(--radius-base);
    padding:       var(--space-3) var(--space-4);
    transition:    border-color 0.2s ease, background 0.2s ease;
    user-select:   none;
}

.cv-pill input[type='radio'] {
    position: absolute;
    opacity:  0;
    width:    0;
    height:   0;
}

.cv-pill span {
    font-size:   var(--text-sm);
    color:       rgba(239, 230, 215, 0.5);
    transition:  color 0.2s ease;
    max-width:   none;
}

.cv-pill:hover {
    border-color: rgba(201, 166, 107, 0.35);
}

.cv-pill:hover span {
    color: var(--color-cream);
}

.cv-pill:has(input:checked) {
    border-color: var(--color-gold);
    background:   rgba(201, 166, 107, 0.07);
}

.cv-pill:has(input:checked) span {
    color: var(--color-gold);
}

.cv-pill:focus-within {
    outline:        2px solid var(--color-gold);
    outline-offset: 2px;
}


/* =============================================================================
   8. TEXTAREA — Step 5
   ============================================================================= */

.cv-input--ta {
    resize:      vertical;
    min-height:  140px;
    line-height: 1.65;
    font-size:   var(--text-lg); /* Biraz daha küçük — rahat yazım */
    border-bottom: 1px solid rgba(58, 58, 58, 0.5);
    padding-top: var(--space-3);
}


/* =============================================================================
   9. NAVİGASYON BUTONLARI
   ============================================================================= */

.cv-btn {
    appearance:      none;
    background:      none;
    border:          none;
    cursor:          pointer;
    font-family:     var(--font-mono);
    font-size:       var(--text-xs);
    letter-spacing:  0.14em;
    text-transform:  uppercase;
    transition:      color 0.2s ease, opacity 0.2s ease;
    padding:         0;
    line-height:     1;
}

.cv-btn:focus-visible {
    outline:        2px solid var(--color-gold);
    outline-offset: 4px;
    border-radius:  2px;
}

/* İleri butonu — altın dolu */
.cv-btn--next {
    display:         inline-flex;
    align-items:     center;
    gap:             var(--space-2);
    padding:         var(--space-3) var(--space-6);
    background:      var(--color-gold);
    color:           var(--color-black);
    border-radius:   var(--radius-base);
    font-size:       var(--text-xs);
    font-weight:     var(--weight-medium);
    transition:      background 0.2s ease;
}

.cv-btn--next:hover {
    background: var(--color-cream);
}

/* Skip — sadece metin, solda */
.cv-btn--skip {
    color:      var(--color-smoke);
    font-size:  var(--text-xs);
}

.cv-btn--skip:hover {
    color: var(--color-cream);
}

/* Submit error */
.cv-submit-err {
    font-size:   var(--text-xs);
    color:       #d97474;
    margin-top:  var(--space-4);
    min-height:  1.2em;
    opacity:     0;
    transition:  opacity 0.2s ease;
    max-width:   none;
}

.cv-submit-err.is-visible {
    opacity: 1;
}


/* =============================================================================
   10. SEND BRIEF — Gradient border (btn--gradient-border'ı extend eder)
   ============================================================================= */

.cv-btn--send {
    --gradient-angle: 0deg;
    position:        relative;
    padding:         2px;
    background:      conic-gradient(
                         from var(--gradient-angle),
                         var(--color-copper) 0%,
                         var(--color-gold)   30%,
                         var(--color-cream)  50%,
                         var(--color-gold)   70%,
                         var(--color-copper) 100%
                     );
    border:          none;
    border-radius:   var(--radius-base);
    animation:       rotate-gradient 4s linear infinite;
    display:         inline-flex;
    align-items:     stretch;
    cursor:          pointer;
}

.cv-btn--send .btn__inner {
    display:        block;
    background:     var(--color-black);
    color:          var(--color-cream);
    padding:        var(--space-3) var(--space-8);
    border-radius:  calc( var(--radius-base) - 2px );
    font-family:    var(--font-mono);
    font-size:      var(--text-xs);
    font-weight:    var(--weight-medium);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    transition:     background 0.2s ease;
    white-space:    nowrap;
}

.cv-btn--send:hover .btn__inner {
    background: rgba(10, 9, 8, 0.7);
}

.cv-btn--send:disabled {
    opacity:    0.6;
    cursor:     not-allowed;
    animation:  none;
}


/* =============================================================================
   11. BAŞARI DURUMU
   ============================================================================= */

/* display: flex burada belirtilmez — hidden attribute'u geçersiz kılar.
   Sadece [hidden] olmadığında flex olarak göster. */
.cv-success:not([hidden]) {
    display:        flex;
    flex-direction: column;
    align-items:    flex-start;
    gap:            var(--space-4);
    padding-top:    var(--space-8);
    animation:      cv-arrive 0.55s ease forwards;
}


/* =============================================================================
   11b. FORM BEKLEYEN DURUM — Form doldurulmadan önce gösterilir
   ============================================================================= */

.cv-pending {
    display:        flex;
    flex-direction: column;
    align-items:    flex-start;
    gap:            var(--space-4);
    padding-top:    var(--space-8);
    border-top:     1px solid rgba(58, 58, 58, 0.3);
    margin-top:     var(--space-6);
}

.cv-pending[hidden] {
    display: none;
}

.cv-pending__mark {
    font-size:     1.25rem;
    color:         rgba(201, 166, 107, 0.45);
    display:       block;
    margin-bottom: var(--space-2);
}

.cv-pending__label {
    font-family:    var(--font-mono);
    font-size:      9px;
    letter-spacing: 0.22em;
    color:          rgba(201, 166, 107, 0.55);
    max-width:      none;
}

.cv-pending__title {
    font-family:    var(--font-display);
    font-size:      clamp( var(--text-2xl), 4vw, 2.6rem );
    font-weight:    var(--weight-light);
    letter-spacing: -0.025em;
    color:          var(--color-cream);
    line-height:    1.1;
    opacity:        0.65;
}

.cv-pending__desc {
    font-size:   var(--text-base);
    color:       rgba(239, 230, 215, 0.35);
    max-width:   40ch;
    line-height: 1.7;
}

.cv-success__mark {
    display:       block;
    font-size:     1.25rem;
    color:         var(--color-gold);
    margin-bottom: var(--space-2);
    animation:     gold-pulse 2.5s ease-in-out infinite;
}

@keyframes gold-pulse {
    0%, 100% { opacity: 1;    }
    50%       { opacity: 0.4; }
}

.cv-success__label {
    font-family:    var(--font-mono);
    font-size:      9px;
    letter-spacing: 0.22em;
    color:          var(--color-gold);
    max-width:      none;
}

.cv-success__title {
    font-family:    var(--font-display);
    font-size:      clamp( var(--text-2xl), 4vw, 2.6rem );
    font-weight:    var(--weight-light);
    letter-spacing: -0.025em;
    color:          var(--color-cream);
    line-height:    1.1;
}

.cv-success__desc {
    font-size:   var(--text-base);
    color:       rgba(239, 230, 215, 0.55);
    max-width:   40ch;
    line-height: 1.7;
}


/* =============================================================================
   12. WHAT HAPPENS NEXT
   ============================================================================= */

.contact-what-next {
    margin-top:  var(--space-20);
    padding-top: var(--space-16);
    border-top:  1px solid rgba(58, 58, 58, 0.55);
}

.contact-what-next__label {
    font-family:    var(--font-mono);
    font-size:      9px;
    letter-spacing: 0.22em;
    color:          var(--color-smoke);
    display:        block;
    text-align:     center;
    margin-bottom:  var(--space-8);
    max-width:      none;
}

.contact-what-next__list {
    display:               grid;
    grid-template-columns: repeat(4, 1fr);
    gap:                   var(--space-6);
    list-style:            none;
}

.contact-what-next__item {
    display:        flex;
    flex-direction: column;
    gap:            var(--space-2);
    padding-top:    var(--space-4);
    border-top:     1px solid rgba(58, 58, 58, 0.25);
}

.contact-what-next__num {
    font-family:    var(--font-mono);
    font-size:      var(--text-xs);
    letter-spacing: 0.15em;
    color:          var(--color-gold);
    display:        block;
    margin-bottom:  var(--space-1);
    max-width:      none;
}

.contact-what-next__item strong {
    font-family: var(--font-display);
    font-size:   var(--text-base);
    font-weight: var(--weight-light);
    color:       var(--color-cream);
    line-height: 1.2;
}

.contact-what-next__item span {
    font-size:   var(--text-sm);
    color:       rgba(239, 230, 215, 0.4);
    line-height: 1.6;
    max-width:   none;
}


/* =============================================================================
   13. LOCATION STRIP
   ============================================================================= */

.contact-location-strip {
    display:         flex;
    align-items:     center;
    justify-content: center;
    flex-wrap:       wrap;
    gap:             var(--space-6);
    margin-top:      var(--space-12);
    padding-top:     var(--space-8);
    border-top:      1px solid rgba(58, 58, 58, 0.2);
}

.contact-location-strip__label {
    font-family:    var(--font-mono);
    font-size:      9px;
    letter-spacing: 0.22em;
    color:          var(--color-smoke);
    max-width:      none;
}

.contact-location-strip__city {
    font-family: var(--font-display);
    font-size:   var(--text-base);
    font-weight: var(--weight-light);
    color:       var(--color-cream);
}

.contact-location-strip__link {
    font-family:     var(--font-mono);
    font-size:       var(--text-xs);
    letter-spacing:  0.1em;
    color:           var(--color-smoke);
    text-decoration: none;
    transition:      color 0.2s ease;
    max-width:       none;
}

.contact-location-strip__link:hover {
    color: var(--color-gold);
}


/* =============================================================================
   14. RESPONSİVE
   ============================================================================= */

@media (max-width: 599px) {
    .cv-cards {
        grid-template-columns: 1fr;
    }

    .cv-pills {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767px) {
    .contact-what-next__list {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 480px) {
    .contact-what-next__list {
        grid-template-columns: 1fr;
    }
}

/* =============================================================================
   15. ÜRÜN LİSTESİ — Seçim + Miktar
   ============================================================================= */

.cv-selected-list {
    display:        flex;
    flex-direction: column;
    gap:            var(--space-2);
    margin-bottom:  var(--space-6);
}

.cv-qty-item {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         10px 14px;
    background:      rgba(201, 166, 107, 0.05);
    border:          1px solid rgba(201, 166, 107, 0.18);
    border-radius:   var(--radius-sm);
    animation:       cv-qty-arrive 0.38s cubic-bezier( 0.22, 1, 0.36, 1 ) forwards;
}

@keyframes cv-qty-arrive {
    from { opacity: 0; transform: translateY( -10px ); }
    to   { opacity: 1; transform: translateY( 0 );     }
}

.cv-qty-item__name {
    flex:        1;
    font-size:   var(--text-sm);
    color:       var(--color-cream);
    line-height: 1.3;
}

.cv-qty-item__ctrl {
    display:     flex;
    align-items: center;
    gap:         var(--space-4);
    flex-shrink: 0;
}

.cv-qty-item__btn {
    appearance:      none;
    background:      transparent;
    border:          1px solid rgba(201, 166, 107, 0.28);
    border-radius:   50%;
    color:           rgba(201, 166, 107, 0.80);
    cursor:          pointer;
    font-size:       16px;
    line-height:     1;
    width:           26px;
    height:          26px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    transition:      background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.cv-qty-item__btn:hover {
    background:   rgba(201, 166, 107, 0.10);
    border-color: var(--color-gold);
    color:        var(--color-gold);
}

.cv-qty-item__count {
    font-family: var(--font-mono);
    font-size:   13px;
    color:       var(--color-cream);
    min-width:   18px;
    text-align:  center;
}


@keyframes cv-shine {
    0%   { background-position:  120% 0; }
    50%  { background-position: -20%  0; }
    100% { background-position:  120% 0; }
}


/* =============================================================================
   17. SAYFA GİRİŞ ANİMASYONU — Siyahtan yükselme
   ============================================================================= */

@keyframes cv-page-rise {
    from { opacity: 0; transform: translateY( 36px ); }
    to   { opacity: 1; transform: translateY( 0 );    }
}

.page-contact .contact-header {
    animation: cv-page-rise 1.3s cubic-bezier( 0.16, 1, 0.3, 1 ) 0.1s both;
}

.page-contact .cv-wrap {
    animation: cv-page-rise 1.6s cubic-bezier( 0.16, 1, 0.3, 1 ) 0.35s both;
}


/* =============================================================================
   18. SUMMARY
   ============================================================================= */

.cv-summary {
    display:        flex;
    flex-direction: column;
    gap:            var(--space-3);
    padding:        var(--space-6);
    background:     rgba(201, 166, 107, 0.04);
    border:         1px solid rgba(201, 166, 107, 0.10);
    border-radius:  var(--radius-sm);
}

.cv-summary__row {
    display:               grid;
    grid-template-columns: 80px 1fr;
    gap:                   var(--space-5);
    align-items:           baseline;
}

.cv-summary__label {
    font-size:      10px;
    letter-spacing: 0.14em;
    color:          rgba(201, 166, 107, 0.65);
}

.cv-summary__value {
    font-size:   var(--text-sm);
    color:       var(--color-cream);
    line-height: 1.55;
    word-break:  break-word;
    white-space: pre-wrap;
}

/* Ghost (Edit) butonu */
.cv-btn--ghost {
    appearance:   none;
    background:   transparent;
    border:       1px solid rgba(239, 230, 215, 0.14);
    border-radius: var(--radius-sm);
    color:        rgba(239, 230, 215, 0.45);
    cursor:       pointer;
    font-family:  var(--font-mono);
    font-size:    11px;
    letter-spacing: 0.08em;
    padding:      10px 18px;
    transition:   border-color 0.2s ease, color 0.2s ease;
}

.cv-btn--ghost:hover {
    border-color: rgba(239, 230, 215, 0.35);
    color:        var(--color-cream);
}


/* =============================================================================
   18. REDUCED MOTION
   ============================================================================= */

@media (prefers-reduced-motion: reduce) {
    .cv-step.is-active .cv-step__sender,
    .cv-step.is-active .cv-step__q,
    .cv-step.is-active .cv-step__hint,
    .cv-step.is-active .cv-step__body,
    .cv-step.is-active .cv-step__nav,
    .cv-success,
    .cv-chip {
        animation: none;
        opacity:   1;
        transform: none;
    }

    .cv-progress__fill {
        transition: none;
    }

    .cv-success__mark {
        animation: none;
    }

    .cv-step.is-active .cv-step__q {
        animation:               cv-arrive 0.5s ease 0.08s forwards;
        -webkit-text-fill-color: initial;
        color:                   var(--color-cream);
    }

    .cv-qty-item { animation: none; }

    .page-contact .contact-header,
    .page-contact .cv-wrap {
        animation: none;
        opacity:   1;
        transform: none;
    }
}


/* =============================================================================
   19. UPSELL ADIM — Ek sipariş sorusu
   ============================================================================= */

[data-cv-upsell-custom-form] {
    display:        flex;
    flex-direction: column;
    gap:            var(--space-4);
    margin-top:     var(--space-5);
}

[data-cv-upsell-models-form] {
    margin-top: var(--space-5);
}

.cv-upsell-items {
    display:        flex;
    flex-direction: column;
    gap:            var(--space-2);
    margin-top:     var(--space-5);
}

.cv-upsell-item {
    display:       flex;
    align-items:   flex-start;
    gap:           var(--space-3);
    padding:       10px 14px;
    background:    rgba(201, 166, 107, 0.05);
    border:        1px solid rgba(201, 166, 107, 0.18);
    border-radius: var(--radius-sm);
    animation:     cv-qty-arrive 0.38s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.cv-upsell-item__text {
    flex:        1;
    font-size:   var(--text-sm);
    color:       var(--color-cream);
    line-height: 1.5;
}

.cv-upsell-item__rm {
    appearance:  none;
    background:  none;
    border:      none;
    color:       rgba(201, 166, 107, 0.45);
    cursor:      pointer;
    font-size:   18px;
    line-height: 1;
    padding:     0;
    flex-shrink: 0;
    transition:  color 0.15s ease;
}

.cv-upsell-item__rm:hover {
    color: var(--color-gold);
}


/* =============================================================================
   20. MARQUEE GALERİ — Bauhaus 2-satır, altın spotlight hover
   ============================================================================= */

.contact-marquee {
    width:            100%;
    overflow:         hidden;
    display:          flex;
    flex-direction:   column;
    gap:              var(--space-3);
    padding:          var(--space-6) 0;
    margin-bottom:    var(--space-14);
    mask-image:       linear-gradient(to right, transparent 0%, #000 5%, #000 95%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 5%, #000 95%, transparent 100%);
}

/* Row: overflow hidden, fixed height */
.contact-marquee__row {
    overflow: hidden;
    height:   clamp(180px, 22vw, 300px);
}

/* Track: horizontal flex, scrolling */
.contact-marquee__track {
    display:     flex;
    align-items: stretch;
    width:       max-content;
    height:      100%;
    gap:         var(--space-3);
    will-change: transform;
}

.contact-marquee__track--a {
    animation: contact-marquee-scroll 65s linear infinite;
}

.contact-marquee__track--b {
    animation: contact-marquee-scroll 82s linear -18s infinite;
}

@keyframes contact-marquee-scroll {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-50%, 0, 0); }
}

/* Bireysel kart */
.contact-marquee__item {
    position:      relative;
    display:       block;
    height:        100%;
    flex-shrink:   0;
    overflow:      hidden;
    border-radius: 4px;
    cursor:        default;
    transition:    transform    0.6s cubic-bezier(0.34, 1.2, 0.64, 1),
                   box-shadow   0.6s ease;
}

/* Bauhaus oranları — data-shape attribute ile */
.contact-marquee__item[data-shape="portrait"]  { aspect-ratio: 3 / 4; }
.contact-marquee__item[data-shape="landscape"] { aspect-ratio: 4 / 3; }
.contact-marquee__item[data-shape="square"]    { aspect-ratio: 1 / 1; }

/* Altın spotlight overlay */
.contact-marquee__item::before {
    content:        '';
    position:       absolute;
    inset:          0;
    z-index:        2;
    pointer-events: none;
    background:     radial-gradient(
        ellipse at 50% 10%,
        rgba(201, 166, 107, 0.48) 0%,
        rgba(201, 166, 107, 0.12) 40%,
        transparent 68%
    );
    opacity:    0;
    transition: opacity 0.5s ease;
}

/* Alt altın çizgi */
.contact-marquee__item::after {
    content:    '';
    position:   absolute;
    bottom:     0;
    left:       0;
    right:      0;
    height:     1px;
    background: linear-gradient(to right, transparent, rgba(201, 166, 107, 0.7), transparent);
    opacity:    0;
    transition: opacity 0.5s ease;
}

.contact-marquee__item:hover {
    transform:  translateY(-10px) scale(1.04);
    box-shadow: 0 0 0 1px rgba(201, 166, 107, 0.35),
                0 14px 44px rgba(201, 166, 107, 0.14),
                0 24px 64px rgba(0, 0, 0, 0.55);
}

.contact-marquee__item:hover::before,
.contact-marquee__item:hover::after {
    opacity: 1;
}

.contact-marquee__item img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    display:    block;
    transition: transform 0.65s cubic-bezier(0.34, 1.2, 0.64, 1);
}

.contact-marquee__item:hover img {
    transform: scale(1.1);
}

@media (prefers-reduced-motion: reduce) {
    .contact-marquee__track { animation: none; }
}


/* =============================================================================
   21. LIGHT MODE — Hardcoded cream rgba overrides
   rgba(239, 230, 215, ...) değerleri ivory (#F0EAE0) zeminde görünmez —
   espresso karşılıklarıyla override edilir.
   ============================================================================= */

/* Soru metni — background shorthand background-clip'i sıfırlar, gradient blok olarak taşar.
   Light modda gradient efekti kapatılır, düz espresso renk kullanılır. */
[data-theme="light"] .cv-step__q {
    background:              none;
    -webkit-background-clip: border-box;
    background-clip:         border-box;
    -webkit-text-fill-color: #1C1510;
    color:                   #1C1510;
    animation:               cv-arrive 0.5s ease 0.08s forwards;
}

/* Küçük hint metni */
[data-theme="light"] .cv-step__hint {
    color: rgba(28, 21, 16, 0.5);
}

/* Seçim kartı alt açıklaması */
[data-theme="light"] .cv-card {
    border-color: rgba(28, 21, 16, 0.2);
}

[data-theme="light"] .cv-card__mark {
    color: rgba(28, 21, 16, 0.45);
}

[data-theme="light"] .cv-card__sub {
    color: rgba(28, 21, 16, 0.5);
}

[data-theme="light"] .cv-card:has(input:checked) .cv-card__sub {
    color: rgba(28, 21, 16, 0.65);
}

[data-theme="light"] .cv-card__dot {
    border-color: rgba(28, 21, 16, 0.28);
}

/* Budget pill'leri */
[data-theme="light"] .cv-pill {
    border-color: rgba(28, 21, 16, 0.18);
}

[data-theme="light"] .cv-pill span {
    color: rgba(28, 21, 16, 0.55);
}

[data-theme="light"] .cv-pill:hover span {
    color: #1C1510;
}

/* Underline input */
[data-theme="light"] .cv-input {
    border-bottom-color: rgba(28, 21, 16, 0.25);
}

[data-theme="light"] .cv-input::placeholder {
    color: rgba(28, 21, 16, 0.35);
}

[data-theme="light"] .cv-input:-webkit-autofill,
[data-theme="light"] .cv-input:-webkit-autofill:hover,
[data-theme="light"] .cv-input:-webkit-autofill:focus {
    -webkit-box-shadow:      0 0 0 1000px #F0EAE0 inset;
    -webkit-text-fill-color: #1C1510;
    caret-color:             #1C1510;
}

/* Progress bar */
[data-theme="light"] .cv-progress {
    background: rgba(28, 21, 16, 0.12);
}

/* Ghost (edit) butonu */
[data-theme="light"] .cv-btn--ghost {
    border-color: rgba(28, 21, 16, 0.18);
    color:        rgba(28, 21, 16, 0.5);
}

[data-theme="light"] .cv-btn--ghost:hover {
    border-color: rgba(28, 21, 16, 0.35);
    color:        #1C1510;
}

/* Skip butonu */
[data-theme="light"] .cv-btn--skip {
    color: rgba(28, 21, 16, 0.45);
}

[data-theme="light"] .cv-btn--skip:hover {
    color: #1C1510;
}

/* Send brief — light modda okunabilir: padding restore + inner siyah bg */
[data-theme="light"] .cv-btn--send {
    padding: 2px; /* main.css btn--gradient-border'ın padding:0'ını geri al */
    background: conic-gradient(
        from var(--gradient-angle),
        var(--color-copper) 0%,
        var(--color-gold)   30%,
        #EFE6D7             50%,
        var(--color-gold)   70%,
        var(--color-copper) 100%
    );
}

[data-theme="light"] .cv-btn--send .btn__inner {
    background: var(--color-black);
    color:      var(--color-cream);
}

[data-theme="light"] .cv-btn--send:hover .btn__inner {
    background: rgba(10, 9, 8, 0.85);
    color:      var(--color-cream);
}

/* Başarı açıklaması */
[data-theme="light"] .cv-success__desc {
    color: rgba(28, 21, 16, 0.55);
}

/* Form bekleme mesajı — light modda espresso */
[data-theme="light"] .cv-pending {
    border-top-color: rgba(28, 21, 16, 0.12);
}

[data-theme="light"] .cv-pending__title {
    color:   #1C1510;
    opacity: 0.6;
}

[data-theme="light"] .cv-pending__desc {
    color: rgba(28, 21, 16, 0.45);
}

/* What Happens Next */
[data-theme="light"] .contact-what-next {
    border-top-color: rgba(28, 21, 16, 0.15);
}

[data-theme="light"] .contact-what-next__item {
    border-top-color: rgba(28, 21, 16, 0.12);
}

[data-theme="light"] .contact-what-next__item span {
    color: rgba(28, 21, 16, 0.5);
}

/* Location strip */
[data-theme="light"] .contact-location-strip {
    border-top-color: rgba(28, 21, 16, 0.1);
}