/*
 * Epika Mail UI v2.0
 * SnappyMail 2.38.2 için Gmail / Yandex esintili arayüz katmanı
 * Çekirdek SnappyMail dosyalarını değiştirmez.
 */

:root {
    --epika-blue: #0b57d0;
    --epika-blue-dark: #0842a0;
    --epika-blue-soft: #d3e3fd;
    --epika-compose: #c2e7ff;
    --epika-app-bg: #f6f8fc;
    --epika-card: #ffffff;
    --epika-text: #1f1f1f;
    --epika-muted: #5f6368;
    --epika-line: #e7ebf0;
    --epika-hover: #eef3fb;
    --epika-shadow: 0 1px 2px rgba(31, 35, 40, .08), 0 8px 28px rgba(31, 35, 40, .06);

    --fontSans: Inter, Roboto, Arial, Helvetica, sans-serif;
    --main-color: var(--epika-text);
    --main-bg-color: var(--epika-app-bg);
    --panel-bg-clr: var(--epika-card);
    --dialog-bg-clr: var(--epika-card);
    --dialog-clr: var(--epika-text);
    --dialog-border-clr: rgba(31, 35, 40, .12);
    --dialog-border-radius: 18px;
    --border-color: var(--epika-line);
    --border-radius: 18px;
    --input-border-radius: 12px;
    --link-color: var(--epika-blue);
    --folders-color: #3c4043;
    --folders-hover-bg-color: #e8eaed;
    --folders-hover-color: #202124;
    --folders-selected-bg-color: var(--epika-blue-soft);
    --folders-selected-color: #041e49;
    --folders-focused-bg-color: var(--epika-blue-soft);
    --folders-focused-color: #041e49;
    --folders-disabled-color: #9aa0a6;
    --folders-drop-bg-color: #d2e3fc;
    --folders-drop-color: #041e49;
    --unread-count-bg-color: var(--epika-blue);
    --unread-count-color: #fff;
    --message-list-toolbar-bg-color: #fff;
    --message-header-bg-clr: #f8fafd;
    --tab-active-bg-clr: #fff;
    --tab-hover-border-clr: #d9e2f1;
    --smMainShadow: var(--epika-shadow);
}

html,
body,
body#rl-app {
    min-height: 100% !important;
    color: var(--epika-text) !important;
    background: var(--epika-app-bg) !important;
    font-family: var(--fontSans) !important;
}

body#rl-app {
    overflow: hidden !important;
}

* {
    scrollbar-width: thin;
    scrollbar-color: #c7cdd5 transparent;
}

*::-webkit-scrollbar {
    width: 9px;
    height: 9px;
}

*::-webkit-scrollbar-thumb {
    background: #c7cdd5;
    border: 2px solid transparent;
    border-radius: 999px;
    background-clip: content-box;
}

*::-webkit-scrollbar-track {
    background: transparent;
}

/* =========================================================
   UYGULAMA İSKELETİ VE ÜST BAR
   ========================================================= */

#rl-content:not([hidden]) {
    box-sizing: border-box !important;
    display: flex !important;
    gap: 12px !important;
    height: 100% !important;
    padding: 76px 14px 14px !important;
    background: var(--epika-app-bg) !important;
}

/* Beyaz uygulama üst barı */
#rl-content:not([hidden])::before {
    content: "";
    position: fixed;
    z-index: 101;
    top: 0;
    right: 0;
    left: 0;
    height: 64px;
    background: rgba(255, 255, 255, .96);
    border-bottom: 1px solid rgba(60, 64, 67, .08);
    box-shadow: 0 1px 3px rgba(60, 64, 67, .06);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

/* Epika logosu */
#rl-content:not([hidden])::after {
    content: "";
    position: fixed;
    z-index: 104;
    top: 9px;
    left: 18px;
    width: 190px;
    height: 46px;
    pointer-events: none;
    background: url("/branding/epika-logo.png") left center / contain no-repeat;
}

#rl-left {
    box-sizing: border-box !important;
    flex: 0 0 248px !important;
    width: 248px !important;
    min-width: 248px !important;
    max-width: 248px !important;
    overflow: hidden !important;
    resize: none !important;
    background: transparent !important;
}

#rl-right:not([hidden]) {
    display: flex !important;
    flex: 1 1 auto !important;
    gap: 12px !important;
    min-width: 0 !important;
    width: auto !important;
    overflow: hidden !important;
}

/* Üstteki global arama alanı */
#V-MailMessageList .messageList .second-toolbar {
    position: fixed !important;
    z-index: 104 !important;
    top: 8px !important;
    left: 50% !important;
    right: auto !important;
    box-sizing: border-box !important;
    width: min(720px, calc(100vw - 620px)) !important;
    height: 48px !important;
    min-height: 48px !important;
    padding: 0 10px 0 14px !important;
    transform: translateX(-50%) !important;
    align-items: center !important;
    gap: 8px !important;
    background: #eaf1fb !important;
    border: 1px solid transparent !important;
    border-radius: 24px !important;
    box-shadow: none !important;
}

#V-MailMessageList .messageList .second-toolbar:focus-within {
    background: #fff !important;
    border-color: #d7e0ee !important;
    box-shadow: 0 1px 2px rgba(60, 64, 67, .12), 0 2px 8px rgba(60, 64, 67, .10) !important;
}

