@charset "UTF-8";

/* ──────────────────────────Slider Hizmet Görsel────────────────────────────── */
@layer hizmetGorsel {
    .hizmet-info--sliderli {
        align-items: flex-start;
    }

    .hizmet-info-intro {
        display: flex;
        align-items: center;
        gap: 28px;
    }

    .hizmet-info--sliderli .hizmet-info-img {
        /* Sol kolon ikonu flex satırda ezilmesin. (Buradaki eski 160px boyutlar
           kaldırıldı — katmansız ".hizmet-info .hizmet-info-img" 100px kuralı
           her zaman kazandığından hiç uygulanmıyordu.) */
        flex-shrink: 0;
    }


    .hizmet-info-content {
        flex: 1 1 0;
        min-width: 0;
        max-width: 100%;
        display: flow-root;
    }

    .hizmet-detay-slider-inline {
        width: 100%;
    }

    .hizmet-detay-content {
        min-width: 0;
        max-width: 100%;
    }

    .hizmet-info--sliderli .hizmet-info-intro p {
        color: rgba(19, 29, 43, 0.9);
        margin: 0;
        margin-bottom: 26px;
        text-wrap: pretty;
    }

    .hizmet-detay-content--with-slider {
        padding-left: 180px;
        margin-top: 10px !important;
    }

        .hizmet-detay-content--with-slider .table-responsive {
            width: 100%;
        }

    .hizmet-gorsel-slider-wrap {
        width: 100%;
    }

    .slider-wrapper {
        position: relative;
        padding: 0 36px;
        isolation: isolate;
    }

    .slider-viewport {
        overflow: hidden;
        border-radius: 10px;
        height: 275px;
        width: 100%;
    }

    .slider-track {
        display: flex;
        gap: 10px;
        height: 260px;
        transition: transform 0.35s ease;
    }

    .slider-item {
        flex: 0 0 calc((100% - 20px) / 3);
        height: 260px;
        border-radius: 10px;
        overflow: hidden;
        border: 2px solid transparent;
        transition: border-color 0.2s, box-shadow 0.2s;
        background: #f3f4f6;
    }

        .slider-item.active {
            border-color: #2969a4;
            box-shadow: 0 0 0 2px rgba(37,99,235,0.18);
        }

        .slider-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            max-width: none;
        }

    .slider-dots {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 12px;
        margin-top: 8px;
        padding: 0 36px;
    }

    .slider-dot {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: #d1d5db;
        cursor: pointer;
        transition: background 0.2s, transform 0.2s;
    }

        .slider-dot.active {
            background: #2563eb;
            transform: scale(1.25);
        }

    .hizmet-lightbox {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 9999;
        background: rgba(0, 0, 0, 0.92);
        align-items: center;
        justify-content: center;
    }

        .hizmet-lightbox.active {
            display: flex;
        }

    .hizmet-lightbox-content {
        max-width: 90vw;
        max-height: 85vh;
        display: flex;
        align-items: center;
        justify-content: center;
    }

        .hizmet-lightbox-content img {
            max-width: 90vw;
            max-height: 85vh;
            object-fit: contain;
            border-radius: 6px;
            box-shadow: 0 4px 32px rgba(0,0,0,0.6);
            display: block;
        }

    .hizmet-lightbox-close {
        position: fixed;
        top: 18px;
        right: 24px;
        background: rgba(255,255,255,0.15);
        border: none;
        color: #fff;
        font-size: 24px;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        cursor: pointer;
        z-index: 10001;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background 0.2s;
        line-height: 1;
    }

        .hizmet-lightbox-close:hover {
            background: rgba(255,255,255,0.3);
        }

    .hizmet-lightbox-nav {
        position: fixed;
        top: 50%;
        transform: translateY(-50%);
        background: rgba(255,255,255,0.92);
        border: none;
        color: #374151;
        font-size: 22px;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        cursor: pointer;
        z-index: 10001;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 1px 6px rgba(0,0,0,0.18);
        transition: background 0.2s, color 0.2s;
        line-height: 1;
        padding: 0;
    }

        .hizmet-lightbox-nav:hover {
            background: #fff;
            color: #2563eb;
        }

    .hizmet-lightbox-prev {
        left: 20px;
    }

    .hizmet-lightbox-next {
        right: 20px;
    }

    .hizmet-lightbox-counter {
        position: fixed;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        color: #fff;
        font-size: 14px;
        background: rgba(0,0,0,0.45);
        padding: 4px 14px;
        border-radius: 20px;
        letter-spacing: 0.5px;
    }
}

.slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255,255,255,0.92);
    border: none;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 6px rgba(0,0,0,0.18);
    color: #374151;
    transition: background 0.2s, color 0.2s;
    padding: 0;
}

    .slider-btn svg {
        width: 18px;
        height: 18px;
        display: block;
    }

    .slider-btn:hover {
        background: #fff;
        color: #2563eb;
    }

.slider-btn--mobile-only {
    display: none;
}

.slider-btn--prev {
    left: 2px;
}

.slider-btn--next {
    right: 2px;
}
/* ──────────────────────────Slider Hizmet Görsel────────────────────────────── */


.mCS-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
    background-color: var(--color-primary);
}

.accordion-item {
    margin-bottom: 15px;
}

.accordion-button:not(.collapsed) {
    background-color: var(--color-primary);
    border-bottom: 0px;
    color: white;
}

#ic-sayfalar {
    padding: 30px 0px;
    flex-grow: 1;
    /* İçerik alanının tüm boşluğu kaplamasını sağlar */
    display: flex;
    flex-direction: column;
}

    #ic-sayfalar .accordion-header {
        margin-top: 0px;
        margin-bottom: 0px;
    }

    #ic-sayfalar h2 {
        font-size: 28px;
        letter-spacing: 0.5px;
        color: #000;
        font-family: "Izmir-Bold";
        margin-top: 1rem;
        margin-bottom: 1.5rem;
    }


.hizmet-info {
    display: flex;
    align-items: flex-start;
    margin-top: 30px;
    gap: 30px;
}

    .hizmet-info .hizmet-info-img {
        width: 100px;
        height: 100px;
        padding: 0px 10px 15px 0px;
        /* CMS logoları farklı boyut/oranlarda gelebiliyor — sabit kutuya
       orantı bozulmadan sığdırılır (standart görünüm). */
        object-fit: contain;
    }


.hizmet-icerik .nav-tabs {
    border: 0;
    gap: 20px;
}

#myTabContent h4 {
    color: var(--color-primary);
    font-weight: 500;
    font-size: 20px;
    margin-bottom: 20px;
    font-family: "Izmir-Medium";
}

.nav-tabs .nav-link:focus,
.nav-tabs .nav-link:hover {
    background-color: white;
    color: var(--color-primary);
    border-radius: 0px;
    border: 1px solid var(--color-primary);
}

.hizmet-icerik .nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
    background-color: var(--color-primary);
    color: white;
    border-radius: 0px;
    border: 1px solid var(--color-primary);
}

.hizmet-icerik .nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link {
    background-color: white;
    color: var(--color-primary);
    border-radius: 0px;
    border: 1px solid var(--color-primary);
}

.yapidurum-box {
    position: relative;
    border: 1px solid #BFBFBF;
    padding: 15px;
    border-radius: 10px;
    justify-content: space-between;
    display: flex;
    margin-bottom: 30px;
    min-height: 250px;
    flex-direction: column;
}

    .yapidurum-box .belgeler a {
        font-size: 15px;
        font-weight: 600;
        color: var(--color-primary);
    }

    .yapidurum-box .belgeler p {
        margin-bottom: 5px
    }

    .yapidurum-box h6 {
        color: #ED4C5C;
        font-weight: 600;
        font-family: 'Izmir-Bold'
    }

    .yapidurum-box span {
        font-size: 16px;
        color: rgba(0, 0, 0, 0.4);
        font-weight: 500;
        font-weight: 'Izmir-Medium';
    }

#myTabContent {
    padding-top: 20px;
    padding-bottom: 20px;
    flex-grow: 1;
    /* Tablar içerik yüksekliğine göre esner */
}

.hizmet-info .info-ul {
    padding: 0px;
}

.forwarding-button {
    color: white;
    background: var(--color-cta);
    text-decoration: none;
    font-weight: 600;
    width: 170px;
    align-items: center;
    justify-content: center;
    display: flex;
    border-radius: 10px;
    text-align: center;
    padding: 10px;
    font-size: 14px;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}

