/* ══════════════════════════════════════════════════════════════════════
   aser.tr — Roundcube derisi (elastic mirası)
   Tek parça, sıralı, çelişkisiz. Yama üstüne yama yok.
   Tasarım dili: Apple HIG — gri-mavi masaüstü, yüzen pencere, saç teli
   ayraçlar, #0a84ff aksan, -apple-system 13px.
   ══════════════════════════════════════════════════════════════════════ */
@import url("../../elastic/styles/styles.min.css");

:root{
  --a-aksan:#0a84ff; --a-aksan-yumusak:rgba(10,132,255,.10);
  --a-zemin-1:#eef0f5; --a-zemin-2:#dfe4ee;
  --a-pencere:#f5f5f7; --a-kagit:#fff; --a-yan:rgba(255,255,255,.5);
  --a-metin:#1d1d1f; --a-metin-2:#6e6e73; --a-metin-3:#8e8e93;
  --a-kenar:rgba(0,0,0,.08);
  --a-font:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Inter,system-ui,sans-serif;
  --a-ray:80px; --a-yan-g:238px; --a-liste:302px; --a-baslik:52px;
}

/* ── 1. Tipografi ──────────────────────────────────────────────────── */
html,body,input,select,textarea,button,a,.listing,.listing td,
.toolbar,.header,.menu,#messagelist,#mailboxlist,.propform,.formcontent{
  font-family:var(--a-font) !important;
}
body{font-size:13px !important;color:var(--a-metin) !important;-webkit-font-smoothing:antialiased}
h1,h2,h3,.header-title{letter-spacing:-.015em;font-weight:600 !important}

/* ── 5. Kenar çubuğu (klasörler) + marka ───────────────────────────── */
#layout-sidebar{
  background:rgba(255,255,255,.45) !important;
  backdrop-filter:saturate(180%) blur(20px);
  border-right:1px solid var(--a-kenar) !important;
}
#layout-sidebar>.header::before{
  content:"";flex:0 0 auto;width:19px;height:19px;margin:0 8px 0 2px;
  background:no-repeat center/contain
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'><path d='M24 4 L42 44 L24 34 L6 44 Z' fill='none' stroke='%230a84ff' stroke-width='6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}
#mailboxlist li{border:0 !important;background:transparent !important}
#mailboxlist li.mailbox>a{
  display:flex !important; align-items:center !important;
  border:0 !important; border-radius:7px; margin:1px 7px; padding:7px 10px !important;
  color:var(--a-metin) !important; font-size:13px;
}
#mailboxlist li.mailbox>a::before{
  font-family:inherit !important; content:"" !important;
  font-size:0 !important; line-height:0 !important;
  width:8px !important; min-width:8px !important; max-width:8px !important; height:8px !important;
  border-radius:50% !important; margin:0 11px 0 0 !important; padding:0 !important;
  display:inline-block !important; vertical-align:middle !important;
  background:#c7c7cc !important; opacity:1 !important;
}
#mailboxlist li.mailbox.inbox>a::before   {background:#0a84ff !important}
#mailboxlist li.mailbox.drafts>a::before  {background:#f5a623 !important}
#mailboxlist li.mailbox.sent>a::before    {background:#8e6ee6 !important}
#mailboxlist li.mailbox.junk>a::before    {background:#ff9f0a !important}
#mailboxlist li.mailbox.trash>a::before   {background:#ff5f57 !important}
#mailboxlist li.mailbox.archive>a::before {background:#28c840 !important}
#mailboxlist li.mailbox.selected>a::before{background:#fff !important}
#mailboxlist li.mailbox>a:hover{background:rgba(0,0,0,.045) !important}
#mailboxlist li.mailbox.selected>a{background:var(--a-aksan) !important;color:#fff !important}
#mailboxlist li.mailbox>a .unreadcount{
  margin-left:auto;background:rgba(0,0,0,.07) !important;color:var(--a-metin-2) !important;
  border-radius:20px;font-size:11px;font-weight:500;padding:1px 7px;
}
#mailboxlist li.mailbox.selected>a .unreadcount{background:rgba(255,255,255,.26) !important;color:#fff !important}

