:root {
    --dp-card-bg: #ffffff;
    --dp-card-border: rgba(15, 23, 42, 0.12);
    --dp-text: #23313b;
    --dp-muted: #64748b;
    --dp-shadow-lg: 0 24px 64px rgba(2, 6, 23, 0.22);
    --dp-focus-ring: 0 0 0 0.2rem rgba(59, 130, 246, 0.22);
}

/* Tüm modallar — Erken Erişim (beta) modal tasarımı ile uyumlu */
.modal-dialog .modal-content {
    border: 0;
    border-radius: 1.5rem;
    overflow: hidden;
    box-shadow: var(--shadow-soft, 0 12px 36px rgba(15, 23, 42, 0.03));
}

.modal-dialog .modal-footer {
    background: #ffffff;
    border-top: 1px solid rgba(15, 23, 42, 0.06);
}

/* Beta modal (Erken Erişim) ile uyumlu — tüm modallar aynı karakterde */
.dp-modal {
    border: 0;
    border-radius: 1.5rem;
    overflow: hidden;
    background: var(--dp-card-bg);
    color: var(--dp-text);
    box-shadow: var(--shadow-soft, 0 12px 36px rgba(15, 23, 42, 0.03));
}

.dp-modal--sm {
    max-width: 420px;
}

.dp-modal--md {
    max-width: 640px;
}

.dp-modal--lg {
    max-width: 920px;
}

.dp-modal--xl {
    max-width: 1140px;
}

.dp-content {
    padding: 1rem 1.75rem;
}

/* [FIX 2026-03-11] modal-dialog-scrollable .modal-body yerine dp-content kullanır.
   Video/medya yüklendiğinde içerik viewport'u aşıyordu → paylaş butonu görünmüyordu.
   Bu kural dp-content'e scroll kazandırır. */
.modal-dialog-scrollable .dp-content {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

/* Footer — gri bant yok, body ile aynı arka plan (beta-modal uyumlu) */
.dp-modal-footer,
.sv-modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.85rem 1.25rem 1.1rem;
    border-top: 1px solid rgba(15, 23, 42, 0.06);
    background: #ffffff;
}