/* ── CTA Butonları: Base Definition ───────────────── */
.bizizmir-blue-bg-button {
    background-color: var(--color-cta);
    border: none;
    border-radius: 10px;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    height: 40px;
    padding: 0 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}

    /* ── CTA Butonları: Hover / Focus / Active ────────── */
    .forwarding-button:hover,
    .bizizmir-blue-bg-button:hover,
    .bizizmir-blue-bg-icon-button:hover,
    .btn-get-ticket:hover {
        background-color: var(--color-cta-hover, #C46008) !important;
        color: #fff !important;
        box-shadow: 0 4px 16px rgba(232, 118, 10, 0.35);
        transform: translateY(-1px);
    }

    .forwarding-button:focus-visible,
    .bizizmir-blue-bg-button:focus-visible,
    .bizizmir-blue-bg-icon-button:focus-visible,
    .btn-get-ticket:focus-visible {
        outline: 3px solid rgba(232, 118, 10, 0.4);
        outline-offset: 2px;
        background-color: var(--color-cta-hover, #C46008);
        color: #fff;
    }

    .forwarding-button:active,
    .bizizmir-blue-bg-button:active,
    .bizizmir-blue-bg-icon-button:active,
    .btn-get-ticket:active {
        background-color: var(--color-cta-hover, #C46008) !important;
        color: #fff !important;
        transform: translateY(0px);
        box-shadow: 0 2px 8px rgba(232, 118, 10, 0.3);
    }

/* ── Outline / Secondary Butonları: Hover ─────────── */
.bizizmir-white-bg-button:hover,
.bizizmir-white-bg-icon-button:hover {
    background-color: var(--color-primary);
    color: #fff !important;
    border-color: var(--color-primary);
    box-shadow: 0 4px 12px rgba(21, 101, 192, 0.25);
    transform: translateY(-1px);
    transition: all 0.2s ease;
}

.bizizmir-white-bg-button:active,
.bizizmir-white-bg-icon-button:active {
    background-color: var(--color-primary-hover);
    transform: translateY(0);
}

/* ── Favori Butonu: Hover ─────────────────────────── */
.favoriteButton1 {
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}

    .favoriteButton1:hover {
        border-color: var(--color-favorite, #EAB308);
        box-shadow: 0 2px 12px rgba(234, 179, 8, 0.25);
        transform: translateY(-1px);
    }

/* ── Form Submit (.bizizmir-ui): Hover ────────────── */
.bizizmir-ui button:hover,
.bizizmir-ui .formgonder:hover {
    background-color: var(--color-cta-hover, #C46008);
    border-color: var(--color-cta-hover, #C46008);
    color: #fff;
    box-shadow: 0 4px 16px rgba(232, 118, 10, 0.35);
    transform: translateY(-1px);
    transition: all 0.2s ease;
}

.bizizmir-ui button:active,
.bizizmir-ui .formgonder:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(232, 118, 10, 0.3);
}

/* ── Sticky CTA Bar — header altında ince amber şerit ─────── */
.sticky-cta-bar {
    position: fixed;
    top: 0; /* JS, header yüksekliğine göre ayarlar */
    left: 0;
    right: 0;
    z-index: 999; /* header'ın (1000) hemen altında */
    background: linear-gradient(100deg, #E8760A 0%, #EF8C20 100%);
    box-shadow: 0 8px 24px rgba(232, 118, 10, 0.3);
    transform: translateY(-110%);
    opacity: 0;
    visibility: hidden;
    transition: transform 0.45s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.3s ease, visibility 0.45s ease;
}

    .sticky-cta-bar.visible {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
    }

.sticky-cta-bar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    max-width: 1320px;
    margin: 0 auto;
    padding: 9px 50px;
    min-height: 56px;
}

.sticky-cta-bar-title {
    font-family: "Izmir-bold", sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
}

.sticky-cta-bar-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

/* Aksiyon butonu — amber şerit üstünde sabit beyaz buton.
   Genel .forwarding-button:hover/active kuralları !important ile bg/color
   eziyor; burada onları !important ile geri çekiyoruz. */
.sticky-cta-bar .forwarding-button,
.sticky-cta-bar .forwarding-button:hover,
.sticky-cta-bar .forwarding-button:active,
.sticky-cta-bar .forwarding-button:focus,
.sticky-cta-bar .forwarding-button:focus-visible {
    background-color: #fff !important;
    color: var(--color-cta, #E8760A) !important;
}

.sticky-cta-bar .forwarding-button {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    width: auto;
    padding: 9px 22px;
    font-size: 14px;
    font-weight: 700;
    border-radius: 9px;
    min-height: 40px;
    border: none;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.14);
    transition: transform 0.16s ease, box-shadow 0.16s ease;
}

    .sticky-cta-bar .forwarding-button:hover {
        transform: translateY(-1px);
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
    }

    .sticky-cta-bar .forwarding-button:active {
        transform: translateY(0);
    }

    .sticky-cta-bar .forwarding-button:focus-visible {
        outline: 3px solid rgba(255, 255, 255, 0.65);
        outline-offset: 2px;
    }

    .sticky-cta-bar .forwarding-button::after {
        content: "\2192";
        font-size: 15px;
        transition: transform 0.18s ease;
    }

    .sticky-cta-bar .forwarding-button:hover::after {
        transform: translateX(3px);
    }

/* Kapat butonu */
.sticky-cta-close {
    width: 34px;
    height: 34px;
    border: none;
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    border-radius: 9px;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.18s ease, transform 0.25s ease;
}

    .sticky-cta-close:hover {
        background: rgba(255, 255, 255, 0.32);
        transform: rotate(90deg);
    }

/* ── Tablet / Mobil ──────────────────────────────── */
@media (max-width: 768px) {
    .sticky-cta-bar-inner {
        padding: 7px 15px;
        gap: 10px;
        min-height: 50px;
    }

    .sticky-cta-bar-title {
        font-size: 13px;
        flex: 1;
        min-width: 0;
    }

    .sticky-cta-bar .forwarding-button {
        padding: 8px 16px;
        font-size: 13px;
        min-height: 38px;
    }

    .sticky-cta-close {
        width: 30px;
        height: 30px;
        font-size: 20px;
    }
}

/* ── Sticky CTA Bar — Mobil küçük ─────────────────── */
@media (max-width: 480px) {
    .sticky-cta-bar-inner {
        gap: 8px;
    }

    .sticky-cta-bar-title {
        font-size: 13px;
    }

    .sticky-cta-bar .forwarding-button {
        padding: 9px 16px;
        font-size: 13px;
        flex: 1;
        justify-content: center;
    }
}

/* ── Sticky CTA Bar — Çok küçük ekranlar ──────────── */
@media (max-width: 360px) {
    .sticky-cta-bar-title {
        display: none;
    }

    .sticky-cta-bar .forwarding-button {
        flex: 1;
        padding: 10px 12px;
        font-size: 14px;
    }

    .sticky-cta-bar .sticky-cta-favori {
        padding: 8px;
    }
}

.hizmet-yonlendirme {
    display: flex;
    justify-content: flex-end;
}

.askida-fatura-blue-bg .askida-fatura-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    color: var(--color-primary);
    padding: 15px;
}

    .askida-fatura-blue-bg .askida-fatura-content strong {
        font-weight: 700;
        font-size: 20px;
    }

    .askida-fatura-blue-bg .askida-fatura-content span {
        font-weight: 500;
        font-size: 14px;
    }

.askida-fatura-blue-bg {
    height: 240px;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    background-color: var(--color-primary-surface);
    margin-top: 30px;
}

.askida-form-content {
    display: flex;
    flex-direction: column;
}

    .askida-form-content form {
        max-width: 350px;
    }

.askida-fatura-box {
    border: 1px solid rgba(191, 191, 191, 1);
    border-radius: 30px;
    margin-bottom: 20px;
}

    .askida-fatura-box .askida-fatura-box-content {
        min-height: 216px;
        height: auto;
        padding: 25px;
        display: flex;
        flex-direction: column;
    }

        .askida-fatura-box .askida-fatura-box-content span {
            color: rgba(0, 0, 0, 0.4);
        }

        .askida-fatura-box .askida-fatura-box-content strong {
            color: rgba(0, 0, 0, 1);
            font-size: 20px;
            font-weight: 700;
            margin-bottom: 15px;
        }

    .askida-fatura-box .bizizmir-blue-bg-button {
        margin-bottom: 0;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        border-bottom-left-radius: 30px;
        border-bottom-right-radius: 30px;
        min-height: 50px;
        height: auto;
    }

.favoriteButton1 {
    color: var(--color-primary);
    background: #fff;
    text-decoration: none;
    font-family: 'Izmir-SemiBold';
    width: auto;
    align-items: center;
    justify-content: center;
    display: flex;
    border-radius: 10px;
    text-align: center;
    padding: 8px 10px;
    font-size: 14px;
    gap: 7px;
    border: 1px solid var(--color-primary);
}

.favoriteButton2 {
    color: white;
    background: var(--color-primary);
    text-decoration: none;
    font-family: 'Izmir-SemiBold';
    width: auto;
    align-items: center;
    justify-content: center;
    display: flex;
    border-radius: 10px;
    text-align: center;
    padding: 8px 10px;
    font-size: 14px;
    border: 1px solid transparent;
    gap: 7px;
}


#favoriteButton.removed {
    background-color: var(--color-primary);
}

.hizmet-info-favori-button {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

/* BIZYEN-740 U-4: "Hizmete Git" (10px iç boşluk, kenarlıksız) ile favori butonu (8px + 1px
   kenarlık + yıldız) farklı yükseklikteydi; mobilde favori metni iki satıra kırılınca fark
   büyüyordu. İkisi aynı sabit yükseklikte; dikey ölçüyü min-height belirler. */
.hizmet-info-actions .forwarding-button,
.hizmet-info-actions .favoriteButton1,
.hizmet-info-actions .favoriteButton2 {
    min-height: 44px;
    padding-top: 0;
    padding-bottom: 0;
    box-sizing: border-box;
}

.hizmet-info-actions {
    display: flex;
    align-items: center;
    gap: 16px;
}

@media (max-width: 768px) {
    .hizmet-info-favori-button {
        flex-direction: column;
        align-items: stretch;
    }

        .hizmet-info-favori-button h2 {
            margin-bottom: 10px;
        }

    .hizmet-info-actions {
        flex-wrap: wrap;
        justify-content: flex-end;
    }

        .hizmet-info-actions .font-size-control {
            width: 100%;
            justify-content: flex-end;
            margin-bottom: 10px;
        }

        .hizmet-info-actions .forwarding-button,
        .hizmet-info-actions .favoriteButton1 {
            flex: 1;
            text-align: center;
            justify-content: center;
        }
}

.similar-services-section {
    padding: 0px 0 35px;
}

.similar-services-header {
    margin-bottom: 22px;
}

    .similar-services-header h3 {
        color: #131d2b;
        font-size: 24px;
        font-weight: 700;
        margin-bottom: 10px;
    }

    .similar-services-header p {
        color: rgba(19, 29, 43, 0.72);
        font-size: 16px;
        margin-bottom: 0;
    }

.similar-services-grid {
    margin: 0 -10px;
}

    .similar-services-grid:not(.slick-initialized) {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 20px;
        margin: 0;
    }

.similar-service-slide {
    padding: 0 10px 10px;
}

.similar-service-card {
    min-height: 132px;
    padding: 18px 20px;
    border-radius: 18px;
    box-shadow: 0 16px 32px rgba(19, 29, 43, 0.06);
}

.similar-service-copy {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

    .similar-service-copy h6 {
        white-space: normal;
        overflow: visible;
    }

    .similar-service-copy p {
        color: rgba(19, 29, 43, 0.74);
        font-size: 14px;
        line-height: 1.45;
        margin: 0;
    }

.similar-services-grid .slick-track {
    display: flex;
}

.similar-services-grid .slick-slide {
    height: inherit;
}

    .similar-services-grid .slick-slide > div {
        height: 100%;
    }

/* BIZYEN-740 U-8: tıklama alanı 24×24 (WCAG 2.2 2.5.8); görünen nokta ::after ile 10px kalır.
   bottom, noktanın görsel merkezi eski konumda kalacak şekilde 7px aşağı alındı. */
.similar-services-grid .slick-dots {
    bottom: -27px;
}

    .similar-services-grid .slick-dots li {
        width: 24px;
        height: 24px;
        margin: 0;
    }

        .similar-services-grid .slick-dots li button {
            position: relative;
            width: 100%;
            height: 100%;
            border: none;
            background-color: transparent;
            padding: 0;
        }

            .similar-services-grid .slick-dots li button::before {
                display: none;
            }

            .similar-services-grid .slick-dots li button::after {
                content: "";
                position: absolute;
                inset: 7px;
                border: 2px solid var(--color-primary);
                border-radius: 50%;
                background-color: transparent;
                transition: background-color 0.3s, border-color 0.3s;
            }

        .similar-services-grid .slick-dots li.slick-active button::after {
            background-color: var(--color-primary);
            border-color: var(--color-primary);
        }

@media (max-width: 1199px) {
    .similar-services-grid:not(.slick-initialized) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .similar-services-section {
        padding: 8px 0 44px;
    }

    .similar-services-header h3 {
        font-size: 20px;
    }

    .similar-services-grid:not(.slick-initialized) {
        grid-template-columns: 1fr;
    }
}

.font-size-control {
    display: flex;
    align-items: center;
    gap: 4px;
}

.font-size-btn {
    width: 32px;
    height: 32px;
    border: 1px solid rgba(21, 101, 192, 0.4);
    border-radius: 6px;
    background-color: #fff;
    color: var(--color-primary);
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s, color 0.2s;
}

    .font-size-btn:hover {
        background-color: var(--color-primary);
        color: #fff;
    }

    .font-size-btn:disabled {
        opacity: 0.4;
        cursor: not-allowed;
    }

        .font-size-btn:disabled:hover {
            background-color: #fff;
            color: var(--color-primary);
        }

/* A-/A/A+ uygulanırken (ic-sayfa.js initFontSize, tek senkron görev) geçişler kapatılır:
   geçişli öğede getComputedStyle animasyon başındaki eski boyutu döndürür, base katlanır (BIZYEN-700). */
.biz-yazi-olcek-gecis *,
.biz-yazi-olcek-gecis *::before,
.biz-yazi-olcek-gecis *::after {
    transition: none !important;
}

/* Yazı boyutu değiştirilmişken (html[data-yazi-boyutu] = small|large) sabit yükseklikli / satır
   kırmayan kutular metne göre uzar; aksi halde ölçeklenen metin kutudan taşar (BIZYEN-700).
   Normal seviyede öznitelik yoktur, tasarım birebir korunur. */
html[data-yazi-boyutu] .fablab-iletisim-box {
    height: auto;
    min-height: 160px;
}

html[data-yazi-boyutu] .bizizmir-accordion-ui .accordion-button {
    height: auto;
    min-height: 40px;
}

html[data-yazi-boyutu] .form-check-horizontal .form-check-inline {
    white-space: normal !important; /* Radio.cshtml .text-nowrap: uzun seçenek telefonda sayfayı yatay kaydırıyordu */
}

.task {
    cursor: move;
    background-color: #fff;
    margin-bottom: 30px;
}

    .task:hover {
        box-shadow: rgba(99, 99, 99, 0.3) 0px 2px 8px 0px;
        border: 1px dashed rgba(191, 191, 191, 1);
    }

.him-basvuru-kayit, .tab-content > .active.him-basvuru-kayit {
    display: flex;
    justify-content: center;
}

    .him-basvuru-kayit h3 {
        text-align: center;
    }

.him-basvuru-kayit-content {
    max-width: 700px;
}

.fablab-basvuru-sorgula-content {
    max-width: 555px;
}

.him-basvuru-kayit-content h3 {
    color: rgba(0, 0, 0, 1);
    font-weight: 700;
    font-size: 30px;
    margin-bottom: 30px;
}

.form-control.him-tel-input {
    background-image: url(../img/tr-flag.svg);
    background-repeat: no-repeat;
    background-position: 16px 50%;
    padding-left: 50px;
}

    .form-control.him-tel-input.is-invalid {
        background-size: unset;
    }

.him-basvuru-kayit-content .him-basvuru-h4 {
    margin-right: 20px;
    color: var(--color-primary);
    font-weight: 700;
    font-size: 16px;
    margin-bottom: 0;
    text-align: center;
}

.him-basvuru-kayit-content .bizizmir-checkbox-ui {
    justify-content: center;
}

    .him-basvuru-kayit-content .bizizmir-checkbox-ui .bizizmir-radio-button {
        margin-right: 25px;
    }

        .him-basvuru-kayit-content .bizizmir-checkbox-ui .bizizmir-radio-button label {
            color: rgba(1, 1, 1, 1);
            font-weight: 500;
            font-size: 16px;
        }

.him-basvuru-kayit-content .bizizmir-him-switch-checkbox {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    margin-bottom: 30px;
}

/* .form-switch .form-check-input {
  border: 1px solid rgba(46, 130, 208, 1);
  height: 20px;
  width: 40px;
  margin-right: 7px; 
} */

/* .form-switch {
  display: flex; 
  padding-left: calc(calc(1.25rem * 1.75) + 0.625rem);
} */

/* .form-switch .form-check-label {
  margin-right: 60px;
  color: rgba(46, 130, 208, 1);
  font-weight: 700;
  font-size: 16px;
  margin-bottom: 0;
} */

.form-check-input:focus {
    box-shadow: none;
}

.him-basvuru-kayit-content .him-basvuru-button {
    display: flex;
    justify-content: center;
    margin-top: 30px;
}

    .him-basvuru-kayit-content .him-basvuru-button button {
        max-width: 326px;
    }

#himadres {
    display: none;
    /* Başlangıçta gizli */
}

#himkonum {
    display: none;
    /* Başlangıçta gizli */
    margin-bottom: 20px;
}

.izmirimkart-kart-ekle {
    max-width: 350px;
}

.izmirimkart-bakiye label {
    font-weight: 400;
}

.izmirimkart-bakiye-button {
    max-width: 350px;
}

.bizizmir-label-ui {
    margin-right: 10px;
    font-size: 16px;
    font-weight: 500;
    color: rgba(1, 1, 1, 1);
}

.bizizmir-input-ui {
    height: 40px;
    background-color: rgba(255, 255, 255, 1);
    margin-bottom: 20px;
    border-radius: 10px;
    color: rgba(143, 142, 142, 1) !important;
    font-size: 14px;
    font-weight: 400;
}

    .bizizmir-input-ui.is-invalid {
        margin-bottom: 0;
    }

/* iOS, 16 px altı yazı boyutlu form alanına odaklanınca sayfayı kendiliğinden yakınlaştırır. Yakınlaştırma
   engeli kaldırıldığından (viewport'ta user-scalable=no yok; T-23, 16.10.2026) yalnız iOS'ta alanlar 16 px olur;
   diğer cihazlarda tasarım değişmez. */
@supports (-webkit-touch-callout: none) {
    input:not([type=checkbox]):not([type=radio]):not([type=range]),
    select,
    textarea {
        font-size: 16px !important;
    }
}

/* .input-group içinde (tarih alanı: ikon + giriş) girişin 20px alt boşluğu flex satırını 60px'e
   uzatıyor, ikon kutusu satıra esnediği için 40px'lik girişten büyük görünüyordu (HİM doğum tarihi).
   Boşluk gruba taşınır; geçersiz durumda grup boşluksuz kalır (hata metni kendi boşluğunu verir). */
.input-group > .bizizmir-input-ui {
    margin-bottom: 0;
}

.input-group:has(> .bizizmir-input-ui:not(.is-invalid)) {
    margin-bottom: 20px;
}

.is-invalid ~ .invalid-feedback {
    margin-bottom: 0.5rem;
}

.invalid-feedback {
    margin-bottom: 0.5rem;
}

.bizizmir-input-ui:focus {
    box-shadow: 0px 0px 5px 0px var(--color-primary);
}

.bizizmir-input-ui::placeholder {
    color: rgba(143, 142, 142, 1);
    /* --biz-yazi-oran: A-/A/A+ oranı (ic-sayfa.js initFontSize; normalde tanımsız → 14px) */
    font-size: calc(14px * var(--biz-yazi-oran, 1));
    font-weight: 400;
}

.bizizmir-input-ui[type="date"] {
    color: rgba(143, 142, 142, 1);
    font-size: 14px;
    font-weight: 400;
}

    .bizizmir-input-ui[type="date"]::-webkit-calendar-picker-indicator {
        opacity: 1;
        display: block;
        background-repeat: no-repeat;
        background-image: url(../img/input-date-icon.svg);
        border-width: thin;
        width: 22px;
        height: 22px;
    }

.bizizmir-date {
    background-repeat: no-repeat;
    background-image: url(../img/input-date-icon.svg);
    background-repeat: no-repeat;
    background-position: calc(100% - 10px) center;
    background-size: 24px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

    .bizizmir-date::-webkit-calendar-picker-indicator {
        opacity: 0 !important;
        cursor: pointer;
    }

/* Ortak tarih seçici (tarih-secici.js, 21.10.2026): metin sağdaki ikonun altına girmez; temizle (✕) düğmesi ikonun
   soluna alınır (düğmenin me-2 boşluğu !important olduğundan burada da !important). */
.form-control.bizizmir-date {
    padding-right: 44px;
}

.bizizmir-date ~ .datepicker-clear-btn {
    margin-right: 38px !important;
}

.bizizmir-select-ui {
    height: 40px;
    background-color: rgba(255, 255, 255, 1);
    margin-bottom: 20px;
    border-radius: 10px;
    color: rgba(143, 142, 142, 1);
    font-size: 14px;
    font-weight: 400;
    background-image: url(../img/select-box-icon.svg);
    background-repeat: no-repeat;
    background-position: calc(100% - 20px) calc(1em + 0px), calc(100% - 15px) calc(1em + 2px), 100% 0;
}

    /* Açılan listedeki seçenekler okunur koyu metinle (21.10.2026; önceden kutunun gri yer tutucu rengindeydi). Kapalı
       kutudaki gri yazı giriş alanlarıyla aynı tasarım olduğundan değişmez. */
    .bizizmir-select-ui option {
        color: var(--color-text, #1B2438);
        font-size: 14px;
        font-weight: 400;
    }

    .bizizmir-select-ui:focus {
        box-shadow: 0px 0px 5px 0px var(--color-primary);
    }


.bizizmir-textarea-ui {
    height: auto;
    background-color: rgba(255, 255, 255, 1);
    margin-bottom: 32px;
    border-radius: 10px;
}

    .bizizmir-textarea-ui:focus {
        box-shadow: 0px 0px 5px 0px var(--color-primary);
    }

    .bizizmir-textarea-ui::placeholder {
        color: rgba(143, 142, 142, 1);
        font-size: calc(14px * var(--biz-yazi-oran, 1));
        font-weight: 400;
    }

.bizizmir-checkbox-ui input[type="radio"] {
    min-width: 22px;
    min-height: 22px;
    accent-color: var(--color-primary);
}


.bizizmir-checkbox-ui input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    padding: 0.1rem;
    border: 1px solid var(--color-primary);
    border-radius: 50%;
    margin-right: 7px;
    top: 0px;
    position: relative;
}


    .bizizmir-checkbox-ui input[type="radio"]::before {
        content: "";
        min-width: 14px;
        min-height: 14px;
        transform: scale(0);
        background-color: var(--color-primary);
        border-radius: 50%;
    }

    .bizizmir-checkbox-ui input[type="radio"]:checked::before {
        transform: scale(1);
    }

    .bizizmir-checkbox-ui input[type="radio"]:hover {
        color: var(--color-primary);
    }

.bizizmir-checkbox-ui input[type="checkbox"]::before {
    content: "";
    position: absolute;
    margin: auto;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    top: 0;
}

.bizizmir-checkbox-ui input[type="checkbox"]:checked {
    border: 1px solid var(--color-primary);
}

.bizizmir-checkbox-ui input[type="checkbox"] {
    appearance: none;
    background: #fff;
    border: 1px solid rgba(138, 138, 138, 1);
    min-height: 23px;
    min-width: 23px;
    margin-right: 4px;
    top: 0px;
    border-radius: 5px;
    outline: none;
    vertical-align: text-bottom;
    position: relative;
}

    /* The checkmark shape */
    .bizizmir-checkbox-ui input[type="checkbox"]:checked::before {
        border-right: 4px solid var(--color-primary);
        border-bottom: 5px solid var(--color-primary);
        height: 104%;
        width: 45%;
        transform: rotate(47deg) translateY(-23%) translateX(2%);
    }

.bizizmir-checkbox-ui {
    display: flex;
    align-items: center;
    margin-bottom: 32px;
}

    .bizizmir-checkbox-ui .bizizmir-radio-button {
        display: flex;
        align-items: center;
        margin-right: 7px;
    }


/* .bizizmir-input-file-ui {
  display: inline-block;
  padding: 6px 12px;
  cursor: pointer;
  background-color: transparent;
  color: rgba(46, 130, 208, 1);
  font-size: 0;
  border: 0;
  margin-bottom: 15px;
  max-width: 500px;
}

.input-file-border {
  border: 1px solid rgba(46, 130, 208, 1);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  border-radius: 10px;
  padding: 15px;
  margin-bottom: 30px;
}

.input-file-border p {
  color: rgba(46, 130, 208, 1);
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 0;
  text-align: center;
}

.bizizmir-input-file-ui:focus {
  box-shadow: none;
}

.bizizmir-input-file-ui::-webkit-file-upload-button {
  visibility: hidden;
}

.bizizmir-input-file-ui::before {
  content: 'İletmek istediğiniz belgeleri buradan ekleyiniz.';
  background-color: transparent;
  color: rgba(46, 130, 208, 1);
  height: auto;
  padding: 5px 8px;
  outline: none;
  white-space: nowrap;
  -webkit-user-select: none;
  border-radius: 0;
  cursor: pointer;
  font-weight: 400;
  font-size: 16px;
  background-image: url(../img/input-file-upload-icon.png);
  background-repeat: no-repeat;
  background-position: left center;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: end;
  text-align: right;
  white-space: normal;
} */

.input-file-border {
    border: 1px solid var(--color-primary);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    border-radius: 10px;
    padding: 15px;
    width: 100%;
    margin-bottom: 30px;
}

    .input-file-border.is-invalid {
        border-color: var(--bs-form-invalid-border-color);
    }

    .input-file-border .file-input-container {
        margin-top: 10px;
    }

    .input-file-border .input-file-message p {
        color: var(--color-primary);
        font-weight: 700;
        font-size: 14px;
        margin-bottom: 0;
        text-align: center;
    }

    .input-file-border .input-file-message span {
        font-size: 13.33px;
        color: var(--color-primary);
    }

.file-input-container {
    position: relative;
    width: 100%;
}

.file-input-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.file-list {
    margin-bottom: 0;
    margin-top: 10px;
    width: 100%;
}

.file-list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 12px;
    background-color: rgba(21, 101, 192, 0.05);
    border-radius: 5px;
    margin-bottom: 5px;
}

    .file-list-item span {
        font-size: 14px;
    }

    .file-list-item .file-remove-btn {
        cursor: pointer;
        font-family: 'Izmir-Medium';
        font-size: 22px;
    }

.custom-file {
    width: 100%;
}

.custom-file-input {
    cursor: pointer;
    opacity: 0;
    width: 0;
    height: 0;
    display: none;
}

.custom-file-label {
    max-width: 500px;
    margin: 0 auto;
    background-color: transparent;
    color: var(--color-primary);
    font-size: 16px;
    font-weight: 400;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    white-space: normal;
    padding: 10px;
    cursor: pointer;
}

    .custom-file-label > img {
        width: 32px;
        height: 32px;
    }

.file-list-container {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    white-space: normal;
    gap: 2px;
    padding: 5px 0;
    width: 90%;
}

    .file-list-container > li {
        margin-right: 15px;
        flex-flow: wrap;
        padding: 3px 7px;
        border: 1px solid #BFBFBF !important;
        border-radius: 10px !important;
    }

        .file-list-container > li > .btn {
            height: 22px;
            width: 22px;
            line-height: 1rem;
            font-size: 1.25rem;
            background-color: #ED4C5C;
            color: #ffffff;
        }

            .file-list-container > li > .btn:active {
                border-color: transparent;
            }

.bizizmir-blue-bg-icon-button {
    background-color: var(--color-cta);
    border-radius: 10px;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    border: 0;
    height: 40px;
    margin-bottom: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}

    .bizizmir-blue-bg-icon-button img {
        margin-right: 7px;
    }

.bizizmir-white-bg-button {
    background-color: #fff;
    border: 2px solid var(--color-primary);
    width: 100%;
    height: 40px;
    border-radius: 10px;
    color: var(--color-primary);
    font-size: 14px;
    font-weight: 700;
    width: 100%;
    height: 40px;
}

/* Bağlantı (<a>) olarak kullanılan beyaz düğme: <button> içeriği kendiliğinden ortalar, <a> ortalamaz; metin üste
   yapışıp yanındaki mavi düğmeyle (inline-flex) aynı hizada durmuyordu (HİM başvuru durumu "Başka Başvuru Sorgula"). */
a.bizizmir-white-bg-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.bizizmir-white-bg-icon-button {
    background-color: #fff;
    border: 2px solid var(--color-primary);
    width: 100%;
    height: 40px;
    border-radius: 10px;
    color: var(--color-primary);
    font-size: 14px;
    font-weight: 700;
    width: 100%;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .bizizmir-white-bg-icon-button img {
        margin-right: 15px;
    }


.contents {
    overflow: hidden;
    position: relative;
    height: auto;
    max-height: 245px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}



.bizizmir-accordion-ui .accordion-button::after {
    background-image: url(../img/accordion-down-icon.svg);
}

.bizizmir-accordion-ui .accordion-button:not(.collapsed)::after {
    background-image: url(../img/accordion-down-icon.svg);
}


.bizizmir-accordion-ui .accordion-button {
    background-color: var(--color-primary);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    height: 40px;
}

.bizizmir-accordion-ui .accordion-collapse {
    border: 1px solid var(--color-primary);
    border-top: 0;
}

.bizizmir-accordion-ui .accordion-button:focus {
    box-shadow: none;
}

/* Haritalar */
.inner-page-card.maps-detail-card .hizmet-adi {
    height: 260px;
}

    .inner-page-card.maps-detail-card .hizmet-adi > a {
        height: 100%;
        justify-content: space-evenly;
    }

.inner-page-card.maps-detail-card .maps-image {
    width: 100%;
    height: 160px;
}

    .inner-page-card.maps-detail-card .maps-image img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

.inner-page-card.maps-detail-card .maps-detail-container p {
    font-size: 14px;
    font-family: "Izmir-Medium";
    color: #000000;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    line-height: 1.25em;
    max-height: calc(1.25em * 3);
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    white-space: normal;
    overflow: hidden;
    text-align: left;
    margin-bottom: 0;
    padding: 0;
}

.maps-box-content {
    border: 1px solid rgba(191, 191, 191, 1);
    border-radius: 30px;
    height: auto;
    margin-bottom: 15px;
}

    .maps-box-content img {
        width: 100%;
        border-top-left-radius: 30px;
        border-top-right-radius: 30px;
        object-fit: cover;
        height: 140px;
    }

    .maps-box-content .maps-box-description {
        padding: 15px 20px;
        text-align: center;
        max-height: 76px;
    }

        .maps-box-content .maps-box-description h4 {
            color: rgba(0, 0, 0, 1);
            font-size: 16px;
            font-weight: 500;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            /* number of lines to show */
            line-clamp: 2;
            -webkit-box-orient: vertical;
        }

    .maps-box-content a {
        background-color: var(--color-cta);
        height: 54px;
        text-decoration: none;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        border-bottom-left-radius: 30px;
        border-bottom-right-radius: 30px;
    }

.harita-detay-page-button-flex {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 15px;
}

    .harita-detay-page-button-flex .harita-detay-button {
        border: 1px solid var(--color-primary);
        padding: 7px 15px;
        border-radius: 10px;
        min-width: 115px;
        display: flex;
        justify-content: center;
        align-items: center;
        text-decoration: none;
        color: rgba(75, 75, 75, 1);
        font-size: 14px;
        font-weight: 600;
    }

        .harita-detay-page-button-flex .harita-detay-button.active {
            background-color: var(--color-primary);
            color: #fff;
        }

.harita-detay-mobil-filtreleme {
    display: none;
}

    .harita-detay-mobil-filtreleme .dropdown button {
        width: 100%;
        background-color: var(--color-primary);
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: #fff;
        font-weight: 600;
    }

#ic-sayfalar .nobetci-eczaneler-content {
    margin-top: 2rem;
}

#ic-sayfalar .nobetci-eczane {
    width: 100%;
    min-height: 200px;
    height: auto;
    border-radius: 30px;
    margin-bottom: 30px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border: 1px solid rgba(191, 191, 191, 1);
    text-align: center;
}

    #ic-sayfalar .nobetci-eczane .nobetci-eczane-adress {
        padding: 15px;
        min-height: 250px;
        max-height: 250px;
        height: 250px;
    }

        #ic-sayfalar .nobetci-eczane .nobetci-eczane-adress h2 {
            font-size: 20px;
            font-weight: 700;
            color: rgba(0, 0, 0, 1);
            display: -webkit-box;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
            -webkit-line-clamp: 1;
            line-clamp: 1;
            line-height: 1.5;
            max-height: calc(1.5em * 1);
        }

        #ic-sayfalar .nobetci-eczane .nobetci-eczane-adress p {
            font-size: 16px;
            font-weight: 500;
            color: rgba(0, 0, 0, 0.4);
            display: -webkit-box;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
            -webkit-line-clamp: 3;
            line-clamp: 3;
            line-height: 1.5;
            max-height: calc(1.5em * 3);
        }

    #ic-sayfalar .nobetci-eczane .nobetci-eczane-button {
        display: flex;
        justify-content: space-between;
    }

        #ic-sayfalar .nobetci-eczane .nobetci-eczane-button .eczane-tel {
            height: 45px;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            text-decoration: none;
            font-size: 14px;
            font-weight: 500;
        }