/* ── 6. İleti listesi ──────────────────────────────────────────────── */
#layout-list{
  background:rgba(255,255,255,.62) !important;
  border-right:1px solid var(--a-kenar) !important;
}
#messagelist tr{border-bottom:1px solid var(--a-kenar) !important;background:transparent !important}
#messagelist td{border:0 !important;padding:10px 14px !important}
#messagelist tr:hover td{background:rgba(0,0,0,.025) !important}
#messagelist tr.selected td{background:#fff !important;box-shadow:inset 3px 0 0 var(--a-aksan)}
#messagelist tr.selected td,#messagelist tr.selected td *{color:var(--a-metin) !important}
#messagelist .subject .fromto{font-weight:600;font-size:13px}
#messagelist .subject .date{color:var(--a-metin-3) !important;font-size:11.5px;font-weight:400}
#messagelist .subject .subject{font-size:12.5px}
#messagelist tr.unread .subject .subject{font-weight:600}

/* ── 7. Okuma bölmesi ──────────────────────────────────────────────── */
#layout-content{background:var(--a-kagit) !important}
#messagecontframe{visibility:visible !important;opacity:1 !important;background:var(--a-kagit) !important}
#messageheader{border-bottom:1px solid var(--a-kenar) !important;padding:16px 20px !important}
#messageheader .subject{font-size:16px !important;font-weight:600 !important;letter-spacing:-.015em}
.message-part,.message-htmlpart{font-size:13.5px;line-height:1.6;color:#2b2b2f}
.message-part pre{font-family:var(--a-font) !important;white-space:pre-wrap;font-size:13.5px}

/* ── 8. Düğme, menü, alan ──────────────────────────────────────────── */
a.button.mainaction,button.mainaction,.btn-primary,input.button.mainaction{
  background:var(--a-aksan) !important;border-color:transparent !important;color:#fff !important;
  border-radius:8px !important;font-weight:500;
}
.popupmenu,.dropdown-menu,.ui-dialog{
  border-radius:10px !important;border:1px solid var(--a-kenar) !important;
  box-shadow:0 14px 38px rgba(0,0,0,.15),0 1px 3px rgba(0,0,0,.06) !important;
}
input,select,textarea{border-radius:8px !important}
input:focus,select:focus,textarea:focus{
  border-color:var(--a-aksan) !important;box-shadow:0 0 0 3px var(--a-aksan-yumusak) !important;
}
.searchbar{background:rgba(0,0,0,.045) !important;border:0 !important;border-radius:8px !important}

/* ── 9. Giriş ekranı ───────────────────────────────────────────────── */
body.task-login{padding:0 !important;display:grid;place-items:center;overflow:auto}
body.task-login #layout{height:auto !important;max-width:none;background:transparent !important;
  box-shadow:none !important}
body.task-login #layout::before{display:none}
body.task-login #login-form,body.task-login #login-form .box-inner{
  background:var(--a-kagit) !important;border:1px solid var(--a-kenar) !important;
  border-radius:12px !important;
  box-shadow:0 24px 60px rgba(0,0,0,.16),0 2px 6px rgba(0,0,0,.06) !important;
}
body.task-login img.logo{display:block !important;height:40px !important;width:auto !important;
  max-width:190px !important;margin:0 auto 22px !important}



/* Rayın altındaki koyu blok — sınıfı .special-buttons (tarayıcıdan tespit) */
#layout-menu .special-buttons,#taskmenu .special-buttons,
#layout-menu .popover-header,#layout-menu .footer,#taskmenu .footer{
  background:transparent !important;border:0 !important;box-shadow:none !important;
}
#taskmenu .special-buttons{
  display:flex !important;flex-direction:column !important;gap:2px !important;
  width:100% !important;margin-top:auto !important;
}


/* ══════════════════════════════════════════════════════════════════════
   MASAÜSTÜ YERLEŞİMİ — yalnızca geniş ekranda.
   Elastic'in mobil yerleşimi kendi mantığıyla çalışır; yapısal kurallarımız
   oraya sızarsa (hepsi !important olduğu için) yerleşimi bozuyor. Bu yüzden
   pencere çerçevesi, ray ve sabit genişlikler bu blokla sınırlı.
   ══════════════════════════════════════════════════════════════════════ */