.messageList .second-toolbar .search-input-wrp {
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

.messageList .second-toolbar .inputSearch {
    box-sizing: border-box !important;
    width: 100% !important;
    height: 44px !important;
    margin: 0 !important;
    padding: 0 34px 0 4px !important;
    color: #202124 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    font-size: 15px !important;
}

.messageList .second-toolbar .inputSearch::placeholder {
    color: #5f6368 !important;
}

.messageList .second-toolbar .checkboxCheckAll {
    flex: 0 0 auto !important;
    margin: 0 2px 0 0 !important;
    color: #5f6368 !important;
    font-size: 18px !important;
    line-height: 44px !important;
}

.messageList .second-toolbar .buttonMoreSearch {
    flex: 0 0 36px !important;
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    color: #5f6368 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 50% !important;
    box-shadow: none !important;
    line-height: 36px !important;
}

.messageList .second-toolbar .buttonMoreSearch:hover {
    background: rgba(60, 64, 67, .08) !important;
}

/* Hesap menüsü üst sağ */
#V-SystemDropDown {
    position: fixed !important;
    z-index: 106 !important;
    top: 8px !important;
    right: 16px !important;
    padding: 0 !important;
}

#V-SystemDropDown > .btn-toolbar {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

#top-system-dropdown-id {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    min-width: 44px !important;
    height: 44px !important;
    padding: 0 12px !important;
    color: #3c4043 !important;
    background: #fff !important;
    border: 1px solid #e2e7ee !important;
    border-radius: 22px !important;
    box-shadow: 0 1px 2px rgba(60, 64, 67, .08) !important;
    text-shadow: none !important;
}

#top-system-dropdown-id:hover,
#top-system-dropdown-id:focus {
    background: #f5f7fa !important;
    border-color: #d5dbe3 !important;
}

#top-system-dropdown-id::after {
    content: "⌄" !important;
    margin-left: 7px !important;
    color: #7a8087 !important;
    font-size: 12px !important;
}

#V-SystemDropDown .accountPlace {
    max-width: 170px !important;
    margin-right: 2px !important;
    color: #3c4043 !important;
    font-size: 13px !important;
}

#V-SystemDropDown .dropdown-menu {
    margin-top: 8px !important;
    border: 1px solid #e1e6ed !important;
    border-radius: 16px !important;
    box-shadow: 0 10px 36px rgba(31, 35, 40, .16) !important;
    overflow: hidden !important;
}

/* =========================================================
   GENEL BUTONLAR VE MENÜLER
   ========================================================= */

.btn {
    color: #3c4043 !important;
    background: #fff !important;
    background-image: none !important;
    border: 1px solid #e1e6ed !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    text-shadow: none !important;
    transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease !important;
}

.btn:hover,
.btn:focus {
    color: #202124 !important;
    background: #f3f6fa !important;
    border-color: #d5dce5 !important;
    box-shadow: 0 1px 2px rgba(31, 35, 40, .08) !important;
}

.btn:active {
    transform: translateY(1px) !important;
}

.btn-success,
.btn-warning {
    color: #fff !important;
    background: var(--epika-blue) !important;
    border-color: var(--epika-blue) !important;
}

.btn-success:hover,
.btn-warning:hover {
    color: #fff !important;
    background: var(--epika-blue-dark) !important;
    border-color: var(--epika-blue-dark) !important;
}

.dropdown-menu {
    padding: 7px !important;
    background: #fff !important;
    border: 1px solid #e1e6ed !important;
    border-radius: 14px !important;
    box-shadow: 0 10px 34px rgba(31, 35, 40, .16) !important;
}

.dropdown-menu li > a {
    box-sizing: border-box !important;
    min-height: 36px !important;
    padding: 8px 12px !important;
    color: #303134 !important;
    border-radius: 9px !important;
    line-height: 20px !important;
}

.dropdown-menu li > a:hover,
.dropdown-menu li > a:focus {
    background: #eef3fb !important;
}

.dropdown-menu * + .dividerbar {
    border-top-color: #e7ebf0 !important;
}

/* =========================================================
   SOL KLASÖR PANELİ
   ========================================================= */

#V-MailFolderList,
#V-MailFolderList .b-content,
.b-folders {
    height: 100% !important;
}

#V-MailFolderList {
    box-sizing: border-box !important;
    overflow: hidden !important;
    background: transparent !important;
    border-radius: 18px !important;
}

.b-folders {
    box-sizing: border-box !important;
    padding: 0 4px 0 0 !important;
}

#rl-left .b-toolbar {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    box-sizing: border-box !important;
    min-height: 64px !important;
    padding: 6px 4px 10px !important;
    color: #3c4043 !important;
}

#rl-left .buttonCompose {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    box-sizing: border-box !important;
    width: auto !important;
    max-width: none !important;
    min-width: 168px !important;
    height: 52px !important;
    max-height: none !important;
    padding: 0 19px !important;
    overflow: visible !important;
    color: #001d35 !important;
    background: var(--epika-compose) !important;
    border: 0 !important;
    border-radius: 16px !important;
    box-shadow: 0 1px 2px rgba(60, 64, 67, .16), 0 1px 3px 1px rgba(60, 64, 67, .08) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-transform: none !important;
}

#rl-left .buttonCompose:hover {
    color: #001d35 !important;
    background: #b3ddf8 !important;
    box-shadow: 0 2px 5px rgba(60, 64, 67, .20) !important;
    transform: none !important;
}

