/* Disabled button styling */
    .craniocatch-submit-button:disabled {
        background-color: #cccccc;
        color: #666666;
        cursor: not-allowed;
        opacity: 0.6;
        border: 1px solid #cccccc;
    }
    
    .craniocatch-submit-button:disabled:hover {
        background-color: #cccccc;
        transform: none;
    }
    
    /* Product selection feedback */
    .craniocatch-product-selection-warning {
        color: #e74c3c;
        font-size: 12px;
        margin-top: 10px;
        display: none;
    }
    
    /* intl-tel-input styling */
    .iti {
        width: 100%;
    }
    
    .iti__flag-container {
        border-right: 1px solid #ddd;
    }
    
    .iti__country-list {
        max-height: 200px;
        overflow-y: auto;
        font-size: 14px;
        line-height: 1.3;
    }

    .iti__country {
        display: flex;
        align-items: center;
        padding: 6px 10px;
        font-size: 14px;
        line-height: 1.3;
    }

    .iti__flag-box {
        display: inline-block;
        width: 20px;
        margin-right: 8px;
    }

    .iti__country-name {
        font-size: 14px;
        font-weight: 400;
        margin-right: 6px;
        white-space: nowrap;
    }

    .iti__dial-code {
        font-size: 13px;
        color: #888;
    }

    .craniocatch-form-input.iti__tel-input {
        padding-left: 60px;
    }

    /* ==========================================================================
       MODAL TASARIMI - tek blok
       base.css bu siniflarin tamamini tanimliyor; bu <style> ondan sonra
       geldigi icin ayni ozgullukte ezmek yeterli.
       ========================================================================== */

    /* ---- Baslik ---- */
    .craniocatch-modal-title {
        margin-bottom: 12px;
        font-size: 20px;
        line-height: 1.3;
        font-weight: 500;
    }

    .craniocatch-modal-title span {
        display: block;
        margin: 0;
        font-size: inherit;
        line-height: inherit;
    }

    .cc-title__plain {
        font-weight: 500;
        color: #0B0B0F;
    }

    .cc-title__accent {
        font-weight: 700;
        background: linear-gradient(90deg, #FF6262 0%, #7640E8 55%, #3291FF 100%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent;
    }

    .craniocatch-modal-subtitle,
    .craniocatch-modal-description {
        margin-bottom: 6px;
        font-size: 13px;
        line-height: 1.55;
        font-weight: 400;
        color: #666D7C;
        opacity: 1;
    }

    .craniocatch-modal-description {
        margin-bottom: 24px;
    }

    .craniocatch-modal-content {
        width: min(1180px, calc(100% - 32px));
        max-width: 1180px;
        max-height: calc(100vh - 32px);
    }

    /* Cerez cubugu ve sabit telefon kisayolu modal acikken formun ustune
       binmemeli. */
    .craniocatch-modal-overlay {
        z-index: 10000;
    }

    .craniocatch-modal-left {
        flex: 0 0 300px;
        padding: 32px 28px;
        background: #fff;
        border-right: 1px solid #EEF0F4;
    }

    .craniocatch-modal-center {
        min-width: 0;
        padding: 32px;
        overflow-y: auto;
    }

    .craniocatch-modal-right {
        flex: 0 0 300px;
    }

    /* Kapatma butonu: base.css hover'da 90 derece dondurup buyutuyordu */
    .craniocatch-modal-close,
    .craniocatch-modal-close:hover,
    .craniocatch-modal-close:focus {
        transform: none;
        background: none;
        color: #fff;
        transition: none;
    }

    /* ---- Urun modulleri ---- */
    .craniocatch-product-item {
        align-items: center;
        gap: 0;
        padding: 12px 14px;
        margin-bottom: 10px;
        border: 1px solid rgba(179, 185, 194, .4);
        border-radius: 12px;
        background-color: #fff;
        transform: none;
        box-shadow: none;
        overflow: visible;
    }

    .craniocatch-product-item::before {
        display: none;
    }

    /* Secili modulde yalnizca kenarlik degisir, zemin beyaz kalir */
    .craniocatch-product-item.craniocatch-selected {
        transform: none;
        box-shadow: none;
        border-color: transparent;
        background-color: transparent;
        background-image:
            linear-gradient(#fff, #fff),
            linear-gradient(90deg, #FF6262 0%, #7640E8 55%, #3291FF 100%);
        background-origin: border-box;
        background-clip: padding-box, border-box;
    }

    .craniocatch-product-icon {
        flex: 0 0 auto;
        align-self: center;
        width: 18px;
        height: 18px;
        margin-right: 10px;
        border-radius: 0;
        background: url("../images/demo-request/deactive-module.21853f567a51.svg") center / contain no-repeat;
        transform: none;
    }

    .craniocatch-product-item.craniocatch-selected .craniocatch-product-icon {
        background: url("../images/demo-request/active-module.06b3bfae28cf.svg") center / contain no-repeat;
        transform: none;
    }

    .craniocatch-product-name {
        display: block;
        margin: 0;
        font-size: 12px;
        line-height: 18px;
        font-weight: 600;
        color: #0B0B0F;
    }

    /* ---- Form ---- */
    .craniocatch-form-row {
        gap: 16px;
        margin-bottom: 14px;
    }

    .craniocatch-form-group.craniocatch-full-width {
        margin-bottom: 14px;
    }

    .craniocatch-form-label {
        display: flex;
        align-items: baseline;
        gap: 3px;
        font-size: 14px;
        font-weight: 600;
        color: #0B0B0F;
    }

    /* Zorunlu alan isareti */
    .cc-required {
        display: inline;
        margin: 0;
        font-size: inherit;
        line-height: inherit;
        color: #E5484D;
    }

    .craniocatch-form-input::placeholder,
    .craniocatch-form-textarea::placeholder {
        font-size: 12px;
        color: #666D7C;
    }

    .craniocatch-form-select {
        font-size: 12px;
    }

    .craniocatch-form-input,
    .craniocatch-form-select,
    .craniocatch-form-textarea {
        height: 32px;
        padding: 0 12px;
        border: 1px solid rgba(179, 185, 194, .4);
        border-radius: 9px;
        font-size: 13px;
        line-height: 1.2;
        transform: none;
    }

    /* Mesaj alani sabit yukseklikte olmasin */
    .craniocatch-form-textarea {
        height: auto;
        min-height: 96px;
        padding: 9px 12px;
    }

    .craniocatch-form-input:hover,
    .craniocatch-form-select:hover,
    .craniocatch-form-textarea:hover {
        border-color: rgba(179, 185, 194, .7);
    }

    /* Odaklanan alanda gradient kenarlik */
    .craniocatch-form-input:focus,
    .craniocatch-form-select:focus,
    .craniocatch-form-textarea:focus {
        border-color: transparent;
        box-shadow: none;
        transform: none;
        background-color: transparent;
        background-image:
            linear-gradient(#fff, #fff),
            linear-gradient(90deg, #FF6262 0%, #7640E8 55%, #3291FF 100%);
        background-origin: border-box;
        background-clip: padding-box, border-box;
    }

    .craniocatch-form-actions {
        display: grid;
        grid-template-columns: minmax(304px, 1fr) auto;
        align-items: end;
        gap: 24px;
        margin-top: 16px;
    }

    .craniocatch-form-actions .craniocatch-form-group {
        grid-column: auto;
        min-width: 0;
        margin: 0;
    }

    /* reCAPTCHA ile buton ayni alt hizada tutulur. */
    .craniocatch-modal-content .craniocatch-submit-section {
        display: flex;
        align-items: flex-end;
        justify-content: flex-end;
        margin: 0;
    }

    /* ---- Gonder butonu: gradient yazi + gradient kenarlik ---- */
    .craniocatch-submit-button {
        position: relative;
        min-width: 0;
        padding: 10px 26px;
        border: 1px solid transparent;
        border-radius: 10px;
        background: linear-gradient(90deg, #FF6262 0%, #7640E8 55%, #3291FF 100%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent;
        font-size: 13px;
        font-weight: 600;
        transform: none;
        box-shadow: none;
    }

    /* base.css'teki parlama efekti (::before) demo modalinda istenmiyor; burada
       gradyan kenarlik ::after ile ciziliyor.

       DIKKAT: bu kural eskiden kapsamsizdi (".craniocatch-submit-button::before")
       ve iletisim sayfasindaki Gonder butonunu da vuruyordu. Orada gradyan
       kenarlik tam da ::before ile ciziliyor; newContact.css'in kurali daha
       ozgul olsa bile "display" ozelligini yalnizca burasi tanimladigi icin
       kenarlik gorunmez oluyordu. Artik yalnizca demo modalinin icinde gecerli. */
    #craniocatchModal .craniocatch-submit-button::before {
        display: none;
    }

    .craniocatch-submit-button:hover {
        background: linear-gradient(90deg, #FF6262 0%, #7640E8 55%, #3291FF 100%);
        -webkit-background-clip: text;
        background-clip: text;
        transform: none;
        box-shadow: none;
    }

    @supports ((-webkit-mask-composite: xor) or (mask-composite: exclude)) {
        .craniocatch-submit-button::after {
            content: "";
            position: absolute;
            inset: 0;
            border-radius: inherit;
            padding: 1px;
            background: linear-gradient(90deg, #FF6262 0%, #7640E8 55%, #3291FF 100%);
            -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            -webkit-mask-composite: xor;
            mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            mask-composite: exclude;
            pointer-events: none;
        }
    }

    /* Pasif durumda marka stili korunur ama eylemin henuz kullanilamayacagi
       gorulur. */
    .craniocatch-submit-button:disabled,
    .craniocatch-submit-button:disabled:hover {
        opacity: .5;
        border-color: transparent;
        background: linear-gradient(90deg, #FF6262 0%, #7640E8 55%, #3291FF 100%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent;
        cursor: not-allowed;
        transform: none;
    }

    /* ---- Sag panel + animasyonlu rozet (Landing Page'deki uni-hero-flagship__badge) ---- */
    .craniocatch-modal-right {
        position: relative;
        overflow: hidden;
    }

    .cc-modal-photo {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .cc-badge {
        position: absolute;
        right: clamp(12px, 4%, 34px);
        bottom: clamp(12px, 5%, 40px);
        width: clamp(96px, 32%, 150px);
        aspect-ratio: 1;
        display: grid;
        place-items: center;
        overflow: visible;
        z-index: 2;
    }

    /* Fotograf uzerinde okunur olsun diye Landing'deki %10 opaklik yukseltildi */
    .cc-badge__pulse {
        position: absolute;
        inset: -8%;
        z-index: 0;
        display: block;
        margin: 0;
        border-radius: 999px;
        background: linear-gradient(90deg, rgba(255, 98, 98, .38) 0%, rgba(118, 64, 232, .38) 55%, rgba(50, 145, 255, .38) 100%);
        opacity: 0;
        transform: scale(1.08);
        animation: cc-badge-pulse 6.5s cubic-bezier(.12, .46, .22, 1) infinite;
        animation-delay: var(--pulse-delay);
        pointer-events: none;
    }

    .cc-badge__core {
        position: relative;
        z-index: 1;
        display: grid;
        place-items: center;
        width: 100%;
        height: 100%;
        margin: 0;
        font-size: 0;
    }

    .cc-badge__logo {
        width: 100%;
        height: 100%;
        object-fit: contain;
        display: block;
    }

    @keyframes cc-badge-pulse {
        0%   { opacity: 0;   transform: scale(1.08); }
        14%  { opacity: .65; }
        48%  { opacity: .22; }
        100% { opacity: 0;   transform: scale(2); }
    }

    @media (prefers-reduced-motion: reduce) {
        .cc-badge__pulse { animation: none; opacity: .3; }
    }

    /* Fotograf orta ekranlarda formu gereksiz daraltmasin; sol secim paneli
       ile form yan yana kalmaya devam eder. */
    @media (max-width: 1100px) {
        .craniocatch-modal-content {
            width: min(920px, calc(100% - 32px));
        }

        .craniocatch-modal-right {
            display: none;
        }

        .craniocatch-modal-close,
        .craniocatch-modal-close:hover,
        .craniocatch-modal-close:focus {
            color: #0B0B0F;
        }
    }

    @media (max-width: 760px) {
        .craniocatch-modal-content {
            flex-direction: column;
            width: min(680px, calc(100% - 24px));
            max-height: calc(100vh - 24px);
            overflow-y: auto;
        }

        .craniocatch-modal-left {
            flex: none;
            width: 100%;
            padding: 24px;
            border-right: 0;
            border-bottom: 1px solid #EEF0F4;
        }

        .craniocatch-modal-center {
            width: 100%;
            padding: 24px;
            overflow: visible;
        }

        .craniocatch-product-selection {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 10px;
            margin-bottom: 0;
        }

        .craniocatch-product-item {
            width: 100%;
            margin: 0;
        }

        .craniocatch-product-selection-warning {
            grid-column: 1 / -1;
        }
    }

    @media (max-width: 600px) {
        .craniocatch-form-row,
        .craniocatch-form-actions {
            grid-template-columns: 1fr;
        }

        .craniocatch-form-actions {
            align-items: stretch;
            gap: 14px;
        }

        .craniocatch-modal-content .craniocatch-submit-section {
            justify-content: stretch;
        }

        .craniocatch-submit-button {
            width: 100%;
        }
    }

    @media (max-width: 420px) {
        .craniocatch-modal-content {
            width: calc(100% - 12px);
            max-height: calc(100vh - 12px);
        }

        .craniocatch-modal-left,
        .craniocatch-modal-center {
            padding: 18px;
        }

        .craniocatch-modal-title {
            font-size: 19px;
        }

        .craniocatch-product-selection {
            grid-template-columns: 1fr;
        }

        #g-recaptcha-demo {
            width: 268px;
            height: 69px;
            transform: scale(.88);
            transform-origin: left top;
        }
    }

/* ==========================================================================
   Telefon alani: ulke secici (intl-tel-input) olculeri
   --------------------------------------------------------------------------
   ".iti__selected-flag" ve ".iti__selected-dial-code" icin projede hic kural
   yoktu; kutuphane de bunlara font-size vermiyor. Sonucta "+90" yazisi
   govdeden 16px miras aliyordu, oysa yanindaki input 14px. Alan icinde iki
   farkli punto yan yana durdugu icin modalla uyumsuz gorunuyordu.

   Asagida hem secili ulke kutusu hem acilan liste, formun kendi olculerine
   cekiliyor: 14px metin, inputlarla ayni #e8e8e8 kenarlik ve 8px kose.
   ========================================================================== */

/* Tum alt ogeler tek yerden punto alsin */
.iti {
    font-size: 14px;
}

/* Telefon inputu diger alanlardan GENIS duruyordu.
   Sebep: ".craniocatch-form-group" bir flex sutun, bu yuzden icindeki alanlar
   esneyerek (align-items:stretch) tam genislige yayiliyor. Ama telefon inputu
   intl-tel-input tarafindan ".iti" div'inin icine alindigi icin artik flex
   ogesi degil; esnemiyor ve kendi dogal genisligini kullaniyor. Ustune
   padding-left:60px + padding-right:36px eklenince komsularini asiyordu.
   ".iti *" zaten box-sizing:border-box verdigi icin %100 dolgu ve kenarligi
   kapsiyor; boylece genislik diger alanlarla birebir ayni oluyor. */
.iti input,
.iti input[type="tel"],
.iti .craniocatch-form-input {
    width: 100%;
}

/* --- Input icindeki secili ulke kutusu --- */
.iti__selected-flag {
    padding: 0 8px;
    font-size: 14px;
}

/* Varsayilan gri blok yerine seffaf: input ile kesintisiz gorunuyor */
.iti--separate-dial-code .iti__selected-flag {
    background-color: transparent;
}

.iti--allow-dropdown .iti__flag-container:hover .iti__selected-flag {
    background-color: rgba(118, 64, 232, .05);
    border-radius: 6px 0 0 6px;
}

.iti--separate-dial-code .iti__selected-dial-code {
    margin-left: 6px;
    font-size: 14px;
    font-weight: 400;
    color: #333;
}

.iti__arrow {
    margin-left: 6px;
    border-top-color: #8A90A0;
}

.iti__arrow--up {
    border-bottom-color: #8A90A0;
}

/* --- Acilan liste --- */
.iti__country-list {
    padding: 4px;
    border: 1px solid #e8e8e8;
    border-radius: 8px;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .12);
    font-size: 14px;
}

.iti__country {
    padding: 7px 8px;
    border-radius: 6px;
    font-size: 14px;
}

.iti__country-name {
    font-size: 14px;
    color: #0d0f2c;
}

.iti__dial-code {
    font-size: 13px;
    color: #8A90A0;
}

/* Vurgulanan satir: notr gri yerine marka tonu */
.iti__country.iti__highlight,
.iti__country:hover {
    background-color: rgba(118, 64, 232, .07);
}

.iti__divider {
    margin: 4px 0;
    padding: 0;
    border-bottom: 1px solid #eceef2;
}