@media (min-width:1201px){
/* ── 2. Masaüstü ve yüzen pencere ──────────────────────────────────── */
html,body{height:100%;overflow:hidden}
body{
  background:linear-gradient(160deg,var(--a-zemin-1) 0%,var(--a-zemin-2) 100%) !important;
  padding:22px !important;
}
#layout{
  position:relative !important;
  height:calc(100vh - 44px) !important; max-width:1360px; margin:0 auto !important;
  background:var(--a-pencere) !important; border:0 !important;
  border-radius:12px !important; overflow:hidden !important;
  box-shadow:0 30px 70px rgba(0,0,0,.18),0 3px 8px rgba(0,0,0,.06) !important;
}
/* Trafik ışıkları */
#layout::before{
  content:"";position:absolute;z-index:30;left:19px;top:19px;width:52px;height:12px;
  pointer-events:none;
  background:
    radial-gradient(circle 6px at 6px 6px,#ff5f57 98%,transparent 100%),
    radial-gradient(circle 6px at 26px 6px,#febc2e 98%,transparent 100%),
    radial-gradient(circle 6px at 46px 6px,#28c840 98%,transparent 100%);
}

/* ── 3. Sol görev rayı ─────────────────────────────────────────────── */
#layout-menu{
  width:var(--a-ray) !important; min-width:var(--a-ray) !important;
  max-width:var(--a-ray) !important; flex:0 0 var(--a-ray) !important;
  display:flex !important; flex-direction:column !important;
  padding:0 6px 12px !important; overflow:hidden !important;
  background:var(--a-yan) !important;
  border-right:1px solid var(--a-kenar) !important;
  backdrop-filter:saturate(180%) blur(20px);
}
#layout-menu .popover-header{display:none !important}   /* logo yan panelde */
#taskmenu{
  width:100% !important; min-width:0 !important; flex:1 1 auto !important;
  display:flex !important; flex-direction:column !important; gap:2px !important;
  padding:0 !important; margin:0 !important; overflow:visible !important;
  background:transparent !important; border:0 !important;
}
/* Trafik ışıklarına fiziksel yer — padding güvenilir değil */
#taskmenu::before{content:"" !important;display:block !important;
  flex:0 0 44px !important;height:44px !important;pointer-events:none}
#taskmenu a{
  width:100% !important; max-width:100% !important; box-sizing:border-box !important;
  height:auto !important; min-height:0 !important; position:static !important;
  display:flex !important; flex-direction:column !important;
  align-items:center !important; justify-content:center !important;
  gap:4px !important; padding:9px 2px !important; margin:0 !important;
  border:0 !important; border-radius:9px !important; background:transparent !important;
  color:var(--a-metin-2) !important; text-align:center !important; overflow:hidden !important;
}
#taskmenu a::before{position:static !important;font-size:18px !important;
  line-height:1 !important;width:auto !important;height:auto !important;margin:0 !important}
#taskmenu a span{
  position:static !important; display:block !important;
  font-size:10px !important; line-height:1.15 !important; letter-spacing:-.01em;
  white-space:nowrap !important; max-width:100% !important;
  overflow:hidden !important; text-overflow:ellipsis !important;
}
#taskmenu a:hover{background:rgba(0,0,0,.05) !important}
#taskmenu a.selected{background:var(--a-aksan-yumusak) !important}
#taskmenu a.selected,#taskmenu a.selected span,#taskmenu a.selected::before{color:var(--a-aksan) !important}
#taskmenu a.logout{margin-top:auto !important}
#taskmenu a.logout,#taskmenu a.logout span,#taskmenu a.logout::before{color:#d0453b !important}
/* Kurulum düğmesi (aser_pwa eklentisi) */
#taskmenu a.button-kurulum::before{content:"\e9b1";font-family:Icons !important}

/* ── 4. Bölme başlıkları — SADECE görünüm ──────────────────────────────
   Elastic'in başlık/araç çubuğu yerleşimi JS ile yönetiliyor; yükseklik,
   flex ve hizalama ezmek ikonları üst üste bindiriyor. Yapıya dokunmuyoruz. */