#rl-left .buttonCompose .icon-paper-plane {
    font-size: 18px !important;
}

#rl-left .buttonContacts {
    box-sizing: border-box !important;
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    padding: 0 !important;
    color: #5f6368 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 50% !important;
    line-height: 42px !important;
}

#rl-left .buttonContacts:hover {
    background: #e8eaed !important;
}

.b-folders .b-content {
    box-sizing: border-box !important;
    min-width: 0 !important;
    padding: 4px 8px 8px 0 !important;
    color: #3c4043 !important;
}

.b-folders hr {
    margin: 12px 14px !important;
    border: 0 !important;
    border-top: 1px solid #e2e6ec !important;
}

.b-folders li {
    margin: 1px 0 !important;
}

.b-folders li a {
    box-sizing: border-box !important;
    min-height: 36px !important;
    padding: 0 40px 0 16px !important;
    color: #3c4043 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 18px 18px 0 !important;
    font-size: 14px !important;
    line-height: 36px !important;
    transition: background .12s ease, color .12s ease !important;
}

.b-folders li a.selectable:hover {
    color: #202124 !important;
    background: #e8eaed !important;
}

.b-folders li a.selectable.selected,
.focused .b-folders a.focused {
    color: #041e49 !important;
    background: var(--epika-blue-soft) !important;
    border: 0 !important;
    font-weight: 700 !important;
}

.b-folders li a[data-unread] {
    font-weight: 700 !important;
}

.b-folders .b-folders-system a[data-unread]::after,
.b-folders .b-folders-user a[data-unread]:not(.system)::after {
    right: 10px !important;
    min-width: 22px !important;
    margin-top: 7px !important;
    padding: 1px 5px !important;
    color: #fff !important;
    background: var(--epika-blue) !important;
    border-radius: 999px !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

#V-MailFolderList .search-input-wrp {
    margin: 5px 10px 9px !important;
    width: calc(100% - 20px) !important;
}

#folderSearchInput {
    box-sizing: border-box !important;
    width: 100% !important;
    height: 38px !important;
    padding: 0 34px 0 12px !important;
    background: #fff !important;
    border: 1px solid #dfe5ec !important;
    border-radius: 12px !important;
    box-shadow: none !important;
}

#V-MailFolderList .e-checkbox {
    box-sizing: border-box !important;
    margin: 0 10px 8px !important;
    width: calc(100% - 20px) !important;
    padding: 6px 8px !important;
    color: #5f6368 !important;
    border-radius: 9px !important;
}

#V-MailFolderList .b-footer {
    box-sizing: border-box !important;
    min-height: 54px !important;
    padding: 8px 10px !important;
    border-top: 1px solid rgba(60, 64, 67, .08) !important;
}

#V-MailFolderList .b-footer .btn {
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 50% !important;
    line-height: 36px !important;
}

#V-MailFolderList .b-footer .btn:hover {
    background: #e8eaed !important;
}

/* =========================================================
   MESAJ LİSTESİ
   ========================================================= */

#V-MailMessageList {
    box-sizing: border-box !important;
    min-width: 0 !important;
    height: 100% !important;
}

@media screen and (min-width: 800px) {
    .sm-msgView-side #V-MailMessageList {
        flex: 0 0 auto !important;
        width: auto !important;
    }

    .sm-msgView-side #V-MailMessageList .messageList {
        box-sizing: border-box !important;
        /*
         * EPIKMAIL_PHASE_93A_RESPONSIVE_COLUMNS
         *
         * Compact message-list column:
         *   1368px -> ~340px
         *   1920px -> ~400px
         */
        width: clamp(340px, 21vw, 400px) !important;
        min-width: 340px !important;
        max-width: 400px !important;
        resize: none !important;
        overflow: hidden !important;
    }
}

#V-MailMessageList > .btn-toolbar,
#V-MailMessageView > .top-toolbar {
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    min-height: 50px !important;
    height: 50px !important;
    padding: 4px 4px 8px !important;
    color: #3c4043 !important;
    white-space: nowrap !important;
}

#V-MailMessageList > .btn-toolbar .btn,
#V-MailMessageView > .top-toolbar .btn {
    box-sizing: border-box !important;
    min-width: 38px !important;
    height: 38px !important;
    padding: 0 10px !important;
    color: #5f6368 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 19px !important;
    line-height: 38px !important;
}

#V-MailMessageList > .btn-toolbar .btn:hover,
#V-MailMessageView > .top-toolbar .btn:hover {
    color: #202124 !important;
    background: #e8eaed !important;
    box-shadow: none !important;
}

.messageList {
    box-sizing: border-box !important;
    height: calc(100% - 50px) !important;
    overflow: hidden !important;
    background: #fff !important;
    border: 0 !important;
    border-radius: 18px !important;
    box-shadow: var(--epika-shadow) !important;
}

.messageList .b-content {
    height: 100% !important;
    background: #fff !important;
    overscroll-behavior: contain !important;
}

.messageList .b-content .messageListPlace {
    min-height: 100% !important;
}

.messageList .groupLabel {
    color: #5f6368 !important;
    background: #f8fafd !important;
    border-bottom: 1px solid #eef1f5 !important;
    font-weight: 600 !important;
    letter-spacing: .02em !important;
    opacity: 1 !important;
}