#ic-sayfalar .eczane-yol-tarifi {
    height: 45px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
}

#ic-sayfalar .eczane-tel img {
    margin-right: 8px;
}

#ic-sayfalar .eczane-yol-tarifi img {
    margin-right: 8px;
}

#ic-sayfalar .nobetci-eczane .nobetci-eczane-button .eczane-tel {
    background-color: var(--color-cta);
    color: #fff;
    border-bottom-left-radius: 30px;
}

#ic-sayfalar .nobetci-eczane .nobetci-eczane-button .eczane-yol-tarifi {
    background-color: #fff;
    color: var(--color-primary);
    border-bottom-right-radius: 30px;
    text-decoration: none;
    font-size: 14px;
    border: 1px solid var(--color-primary);
}

/* Otoparklar ve İzmirim Kart Ortak CSS */

.ic-sayfa-card-container {
    margin-top: 2rem;
}

.inner-page-card .hizmet-adi {
    width: 100%;
    padding: 1.5rem;
    height: 215px;
    justify-content: space-evenly;
}

    .inner-page-card .hizmet-adi img {
        margin-bottom: 1rem;
    }

.inner-page-card .hizmet-description {
    min-height: 54px;
    height: 54px;
}

    .inner-page-card .hizmet-description a {
        color: #ffffff;
        text-decoration: none;
        font-size: 14px;
    }

/* Otoparklar */
.otopark-card .hizmet-adi h6 {
    font-size: 1rem;
    color: rgba(0, 0, 0, 1);
    margin: 0;
    text-align: center;
}

.chart-container {
    height: 100%;
    width: 100%;
}

.otopark-status {
    width: 100%;
    display: inline-flex;
    justify-content: space-between;
}

.status-text {
    font-family: "Izmir-Bold";
    font-size: 18px;
    color: var(--color-primary);
    line-height: 24.16px;
}

.hollow-text {
    color: white;
    background-color: transparent;
    text-shadow: -1px -1px 0 var(--color-primary), 1px -1px 0 var(--color-primary), -1px 1px 0 var(--color-primary), 1px 1px 0 var(--color-primary);
}

/* İzmirim Kart */
.btn-kart-ekle {
    background-color: var(--color-cta);
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.5rem 1.5rem;
    border: 1px solid var(--color-cta);
    margin-top: 1.2rem;
    font-family: "Izmir-Bold";
    font-size: 14px;
}

    .btn-kart-ekle:hover {
        color: var(--color-cta);
        background-color: #ffffff;
    }

        .btn-kart-ekle:hover img {
            filter: brightness(0) saturate(100%) invert(41%) sepia(91%) saturate(476%) hue-rotate(187deg) brightness(94%) contrast(92%);
        }

.izmirim-kart-detay-container {
    width: 100%;
}

    .izmirim-kart-detay-container p {
        margin: 0;
    }

    .izmirim-kart-detay-container .izmirim-kart-detay {
        display: flex;
        justify-content: space-between;
    }

.izmirim-kart-detay {
    margin-bottom: 0.5rem;
}

    .izmirim-kart-detay .izmirim-kart-adi {
        font-family: "Izmir-Bold";
        font-size: 20px;
    }

    .izmirim-kart-detay .izmirim-kart-miktari {
        font-family: "Izmir-Bold";
        color: var(--color-primary);
    }

.izmirim-kart-detay-container .izmirim-kart-numarasi {
    color: rgba(0, 0, 0, 0.4);
}

/* İzmirim Kart Ekle */
.ic-sayfa-form-container {
    margin-top: 2rem;
}

    /* Kart Bakiye Uyarı Sayfası */
    .ic-sayfa-form-container .ic-sayfa-info p {
        font-weight: 400;
    }

        .ic-sayfa-form-container .ic-sayfa-info p span {
            font-weight: 700;
        }

/* Etkinlikler filtre düğmeleri (26.10.2026): "Ara" ile "Filtreyi Temizle" aynı sütunda yan yana, eşit genişlikte;
   Temizle yalnız filtre uygulanınca görünür (hidden), o zaman Ara sütunu paylaşır. */
.etkinlik-filtre-dugmeleri {
    display: flex;
    gap: 8px;
}

    .etkinlik-filtre-dugmeleri > button {
        flex: 1 1 0;
        min-width: 0;
        width: auto;
        padding: 0 12px;
        white-space: nowrap;
    }

    .etkinlik-filtre-dugmeleri > button[hidden] {
        display: none;
    }

/* Etkinlik araması (27.10.2026): alanın solunda büyüteç; filtre satırının üstünde tam genişlik. */
.etkinlik-arama {
    position: relative;
}

    .etkinlik-arama svg {
        position: absolute;
        left: 16px;
        top: 50%;
        width: 18px;
        height: 18px;
        transform: translateY(-50%);
        color: var(--color-text-muted);
        pointer-events: none;
    }

    .etkinlik-arama input {
        height: 52px;
        margin-bottom: 0;
        padding-left: 44px;
        border-radius: 14px;
    }

/* Etkinlik filtreleri — kategori ve tarih alanı (27.10.2026): tarayıcının klasik açılır listesi yerine solda ikon, üstte
   küçük etiket, altında değer, sağda ok. Kategori listesi site görünümünde açılır (role=listbox); tarih alanı aynı kabukta
   ortak tarih seçiciyi kullanır (tarih-secici.js'in eklediği bizizmir-date ikonu ve dolgusu burada kapatılır). */
.etkinlik-secim {
    position: relative;
}

.etkinlik-alan {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 56px;
    margin: 0;
    padding: 8px 14px;
    border: 1px solid var(--color-border);
    border-radius: 14px;
    background: var(--color-bg-card);
    color: var(--color-text);
    text-align: left;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease;
}

    .etkinlik-alan:hover {
        border-color: var(--color-border-active);
    }

    .etkinlik-alan:focus-within,
    .etkinlik-alan:focus-visible,
    .etkinlik-alan[aria-expanded="true"] {
        border-color: var(--color-primary);
        box-shadow: 0 0 0 3px var(--color-primary-surface);
        outline: none;
    }

.etkinlik-alan-ikon {
    display: inline-flex;
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: var(--color-primary-surface);
    color: var(--color-primary);
}

    .etkinlik-alan-ikon svg {
        width: 20px;
        height: 20px;
    }

