/* ==========================================================================
   CranioCatch uyari kartlari (SweetAlert2 temasi)
   --------------------------------------------------------------------------
   Iki sorunu birden cozuyor:

   1) KONUM: demo-modal.css icinde ".craniocatch-modal-overlay { z-index:10000 }"
      var (cerez cubugu formun ustune binmesin diye). SweetAlert2'nin kendi
      kabi 1060'ta oldugu icin "Talebiniz gonderildi" karti modalin ARKASINDA
      kaliyordu. Kap 10050'ye cekildi: modalin ustunde, ama sabit ust bar gibi
      daha yuksek katmanlarla yarismayacak kadar olculu.

   2) GORUNUM: kutu hazir SweetAlert temasiyla (yesil tik, mavi OK dugmesi,
      Times New Roman'a yakin varsayilan yazi tipi) siteden tamamen kopuktu.
      Asagida site diliyle yeniden kuruldu: Inter, #0d0f2c baslik, #666D7C
      metin, marka gradyani ve butonlarla ayni 9px kose yaricapi.

   Bu dosya sweetalert2.min.css'TEN SONRA yuklenmeli (bkz. base.html); ayni
   ozgullukteki kurallari sira ile eziyor, bu yuzden !important yalnizca
   JS'in inline yazdigi degerler icin kullanildi (confirmButtonColor).
   ========================================================================== */

:root {
    --cc-alert-brand: linear-gradient(90deg, #FF6262 0%, #7640E8 55%, #3291FF 100%);
    --cc-alert-ink: #0d0f2c;
    --cc-alert-muted: #666D7C;
}

/* --- Kap: modalin ustunde, yumusak bir perde --- */
.swal2-container {
    z-index: 10050;
    padding: 16px;
    background-color: rgba(13, 15, 44, .45);
    backdrop-filter: blur(2px);
}

/* --- Kart --- */
.swal2-popup {
    width: auto;
    max-width: min(420px, calc(100vw - 32px));
    padding: 28px 26px 22px;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 24px 60px rgba(15, 23, 42, .18);
    font-family: "Inter", Arial, Helvetica, sans-serif;
}

.swal2-title {
    order: 2;
    margin: 0;
    padding: 0;
    font-size: 19px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--cc-alert-ink);
}

.swal2-html-container {
    order: 3;
    margin: 8px 0 0;
    padding: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.65;
    color: var(--cc-alert-muted);
    overflow: visible;
}

/* --- Ikon ----------------------------------------------------------------
   SweetAlert tik ve carpi isaretlerini birkac ayri <span>'i piksel piksel
   konumlandirip dondurerek ciziyor. Bu parcalarin olcusune/rengine
   karisildiginda isaret kolayca egri ve orantisiz cikiyordu (carpi
   birbirini kesmeyen iki kalin cizgiye donusuyordu).

   Bu yuzden swal'in ic parcalari tamamen gizlenip ikon TEK BIR SVG maskesi
   olarak yeniden ciziliyor. Maske alfa kanalini kullandigi icin renk
   "background-color" ile veriliyor; boylece her durum icin tek bir kural
   yetiyor ve geometri her boyutta dogru kaliyor. */
.swal2-icon {
    order: 1;
    position: relative;
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    margin: 2px auto 16px;
    border: 0 !important;
    border-radius: 50%;
}

/* swal'in kendi cizim parcalari (cizgiler, halka, "!"/"?" karakteri) */
.swal2-icon > * {
    display: none !important;
}

.swal2-icon::before {
    content: "";
    width: 36px;
    height: 36px;
    background-color: currentColor;
    -webkit-mask: var(--cc-icon) center / contain no-repeat;
    mask: var(--cc-icon) center / contain no-repeat;
}