.messageListItem {
    box-sizing: border-box !important;
    min-height: 58px !important;
    color: #202124 !important;
    background: #fff !important;
    border: 0 !important;
    border-bottom: 1px solid #edf0f4 !important;
    border-left: 3px solid transparent !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
    transition: background .12s ease, box-shadow .12s ease !important;
}

.messageListItem:hover {
    background: #f5f8fd !important;
    box-shadow: inset 0 1px 0 #e7ebf0, inset 0 -1px 0 #e7ebf0 !important;
}

.messageListItem.focused {
    background: #eef3fb !important;
    border-left-color: #9bbcf2 !important;
    box-shadow: none !important;
}

.messageListItem.unseen {
    background: #f7faff !important;
    border-left-color: var(--epika-blue) !important;
}

.messageListItem.unseen:hover {
    background: #eef5ff !important;
}

.messageListItem.checked {
    background: #e8f0fe !important;
    border-left-color: #6ea1ef !important;
}

.messageListItem.selected,
.messageListItem.selected.focused {
    z-index: 1 !important;
    background: var(--epika-blue-soft) !important;
    border-left-color: var(--epika-blue) !important;
    box-shadow: none !important;
}

.messageListItem > div + div {
    box-sizing: border-box !important;
    position: relative !important;
    min-width: 0 !important;
    padding: 8px 68px 8px 2px !important;
}

.messageListItem .messageCheckbox {
    box-sizing: border-box !important;
    min-width: 38px !important;
    padding: 18px 5px 0 11px !important;
    color: #7a8087 !important;
    font-size: 16px !important;
}

.messageListItem .senderParent,
.messageListItem .subjectParent {
    min-width: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.sm-msgView-side .messageListItem > div + div,
.rl-mobile .messageListItem > div + div {
    display: flex !important;
    flex-wrap: wrap !important;
    align-content: center !important;
}

.sm-msgView-side .messageListItem .senderParent,
.rl-mobile .messageListItem .senderParent {
    flex: 1 1 calc(100% - 32px) !important;
    width: calc(100% - 32px) !important;
    color: #202124 !important;
    font-size: 13.5px !important;
    line-height: 20px !important;
}

.sm-msgView-side .messageListItem .subjectParent,
.rl-mobile .messageListItem .subjectParent {
    order: 2 !important;
    flex: 1 1 100% !important;
    width: 100% !important;
    color: #5f6368 !important;
    font-size: 12.5px !important;
    font-weight: 400 !important;
    line-height: 19px !important;
}

.messageListItem.unseen .senderParent {
    color: #0b1f33 !important;
    font-weight: 700 !important;
}

.messageListItem.unseen .subjectParent {
    color: #334155 !important;
    font-weight: 600 !important;
}

.messageListItem time {
    position: absolute !important;
    top: 9px !important;
    right: 10px !important;
    min-width: auto !important;
    margin: 0 !important;
    color: #6f7780 !important;
    font-size: 11px !important;
    line-height: 18px !important;
    opacity: 1 !important;
}

.messageListItem .sizeParent {
    display: none !important;
}

.messageListItem .flagParent {
    order: 1 !important;
    flex: 0 0 20px !important;
    min-width: 20px !important;
    margin: 0 6px 0 0 !important;
    color: #8a9098 !important;
    line-height: 20px !important;
}

.messageListItem.msgflag-\\flagged .flagParent::after,
.messageListItem.hasFlaggedSubMessage .flagParent::after {
    color: #f4b400 !important;
}

.messageListItem .attachmentParent {
    position: absolute !important;
    right: 11px !important;
    bottom: 8px !important;
    min-width: 16px !important;
    margin: 0 !important;
    color: #7a8087 !important;
    font-size: 12px !important;
}

.messageListItem .threads-len {
    order: 3 !important;
    height: 18px !important;
    margin-left: 6px !important;
    padding: 0 5px !important;
    color: #5f6368 !important;
    background: #f1f3f4 !important;
    border: 0 !important;
    border-radius: 9px !important;
    font-size: 10px !important;
    line-height: 18px !important;
}

.messageList .b-footer {
    box-sizing: border-box !important;
    min-height: 45px !important;
    padding: 6px 10px !important;
    background: #fff !important;
    border: 0 !important;
    border-top: 1px solid #edf0f4 !important;
    border-radius: 0 0 18px 18px !important;
}

.messageList .b-footer .e-quota {
    color: #6f7780 !important;
    border-bottom-color: #aeb5bd !important;
    font-size: 12px !important;
}

.messageList .listEmptyMessage,
.messageList .listLoading,
.messageList .listError,
.messageList .b-content .listEmptyMessage,
.messageList .b-content .listLoading,
.messageList .b-content .listError {
    color: #6f7780 !important;
    text-shadow: none !important;
}

/* =========================================================
   MESAJ OKUMA PANELİ
   ========================================================= */

#V-MailMessageView {
    box-sizing: border-box !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    height: 100% !important;
    padding: 0 !important;
    overflow: hidden !important;
}

.messageView {
    box-sizing: border-box !important;
    height: calc(100% - 50px) !important;
    overflow: hidden !important;
    background: #fff !important;
    border: 0 !important;
    border-radius: 18px !important;
    box-shadow: var(--epika-shadow) !important;
}

.messageView .b-message-view-desc,
.messageView .b-message-view-checked-helper {
    box-sizing: border-box !important;
    height: 100% !important;
    padding: 27vh 30px 30px !important;
    color: #77808a !important;
    background: #fff !important;
    font-size: 15px !important;
    text-shadow: none !important;
}