.etkinlik-alan-metin {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
    line-height: 1.25;
}

    .etkinlik-alan-metin small {
        font-size: 12px;
        color: var(--color-text-muted);
    }

    .etkinlik-alan-metin strong,
    .etkinlik-alan-metin input {
        overflow: hidden;
        font-family: "Izmir-Bold";
        font-size: 15px;
        font-weight: normal;
        color: var(--color-text);
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .etkinlik-alan-metin input,
    .etkinlik-alan-metin input.bizizmir-date {
        width: 100%;
        min-width: 0;
        height: auto;
        margin: 0;
        padding: 0;
        border: 0;
        background: none;
        box-shadow: none;
        outline: none;
        cursor: pointer;
    }

        .etkinlik-alan-metin input::placeholder {
            color: var(--color-text);
            opacity: 1;
        }

.etkinlik-alan-ok {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    color: var(--color-text-muted);
    transition: transform .15s ease;
}

.etkinlik-alan[aria-expanded="true"] .etkinlik-alan-ok {
    transform: rotate(180deg);
}

.etkinlik-secim-liste {
    position: absolute;
    z-index: 30;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    max-height: 360px;
    margin: 0;
    padding: 6px;
    overflow-y: auto;
    list-style: none;
    border: 1px solid var(--color-border);
    border-radius: 14px;
    background: var(--color-bg-card);
    box-shadow: 0 14px 36px rgba(15, 23, 42, .14);
    outline: none;
}

    .etkinlik-secim-liste li {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 12px;
        border-radius: 10px;
        font-family: "Izmir-Medium";
        color: var(--color-text);
        cursor: pointer;
    }

        .etkinlik-secim-liste li svg {
            flex: 0 0 18px;
            width: 18px;
            height: 18px;
            color: var(--color-primary);
        }

        .etkinlik-secim-liste li.aktif {
            background: var(--color-primary-surface);
        }

        .etkinlik-secim-liste li[aria-selected="true"] {
            font-family: "Izmir-Bold";
            color: var(--color-primary);
        }

    .etkinlik-secim-liste .etkinlik-secim-tik {
        margin-left: auto;
        visibility: hidden;
    }

    .etkinlik-secim-liste li[aria-selected="true"] .etkinlik-secim-tik {
        visibility: visible;
    }

/* Temizle düğmesi alanlarla aynı yükseklikte. */
.etkinlik-filtre-dugmeleri > button {
    min-height: 56px;
    border-radius: 14px;
}

/* Etkinlikler — liste kartı (26.10.2026): kapak, ad, kısa tanım ve "Devam Et" düğmesi. Kapaklar çoğunlukla dikey
   afiş (~5:7), bir kısmı kare ya da yatay; afişin üstünde ve altında yazı olduğu için kırpılmaz, 4:5 çerçeveye
   sığdırılır (contain), kalan alan zemin rengiyle dolar. Görsel yoksa ya da yüklenemezse çerçevede takvim simgesi
   kalır. Kartlar satırda eşit yükseklikte; düğme kartın dibine yaslanır. Telefonda (<576px) kart yataylaşır:
   solda küçük kapak, sağda metin (tam genişlikte 4:5 kapak ekranı kaplıyordu). */
.etkinlik-kart {
    display: flex;
    flex-direction: column;
    height: 100%;
    background-color: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    box-shadow: var(--shadow-subtle);
    overflow: hidden;
    transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

    .etkinlik-kart:hover {
        box-shadow: var(--shadow-card-hover);
        border-color: rgba(21, 101, 192, 0.25);
        transform: translateY(-2px);
    }

.etkinlik-kart-kapak {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 4 / 5;
    background-color: var(--color-bg-section-alt);
    border-bottom: 1px solid var(--color-border-subtle);
}

    .etkinlik-kart-kapak img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

.etkinlik-kart-kapak-yedek {
    width: 44px;
    height: 44px;
    color: var(--color-text-muted);
}

.etkinlik-kart-govde {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 6px;
    padding: 14px 16px 16px;
    min-width: 0;
}

.etkinlik-kart-baslik {
    font-size: 15px;
    font-weight: 800;
    line-height: 1.3;
    color: var(--color-text);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
}

/* Kaynak metni satır sonlu ("tarih\r\nYer: mekan"); satırlar korunur, en çok 3 satır. */
.etkinlik-kart-tanim {
    font-size: 13px;
    line-height: 1.45;
    color: var(--color-text-secondary);
    white-space: pre-line;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
}

/* margin-top: auto düğmeyi kartın dibine iter; gövdedeki gap metinle arasında en az 6 px bırakır. */
.etkinlik-kart-devam {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 16px;
    border-radius: 8px;
    background-color: var(--color-primary);
    color: var(--color-text-on-dark);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    text-decoration: none;
    transition: background-color 0.2s ease;
}

    .etkinlik-kart-devam svg {
        width: 16px;
        height: 16px;
        flex-shrink: 0;
    }

    .etkinlik-kart-devam:hover,
    .etkinlik-kart-devam:focus-visible {
        background-color: var(--color-primary-hover);
        color: var(--color-text-on-dark);
    }

    .etkinlik-kart-devam:focus-visible {
        outline: 3px solid var(--color-primary-light);
        outline-offset: 2px;
    }

@media (max-width: 575.98px) {
    .etkinlik-kart {
        flex-direction: row;
    }

    .etkinlik-kart-kapak {
        flex: 0 0 112px;
        align-self: flex-start;
        border-bottom: 0;
        border-right: 1px solid var(--color-border-subtle);
    }

    .etkinlik-kart-govde {
        padding: 12px 14px;
    }

    .etkinlik-kart-devam {
        align-self: flex-start;
    }
}

/* Ekipman */
.etkinlik-detay-card .hizmet-adi.ekipman {
    height: 260px;
}

    .etkinlik-detay-card .hizmet-adi.ekipman img {
        max-width: 95%;
        height: 95px;
    }

.ekipman-detay-container p {
    font-size: 14px;
    font-family: "Izmir-Medium";
    color: #000000;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    line-height: 1.2em;
    max-height: calc(1.2em * 3);
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    white-space: normal;
    overflow: hidden;
    text-align: left;
    margin-bottom: 0;
    padding: 0;
    word-break: break-word;
}

/* Etkinlik Detay */
.about-event > h5 {
    font-family: "Izmir-Bold";
    margin-bottom: 1.5rem;
}

.about-event .event-detail p {
    font-family: "Izmir-Medium";
}

    .about-event .event-detail p span {
        color: var(--color-primary);
    }

    /* Konum → Google Maps (26.10.2026): metin rengi korunur, altı çizili ve konum simgeli; yeni sekmede açılır. */
    .about-event .event-detail .etkinlik-harita-baglantisi {
        color: inherit;
        text-decoration: underline;
        text-underline-offset: 3px;
        white-space: nowrap;
    }

        .about-event .event-detail .etkinlik-harita-baglantisi:hover,
        .about-event .event-detail .etkinlik-harita-baglantisi:focus-visible {
            color: var(--color-primary-hover);
        }

        .about-event .event-detail .etkinlik-harita-baglantisi svg {
            width: 14px;
            height: 14px;
            margin-left: 3px;
            vertical-align: -2px;
        }

.btn-get-ticket {
    background-color: var(--color-cta);
    border-radius: 10px;
    color: #ffffff;
    font-size: 14px;
    font-family: "Izmir-Bold";
    /* inline-flex: görünüm <a> ile çizildiğinde (statikte <button>) flex blok gibi
       satırın tamamına yayılıp tam genişlik şerit oluyordu; düğme içerik kadar kalır. */
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 8px 25px;
    letter-spacing: 0.75px;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}

.get-ticket-container {
    margin: 2rem 0;
}

.share-event-container h5 {
    font-family: "Izmir-Bold";
}

.share-links {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2rem;
}

    .share-links .btn-copy-link {
        display: flex;
        align-items: center;
        white-space: nowrap;
        gap: 8px;
        color: var(--color-primary);
        border: 1px solid var(--color-primary);
        border-radius: 10px;
        height: 32px;
    }

.event-description-container {
    margin-top: 1.5rem;
}

    .event-description-container h5 {
        font-family: "Izmir-Bold";
    }

/* Etkinlik seansları (26.10.2026): seans başına tarih, mekan (Google Maps), ücret ve seansın bilet düğmesi. */
.etkinlik-seanslar {
    margin-top: 1.5rem;
}

    .etkinlik-seanslar h5 {
        font-family: "Izmir-Bold";
    }

.etkinlik-seans-listesi {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.etkinlik-seans {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px 24px;
    padding: 14px 18px;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: var(--color-bg-card);
}

.etkinlik-seans-bilgi {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 20px;
    min-width: 0;
    font-family: "Izmir-Medium";
}

    .etkinlik-seans-saat {
        margin-left: 4px;
        font-family: "Izmir-Bold";
        color: var(--color-primary);
    }

.etkinlik-seans-mekan {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
}

    .etkinlik-seans-mekan:hover,
    .etkinlik-seans-mekan:focus-visible {
        color: var(--color-primary-hover);
    }

    .etkinlik-seans-mekan svg {
        width: 14px;
        height: 14px;
        flex-shrink: 0;
    }

.etkinlik-seans-ucret {
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 13px;
    background: var(--color-primary-surface);
    color: var(--color-primary);
}

.etkinlik-seans-durum {
    font-family: "Izmir-Medium";
    font-size: 14px;
    color: var(--color-text-muted);
}

/* Geniş ekranda seanslar ortak sütunlarda (27.10.2026): tarih | saat | mekan | ücret | bilet. Satırlar listenin sütunlarını
   subgrid ile paylaşır; sütun en uzun seansa göre genişler, böylece saat, mekan ve ücret her satırda aynı hizada başlar. Uzun
   mekan adı sığmazsa satır kırılır. Dar ekranda ve subgrid desteklemeyen tarayıcıda yukarıdaki satır içi akış kalır. */
@media (min-width: 768px) {
    @supports (grid-template-columns: subgrid) {
        .etkinlik-seans-listesi {
            display: grid;
            grid-template-columns: max-content max-content minmax(0, max-content) max-content minmax(max-content, 1fr);
            column-gap: 24px;
        }

        .etkinlik-seans {
            grid-column: 1 / -1;
            display: grid;
            grid-template-columns: subgrid;
        }

        .etkinlik-seans-bilgi,
        .etkinlik-seans-zaman {
            display: contents;
        }

        .etkinlik-seans-tarih {
            grid-column: 1;
        }

        .etkinlik-seans-saat {
            grid-column: 2;
            margin-left: 0;
        }

        .etkinlik-seans-mekan {
            grid-column: 3;
            justify-self: start;
        }

        .etkinlik-seans-ucret {
            grid-column: 4;
            justify-self: start;
        }

        .etkinlik-seans-eylem {
            grid-column: 5;
            justify-self: end;
        }
    }
}

@media (max-width: 576px) {
    .etkinlik-seans {
        padding: 12px 14px;
    }

    .etkinlik-seans-eylem,
    .etkinlik-seans-eylem .btn-get-ticket {
        width: 100%;
    }

        .etkinlik-seans-eylem .btn-get-ticket {
            justify-content: center;
        }
}

/* Gönüllülük */
.gonulluluk-info {
    display: block;
}

    .gonulluluk-info > h4,
    .gonulluluk-icerik > h4 {
        margin-bottom: 1.75rem;
        font-family: "Izmir-Bold";
        font-size: 24px;
    }

    .gonulluluk-info > p,
    .gonulluluk-icerik > ul {
        line-height: 21.47px;
        font-family: "Izmir-Medium";
    }

.btn-devam {
    width: 325px;
    margin-top: 25px;
}

/* Gönüllülük Kolları */
.gonulluluk-tipleri {
    margin-bottom: 24px;
}

    .gonulluluk-tipleri .gonulluluk-tipleri-buttons {
        display: flex;
        gap: 12px;
        flex-wrap: wrap;
    }

        .gonulluluk-tipleri .gonulluluk-tipleri-buttons .filter-btn {
            line-height: 18.79px;
            font-family: "Izmir-Semibold";
            height: 28px;
            padding: 0 18px;
        }

.gonulluluk-card .hizmet-adi > h5 {
    font-size: 16px;
    font-family: "Izmir-Bold";
}

.gonulluluk-card .hizmet-adi > p {
    font-size: 14px;
    font-family: "Izmir-Medium";
    line-height: 17.89px;
    margin-bottom: 0;
}

.hizmet-description.link-disabled {
    background-color: #c7c7c7;
    border-color: #c7c7c7;
}

    .hizmet-description.link-disabled a {
        cursor: default;
    }

/* Gönüllülük Detay */
.hizmet-info p {
    font-family: "Izmir-Medium";
}

.gonulluluk-detay-icerik {
    display: flex;
    align-items: center;
    flex-direction: column;
}

    .gonulluluk-detay-icerik > p {
        color: var(--color-primary);
        font-family: "Izmir-Medium";
    }

        .gonulluluk-detay-icerik > p > span {
            font-family: "Izmir-Bold";
        }

    .gonulluluk-detay-icerik > button {
        width: 20%;
    }

/* HİM */
.redirect-links {
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

    .redirect-links .redirect-link-item {
        width: 25%;
    }

        .redirect-links .redirect-link-item > button {
            margin-bottom: 0;
            min-width: 240px;
        }

            .redirect-links .redirect-link-item > button > a {
                text-decoration: none;
            }

        .redirect-links .redirect-link-item > .bizizmir-blue-bg-button > a {
            color: #ffffff;
        }

        .redirect-links .redirect-link-item > .bizizmir-white-bg-icon-button > a {
            color: var(--color-primary);
        }

.him-login-warning {
    color: rgba(0, 0, 0, 0.5);
    font-family: "Izmir-Bold";
    font-size: 20px;
}

.basvuru-durum-detay > h4 {
    font-family: "Izmir-Bold";
    margin: 32px 0;
    text-align: center;
}

.basvuru-durum-detay > p {
    margin-bottom: 0.75rem;
}

    .basvuru-durum-detay > p > span {
        font-family: "Izmir-Bold";
    }

.basvuru-durum-info {
    font-family: "Izmir-SemiBold";
    color: #000000;
    margin: 38px 0 32px;
}

.him-basvuru-detay-card a {
    text-decoration: none;
    color: #000000;
}

.him-basvuru-detay-card .hizmet-adi {
    height: 350px;
    justify-content: flex-start;
    text-align: start;
}

    .him-basvuru-detay-card .hizmet-adi .main__box__header h5 {
        font-family: 'Izmir-SemiBold';
        font-size: 1rem;
    }

    .him-basvuru-detay-card .hizmet-adi .main__box__content p {
        font-family: 'Izmir-Light';
        font-size: 0.875rem;
        display: -webkit-box;
        -webkit-line-clamp: 7;
        line-clamp: 7;
        line-height: 1.25rem;
        max-height: calc(1.25rem * 7);
        -webkit-box-orient: vertical;
        text-overflow: ellipsis;
        white-space: normal;
        overflow: hidden;
    }

        .him-basvuru-detay-card .hizmet-adi .main__box__content p span {
            font-family: 'Izmir-SemiBold';
        }


/* Askıda İş */
.askida-is-card .hizmet-adi {
    height: 175px;
}

    .askida-is-card .hizmet-adi img {
        margin-bottom: 0;
        width: 70px;
        height: 70px;
    }

    .askida-is-card .hizmet-adi h6 {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        line-height: 1.5rem;
        max-height: calc(1.5rem * 2);
        -webkit-box-orient: vertical;
        text-overflow: ellipsis;
        white-space: normal;
        overflow: hidden;
    }


.is-ilan-detay > p {
    font-size: 18px;
}

    .is-ilan-detay > p > span {
        color: var(--color-primary);
        font-family: "Izmir-Bold";
    }

.is-ilan-detay > button {
    width: 230px;
    margin-top: 1rem;
}

.select2 {
    margin-bottom: 30px;
    width: 100% !important;
}

.form-group .select2 {
    margin-bottom: 0;
}

.select2-dropdown {
    border: var(--bs-border-width) solid var(--bs-border-color);
}

.select2-container--default .select2-selection--single {
    height: 40px;
}

.select2-container--default .select2-selection--single, .select2-container--default .select2-selection--multiple {
    min-height: 40px;
    background-color: rgba(255, 255, 255, 1);
    border-radius: 10px;
    color: rgba(143, 142, 142, 1);
    font-size: 14px;
    font-weight: 400;
    background-image: url(../img/select-box-icon.svg);
    background-repeat: no-repeat;
    background-position: calc(100% - 15px) calc(1em + -2px), calc(100% - 15px) calc(1em + 2px), 100% 0;
    padding-bottom: 0;
}

.select2-container--default .select2-selection.select2-selection--single.select2-selection--clearable {
    background: none !important;
}

.select2-container--default .select2-selection--single .select2-selection__clear {
    height: 38px;
    font-size: 22px;
}

    .select2-container--default .select2-selection--single .select2-selection__clear span {
        display: inline-flex;
        align-items: center;
        height: 38px;
    }

.select2-container--default .select2-selection--single.is-invalid {
    border-color: var(--bs-form-invalid-border-color);
}

    .select2-container--default .select2-selection--single.is-invalid:focus {
        border-color: var(--bs-form-invalid-border-color);
        box-shadow: 0px 0px 5px 0px var(--bs-form-invalid-border-color);
        outline: 0;
    }

.select2-container--default .select2-selection--single:focus, .select2-container--default.select2-container--focus .select2-selection--multiple:focus {
    box-shadow: 0px 0px 5px 0px var(--color-primary);
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    height: 40px;
}

.select2-container--default .select2-selection--single .select2-selection__rendered, .select2-search.select2-search--inline {
    display: flex;
    align-items: center;
    color: rgba(143, 142, 142, 1);
}

.select2-container .select2-search--inline .select2-search__field {
    margin-top: 0;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    display: none;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    outline-color: transparent;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: #ffffff;
    border-color: var(--color-primary);
    margin-block: 2px;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.select2-container .select2-selection--multiple .select2-selection__rendered {
    margin: 0.5rem 0;
}

@media (max-width: 1440px) {
    /* HİM */
    .redirect-links .redirect-link-item {
        width: 30%;
    }
}

@media (max-width: 1199px) {

    /* HİM */
    .redirect-links .redirect-link-item > button {
        width: 280px;
    }
}

@media (max-width: 1024px) {
}

@media (max-width: 992px) {
    .ic-sayfa-card-container {
        margin-top: 1rem;
    }

    /* Etkinlik Detay */
    .share-links {
        gap: 1rem;
    }

    /* HİM */
    .redirect-links {
        flex-direction: column;
        gap: 10px;
    }

        .redirect-links .redirect-link-item {
            width: 75%;
        }

            .redirect-links .redirect-link-item > button {
                width: 100%;
            }
}

@media (max-width: 768px) {

    /* Etkinlik Detay */
    .about-event {
        margin-top: 1rem;
    }

        .about-event > h5 {
            margin-bottom: 1rem;
        }

        .about-event .event-detail p {
            margin-bottom: 0.5rem;
        }

    .get-ticket-container {
        margin: 1rem 0;
    }

    .btn-get-ticket {
        font-size: 13px;
        gap: 8px;
        padding: 6px 20px;
    }

        .btn-get-ticket img {
            width: 16px;
            height: 16px;
        }

    .share-event-container h5 {
        font-size: 1rem;
    }

    .share-links .btn-copy-link {
        height: 28px;
        font-size: 14px;
    }

        .share-links .btn-copy-link img {
            width: 16px;
            height: 16px;
        }

    .share-links a img {
        width: 28px;
        height: 28px;
    }

    /* Gönüllülük */
    .gonulluluk-info > h4,
    .gonulluluk-icerik > h4 {
        font-size: 18px;
        margin-bottom: 0.75rem;
    }

    .gonulluluk-info > p,
    .gonulluluk-icerik > ul {
        font-size: 14px;
    }

    .btn-devam {
        width: 100%;
        margin-top: 10px;
    }

    /* Gönüllülük Detay */
    .gonulluluk-detay-icerik > button {
        width: 50%;
    }

    /* HİM */
    .redirect-links .redirect-link-item {
        width: 100%;
    }

    .him-login-warning {
        font-size: 16px;
    }

    .basvuru-durum-info {
        margin: 24px 0 20px;
    }

    .basvuru-durum-detay > h4 {
        margin: 28px 0 24px;
    }

    .input-file-border .input-file-message p {
        font-size: 13.33px;
    }

    .input-file-border .input-file-message img {
        width: 24px;
        height: 24px;
    }

    .input-file-border .input-file-message span {
        font-size: 12px;
    }

    .file-list-item span {
        font-size: 12px;
    }

    .file-list-item .file-remove-btn {
        font-size: 18px;
    }
    /* Askıda İş */
    .is-ilan-detay > button {
        width: 100%;
    }
}

@media (max-width: 640px) {
}

@media (max-width: 576px) {

    /* Gönüllülük Detay */
    .gonulluluk-detay-icerik > button {
        width: 100%;
    }

    /* HİM */
    .him-basvuru-detay-card .hizmet-adi {
        height: auto;
    }
}

@media (max-width: 540px) {
}

@media (max-width: 480px) {
}

@media (max-width: 375px) {
}


@media (max-width: 1440px) {
    #ic-sayfalar .nobetci-eczane .nobetci-eczane-adress h2 {
        font-size: 18px;
        font-weight: 600;
        margin-top: 0.5rem;
        margin-bottom: 0.75rem;
    }

    #ic-sayfalar .nobetci-eczane .nobetci-eczane-adress p {
        font-size: 14px;
    }
}

@media (max-width: 1199px) {
    #ic-sayfalar .nobetci-eczane .nobetci-eczane-adress h2 {
        font-size: 16px;
    }
}

@media (max-width: 992px) {
    #ic-sayfalar .nobetci-eczane .nobetci-eczane-adress h2 {
        font-size: 15px;
    }
}

.rounded-table {
    border-radius: 10px;
    border-color: var(--color-primary) !important;
    border: 1px solid var(--color-primary);
    overflow: hidden;
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px;
    border-bottom: 0px;
}

.border-primary {
    margin: 0px !important;
    border-color: var(--color-primary) !important;
}

    .border-primary td {
        border-width: 1px;
        border-right-width: 0px;
    }

    .border-primary th {
        border-width: 1px;
        border-top-width: 0px;
        border-right-width: 0px;
    }

        .border-primary th:first-child {
            border-left-width: 0px;
        }

.bizizmir-ui .form-control {
    color: black;
    border-radius: 10px;
    padding: 10px;
    border: 1px solid var(--color-primary);
}

.bizizmir-ui button {
    background-color: var(--color-cta);
    border: 1px solid var(--color-cta);
    border-radius: 10px;
}

.bizizmir-ui .formgonder {
    background-color: var(--color-cta);
    border: 1px solid var(--color-cta);
    border-radius: 10px;
}

.izbb-radio-box label {
    position: relative;
    align-items: center;
    margin: 10px 10px 10px 0px;
    flex-direction: row;
    display: flex;
}



/* Base styles for both types of inputs */

.bizizmir-checkbox-button input[type="checkbox"] {
    appearance: none;
    background: #fff;
    border: 1px solid rgba(138, 138, 138, 1);
    height: 25px;
    min-width: 25px;
    margin-right: 4px;
    top: -2px;
    border-radius: 100%;
    outline: none;
    vertical-align: text-bottom;
    position: relative;
}

.radiogroup-item {
    margin-left: -12px;
}

.bizizmir-checkbox-ui input[type="radio"] {
    margin-left: 8px;
    margin-right: 8px;
    top: 2px;
    right: -4px;
}

/* Remove the circular shape from checkboxes */
input[type="checkbox"] {
    border-radius: 5px;
}

.izbb-check-box {
    margin-bottom: 5px;
    align-items: center;
    display: flex;
}

/* Styles for the pseudo-elements */
.bizizmir-checkbox-ui input[type="radio"]::before,
.bizizmir-checkbox-ui input[type="checkbox"]::before {
    content: "";
    position: absolute;
    margin: auto;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    top: 0;
}

input[type="checkbox"]:checked {
    border: 1px solid var(--color-primary);
}

.bizizmir-checkbox-ui input[type="radio"]:checked {
    border: 1px solid var(--color-primary);
}

    /* Center of the checked radio button */
    .bizizmir-checkbox-ui input[type="radio"]:checked::before {
        border: 5px solid transparent;
        border-radius: 100%;
        background: var(--color-primary);
        margin: 3px;
    }

/* The checkmark shape */
input[type="checkbox"]:checked::before {
    border-right: 4px solid var(--color-primary);
    border-bottom: 5px solid var(--color-primary);
    height: 104%;
    width: 45%;
    transform: rotate(47deg) translateY(-23%) translateX(2%);
}

.izbb-radio-box label {
    font-weight: 400;
    font-size: 14px;
    color: rgba(138, 138, 138, 1);
}

    .izbb-radio-box label a {
        font-weight: 500;
        font-size: 14px;
        color: rgba(138, 138, 138, 1);
    }

.izbb-check-box label a {
    font-weight: 500;
    font-size: 14px;
    position: relative;
    margin: 5px;
    top: -2px;
    color: rgba(138, 138, 138, 1);
}

.bootstrap-select .dropdown-menu li:hover a {
    background-color: #007bff !important;
    color: #fff !important;
}


/********************************************/
/* Dinamik Form İçin Gerekli Stillendrmeler */
/********************************************/

/* Datepicker */
:root,
[data-color-theme=light] {
    --body-line-height-computed: calc(1375rem / 1000);
    --spacer-2: 0.625rem;
    --box-shadow-lg: 0 6px 12px rgba(0, 0, 0, 0.15);
    --transition-base-timer: 0.15s;
    --gray-200: #F3F4F6;
    --gray-300: #E5E7EB;
    --gray-400: #D1D5DB;
    --gray-500: #9CA3AF;
    --gray-600: #6B7280;
    --primary: #1565C0;
    --white: #fff;
    --black-rgb: 0, 0, 0;
    --body-color: #1F2937;
    --border-width: 1px;
    --border-color: #D1D5DB;
    --border-color-translucent: rgba(0, 0, 0, 0.125);
    --border-radius: 0.375rem;
    --link-color: #1565C0;
    --link-hover-color: #0D47A1;
    --focus-ring-box-shadow: 0 0 0 0.125rem rgba(21, 101, 192, 0.25);
    --component-active-bg: #1565C0;
    --component-active-bg-rgb: 21, 101, 192;
}

*,
::after,
::before {
    box-sizing: border-box
}

@media (prefers-reduced-motion:no-preference) {
    :root {
        scroll-behavior: smooth
    }
}

input.is-invalid ~ .datepicker-clear-btn {
    display: none;
}

.datepicker-clear-btn:hover {
    color: #dc3545;
    transform: scale(1.2);
}

.datepicker-clear-btn:focus,
.datepicker-clear-btn:active {
    border: 0;
    outline: none;
    box-shadow: none;
}

.datepicker {
    --dp-bg: var(--white);
    --dp-border-width: var(--border-width);
    --dp-border-color: var(--border-color-translucent);
    --dp-box-shadow: var(--box-shadow-lg);
    --dp-border-radius: var(--border-radius);
    --dp-item-border-radius: var(--border-radius);
    --dp-item-hover-bg: var(--gray-300);
    --dp-item-hover-color: var(--body-color);
    --dp-item-active-bg: var(--primary);
    --dp-item-active-color: var(--white);
    --dp-item-weekday-color: var(--gray-600);
    --dp-item-focusout-color: var(--gray-500)
}

    .datepicker[data-color-theme=dark],
    [data-color-theme=dark] .datepicker:not([data-color-theme]),
    html[data-color-theme=dark] .datepicker {
        color-scheme: dark;
        --dp-bg: #32333a;
        --dp-border-color: rgba(var(--black-rgb), 0.25)
    }

.datepicker {
    display: none
}

    .datepicker.active {
        display: block
    }

.datepicker-dropdown {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1000
}

.datepicker-picker {
    display: inline-block;
    background-color: var(--dp-bg);
    background-clip: padding-box;
    border: var(--dp-border-width) solid var(--dp-border-color);
    border-radius: var(--dp-border-radius)
}

.datepicker-dropdown .datepicker-picker {
    box-shadow: var(--dp-box-shadow)
}

.datepicker-inline .datepicker-picker {
    border: 0
}

.datepicker-picker span {
    display: block;
    -ms-flex: 1;
    flex: 1;
    border: 0;
    cursor: default;
    text-align: center;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border-radius: var(--dp-item-border-radius)
}

.datepicker-controls,
.datepicker-grid,
.datepicker-view,
.datepicker-view .days-of-week {
    display: -ms-flexbox;
    display: flex
}

.datepicker-grid {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

.datepicker-inline .datepicker-grid {
    width: 100%
}

.datepicker-inline .datepicker-picker {
    display: block
}

.datepicker-main {
    padding: var(--spacer-2)
}

.datepicker-header {
    border-bottom: var(--border-width) solid var(--border-color)
}

.datepicker-footer {
    box-shadow: inset 0 var(--border-width) 0 var(--border-color)
}

.datepicker-controls .btn {
    --btn-color: var(--body-color);
    --btn-bg: var(--gray-200);
    --btn-border-color: var(--gray-400);
    --btn-hover-color: var(--body-color);
    --btn-hover-bg: var(--gray-300);
    --btn-hover-border-color: var(--gray-500);
    --btn-focus-shadow-rgb: 207, 207, 209;
    --btn-active-color: var(--body-color);
    --btn-active-bg: var(--gray-400);
    --btn-active-border-color: var(--gray-600);
    --btn-active-shadow: inset 0 0 0 0 transparent;
    --btn-disabled-color: var(--body-color);
    --btn-disabled-bg: var(--gray-200);
    --btn-disabled-border-color: var(--gray-400);
    background-color: transparent;
    border-width: 0;
    border-radius: 0
}

    .datepicker-controls .btn,
    .datepicker-controls .btn:active,
    .datepicker-controls .btn:focus,
    .datepicker-controls .btn:hover {
        border-color: var(--border-color)
    }

        .datepicker-controls .btn:focus,
        .datepicker-controls .btn:hover {
            --btn-hover-color: var(--link-color)
        }

        .datepicker-controls .btn:active {
            --btn-active-color: var(--link-hover-color)
        }

            .datepicker-controls .btn:active:focus,
            .datepicker-controls .btn:focus {
                box-shadow: none
            }

.datepicker-footer .datepicker-controls .btn {
    margin-top: var(--border-width);
    width: 100%
}

.datepicker-controls .view-switch {
    -ms-flex: auto;
    flex: auto;
    font-weight: 600
}

/* Kütüphane düğmeyi disabled niteliğiyle kapatır (28.10.2026'ya kadar yalnız .disabled sınıfı yazılıydı, kapalı ok görünüyordu). */
.datepicker-controls .next-btn.disabled,
.datepicker-controls .prev-btn.disabled,
.datepicker-controls .next-btn:disabled,
.datepicker-controls .prev-btn:disabled {
    opacity: 0;
    pointer-events: none
}

.datepicker-controls .prev-btn {
    border-right-width: var(--border-width);
    border-top-left-radius: calc(var(--dp-border-radius) - var(--dp-border-width))
}

.datepicker-controls .next-btn {
    border-left-width: var(--border-width);
    border-top-right-radius: calc(var(--dp-border-radius) - var(--dp-border-width))
}

.datepicker-controls .today-btn {
    border-bottom-left-radius: calc(var(--dp-border-radius) - var(--dp-border-width))
}

.datepicker-controls.clear-btn-hidden .today-btn {
    border-bottom-right-radius: calc(var(--dp-border-radius) - var(--dp-border-width))
}

.datepicker-controls .clear-btn {
    border-left-width: var(--border-width);
    border-bottom-right-radius: calc(var(--dp-border-radius) - var(--dp-border-width))
}

.datepicker-controls.today-btn-hidden .clear-btn {
    border-left: 0;
    border-bottom-left-radius: calc(var(--dp-border-radius) - var(--dp-border-width))
}

.datepicker-title {
    box-shadow: inset 0 calc(var(--border-width) * -1) 0 var(--border-color);
    padding: var(--spacer-2);
    text-align: center;
    font-weight: 600
}

.datepicker-view .days .datepicker-cell,
.datepicker-view .dow {
    -ms-flex-preferred-size: 14.28571%;
    flex-basis: 14.28571%
}

.datepicker-view.datepicker-grid .datepicker-cell {
    -ms-flex-preferred-size: 25%;
    flex-basis: 25%
}

.datepicker-view .days-of-week {
    margin-bottom: var(--spacer-2)
}

.datepicker-view .dow {
    color: var(--dp-item-weekday-color);
    min-height: var(--body-line-height-computed)
}

.datepicker-view .week {
    margin-right: var(--spacer-2);
    width: 2.25rem;
    color: var(--dp-item-weekday-color)
}

.datepicker-cell,
.datepicker-view .week {
    height: calc((.5rem * 2) + var(--body-line-height-computed));
    line-height: calc((.5rem * 2) + var(--body-line-height-computed))
}

.datepicker-grid {
    width: calc(((.5rem * 2) + var(--body-line-height-computed)) * 7)
}

.datepicker-cell {
    transition: background-color ease-in-out var(--transition-base-timer), color ease-in-out var(--transition-base-timer), border-radius ease-in-out var(--transition-base-timer)
}

@media (prefers-reduced-motion:reduce) {
    .datepicker-cell {
        transition: none
    }
}

.datepicker-cell:not(.disabled):hover {
    background-color: var(--dp-item-hover-bg);
    color: var(--dp-item-hover-color);
    cursor: pointer
}

.datepicker-cell.focused:not(.selected) {
    background-color: var(--dp-item-hover-bg);
    color: var(--dp-item-hover-color)
}

.datepicker-cell.selected,
.datepicker-cell.selected:hover {
    background-color: var(--dp-item-active-bg);
    color: var(--dp-item-active-color)
}

.datepicker-cell.disabled {
    opacity: .25
}

.datepicker-cell.next:not(.disabled),
.datepicker-cell.prev:not(.disabled) {
    color: var(--dp-item-focusout-color)
}

.datepicker-cell.highlighted:not(.selected):not(.range):not(.today) {
    color: var(--dp-item-active-bg)
}

    .datepicker-cell.highlighted:not(.selected):not(.range):not(.today):not(.disabled):hover {
        color: var(--dp-item-hover-color)
    }

.datepicker-cell.today:not(.selected):not(.disabled) {
    background-color: var(--dp-item-hover-bg);
    color: var(--dp-item-hover-color)
}

.datepicker-cell.range-end:not(.selected),
.datepicker-cell.range-start:not(.selected) {
    background-color: var(--dp-item-active-bg);
    color: var(--dp-item-active-color)
}

.datepicker-cell.range-start:not(.range-end) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0
}

.datepicker-cell.range-end:not(.range-start) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0
}

