/* ============================================================================
   HOWTO + FEATURES — PREMIUM (REVIZE)
   3D tilt KALDIRILDI (çok sertti). Aesop / luxury site tarzı:
   - Yavaş, organik hover (700-900ms)
   - Sadece subtle lift + shadow grow + altın kenar halo
   - Pattern arka planlar her zaman %25 opacity'de görünür (hover'da %70'e çıkar)
   - Görsel slot'ları hazır — kullanıcı GPT-image ile fotoğraf üretip ekleyince
     CSS'teki `--card-bg` değişkenini override etmek yeterli
   ============================================================================ */

/* === HOWTO GRID — 3 card === */
.howto-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
    gap: 32px !important;
    max-width: 1180px !important;
    margin: 36px auto 0 !important;
}

.howto-step {
    background:
        linear-gradient(165deg,
            rgba(255, 252, 246, 0.96) 0%,
            rgba(248, 242, 228, 0.92) 100%) !important;
    border: 1px solid rgba(154, 123, 40, 0.22) !important;
    border-radius: 6px !important;
    padding: 60px 36px 40px !important;
    position: relative !important;
    overflow: hidden !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        0 14px 30px rgba(123, 67, 72, 0.08),
        0 2px 8px rgba(123, 67, 72, 0.05) !important;
    transition:
        transform 800ms cubic-bezier(0.22, 0.61, 0.36, 1),
        box-shadow 800ms cubic-bezier(0.22, 0.61, 0.36, 1),
        border-color 800ms cubic-bezier(0.22, 0.61, 0.36, 1) !important;
}

/* Her zaman görünür dekoratif arka plan (hover'da güçlenir) */
.howto-step::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 130%;
    opacity: 0.28;
    transition: opacity 900ms cubic-bezier(0.22, 0.61, 0.36, 1),
                background-size 900ms cubic-bezier(0.22, 0.61, 0.36, 1);
    z-index: 0;
}

/* Card 1 — parchment + quill */
.howto-step[data-step="01"]::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400'%3E%3Cg fill='none' stroke='%23B8893A' stroke-width='0.6' opacity='0.55'%3E%3Cpath d='M120 80 Q120 60 140 60 L260 60 Q280 60 280 80 L280 320 Q280 340 260 340 L140 340 Q120 340 120 320 Z'/%3E%3Cline x1='150' y1='110' x2='250' y2='110'/%3E%3Cline x1='150' y1='140' x2='235' y2='140'/%3E%3Cline x1='150' y1='170' x2='250' y2='170'/%3E%3Cline x1='150' y1='200' x2='225' y2='200'/%3E%3Cline x1='150' y1='230' x2='250' y2='230'/%3E%3Cpath d='M310 30 L350 70 L240 180 L200 180 L200 140 Z' fill='%23B8893A' fill-opacity='0.18'/%3E%3Ccircle cx='340' cy='40' r='3' fill='%23B8893A'/%3E%3C/g%3E%3C/svg%3E");
}
/* Card 2 — sacred geometry mandala */
.howto-step[data-step="02"]::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400'%3E%3Cg fill='none' stroke='%23B8893A' stroke-width='0.6' opacity='0.55'%3E%3Ccircle cx='200' cy='200' r='160'/%3E%3Ccircle cx='200' cy='200' r='120'/%3E%3Ccircle cx='200' cy='200' r='80'/%3E%3Ccircle cx='200' cy='200' r='40'/%3E%3Cpath d='M200 40 L210 190 L360 200 L210 210 L200 360 L190 210 L40 200 L190 190 Z' fill='%23B8893A' fill-opacity='0.22'/%3E%3Cline x1='40' y1='200' x2='360' y2='200'/%3E%3Cline x1='200' y1='40' x2='200' y2='360'/%3E%3Cline x1='87' y1='87' x2='313' y2='313'/%3E%3Cline x1='313' y1='87' x2='87' y2='313'/%3E%3C/g%3E%3C/svg%3E");
}
/* Card 3 — scroll with star seal */
.howto-step[data-step="03"]::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400'%3E%3Cg fill='none' stroke='%23B8893A' stroke-width='0.6' opacity='0.55'%3E%3Cpath d='M100 80 Q100 60 120 60 L280 60 Q300 60 300 80 L300 320 Q300 340 280 340 L120 340 Q100 340 100 320 Z'/%3E%3Cpath d='M200 200 L210 240 L250 240 L218 264 L228 304 L200 280 L172 304 L182 264 L150 240 L190 240 Z' fill='%23B8893A' fill-opacity='0.30'/%3E%3Cline x1='130' y1='110' x2='270' y2='110'/%3E%3Cline x1='130' y1='140' x2='270' y2='140'/%3E%3Cline x1='130' y1='170' x2='250' y2='170'/%3E%3Ccircle cx='200' cy='130' r='2' fill='%23B8893A'/%3E%3C/g%3E%3C/svg%3E");
}