.messageView .b-message-view-desc::before {
    content: "✉";
    display: block;
    margin-bottom: 18px;
    color: #b5c4d9;
    font-family: snappymail !important;
    font-size: 54px;
    line-height: 1;
}

.messageView .messageItemHeader {
    box-sizing: border-box !important;
    padding: 18px 22px 12px !important;
    background: #fff !important;
    border-bottom: 1px solid #edf0f4 !important;
}

.messageView .messageItemHeader .subjectParent {
    padding: 0 88px 4px 0 !important;
    min-height: 32px !important;
}

.messageView .messageItemHeader .subject {
    color: #202124 !important;
    font-size: clamp(19px, 1.55vw, 25px) !important;
    font-weight: 500 !important;
    line-height: 1.35 !important;
}

.messageView .messageItemHeader .informationShort,
.messageView .messageItemHeader .informationShort a {
    color: #5f6368 !important;
    font-size: 12.5px !important;
}

.messageView .infoParent,
.messageView .flagParent {
    color: #7a8087 !important;
}

.messageView .flagParent.flagOn {
    color: #f4b400 !important;
}

.messageView .message-fixed-button-toolbar {
    top: 13px !important;
    right: 14px !important;
    padding: 4px !important;
    background: rgba(255, 255, 255, .92) !important;
    border: 1px solid #e6ebf1 !important;
    border-radius: 18px !important;
    box-shadow: 0 2px 8px rgba(31, 35, 40, .08) !important;
    backdrop-filter: blur(8px) !important;
}

.messageView .message-fixed-button-toolbar .btn {
    color: #5f6368 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 50% !important;
    box-shadow: none !important;
}

.messageView .message-fixed-button-toolbar .btn:hover {
    color: #202124 !important;
    background: #eef1f5 !important;
}

#messageItem {
    background: #fff !important;
    overscroll-behavior: contain !important;
}

#messageItem > .messageItemHeader {
    padding-top: 12px !important;
    background: #f8fafd !important;
}

#messageItem .informationFull table {
    background: #fff !important;
    border: 1px solid #e5eaf0 !important;
    border-radius: 12px !important;
}

#messageItem .bodySubHeader {
    background: #f8fafd !important;
}

#messageItem .bodySubHeader > * {
    padding: 10px 18px !important;
    border-bottom-color: #e6ebf1 !important;
}

#messageItem .b-text-part {
    box-sizing: border-box !important;
    padding: 22px 26px 32px !important;
    color: #202124 !important;
    background: #fff !important;
    line-height: 1.6 !important;
}

#messageItem .attachmentsPlace {
    background: #fbfcfe !important;
    border-bottom-color: #e6ebf1 !important;
}

#messageItem .attachmentItem {
    border-radius: 12px !important;
}

/* =========================================================
   YENİ İLETİ PENCERESİ
   ========================================================= */

#V-PopupsCompose {
    position: fixed !important;
    z-index: 1200 !important;

    top: auto !important;
    right: 24px !important;
    bottom: 0 !important;
    left: auto !important;

    box-sizing: border-box !important;

    width: min(760px, calc(100vw - 48px)) !important;
    max-width: min(760px, calc(100vw - 48px)) !important;

    height: min(720px, calc(100vh - 32px)) !important;
    max-height: min(720px, calc(100vh - 32px)) !important;

    margin: 0 !important;
    overflow: hidden !important;
    resize: none !important;

    background: #fff !important;
    border: 1px solid rgba(31, 35, 40, .14) !important;
    border-radius: 16px 16px 0 0 !important;
    box-shadow: 0 18px 60px rgba(31, 35, 40, .30) !important;
}

#V-PopupsCompose.epika-compose-maximized {
    top: 3vh !important;
    right: 2vw !important;
    bottom: auto !important;
    left: 2vw !important;

    width: 96vw !important;
    max-width: 96vw !important;

    height: 94vh !important;
    max-height: 94vh !important;

    border-radius: 16px !important;
}

#V-PopupsCompose.epika-compose-minimized {
    top: auto !important;
    right: 24px !important;
    bottom: 0 !important;
    left: auto !important;

    width: min(420px, calc(100vw - 48px)) !important;
    max-width: min(420px, calc(100vw - 48px)) !important;

    height: 48px !important;
    max-height: 48px !important;

    border-radius: 12px 12px 0 0 !important;
    overflow: hidden !important;
}

#V-PopupsCompose.epika-compose-minimized .modal-body {
    display: none !important;
}

#V-PopupsCompose.epika-compose-minimized > header {
    height: 48px !important;
    min-height: 48px !important;
    cursor: pointer !important;
}

#V-PopupsCompose header .epika-compose-maximize {
    border-color: #eee;
    float: none;
    font-size: 171%;
    opacity: 1;
    line-height: 28px;
    margin-left: .7em;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

#V-PopupsCompose header {
    box-sizing: border-box !important;
    min-height: 48px !important;
    padding: 8px 12px !important;
    color: #fff !important;
    background: #25334a !important;
    border-radius: 15px 15px 0 0 !important;
}

#V-PopupsCompose header .btn {
    color: #fff !important;
    background: rgba(255, 255, 255, .08) !important;
    border-color: rgba(255, 255, 255, .12) !important;
}

#V-PopupsCompose header .btn:hover {
    background: rgba(255, 255, 255, .16) !important;
}