.datepicker-cell.range {
    border-radius: 0;
    background-color: var(--dp-item-hover-bg);
    color: var(--dp-item-hover-color)
}

    .datepicker-cell.range.disabled {
        opacity: .65
    }

.datepicker-view.datepicker-grid .datepicker-cell {
    height: 4rem;
    line-height: 4rem
}


/* Checkbox ve Radio */
.form-check {
    --form-check-min-height: var(--body-line-height-computed);
    --form-check-padding-start: calc(1.25rem + var(--spacer-2));
    --form-check-margin-bottom: 0;
    display: block;
    min-height: var(--form-check-min-height);
    padding-left: var(--form-check-padding-start);
    margin-bottom: var(--form-check-margin-bottom);
}

    .form-check .form-check-input {
        float: left;
        margin-left: calc(var(--form-check-padding-start) * -1);
    }

.form-check-input {
    --form-check-input-width: 1.5rem;
    --form-check-input-height: 1.5rem;
    --form-check-input-bg: var(--white);
    --form-check-input-border: calc(var(--border-width) * 2) solid var(--gray-400);
    --form-check-input-border-radius: 0.1875em;
    --form-check-input-focus-border: var(--component-active-bg);
    --form-check-input-focus-box-shadow: var(--focus-ring-box-shadow);
    --form-check-input-checked-bg-color: var(--component-active-bg);
    --form-check-input-checked-border-color: transparent;
    --form-check-input-disabled-opacity: 0.5;
    --form-check-input-indeterminate-bg-color: var(--component-active-bg);
    --form-check-input-indeterminate-border-color: transparent;
    --form-check-checked-bg-color-rgb: var(--component-active-bg-rgb);
    --form-check-checked-border-color: transparent;
    --form-check-radio-border-radius: 100rem;
    width: var(--form-check-input-width);
    height: var(--form-check-input-height);
    margin-top: calc(calc(var(--body-line-height) - var(--form-check-input-height)) * 0.5);
    vertical-align: top;
    background-color: var(--form-check-input-bg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    border: var(--form-check-input-border);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    -webkit-print-color-adjust: exact;
    color-adjust: exact;
    print-color-adjust: exact;
    transition: box-shadow var(--transition-base-timer) ease-in-out, border-color var(--transition-base-timer) ease-in-out, background-color var(--transition-base-timer) ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
    .form-check-input {
        transition: none;
    }
}

.form-check-input[type="checkbox"] {
    border-radius: var(--form-check-input-border-radius);
    appearance: none;
    border: 2px solid var(--color-primary);
    min-height: 23px;
    min-width: 23px;
    margin-right: 4px;
    top: 0px;
    outline: none;
    vertical-align: text-bottom;
    position: relative;
    cursor: pointer;
}

.form-check-input[type="radio"] {
    border-radius: var(--form-check-radio-border-radius);
}

.form-check-input:focus {
    border-color: var(--form-check-input-focus-border);
    outline: 0;
    box-shadow: var(--form-check-input-focus-box-shadow);
}

.form-check-input:checked {
    background-color: var(--form-check-input-checked-bg-color);
    border-color: var(--form-check-input-checked-border-color);
}

    .form-check-input:checked[type="checkbox"] {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='M5 10l4 4l6-8'/%3e%3c/svg%3e");
    }

.form-check-input[type="checkbox"]:indeterminate {
    background-color: var(--form-check-input-indeterminate-bg-color);
    border-color: var(--form-check-input-indeterminate-border-color);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='M5 10h10'/%3e%3c/svg%3e");
}

.form-check-input:disabled {
    pointer-events: none;
    -webkit-filter: none;
    filter: none;
    opacity: var(--form-check-input-disabled-opacity);
}

    .form-check-input:disabled ~ .form-check-label,
    .form-check-input[disabled] ~ .form-check-label {
        cursor: default;
        opacity: var(--form-check-label-disabled-opacity);
    }

.form-check-label {
    --form-check-label-disabled-opacity: 0.5;
    cursor: pointer;
}

    .form-check-label u {
        color: var(--color-primary);
        cursor: pointer;
        font-family: 'Izmir-SemiBold';
    }

.form-check-input.is-invalid ~ .form-check-label u {
    color: var(--bs-form-invalid-color);
}

.form-switch {
    display: flex;
    align-items: center;
}

    .form-switch.switch-left {
        justify-content: center;
        padding: 0;
        --form-check-padding-start: 0;
    }

        .form-switch.switch-left .form-check-label {
            margin-right: 10px;
        }

    .form-switch .form-check-label {
        margin-left: 10px;
    }

    .form-switch .form-check-label {
        color: var(--color-primary);
        font-weight: 700;
        font-size: 16px;
        margin-bottom: 0;
    }

    .form-switch .form-check-input {
        border-radius: calc(1.25rem * 1.75);
        height: 20px;
        width: 40px;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280, 0, 0, 0.5%29'/%3e%3c/svg%3e");
        background-position: left center;
        transition: box-shadow var(--transition-base-timer) ease-in-out, background-position var(--transition-base-timer) ease-in-out, background-color var(--transition-base-timer) ease-in-out, border-color var(--transition-base-timer) ease-in-out, background-image var(--transition-base-timer) ease-in-out;
    }

@media (prefers-reduced-motion: reduce) {
    .form-switch .form-check-input {
        transition: none;
    }
}

.form-switch .form-check-input:focus {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280, 0, 0, 0.5%29'/%3e%3c/svg%3e");
}

.form-switch .form-check-input:checked {
    background-position: right center;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}

.form-check-vertical {
    margin-bottom: 0.5rem;
}

.form-check-inline {
    --form-check-inline-margin-end: 1rem;
    display: inline-block;
    margin-right: var(--form-check-inline-margin-end);
    margin-bottom: 0.5rem;
}

    .form-check-inline .form-check-input ~ .valid-feedback {
        margin-left: 0.5em;
    }

    .form-check-inline .form-check-input ~ .invalid-feedback {
        margin-left: 0.5em;
    }

.form-check-input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    width: 24px;
    height: 24px;
    border: 2px solid var(--color-primary);
    border-radius: 50%;
    background-color: #ffffff;
    position: relative;
    cursor: pointer;
    outline: none;
    transition: all 0.2s ease;
}

    .form-check-input[type="radio"]:checked::before {
        content: "";
        position: absolute;
        top: 4px;
        left: 4px;
        width: 12px;
        height: 12px;
        background-color: var(--color-primary);
        border-radius: 50%;
    }


.form-label .question-no {
    color: var(--color-primary);
    margin-right: 2px;
}

.accordion-item {
    border: 1px solid #7a84a0 !important;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 15px;
}

.accordion-button.collapsed {
    border: none !important;
    border-radius: 0 !important;
}

.accordion-button {
    padding: 12px 24px;
    border: none !important;
    border-radius: 0 !important;
}

.accordion-body {
    padding-left: 24px;
    padding-right: 24px;
}

.accordion-button:focus {
    box-shadow: none;
    outline: none;
}

.accordion-button:focus-visible {
    box-shadow: 0 0 0 0.2rem rgba(21, 101, 192, 0.25);
}

.accordion-collapse {
    border: none !important;
}

.accordion-button:not(.collapsed) {
    background-color: #fff;
    color: #4f4f4f;
    box-shadow: none;
}

/* ── Scroll to Top ── */
.scroll-to-top-btn {
    position: fixed;
    bottom: 32px;
    right: 24px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: var(--color-primary);
    color: #fff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(19, 29, 43, 0.18);
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
    z-index: 999;
}

    .scroll-to-top-btn.visible {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    .scroll-to-top-btn:hover {
        background-color: #1a6ab8;
    }

    .scroll-to-top-btn svg {
        width: 20px;
        height: 20px;
        display: block;
    }

.select2 {
    margin-bottom: 0;
}

input::-webkit-inner-spin-button,
input::-webkit-outer-spin-button {
    -webkit-appearance: none;
}

input[type=number] {
    -moz-appearance: textfield;
}

.select2-container--default .select2-selection--single, .select2-container--default.select2-container--focus .select2-selection--multiple {
    border: 1px solid #dee2e6;
    border-radius: 10px;
    padding-bottom: 0;
}

.icerik-yonetimi .select2-container--default .select2-selection--single, .icerik-yonetimi .select2-container--default .select2-selection--multiple {
    border-color: rgba(21, 101, 192, 0.75);
}

.icerik-yonetimi .select2-container--default.is-invalid .select2-selection--single, .icerik-yonetimi .select2-container--default.is-invalid .select2-selection--multiple, .icerik-yonetimi .select2-container--default.select2-container--focus.is-invalid .select2-selection--multiple {
    border-color: #dc3545;
}

    .icerik-yonetimi .select2-container--default.is-invalid .select2-selection--single:focus, .icerik-yonetimi .select2-container--default.is-invalid .select2-selection--multiple:focus {
        box-shadow: 0px 0px 5px 0px #dc3545;
    }

.select2-container--default .select2-selection--multiple {
    display: flex;
    align-items: center;
}

.select2-container--default .select2-selection--single:focus, .select2-container--default.select2-container--focus .select2-selection--multiple:focus {
    border-color: #86b7fe;
    outline: 0;
}


.form-group {
    margin-bottom: 1rem;
}

    .form-group .form-control {
        height: 40px;
        background-color: rgba(255, 255, 255, 1);
        border-radius: 10px;
        color: rgba(143, 142, 142, 1) !important;
        font-size: 14px;
        font-weight: 400;
    }

.icerik-yonetimi .form-check-horizontal .form-check.d-flex .form-check-label {
    padding-left: 6px;
}

.icerik-yonetimi .form-group .form-control {
    border-color: rgba(21, 101, 192, 0.75);
}

.was-validated .icerik-yonetimi .form-group .form-control:invalid {
    border-color: #dc3545;
}

.was-validated .icerik-yonetimi .form-group .form-control:valid {
    border-color: rgba(21, 101, 192, 0.75);
    background-image: none;
}

    .was-validated .icerik-yonetimi .form-group .form-control:valid:focus {
        box-shadow: 0 0 0 0.25rem rgba(21, 101, 192, 0.25);
        border-color: rgba(21, 101, 192, 0.75);
    }

.form-group .form-control.textarea {
    height: auto;
    min-height: 60px;
}

.form-group .form-control:focus {
    box-shadow: 0px 0px 5px 0px var(--color-primary);
}

.form-group .form-control::placeholder {
    color: #999;
}

.form-group .form-control.is-invalid:focus, .was-validated .form-group .form-control:invalid:focus {
    border-color: var(--bs-form-invalid-border-color);
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-danger-rgb),.25);
}

.form-check-input.is-invalid, .was-validated .form-check-input:invalid {
    border-color: var(--bs-form-invalid-border-color);
}

.input-group > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback),
.input-group:not(.has-validation) > .dropdown-toggle:nth-last-child(n+3),
.input-group:not(.has-validation) > .form-floating:not(:last-child) > .form-control,
.input-group:not(.has-validation) > .form-floating:not(:last-child) > .form-select,
.input-group:not(.has-validation) > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating) {
    border-radius: 0.375rem;
}

.form-check .invalid-feedback {
    text-align: start;
}

.check-group .form-check .invalid-feedback {
    text-align: end;
}

.was-validated .form-control:valid {
    border: var(--bs-border-width) solid var(--bs-border-color);
    background-image: none;
}

    .was-validated .form-control:valid:focus {
        box-shadow: 0 0 0 0.25rem rgba(13,110,253,.25);
    }

.was-validated .no-auto-valid.is-invalid:valid {
    border-color: var(--bs-form-invalid-border-color);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
}

    .was-validated .no-auto-valid.is-invalid:valid:focus {
        border-color: #dee2e6;
        box-shadow: 0 0 0 .25rem rgba(var(--bs-danger-rgb), .25);
    }

.was-validated .form-check-input:valid {
    border-color: var(--form-check-input-checked-bg-color);
}

    .was-validated .form-check-input:valid:checked {
        background-color: var(--form-check-input-checked-bg-color);
    }

.was-validated .form-check-input[type="radio"]:valid:checked {
    background-color: #ffffff;
}

.was-validated .form-check-input:valid:focus {
    box-shadow: 0 0 0 0.25rem rgba(13,110,253,.25);
}

.was-validated .form-check .form-check-input:valid ~ .form-check-label {
    color: #000000;
}

.was-validated .form-switch .form-check-input:valid ~ .form-check-label {
    color: var(--color-primary);
}

.radio-group {
    display: flex;
    align-items: center;
    justify-content: center;
}

    /* BIZYEN-611: radyo tıklama alanı genişletildi (etiketin tamamı tıklanabilir). */
    .radio-group .form-check-inline {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        min-height: 40px;
        margin: 0;
        padding: 6px 10px;
        border-radius: 8px;
        cursor: pointer;
    }

        .radio-group .form-check-inline .form-check-input,
        .radio-group .form-check-inline .form-check-label {
            cursor: pointer;
        }


/*********************************/
/*** Favorilerim Sayfası Sort ***/
/*********************************/
#sortableHizmetList {
    transition: height 0.3s ease;
}

.sortable-grid > .category-card {
    transform: scale(1);
}

#sortableHizmetList .category-card:hover {
    transform: scale(1.02);
}

.dragging,
.dragging * {
    opacity: 0.95 !important;
    visibility: visible !important;
}

.sortable-ghost {
    opacity: 0.4;
}

.sortable-chosen {
    cursor: grabbing;
}

/*************************/
/* Dinamik Form İçin Gerekli Stillendrmeler */
/************************/
.icerik-form-header h3 {
    font-family: 'Izmir-SemiBold';
}


/*************************/
/* Fablab */
/************************/
.question-section .question-section-question {
    font-family: 'Izmir-Bold';
    font-size: 18px;
}

.fablab-iletisim-box {
    height: 160px;
    border-radius: 10px;
    margin-bottom: 15px;
    padding: 30px;
    background-color: #fff;
    box-shadow: 0px 4px 35px 0px rgba(0, 0, 0, 0.15);
}

    .fablab-iletisim-box > div:first-child {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 10px;
    }

    .fablab-iletisim-box h3 {
        font-size: 18px;
        font-weight: bold;
        color: var(--color-primary);
        margin-bottom: 0px;
    }

    .fablab-iletisim-box p {
        font-size: 16px;
        font-weight: normal;
    }

    .fablab-iletisim-box a {
        color: #000;
        text-decoration: none;
    }

#ekipmanCarousel .carousel-item img {
    max-width: 580px;
    height: 300px;
    object-fit: contain;
    margin-bottom: 1rem;
}

/************************/
/* SMS Doğrulama */
/************************/
.input-group .code-input-field::placeholder {
    color: rgba(21, 101, 192, 0.4);
    letter-spacing: 0.25rem;
    font-size: 1rem;
    vertical-align: middle;
}

.code-input-container {
    width: 360px;
    margin: auto;
}

    .code-input-container > h6 {
        font-family: "Izmir-Semibold";
        color: rgba(21, 101, 192, 0.6);
    }

    .code-input-container .code-input {
        width: 46px;
        height: 46px;
        margin: 0 8px;
        text-align: center;
        border-radius: 10px;
        box-shadow: 0px 0px 5px 0px var(--color-primary);
        padding: 0;
        border: none;
        font-size: 1rem;
    }

        .code-input-container .code-input::placeholder {
            width: 14px;
            height: 14px;
            background-color: rgba(21, 101, 192, 0.4);
            border-radius: 50%;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        .code-input-container .code-input:focus {
            box-shadow: 0px 0px 5px 1px var(--color-primary);
        }

    .code-input-container .timer {
        color: rgba(21, 101, 192, 0.6);
        font-family: "Izmir-Semibold";
        font-size: 0.9rem;
    }

        .code-input-container .timer > span {
            color: rgba(21, 101, 192, 0.8);
            font-family: "Izmir-Semibold";
        }

        .code-input-container .timer > a {
            color: rgba(21, 101, 192, 0.8);
            font-family: "Izmir-Semibold";
        }

            .code-input-container .timer > a.disabled {
                pointer-events: none;
                opacity: 0.5;
                text-decoration: none;
                color: #999;
            }

.form-check {
    position: relative;
}

.form-group .form-control.diger-hidden-text {
    display: none;
    width: 150px;
    margin-left: 10px;
    padding: 3px 10px;
    font-size: 14px;
    border-radius: 5px;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
}

/*.diger-hidden-text:focus {
    border-color: #2E82D0 !important;
    box-shadow: 0 0 0 1px rgba(46,130,208,0.15) !important;
    outline: none !important;
}*/
/*.diger-dropdown-text {
    display: none;
    width: 150px;
    margin-top: 12px;
    padding: 2px 10px;
    font-size: 14px;
    border: 2px solid #2E82D0;
    border-radius: 4px;
    box-sizing: border-box;
    background: #fff;
}*/

/*.checkbox-container:has(.diger-hidden-text.show) {
    display: flex;
    flex-wrap: wrap;
    gap: 17px;
}*/
.diger-dropdown-text:focus {
    /*    border-color: #2E82D0;
    box-shadow: 0 0 0 1px rgba(46,130,208,0.15);
    outline: none;
    background: #fff;*/
}

#chatButton {
    position: fixed;
    bottom: 10px;
    right: 0px;
    border: none;
    cursor: pointer;
    z-index: 101;
    display: none;
}