.howto-step:hover {
    transform: translateY(-6px);
    border-color: rgba(154, 123, 40, 0.45) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.95),
        0 32px 60px rgba(123, 67, 72, 0.16),
        0 8px 20px rgba(123, 67, 72, 0.08),
        0 0 44px rgba(212, 175, 55, 0.22) !important;
}
.howto-step:hover::after {
    opacity: 0.62;
    background-size: 135%;
}

/* Numara badge */
.howto-step::before {
    z-index: 2 !important;
    font-size: 1rem !important;
    letter-spacing: 0.32em !important;
}

/* Content üstte */
.howto-step h3,
.howto-step p {
    position: relative !important;
    z-index: 2 !important;
}
.howto-step h3 {
    margin-top: 2rem !important;
    font-size: 1.55rem !important;
}

/* === FEATURES GRID === */
.features-grid {
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)) !important;
    max-width: 1180px !important;
    gap: 22px !important;
    margin: 36px auto 0 !important;
}

.feature-card {
    background:
        linear-gradient(165deg,
            rgba(255, 252, 246, 0.96) 0%,
            rgba(248, 242, 228, 0.92) 100%) !important;
    border: 1px solid rgba(154, 123, 40, 0.20) !important;
    border-top: 1px solid rgba(154, 123, 40, 0.20) !important;
    border-radius: 6px !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        0 10px 22px rgba(123, 67, 72, 0.07),
        0 2px 6px rgba(123, 67, 72, 0.04) !important;
    padding: 34px 30px 34px 92px !important;
    position: relative !important;
    overflow: hidden !important;
    transition:
        transform 800ms cubic-bezier(0.22, 0.61, 0.36, 1),
        box-shadow 800ms cubic-bezier(0.22, 0.61, 0.36, 1),
        border-color 800ms cubic-bezier(0.22, 0.61, 0.36, 1),
        padding 800ms cubic-bezier(0.22, 0.61, 0.36, 1) !important;
}
.feature-card:last-child {
    border-bottom: 1px solid rgba(154, 123, 40, 0.20) !important;
}

/* Feature card SVG icon — sol kenarda 44px parlak altın */
.feature-card .info-icon {
    display: block !important;
    position: absolute !important;
    left: 28px !important;
    top: 32px !important;
    width: 44px !important;
    height: 44px !important;
    color: var(--gold-bright, #9A7B28) !important;
    opacity: 0.85;
    transition: opacity 700ms ease, transform 700ms ease;
    z-index: 2;
}
.feature-card .info-icon svg {
    width: 100% !important;
    height: 100% !important;
}
.feature-card:hover .info-icon {
    opacity: 1;
    transform: scale(1.06);
}

/* Numara badge — sağ üstte */
.feature-card::before {
    top: 24px !important;
    right: 26px !important;
    left: auto !important;
    font-size: 0.85rem !important;
    letter-spacing: 0.3em !important;
    z-index: 2 !important;
}

/* Feature kart dekoratif arka plan — her zaman görünür */
.feature-card::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 200'%3E%3Cg fill='none' stroke='%23B8893A' stroke-width='0.5' opacity='0.50'%3E%3Ccircle cx='340' cy='40' r='36'/%3E%3Ccircle cx='340' cy='40' r='22'/%3E%3Cpath d='M340 4 L344 36 L376 40 L344 44 L340 76 L336 44 L304 40 L336 36 Z' fill='%23B8893A' fill-opacity='0.25'/%3E%3Cline x1='280' y1='40' x2='304' y2='40'/%3E%3Cline x1='340' y1='80' x2='340' y2='100'/%3E%3C/g%3E%3C/svg%3E");
    background-position: top right;
    background-repeat: no-repeat;
    background-size: 50%;
    opacity: 0.32;
    transition: opacity 900ms cubic-bezier(0.22, 0.61, 0.36, 1),
                background-size 900ms cubic-bezier(0.22, 0.61, 0.36, 1);
    z-index: 0;
}