/* Basari: varsayilan yesil siteyle hic uyusmuyordu -> marka moru */
.swal2-icon.swal2-success {
    background: rgba(118, 64, 232, .10);
    color: #7640E8;
    --cc-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

/* Hata: gradyanin kirmizi ucu */
.swal2-icon.swal2-error {
    background: rgba(229, 72, 77, .10);
    color: #E5484D;
    --cc-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E");
}

/* Uyari / bilgi / soru */
.swal2-icon.swal2-warning {
    background: rgba(245, 158, 11, .12);
    color: #B26B00;
    --cc-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3Cpath d='M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/%3E%3C/svg%3E");
}

.swal2-icon.swal2-info {
    background: rgba(50, 145, 255, .10);
    color: #3291FF;
    --cc-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E");
}

.swal2-icon.swal2-question {
    background: rgba(118, 64, 232, .10);
    color: #7640E8;
    --cc-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M9.5 9.5a2.6 2.6 0 0 1 5 1c0 1.7-2.5 2-2.5 3.5'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");
}

/* --- Aksiyonlar --- */
.swal2-actions {
    order: 4;
    width: 100%;
    margin: 22px 0 0;
    gap: 8px;
}

/* Gradyan kenarlik + gradyan yazi: sitedeki .cc-pill-btn--filled ile ayni dil.
   background-color'da !important var cunku SweetAlert, confirmButtonColor
   secenegini elemana INLINE style olarak yaziyor (ornegin #0f1e55) ve inline
   stil normal kurallari ezer. Boylece 20'den fazla cagri noktasindaki
   confirmButtonColor satirlarini tek tek temizlemeye gerek kalmiyor. */
.swal2-styled.swal2-confirm,
.swal2-styled.swal2-deny,
.swal2-styled.swal2-cancel {
    position: relative;
    min-width: 84px;
    min-height: 32px;
    margin: 0;
    padding: 6px 8px;
    border: 1px solid transparent;
    border-radius: 9px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    box-shadow: none;
}

/* SweetAlert acilir acilmaz onay butonuna odaklaniyor ve kendi
   ".swal2-default-outline" kurali mavi bir halka birakiyordu; buton daha
   dokunulmadan "secili" gorunuyordu. Fare/otomatik odakta halka
   gosterilmiyor, klavyeyle gezinende (:focus-visible) korunuyor. */
.swal2-styled:focus,
.swal2-styled.swal2-default-outline:focus {
    outline: none;
    box-shadow: none;
}

.swal2-styled.swal2-confirm {
    border-color: #7640E8;
    background-color: rgba(124, 98, 255, .04) !important;
    background-image: var(--cc-alert-brand);
    -webkit-background-clip: text, padding-box;
    background-clip: text, padding-box;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* Hover / basili tutma efekti YOK.
   SweetAlert bunu su kurallarla veriyor:

     .swal2-actions:not(.swal2-loading) .swal2-styled:hover  { background-image: linear-gradient(rgba(0,0,0,.1),...) }
     .swal2-actions:not(.swal2-loading) .swal2-styled:active { background-image: linear-gradient(rgba(0,0,0,.2),...) }

   Ozgullukleri (0,4,0). Butondaki gradyan YAZI da background-image ile
   ciziliyor ve -webkit-text-fill-color:transparent oldugu icin, bu kural
   devreye girince yazinin gradyani koyu bir kaplamayla degisiyor ve "OK"
   soluk gri bir lekeye donusuyordu. Ayni kapsayiciyi kullanip ozgullugu
   (0,5,0)'e cikararak gradyani geri yaziyoruz. */
.swal2-actions:not(.swal2-loading) .swal2-styled.swal2-confirm:hover,
.swal2-actions:not(.swal2-loading) .swal2-styled.swal2-confirm:active {
    background-color: rgba(124, 98, 255, .04) !important;
    background-image: var(--cc-alert-brand);
}

.swal2-styled.swal2-confirm:focus-visible,
.swal2-styled.swal2-cancel:focus-visible,
.swal2-styled.swal2-deny:focus-visible {
    outline: 2px solid #3291FF;
    outline-offset: 2px;
}

/* Gradyan cerceve: dolgu yerine maskeyle, boylece yazinin gradyani bozulmuyor */
@supports ((-webkit-mask-composite: xor) or (mask-composite: exclude)) {
    .swal2-styled.swal2-confirm {
        border-color: transparent;
    }

    .swal2-styled.swal2-confirm::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        padding: 1px;
        background: var(--cc-alert-brand);
        -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;
    }
}

/* Ikincil butonlar sade kalsin ki birincil olan one ciksin */
.swal2-styled.swal2-cancel,
.swal2-styled.swal2-deny {
    border-color: #E4E6EC;
    background-color: #fff !important;
    color: var(--cc-alert-ink);
}

/* Ikincil butonlarda da hover/active degisimi yok (ayni ozgulluk gerekcesi). */
.swal2-actions:not(.swal2-loading) .swal2-styled.swal2-cancel:hover,
.swal2-actions:not(.swal2-loading) .swal2-styled.swal2-cancel:active,
.swal2-actions:not(.swal2-loading) .swal2-styled.swal2-deny:hover,
.swal2-actions:not(.swal2-loading) .swal2-styled.swal2-deny:active {
    background-color: #fff !important;
    background-image: none;
}

/* --- Diger parcalar --- */
.swal2-close {
    color: #B3B9C2;
    font-size: 30px;
}

.swal2-close:hover {
    color: var(--cc-alert-ink);
}

.swal2-validation-message {
    border-radius: 9px;
    background: rgba(255, 98, 98, .08);
    color: #E5484D;
    font-size: 13px;
}

.swal2-input,
.swal2-textarea,
.swal2-select {
    border: 1px solid #E4E6EC;
    border-radius: 9px;
    box-shadow: none;
    font-family: inherit;
    font-size: 14px;
}

.swal2-input:focus,
.swal2-textarea:focus,
.swal2-select:focus {
    border-color: #7640E8;
    box-shadow: 0 0 0 3px rgba(118, 64, 232, .12);
}

.swal2-timer-progress-bar {
    background: var(--cc-alert-brand);
}

@media (max-width: 480px) {
    .swal2-popup {
        padding: 24px 20px 20px;
    }

    .swal2-actions {
        flex-direction: column-reverse;
    }

    .swal2-styled.swal2-confirm,
    .swal2-styled.swal2-deny,
    .swal2-styled.swal2-cancel {
        width: 100%;
    }
}