@media screen and (max-width: 768px) {
    #chatButton {
        width: 140px;
        height: auto;
    }
}

#chatBox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    background: #fff;
    z-index: 100;
    transform: scale(0);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

    #chatBox.active {
        transform: scale(1);
        opacity: 1;
        pointer-events: auto;
    }

#chatHeader {
    background: #fff;
    color: #333;
    padding: 10px 16px;
    font-weight: 600;
    font-size: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}

    #chatHeader img {
        height: 90px;
        width: 160px;
    }

#closeBtn {
    cursor: pointer;
    font-size: 22px;
    font-weight: bold;
    transition: color 0.2s ease;
    align-self: start;
}

#chatMessages {
    flex: 0;
    padding: 20px;
    font-size: 14px;
    background: #fff;
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative;
    transition: flex 0.3s ease;
}

    #chatMessages.scrollable {
        overflow-y: auto;
    }

    #chatMessages.active {
        flex: 1;
    }

#chatWelcome {
    margin-top: 2rem;
    text-align: center;
    color: #333;
    opacity: 0.8;
}

    #chatWelcome .chat-icon {
        font-size: 32px;
        margin-bottom: 10px;
        color: #0070ba;
    }

    #chatWelcome p {
        font-size: 16px;
        font-weight: bold;
    }

/* Mesajlar */
.message {
    max-width: 70%;
    padding: 10px 14px;
    border-radius: 12px;
    line-height: 1.4;
    word-wrap: break-word;
    animation: fadeIn 0.3s ease;
    display: flex;
    flex-direction: column;
    gap: 10px;
}


    .message p {
        margin: 0;
    }

    .message.user {
        align-self: flex-end;
        background: white;
        color: black;
        box-shadow: 0 3px 8px rgba(0, 0, 0, 0.10);
    }

    .message.bot {
        align-self: flex-start;
        background: #f1f2f5;
        color: #333;
        box-shadow: 0 3px 8px rgba(0, 0, 0, 0.10);
    }


.message-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 1rem;
}


.message-button {
    background-color: var(--color-primary-surface);
    color: var(--color-primary);
    padding: 8px 12px;
    border-radius: 20px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    border: 1px solid #d1e3f8;
    transition: background-color 0.2s ease, color 0.2s ease;
}


    .message-button:hover {
        background-color: #d1e3f8;
        color: #1c6db8;
    }

#chatInputArea {
    display: flex;
    padding: 10px 16px;
    background: #fff;
    flex-shrink: 0;
    align-items: center;
    width: 50%;
    margin: 0 auto;
    position: relative;
}


@media (min-width: 769px) and (max-width: 1024px) {
    #chatInputArea {
        width: 70%;
    }
}


@media (max-width: 768px) {
    #chatInputArea {
        width: 100%;
        padding: 10px;
    }
}

#chatInputArea.active {
    width: 100%;
    margin: 0;
}

#chatInput {
    flex: 1;
    border: 1px solid var(--color-primary);
    padding: 18px 16px;
    font-size: 14px;
    outline: none;
    border-radius: 25px;
    transition: border-color 0.2s ease;
    background: #fafafa;
}


#sendBtn {
    background: #0070ba;
    color: white;
    border: none;
    padding: 6px 18px;
    margin-left: 8px;
    cursor: pointer;
    border-radius: 20px;
    font-size: 14px;
    transition: background 0.3s ease;
    position: absolute;
    right: 30px;
    height: 40px;
    width: 60px;
}

    #sendBtn:hover {
        background: #005b96;
    }


@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


.typing-indicator {
    align-self: flex-start;
    display: flex;
    align-items: center;
    background: #f1f2f5;
    color: #333;
    border-bottom-left-radius: 4px;
    max-width: 70%;
    padding: 12px 14px;
    border-radius: 12px;
    margin-top: 10px;
}

    .typing-indicator span {
        height: 8px;
        width: 8px;
        background-color: #90949c;
        border-radius: 50%;
        display: inline-block;
        margin: 0 2px;
        animation: bounce 1.4s infinite ease-in-out both;
    }

        .typing-indicator span:nth-of-type(1) {
            animation-delay: -0.32s;
        }

        .typing-indicator span:nth-of-type(2) {
            animation-delay: -0.16s;
        }

@keyframes bounce {
    0%, 80%, 100% {
        transform: scale(0);
    }

    40% {
        transform: scale(1.0);
    }
}

#loaderContainer {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s, visibility 0.3s;
    pointer-events: none;
}

    #loaderContainer.show {
        visibility: visible;
        opacity: 1;
        pointer-events: auto;
    }

    #loaderContainer .loader {
        border: 10px solid white;
        border-radius: 50%;
        border-top: 10px solid #283d5c;
        width: 135px;
        height: 135px;
        animation: loaderspin 2s linear infinite;
        background-color: lightgrey;
    }

    #loaderContainer .logoLoader {
        position: absolute;
        width: 85px;
        height: 85px;
        z-index: 2;
    }

@keyframes loaderspin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.icerik-yonetimi {
    column-count: 2;
    column-gap: 20px;
}

.icerik-yonetimi-soru {
    break-inside: avoid;
    margin-bottom: 20px;
}

    .icerik-yonetimi-soru.full-width {
        column-span: all;
        margin-top: 20px;
    }

@media (max-width: 992px) {
    .icerik-yonetimi {
        column-count: 1;
    }

    .icerik-yonetimi-soru.full-width {
        margin-top: 0;
    }
}
/* ═══════════════════════════════════════════════════════════════
   İç Sayfa Breadcrumb — Ana Sayfaya dönüş + konum
   ═══════════════════════════════════════════════════════════════ */
.ic-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 14px;
    margin: 2px 0 16px;
    line-height: 1.2;
}

.ic-breadcrumb-home {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #1565C0;
    font-weight: 600;
    text-decoration: none;
    padding: 4px 6px;
    margin: -4px -6px;
    border-radius: 8px;
    transition: color 0.18s ease, background-color 0.18s ease;
}

    .ic-breadcrumb-home svg {
        width: 17px;
        height: 17px;
        flex-shrink: 0;
    }

    .ic-breadcrumb-home:hover {
        color: #0D47A1;
        background-color: rgba(21, 101, 192, 0.08);
    }

.ic-breadcrumb-sep {
    color: #aab4c0;
    font-size: 17px;
    line-height: 1;
}

.ic-breadcrumb-current {
    color: #5b6b7a;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 60vw;
}

@media (max-width: 576px) {
    .ic-breadcrumb {
        font-size: 13px;
        margin-bottom: 12px;
    }
}

/* Koyu/mavi başlık üzerinde breadcrumb (favorilerim vb.) */
.ic-breadcrumb--on-dark .ic-breadcrumb-home {
    color: #fff;
}

    .ic-breadcrumb--on-dark .ic-breadcrumb-home:hover {
        color: #fff;
        background-color: rgba(255, 255, 255, 0.16);
    }

.ic-breadcrumb--on-dark .ic-breadcrumb-sep {
    color: rgba(255, 255, 255, 0.6);
}

.ic-breadcrumb--on-dark .ic-breadcrumb-current {
    color: rgba(255, 255, 255, 0.85);
}

/* Favorilerim/login mavi başlık bölümünde h1 beyaz (kontrast düzeltme) */
.bizizmir-search .login-description h1 {
    color: #fff;
}

/* Breadcrumb ara seviye (üst sayfa) bağlantısı */
.ic-breadcrumb-parent {
    color: #1565C0;
    font-weight: 600;
    text-decoration: none;
    padding: 4px 6px;
    margin: -4px 0;
    border-radius: 8px;
    white-space: nowrap;
    transition: color 0.18s ease, background-color 0.18s ease;
}

    .ic-breadcrumb-parent:hover {
        color: #0D47A1;
        background-color: rgba(21, 101, 192, 0.08);
    }

/* ═══════════════════════════════════════════════════════════════
   İÇ SAYFA BİLEŞEN KÜTÜPHANESİ
   Tüm iç sayfaların paylaştığı ortak şablon bileşenleri.
   Aileler: ic-page-head, ic-form, ic-liste, ic-durum, ic-bos-durum,
            ic-tabs, ic-modal, auth, ic-duyuru
   ═══════════════════════════════════════════════════════════════ */

/* ── ic-page-head — standart sayfa başlığı + aksiyon satırı ───── */
.ic-page-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
    margin: 4px 0 22px;
}

    .ic-page-head h2 {
        font-family: "Izmir-Bold", sans-serif;
        font-size: 28px;
        color: var(--color-text);
        margin: 0;
        line-height: 1.2;
    }

.ic-page-head-sub {
    font-size: 15px;
    color: var(--color-text-secondary);
    margin: 6px 0 0;
    max-width: 640px;
}

.ic-page-head-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

@media (max-width: 576px) {
    .ic-page-head h2 {
        font-size: 23px;
    }
}

/* ── ic-form — form sayfası şablonu ───────────────────────────── */
.ic-form-card {
    background: var(--color-bg-card);
    border-radius: 18px;
    box-shadow: var(--shadow-card);
    border: 1px solid var(--color-border-subtle);
    padding: 28px;
    margin-bottom: 24px;
}

.ic-form-section {
    padding: 22px 0;
    border-bottom: 1px solid var(--color-border-subtle);
}

    .ic-form-section:first-child {
        padding-top: 0;
    }

    .ic-form-section:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }

.ic-form-section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: "Izmir-Semibold", sans-serif;
    font-size: 17px;
    color: var(--color-text);
    margin: 0 0 16px;
}

    .ic-form-section-title::before {
        content: "";
        width: 4px;
        height: 18px;
        border-radius: 2px;
        background: var(--color-primary);
        flex-shrink: 0;
    }

.ic-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 18px;
}

    .ic-form-grid .ic-form-full {
        grid-column: 1 / -1;
    }

.ic-form-label {
    display: block;
    font-family: "Izmir-Semibold", sans-serif;
    font-size: 13.5px;
    color: var(--color-text-secondary);
    margin-bottom: 6px;
}

    .ic-form-label .zorunlu {
        color: var(--color-error);
    }

.ic-form-help {
    font-size: 12.5px;
    color: var(--color-text-muted);
    margin-top: 5px;
    line-height: 1.45;
}

/* BIZYEN-689: Form üstü bilgilendirme kutusu — otomatik doldurulan üyelik bilgilerinin
   nereden geldiğini ve hangilerinin düzenlenebilir olduğunu anlatır. */
.ic-form-notice {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: var(--color-primary-surface);
    border: 1px solid var(--color-border-active);
    border-left-width: 4px;
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 18px;
}

/* Kutu formun ilk elemanı olduğunda kendi alt boşluğunu bırakmaz: bu durumda ".ic-form-section
   :first-child { padding-top: 0 }" artık eşleşmediği için boşluğu bölümün kendi padding'i verir;
   ikisi üst üste binerse arada gereksiz büyük bir aralık oluşurdu. */
.ic-form-card > .ic-form-notice:first-child {
    margin-bottom: 0;
}

.ic-form-notice-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    color: var(--color-primary);
}

.ic-form-notice-text {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--color-text);
}

/* Bilgilendirmenin işaret ettiği "Üyelik Ayarları" yolunu tıklanabilir bırakır. Altı çizili
   kalır: renk tek başına ayırt edici olmamalı (WCAG 1.4.1 — renge bağımlı bilgi). */
.ic-form-notice-link {
    color: var(--color-primary);
    font-family: "Izmir-Semibold", sans-serif;
    text-decoration: underline;
    white-space: nowrap;
}

    .ic-form-notice-link:hover,
    .ic-form-notice-link:focus-visible {
        color: var(--color-primary-hover);
    }

/* Sunucu yetkili (üyelikten yazılan) alanlar. "disabled" BİLEREK kullanılmaz: disabled alan
   POST edilmez ve sunucu doğrulaması boş değer görürdü. Metin rengi düşürülmez — kullanıcı
   kendi bilgisini net okuyabilmelidir; kilit, zemin + yardım metni ile anlatılır.

   ÖZGÜLLÜK NOTU: tek sınıflı ".ic-input-kilitli" (0,1,0), ".form-control.him-tel-input" (0,2,0)
   ve ".bizizmir-input-ui" gibi rakiplere karşı zayıf kalıyordu — cep telefonu alanı kilitliyken
   bile düzenlenebilir görünüyordu. Seçici ikili sınıfa çıkarıldı; ayrıca [readonly] varyantı
   görseli GERÇEK duruma bağlar, sınıf ile öznitelik ayrışırsa görsel yine doğru kalır. */
.form-control.ic-input-kilitli,
.bizizmir-input-ui.ic-input-kilitli,
.form-control[readonly],
.bizizmir-input-ui[readonly] {
    background-color: var(--color-bg-section-alt);
    cursor: not-allowed;
}

    /* Odakta da kilitli görünüm korunur: odak halkası (erişilebilirlik için) kalır ama zemin
   beyaza dönmez — aksi hâlde alan tıklanınca düzenlenebilirmiş gibi görünüyordu. */
    .form-control.ic-input-kilitli:focus,
    .bizizmir-input-ui.ic-input-kilitli:focus,
    .form-control[readonly]:focus,
    .bizizmir-input-ui[readonly]:focus {
        background-color: var(--color-bg-section-alt);
    }

.ic-form-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 22px;
    flex-wrap: wrap;
}

/* Demo CAPTCHA — backend gelene kadar görsel temsil */
.ic-form-captcha-demo {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: #FAFBFC;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 14px 18px;
    user-select: none;
}

    .ic-form-captcha-demo .captcha-check {
        width: 24px;
        height: 24px;
        border: 2px solid var(--color-border);
        border-radius: 5px;
        background: #fff;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        transition: border-color 0.2s ease, background-color 0.2s ease;
        flex-shrink: 0;
    }

    .ic-form-captcha-demo.checked .captcha-check {
        border-color: var(--color-success);
        background: var(--color-success);
    }

        .ic-form-captcha-demo.checked .captcha-check::after {
            content: "";
            width: 7px;
            height: 12px;
            border: solid #fff;
            border-width: 0 2.5px 2.5px 0;
            transform: rotate(45deg) translateY(-1px);
        }

    .ic-form-captcha-demo .captcha-text {
        font-size: 14px;
        color: var(--color-text);
    }

    .ic-form-captcha-demo .captcha-marka {
        margin-left: 8px;
        font-size: 10px;
        color: var(--color-text-muted);
        text-align: center;
        line-height: 1.3;
    }

@media (max-width: 768px) {
    .ic-form-card {
        padding: 20px 16px;
        border-radius: 14px;
    }

    .ic-form-grid {
        grid-template-columns: 1fr;
    }
}

/* ── ic-liste — liste/kart sayfası şablonu ────────────────────── */
.ic-liste-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 22px;
}

.ic-liste-chips {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.ic-liste-chip {
    appearance: none;
    border: 1.5px solid var(--color-border);
    background: var(--color-bg-card);
    color: var(--color-text-secondary);
    font-family: "Izmir-Semibold", sans-serif;
    font-size: 13.5px;
    padding: 7px 16px;
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.2s var(--ease-out, ease);
}

    .ic-liste-chip:hover {
        border-color: var(--color-primary);
        color: var(--color-primary);
        background: var(--color-primary-surface);
        transform: translateY(-1px);
    }

    .ic-liste-chip.active {
        background: var(--color-primary);
        border-color: var(--color-primary);
        color: #fff;
        box-shadow: 0 4px 12px rgba(21, 101, 192, 0.28);
    }

/* Çok düğmeli filtre (ör. nöbetçi eczaneler ilçeleri, 21.10.2026): her ekran boyutunda tek satırda yana kaydırılır;
   alt alta yığılmaz. İnce kaydırma çubuğu görünür; dokunmatikte parmakla, farede sürükleyerek ya da tekerlekle
   kaydırılır (betik sayfada). Satır araç çubuğunun tüm genişliğini alır; arama kutusu (.ic-liste-search) altına iner. */
.ic-liste-chips--kaydir {
    flex: 1 1 100%;
    min-width: 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    padding: 4px 2px 10px; /* aktif düğmenin gölgesi kesilmesin; çubuk düğmelerin altında */
    cursor: grab;
    scrollbar-width: thin;
    scrollbar-color: var(--color-primary) rgba(21, 101, 192, 0.12);
}

    .ic-liste-chips--kaydir::-webkit-scrollbar {
        height: 6px;
    }

    .ic-liste-chips--kaydir::-webkit-scrollbar-track {
        background: rgba(21, 101, 192, 0.12);
        border-radius: 999px;
    }

    .ic-liste-chips--kaydir::-webkit-scrollbar-thumb {
        background: var(--color-primary);
        border-radius: 999px;
    }

    .ic-liste-chips--kaydir.surukleniyor {
        cursor: grabbing;
        scroll-snap-type: none;
        user-select: none;
    }

    .ic-liste-chips--kaydir .ic-liste-chip {
        flex: 0 0 auto;
        white-space: nowrap;
        scroll-snap-align: start;
    }

.ic-liste-search {
    position: relative;
    min-width: 220px;
    flex: 0 1 300px;
}

    .ic-liste-search input {
        width: 100%;
        height: 42px;
        border: 1.5px solid var(--color-border);
        border-radius: 12px;
        padding: 0 14px 0 40px;
        font-size: 14px;
        color: var(--color-text);
        background: var(--color-bg-card);
        transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }

        .ic-liste-search input:focus {
            outline: none;
            border-color: var(--color-primary);
            box-shadow: 0 0 0 3px rgba(21, 101, 192, 0.12);
        }

    .ic-liste-search svg {
        position: absolute;
        left: 13px;
        top: 50%;
        transform: translateY(-50%);
        width: 17px;
        height: 17px;
        color: var(--color-text-muted);
        pointer-events: none;
    }

.ic-liste-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: 18px;
}

.ic-liste-count {
    font-size: 13.5px;
    color: var(--color-text-muted);
}

.ic-liste-daha-fazla {
    display: flex;
    justify-content: center;
    margin-top: 28px;
}

@media (max-width: 576px) {
    .ic-liste-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .ic-liste-search {
        flex: 1 1 100%;
    }
}

/* ── ic-durum — durum/sonuç şablonu ───────────────────────────── */
.ic-durum-hero {
    text-align: center;
    padding: 44px 24px;
    max-width: 520px;
    margin: 0 auto;
}

.ic-durum-hero-icon {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    animation: icDurumPop 0.6s var(--ease-bounce, cubic-bezier(0.34, 1.56, 0.64, 1)) both;
}

    .ic-durum-hero-icon svg {
        width: 40px;
        height: 40px;
    }

.ic-durum-hero--success .ic-durum-hero-icon {
    background: #E7F6EC;
    color: var(--color-success);
    box-shadow: 0 0 0 10px rgba(22, 163, 74, 0.08);
}

.ic-durum-hero--error .ic-durum-hero-icon {
    background: #FDECEC;
    color: var(--color-error);
    box-shadow: 0 0 0 10px rgba(220, 38, 38, 0.07);
}

.ic-durum-hero--info .ic-durum-hero-icon {
    background: var(--color-primary-surface);
    color: var(--color-primary);
    box-shadow: 0 0 0 10px rgba(21, 101, 192, 0.07);
}