#layout .header,#layout>div>.header{
  background:rgba(246,246,248,.86) !important;
  backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--a-kenar) !important;
}
#layout .header .header-title{font-size:13px !important;color:var(--a-metin) !important}
#layout .header a.button,#layout .header button,
#layout .toolbar a.button,#layout .toolbar button{
  border-radius:8px !important;color:var(--a-metin-2) !important;
}
#layout .header a.button:hover,#layout .toolbar a.button:hover{
  background:rgba(0,0,0,.05) !important;color:var(--a-metin) !important;
}
#layout .toolbar a.button{font-size:11px !important}

#layout-sidebar{
  width:var(--a-yan-g) !important; flex:0 0 var(--a-yan-g) !important;
}
#layout-list{
  width:var(--a-liste) !important; flex:0 0 var(--a-liste) !important;
}
}

/* ── Mobil: yalnızca dokunma hedefleri ─────────────────────────────── */
@media (max-width:768px){
  #messagelist td{padding:13px 14px !important}
  #mailboxlist li.mailbox>a{padding:12px 12px !important}
}
@media (display-mode:standalone){
  #layout>.menu,#layout-menu{padding-bottom:env(safe-area-inset-bottom) !important}
  #layout .header{padding-top:env(safe-area-inset-top) !important}
}

/* ── Ray renkleri: her genişlikte marka tonu (yalnızca kozmetik) ───── */
#layout-menu,#layout>.menu{
  background:var(--a-yan) !important;
  border-color:var(--a-kenar) !important;
}
#taskmenu a,#taskmenu a span,#taskmenu a::before{color:var(--a-metin-2) !important}
#taskmenu a.selected,#taskmenu a.selected span,#taskmenu a.selected::before{color:var(--a-aksan) !important}
#taskmenu a.logout,#taskmenu a.logout span,#taskmenu a.logout::before{color:#d0453b !important}
#taskmenu .special-buttons{background:transparent !important}

/* ── Kurulum düğmesi: kendi çizdiğimiz ikon (Elastic ikon fontu değil) ─
   Ekran/telefon silueti + aşağı ok: "cihazına kur". */
#taskmenu a.button-kurulum::before{
  content:"" !important; font-family:inherit !important; font-size:0 !important;
  width:20px !important; height:20px !important; display:block !important;
  background:no-repeat center/contain
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236e6e73' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><rect x='6.5' y='2.5' width='11' height='19' rx='2.6'/><path d='M10.5 5.4h3'/><path d='M12 9.5v6'/><path d='M9.6 13.1 12 15.5l2.4-2.4'/></svg>");
}
#taskmenu a.button-kurulum:hover::before{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a84ff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><rect x='6.5' y='2.5' width='11' height='19' rx='2.6'/><path d='M10.5 5.4h3'/><path d='M12 9.5v6'/><path d='M9.6 13.1 12 15.5l2.4-2.4'/></svg>");
}
#taskmenu a.button-kurulum{cursor:pointer}

/* ── Mobil ray: marka tonu (Elastic'in koyu rayı yerine) ───────────── */
@media (max-width:1200px){
  #layout-menu,#layout>.menu{
    background:rgba(250,250,252,.96) !important;
    border-color:var(--a-kenar) !important;
  }
  #taskmenu a,#taskmenu a span{color:var(--a-metin-2) !important}
  #taskmenu a.selected,#taskmenu a.selected span{color:var(--a-aksan) !important}
}

/* ── İleti listesi gövde önizlemesi (aser_onizleme eklentisi) ──────── */
#messagelist .aser-onizleme{
  display:-webkit-box !important; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden !important; margin-top:3px;
  color:var(--a-metin-3) !important; font-size:12px !important; line-height:1.45 !important;
  font-weight:400 !important;
  /* Elastic .subject'e nowrap veriyor; önizleme sarmalı */
  white-space:normal !important; text-overflow:clip !important;
  max-width:100% !important; width:100% !important;
}
#messagelist td.subject{white-space:normal !important}
#messagelist td.subject>a,#messagelist td.subject .subject{
  display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
#messagelist tr.selected .aser-onizleme{color:var(--a-metin-2) !important}