/* Gossip Magazin — Elastic marka katmanı */
:root {
  --gm: #BC23AF;
  --gm-dark: #7E1475;
  --gm-soft: rgba(188, 35, 175, .12);
  --gm-ring: rgba(188, 35, 175, .28);
}

/* ---------- Yazı tipi ---------- */
body, input, select, textarea, button, .btn, .popover, .ui-dialog, .ui-widget,
.listing, .records-table, .formcontent, .header-title, .menu a span.inner {
  font-family: 'Sora', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
}

/* ---------- Linkler ---------- */
a, a:hover, .link, a.link, .btn-link, .formcontent a { color: var(--gm); }
html.dark-mode a, html.dark-mode .btn-link { color: #e56fda; }

/* ---------- Butonlar ---------- */
.btn-primary, .btn.btn-primary, .button.mainaction, button.mainaction, input.mainaction,
.btn.mainaction, .ui-dialog .ui-dialog-buttonset .btn-primary, .formbuttons .btn-primary,
.floating-action-buttons a {
  background-color: var(--gm) !important;
  border-color: var(--gm) !important;
  color: #fff !important;
}
.btn-primary:hover, .btn.btn-primary:hover, .button.mainaction:hover, button.mainaction:hover,
.btn-primary:focus, .btn-primary:not(:disabled):not(.disabled):active {
  background-color: var(--gm-dark) !important;
  border-color: var(--gm-dark) !important;
}
.btn-secondary:focus, .btn:focus, .btn-primary:focus { box-shadow: 0 0 0 .2rem var(--gm-ring) !important; }

/* ---------- Odak halkaları ---------- */
.form-control:focus, input:focus, select:focus, textarea:focus, .custom-select:focus,
.input-group:focus-within, .searchbar input:focus, .recipient-input.focus {
  border-color: var(--gm) !important;
  box-shadow: 0 0 0 .2rem var(--gm-ring) !important;
  outline: 0 !important;
}

/* ---------- Anahtarlar / onay kutuları ---------- */
.custom-switch .custom-control-input:checked ~ .custom-control-label::before,
input.form-check-input:checked, .custom-control-input:checked ~ .custom-control-label::before {
  background-color: var(--gm) !important;
  border-color: var(--gm) !important;
}
input[type=checkbox].custom-switch:checked { background-color: var(--gm) !important; border-color: var(--gm) !important; }

/* ---------- Sol ana menü ---------- */
#layout-menu {
  background: linear-gradient(180deg, var(--gm) 0%, var(--gm-dark) 100%) !important;
}
#layout-menu .menu a, #layout-menu .menu a:before, #layout-menu .special-buttons a,
#layout-menu .special-buttons a:before {
  color: rgba(255, 255, 255, .85) !important;
}
#layout-menu .menu a:hover, #layout-menu .menu a:focus,
#layout-menu .special-buttons a:hover {
  background-color: rgba(255, 255, 255, .12) !important;
  color: #fff !important;
}
#layout-menu .menu a.selected, #layout-menu .menu a.selected:before {
  background-color: rgba(255, 255, 255, .2) !important;
  color: #fff !important;
}
#layout-menu .compose, #layout-menu a.compose:before { color: #fff !important; }
#layout-menu .popover-header { background: var(--gm-dark) !important; }
#layout-menu #logo { max-height: 3rem; margin: .5rem auto; }
@media screen and (max-width: 768px) {
  #layout-menu #logo { max-width: 75%; height: auto; max-height: 2.2rem; }
}
/* Roundcube "Hakkında" bağlantısını gizle */
#layout-menu a.about, .menu a.about, a[href*="_action=about"], #settings-menu li.about { display: none !important; }

/* ---------- Liste seçimleri ---------- */
.listing li.selected, .listing li.selected > a,
table.records-table tr.selected td, table.records-table tr.selected > td,
.listing li.selected > div, ul.treelist li.selected > a {
  background-color: var(--gm-soft) !important;
  color: inherit;
}
table.records-table tr.focused > td:first-child, .listing li.focused > a,
table.records-table tr.selected > td:first-child {
  box-shadow: inset 3px 0 0 var(--gm);
}
.listing li.selected > a, ul.treelist li.selected > a,
#folderlist-content li.selected > a, #folderlist-content li.selected > a:before { color: var(--gm) !important; }
html.dark-mode .listing li.selected > a, html.dark-mode #folderlist-content li.selected > a { color: #f08ae6 !important; }
.unreadcount, .listing li .unreadcount, span.badge-primary, .badge-primary {
  background-color: var(--gm) !important;
  color: #fff !important;
}
table.messagelist tr.unread td.subject span.subject a { color: inherit; }
table.messagelist tr.flagged td, table.messagelist tr.flagged td a { color: var(--gm-dark); }
.header .header-title, .header-title { font-weight: 600; letter-spacing: -.01em; }