.ic-durum-hero h3 {
    font-family: "Izmir-Bold", sans-serif;
    font-size: 23px;
    color: var(--color-text);
    margin-bottom: 10px;
}

.ic-durum-hero p {
    font-size: 15px;
    color: var(--color-text-secondary);
    line-height: 1.6;
    margin-bottom: 22px;
}

.ic-durum-hero-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

@keyframes icDurumPop {
    0% {
        transform: scale(0.4);
        opacity: 0;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ic-durum-hero-icon {
        animation: none;
    }
}

/* Durum rozeti */
.ic-durum-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: "Izmir-Semibold", sans-serif;
    font-size: 12.5px;
    padding: 4px 12px;
    border-radius: 999px;
    line-height: 1.4;
}

    .ic-durum-badge::before {
        content: "";
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: currentColor;
    }

.ic-durum-badge--success {
    background: #E7F6EC;
    color: #15803D;
}

.ic-durum-badge--warning {
    background: #FEF3DD;
    color: #B45309;
}

.ic-durum-badge--danger {
    background: #FDECEC;
    color: #B91C1C;
}

.ic-durum-badge--info {
    background: var(--color-primary-surface);
    color: var(--color-primary);
}

.ic-durum-badge--neutral {
    background: #EEF2F9;
    color: var(--color-text-secondary);
}

/* Başvuru zaman çizelgesi (stepper) */
.ic-durum-stepper {
    list-style: none;
    margin: 0;
    padding: 0;
}

    .ic-durum-stepper li {
        position: relative;
        padding: 0 0 26px 38px;
    }

        .ic-durum-stepper li::before {
            content: "";
            position: absolute;
            left: 11px;
            top: 26px;
            bottom: 0;
            width: 2px;
            background: var(--color-border-subtle);
        }

        .ic-durum-stepper li:last-child {
            padding-bottom: 0;
        }

            .ic-durum-stepper li:last-child::before {
                display: none;
            }

    .ic-durum-stepper .step-dot {
        position: absolute;
        left: 0;
        top: 0;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        border: 2px solid var(--color-border);
        background: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .ic-durum-stepper li.done .step-dot {
        border-color: var(--color-success);
        background: var(--color-success);
    }

        .ic-durum-stepper li.done .step-dot::after {
            content: "";
            width: 6px;
            height: 10px;
            border: solid #fff;
            border-width: 0 2px 2px 0;
            transform: rotate(45deg) translate(-0.5px, -1px);
        }

    .ic-durum-stepper li.active .step-dot {
        border-color: var(--color-primary);
        background: var(--color-primary-surface);
        animation: icStepPulse 2s var(--ease-smooth, ease) infinite;
    }

        .ic-durum-stepper li.active .step-dot::after {
            content: "";
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: var(--color-primary);
        }

@keyframes icStepPulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(21, 101, 192, 0.25);
    }

    50% {
        box-shadow: 0 0 0 7px rgba(21, 101, 192, 0);
    }
}