.feature-card:hover {
    transform: translateY(-4px);
    border-color: rgba(154, 123, 40, 0.42) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.95),
        0 28px 52px rgba(123, 67, 72, 0.13),
        0 6px 16px rgba(123, 67, 72, 0.08),
        0 0 36px rgba(212, 175, 55, 0.18) !important;
}
.feature-card:hover::after {
    opacity: 0.62;
    background-size: 52%;
}

.feature-card h3,
.feature-card p {
    position: relative !important;
    z-index: 2 !important;
}

/* ============================================================================
   CTA BANNER — "Hemen Deneyin" premium upgrade
   2 sütun: sol içerik + sağda dönen mandala ornament. Mistik aura + subtle animations.
   ============================================================================ */
.cta-banner-section {
    padding: 80px 20px 100px !important;
    position: relative;
}

.cta-banner {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 1.4fr 1fr !important;
    align-items: center !important;
    gap: 60px !important;
    max-width: 1180px !important;
    margin: 0 auto !important;
    padding: 80px clamp(2rem, 6vw, 6rem) !important;
    background:
        radial-gradient(ellipse 70% 80% at 0% 50%,
            rgba(194, 144, 107, 0.10) 0%,
            transparent 60%),
        radial-gradient(ellipse 60% 70% at 100% 50%,
            rgba(155, 89, 182, 0.08) 0%,
            transparent 60%),
        linear-gradient(135deg,
            rgba(255, 252, 246, 0.96) 0%,
            rgba(248, 242, 228, 0.92) 100%) !important;
    border: 1px solid rgba(154, 123, 40, 0.28) !important;
    border-radius: 6px !important;
    overflow: hidden !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.95),
        0 30px 70px rgba(123, 67, 72, 0.14),
        0 4px 16px rgba(123, 67, 72, 0.08) !important;
}

/* Sağda dönen mandala — sacred geometry her zaman görünür */
.cta-banner::before {
    content: '';
    position: absolute;
    right: -80px;
    top: 50%;
    transform: translateY(-50%);
    width: 480px;
    height: 480px;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 480 480'%3E%3Cdefs%3E%3CradialGradient id='g' cx='50%25' cy='50%25' r='50%25'%3E%3Cstop offset='0%25' stop-color='%23D4A961' stop-opacity='0.45'/%3E%3Cstop offset='100%25' stop-color='%23D4A961' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='240' cy='240' r='100' fill='url(%23g)'/%3E%3Cg fill='none' stroke='%23B8893A' stroke-width='0.6' opacity='0.7'%3E%3Ccircle cx='240' cy='240' r='220'/%3E%3Ccircle cx='240' cy='240' r='180'/%3E%3Ccircle cx='240' cy='240' r='140'/%3E%3Ccircle cx='240' cy='240' r='100'/%3E%3Ccircle cx='240' cy='240' r='60'/%3E%3Cline x1='20' y1='240' x2='460' y2='240'/%3E%3Cline x1='240' y1='20' x2='240' y2='460'/%3E%3Cline x1='84' y1='84' x2='396' y2='396'/%3E%3Cline x1='396' y1='84' x2='84' y2='396'/%3E%3Cpath d='M240 40 L252 228 L460 240 L252 252 L240 440 L228 252 L20 240 L228 228 Z' fill='%23B8893A' fill-opacity='0.18'/%3E%3C/g%3E%3Cg fill='%23B8893A' opacity='0.65'%3E%3Ccircle cx='240' cy='40' r='3.5'/%3E%3Ccircle cx='440' cy='240' r='3.5'/%3E%3Ccircle cx='240' cy='440' r='3.5'/%3E%3Ccircle cx='40' cy='240' r='3.5'/%3E%3Ccircle cx='84' cy='84' r='2.5'/%3E%3Ccircle cx='396' cy='84' r='2.5'/%3E%3Ccircle cx='396' cy='396' r='2.5'/%3E%3Ccircle cx='84' cy='396' r='2.5'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: 0.85;
    animation: ctaMandalaRotate 60s linear infinite;
    z-index: 0;
}

