/*
 * Üst menü butonları (Müşteri Girişi / Şube Girişi / Teklif Al) ve ana sayfa hero butonları.
 * Renkler panelden gelir ve butona satır içi CSS değişkeni olarak yazılır:
 *   --ub-bas, --ub-bit, --ub-aci, --ub-nokta, --ub-yazi   (normal)
 *   --ub-hbas, --ub-hbit, --ub-hyazi                      (üzerine gelince; boşsa normal renkler)
 * Bu dosyanın aynısı panelde önizleme için kullanılır:
 *   OnlineSigortaPanel/wwwroot/CustomFile/css/ust-buton.css — birini değiştirirseniz diğerini de güncelleyin.
 */
.os-ubtn {
    --ub-bit-x: var(--ub-bit, var(--ub-bas));
    --ub-grad: linear-gradient(var(--ub-aci, 135deg), var(--ub-bas) 0%, var(--ub-bit-x) var(--ub-nokta, 100%));
    --ub-hgrad: linear-gradient(var(--ub-aci, 135deg), var(--ub-hbas, var(--ub-bas)) 0%, var(--ub-hbit, var(--ub-bit-x)) var(--ub-nokta, 100%));
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    padding: .55rem 1.05rem;
    border: 2px solid transparent;
    border-radius: 999px;
    background: var(--ub-grad) border-box;
    color: var(--ub-yazi, #fff);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .01em;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(15, 44, 82, .16);
    transition: transform .28s cubic-bezier(.2, .8, .2, 1), box-shadow .28s ease, color .25s ease, background-position .8s ease;
}

.os-ubtn:hover,
.os-ubtn:focus-visible {
    color: var(--ub-hyazi, var(--ub-yazi, #fff));
    background: var(--ub-hgrad) border-box;
}

.os-ubtn:focus-visible {
    outline: 3px solid var(--ub-bas);
    outline-offset: 3px;
}

.os-ubtn i {
    font-size: 1.1em;
    line-height: 1;
    transition: transform .35s cubic-bezier(.2, .8, .2, 1);
}

.os-ubtn:hover i,
.os-ubtn:focus-visible i {
    transform: scale(1.18) rotate(-8deg);
}

/* ── Şekil ───────────────────────────────────────── */
.os-ubtn--hap { border-radius: 999px; }
.os-ubtn--yumusak { border-radius: 10px; }
.os-ubtn--kare { border-radius: 4px; }

/* ── Stil ────────────────────────────────────────── */
/* Çerçeve: gradyan kenarlık, içi beyaz */
.os-ubtn--cerceve {
    background: linear-gradient(#fff, #fff) padding-box, var(--ub-grad) border-box;
    box-shadow: none;
}

.os-ubtn--cerceve:hover,
.os-ubtn--cerceve:focus-visible {
    background: var(--ub-hgrad) border-box;
}

/* Cam: üstten parlak, cilalı yüzey */
.os-ubtn--cam::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(255, 255, 255, .5) 0%, rgba(255, 255, 255, .12) 48%, rgba(255, 255, 255, 0) 52%);
    pointer-events: none;
}

/* ── Üzerine gelince efektleri ───────────────────── */
/* Parlama: ışık süzülerek geçer */
.os-ubtn--fx-parlama::before {
    content: "";
    position: absolute;
    top: 0;
    left: -80%;
    z-index: -1;
    width: 55%;
    height: 100%;
    background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, .6) 50%, transparent 100%);
    transform: skewX(-22deg);
    transition: left .75s ease;
    pointer-events: none;
}

.os-ubtn--fx-parlama:hover::before,
.os-ubtn--fx-parlama:focus-visible::before {
    left: 130%;
}

/* Kalkma: yükselir, rengiyle gölge düşer */
.os-ubtn--fx-kalkma:hover,
.os-ubtn--fx-kalkma:focus-visible {
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 14px 26px -8px var(--ub-bas), 0 4px 10px rgba(15, 44, 82, .15);
}

/* Işıltı: etrafında nabız gibi atan hale */
.os-ubtn--fx-isilti:hover,
.os-ubtn--fx-isilti:focus-visible {
    animation: os-ubtn-isilti 1.4s ease-out infinite;
}