#V-PopupsCompose header .close,
#V-PopupsCompose header .minimize-custom {
    color: #fff !important;
    border: 0 !important;
}

#V-PopupsCompose .modal-body {
    background: #fff !important;
    height: calc(100% - 48px) !important;
    max-height: calc(100% - 48px) !important;
    overflow: hidden !important;
}

#V-PopupsCompose .b-compose {
    height: 100% !important;
}

#V-PopupsCompose .b-compose-content {
    height: 100% !important;
}

#V-PopupsCompose .b-editor {
    min-height: 320px !important;
    height: calc(100% - 190px) !important;
}

#V-PopupsCompose .b-editor-area,
#V-PopupsCompose .html-editor,
#V-PopupsCompose .plain-editor,
#V-PopupsCompose iframe {
    min-height: 300px !important;
    height: 100% !important;
}

#V-PopupsCompose .b-header {
    padding: 8px 14px 6px !important;
    background: #fff !important;
    border-bottom: 1px solid #e7ebf0 !important;
}

#V-PopupsCompose .b-header td {
    padding: 4px 0 !important;
}

#V-PopupsCompose .b-header td:first-child {
    padding-right: 12px !important;
    color: #6b7280 !important;
    font-size: 12px !important;
}

#V-PopupsCompose .b-header input[type="text"],
#V-PopupsCompose .emailaddresses,
#V-PopupsCompose .emailaddresses input[type="text"] {
    box-sizing: border-box !important;
    min-height: 36px !important;
    color: #202124 !important;
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid #e5e9ee !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

#V-PopupsCompose .tabs > label {
    color: #5f6368 !important;
    background: #f8fafd !important;
    border-radius: 10px 10px 0 0 !important;
}

#V-PopupsCompose .tabs > [id^="tab"]:checked + label {
    color: var(--epika-blue) !important;
    background: #fff !important;
    border-color: #dfe5ec #dfe5ec transparent !important;
}

/* =========================================================
   DİĞER DİYALOGLAR VE AYARLAR
   ========================================================= */

dialog:not(#V-PopupsCompose) {
    border-radius: 18px !important;
    box-shadow: 0 18px 60px rgba(31, 35, 40, .24) !important;
}

dialog:not(#V-PopupsCompose) > header {
    background: #fff !important;
    border-bottom: 1px solid #e7ebf0 !important;
}

dialog:not(#V-PopupsCompose) > footer {
    background: #fbfcfe !important;
    border-top-color: #e7ebf0 !important;
}

#V-SettingsPane {
    background: #fff !important;
    border-radius: 18px !important;
    box-shadow: var(--epika-shadow) !important;
}

#V-SettingsMenu nav a {
    border-radius: 0 18px 18px 0 !important;
}

#V-SettingsMenu nav a.selected {
    color: #041e49 !important;
    background: var(--epika-blue-soft) !important;
}

/* =========================================================
   GİRİŞ EKRANI
   ========================================================= */

body:has(#V-Login) {
    overflow: auto !important;
    background:
        radial-gradient(circle at 18% 12%, rgba(11, 87, 208, .14), transparent 33%),
        radial-gradient(circle at 84% 88%, rgba(83, 146, 255, .12), transparent 34%),
        linear-gradient(135deg, #f8fbff 0%, #eef4ff 48%, #f8fafc 100%) !important;
}

#V-Login.LoginView {
    box-sizing: border-box !important;
    width: min(440px, calc(100vw - 32px)) !important;
    max-width: 440px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
}

#V-Login .descWrapper {
    position: relative !important;
    min-height: 102px !important;
    margin: 0 0 20px !important;
    color: transparent !important;
    font-size: 0 !important;
    text-shadow: none !important;
}

#V-Login .descWrapper::before {
    content: "" !important;
    display: block !important;
    width: 245px !important;
    height: 72px !important;
    margin: 0 auto 8px !important;
    background: url("/branding/epika-logo.png") center / contain no-repeat !important;
}

#V-Login .descWrapper::after {
    content: "Kurumsal e-posta hesabınıza güvenle giriş yapın" !important;
    display: block !important;
    color: #64748b !important;
    font: 500 14px/1.5 var(--fontSans) !important;
    text-align: center !important;
}

#V-Login form {
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 34px 34px 28px !important;
    color: #334155 !important;
    background: rgba(255, 255, 255, .97) !important;
    border: 1px solid rgba(226, 232, 240, .98) !important;
    border-radius: 24px !important;
    box-shadow: 0 28px 80px rgba(15, 23, 42, .15), 0 2px 10px rgba(15, 23, 42, .05) !important;
    backdrop-filter: blur(16px) !important;
}

#V-Login form * {
    color: inherit !important;
}

#V-Login .controls {
    position: relative !important;
    margin-bottom: 16px !important;
}

#V-Login .controls > .fontastic:first-child {
    position: absolute !important;
    z-index: 2 !important;
    top: 50% !important;
    left: 16px !important;
    transform: translateY(-50%) !important;
    color: #64748b !important;
    font-size: 17px !important;
    line-height: 1 !important;
    pointer-events: none !important;
}

#V-Login input.input-block-level {
    box-sizing: border-box !important;
    width: 100% !important;
    height: 52px !important;
    padding: 0 16px 0 48px !important;
    color: #0f172a !important;
    background: #fff !important;
    border: 1px solid #dbe3ef !important;
    border-radius: 14px !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .03) !important;
    font-size: 15px !important;
    outline: 0 !important;
}