.dp-hero {
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid rgba(184, 223, 241, 0.78);
    background: linear-gradient(135deg, #ffffff 0%, #e8f4fb 52%, #f6f1fb 100%);
    color: #23313b;
}

.dp-hero--compact {
    padding: 0.95rem 1rem;
}

.dp-hero__pattern {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    inset: 0;
    background-image: radial-gradient(circle at 18% 22%, rgba(255, 255, 255, 0.46), transparent 38%),
        radial-gradient(circle at 82% 18%, rgba(184, 223, 241, 0.28), transparent 40%);
    pointer-events: none;
}

.dp-hero__content {
    position: relative;
    z-index: 1;
    padding: 1.25rem 1.75rem;
}

.dp-hero__icon-wrapper {
    width: 2rem;
    height: 2rem;
    border-radius: var(--radius-2026-btn, 14px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #e8f4fb;
    color: #285d77;
}

.dp-hero__brand-mark {
    width: 1.15rem;
    height: 1.15rem;
    object-fit: contain;
    display: block;
}

.dp-inline-brand-mark {
    width: 1rem;
    height: 1rem;
    object-fit: contain;
    display: inline-block;
    vertical-align: middle;
}

.dp-input-radius-start-reset {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.dp-inline-flex {
    display: inline-flex;
}

.dp-w-100 {
    width: 100%;
}

.dp-spinner-accent {
    color: var(--dp-purple, #7b6fb0);
}

.dp-muted-note {
    color: var(--dp-text-muted, #64748b);
    font-size: 0.875rem;
}

.dp-drop-zone {
    cursor: pointer;
    padding: 2rem;
}

.dp-card__icon--upload {
    width: 3.5rem;
    height: 3.5rem;
    font-size: 1.75rem;
    background: rgba(184, 168, 217, 0.14);
}

.dp-file-select-btn {
    padding: 0.5rem 1.25rem;
    font-size: 0.85rem;
}

.dp-accordion-muted {
    color: var(--dp-text-muted, #64748b);
}

#contactInput {
    min-height: 80px;
}

.dp-hero--website-confirm {
    background: linear-gradient(135deg, #ffffff 0%, #e8f4fb 100%);
}

.dp-hero--report {
    border-bottom-color: #f4c7c3;
    background: linear-gradient(135deg, #ffffff 0%, #fbefee 54%, #fff7ed 100%);
}

.dp-hero--appeal {
    border-bottom-color: #efd6a8;
    background: linear-gradient(135deg, #ffffff 0%, #fff7ed 52%, #f8f1dc 100%);
}

.dp-hero--tos {
    border-bottom-color: #b8dff1;
    background: linear-gradient(135deg, #ffffff 0%, #e8f4fb 52%, #edf8f2 100%);
}

.website-preview-card {
    max-width: 380px;
}

.website-preview-image {
    max-height: 160px;
    object-fit: cover;
}

.dp-confirm-website-btn {
    background: linear-gradient(135deg, #e8f4fb 0%, #d9edf7 100%);
    border-color: #b8dff1;
    color: #285d77;
}

.dp-btn--report {
    background: linear-gradient(135deg, #f6d3cf 0%, #f8e4df 100%);
    border-color: #f0b8b2;
    color: #7f2f2a;
}

.dp-btn--appeal {
    background: linear-gradient(135deg, #f7e6bf 0%, #fbefd2 100%);
    border-color: #edcf8f;
    color: #7a5622;
}

.dp-btn--tos {
    background: linear-gradient(135deg, #e8f4fb 0%, #d9edf7 100%);
    border-color: #b8dff1;
    color: #285d77;
}

.pp-share-link-icon {
    color: var(--dp-purple, #7b6fb0);
}

.pp-share-input {
    border-radius: var(--dp-radius-card) 0 0 var(--dp-radius-card);
}

.pp-share-send {
    border-radius: 0 var(--dp-radius-card) var(--dp-radius-card) 0;
}

.dp-hero__title {
    margin: 0;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: #23313b;
}

.dp-hero__badge {
    display: inline-flex;
    margin-top: 0.2rem;
    padding: 0.12rem 0.5rem;
    border-radius: var(--radius-2026-btn, 14px);
    border: 1px solid rgba(255, 255, 255, 0.35);
    background: rgba(255, 255, 255, 0.12);
    color: #f8fafc;
    font-size: 0.72rem;
    font-weight: 600;
}

.dp-hero__close {
    position: relative;
    z-index: 2;
    filter: invert(1) grayscale(1) brightness(1.6);
    opacity: 0.78;
}

.dp-hero__close:hover {
    opacity: 1;
}

.modal-dialog .modal-content .btn-primary,
.dp-modal .btn-primary {
    background: #e8f4ff !important;
    border-color: #b9d9ec !important;
    color: #235675 !important;
    border-radius: 8px !important;
    box-shadow: 0 10px 22px rgba(31, 78, 107, 0.1) !important;
}

.modal-dialog .modal-content .btn-primary:hover,
.modal-dialog .modal-content .btn-primary:focus-visible,
.dp-modal .btn-primary:hover,
.dp-modal .btn-primary:focus-visible {
    background: #dceef9 !important;
    border-color: #a9d1e6 !important;
    color: #1f4e6b !important;
}

.modal-dialog .modal-content .btn-secondary,
.modal-dialog .modal-content .btn-light,
.dp-modal .btn-secondary,
.dp-modal .btn-light {
    background: #ffffff !important;
    border-color: #cfe1eb !important;
    color: #52647a !important;
    border-radius: 8px !important;
}

.modal-dialog .modal-content .dp-btn,
.dp-modal .dp-btn {
    border-radius: 8px;
}

.modal-dialog .modal-content .dp-btn--primary,
.modal-dialog .modal-content .dp-btn--blue,
.dp-modal .dp-btn--primary,
.dp-modal .dp-btn--blue {
    background: #e8f4ff !important;
    border-color: #b9d9ec !important;
    color: #235675 !important;
    box-shadow: 0 10px 22px rgba(31, 78, 107, 0.1) !important;
}

.modal-dialog .modal-content .dp-btn--primary:hover,
.modal-dialog .modal-content .dp-btn--blue:hover,
.dp-modal .dp-btn--primary:hover,
.dp-modal .dp-btn--blue:hover {
    background: #dceef9 !important;
    border-color: #a9d1e6 !important;
    color: #1f4e6b !important;
}

.modal-dialog .modal-content .dp-btn--green,
.dp-modal .dp-btn--green {
    background: #edf8f2 !important;
    border-color: #bfdfcc !important;
    color: #276346 !important;
}

.modal-dialog .modal-content .dp-btn--red,
.dp-modal .dp-btn--red {
    background: #fff1f1 !important;
    border-color: #f0c6c6 !important;
    color: #8a3a3a !important;
}

.modal-dialog .modal-content .dp-btn--amber,
.dp-modal .dp-btn--amber {
    background: #fff4d8 !important;
    border-color: #ead28e !important;
    color: #725112 !important;
}

.dp-hero--blue {
    background: linear-gradient(135deg, #285d77, #285d77);
}

.dp-hero--green {
    background: linear-gradient(135deg, #0f766e, #14b8a6);
}

.dp-hero--red {
    background: linear-gradient(135deg, #b91c1c, #ef4444);
}

.dp-hero--amber {
    background: linear-gradient(135deg, #6d28d9, #8b5cf6);
}

.dp-hero--orange {
    background: linear-gradient(135deg, #c2410c, #f97316);
}

.dp-hero--navy {
    background: linear-gradient(135deg, #285d77, #285d77);
}

.dp-hero--cyan {
    background: linear-gradient(135deg, #0e7490, #06b6d4);
}

.dp-hero--lila {
    background: linear-gradient(135deg, #7b6fb0, #a855f7);
}

.dp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    border: 1px solid transparent;
    border-radius: 0.66rem;
    padding: 0.58rem 0.9rem;
    font-weight: 600;
    line-height: 1.25;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.dp-btn:focus-visible {
    outline: none;
    box-shadow: var(--dp-focus-ring);
}

.dp-btn--primary {
    color: #ffffff;
    background: #285d77;
    border-color: #285d77;
}

.dp-btn--primary:hover {
    background: #285d77;
    border-color: #285d77;
}

.dp-btn--secondary {
    color: #23313b;
    background: #e2e8f0;
    border-color: #cbd5e1;
}

.dp-btn--secondary:hover {
    background: #cbd5e1;
}

.dp-btn--ghost {
    color: #334155;
    background: #ffffff;
    border-color: #cbd5e1;
}

.dp-btn--ghost:hover {
    background: #f8fafc;
}

.dp-btn--blue {
    background: #285d77;
    border-color: #285d77;
    color: #ffffff;
}

.dp-btn--blue:hover {
    background: #285d77;
    border-color: #285d77;
}

.dp-btn--green {
    background: #0f766e;
    border-color: #0f766e;
    color: #ffffff;
}

.dp-btn--green:hover {
    background: #0d6b64;
    border-color: #0d6b64;
}

.dp-btn--red {
    background: #dc2626;
    border-color: #dc2626;
    color: #ffffff;
}

.dp-btn--red:hover {
    background: #b91c1c;
    border-color: #b91c1c;
}

.dp-btn--amber {
    background: #7b6fb0;
    border-color: #7b6fb0;
    color: #ffffff;
}

.dp-btn--amber:hover {
    background: #6d28d9;
    border-color: #6d28d9;
}

.dp-btn.dp-btn--report,
.modal-dialog .modal-content .dp-btn.dp-btn--report,
.dp-modal .dp-btn.dp-btn--report {
    background: linear-gradient(135deg, #f6d3cf 0%, #f8e4df 100%);
    border-color: #f0b8b2;
    color: #7f2f2a;
}

.dp-btn.dp-btn--appeal,
.modal-dialog .modal-content .dp-btn.dp-btn--appeal,
.dp-modal .dp-btn.dp-btn--appeal {
    background: linear-gradient(135deg, #f7e6bf 0%, #fbefd2 100%);
    border-color: #edcf8f;
    color: #7a5622;
}

.dp-btn.dp-btn--tos,
.modal-dialog .modal-content .dp-btn.dp-btn--tos,
.dp-modal .dp-btn.dp-btn--tos {
    background: linear-gradient(135deg, #e8f4fb 0%, #d9edf7 100%);
    border-color: #b8dff1;
    color: #285d77;
}

.dp-form-group {
    margin-bottom: 0.9rem;
}

.dp-form-label {
    display: inline-block;
    margin-bottom: 0.35rem;
    color: #23313b;
    font-size: 0.88rem;
    font-weight: 600;
}

.dp-form-input,
.dp-form-select,
.dp-form-textarea {
    width: 100%;
    border: 1px solid #cbd5e1;
    border-radius: 0.62rem;
    background: #ffffff;
    color: #23313b;
    font-size: 0.94rem;
    line-height: 1.4;
    padding: 0.6rem 0.7rem;
}

.dp-form-textarea {
    resize: vertical;
    min-height: 5.25rem;
}

.dp-form-input:focus,
.dp-form-select:focus,
.dp-form-textarea:focus {
    outline: none;
    border-color: #60a5fa;
    box-shadow: var(--dp-focus-ring);
}

/* ============================================
   PCM COMPOSE BOX — Twitter-style layout
   ============================================ */

/* Ana sarmalayıcı — border yok, sadece padding */
.pcm-compose-box {
    display: flex;
    gap: 0.75rem;
    padding: 0.25rem 0;
}

/* Sol sütun: avatar + dikey çizgi */
.pcm-compose-left {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    padding-top: 2px;
}

.pcm-compose-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.4rem;
    flex-shrink: 0;
}

.pcm-compose-vline {
    width: 2px;
    flex: 1;
    min-height: 12px;
    background: #e2e8f0;
    border-radius: 1px;
    margin-top: 6px;
}

/* Sağ sütun: tüm içerik */
.pcm-compose-right {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* İsim + Değiştir satırı */
.pcm-compose-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.3rem;
}

.pcm-compose-name {
    font-size: 0.875rem;
    font-weight: 600;
    color: #23313b;
    line-height: 1.3;
}

.pcm-compose-role {
    font-size: 0.8rem;
    color: #94a3b8;
    font-weight: 400;
}

.pcm-compose-switch-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.15rem 0.5rem;
    border: 1px solid #e2e8f0;
    border-radius: var(--radius-2026-btn, 14px);
    background: transparent;
    color: #64748b;
    font-size: 0.72rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.12s, color 0.12s;
    margin-left: auto;
}

.pcm-compose-switch-btn:hover {
    background: #f1f5f9;
    color: #23313b;
}

/* Textarea — büyük, temiz */
.pcm-compose-textarea {
    width: 100%;
    border: none;
    outline: none;
    resize: none;
    background: transparent;
    color: #23313b;
    font-size: 1.05rem;
    line-height: 1.5;
    padding: 0;
    min-height: 5rem;
    font-family: inherit;
}

.pcm-compose-textarea::placeholder {
    color: #cbd5e1;
}

/* Araç çubuğu — textarea'nın hemen altında, border-top ile ayrılmış */
.pcm-compose-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid #f1f5f9;
}

.pcm-compose-toolbar-left,
.pcm-compose-toolbar-right {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

/* Araç ikonu butonları */
.pcm-toolbar-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: #6366f1;
    font-size: 1.05rem;
    cursor: pointer;
    transition: background 0.12s;
}

.pcm-toolbar-btn:hover {
    background: rgba(99, 102, 241, 0.08);
}

/* Küçük Lila butonu varyantı */
.lila-btn--sm {
    padding: 0.3rem 0.65rem !important;
    font-size: 0.78rem !important;
}

.required {
    color: #dc2626;
}

/* ============================================
   MOBİL MODAL DÜZELTMELERİ
   ============================================ */

/* Küçük ekran (< 576px) — 575.98px Bootstrap standardı */
@media (max-width: 575.98px) {
    .modal-dialog {
        margin: 0.5rem !important;
        max-width: calc(100% - 1rem) !important;
    }

    .modal-dialog.modal-lg,
    .modal-dialog.dp-modal--lg {
        max-width: calc(100% - 1rem) !important;
    }

    .modal-dialog.modal-xl,
    .modal-dialog.dp-modal--xl {
        max-width: calc(100% - 1rem) !important;
    }

    .modal-content,
    .dp-modal {
        border-radius: var(--radius-lg, 1rem) !important;
        max-height: calc(100vh - 1rem) !important;
        max-height: calc(var(--visual-viewport-height, 100dvh) - 1rem) !important;
        display: flex;
        flex-direction: column;
    }

    .dp-modal .modal-body,
    .dp-content {
        padding: 1rem !important;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    .dp-hero {
        padding: 1rem !important;
        min-height: auto !important;
    }

    .dp-hero__title {
        font-size: 1.1rem !important;
    }

    .dp-hero__pattern,
    .dp-hero__icon-wrapper {
        display: none !important;
    }

    .dp-badge {
        font-size: 0.7rem !important;
        padding: 0.2rem 0.5rem !important;
    }
    
    .modal-footer,
    .dp-modal-footer {
        padding: 0.75rem 1rem !important;
        flex-wrap: wrap !important;
    }
    
    .modal-footer .btn,
    .dp-modal-footer .btn {
        flex: 1 1 auto !important;
        min-width: 100px !important;
        margin-bottom: 0.25rem !important;
    }
    
    /* Form elemanları */
    .dp-form-input,
    .dp-form-select,
    .dp-form-textarea {
        font-size: 1rem !important;
        padding: 0.75rem !important;
    }
    
    /* Kapatma butonu */
    .btn-close {
        padding: 0.5rem !important;
        margin: -0.5rem -0.5rem -0.5rem auto !important;
    }
    
    /* Scrollbar gizle */
    .dp-content::-webkit-scrollbar {
        width: 4px;
    }

    .dp-content::-webkit-scrollbar-thumb {
        background: rgba(0,0,0,0.2);
        border-radius: 2px;
    }

    /* createPostModal — kategori grid kompakt (2 sütun zorla, kartlar küçük) */
    #createPostModal .dp-content .row {
        --bs-gutter-x: 0.5rem !important;
        --bs-gutter-y: 0.5rem !important;
        row-gap: 0.5rem;
    }

    #createPostModal .dp-content .row > .col {
        flex: 0 0 50%;
        max-width: 50%;
    }

    #createPostModal .dp-card.dp-card--interactive {
        padding: 0.65rem 0.4rem !important;
        min-height: 0 !important;
    }

    #createPostModal .dp-card.dp-card--interactive .bi {
        font-size: 1.5rem !important;
    }

    #createPostModal .dp-card.dp-card--interactive .mb-2 {
        margin-bottom: 0.3rem !important;
    }

    #createPostModal .dp-card.dp-card--interactive h6 {
        font-size: 0.85rem !important;
        margin-bottom: 0.15rem !important;
        line-height: 1.2;
    }

    #createPostModal .dp-card.dp-card--interactive small {
        font-size: 0.66rem !important;
        line-height: 1.25;
        display: block;
    }
}

/* Tablet (576px - 767px) */
@media (min-width: 576px) and (max-width: 767px) {
    .modal-dialog {
        max-width: calc(100% - 3rem) !important;
    }
    
    .modal-dialog.modal-lg,
    .modal-dialog.dp-modal--lg {
        max-width: calc(100% - 2rem) !important;
    }
    
    .modal-content,
    .dp-modal {
        max-height: calc(100vh - 2rem) !important;
        max-height: calc(100dvh - 2rem) !important;
    }
}

/* iOS Safari düzeltmeleri */
@supports (-webkit-touch-callout: none) {
    .modal-content,
    .dp-modal {
        max-height: -webkit-fill-available !important;
    }
    
    .modal-body,
    .dp-content {
        max-height: calc(100vh - 200px) !important;
        max-height: calc(100dvh - 200px) !important;
        overflow-y: scroll !important;
        -webkit-overflow-scrolling: touch !important;
    }
}

/* Android Chrome düzeltmeleri */
@media screen and (orientation: portrait) {
    .modal.fade .modal-dialog {
        transform: translateY(100%);
        transition: transform 0.3s ease-out;
    }
    
    .modal.show .modal-dialog {
        transform: translateY(0);
    }
}

/* Landscape modunda mobil */
@media (max-height: 500px) and (orientation: landscape) {
    .modal-dialog {
        max-width: 90vw !important;
        max-height: 90vh !important;
        max-height: 90dvh !important;
    }
    
    .modal-body,
    .dp-content {
        max-height: 60vh !important;
        max-height: 60dvh !important;
        overflow-y: auto !important;
    }
    
    .dp-hero {
        padding: 0.5rem 1rem !important;
    }
    
    .dp-hero__title {
        font-size: 1rem !important;
    }
}

/* Touch cihazlar için iyileştirmeler */
@media (hover: none) and (pointer: coarse) {
    .modal-footer .btn,
    .dp-modal-footer .btn {
        min-height: 44px !important;
        padding: 0.75rem 1rem !important;
    }
    
    .btn-close {
        min-width: 44px !important;
        min-height: 44px !important;
    }
    
    input,
    select,
    textarea {
        font-size: 16px !important;
    }
}

/* Karanlık mod desteği */
@media (prefers-color-scheme: dark) and (min-width: 99999px) {
    .modal-content,
    .dp-modal {
        background: #1e293b !important;
        color: #f1f5f9 !important;
    }
    
    .dp-modal-footer,
    .modal-footer {
        background: #1e293b !important;
        border-top-color: rgba(255,255,255,0.1) !important;
    }
    
    .dp-form-input,
    .dp-form-select,
    .dp-form-textarea {
        background: #334155 !important;
        border-color: #475569 !important;
        color: #f1f5f9 !important;
    }
    
    .dp-content::-webkit-scrollbar-thumb {
        background: rgba(255,255,255,0.2) !important;
    }
}

/* Pastel production pass: shared modal system */
:root {
    --dp-card-border: rgba(137, 172, 195, 0.28);
    --dp-text: #172033;
    --dp-muted: #52647a;
    --dp-shadow-lg: 0 18px 48px rgba(31, 78, 107, 0.12);
    --dp-focus-ring: 0 0 0 0.2rem rgba(47, 111, 149, 0.18);
}

.modal-dialog .modal-content,
.dp-modal {
    border: 1px solid rgba(137, 172, 195, 0.28);
    border-radius: 12px;
    box-shadow: 0 18px 48px rgba(31, 78, 107, 0.12);
}

.modal-dialog .modal-footer,
.dp-modal-footer,
.sv-modal-footer {
    background: #f8fcff;
    border-top-color: rgba(137, 172, 195, 0.24);
}

.dp-hero,
.dp-hero--blue,
.dp-hero--navy,
.dp-hero--cyan {
    background: linear-gradient(135deg, #e8f4ff 0%, #f8fcff 100%) !important;
    color: #172033;
    border-bottom: 1px solid rgba(137, 172, 195, 0.28);
}

.dp-hero--green {
    background: linear-gradient(135deg, #edf8f2 0%, #f8fcff 100%) !important;
}

.dp-hero--red {
    background: linear-gradient(135deg, #fff1f1 0%, #fff8f6 100%) !important;
}

.dp-hero--amber {
    background: linear-gradient(135deg, #fff4d8 0%, #fffaf0 100%) !important;
}

.dp-hero--orange {
    background: linear-gradient(135deg, #ffe8d8 0%, #fff7f0 100%) !important;
}

.dp-hero--lila {
    background: linear-gradient(135deg, #f1efff 0%, #fbfaff 100%) !important;
}

.dp-hero__pattern {
    display: none;
}

.dp-hero__title {
    color: #172033;
    letter-spacing: 0;
}

.dp-hero .text-white {
    color: #172033 !important;
}

.dp-hero .text-white-50,
.dp-hero .text-light {
    color: #52647a !important;
}

.dp-hero__badge {
    border-color: rgba(137, 172, 195, 0.32);
    background: #ffffff;
    color: #2f6f95;
    border-radius: 8px;
}

.dp-hero__icon-wrapper {
    background: #ffffff;
    color: #235675;
    border: 1px solid #b9d9ec;
    border-radius: 8px;
}

.dp-hero--green .dp-hero__icon-wrapper {
    color: #276346;
    border-color: #bfdfcc;
}

.dp-hero--red .dp-hero__icon-wrapper {
    color: #8a3a3a;
    border-color: #f0c6c6;
}

.dp-hero--amber .dp-hero__icon-wrapper {
    color: #725112;
    border-color: #ead28e;
}

.dp-hero--lila .dp-hero__icon-wrapper {
    color: #5b4b8a;
    border-color: #d8d2f5;
}

.dp-hero__close {
    filter: none;
    opacity: 0.72;
}

.dp-hero__close:hover {
    opacity: 1;
}

/* Modal contrast guard: pastel/light dp-hero headers must never keep white text. */
.modal-header.dp-hero {
    color: #172033 !important;
    text-shadow: none !important;
}

.modal-header.dp-hero .dp-hero__title,
.modal-header.dp-hero .modal-title,
.modal-header.dp-hero .dp-hero__content,
.modal-header.dp-hero .dp-hero__content * {
    color: #172033 !important;
    text-shadow: none !important;
}

.modal-header.dp-hero .dp-hero__badge {
    background: #ffffff !important;
    border-color: rgba(137, 172, 195, 0.36) !important;
    color: #2f6f95 !important;
}

.modal-header.dp-hero .dp-hero__icon-wrapper {
    background: #ffffff !important;
    border-color: #b9d9ec !important;
    color: #235675 !important;
}

.modal-header.dp-hero .btn-close-white,
.modal-header.dp-hero .dp-hero__close {
    filter: none !important;
}

/* ============================================
   OFFCANVAS DÜZELTMELERİ (Mobil Panel)
   ============================================ */

/* Küçük ekran (< 576px) — 575.98px Bootstrap standardı */
@media (max-width: 575.98px) {
    .offcanvas {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .offcanvas.offcanvas-bottom {
        height: 85vh !important;
        height: 85dvh !important;
        border-radius: 1rem 1rem 0 0 !important;
    }
    
    .offcanvas.offcanvas-end {
        width: 100% !important;
        border-radius: 1rem 0 0 1rem !important;
    }
    
    .offcanvas.offcanvas-start {
        width: 100% !important;
        border-radius: 0 1rem 1rem 0 !important;
    }
    
    .offcanvas-header {
        padding: 1rem !important;
        flex-shrink: 0;
    }
    
    .offcanvas-title {
        font-size: 1.1rem !important;
    }
    
    .offcanvas-body {
        padding: 1rem !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior: contain !important;
        padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px)) !important;
    }
    
    /* Panel elemanları */
    .offcanvas .list-group-item {
        padding: 0.75rem 1rem !important;
        min-height: 44px !important;
    }
    
    .offcanvas .btn {
        min-height: 44px !important;
    }
}

/* Tablet (576px - 767px) */
@media (min-width: 576px) and (max-width: 767px) {
    .offcanvas.offcanvas-bottom {
        height: 75vh !important;
        height: 75dvh !important;
    }
    
    .offcanvas.offcanvas-end,
    .offcanvas.offcanvas-start {
        width: 75vw !important;
    }
}

/* iOS Safari offcanvas */
@supports (-webkit-touch-callout: none) {
    .offcanvas.offcanvas-bottom {
        height: -webkit-fill-available !important;
    }
    
    .offcanvas-body {
        max-height: -webkit-fill-available !important;
    }
}

/* Android back button desteği */
@media (max-width: 575.98px) {
    .offcanvas.show {
        transform: none !important;
    }
    
    .offcanvas-backdrop.show {
        opacity: 0.5 !important;
    }
}

/* ──────────────────────────────────────────────────────────────
   Contact Sync ("Arkadaşlarını Bul") Modal — sağ üst kapat ikonu
   Bootstrap btn-close yerine custom Bootstrap Icon — Cloudflare/CDN'in
   filter sorunlarına bağımlı değil. Modal-content'in sağ üst köşesinde
   absolute overlay, dp-hero'nun koyu mavi arka planında beyaz X.
   ────────────────────────────────────────────────────────────── */
#contactSyncModal .contact-sync-close {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 10;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.15s ease, transform 0.15s ease;
}

#contactSyncModal .contact-sync-close i {
    font-size: 16px;
    line-height: 1;
}

#contactSyncModal .contact-sync-close:hover,
#contactSyncModal .contact-sync-close:focus {
    background: rgba(255, 255, 255, 0.24);
    outline: none;
}

#contactSyncModal .contact-sync-close:active {
    transform: scale(0.94);
}

@media (max-width: 575.98px) {
    #contactSyncModal .contact-sync-close {
        top: 12px;
        right: 12px;
        width: 40px;
        height: 40px;
    }

    #contactSyncModal .contact-sync-close i {
        font-size: 18px;
    }

    /* Header daha kompakt — başlık + badge için yeterli, dikey alanı yer */
    #contactSyncModal .dp-hero {
        padding: 1rem 1.25rem !important;
    }

    #contactSyncModal .dp-hero__title {
        font-size: 1.1rem !important;
        line-height: 1.25;
    }

    #contactSyncModal .dp-hero__badge {
        font-size: 0.7rem !important;
        padding: 0.2rem 0.55rem !important;
    }

    /* İçerik padding sıkı, gereksiz boşluk yok */
    #contactSyncModal .dp-content {
        padding: 1rem !important;
    }

    /* Tab başlıkları biraz daha kompakt */
    #contactSyncModal .connection-tabs .nav-link {
        padding: 0.45rem 0.8rem;
        font-size: 0.88rem;
    }
}