@keyframes os-ubtn-isilti {
    0% { box-shadow: 0 0 0 0 var(--ub-hbas, var(--ub-bas)); }
    70% { box-shadow: 0 0 0 12px transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
}

/* Akış: renkler soldan sağa akarak hover renklerine geçer */
.os-ubtn--fx-akis,
.os-ubtn--fx-akis:hover,
.os-ubtn--fx-akis:focus-visible {
    background: linear-gradient(90deg, var(--ub-bas), var(--ub-bit-x), var(--ub-hbas, var(--ub-bas)), var(--ub-hbit, var(--ub-bit-x))) border-box;
    background-size: 300% 100%;
}

.os-ubtn--fx-akis { background-position: 0% 50%; }

.os-ubtn--fx-akis:hover,
.os-ubtn--fx-akis:focus-visible { background-position: 100% 50%; }

.os-ubtn--cerceve.os-ubtn--fx-akis {
    background: linear-gradient(#fff, #fff) padding-box, var(--ub-grad) border-box;
}

.os-ubtn--cerceve.os-ubtn--fx-akis:hover,
.os-ubtn--cerceve.os-ubtn--fx-akis:focus-visible {
    background: linear-gradient(90deg, var(--ub-bas), var(--ub-bit-x), var(--ub-hbas, var(--ub-bas)), var(--ub-hbit, var(--ub-bit-x))) border-box;
    background-size: 300% 100%;
    background-position: 100% 50%;
}

/* Dolgu: hover rengi soldan sağa dolar */
.os-ubtn--fx-dolgu,
.os-ubtn--fx-dolgu:hover,
.os-ubtn--fx-dolgu:focus-visible {
    background: var(--ub-grad) border-box;
}

.os-ubtn--cerceve.os-ubtn--fx-dolgu,
.os-ubtn--cerceve.os-ubtn--fx-dolgu:hover,
.os-ubtn--cerceve.os-ubtn--fx-dolgu:focus-visible {
    background: linear-gradient(#fff, #fff) padding-box, var(--ub-grad) border-box;
}

.os-ubtn--fx-dolgu::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--ub-hgrad);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .45s cubic-bezier(.2, .8, .2, 1);
    pointer-events: none;
}

.os-ubtn--fx-dolgu:hover::before,
.os-ubtn--fx-dolgu:focus-visible::before {
    transform: scaleX(1);
}

/* Şeffaf: koyu zeminde (ana sayfa hero) yarı saydam yüzey, renkli ince çerçeve; üzerine gelince renge dolar */
.os-ubtn--seffaf,
.os-ubtn--seffaf.os-ubtn--fx-akis,
.os-ubtn--seffaf.os-ubtn--fx-dolgu,
.os-ubtn--seffaf.os-ubtn--fx-dolgu:hover,
.os-ubtn--seffaf.os-ubtn--fx-dolgu:focus-visible {
    background: color-mix(in srgb, var(--ub-bas) 12%, transparent) padding-box;
    border-color: color-mix(in srgb, var(--ub-bas) 45%, transparent);
    box-shadow: none;
    backdrop-filter: blur(6px);
}

.os-ubtn--seffaf:hover,
.os-ubtn--seffaf:focus-visible,
.os-ubtn--seffaf.os-ubtn--fx-akis:hover,
.os-ubtn--seffaf.os-ubtn--fx-akis:focus-visible {
    background: var(--ub-hgrad) border-box;
    border-color: transparent;
}

.os-ubtn--seffaf.os-ubtn--fx-dolgu:hover,
.os-ubtn--seffaf.os-ubtn--fx-dolgu:focus-visible {
    border-color: var(--ub-hbas, var(--ub-bas));
}

/* ── Yerleşim ────────────────────────────────────── */
.os-ubtn--blok {
    display: flex;
    width: 100%;
}

/* Teklif Al: ana çağrı düğmesi, giriş butonlarından iri ve rengiyle gölgeli */
.os-header__cta .os-ubtn--teklif {
    padding: 12px 22px;
    font-size: 15px;
    box-shadow: 0 8px 18px -6px var(--ub-bas), 0 2px 4px rgba(0, 0, 0, .12);
}

/* Ana sayfa hero butonları (logoların yanındaki iki buton): üst menüdekilerden iri */
.os-hero__actions .os-ubtn {
    padding: 15px 32px;
    font-size: 16px;
}

/* Header daraldığında: 1280 px altında ikonlu giriş butonları yalnız ikon olur (1200–1399 px'te sayfa genişlediği için
   metinli sığarlar, site.css), mobilde (hamburger menü) header'dan kalkar.
   Teklif Al her ekranda metniyle görünür kalır. */
@media (max-width: 1279.98px) {
    .os-header__cta .os-ubtn--ikonlu:not(.os-ubtn--teklif) {
        padding: .55rem .7rem;
    }

    .os-header__cta .os-ubtn--ikonlu:not(.os-ubtn--teklif) .os-ubtn__metin {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }
}

@media (max-width: 1199.98px) {
    .os-header__cta .os-ubtn:not(.os-ubtn--teklif) {
        display: none;
    }

    .os-header__cta .os-ubtn--teklif {
        padding: 10px 16px;
        font-size: 14px;
    }
}

@media (max-width: 575.98px) {
    .os-header__cta .os-ubtn--teklif {
        padding: 9px 12px;
        font-size: 13px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .os-ubtn,
    .os-ubtn i,
    .os-ubtn::before {
        transition: none !important;
        animation: none !important;
    }

    .os-ubtn:hover,
    .os-ubtn:hover i {
        transform: none !important;
    }
}