/* Yükleme çubuğu / ilerleme */
.progress-bar { background-color: var(--gm) !important; }
.nav-link.active, .tabsbar a.selected, .nav-tabs .nav-link.active { color: var(--gm) !important; border-bottom-color: var(--gm) !important; }

/* =================================================================
   GİRİŞ EKRANI
   ================================================================= */
body.task-login {
  background: radial-gradient(ellipse at top left, rgba(255, 255, 255, .14), transparent 55%),
              linear-gradient(135deg, var(--gm) 0%, var(--gm-dark) 100%) fixed !important;
  min-height: 100vh;
}
body.task-login #layout, body.task-login #layout-content,
html.dark-mode body.task-login #layout-content {
  background: transparent !important;
  border: 0 !important;
}
body.task-login #layout-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 2rem 1rem;
}
body.task-login #logo {
  width: 300px;
  max-width: 78vw;
  height: auto;
  max-height: none;
  margin: 0 auto 2rem;
  filter: drop-shadow(0 6px 18px rgba(40, 0, 40, .25));
}
body.task-login #login-form {
  background: #fff;
  color: #2b1029;
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  padding: 2.25rem 2rem 1.75rem;
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(45, 0, 45, .35), 0 2px 6px rgba(45, 0, 45, .15);
}
body.task-login #login-form::before {
  content: "Webmail'e giriş";
  display: block;
  font-weight: 600;
  font-size: 1.25rem;
  letter-spacing: -.01em;
  margin-bottom: 1.25rem;
  text-align: center;
  color: #2b1029;
}
body.task-login #login-form table, body.task-login #login-form tbody { display: block; width: 100%; }
body.task-login #login-form tr.form-group { display: block; margin: 0 0 .85rem; width: 100%; }
body.task-login #login-form td.title { display: none !important; }
body.task-login #login-form td.input-group {
  display: flex !important;
  flex-wrap: nowrap;
  align-items: stretch;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none !important;
}
body.task-login #login-form .input-group-prepend { display: flex; }
body.task-login #login-form .input-group-text {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  background: #faf2f9 !important;
  border: 1px solid #e7d4e5 !important;
  border-right: 0 !important;
  border-radius: 10px 0 0 10px !important;
  color: var(--gm) !important;
}
body.task-login #login-form input.form-control {
  flex: 1 1 auto;
  width: 1%;
  height: 3rem;
  margin: 0;
  border: 1px solid #e7d4e5 !important;
  border-radius: 0 10px 10px 0 !important;
  background: #fff !important;
  color: #2b1029 !important;
  font-size: .95rem;
}
body.task-login #login-form input.form-control::placeholder { color: #9c8a9a; }
body.task-login #login-form td.input-group:focus-within .input-group-text,
body.task-login #login-form td.input-group:focus-within input.form-control { border-color: var(--gm) !important; }
body.task-login #login-form td.input-group:focus-within { box-shadow: 0 0 0 .2rem var(--gm-ring) !important; border-radius: 10px; }
body.task-login #login-form input.form-control:focus { box-shadow: none !important; }
body.task-login #login-form .formbuttons { margin: 1.25rem 0 0; }
body.task-login #login-form #rcmloginsubmit { text-transform: none !important; }
body.task-login #login-form button.mainaction, body.task-login #login-form #rcmloginsubmit {
  width: 100%;
  height: 3rem;
  border-radius: 10px;
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: .01em;
  background: linear-gradient(135deg, var(--gm) 0%, var(--gm-dark) 100%) !important;
  border: 0 !important;
  box-shadow: 0 8px 20px rgba(188, 35, 175, .35);
  transition: transform .15s ease, box-shadow .15s ease;
}
body.task-login #login-form button.mainaction:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(188, 35, 175, .45);
}
body.task-login #login-footer,
body.task-login #login-footer * { display: none !important; }
body.task-login #layout-content > #logo,
body.task-login #layout-content > #login-form {
  position: static !important;
  flex: 0 0 auto !important;
  top: auto !important;
  transform: none !important;
}
body.task-login #layout-content > #logo { margin: 0 auto 2rem !important; padding: 0 !important; }
body.task-login #layout-content > #login-form { margin: 0 auto !important; }
body.task-login::after {
  content: "© Gossip Magazin";
  position: fixed;
  left: 0;
  right: 0;
  bottom: 1.1rem;
  text-align: center;
  color: rgba(255, 255, 255, .7);
  font-size: .78rem;
  letter-spacing: .04em;
  pointer-events: none;
}
body.task-login #message .alert, body.task-login .messagestack .alert { border-radius: 10px; }

/* Giriş ekranı karanlık modda da beyaz kart olarak kalır (marka görünümü) */
html.dark-mode body.task-login #login-form { background: #fff !important; color: #2b1029 !important; }
html.dark-mode body.task-login #login-form::before { color: #2b1029; }

@media screen and (max-width: 480px) {
  body.task-login #login-form { padding: 1.75rem 1.25rem 1.25rem; border-radius: 16px; }
  body.task-login #logo { width: 240px; margin-bottom: 1.5rem; }
}