/* HİM başvuru durumu: ekli belgeler sayfa açıldıktan sonra yüklenirken (Views/Him/BasvuruDurum, 30.10.2026) */
.him-ek-durum {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.him-ek-yukleyici {
    flex: none;
    width: 16px;
    height: 16px;
    border: 2px solid var(--color-border);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: loaderspin .8s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
    .him-ek-yukleyici {
        animation-duration: 2.4s;
    }
}

.ic-durum-stepper .step-title {
    font-family: "Izmir-Semibold", sans-serif;
    font-size: 15px;
    color: var(--color-text);
    margin: 1px 0 3px;
}

.ic-durum-stepper li.active .step-title {
    color: var(--color-primary);
}

.ic-durum-stepper .step-desc {
    font-size: 13.5px;
    color: var(--color-text-secondary);
    line-height: 1.5;
    margin: 0;
}

.ic-durum-stepper .step-tarih {
    font-size: 12px;
    color: var(--color-text-muted);
    margin-top: 3px;
    display: block;
}

/* ── ic-bos-durum — boş durum bileşeni ────────────────────────── */
.ic-bos-durum {
    text-align: center;
    padding: 52px 24px;
    border: 1.5px dashed var(--color-border);
    border-radius: 18px;
    background: #FBFCFE;
}

.ic-bos-durum-icon {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: #EEF2F9;
    color: var(--color-text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}

    .ic-bos-durum-icon svg {
        width: 30px;
        height: 30px;
    }

.ic-bos-durum h4 {
    font-family: "Izmir-Semibold", sans-serif;
    font-size: 18px;
    color: var(--color-text);
    margin-bottom: 8px;
}

.ic-bos-durum p {
    font-size: 14px;
    color: var(--color-text-secondary);
    max-width: 380px;
    margin: 0 auto 18px;
    line-height: 1.55;
}

/* ── ic-tabs — Bootstrap nav-tabs üstüne segmented modern stil ── */
.ic-tabs .nav-tabs {
    border: none;
    background: #EEF2F9;
    border-radius: 13px;
    padding: 5px;
    gap: 4px;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
}

    .ic-tabs .nav-tabs::-webkit-scrollbar {
        display: none;
    }

    .ic-tabs .nav-tabs .nav-item {
        flex-shrink: 0;
    }

    .ic-tabs .nav-tabs .nav-link {
        border: none;
        border-radius: 9px;
        background: transparent;
        color: var(--color-text-secondary);
        font-family: "Izmir-Semibold", sans-serif;
        font-size: 14px;
        padding: 9px 20px;
        white-space: nowrap;
        transition: all 0.25s var(--ease-out, ease);
    }

        .ic-tabs .nav-tabs .nav-link:hover {
            color: var(--color-primary);
            background: rgba(255, 255, 255, 0.65);
        }

        .ic-tabs .nav-tabs .nav-link.active {
            background: #fff;
            color: var(--color-primary);
            box-shadow: 0 2px 8px rgba(21, 101, 192, 0.14);
        }

.ic-tabs .tab-content {
    padding-top: 22px;
}

/* Dikey varyant (uyelik-ayarlari desktop) */
@media (min-width: 992px) {
    .ic-tabs--dikey {
        display: flex;
        gap: 26px;
        align-items: flex-start;
    }

        .ic-tabs--dikey .nav-tabs {
            flex-direction: column;
            flex-wrap: nowrap;
            width: 230px;
            flex-shrink: 0;
            padding: 6px;
            position: sticky;
            top: 90px;
        }

            .ic-tabs--dikey .nav-tabs .nav-link {
                text-align: left;
                width: 100%;
                display: flex;
                align-items: center;
                gap: 10px;
            }

        .ic-tabs--dikey .tab-content {
            flex: 1;
            padding-top: 0;
            min-width: 0;
        }
}

/* ── ic-modal — standart modal stili ──────────────────────────── */
.ic-modal .modal-content {
    border: none;
    border-radius: 20px;
    box-shadow: 0 24px 64px rgba(11, 31, 58, 0.22);
    overflow: hidden;
}

.ic-modal .modal-header {
    border-bottom: 1px solid var(--color-border-subtle);
    padding: 18px 24px;
}

.ic-modal .modal-title {
    font-family: "Izmir-Bold", sans-serif;
    font-size: 18px;
    color: var(--color-text);
}

.ic-modal .modal-body {
    padding: 22px 24px;
    font-size: 14.5px;
    color: var(--color-text-secondary);
    line-height: 1.65;
}

    .ic-modal .modal-body.kvkk-scroll {
        max-height: 55vh;
        overflow-y: auto;
    }

.ic-modal .modal-footer {
    border-top: 1px solid var(--color-border-subtle);
    padding: 14px 24px;
    gap: 10px;
}

/* ── auth — login / üye ol / parola akışları ──────────────────── */
.auth-wrap {
    display: flex;
    justify-content: center;
    padding: 34px 16px 56px;
}

.auth-layout {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    width: 100%;
    max-width: 1060px;
    background: var(--color-bg-card);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: var(--shadow-card-hover);
}

.auth-layout--tek {
    grid-template-columns: 1fr;
    max-width: 520px;
}

.auth-panel {
    position: relative;
    background: linear-gradient(160deg, #0B1F3A 0%, #0D47A1 58%, #1565C0 100%);
    color: #fff;
    padding: 48px 44px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    isolation: isolate;
}

    .auth-panel::before,
    .auth-panel::after {
        content: "";
        position: absolute;
        border-radius: 50%;
        filter: blur(2px);
        z-index: -1;
    }

    .auth-panel::before {
        width: 340px;
        height: 340px;
        right: -120px;
        top: -120px;
        background: radial-gradient(circle, rgba(66, 165, 245, 0.35), transparent 70%);
    }

    .auth-panel::after {
        width: 260px;
        height: 260px;
        left: -100px;
        bottom: -80px;
        background: radial-gradient(circle, rgba(232, 118, 10, 0.22), transparent 70%);
    }

.auth-panel-logo {
    height: 40px;
    width: auto;
    align-self: flex-start;
    margin-bottom: 34px;
    filter: brightness(0) invert(1);
}

.auth-panel h2 {
    font-family: "Izmir-Bold", sans-serif;
    font-size: 30px;
    line-height: 1.25;
    margin-bottom: 14px;
}

.auth-panel-desc {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.78);
    line-height: 1.6;
    margin-bottom: 30px;
    max-width: 380px;
}

.auth-deger-listesi {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

    .auth-deger-listesi li {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        font-size: 14.5px;
        color: rgba(255, 255, 255, 0.92);
        line-height: 1.5;
    }

    .auth-deger-listesi .deger-icon {
        width: 30px;
        height: 30px;
        border-radius: 9px;
        background: rgba(255, 255, 255, 0.14);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

        .auth-deger-listesi .deger-icon svg {
            width: 16px;
            height: 16px;
        }

.auth-card {
    padding: 48px 44px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

    .auth-card h1 {
        font-family: "Izmir-Bold", sans-serif;
        font-size: 26px;
        color: var(--color-text);
        margin-bottom: 6px;
    }

.auth-card-sub {
    font-size: 14.5px;
    color: var(--color-text-secondary);
    margin-bottom: 28px;
}

.auth-input-group {
    margin-bottom: 18px;
    position: relative;
}

    .auth-input-group input {
        width: 100%;
        height: 48px;
        border: 1.5px solid var(--color-border);
        border-radius: 12px;
        padding: 0 46px 0 14px;
        font-size: 15px;
        color: var(--color-text);
        background: #FBFCFE;
        transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
    }

        .auth-input-group input:focus {
            outline: none;
            border-color: var(--color-primary);
            background: #fff;
            box-shadow: 0 0 0 3.5px rgba(21, 101, 192, 0.13);
        }

        .auth-input-group input.is-invalid {
            border-color: var(--color-error);
            box-shadow: 0 0 0 3.5px rgba(220, 38, 38, 0.1);
        }

.auth-gorunurluk {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    border-radius: 9px;
    color: var(--color-text-muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease, background-color 0.2s ease;
}

    .auth-gorunurluk:hover {
        color: var(--color-primary);
        background: var(--color-primary-surface);
    }

    .auth-gorunurluk svg {
        width: 19px;
        height: 19px;
    }

.auth-hata {
    font-size: 12.5px;
    color: var(--color-error);
    margin-top: 5px;
    display: none;
}

.auth-input-group.hatali .auth-hata {
    display: block;
}

.auth-meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 2px 0 22px;
    font-size: 13.5px;
    flex-wrap: wrap;
    gap: 8px;
}

.auth-link {
    color: var(--color-primary);
    font-family: "Izmir-Semibold", sans-serif;
    text-decoration: none;
    border-radius: 6px;
    transition: color 0.18s ease;
}

    .auth-link:hover {
        color: var(--color-primary-hover);
        text-decoration: underline;
    }

.auth-submit {
    width: 100%;
    height: 50px;
    border: none;
    border-radius: 12px;
    background: var(--color-cta);
    color: #fff;
    font-family: "Izmir-Bold", sans-serif;
    font-size: 15.5px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}

    .auth-submit:hover {
        background: var(--color-cta-hover);
        box-shadow: var(--shadow-cta);
        transform: translateY(-1px);
    }

    .auth-submit:active {
        transform: translateY(0);
    }

    .auth-submit:disabled {
        opacity: 0.55;
        cursor: not-allowed;
        transform: none;
        box-shadow: none;
    }

.auth-divider {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 24px 0;
    color: var(--color-text-muted);
    font-size: 13px;
}

    .auth-divider::before,
    .auth-divider::after {
        content: "";
        flex: 1;
        height: 1px;
        background: var(--color-border-subtle);
    }

.auth-alt-satir {
    text-align: center;
    font-size: 14px;
    color: var(--color-text-secondary);
}

/* Çok adımlı auth akışı (üye ol / parola) */
.auth-step {
    display: none;
    animation: authStepIn 0.45s var(--ease-out, ease) both;
}

    .auth-step.active {
        display: block;
    }

@keyframes authStepIn {
    from {
        opacity: 0;
        transform: translateY(14px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Parola güç göstergesi */
.parola-guc {
    display: flex;
    gap: 5px;
    margin-top: 8px;
}

    .parola-guc span {
        height: 4px;
        flex: 1;
        border-radius: 2px;
        background: var(--color-border-subtle);
        transition: background-color 0.3s ease;
    }

    .parola-guc[data-guc="1"] span:nth-child(-n+1) {
        background: var(--color-error);
    }

    .parola-guc[data-guc="2"] span:nth-child(-n+2) {
        background: var(--color-warning);
    }

    .parola-guc[data-guc="3"] span:nth-child(-n+3) {
        background: #84CC16;
    }

    .parola-guc[data-guc="4"] span:nth-child(-n+4) {
        background: var(--color-success);
    }

.parola-guc-metin {
    font-size: 12px;
    color: var(--color-text-muted);
    margin-top: 5px;
}

@media (max-width: 991px) {
    .auth-layout {
        grid-template-columns: 1fr;
        max-width: 520px;
    }

    .auth-panel {
        display: none;
    }

    .auth-card {
        padding: 34px 24px;
    }
}

/* ── ic-duyuru — iç sayfa duyuru kartları ─────────────────────── */
.ic-duyuru-card {
    display: flex;
    gap: 14px;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border-subtle);
    border-radius: 16px;
    padding: 18px;
    text-decoration: none;
    transition: transform 0.25s var(--ease-out, ease), box-shadow 0.25s var(--ease-out, ease), border-color 0.25s ease;
}

    .ic-duyuru-card:hover {
        transform: translateY(-3px);
        box-shadow: var(--shadow-card-hover);
        border-color: var(--color-border);
    }

    .ic-duyuru-card:focus-visible {
        outline: 3px solid rgba(21, 101, 192, 0.35);
        outline-offset: 2px;
    }

.ic-duyuru-ikon {
    width: 46px;
    height: 46px;
    border-radius: 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .ic-duyuru-ikon svg {
        width: 22px;
        height: 22px;
    }

.ic-duyuru-card .ic-duyuru-icerik {
    min-width: 0;
}

.ic-duyuru-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 7px;
    flex-wrap: wrap;
}

.ic-duyuru-kategori {
    font-family: "Izmir-Semibold", sans-serif;
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    padding: 3px 10px;
    border-radius: 999px;
}

.ic-duyuru-tarih {
    font-size: 12.5px;
    color: var(--color-text-muted);
}

.ic-duyuru-yeni {
    background: var(--color-new-badge, #0891B2);
    color: #fff;
    font-size: 9.5px;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 4px;
    letter-spacing: 0.5px;
}

.ic-duyuru-baslik {
    font-family: "Izmir-Semibold", sans-serif;
    font-size: 16.5px;
    color: var(--color-text);
    line-height: 1.35;
    margin: 0 0 6px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.2s ease;
}

.ic-duyuru-card:hover .ic-duyuru-baslik {
    color: var(--color-primary);
}

/* Tıklanamayan bilgi kartı (ör. ALO 153; telefonda ic-sayfa.js data-telefon-ara ile tel: bağlantısına çevirir, 30.10.2026).
   Hover efekti diğer kartlarla aynı kalır (görsel tutarlılık); yalnız imleç bağlantı imleci değildir. */
.ic-duyuru-card--metin {
    cursor: default;
}

.ic-duyuru-ozet {
    font-size: 13.5px;
    color: var(--color-text-secondary);
    line-height: 1.5;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* HİM kanal kartları (26.10.2026): metinler birimden geldi ve kısaltılmıyor; 1024 ve 1366 px'te iki satıra sığmayıp "…" ile
   kesiliyordu. Üç satıra kadar izin verilir (ölçüm: 360–1920 px arasında hepsi tam okunuyor). */
.him-kanal-kartlari .ic-duyuru-ozet {
    -webkit-line-clamp: 3;
    line-clamp: 3;
}

/* Butonlu kart (ör. nöbetçi eczaneler, 21.10.2026): ikonsuz, içerik kartın tüm genişliğini kullanır. Adres bir ya da iki
   satır, rozetler (uzun bölge adı) bir ya da iki satır olabildiğinden butonlar karttan karta kayıyordu. Özet daima iki
   satır yer tutar; butonlar kartın dibine yaslanır, aynı sıradaki kartlarda hizalı durur. Saat rozeti sağa yaslanır. */
.ic-duyuru-card--butonlu .ic-duyuru-icerik {
    display: flex;
    flex-direction: column;
}

.ic-duyuru-card--butonlu .ic-duyuru-ozet {
    min-height: 3em; /* 2 satır × line-height 1.5 */
}

.ic-duyuru-card--butonlu .ic-duyuru-butonlar {
    margin-top: auto;
    padding-top: 1rem;
}

.ic-duyuru-card--butonlu .ic-duyuru-saat {
    margin-left: auto;
}

/* Kategori renk eşlemesi — index duyuru-cat-* dilinin açık zemin karşılığı */
.ic-duyuru-cat--etkinlik .ic-duyuru-ikon,
.ic-duyuru-kategori--etkinlik {
    background: var(--color-primary-surface);
    color: var(--color-primary);
}

.ic-duyuru-cat--sosyal .ic-duyuru-ikon,
.ic-duyuru-kategori--sosyal {
    background: #FDEBEE;
    color: #BE123C;
}

.ic-duyuru-cat--saglik .ic-duyuru-ikon,
.ic-duyuru-kategori--saglik {
    background: #E7F6EC;
    color: #15803D;
}

.ic-duyuru-cat--egitim .ic-duyuru-ikon,
.ic-duyuru-kategori--egitim {
    background: #FEF3DD;
    color: #B45309;
}

.ic-duyuru-cat--kesinti .ic-duyuru-ikon,
.ic-duyuru-kategori--kesinti {
    background: #FDECEC;
    color: #B91C1C;
}

.ic-duyuru-cat--genel .ic-duyuru-ikon,
.ic-duyuru-kategori--genel {
    background: #EEF2F9;
    color: var(--color-text-secondary);
}

/* ── Siteden ayrılma modalı (ic-sayfa.js enjekte eder) ────────── */
.leaving-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(11, 31, 58, 0.62);
    z-index: 99999;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

    .leaving-overlay.open {
        display: flex;
    }

    .leaving-overlay .leaving-card {
        background: #fff;
        border-radius: 20px;
        padding: 40px 36px;
        max-width: 420px;
        width: 100%;
        text-align: center;
        box-shadow: 0 24px 64px rgba(11, 31, 58, 0.3);
        animation: authStepIn 0.35s var(--ease-out, ease);
    }

    .leaving-overlay .leaving-emoji {
        font-size: 46px;
        margin-bottom: 14px;
    }

    .leaving-overlay h3 {
        font-family: "Izmir-Bold", sans-serif;
        font-size: 20px;
        color: var(--color-text);
        margin-bottom: 10px;
    }

    .leaving-overlay p {
        font-size: 15px;
        color: var(--color-text-secondary);
        margin-bottom: 20px;
        line-height: 1.5;
    }

    /* BIZYEN-739: gidilecek adres — açıklamanın hemen altında, uzun adres kutuyu taşırmaz */
    .leaving-overlay p.leaving-hedef {
        margin: -8px 0 20px;
        padding: 8px 12px;
        border-radius: 10px;
        background: var(--color-primary-surface);
        color: var(--color-primary);
        font-size: 13px;
        font-weight: 600;
        line-height: 1.4;
        overflow-wrap: anywhere;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .leaving-overlay .leaving-countdown {
        width: 70px;
        height: 70px;
        margin: 0 auto 18px;
        position: relative;
    }

        .leaving-overlay .leaving-countdown #countdownPath {
            transform: rotate(-90deg);
            transform-origin: center;
            transition: stroke-dashoffset 1s linear;
        }

        .leaving-overlay .leaving-countdown span {
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: "Izmir-Bold", sans-serif;
            font-size: 22px;
            color: var(--color-primary);
        }

    .leaving-overlay .leaving-alt {
        font-size: 13px;
        color: var(--color-text-muted);
    }

    .leaving-overlay .leaving-actions {
        display: flex;
        gap: 12px;
        justify-content: center;
    }

    .leaving-overlay #leavingCancel {
        padding: 10px 24px;
        border: 2px solid var(--color-primary);
        background: transparent;
        color: var(--color-primary);
        border-radius: 10px;
        font-size: 14px;
        font-family: "Izmir-Semibold", sans-serif;
        cursor: pointer;
        transition: all 0.2s ease;
    }

        /* Hover'da dolu mavi olunca "Hemen Git" ile aynı görünüyordu (21.10.2026): ikincil eylem açık zeminde kalır,
           dolu mavi yalnız asıl eylemde. */
        .leaving-overlay #leavingCancel:hover {
            background: var(--color-primary-surface, #E8F1FC);
            color: var(--color-primary);
        }

    .leaving-overlay #leavingGo {
        padding: 10px 24px;
        border: none;
        background: var(--gradient-header, linear-gradient(135deg, #1565C0, #0D47A1));
        color: #fff;
        border-radius: 10px;
        font-size: 14px;
        font-family: "Izmir-Semibold", sans-serif;
        cursor: pointer;
        transition: all 0.2s ease;
    }

        .leaving-overlay #leavingGo:hover {
            opacity: 0.92;
            transform: scale(1.03);
        }

/* ── Snackbar (icSayfa.snackbar) ──────────────────────────────── */
.ic-snackbar-host {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100000;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    pointer-events: none;
    width: max-content;
    max-width: calc(100vw - 32px);
}

.ic-snackbar {
    background: var(--color-text);
    color: #fff;
    font-size: 14px;
    font-family: "Izmir-Semibold", sans-serif;
    padding: 13px 22px;
    border-radius: 12px;
    box-shadow: 0 10px 32px rgba(11, 31, 58, 0.3);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.3s var(--ease-out, ease), transform 0.3s var(--ease-out, ease);
}

    .ic-snackbar.show {
        opacity: 1;
        transform: translateY(0);
    }

    .ic-snackbar::before {
        content: "";
        width: 8px;
        height: 8px;
        border-radius: 50%;
        flex-shrink: 0;
    }

.ic-snackbar--success::before {
    background: #4ADE80;
}

.ic-snackbar--error::before {
    background: #F87171;
}

.ic-snackbar--info::before {
    background: #60A5FA;
}

/* BIZYEN-691: Kalıcı snackbar — kendiliğinden kapanmaz, kullanıcı × ile kapatır.
   Host'ta "pointer-events: none" var; kalıcı varyantta geri açılır. Bu yalnız ×
   düğmesi için değil, kutunun tamamı için bilinçli: kutu opak olduğundan altında
   kalan öğeler zaten görünmüyor, tıklamanın opak yüzeyden geçmesi kullanıcının
   göremediği bir denetimi tetiklerdi. Geçici snackbar'lar (en geç 8 sn'de kalkar)
   eskisi gibi tıklama geçirgen kalır. Metin uzun olabildiğinden (randevu dolu
   mesajı üç cümle) üstten hizalanır ve genişliği sınırlanır. */
.ic-snackbar--kalici {
    pointer-events: auto;
    align-items: flex-start;
    max-width: 560px;
    text-align: left;
    line-height: 1.45;
}

    .ic-snackbar--kalici::before {
        margin-top: 6px;
    }

/* Mesajın birincil kapatma yolu bu düğme olduğundan dokunma hedefi 28×28'e
   çıkarılır (yalnız glif ~12×20 kalırdı). Üstten -4px ile glif ilk satırla
   optik hizada tutulur. */
.ic-snackbar-kapat {
    background: none;
    border: 0;
    color: inherit;
    opacity: 0.7;
    font-size: 20px;
    line-height: 1;
    padding: 0;
    margin-left: 4px;
    margin-top: -4px;
    cursor: pointer;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    min-height: 28px;
}

    .ic-snackbar-kapat:hover {
        opacity: 1;
    }

    .ic-snackbar-kapat:focus-visible {
        opacity: 1;
        outline: 2px solid #fff;
        outline-offset: 2px;
        border-radius: 4px;
    }

/* ── Üyelik Ayarları — profil özet şeridi ─────────────────────── */
.uyelik-ozet {
    display: flex;
    align-items: center;
    gap: 18px;
    background: linear-gradient(135deg, #0D47A1, #1976D2);
    border-radius: 20px;
    padding: 26px 28px;
    color: #fff;
    margin-bottom: 26px;
    position: relative;
    overflow: hidden;
}

    .uyelik-ozet::after {
        content: "";
        position: absolute;
        width: 240px;
        height: 240px;
        border-radius: 50%;
        right: -80px;
        top: -100px;
        background: radial-gradient(circle, rgba(255, 255, 255, 0.14), transparent 70%);
        pointer-events: none;
    }

.uyelik-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    border: 2px solid rgba(255, 255, 255, 0.45);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: "Izmir-Bold", sans-serif;
    font-size: 22px;
    flex-shrink: 0;
}

.uyelik-ozet-bilgi h3 {
    font-family: "Izmir-Bold", sans-serif;
    font-size: 21px;
    margin: 0 0 5px;
    color: #fff;
}

.uyelik-ozet-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.8);
}

.uyelik-rozet {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    padding: 3px 11px;
    font-family: "Izmir-Semibold", sans-serif;
    font-size: 12px;
    color: #fff;
}

    .uyelik-rozet svg {
        width: 13px;
        height: 13px;
    }

/* Tehlikeli işlem kartı (hesabı dondur vb.) */
.uyelik-danger-card {
    border: 1.5px solid #F3C4C4;
    background: #FDF7F7;
    border-radius: 14px;
    padding: 18px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}

    .uyelik-danger-card h5 {
        font-family: "Izmir-Semibold", sans-serif;
        font-size: 15px;
        color: #B91C1C;
        margin: 0 0 4px;
    }

    .uyelik-danger-card p {
        font-size: 13px;
        color: var(--color-text-secondary);
        margin: 0;
    }

.uyelik-danger-btn {
    border: 1.5px solid var(--color-error);
    background: transparent;
    color: var(--color-error);
    font-family: "Izmir-Semibold", sans-serif;
    font-size: 13.5px;
    padding: 8px 18px;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

    .uyelik-danger-btn:hover {
        background: var(--color-error);
        color: #fff;
    }

@media (max-width: 576px) {
    .uyelik-ozet {
        padding: 20px;
        gap: 14px;
    }

    .uyelik-avatar {
        width: 52px;
        height: 52px;
        font-size: 18px;
    }
}

/* ── ic-doluluk — conic-gradient doluluk halkası (otoparklar) ──
   Kullanım: <div class="ic-doluluk" style="--doluluk: 64">
               <span class="doluluk-deger">%64</span>
             </div>  + .ic-doluluk--yuksek (kırmızı) / --orta (amber) */
.ic-doluluk {
    --doluluk: 50;
    width: 92px;
    height: 92px;
    border-radius: 50%;
    background: radial-gradient(closest-side, #fff 76%, transparent 77% 100%), conic-gradient(var(--color-primary) calc(var(--doluluk) * 1%), #E4EAF2 0);
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ic-doluluk--orta {
    background: radial-gradient(closest-side, #fff 76%, transparent 77% 100%), conic-gradient(var(--color-warning) calc(var(--doluluk) * 1%), #E4EAF2 0);
}

.ic-doluluk--yuksek {
    background: radial-gradient(closest-side, #fff 76%, transparent 77% 100%), conic-gradient(var(--color-error) calc(var(--doluluk) * 1%), #E4EAF2 0);
}

.ic-doluluk .doluluk-deger {
    font-family: "Izmir-Bold", sans-serif;
    font-size: 17px;
    color: var(--color-text);
    line-height: 1.1;
}

.ic-doluluk .doluluk-etiket {
    font-size: 10px;
    color: var(--color-text-muted);
}

/* ============================================================
   BACKEND'E ÖZGÜ KORUNAN KURALLAR
   (Statik prototipte bulunmayan, backend uygulamasına özel kurallar)
   ============================================================ */

.accordion-button.collapsed:focus {
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, .25);
}

.accordion-item:first-of-type .accordion-button,
.accordion-item:last-of-type .accordion-button.collapsed {
    border-radius: 10px;
}


/* ── Çerez bildirimi — yeni yapı bileşeni ─────────────────────
   Eski cookie-wrapper banner'ının yerine geçer; tıklamaları KESMEZ
   (kompakt köşe kartı). Butonlar: bizizmir-blue/white-bg-button. */
.cerez-banner {
    position: fixed;
    left: 24px;
    bottom: 24px;
    z-index: 99990;
    max-width: 430px;
    background: #fff;
    border: 1px solid var(--color-border-subtle);
    border-radius: 18px;
    box-shadow: 0 18px 48px rgba(11, 31, 58, 0.25);
    padding: 20px 22px;
    display: none;
}

    .cerez-banner.acik {
        display: block;
        animation: authStepIn 0.4s var(--ease-out, ease);
    }

    .cerez-banner h5 {
        font-family: "Izmir-Bold", sans-serif;
        font-size: 16px;
        color: var(--color-text);
        margin: 0 0 8px;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .cerez-banner p {
        font-size: 13.5px;
        color: var(--color-text-secondary);
        line-height: 1.55;
        margin: 0 0 14px;
    }

    .cerez-banner .cerez-aksiyonlar {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
        align-items: center;
    }

        /* style.css'teki .bizizmir-blue-bg-button { width: 100% } düğmeleri alt alta diziyor ve bandı
           ~265px'e çıkarıp 1280×900'de ödeme formunu (KVKK + Devam Et) örtüyordu; yan yana dizilir,
           sığmazsa flex-wrap ile alta geçer (BIZYEN-738). */
        .cerez-banner .cerez-aksiyonlar > button {
            flex: 1 1 auto;
            width: auto;
            padding: 0 16px;
        }

@media (max-width: 576px) {
    .cerez-banner {
        left: 12px;
        right: 12px;
        bottom: 12px;
        max-width: none;
        padding: 16px;
    }
}

/* ============================================================
   BACKEND'E ÖZGÜ EK — Hizmet detay içeriğinde gövdesiz CMS bölüm
   başlığı (örn. "Sıkça Sorulan Sorular") akordeon öğeleri arasında
   ara başlık olarak çizilir.
   ============================================================ */
.hizmet-icerik-grup-baslik {
    margin: 28px 0 14px;
    font-size: 19px;
    font-weight: 700;
    color: #0d2847;
}

/* ============================================================
   BACKEND'E ÖZGÜ EK — FabrikaLab ekipman kartları: CDN'den gelen
   farklı oranlardaki fotoğraflar ve uzun CMS açıklamaları, statikteki
   eşit yükseklikli kart anatomisine sabitlenir.
   ============================================================ */
#ekipman .askida-fatura-box .askida-fatura-box-content img {
    width: 100%;
    height: 180px;
    object-fit: contain;
}

#ekipman .askida-fatura-box .askida-fatura-box-content p {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ============================================================
   BACKEND'E ÖZGÜ EK — style.css'teki eski ".bizizmir-blue-bg-button
   { width:100% }" kuralı, statik tasarımda içerik genişliğinde olan
   form/durum aksiyon butonlarını tam satıra yayıyordu (örn. HİM
   Yeni Başvuru "Başvuruyu Gönder"). Statik görünümü geri getirir.
   ============================================================ */
#ic-sayfalar .ic-form-actions .bizizmir-blue-bg-button,
#ic-sayfalar .ic-form-actions .bizizmir-white-bg-button,
#ic-sayfalar .ic-durum-hero-actions .bizizmir-blue-bg-button,
#ic-sayfalar .ic-durum-hero-actions .bizizmir-white-bg-button,
#ic-sayfalar .ic-bos-durum .bizizmir-blue-bg-button {
    width: auto;
}

/* Form aksiyon butonları eşit genişlikte: ikincil buton (ör. HİM "Formu Temizle") width:auto'ya
   çekilince iç boşluksuz kalıyor, metin kenarlara yapışıyordu. Dar ekranda yan yana sığmadıkları
   için tam satır olurlar. */
#ic-sayfalar .ic-form-actions .bizizmir-blue-bg-button,
#ic-sayfalar .ic-form-actions .bizizmir-white-bg-button {
    padding: 0 24px;
    min-width: 180px;
}

@media (max-width: 575.98px) {
    #ic-sayfalar .ic-form-actions .bizizmir-blue-bg-button,
    #ic-sayfalar .ic-form-actions .bizizmir-white-bg-button {
        flex: 1 1 100%;
    }
}

/* ============================================================
   BACKEND'E ÖZGÜ EK — Harita kategori kartlarının ikonları API'den
   <img> olarak gelir (statikte inline <svg> kullanılır); ikon,
   statikteki 22px svg ölçüsüne sabitlenir ki kart anatomisi bozulmasın.
   ============================================================ */
.ic-duyuru-ikon img {
    width: 22px;
    height: 22px;
    object-fit: contain;
}

/* ============================================================
   BACKEND'E ÖZGÜ EK — Hizmet detay başlık satırı favori butonu.
   Statikte yıldız düz <img>'dir (26x26 doğal boyut); backend'de
   animasyon sarmalayıcısıyla (.favorite-star div) basıldığından
   sarmalayıcıya statik yıldızla birebir 26x26 kutu verilir
   (yoksa mutlak konumlu yıldız buton metninin üstüne taşar).
   ============================================================ */
#favoriteButton .favorite-star {
    position: relative;
    width: 26px;
    height: 26px;
    flex-shrink: 0;
}

/* Favori durumu buton sınıfıyla sürülür (favoriteButton1/2) —
   kart yıldızındaki .is-fav opacity mekanizmasının karşılığı. */
#favoriteButton.favoriteButton2 .favorite-star .default-star {
    opacity: 0;
}

#favoriteButton.favoriteButton2 .favorite-star .checked-star {
    opacity: 1;
    transform: scale(1);
}

/* ============================================================
   BACKEND'E ÖZGÜ EK — Akordeonlu hizmet detayında giriş metni
   sarmalayıcısı (statikte tek <p> olan giriş, CMS'te birden çok
   blok olabildiğinden nötr bir kapsayıcıya alınır).
   ============================================================ */
.hizmet-info-intro-metin {
    min-width: 0;
}

/* ============================================================
   BACKEND'E ÖZGÜ EK — Favorilerim boş durumu statikte #ic-sayfalar
   dışında yaşar; style.css'teki eski ".bizizmir-blue-bg-button
   { width:100% }" kuralına karşı statikteki içerik genişliği korunur.
   ============================================================ */
.ic-bos-durum .bizizmir-blue-bg-button {
    width: auto;
}

/* ============================================================
   BACKEND'E ÖZGÜ EK — Yukarıdaki "BACKEND'E ÖZGÜ KORUNAN KURALLAR"
   bloğundaki ".accordion-button.collapsed:focus" kuralı, statikteki
   ".accordion-button:focus { box-shadow: none }" davranışını daha
   yüksek özgüllükle ezip tıklama sonrası mavi odak halkası bırakıyordu.
   Statik görünüm geri getirilir; klavye odağı (statikteki
   :focus-visible halkası) korunur.
   ============================================================ */
.accordion-button.collapsed:focus {
    box-shadow: none;
    outline: none;
}

.accordion-button.collapsed:focus-visible {
    box-shadow: 0 0 0 0.2rem rgba(21, 101, 192, 0.25);
}

/* ============================================================
   BACKEND'E ÖZGÜ EK — BIZYEN-582: Çerez tercih modalı ("Çerez
   politikaları bilgilendirme") "Seçimleri Onayla ve Kapat" butonu,
   sitedeki birincil aksiyon butonuyla (.bizizmir-blue-bg-button)
   birebir aynı görünüme getirilir. style.css'teki paylaşılan
   "#cookieModal .modal-action-buttons button" kuralı butonu off-token
   eski maviyle (#2e82d0) ve sabit 230px genişlik/tuhaf padding ile
   sürüyordu; token'lı turuncu CTA'ya (var(--color-cta)) taşınır:
   10px köşe, 40px yükseklik, içerik genişliği, hover'da hafif yükselme
   + gölge, erişilebilir :focus-visible halkası.
   Kapsam YALNIZ #cookieModal — diğer modallar (giriş/favori/iptal)
   style.css'teki mevcut kuralı kullanmaya devam eder. ic-sayfa.css
   style.css'ten SONRA yüklendiği için eşit özgüllükte ezme geçerli.
   Mobilde responsive.css width:100% verir (renk/biçim korunur).
   ============================================================ */
#cookieModal .modal-action-buttons button {
    background-color: var(--color-cta);
    color: #fff;
    border: none;
    border-radius: 10px;
    height: 40px;
    width: auto;
    padding: 0 24px;
    font-size: 14px;
    font-family: "Izmir-Bold";
    line-height: normal;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}

    #cookieModal .modal-action-buttons button:hover {
        background-color: var(--color-cta-hover, #C46008);
        color: #fff;
        box-shadow: 0 4px 16px rgba(232, 118, 10, 0.35);
        transform: translateY(-1px);
    }

    /* Fare tıklamasında Bootstrap .btn'in mavi focus gölgesini bastır;
   klavye odağı :focus-visible halkasıyla korunur. */
    #cookieModal .modal-action-buttons button:focus {
        box-shadow: none;
    }

    #cookieModal .modal-action-buttons button:focus-visible {
        outline: 3px solid rgba(232, 118, 10, 0.4);
        outline-offset: 2px;
        background-color: var(--color-cta-hover, #C46008);
        color: #fff;
    }

    #cookieModal .modal-action-buttons button:active {
        background-color: var(--color-cta-hover, #C46008);
        color: #fff;
        transform: translateY(0);
        box-shadow: 0 2px 8px rgba(232, 118, 10, 0.3);
    }

/* ============================================================
   BACKEND'E ÖZGÜ EK — Hizmet logosu "Hizmet Hakkında" paneli içinde.
   Giriş paragrafı olmayan hizmetlerde logo akordeonun üstünde sahipsiz
   kalıyordu; ilk panelin gövdesine, açıklama paragrafının soluna alınır
   (HizmetDetay.cshtml ikonPanelIcinde). Üçlü seçici bilinçli: responsive.css
   sonradan yüklendiğinden mobil ".hizmet-info--sliderli .hizmet-info-img"
   (104px, ortalı) kuralını ancak daha yüksek özgüllük eziyor.
   ============================================================ */
.hizmet-detay-content .accordion-body--logolu {
    /* float'lı logoyu kart gövdesi içinde tut (taşmasın); metin logonun
       yanından akar, logo bittikten sonra tam genişliğe iner. */
    display: flow-root;
}

    .hizmet-detay-content .accordion-body--logolu .hizmet-info-img {
        float: left;
        width: 100px;
        height: 100px;
        object-fit: contain;
        object-position: left top;
        padding: 0;
        margin: 4px 24px 12px 0;
    }

@media (max-width: 768px) {
    /* Mobilde statikteki intro düzeniyle aynı dil: logo metnin üstünde ortalı */
    .hizmet-detay-content .accordion-body--logolu .hizmet-info-img {
        float: none;
        display: block;
        width: 104px;
        height: 104px;
        margin: 0 auto 16px;
    }
}