#V-Login input.input-block-level:focus {
    border-color: var(--epika-blue) !important;
    box-shadow: 0 0 0 4px rgba(11, 87, 208, .12) !important;
}

#V-Login input::placeholder {
    color: #94a3b8 !important;
}

#V-Login .controls[style*="display: flex"] {
    align-items: center !important;
    justify-content: space-between !important;
    margin: 2px 0 20px !important;
    color: #64748b !important;
}

#V-Login .e-checkbox {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 !important;
    font-size: 13px !important;
}

#V-Login .language-button {
    color: #64748b !important;
    text-decoration: none !important;
}

#V-Login .buttonLogin {
    box-sizing: border-box !important;
    width: 100% !important;
    min-height: 50px !important;
    color: #fff !important;
    background: linear-gradient(135deg, var(--epika-blue), var(--epika-blue-dark)) !important;
    border: 0 !important;
    border-radius: 14px !important;
    box-shadow: 0 12px 26px rgba(11, 87, 208, .24) !important;
    font-weight: 700 !important;
    letter-spacing: .2px !important;
}

#V-Login .buttonLogin:hover {
    color: #fff !important;
    background: linear-gradient(135deg, #0a4fbe, #073b91) !important;
    box-shadow: 0 16px 32px rgba(11, 87, 208, .30) !important;
    transform: translateY(-1px) !important;
}

#V-Login .alert {
    box-sizing: border-box !important;
    margin-bottom: 18px !important;
    color: #b91c1c !important;
    background: #fff1f2 !important;
    border: 1px solid #fecaca !important;
    border-radius: 14px !important;
}

/* =========================================================
   DUYARLI GÖRÜNÜM
   ========================================================= */

@media screen and (max-width: 1099px) and (min-width: 800px) {
    #rl-content:not([hidden])::after {
        width: 156px !important;
    }

    #V-MailMessageList .messageList .second-toolbar {
        left: 215px !important;
        right: 190px !important;
        width: auto !important;
        transform: none !important;
    }

    #V-SystemDropDown .accountPlace {
        display: none !important;
    }

    #top-system-dropdown-id {
        width: 44px !important;
        padding: 0 !important;
    }

    #top-system-dropdown-id::after {
        display: none !important;
    }

    #rl-left {
        flex-basis: 218px !important;
        width: 218px !important;
        min-width: 218px !important;
        max-width: 218px !important;
    }

    #rl-left .buttonCompose {
        min-width: 146px !important;
    }
}

@media screen and (max-width: 799px) {
    body#rl-app {
        overflow: hidden !important;
    }

    #rl-content:not([hidden]) {
        gap: 0 !important;
        padding: 66px 8px 8px !important;
    }

    #rl-content:not([hidden])::before {
        height: 58px !important;
    }

    #rl-content:not([hidden])::after {
        top: 8px !important;
        left: 54px !important;
        width: 125px !important;
        height: 40px !important;
    }

    #V-MailMessageList .messageList .second-toolbar {
        top: 7px !important;
        left: 188px !important;
        right: 62px !important;
        width: auto !important;
        height: 44px !important;
        min-height: 44px !important;
        transform: none !important;
        padding-left: 10px !important;
    }

    .messageList .second-toolbar .checkboxCheckAll,
    .messageList .second-toolbar .buttonMoreSearch {
        display: none !important;
    }

    #V-SystemDropDown {
        top: 7px !important;
        right: 8px !important;
    }

    #top-system-dropdown-id {
        width: 44px !important;
        min-width: 44px !important;
        height: 44px !important;
        padding: 0 !important;
    }

    #top-system-dropdown-id .accountPlace,
    #top-system-dropdown-id::after {
        display: none !important;
    }

    #rl-left {
        z-index: 300 !important;
        top: 58px !important;
        bottom: 0 !important;
        box-sizing: border-box !important;
        width: min(84vw, 320px) !important;
        min-width: min(84vw, 320px) !important;
        max-width: min(84vw, 320px) !important;
        padding: 8px !important;
        background: #f6f8fc !important;
        border-right: 1px solid #e1e6ed !important;
        box-shadow: 8px 0 28px rgba(31, 35, 40, .16) !important;
    }

    #rl-left .buttonCompose {
        min-width: 190px !important;
    }

    #rl-right:not([hidden]) {
        width: 100% !important;
        gap: 0 !important;
    }

    #V-MailMessageList,
    #V-MailMessageView {
        width: 100% !important;
    }

    #V-MailMessageList > .btn-toolbar,
    #V-MailMessageView > .top-toolbar {
        height: 46px !important;
        min-height: 46px !important;
    }

    .messageList,
    .messageView {
        height: calc(100% - 46px) !important;
        border-radius: 14px !important;
    }

    #V-PopupsCompose {
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        height: 100vh !important;
        max-height: 100vh !important;
        resize: none !important;
        border: 0 !important;
        border-radius: 0 !important;
    }

    #V-PopupsCompose header {
        border-radius: 0 !important;
    }

    #V-Login.LoginView {
        width: min(420px, calc(100vw - 24px)) !important;
    }

    #V-Login form {
        padding: 28px 22px 24px !important;
        border-radius: 20px !important;
    }
}