/* Soft pembe halo — arka katmanda nefes alıyor */
.cta-banner::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(circle at 75% 50%,
        rgba(249, 146, 253, 0.12) 0%,
        transparent 50%);
    animation: ctaHaloPulse 6s ease-in-out infinite;
    z-index: 0;
}

@keyframes ctaMandalaRotate {
    to { transform: translateY(-50%) rotate(360deg); }
}
@keyframes ctaHaloPulse {
    0%, 100% { opacity: 0.55; }
    50%      { opacity: 1; }
}

.cta-banner > * { position: relative; z-index: 2; }

.cta-title {
    font-family: 'Cormorant Garamond', serif !important;
    font-style: italic !important;
    font-weight: 400 !important;
    font-size: clamp(2.4rem, 5vw, 4.2rem) !important;
    line-height: 1.05 !important;
    letter-spacing: -0.01em !important;
    margin: 0 0 1.2rem !important;
    background: linear-gradient(180deg,
        #4A3618 0%,
        #8B6818 50%,
        #C9963A 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    text-shadow: none !important;
}

.cta-desc {
    font-family: 'Cormorant Garamond', serif !important;
    font-size: 1.15rem !important;
    line-height: 1.65 !important;
    color: #5C4A3A !important;
    -webkit-text-fill-color: #5C4A3A !important;
    max-width: 460px !important;
    margin: 0 0 2rem !important;
}

/* CTA Button — premium gold */
.cta-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 1.2em !important;
    font-family: 'Cinzel Decorative', 'Cinzel', Georgia, serif !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.28em !important;
    text-transform: uppercase !important;
    padding: 1.15rem 2.4rem !important;
    background: linear-gradient(135deg,
        #2A1810 0%,
        #1A0E08 50%,
        #2A1810 100%) !important;
    background-size: 200% 100% !important;
    color: #F5E6C9 !important;
    border: 1px solid rgba(194, 144, 107, 0.4) !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    position: relative !important;
    overflow: hidden !important;
    box-shadow:
        0 10px 28px rgba(123, 67, 72, 0.22),
        0 2px 6px rgba(123, 67, 72, 0.10),
        inset 0 1px 0 rgba(194, 144, 107, 0.25) !important;
    transition:
        background-position 700ms cubic-bezier(0.22, 0.61, 0.36, 1),
        box-shadow 700ms cubic-bezier(0.22, 0.61, 0.36, 1),
        letter-spacing 700ms cubic-bezier(0.22, 0.61, 0.36, 1),
        transform 700ms cubic-bezier(0.22, 0.61, 0.36, 1),
        border-color 700ms ease !important;
}

/* Shimmer sweep — hover'da soldan sağa kayar */
.cta-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(247, 230, 215, 0.30) 50%,
        transparent 100%);
    transform: skewX(-20deg);
    transition: left 1100ms cubic-bezier(0.22, 0.61, 0.36, 1);
    pointer-events: none;
}

.cta-btn:hover {
    background-position: 100% 0 !important;
    border-color: rgba(194, 144, 107, 0.7) !important;
    letter-spacing: 0.32em !important;
    transform: translateY(-2px);
    box-shadow:
        0 18px 40px rgba(123, 67, 72, 0.28),
        0 4px 12px rgba(123, 67, 72, 0.14),
        0 0 32px rgba(194, 144, 107, 0.35),
        inset 0 1px 0 rgba(194, 144, 107, 0.45) !important;
}
.cta-btn:hover::before { left: 130%; }

.cta-btn-text {
    position: relative;
    z-index: 2;
    background: linear-gradient(90deg, #EFDDD0 0%, #F2D9C2 50%, #EFDDD0 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.cta-btn-arrow {
    position: relative;
    z-index: 2;
    color: #F2D9C2;
    font-size: 1.1em;
    line-height: 1;
    transition: transform 700ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.cta-btn:hover .cta-btn-arrow { transform: translateX(6px); }

/* Mobile: tek sütun, mandala küçülüp alta kayar */
@media (max-width: 880px) {
    .cta-banner {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
        padding: 60px 30px !important;
    }
    .cta-banner::before {
        width: 320px;
        height: 320px;
        right: -120px;
        top: auto;
        bottom: -100px;
        transform: none;
        opacity: 0.4;
        animation: ctaMandalaRotate 90s linear infinite;
    }
    .cta-desc { max-width: none !important; }
}