@media print {
    #rl-content:not([hidden])::before,
    #rl-content:not([hidden])::after {
        display: none !important;
    }
}

/* =========================================================
   EPIKMAIL COMPOSE - GMAIL STYLE STATES
   ========================================================= */

#V-PopupsCompose .epika-compose-title {
    display: none;
}

#V-PopupsCompose.epika-compose-minimized .epika-compose-title {
    display: inline-block;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
    line-height: 30px;
    color: #fff;
}

#V-PopupsCompose.epika-compose-minimized > header > .btn,
#V-PopupsCompose.epika-compose-minimized > header > .saved-text {
    display: none !important;
}

#V-PopupsCompose.epika-compose-minimized > header .pull-right > .hide-mobile,
#V-PopupsCompose.epika-compose-minimized > header .pull-right > .dropdown,
#V-PopupsCompose.epika-compose-minimized > header .pull-right > .fontastic:not(.close) {
    display: none !important;
}

/*
 * Compose becomes non-modal through epika-compose.js.
 * Keep this transparent as a fallback during the modal -> non-modal handoff.
 */
#V-PopupsCompose::backdrop {
    background: transparent !important;
}

/* =========================================================
   EPIKMAIL COMPOSE - MINIMIZE ICON FIX
   ========================================================= */

#V-PopupsCompose header .minimize-custom {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 28px !important;
    height: 28px !important;

    margin-left: .7em !important;

    color: #fff !important;
    border: 0 !important;
    cursor: pointer !important;
    text-decoration: none !important;
}

#V-PopupsCompose header .minimize-custom::before {
    content: "—";
    display: block;
    font-size: 20px;
    font-weight: 400;
    line-height: 1;
    color: #fff;
}


/* =========================================================
   EPIKMAIL_PHASE_93A_RESPONSIVE_COLUMNS
   DESKTOP GEOMETRY SAFETY

   Layout priority:
     folders
     message list
     reading pane (flexible / primary growth area)
     sponsor rail

   Reading pane receives the remaining desktop width.
   ========================================================= */

@media screen and (min-width: 1280px) {

    #rl-left {
        flex: 0 0 248px !important;
        width: 248px !important;
        min-width: 248px !important;
        max-width: 248px !important;
    }


    #rl-right:not([hidden]) {
        display: flex !important;

        flex: 1 1 auto !important;

        min-width: 0 !important;

        gap: 12px !important;

        overflow: hidden !important;
    }


    html.sm-msgView-side
        #rl-right
        > #V-MailMessageList {

        flex: 0 0 auto !important;

        min-width: 0 !important;

        overflow: hidden !important;
    }


    html.sm-msgView-side
        #rl-right
        > #V-MailMessageView {

        flex: 1 1 0 !important;

        width: auto !important;
        min-width: 0 !important;

        overflow: hidden !important;
    }


    html.sm-msgView-side
        #V-MailMessageList
        > .messageList {

        width: clamp(340px, 21vw, 400px) !important;

        min-width: 340px !important;
        max-width: 400px !important;
    }
}


/*
 * Between tablet and the full four-column desktop layout,
 * keep the existing no-ad behaviour.
 */
@media screen and (min-width: 800px) and (max-width: 1279px) {

    .sm-msgView-side
        #V-MailMessageList
        .messageList {

        width: clamp(330px, 34vw, 360px) !important;

        min-width: 330px !important;
        max-width: 360px !important;
    }
}



/* =========================================================
   EPIKMAIL_PHASE_93A1_COMPACT_COLUMNS

   Final desktop geometry refinement.

   Give more horizontal space to the reading pane by reducing
   the fixed folder column and the message-list column.

   Desktop targets:
     folders      220px
     message list 320px -> 380px responsive
     reader       receives remaining width
     sponsor      Phase 93A sizing remains unchanged
   ========================================================= */

@media screen and (min-width: 1280px) {

    /*
     * LEFT / FOLDER COLUMN
     */
    #rl-left {
        flex: 0 0 220px !important;

        width: 220px !important;
        min-width: 220px !important;
        max-width: 220px !important;
    }


    /*
     * MAIN RIGHT AREA
     *
     * Slightly reduce the space between:
     * list / reader / sponsor.
     */
    #rl-right:not([hidden]) {
        gap: 10px !important;
    }


    /*
     * MESSAGE LIST
     *
     * 1368px:
     *   23.4vw ~= 320px
     *
     * 1920px:
     *   capped at 380px
     */
    html.sm-msgView-side
        #V-MailMessageList
        > .messageList {

        width: clamp(
            320px,
            23.4vw,
            380px
        ) !important;

        min-width: 320px !important;
        max-width: 380px !important;
    }


    /*
     * Keep the outer message-list flex item bound to its
     * compact inner list instead of allowing it to consume
     * reader space.
     */
    html.sm-msgView-side
        #rl-right
        > #V-MailMessageList {

        flex: 0 0 auto !important;

        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
    }


    /*
     * Reading pane is the preferred growth area.
     */
    html.sm-msgView-side
        #rl-right
        > #V-MailMessageView {

        flex: 1 1 0 !important;

        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
    }
}


/*
 * Preserve a slightly larger folder column below full desktop,
 * where the four-column layout is not active.
 */
@media screen and (min-width: 800px) and (max-width: 1279px) {

    #rl-left {
        flex-basis: 220px !important;

        width: 220px !important;
        min-width: 220px !important;
        max-width: 220px !important;
    }
}