/* =====================================================================
   Kurumsal Webmail — tek stil dosyası
   Açık / koyu tema: <html data-tema="koyu">
   ===================================================================== */

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url("../font/inter-latin-ext-wght-normal.woff2") format("woff2-variations");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url("../font/inter-latin-wght-normal.woff2") format("woff2-variations");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Plus Jakarta Sans";
    font-style: normal;
    font-display: swap;
    font-weight: 200 800;
    src: url("../font/plus-jakarta-sans-latin-ext-wght-normal.woff2") format("woff2-variations");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Plus Jakarta Sans";
    font-style: normal;
    font-display: swap;
    font-weight: 200 800;
    src: url("../font/plus-jakarta-sans-latin-wght-normal.woff2") format("woff2-variations");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    /* Lacivert + marka mavisi (Pen marka kimliği) */
    --lacivert: #0F2742;
    --lacivert-2: #16314F;
    --bg: #F5F7FA;
    --yuzey: #FFFFFF;
    --yuzey-2: #F3F6FA;
    --yuzey-3: #EAEFF5;
    --cizgi: #E2E7EE;
    --cizgi-yumusak: #EDF1F6;
    --metin: #0F1A2B;
    --metin-2: #55657C;
    --metin-3: #8A97A8;
    --vurgu: #2563EB;
    --vurgu-2: #1D4ED8;
    --vurgu-koyu: #1D4ED8;
    --vurgu-acik: #EEF3FE;
    --vurgu-cizgi: #C9D8FB;
    --gradyan: linear-gradient(180deg, #2F6CF0 0%, #2563EB 100%);
    --kehribar: #E29A2D;
    --tehlike: #C4342B;
    --tehlike-acik: #FBECEA;
    --basari: #157F5A;
    --basari-acik: #E6F4EE;
    --uyari: #9A5B0C;
    --uyari-acik: #FDF4E4;
    --golge-1: 0 1px 2px rgba(15, 26, 43, .06);
    --golge-2: 0 8px 24px -12px rgba(15, 39, 66, .22), 0 1px 3px rgba(15, 26, 43, .05);
    --golge-3: 0 24px 64px -20px rgba(15, 39, 66, .38);
    --r-1: 8px;
    --r-2: 12px;
    --r-3: 16px;
    --kontrol-h: 44px;
    --kontrol-h-k: 36px;
    --yazi: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --yazi-baslik: "Plus Jakarta Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    color-scheme: light;
}

html[data-tema="koyu"] {
    --bg: #0A1524;
    --yuzey: #0F1F35;
    --yuzey-2: #142742;
    --yuzey-3: #1A3050;
    --cizgi: #213757;
    --cizgi-yumusak: #1A2E4B;
    --metin: #E8EEF7;
    --metin-2: #A7B4C7;
    --metin-3: #7387A2;
    --vurgu: #5B8DF5;
    --vurgu-2: #3F78F0;
    --vurgu-koyu: #8AB0F8;
    --vurgu-acik: rgba(91, 141, 245, .14);
    --vurgu-cizgi: rgba(91, 141, 245, .36);
    --gradyan: linear-gradient(180deg, #3B76F2 0%, #2F6AE8 100%);
    --tehlike: #E5645B;
    --tehlike-acik: rgba(229, 100, 91, .14);
    --basari: #3FB98A;
    --basari-acik: rgba(63, 185, 138, .14);
    --uyari: #F0B256;
    --uyari-acik: rgba(240, 178, 86, .12);
    --golge-1: 0 1px 2px rgba(0, 0, 0, .3);
    --golge-2: 0 10px 30px -12px rgba(0, 0, 0, .6);
    --golge-3: 0 30px 80px -20px rgba(0, 0, 0, .7);
    color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
    margin: 0;
    font-family: var(--yazi);
    font-size: 14px;
    line-height: 1.5;
    color: var(--metin);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    font-feature-settings: "cv11", "ss01";
}
a { color: var(--vurgu); text-decoration: none; }
a:hover { text-decoration: underline; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; line-height: 1.25; letter-spacing: -.01em; }
p { margin: 0; }
[hidden] { display: none !important; }
::selection { background: var(--vurgu-cizgi); }

.ikon { width: 18px; height: 18px; flex: none; }
.ikon-k { width: 15px; height: 15px; flex: none; }
.ikon-b { width: 22px; height: 22px; flex: none; }

.gorunmez {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------------------------------------------------------------------
   Form kontrolleri — aynı satırdaki her kontrol aynı yükseklikte
   --------------------------------------------------------------------- */
.alan { display: flex; flex-direction: column; gap: 6px; }
.alan > label, .etiket { font-size: 13px; font-weight: 600; color: var(--metin-2); }
.alan .ipucu { font-size: 12px; color: var(--metin-3); }

.girdi, .secim {
    height: var(--kontrol-h);
    width: 100%;
    padding: 0 14px;
    background: var(--yuzey);
    border: 1px solid var(--cizgi);
    border-radius: var(--r-2);
    outline: none;
    transition: border-color .15s, box-shadow .15s, background .15s;
}
textarea.girdi { height: auto; min-height: 120px; padding: 12px 14px; resize: vertical; line-height: 1.6; }
.girdi::placeholder { color: var(--metin-3); }
.girdi:focus, .secim:focus { border-color: var(--vurgu); box-shadow: 0 0 0 4px var(--vurgu-acik); }
.girdi-ikonlu { position: relative; display: flex; align-items: center; }
.girdi-ikonlu > .ikon { position: absolute; left: 14px; color: var(--metin-3); pointer-events: none; }
.girdi-ikonlu > .girdi { padding-left: 42px; }
.girdi-ikonlu > .girdi-dugme {
    position: absolute; right: 6px; height: calc(var(--kontrol-h) - 12px); width: 34px;
    display: grid; place-items: center; border: 0; background: transparent; color: var(--metin-3);
    border-radius: var(--r-1); cursor: pointer;
}
.girdi-ikonlu > .girdi-dugme:hover { background: var(--yuzey-2); color: var(--metin); }
.secim {
    appearance: none; -webkit-appearance: none; padding-right: 38px; cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%238b91a8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 12px center;
}

.onay { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; font-size: 14px; }
.onay input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.onay .kutu {
    width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid var(--cizgi); background: var(--yuzey);
    display: grid; place-items: center; transition: all .15s; flex: none;
}
.onay .kutu::after { content: ""; width: 10px; height: 6px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg) translate(1px, -1px); opacity: 0; }
.onay input:checked + .kutu { background: var(--vurgu); border-color: var(--vurgu); }
.onay input:checked + .kutu::after { opacity: 1; }
.onay input:focus-visible + .kutu { box-shadow: 0 0 0 4px var(--vurgu-acik); }

/* Düğmeler */
.dugme {
    height: var(--kontrol-h);
    padding: 0 18px;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    border-radius: var(--r-2);
    border: 1px solid var(--cizgi);
    background: var(--yuzey);
    color: var(--metin);
    font-weight: 600; font-size: 14px; white-space: nowrap;
    cursor: pointer; text-decoration: none !important;
    transition: background .15s, border-color .15s, transform .05s, box-shadow .15s;
}
.dugme:hover { background: var(--yuzey-2); }
.dugme:active { transform: translateY(1px); }
.dugme:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--vurgu-acik); }
.dugme[disabled] { opacity: .55; cursor: not-allowed; }
.dugme-ana {
    background: var(--gradyan); border-color: transparent; color: #fff;
    box-shadow: 0 8px 20px -8px rgba(79, 70, 229, .65);
}
.dugme-ana:hover { background: var(--gradyan); filter: brightness(1.07); }
.dugme-tehlike { color: var(--tehlike); }
.dugme-tehlike:hover { background: var(--tehlike-acik); border-color: transparent; }
.dugme-hayalet { border-color: transparent; background: transparent; }
.dugme-hayalet:hover { background: var(--yuzey-2); }
.dugme-k { height: var(--kontrol-h-k); padding: 0 12px; font-size: 13px; border-radius: 10px; }
.dugme-ikon { width: var(--kontrol-h-k); height: var(--kontrol-h-k); padding: 0; border-radius: 10px; border-color: transparent; background: transparent; color: var(--metin-2); }
.dugme-ikon:hover { background: var(--yuzey-2); color: var(--metin); }
.dugme-tam { width: 100%; }
.dugme .donen { animation: don 0.8s linear infinite; }
@keyframes don { to { transform: rotate(360deg); } }

/* Uyarılar */
.uyari {
    display: flex; gap: 10px; align-items: flex-start;
    padding: 12px 14px; border-radius: var(--r-2); font-size: 13.5px;
    background: var(--yuzey-2); color: var(--metin-2); border: 1px solid var(--cizgi);
}
.uyari .ikon { margin-top: 1px; }
.uyari-hata { background: var(--tehlike-acik); color: var(--tehlike); border-color: transparent; }
.uyari-basari { background: var(--basari-acik); color: var(--basari); border-color: transparent; }
.uyari-dikkat { background: var(--uyari-acik); color: var(--uyari); border-color: transparent; }

.rozet {
    display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px;
    border-radius: 999px; font-size: 12px; font-weight: 600;
    background: var(--yuzey-3); color: var(--metin-2);
}
.rozet-yesil { background: var(--basari-acik); color: var(--basari); }
.rozet-kirmizi { background: var(--tehlike-acik); color: var(--tehlike); }
.rozet-mavi { background: var(--vurgu-acik); color: var(--vurgu); }
.rozet-sari { background: var(--uyari-acik); color: var(--uyari); }
.nokta { width: 8px; height: 8px; border-radius: 50%; background: currentColor; display: inline-block; }
.nokta-canli { position: relative; }
.nokta-canli::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; background: currentColor; opacity: .35; animation: nabiz 2s ease-out infinite; }
@keyframes nabiz { 0% { transform: scale(.8); opacity: .45; } 100% { transform: scale(1.8); opacity: 0; } }

.marka-isareti {
    width: 38px; height: 38px; border-radius: 12px; background: var(--gradyan); color: #fff;
    display: grid; place-items: center; box-shadow: 0 8px 22px -8px rgba(79, 70, 229, .7); flex: none;
}
.marka-isareti .ikon { width: 20px; height: 20px; }

.tek-mesaj { max-width: 480px; margin: 15vh auto; padding: 32px; background: var(--yuzey); border-radius: var(--r-3); box-shadow: var(--golge-2); display: grid; gap: 12px; }

/* =====================================================================
   GİRİŞ EKRANI
   ===================================================================== */
.giris-sayfa { min-height: 100%; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
.giris-vitrin {
    position: relative; overflow: hidden; color: #fff;
    background: radial-gradient(1200px 600px at 10% 0%, #6d63ff 0%, transparent 60%), radial-gradient(900px 700px at 100% 100%, #1d4ed8 0%, transparent 55%), #2a2390;
    padding: 48px 56px; display: flex; flex-direction: column; justify-content: space-between;
}
.giris-vitrin .halka {
    position: absolute; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .16); pointer-events: none;
}
.giris-vitrin .halka-1 { width: 620px; height: 620px; right: -220px; top: 50%; margin-top: -310px; animation: don 60s linear infinite; border-style: dashed; }
.giris-vitrin .halka-2 { width: 420px; height: 420px; right: -120px; top: 50%; margin-top: -210px; border-color: rgba(255, 255, 255, .22); }
.giris-vitrin .halka-3 { width: 220px; height: 220px; right: -20px; top: 50%; margin-top: -110px; background: rgba(255, 255, 255, .06); backdrop-filter: blur(6px); animation: parilti 4s ease-in-out infinite; }
.giris-vitrin .halka-1::before {
    content: ""; position: absolute; width: 12px; height: 12px; border-radius: 50%; background: #a5f3fc;
    top: 50%; left: -6px; box-shadow: 0 0 18px 4px rgba(165, 243, 252, .7);
}
@keyframes parilti { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .0); } 50% { box-shadow: 0 0 60px 10px rgba(165, 180, 255, .35); } }
.giris-vitrin .ust { display: flex; align-items: center; gap: 12px; font-weight: 700; font-size: 16px; position: relative; }
.giris-vitrin .ust .marka-isareti { background: rgba(255, 255, 255, .16); box-shadow: none; border: 1px solid rgba(255, 255, 255, .25); }
.giris-vitrin .orta { position: relative; max-width: 460px; }
.giris-vitrin h1 { font-size: 40px; font-weight: 750; letter-spacing: -.025em; line-height: 1.12; }
.giris-vitrin .orta p { margin-top: 16px; font-size: 16px; color: rgba(255, 255, 255, .78); line-height: 1.6; }
.giris-ozellikler { list-style: none; padding: 0; margin: 32px 0 0; display: grid; gap: 14px; }
.giris-ozellikler li { display: flex; align-items: center; gap: 12px; font-size: 14.5px; color: rgba(255, 255, 255, .9); }
.giris-ozellikler li span.k {
    width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
    background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .18);
}
.giris-vitrin .alt { position: relative; font-size: 12.5px; color: rgba(255, 255, 255, .6); }

.giris-form-alani { display: grid; place-items: center; padding: 40px 24px; position: relative; }
.giris-kart { width: 100%; max-width: 400px; display: grid; gap: 22px; }
.giris-kart .baslik h2 { font-size: 26px; font-weight: 700; }
.giris-kart .baslik p { color: var(--metin-2); margin-top: 6px; }
.giris-kart form { display: grid; gap: 16px; }
.giris-kart .dugme-ana { height: 48px; font-size: 15px; margin-top: 4px; }
.giris-guven { display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--metin-3); font-size: 12.5px; }
.tema-dugmesi-sabit { position: absolute; top: 20px; right: 20px; }
.mobil-marka { display: none; align-items: center; gap: 10px; font-weight: 700; }

@media (max-width: 900px) {
    .giris-sayfa { grid-template-columns: 1fr; }
    .giris-vitrin { display: none; }
    .mobil-marka { display: flex; }
}

/* =====================================================================
   WEBMAIL UYGULAMASI
   ===================================================================== */
.uygulama {
    height: 100vh; height: 100dvh;
    display: grid; grid-template-columns: 252px 400px minmax(0, 1fr);
    gap: 0; padding: 12px; column-gap: 12px;
}

/* Kenar çubuğu */
.kenar { display: flex; flex-direction: column; gap: 18px; padding: 8px 6px 4px; min-height: 0; }
.kenar .marka { display: flex; align-items: center; gap: 10px; padding: 4px 8px; font-weight: 700; font-size: 15px; }
.kenar .marka small { display: block; font-weight: 500; color: var(--metin-3); font-size: 11.5px; }
.kenar .dugme-ana { height: 46px; margin: 0 4px; }
.klasorler { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; align-content: start; overflow-y: auto; min-height: 0; flex: 1; }
.klasorler a {
    display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 12px;
    border-radius: 10px; color: var(--metin-2); font-weight: 500; text-decoration: none; position: relative;
}
.klasorler a:hover { background: var(--yuzey-3); color: var(--metin); }
.klasorler a.secili { background: var(--yuzey); color: var(--vurgu); font-weight: 600; box-shadow: var(--golge-1); }
.klasorler a.secili::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 3px; background: var(--gradyan); }
.klasorler a .klasor-adi { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.klasorler a .sayi { font-size: 12px; font-weight: 700; color: var(--vurgu); background: var(--vurgu-acik); border-radius: 999px; padding: 1px 8px; }
.klasorler .alt-baslik { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--metin-3); font-weight: 700; padding: 14px 12px 6px; }
.klasorler .derin-1 a { padding-left: 28px; }
.klasorler .derin-2 a { padding-left: 44px; }
.klasorler .derin-3 a { padding-left: 60px; }

.hesap-kutusu {
    display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: var(--r-2);
    background: var(--yuzey); box-shadow: var(--golge-1);
}
.avatar {
    width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; flex: none;
    font-weight: 700; font-size: 13px; color: #fff; background: var(--gradyan); text-transform: uppercase;
}
.avatar-b { width: 44px; height: 44px; font-size: 15px; }
.hesap-kutusu .bilgi { min-width: 0; flex: 1; }
.hesap-kutusu .eposta { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hesap-kutusu .durum { font-size: 11.5px; color: var(--basari); display: flex; align-items: center; gap: 6px; }

/* Panel ortak */
.panel { background: var(--yuzey); border-radius: var(--r-3); box-shadow: var(--golge-1); min-height: 0; display: flex; flex-direction: column; overflow: hidden; }

/* İleti listesi */
.liste-ust { padding: 16px 16px 10px; display: grid; gap: 12px; border-bottom: 1px solid var(--cizgi); }
.liste-ust .satir { display: flex; align-items: center; gap: 8px; }
.liste-ust h1 { font-size: 18px; font-weight: 700; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.liste-ust .girdi { height: 40px; background: var(--yuzey-2); border-color: transparent; }
.liste-ust .girdi:focus { background: var(--yuzey); }
.liste-araclar { display: flex; align-items: center; gap: 4px; }
.liste-araclar .bilgi { margin-left: auto; font-size: 12px; color: var(--metin-3); }
.filtreler { display: flex; gap: 6px; }
.filtre { height: 28px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--cizgi); background: transparent; font-size: 12.5px; font-weight: 600; color: var(--metin-2); cursor: pointer; }
.filtre.secili { background: var(--metin); color: var(--yuzey); border-color: var(--metin); }

.iletiler { list-style: none; margin: 0; padding: 6px; overflow-y: auto; flex: 1; min-height: 0; }
.ileti {
    display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; column-gap: 10px; row-gap: 2px;
    padding: 12px 12px 12px 8px; border-radius: var(--r-2); cursor: pointer; position: relative;
    border: 1px solid transparent; outline: none;
}
.ileti + .ileti { margin-top: 2px; }
.ileti:hover { background: var(--yuzey-2); }
.ileti:focus-visible { border-color: var(--vurgu-cizgi); }
.ileti.secili { background: var(--vurgu-acik); border-color: var(--vurgu-cizgi); }
.ileti .sec { grid-row: 1 / 3; align-self: center; }
.ileti .sec .kutu { width: 18px; height: 18px; border-radius: 5px; }
.ileti .kimden { font-size: 14px; color: var(--metin-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; align-items: center; gap: 8px; }
.ileti .zaman { font-size: 12px; color: var(--metin-3); white-space: nowrap; text-align: right; }
.ileti .konu { grid-column: 2 / 3; font-size: 13.5px; color: var(--metin-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ileti .isaretler { grid-column: 3 / 4; display: flex; gap: 6px; justify-content: flex-end; color: var(--metin-3); }
.ileti .isaretler .yildizli { color: #f59e0b; }
.ileti.okunmamis .kimden { color: var(--metin); font-weight: 700; }
.ileti.okunmamis .konu { color: var(--metin); font-weight: 600; }
.ileti.okunmamis .kimden::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--gradyan); flex: none; }
.ileti.okunmamis .zaman { color: var(--vurgu); font-weight: 600; }

.liste-alt { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--cizgi); font-size: 12.5px; color: var(--metin-3); }
.liste-alt .dugmeler { display: flex; gap: 4px; }

.bos-durum { display: grid; place-items: center; text-align: center; gap: 10px; padding: 48px 24px; color: var(--metin-3); height: 100%; align-content: center; }
.bos-durum .simge {
    width: 72px; height: 72px; border-radius: 22px; display: grid; place-items: center; color: var(--vurgu);
    background: var(--vurgu-acik); position: relative;
}
.bos-durum .simge::after { content: ""; position: absolute; inset: -8px; border-radius: 28px; border: 1px dashed var(--vurgu-cizgi); animation: don 24s linear infinite; }
.bos-durum .simge .ikon { width: 30px; height: 30px; }
.bos-durum h3 { color: var(--metin); font-size: 16px; font-weight: 650; }

.iskelet { padding: 14px 12px; display: grid; gap: 8px; }
.iskelet i { display: block; height: 10px; border-radius: 6px; background: linear-gradient(90deg, var(--yuzey-2), var(--yuzey-3), var(--yuzey-2)); background-size: 200% 100%; animation: iskelet 1.2s ease-in-out infinite; }
.iskelet i:nth-child(1) { width: 45%; }
.iskelet i:nth-child(2) { width: 85%; }
@keyframes iskelet { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* Okuma bölmesi */
.okuma { position: relative; }
.okuma-ust { display: flex; align-items: center; gap: 4px; padding: 10px 14px; border-bottom: 1px solid var(--cizgi); flex-wrap: wrap; }
.okuma-ust .ayrac { width: 1px; height: 22px; background: var(--cizgi); margin: 0 6px; }
.okuma-ust .bosluk { flex: 1; }
.okuma-icerik { overflow-y: auto; flex: 1; min-height: 0; padding: 28px 32px 32px; }
.okuma-icerik h2 { font-size: 22px; font-weight: 700; letter-spacing: -.02em; word-break: break-word; }
.gonderen { display: flex; gap: 14px; align-items: flex-start; margin-top: 20px; }
.gonderen .kim { flex: 1; min-width: 0; }
.gonderen .kisi-adi { font-weight: 650; font-size: 15px; }
.gonderen .adres { color: var(--metin-3); font-size: 13px; margin-left: 6px; }
.gonderen .alicilar { color: var(--metin-2); font-size: 13px; margin-top: 2px; word-break: break-word; }
.gonderen .tarih { color: var(--metin-3); font-size: 12.5px; white-space: nowrap; }
.gorsel-uyari { margin-top: 20px; }
.gorsel-uyari button { margin-left: auto; }
.ileti-govde-cerceve { margin-top: 20px; border: 1px solid var(--cizgi); border-radius: var(--r-2); background: #fff; overflow: hidden; }
.ileti-govde-cerceve iframe { display: block; width: 100%; height: 200px; border: 0; background: #fff; }
.ekler-baslik { margin-top: 24px; font-size: 13px; font-weight: 650; color: var(--metin-2); display: flex; align-items: center; gap: 8px; }
.ekler { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.ek {
    display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 14px 0 10px; border-radius: var(--r-2);
    border: 1px solid var(--cizgi); background: var(--yuzey); max-width: 280px; text-decoration: none !important; color: var(--metin);
    transition: border-color .15s, box-shadow .15s;
}
.ek:hover { border-color: var(--vurgu-cizgi); box-shadow: var(--golge-2); }
.ek .tur { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: var(--vurgu-acik); color: var(--vurgu); font-size: 10px; font-weight: 800; text-transform: uppercase; flex: none; }
.ek .ek-dosya { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ek .ek-boyut { font-size: 11.5px; color: var(--metin-3); }
.ek > div { min-width: 0; }

.geri-dugmesi { display: none; }

/* Yeni ileti penceresi */
.ortu {
    position: fixed; inset: 0; z-index: 50; background: rgba(12, 14, 26, .42); backdrop-filter: blur(4px);
    display: grid; place-items: center; padding: 20px; animation: belir .15s ease-out;
}
@keyframes belir { from { opacity: 0; } }
.pencere {
    width: 100%; max-width: 780px; max-height: calc(100dvh - 40px); background: var(--yuzey); border-radius: 20px;
    box-shadow: var(--golge-3); display: flex; flex-direction: column; overflow: hidden; animation: kay .18s ease-out;
}
.pencere-k { max-width: 480px; }
@keyframes kay { from { transform: translateY(12px) scale(.98); opacity: 0; } }
.pencere-ust { display: flex; align-items: center; gap: 10px; padding: 16px 18px 12px 22px; }
.pencere-ust h3 { font-size: 17px; font-weight: 700; flex: 1; }
.pencere-govde { padding: 4px 22px 16px; overflow-y: auto; display: grid; gap: 10px; }
.pencere-alt { display: flex; align-items: center; gap: 10px; padding: 14px 22px; border-top: 1px solid var(--cizgi); background: var(--yuzey-2); }
.pencere-alt .bosluk { flex: 1; }
.yazim-satir { display: flex; align-items: center; gap: 0; border-bottom: 1px solid var(--cizgi); min-height: var(--kontrol-h); }
.yazim-satir label { width: 64px; flex: none; font-size: 13px; color: var(--metin-3); font-weight: 600; }
.yazim-satir input { flex: 1; min-width: 0; height: var(--kontrol-h); border: 0; outline: none; background: transparent; }
.yazim-satir .ek-baglantilar { display: flex; gap: 4px; }
.yazim-satir .ek-baglantilar button { border: 0; background: transparent; color: var(--metin-3); font-size: 12.5px; font-weight: 600; cursor: pointer; padding: 4px 8px; border-radius: 6px; }
.yazim-satir .ek-baglantilar button:hover { background: var(--yuzey-2); color: var(--metin); }
.yazim-govde { width: 100%; min-height: 280px; border: 0; outline: none; resize: vertical; background: transparent; line-height: 1.65; padding: 14px 0 0; font-size: 14.5px; }
.yuklenen-ekler { display: flex; flex-wrap: wrap; gap: 8px; }
.yuklenen-ek { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 6px 0 12px; border-radius: 10px; background: var(--yuzey-2); font-size: 12.5px; font-weight: 600; max-width: 260px; }
.yuklenen-ek span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.yuklenen-ek small { color: var(--metin-3); font-weight: 500; }
.yuklenen-ek button { width: 24px; height: 24px; border: 0; border-radius: 6px; background: transparent; color: var(--metin-3); cursor: pointer; display: grid; place-items: center; }
.yuklenen-ek button:hover { background: var(--yuzey-3); color: var(--tehlike); }
.yuklenen-ek.yukleniyor { opacity: .6; }

/* Bildirim (toast) */
.bildirimler { position: fixed; z-index: 80; left: 50%; bottom: 24px; transform: translateX(-50%); display: grid; gap: 8px; justify-items: center; pointer-events: none; }
.bildirim {
    display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 14px; pointer-events: auto;
    background: #151827; color: #fff; box-shadow: var(--golge-3); font-size: 13.5px; font-weight: 500; animation: kay .2s ease-out; max-width: 90vw;
}
html[data-tema="koyu"] .bildirim { background: #f1f2f8; color: #141726; }
.bildirim.hata .ikon { color: #ff7b7f; }
.bildirim.basari .ikon { color: #4ade80; }

/* Açılır menü */
.menu-kap { position: relative; }
.menu {
    position: absolute; z-index: 40; top: calc(100% + 6px); right: 0; min-width: 220px; max-height: 360px; overflow-y: auto;
    background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--r-2); box-shadow: var(--golge-2); padding: 6px;
}
.menu button { display: flex; align-items: center; gap: 10px; width: 100%; height: 36px; padding: 0 10px; border: 0; border-radius: 8px; background: transparent; text-align: left; cursor: pointer; font-size: 13.5px; }
.menu button:hover { background: var(--yuzey-2); }

/* Mobil */
@media (max-width: 1180px) {
    .uygulama { grid-template-columns: 220px 340px minmax(0, 1fr); }
}
@media (max-width: 960px) {
    .uygulama { grid-template-columns: minmax(0, 1fr); padding: 0; }
    .uygulama .kenar { position: fixed; z-index: 60; inset: 0 auto 0 0; width: 280px; background: var(--bg); padding: 16px 10px; transform: translateX(-100%); transition: transform .2s; box-shadow: var(--golge-3); }
    .uygulama.menu-acik .kenar { transform: none; }
    .uygulama .panel { border-radius: 0; box-shadow: none; }
    .uygulama .okuma { display: none; }
    .uygulama.okuma-acik .liste { display: none; }
    .uygulama.okuma-acik .okuma { display: flex; }
    .geri-dugmesi, .menu-dugmesi { display: inline-flex; }
    .okuma-icerik { padding: 20px 18px; }
    .pencere { max-height: 100dvh; height: 100dvh; border-radius: 0; }
    .ortu { padding: 0; }
}
@media (min-width: 961px) { .menu-dugmesi { display: none; } }

/* =====================================================================
   YÖNETİM PANELİ
   ===================================================================== */
.yonetim { min-height: 100%; display: grid; grid-template-columns: 248px minmax(0, 1fr); }
.yonetim-kenar { padding: 20px 14px; display: flex; flex-direction: column; gap: 22px; border-right: 1px solid var(--cizgi); background: var(--yuzey); position: sticky; top: 0; height: 100vh; }
.yonetim-kenar .marka { display: flex; align-items: center; gap: 10px; padding: 0 8px; font-weight: 700; }
.yonetim-kenar .marka small { display: block; font-weight: 500; color: var(--metin-3); font-size: 11.5px; }
.yonetim-nav { display: grid; gap: 2px; }
.yonetim-nav a { display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 12px; border-radius: 10px; color: var(--metin-2); font-weight: 500; text-decoration: none; }
.yonetim-nav a:hover { background: var(--yuzey-2); color: var(--metin); }
.yonetim-nav a.secili { background: var(--vurgu-acik); color: var(--vurgu); font-weight: 600; }
.yonetim-kenar .alt { margin-top: auto; display: grid; gap: 8px; }
.yonetim-ana { padding: 32px 40px 60px; min-width: 0; max-width: 1280px; }
.sayfa-baslik { display: flex; align-items: flex-end; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
.sayfa-baslik .metin { flex: 1; min-width: 240px; }
.sayfa-baslik h1 { font-size: 24px; font-weight: 700; }
.sayfa-baslik p { color: var(--metin-2); margin-top: 4px; }

.kart { background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--r-3); box-shadow: var(--golge-1); }
.kart-ust { display: flex; align-items: center; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--cizgi); }
.kart-ust h2 { font-size: 15px; font-weight: 650; flex: 1; }
.kart-govde { padding: 20px; }
.kart + .kart { margin-top: 20px; }

.olcutler { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 20px; }
.olcut { padding: 18px 20px; position: relative; overflow: hidden; }
.olcut .etiket { font-size: 12.5px; }
.olcut .deger { font-size: 28px; font-weight: 750; letter-spacing: -.02em; margin-top: 6px; }
.olcut .simge { position: absolute; right: 16px; top: 16px; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--vurgu-acik); color: var(--vurgu); }
@media (max-width: 1100px) { .olcutler { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.tablo-kap { overflow-x: auto; }
table.tablo { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tablo th { text-align: left; font-size: 12px; font-weight: 650; color: var(--metin-3); text-transform: uppercase; letter-spacing: .04em; padding: 12px 16px; border-bottom: 1px solid var(--cizgi); white-space: nowrap; background: var(--yuzey-2); }
.tablo td { padding: 12px 16px; border-bottom: 1px solid var(--cizgi); vertical-align: middle; }
.tablo tr:last-child td { border-bottom: 0; }
.tablo tr:hover td { background: var(--yuzey-2); }
.tablo .ikincil { color: var(--metin-3); font-size: 12.5px; }
.tablo .islemler { display: flex; gap: 4px; justify-content: flex-end; }
.tablo code, code.kod { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; background: var(--yuzey-3); padding: 2px 6px; border-radius: 6px; }

.form-izgara { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 20px; }
.form-izgara .tam { grid-column: 1 / -1; }
.form-izgara-3 { grid-template-columns: 2fr 1fr 1fr; }
.form-bolum { font-size: 13px; font-weight: 700; color: var(--metin); grid-column: 1 / -1; padding-top: 8px; display: flex; align-items: center; gap: 8px; }
.form-bolum::after { content: ""; flex: 1; height: 1px; background: var(--cizgi); }
.form-alt { display: flex; gap: 10px; justify-content: flex-end; margin-top: 24px; }
@media (max-width: 760px) { .form-izgara, .form-izgara-3 { grid-template-columns: 1fr; } }

.filtre-cubugu { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.filtre-cubugu .girdi, .filtre-cubugu .secim { width: auto; min-width: 180px; }
.sayfalama { display: flex; gap: 6px; justify-content: flex-end; align-items: center; padding: 14px 16px; font-size: 13px; color: var(--metin-3); }

.dns-sonuc { display: grid; gap: 12px; }
.dns-satir { display: flex; align-items: flex-start; gap: 14px; padding: 14px 16px; border-radius: var(--r-2); background: var(--yuzey-2); }
.dns-satir .dns-adi { font-weight: 650; min-width: 200px; }
.dns-satir .ipler { display: flex; flex-wrap: wrap; gap: 6px; }

.qr-kutu { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 24px; align-items: center; }
.qr-kutu img { width: 200px; height: 200px; border-radius: var(--r-2); background: #fff; padding: 8px; border: 1px solid var(--cizgi); }
@media (max-width: 640px) { .qr-kutu { grid-template-columns: 1fr; } }

.ortala-sayfa { min-height: 100%; display: grid; place-items: center; padding: 32px 20px; background: radial-gradient(900px 500px at 50% -10%, var(--vurgu-acik), transparent 70%), var(--bg); }
.ortala-kart { width: 100%; max-width: 420px; padding: 32px; display: grid; gap: 20px; }
.ortala-kart.genis { max-width: 620px; }
.ortala-kart .ust { display: flex; align-items: center; gap: 12px; }
.ortala-kart h1 { font-size: 20px; font-weight: 700; }
.ortala-kart .ust p { color: var(--metin-3); font-size: 13px; }
.ortala-kart form { display: grid; gap: 16px; }
.kod-girdisi { text-align: center; font-size: 22px; letter-spacing: .5em; font-weight: 700; font-variant-numeric: tabular-nums; }

@media (max-width: 860px) {
    .yonetim { grid-template-columns: 1fr; }
    .yonetim-kenar { position: static; height: auto; border-right: 0; border-bottom: 1px solid var(--cizgi); }
    .yonetim-nav { grid-auto-flow: column; overflow-x: auto; }
    .yonetim-kenar .alt { display: none; }
    .yonetim-ana { padding: 24px 16px 48px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Tema düğmesi simgesi */
html[data-tema="acik"] .tema-gunes, html[data-tema="koyu"] .tema-ay { display: none; }
.menu-yukari { top: auto; bottom: calc(100% + 6px); left: 0; right: auto; }
.okuma-dolu { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.toplu-islemler { display: flex; gap: 2px; margin-left: 4px; }
.liste-araclar .onay { padding: 0 8px 0 10px; }
.ara-bosluk { height: 16px; }
.kart > .pencere-alt { border-radius: 0 0 var(--r-3) var(--r-3); }
.islemler form { margin: 0; }
.filtre-cubugu .girdi-ikonlu { flex: 1; min-width: 260px; max-width: 520px; }
.filtre-cubugu .girdi-ikonlu .girdi { width: 100%; }
.ust-bosluk { margin-top: 20px; }
.form-izgara > .kart + .kart { margin-top: 0; }

/* Zengin metin düzenleyici (TinyMCE) */
.yazim-editor { position: relative; min-height: 380px; margin-top: 6px; }
.yazim-editor .tox-tinymce { border: 1px solid var(--cizgi); border-radius: var(--r-2); }
.yazim-editor .tox .tox-toolbar, .yazim-editor .tox .tox-toolbar__overflow, .yazim-editor .tox .tox-toolbar__primary { background: var(--yuzey-2); }
.yazim-editor .tox .tox-editor-header { box-shadow: none; border-bottom: 1px solid var(--cizgi); padding: 0; }
.editor-yukleniyor { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--metin-3); background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--r-2); }
.yazim-editor textarea.js-editor { visibility: hidden; }
.taslak-durum { font-size: 12.5px; color: var(--metin-3); white-space: nowrap; }

/* Onay penceresi */
.pencere-onay { max-width: 440px; }
.onay-govde { padding: 26px 26px 18px; display: grid; gap: 10px; justify-items: start; }
.onay-govde .onay-simge { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--vurgu-acik); color: var(--vurgu); margin-bottom: 4px; }
.onay-govde .onay-simge.tehlike { background: var(--tehlike-acik); color: var(--tehlike); }
.onay-govde h3 { font-size: 17px; font-weight: 700; }
.onay-govde p { color: var(--metin-2); line-height: 1.55; }
.pencere-onay .pencere-alt { justify-content: flex-end; }
.dugme-tehlike-dolu { background: var(--tehlike); border-color: transparent; color: #fff; }
.dugme-tehlike-dolu:hover { background: var(--tehlike); filter: brightness(1.08); }
.ortu-ust { z-index: 70; }

/* İpucu balonu */
.ipucu-balon {
    position: fixed; z-index: 2000; pointer-events: none; max-width: 260px;
    padding: 6px 10px; border-radius: 8px; font-size: 12.5px; font-weight: 500; line-height: 1.35;
    background: #151827; color: #fff; box-shadow: var(--golge-2);
    opacity: 0; transform: translateY(-2px); transition: opacity .12s, transform .12s;
}
.ipucu-balon.gorunur { opacity: 1; transform: none; }
html[data-tema="koyu"] .ipucu-balon { background: #eef0f8; color: #141726; }

/* Yeni ileti penceresi: kenarlardan boyutlandırma ve tam ekran */
.pencere-yazim {
    position: relative; width: 820px; height: min(760px, calc(100dvh - 40px));
    max-width: calc(100vw - 24px); max-height: calc(100dvh - 24px);
}
.pencere-yazim .pencere-govde { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px; }
.pencere-yazim .yazim-editor { flex: 1; min-height: 220px; margin-top: 6px; }
.pencere-yazim.tam-ekran { width: calc(100vw - 24px) !important; height: calc(100dvh - 24px) !important; }
.pencere-yazim.tam-ekran .tutamak { display: none; }
.pencere-yazim .kucult-ikon, .pencere-yazim.tam-ekran .buyut-ikon { display: none; }
.pencere-yazim.tam-ekran .kucult-ikon { display: block; }
.pencere-yazim .pencere-ust { cursor: default; user-select: none; }
.tutamak { position: absolute; z-index: 6; }
.tutamak-n, .tutamak-s { left: 16px; right: 16px; height: 8px; cursor: ns-resize; }
.tutamak-n { top: 0; }
.tutamak-s { bottom: 0; }
.tutamak-e, .tutamak-w { top: 16px; bottom: 16px; width: 8px; cursor: ew-resize; }
.tutamak-e { right: 0; }
.tutamak-w { left: 0; }
.tutamak-ne, .tutamak-nw, .tutamak-se, .tutamak-sw { width: 18px; height: 18px; }
.tutamak-ne { top: 0; right: 0; cursor: nesw-resize; }
.tutamak-sw { bottom: 0; left: 0; cursor: nesw-resize; }
.tutamak-nw { top: 0; left: 0; cursor: nwse-resize; }
.tutamak-se { bottom: 0; right: 0; cursor: nwse-resize; }
.tutamak-se::after {
    content: ""; position: absolute; right: 5px; bottom: 5px; width: 8px; height: 8px;
    border-right: 2px solid var(--metin-3); border-bottom: 2px solid var(--metin-3); opacity: .5; border-radius: 0 0 3px 0;
}
.boyutlaniyor, .boyutlaniyor * { user-select: none !important; }
.boyutlaniyor iframe { pointer-events: none; }
.pencere-o { max-width: 680px; }
.imza-editor { position: relative; min-height: 240px; }
.imza-editor textarea { visibility: hidden; }
@media (max-width: 960px) {
    .pencere-yazim { width: 100% !important; height: 100dvh !important; max-width: none; max-height: none; }
    .pencere-yazim .tutamak, .js-yazim-buyut { display: none; }
}

/* Liste filtre ve sıralama */
.liste-araclar .filtre { display: inline-flex; align-items: center; justify-content: center; gap: 4px; }
.liste-araclar .filtre .ikon-k { width: 14px; height: 14px; }
.liste-araclar .filtre:not(.secili):hover { background: var(--yuzey-2); color: var(--metin); }
.siralama-kap { margin-left: auto; }
.siralama-kap .js-siralama-dugmesi.etkin { background: var(--vurgu-acik); color: var(--vurgu); }
.menu .menu-baslik { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--metin-3); padding: 6px 10px 4px; }
.menu .js-sirala .isaret { visibility: hidden; color: var(--vurgu); }
.menu .js-sirala.secili { color: var(--vurgu); font-weight: 600; }
.menu .js-sirala.secili .isaret { visibility: visible; }
.liste-durum { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--metin-2); }
.liste-durum .temizle { margin-left: auto; border: 0; background: transparent; color: var(--vurgu); font-weight: 600; font-size: 12.5px; cursor: pointer; padding: 2px 4px; border-radius: 6px; }
.liste-durum .temizle:hover { background: var(--vurgu-acik); }
.ileti .boyut-etiketi { font-size: 11.5px; color: var(--metin-3); font-variant-numeric: tabular-nums; }

/* Bağlam menüsü */
.baglam-menusu { position: fixed; top: 0; left: 0; right: auto; z-index: 90; min-width: 230px; max-width: 320px; max-height: min(420px, calc(100vh - 16px)); }
.baglam-menusu .ayrac { height: 1px; background: var(--cizgi); margin: 4px 6px; }
.baglam-menusu button { gap: 10px; }
.baglam-menusu button .etiket { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.baglam-menusu button .ok { color: var(--metin-3); }
.baglam-menusu button.tehlike { color: var(--tehlike); }
.baglam-menusu button.tehlike:hover { background: var(--tehlike-acik); }
.baglam-menusu button:disabled { opacity: .45; cursor: default; }
.baglam-menusu button:disabled:hover { background: transparent; }
.baglam-menusu button:focus-visible { outline: none; background: var(--yuzey-2); }
.baglam-menusu .girinti-1 { padding-left: 26px; }
.baglam-menusu .girinti-2 { padding-left: 42px; }
.baglam-menusu .geri { color: var(--metin-2); }

/* Klasör ağacı: yönetim, yerinde ad verme, sürükle-bırak */
.klasorler .alt-baslik { display: flex; align-items: center; justify-content: space-between; border-radius: 8px; }
/* Klasör ve hesap başlıklarındaki küçük + düğmesi */
.klasor-ekle { width: 26px; height: 26px; padding: 0; border: 0; border-radius: 7px; background: transparent; color: var(--metin-3); display: grid; place-items: center; cursor: pointer; flex: none; }
.klasor-ekle:hover { background: var(--yuzey-3); color: var(--vurgu); }
.klasor-ekle:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--vurgu-acik); }
.klasorler .klasor-menu { width: 26px; height: 26px; margin-right: -6px; border-radius: 7px; display: none; place-items: center; color: var(--metin-3); flex: none; }
.klasorler a:hover .klasor-menu, .klasorler a:focus-visible .klasor-menu { display: grid; }
.klasorler a:hover .sayi { display: none; }
.klasorler .klasor-menu:hover { background: var(--yuzey-3); color: var(--metin); }
.klasorler .klasor-girdi-kap { display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 8px 0 12px; color: var(--metin-2); }
.klasorler .derin-1 .klasor-girdi-kap { padding-left: 28px; }
.klasorler .derin-2 .klasor-girdi-kap { padding-left: 44px; }
.klasorler .derin-3 .klasor-girdi-kap { padding-left: 60px; }
.klasorler .klasor-girdi { flex: 1; min-width: 0; height: 30px; padding: 0 8px; border: 1px solid var(--vurgu); border-radius: 7px; background: var(--yuzey); outline: none; box-shadow: 0 0 0 3px var(--vurgu-acik); font-size: 13.5px; }
.klasorler a.duzenleniyor { padding-right: 6px; }
.klasorler a.birak-hedefi, .klasorler .alt-baslik.birak-hedefi { background: var(--vurgu-acik); color: var(--vurgu); box-shadow: inset 0 0 0 2px var(--vurgu-cizgi); }
.surukleniyor .klasorler .alt-baslik { outline: 1px dashed transparent; }
.surukle-hayalet { position: fixed; top: -100px; left: -100px; padding: 8px 12px; border-radius: 10px; background: var(--vurgu); color: #fff; font-size: 13px; font-weight: 600; max-width: 260px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ileti[draggable="true"] { -webkit-user-drag: element; }

/* Hesaplarım: diğer hesaplar ve okunmamış sayıları */
.hesaplarim { display: grid; gap: 2px; padding-top: 10px; border-top: 1px solid var(--cizgi); }
.hesaplarim-baslik { display: flex; align-items: center; min-height: 26px; justify-content: space-between; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--metin-3); font-weight: 700; padding: 0 4px 4px 12px; }
.hesap-oge { display: flex; align-items: center; gap: 2px; border-radius: 10px; }
.hesap-oge:hover { background: var(--yuzey-3); }
.hesap-gec { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 10px; border: 0; background: transparent; border-radius: 10px; cursor: pointer; text-align: left; color: var(--metin-2); font-weight: 500; }
.hesap-gec:hover { color: var(--metin); }
.hesap-gec .hesap-adres { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.hesap-gec .sayi { font-size: 12px; font-weight: 700; color: #fff; background: var(--gradyan); border-radius: 999px; padding: 1px 8px; }
.hesap-oge.kapali .hesap-gec { color: var(--metin-3); }
.hesap-oge.kapali .avatar { background: var(--yuzey-3); color: var(--metin-3); }
.hesap-gec .kilit { color: var(--metin-3); }
.hesap-kaldir { width: 26px; height: 26px; margin-right: 6px; border: 0; border-radius: 7px; background: transparent; color: var(--metin-3); display: none; place-items: center; cursor: pointer; }
.hesap-oge:hover .hesap-kaldir { display: grid; }
.hesap-kaldir:hover { background: var(--tehlike-acik); color: var(--tehlike); }
.avatar-k { width: 26px; height: 26px; font-size: 11.5px; }
.hesap-ekle-bos { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px; border: 1px dashed var(--cizgi); border-radius: 10px; background: transparent; color: var(--metin-3); font-size: 13px; cursor: pointer; }
.hesap-ekle-bos:hover { border-color: var(--vurgu-cizgi); color: var(--vurgu); }
.ipucu-metin { font-size: 13px; color: var(--metin-2); line-height: 1.55; }
.kenar .klasorler { flex: 1; }

/* =====================================================================
   Düzen: daraltılabilir kenar çubuğu ve sürüklenebilir liste genişliği
   (sütunlar CSS değişkeniyle; kullanıcı genişliği JS ile --liste-g olarak gelir)
   ===================================================================== */
.uygulama {
    --kenar-g: 252px;
    --liste-g-v: 400px;
    grid-template-columns: var(--kenar-g) var(--liste-g, var(--liste-g-v)) minmax(0, 1fr);
    transition: grid-template-columns .18s ease;
}
.uygulama.boyutlaniyor, .boyutlaniyor .uygulama { transition: none; }
@media (max-width: 1180px) { .uygulama { --kenar-g: 220px; --liste-g-v: 340px; } }

.marka-metin { min-width: 0; flex: 1; }
.marka .etkin-hesap { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--vurgu); font-weight: 600; }
.kenar-dugmesi { margin-left: auto; }
.kenar-dugmesi .genislet-ikon { display: none; }

/* Liste ile okuma alanı arasındaki sürükleme çubuğu (sütun boşluğunda durur) */
.liste { position: relative; overflow: visible; }
.liste-ayirici { position: absolute; top: 12px; bottom: 12px; right: -10px; width: 8px; cursor: col-resize; z-index: 5; border-radius: 4px; outline: none; }
.liste-ayirici::after { content: ""; position: absolute; top: 0; bottom: 0; left: 3px; width: 2px; border-radius: 2px; background: transparent; transition: background .15s; }
.liste-ayirici:hover::after, .liste-ayirici:focus-visible::after, .liste-ayirici.etkin::after { background: var(--vurgu); }

@media (min-width: 961px) {
    .uygulama.kenar-kapali { --kenar-g: 64px; }
    /* Üzerine gelince geçici açılış: sütun 64 px kalır, çubuk listenin üzerine biner */
    .uygulama { position: relative; }
    .kenar-kapali.kenar-gecici .kenar {
        position: absolute; z-index: 45; top: 0; bottom: 0; left: 0; width: 252px; /* konum, kendi ızgara hücresine göre */
        padding: 8px 6px 4px; background: var(--bg); border-radius: var(--r-3); box-shadow: var(--golge-3);
        animation: kenar-ac .14s ease-out;
    }
    @keyframes kenar-ac { from { opacity: .6; transform: translateX(-8px); } }
    .kenar-kapali.kenar-gecici .kenar-dugmesi .daralt-ikon { display: none; }
    .kenar-kapali.kenar-gecici .kenar-dugmesi .genislet-ikon { display: block; }
    .kenar-kapali:not(.kenar-gecici) .kenar { padding: 8px 0 4px; align-items: stretch; }
    .kenar-kapali:not(.kenar-gecici) .marka { justify-content: center; padding: 4px 0; }
    .kenar-kapali:not(.kenar-gecici) .marka .marka-isareti, .kenar-kapali:not(.kenar-gecici) .marka-metin { display: none; }
    .kenar-kapali:not(.kenar-gecici) .kenar-dugmesi { margin: 0; }
    .kenar-kapali:not(.kenar-gecici) .kenar-dugmesi .daralt-ikon { display: none; }
    .kenar-kapali:not(.kenar-gecici) .kenar-dugmesi .genislet-ikon { display: block; }
    .kenar-kapali:not(.kenar-gecici) .js-yeni-ileti { width: 44px; padding: 0; margin: 0 auto; }
    .kenar-kapali:not(.kenar-gecici) .js-yeni-ileti .dugme-metin { display: none; }
    .kenar-kapali:not(.kenar-gecici) .klasorler a { justify-content: center; padding: 0 !important; }
    .kenar-kapali:not(.kenar-gecici) .klasorler a .klasor-adi, .kenar-kapali:not(.kenar-gecici) .klasorler .klasor-menu { display: none !important; }
    .kenar-kapali:not(.kenar-gecici) .klasorler a .sayi, .kenar-kapali:not(.kenar-gecici) .klasorler a:hover .sayi { display: block; position: absolute; top: 3px; right: 6px; font-size: 10px; line-height: 15px; padding: 0 5px; }
    .kenar-kapali:not(.kenar-gecici) .klasorler .alt-baslik { justify-content: center; padding: 10px 0 4px; }
    .kenar-kapali:not(.kenar-gecici) .klasorler .alt-baslik span { display: none; }
    .kenar-kapali:not(.kenar-gecici) .klasorler .yeni-klasor { display: none; }
    .kenar-kapali:not(.kenar-gecici) .hesaplarim-baslik { justify-content: center; padding: 0 0 4px; }
    .kenar-kapali:not(.kenar-gecici) .hesaplarim-baslik span { display: none; }
    .kenar-kapali:not(.kenar-gecici) .hesap-gec { justify-content: center; padding: 0; position: relative; }
    .kenar-kapali:not(.kenar-gecici) .hesap-gec .hesap-adres, .kenar-kapali:not(.kenar-gecici) .hesap-gec .kilit, .kenar-kapali:not(.kenar-gecici) .hesap-kaldir { display: none !important; }
    .kenar-kapali:not(.kenar-gecici) .hesap-gec .sayi { position: absolute; top: 1px; right: 8px; font-size: 10px; line-height: 15px; padding: 0 5px; }
    .kenar-kapali:not(.kenar-gecici) .hesap-ekle-bos { justify-content: center; padding: 0; margin: 0 8px; font-size: 0; gap: 0; }
    .kenar-kapali:not(.kenar-gecici) .hesap-kutusu { flex-direction: column; gap: 6px; padding: 8px 0; margin: 0 6px; }
    .kenar-kapali:not(.kenar-gecici) .hesap-kutusu .bilgi { display: none; }
}
@media (max-width: 960px) {
    .uygulama { grid-template-columns: minmax(0, 1fr); }
    .liste-ayirici, .kenar-dugmesi { display: none; }
    .liste { overflow: hidden; }
}

/* Masaüstü bildirimi önerisi */
.bildirim-oneri { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 12px; border-radius: var(--r-2); background: var(--vurgu-acik); color: var(--metin); font-size: 13px; }
.bildirim-oneri span { flex: 1; min-width: 160px; }
.bildirim-oneri[hidden] { display: none; }

/* Sütunlar sabit: kenar çubuğu geçici açılırken düzenden çıksa da liste ve okuma alanı yerinde kalır */
@media (min-width: 961px) {
    .uygulama > .kenar { grid-column: 1; grid-row: 1; }
    .uygulama > .liste { grid-column: 2; grid-row: 1; }
    .uygulama > .okuma { grid-column: 3; grid-row: 1; }
}
.marka-metin { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.klasorler a { cursor: pointer; }
.bildirim-oneri.hata { background: var(--uyari-acik); color: var(--metin); }
.bildirim-oneri .dugme[disabled] { opacity: .6; }

/* Hesap menüsü: maddeler tek satırda kalır */
#hesap-menu { min-width: 300px; max-width: calc(100vw - 24px); }
#hesap-menu button { white-space: nowrap; }

/* İleti üzerine gelince sağ üstte kısayol düğmeleri */
.ileti .ileti-eylemler {
    position: absolute; top: 6px; right: 8px; display: none; gap: 2px; padding: 2px;
    background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: 10px; box-shadow: var(--golge-1); z-index: 2;
}
.ileti:hover .ileti-eylemler, .ileti:focus-within .ileti-eylemler { display: flex; }
.ileti:hover .zaman, .ileti:focus-within .zaman { visibility: hidden; }
.ileti-eylemler button { width: 28px; height: 28px; border: 0; border-radius: 7px; background: transparent; color: var(--metin-2); display: grid; place-items: center; cursor: pointer; padding: 0; }
.ileti-eylemler button:hover { background: var(--yuzey-2); color: var(--metin); }
.ileti-eylemler button.etkin { color: #f59e0b; }
.ileti-eylemler button.tehlike:hover { background: var(--tehlike-acik); color: var(--tehlike); }
.surukleniyor .ileti-eylemler { display: none !important; }
@media (hover: none) { .ileti .ileti-eylemler { display: none !important; } .ileti .zaman { visibility: visible !important; } }

/* İleti başlıkları penceresi */
.pencere-baslik { max-width: 900px; }
.pencere-baslik .pencere-ust { flex-wrap: wrap; }
.pencere-baslik .pencere-ust a.dugme { text-decoration: none; }
.baslik-ozet { display: grid; gap: 2px; border: 1px solid var(--cizgi); border-radius: var(--r-2); overflow: hidden; }
.baslik-satir { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px; padding: 9px 14px; font-size: 13px; background: var(--yuzey-2); }
.baslik-satir .ad { color: var(--metin-3); font-weight: 600; }
.baslik-satir .deger { word-break: break-all; }
.kimlik-rozetleri { display: flex; flex-wrap: wrap; gap: 6px; word-break: normal !important; }
.ham-baslik {
    margin: 0; max-height: 46vh; overflow: auto; padding: 12px 14px; border-radius: var(--r-2);
    background: var(--yuzey-2); border: 1px solid var(--cizgi);
    font: 12px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; word-break: break-all; color: var(--metin);
}
.pencere-baslik .etiket { margin-top: 6px; }

/* Alıcı listesi: ilk 5 kişi, kalanı "+N kişi daha" ile */
.gonderen .alicilar { display: grid; gap: 2px; }
.alici-satiri { line-height: 1.55; }
.alici-etiket { color: var(--metin-3); margin-right: 6px; }
.alici-kisiler .alici { margin-right: 4px; }
.alici-satiri.kisaltilmis .gizli-alici { display: none; }
.alici-satiri.kisaltilmis .alici:nth-child(5) { margin-right: 6px; }
.alici-daha { border: 0; background: var(--yuzey-3); color: var(--vurgu); font-size: 12px; font-weight: 600; padding: 1px 8px; border-radius: 999px; cursor: pointer; white-space: nowrap; }
.alici-daha:hover { background: var(--vurgu-acik); }

/* Ekler ileti metninin üstünde */
.okuma-icerik .js-ekler-alani { margin-top: 18px; }
.okuma-icerik .js-ekler-alani .ekler-baslik { margin-top: 0; }

/* Kenar çubuğu klasör adlarına göre genişler (240–360 px); yatay kaydırma olmaz */
@media (min-width: 961px) {
    .uygulama { --kenar-g: auto; }
    .uygulama:not(.kenar-kapali) > .kenar { width: max-content; min-width: 240px; max-width: 360px; }
    .uygulama.kenar-kapali { --kenar-g: 64px; }
}
@media (min-width: 961px) and (max-width: 1180px) {
    .uygulama:not(.kenar-kapali) > .kenar { min-width: 220px; max-width: 300px; }
}
.klasorler { overflow-x: hidden; }
.klasorler a { min-width: 0; }
.klasorler { grid-template-columns: minmax(0, 1fr); }
.klasorler > li { min-width: 0; }

/* Diğer hesap rozeti: yükleniyor (…), sıfır (0) ve alınamadı (!) soluk görünür */
.hesap-gec .sayi.soluk { background: var(--yuzey-3); color: var(--metin-3); }
@media (min-width: 961px) { .kenar-kapali:not(.kenar-gecici) .hesap-gec .sayi.soluk { display: none; } }

/* Hesaplarım: sürükle-bırak sıralama */
.hesap-oge[draggable="true"] { cursor: grab; }
.hesap-oge[draggable="true"] .hesap-gec { cursor: inherit; }
.hesap-oge.suruklenen { opacity: .45; background: var(--vurgu-acik); }
.hesap-oge.suruklenen .hesap-gec { cursor: grabbing; }

/* Uygulama logosu */
.marka-logo { flex: none; display: block; border-radius: 26%; box-shadow: 0 8px 22px -8px rgba(79, 70, 229, .65); }
.giris-vitrin .marka-logo { box-shadow: 0 8px 24px -10px rgba(0, 0, 0, .45); }
@media (min-width: 961px) { .kenar-kapali:not(.kenar-gecici) .marka .marka-logo { display: none; } }

/* Giriş formunun üstündeki logo (mobilde "mobil-marka" zaten logo + ad gösterir) */
.giris-logo { margin-bottom: -4px; }
.giris-logo .marka-logo { border-radius: 18px; box-shadow: 0 14px 34px -14px rgba(79, 70, 229, .7); }
@media (max-width: 900px) { .giris-logo { display: none; } }

/* =====================================================================
   V1.4 — Marka kimliğiyle görsel yenileme (Pen tasarımından uyarlanan
   öğeler: lacivert/mavi palet, Plus Jakarta Sans başlıklar, düz düğmeler,
   renkli avatarlar, rozetler, yanıt çubuğu, lacivert yazım başlığı)
   ===================================================================== */

h1, h2, h3, .marka-yazi, .giris-vitrin h1, .giris-kart .baslik h2, .sayfa-baslik h1, .olcut .deger,
.okuma-icerik h2, .liste-ust h1, .pencere-ust h3, .ortala-kart h1, .onay-govde h3 {
    font-family: var(--yazi-baslik);
    letter-spacing: -.02em;
}

/* Marka: işaret + "kurumsal webmail" yazısı */
.marka-logo { box-shadow: none !important; border-radius: 0 !important; }
.tema-koyu-logo { display: none !important; }
html[data-tema="koyu"] .tema-acik-logo { display: none !important; }
html[data-tema="koyu"] .tema-koyu-logo { display: block !important; }
.marka-yazi { font-size: 17px; font-weight: 500; color: var(--metin); white-space: nowrap; letter-spacing: -.025em; }
.marka-yazi b { font-weight: 800; color: var(--vurgu); }
.marka-yazi.koyu { color: #fff; font-size: 20px; }
.marka-yazi.koyu b { color: #7EA6FA; }
html[data-tema="koyu"] .marka-yazi b { color: #7EA6FA; }
.kenar .marka, .yonetim-kenar .marka { gap: 10px; }
.marka-metin { display: flex; flex-direction: column; line-height: 1.2; }
.marka .etkin-hesap { color: var(--metin-3); font-weight: 500; font-size: 11.5px; margin-top: 3px; }
.giris-vitrin .ust { gap: 12px; }
.mobil-marka { gap: 10px; }

/* Düğmeler: düz marka mavisi; ikincil çerçeveli */
.dugme-ana { background: var(--vurgu); box-shadow: 0 1px 2px rgba(15, 39, 66, .14), 0 6px 16px -8px rgba(37, 99, 235, .55); }
.dugme-ana:hover { background: var(--vurgu-2); filter: none; }
.dugme-cizgi { border-color: var(--cizgi); background: var(--yuzey); color: var(--metin-2); font-weight: 600; }
.dugme-cizgi:hover { background: var(--yuzey-2); color: var(--metin); }
.dugme-cizgi .ikon-k { color: var(--metin-3); }
.dugme-cizgi:hover .ikon-k { color: var(--metin-2); }
.filtre.secili { background: var(--lacivert); border-color: var(--lacivert); color: #fff; }
html[data-tema="koyu"] .filtre.secili { background: var(--vurgu); border-color: var(--vurgu); }

/* Paneller daha düz */
.panel { box-shadow: none; border: 1px solid var(--cizgi); }

/* Kenar çubuğu: seçili klasör açık mavi zeminde */
.klasorler a.secili { background: var(--vurgu-acik); box-shadow: none; color: var(--vurgu); }
.klasorler a.secili::before { background: var(--vurgu); }
.klasorler a .sayi { background: transparent; color: var(--vurgu); padding: 0 2px; font-weight: 700; }
.kenar-kapali:not(.kenar-gecici) .klasorler a .sayi { background: var(--vurgu); color: #fff; padding: 0 5px; }
.hesap-kutusu { box-shadow: none; border: 1px solid var(--cizgi); }

/* Renkli baş harf avatarları (gönderene göre sabit renk) */
.avatar { background: var(--vurgu); }
.avatar[data-renk="0"] { background: #2563EB; }
.avatar[data-renk="1"] { background: #157F5A; }
.avatar[data-renk="2"] { background: #7C5CDB; }
.avatar[data-renk="3"] { background: #D98A1C; }
.avatar[data-renk="4"] { background: #C4342B; }
.avatar[data-renk="5"] { background: #0F2742; }
.avatar[data-renk="6"] { background: #0F8B8D; }
.avatar[data-renk="7"] { background: #C2416B; }
html[data-tema="koyu"] .avatar[data-renk="5"] { background: #3B5B85; }

/* İleti listesi: avatar sütunu, okunmamış şeridi, seçili satır */
.ileti { grid-template-columns: 22px 34px minmax(0, 1fr) auto; column-gap: 10px; padding: 12px 12px 12px 8px; }
.ileti .avatar-liste { grid-row: 1 / 3; grid-column: 2; align-self: center; width: 34px; height: 34px; font-size: 12px; }
.ileti .kimden { grid-column: 3; }
.ileti .zaman { grid-column: 4; }
.ileti .konu { grid-column: 3 / 4; }
.ileti .isaretler { grid-column: 4 / 5; }
.ileti.okunmamis .kimden::before { display: none; }
.ileti.okunmamis::after { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 3px; background: var(--vurgu); }
.ileti.okunmamis .zaman { color: var(--vurgu); }
.ileti.secili { background: var(--vurgu-acik); border-color: transparent; box-shadow: inset 3px 0 0 var(--vurgu); }
.ileti.secili.okunmamis::after { display: none; }
.ileti + .ileti { margin-top: 0; }
.iletiler .ileti { border-bottom: 1px solid var(--cizgi-yumusak); border-radius: 0; }
.iletiler .ileti.secili { border-radius: 0; }

/* Okuma ekranı */
.okuma-ust { padding: 10px 16px; gap: 6px; }
.okuma-eylemler { display: flex; gap: 6px; flex-wrap: wrap; }
.okuma-icerik { padding: 26px 32px 36px; }
.okuma-icerik h2 { font-size: 25px; font-weight: 700; line-height: 1.25; }
.konu-rozetleri { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.konu-rozetleri:empty { display: none; }
.rozet-klasor { background: var(--yuzey-3); color: var(--metin-2); }
.rozet-dogrulama { gap: 5px; cursor: default; }
.rozet-dogrulama.gecti { background: var(--basari-acik); color: var(--basari); }
.rozet-dogrulama.kaldi { background: var(--tehlike-acik); color: var(--tehlike); }
.rozet-dogrulama .ikon-k { width: 13px; height: 13px; }
.gonderen { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--cizgi-yumusak); }
.gonderen .tarih { text-align: right; display: grid; gap: 2px; }
.gonderen .tarih small { color: var(--metin-3); font-size: 11.5px; }
.uyari-bilgi { background: var(--vurgu-acik); border-color: var(--vurgu-cizgi); color: var(--metin-2); }
.uyari-bilgi > .ikon { color: var(--vurgu); }
.okuma-yanit { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.okuma-yanit .dugme { height: 40px; }

/* Ek kartları: dosya türüne göre renk */
.ek { height: 58px; border-radius: var(--r-2); }
.ek .tur { width: 36px; height: 36px; border-radius: 10px; font-size: 9.5px; letter-spacing: .02em; }
.ek .tur[data-tur="pdf"] { background: #FBECEA; color: #C4342B; }
.ek .tur[data-tur="tablo"] { background: #E6F4EE; color: #157F5A; }
.ek .tur[data-tur="belge"] { background: #EEF3FE; color: #2563EB; }
.ek .tur[data-tur="sunum"] { background: #FDF1E2; color: #C26A0C; }
.ek .tur[data-tur="gorsel"] { background: #F1ECFC; color: #7C5CDB; }
.ek .tur[data-tur="arsiv"] { background: #EAEFF5; color: #0F2742; }
html[data-tema="koyu"] .ek .tur { filter: saturate(1.1) brightness(.9); }

/* Yeni posta penceresi: lacivert başlık çubuğu */
.pencere-yazim .pencere-ust { background: var(--lacivert); padding: 11px 12px 11px 20px; }
.pencere-yazim .pencere-ust h3 { color: #fff; font-size: 15px; font-weight: 700; }
.pencere-yazim .pencere-ust .dugme-ikon { color: rgba(255, 255, 255, .78); width: 32px; height: 32px; }
.pencere-yazim .pencere-ust .dugme-ikon:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.pencere-yazim .pencere-govde { padding-top: 6px; }
.pencere-yazim .pencere-alt { background: var(--yuzey); }
html[data-tema="koyu"] .pencere-yazim .pencere-ust { background: #081627; }

/* Giriş ekranı: lacivert vitrin */
.giris-vitrin {
    background:
        radial-gradient(900px 560px at 0% 0%, rgba(37, 99, 235, .55), transparent 62%),
        radial-gradient(760px 640px at 100% 100%, rgba(30, 92, 235, .32), transparent 58%),
        linear-gradient(160deg, #15365F 0%, #0F2742 52%, #0A1D33 100%);
}
.giris-vitrin .halka { border-color: rgba(255, 255, 255, .10); }
.giris-vitrin .halka-2 { border-color: rgba(255, 255, 255, .14); }
.giris-vitrin .halka-3 { background: rgba(126, 166, 250, .06); }
.giris-vitrin .halka-1::before { background: #7EA6FA; box-shadow: 0 0 18px 4px rgba(126, 166, 250, .6); }
.giris-vitrin h1 { font-weight: 800; }
.giris-ozellikler li span.k { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .14); }
.giris-logo .marka-logo { width: 46px; height: 46px; }

/* Mobil: yeni ileti için yüzen düğme */
.fab { display: none; }
@media (max-width: 960px) {
    .fab {
        display: grid; place-items: center; position: fixed; right: 18px; bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 30;
        width: 56px; height: 56px; border-radius: 18px; border: 0; background: var(--vurgu); color: #fff; cursor: pointer;
        box-shadow: 0 10px 26px -10px rgba(37, 99, 235, .8);
    }
    .fab .ikon { width: 22px; height: 22px; }
    .uygulama.okuma-acik ~ .fab { display: none; }
}

/* Depolama göstergesi */
.depolama { padding: 12px 14px; border: 1px solid var(--cizgi); border-radius: var(--r-2); background: var(--yuzey); display: grid; gap: 7px; }
.depolama-ust { display: flex; justify-content: space-between; font-size: 12.5px; font-weight: 600; color: var(--metin); }
.depolama-ust span:last-child { color: var(--metin-3); font-weight: 600; }
.depolama-cubuk { height: 6px; border-radius: 999px; background: var(--yuzey-3); overflow: hidden; }
.depolama-cubuk > span { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--vurgu); transition: width .4s ease; }
.depolama-alt { font-size: 11.5px; color: var(--metin-3); }
.depolama.dolmak-uzere .depolama-cubuk > span { background: var(--kehribar); }
.depolama.dolmak-uzere .depolama-ust span:last-child { color: var(--uyari); }
.depolama.dolu .depolama-cubuk > span { background: var(--tehlike); }
.depolama.dolu .depolama-ust span:last-child, .depolama.dolu .depolama-alt { color: var(--tehlike); }
@media (min-width: 961px) {
    .kenar-kapali:not(.kenar-gecici) .depolama { padding: 8px 6px; margin: 0 8px; gap: 0; }
    .kenar-kapali:not(.kenar-gecici) .depolama-ust, .kenar-kapali:not(.kenar-gecici) .depolama-alt { display: none; }
}

/* Giriş formunun üstünde logo + yazı */
.giris-logo { display: flex; align-items: center; gap: 12px; margin-bottom: 2px; }
.giris-logo .marka-logo { width: 44px; height: 44px; }
.giris-logo .marka-yazi { font-size: 24px; }

/* =====================================================================
   Üst çubuk: arama + görünüm + oturum (hesap çipi) — Pen düzeni
   ===================================================================== */
.uygulama { grid-template-rows: auto minmax(0, 1fr); row-gap: 12px; }
@media (min-width: 961px) {
    .uygulama > .kenar { grid-column: 1; grid-row: 1 / 3; }
    .uygulama > .ust-cubuk { grid-column: 2 / 4; grid-row: 1; }
    .uygulama > .liste { grid-column: 2; grid-row: 2; }
    .uygulama > .okuma { grid-column: 3; grid-row: 2; }
    .ust-cubuk .menu-dugmesi { display: none; }
}
.ust-cubuk { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ust-arama { flex: 1; max-width: 560px; min-width: 0; }
.ust-arama .girdi { height: 42px; background: var(--yuzey); border-color: var(--cizgi); }
.ust-arama .girdi:focus { border-color: var(--vurgu); }
.kullanici-kap { flex: none; }
.kullanici-cip {
    display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 12px 0 6px; max-width: 300px;
    border: 1px solid var(--cizgi); border-radius: 999px; background: var(--yuzey); cursor: pointer; color: var(--metin); text-align: left;
}
.kullanici-cip:hover { background: var(--yuzey-2); }
.kullanici-cip .avatar { width: 34px; height: 34px; font-size: 13px; }
.kullanici-bilgi { display: grid; min-width: 0; line-height: 1.25; }
.kullanici-bilgi strong { font-size: 13px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kullanici-bilgi small { font-size: 11.5px; color: var(--metin-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; align-items: center; gap: 6px; }
.kullanici-bilgi small .nokta { color: var(--basari); }
.kullanici-cip .ok { color: var(--metin-3); }
.kullanici-kap #hesap-menu { top: calc(100% + 8px); right: 0; left: auto; bottom: auto; }
.liste-ust { padding-top: 14px; }

@media (max-width: 960px) {
    .uygulama > .ust-cubuk { grid-row: 1; padding: 8px 10px 0; }
    .uygulama > .liste, .uygulama > .okuma { grid-row: 2; }
    .uygulama { row-gap: 0; }
    .ust-cubuk .menu-dugmesi { display: inline-flex; }
    .kullanici-bilgi, .kullanici-cip .ok, .ust-cubuk .js-tema { display: none; }
    .kullanici-cip { padding: 0 6px; height: 42px; }
    .uygulama.okuma-acik > .ust-cubuk { display: none; }
}

/* Yanıt düğmeleri okuma çubuğunun başında */
.okuma-eylemler { align-items: center; }
.okuma-eylemler .ayrac { width: 1px; height: 22px; background: var(--cizgi); margin: 0 4px; }
.okuma-eylemler .yanit-dugmesi { color: var(--vurgu); border-color: var(--vurgu-cizgi); }
.okuma-eylemler .yanit-dugmesi .ikon-k { color: var(--vurgu); }
.okuma-eylemler .yanit-dugmesi:hover { background: var(--vurgu-acik); color: var(--vurgu-2); }
@media (max-width: 1300px) { .okuma-eylemler .dugme-k { padding: 0 10px; } }
.ust-cubuk .bosluk { flex: 1; }

/* Depolama göstergesi üst çubukta (sıkışık) */
.depolama-ust-cubuk { width: 170px; flex: none; padding: 6px 12px; gap: 5px; border-radius: var(--r-2); cursor: default; }
.depolama-ust-cubuk .depolama-ust { font-size: 11.5px; }
.depolama-ust-cubuk .depolama-ust span:first-child { display: inline-flex; align-items: center; gap: 5px; color: var(--metin-2); }
.depolama-ust-cubuk .depolama-ust .ikon-k { width: 13px; height: 13px; color: var(--metin-3); }
.depolama-ust-cubuk .depolama-cubuk { height: 5px; }
.depolama-ust-cubuk .depolama-alt { display: none; }
.depolama-ust-cubuk .depolama-cubuk[hidden] + .depolama-alt { display: block; font-size: 11px; }
@media (max-width: 1180px) { .depolama-ust-cubuk { width: 140px; } }
@media (max-width: 960px) { .depolama-ust-cubuk { display: none !important; } }

/* Hesap çipi: canlı noktanın nabız halkası kesilmesin (kırpma yalnız metinde) */
.kullanici-bilgi small { overflow: visible; }
.kullanici-bilgi small .nokta { flex: none; margin-left: 2px; }
.kullanici-bilgi small .kirp { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.depolama-ust-cubuk .depolama-alt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Depolama (üst çubuk): Pen düzeni — başlık + yüzde, çubuk, açıklama */
.depolama-ust-cubuk { width: 200px; padding: 5px 12px; gap: 4px; }
.depolama-ust-cubuk .depolama-alt { display: block; font-size: 11px; line-height: 1.2; }
.depolama-ust-cubuk .depolama-cubuk { height: 4px; }
@media (max-width: 1180px) { .depolama-ust-cubuk { width: 170px; } }

/* Sayfalama başlık satırında da (alttakiyle aynı düğmeler) */
.liste-bilgi-ust { flex: none; font-size: 12px; color: var(--metin-3); white-space: nowrap; }
.sayfa-ust { display: flex; gap: 2px; flex: none; }
.sayfa-ust .dugme-ikon { width: 30px; height: 30px; }
@media (max-width: 1180px) { .liste-bilgi-ust { display: none; } }

/* Liste araçları başlıkla aynı sol hizada; sıralama sağda */
.liste-araclar { justify-content: flex-start; }
.liste-araclar .onay { padding: 0 8px 0 0; }

/* Başlık (Plus Jakarta 18px) ile ileti sayısı (Inter 12px) görsel olarak dikey ortada */
.liste-ust h1 { line-height: 30px; }
.liste-bilgi-ust { line-height: 30px; padding-top: 2px; }

/* Yazım penceresi: Pen tasarımındaki gibi daha kibar başlık, etiketler ve alt çubuk */
.pencere-yazim .pencere-ust { padding: 8px 8px 8px 20px; }
.pencere-yazim .pencere-ust h3 { font-size: 14px; font-weight: 650; letter-spacing: 0; }
.pencere-yazim .pencere-ust .dugme-ikon { width: 30px; height: 30px; }
.pencere-yazim .pencere-ust .dugme-ikon .ikon { width: 16px; height: 16px; }
.pencere-yazim .yazim-satir label { width: 58px; font-size: 13.5px; font-weight: 500; color: var(--metin-3); }
.pencere-yazim .yazim-satir input { font-size: 14px; }
.pencere-yazim .yazim-satir .ek-baglantilar button { color: var(--vurgu); font-weight: 600; font-size: 13px; padding: 4px 6px; }
.pencere-yazim .yazim-satir .ek-baglantilar button:hover { background: var(--vurgu-acik); color: var(--vurgu); }
.pencere-yazim .pencere-alt { padding: 12px 20px; gap: 6px; }
.pencere-yazim .js-gonder { height: 36px; padding: 0 18px; border-radius: 8px; font-size: 13.5px; gap: 8px; }
.pencere-yazim .js-gonder .ikon { width: 16px; height: 16px; }
.yazim-araclari { display: flex; align-items: center; gap: 2px; margin-left: 8px; }
.yazim-araclari .dugme-ikon { width: 34px; height: 34px; color: var(--metin-2); cursor: pointer; }
.yazim-araclari .dugme-ikon:hover { background: var(--yuzey-2); color: var(--metin); }
.yazim-araclari .dugme-ikon .ikon { width: 18px; height: 18px; }
.pencere-yazim .taslak-durum { font-size: 12px; margin-right: 4px; }
.pencere-yazim .js-taslak-at { width: 34px; height: 34px; color: var(--metin-3); }
.pencere-yazim .js-taslak-at:hover { color: var(--tehlike); background: var(--tehlike-acik); }

/* Yazım alt çubuğu: ikon + yazı, kibar hayalet düğmeler */
.yazim-araclari .yazim-arac { height: 34px; padding: 0 12px; gap: 7px; border: 0; background: transparent; color: var(--metin-2); font-size: 13px; font-weight: 500; border-radius: 8px; cursor: pointer; }
.yazim-araclari .yazim-arac:hover { background: var(--yuzey-2); color: var(--metin); }
.yazim-araclari .yazim-arac .ikon { width: 16px; height: 16px; color: var(--metin-3); }
.yazim-araclari .yazim-arac:hover .ikon { color: var(--metin-2); }

/* Yazım alt çubuğu: yazılı "Sil" düğmesi (sağda) */
.pencere-yazim .yazim-arac.yazim-sil { width: auto; height: 34px; padding: 0 12px; gap: 7px; border: 0; background: transparent; color: var(--metin-2); font-size: 13px; font-weight: 500; border-radius: 8px; cursor: pointer; }
.pencere-yazim .yazim-arac.yazim-sil .ikon { width: 16px; height: 16px; color: var(--metin-3); }
.pencere-yazim .yazim-arac.yazim-sil:hover { background: var(--tehlike-acik); color: var(--tehlike); }
.pencere-yazim .yazim-arac.yazim-sil:hover .ikon { color: var(--tehlike); }

/* Bilgi / Gizli bağlantıları ikonlu */
.pencere-yazim .yazim-satir .ek-baglantilar button { display: inline-flex; align-items: center; gap: 5px; }
.pencere-yazim .yazim-satir .ek-baglantilar .ikon-k { width: 14px; height: 14px; }

/* Yazım alt çubuğu: ikon ile yazı görsel olarak aynı hizada */
.pencere-yazim .yazim-arac { line-height: 1; }
.pencere-yazim .yazim-arac .ikon { position: relative; top: -1px; }

/* Onay kutusuyla işaretlenen iletiler (Pen): açık mavi zemin + solda mavi şerit */
.iletiler .ileti:has(.js-sec:checked) { background: var(--vurgu-acik); box-shadow: inset 3px 0 0 var(--vurgu); border-bottom-color: var(--vurgu-cizgi, var(--cizgi)); }
.iletiler .ileti:has(.js-sec:checked).okunmamis::after { display: none; }
.iletiler .ileti:has(.js-sec:checked):hover { background: var(--vurgu-acik); filter: brightness(.985); }
html[data-tema="koyu"] .iletiler .ileti:has(.js-sec:checked) { background: rgba(37, 99, 235, .16); }

/* Bağlam menüsünde yana açılan alt liste (ör. Taşı… → klasörler) */
.baglam-alt-menu { z-index: 91; overflow-y: auto; }
.baglam-menusu button.alt-acik { background: var(--yuzey-2); color: var(--metin); }

/* Çoklu seçim çubuğu: seçili sayısı + yazılı Okundu/Okunmadı */
.toplu-islemler { align-items: center; flex-wrap: nowrap; min-width: 0; }
.toplu-sayi { font-size: 12.5px; font-weight: 600; color: var(--vurgu); white-space: nowrap; margin-right: 4px; }
.toplu-yazili { height: 30px; padding: 0 10px; gap: 6px; font-size: 12.5px; font-weight: 600; border-radius: 999px; border: 1px solid var(--cizgi); background: transparent; color: var(--metin-2); white-space: nowrap; }
.toplu-yazili:hover { background: var(--yuzey-2); color: var(--metin); }
.toplu-yazili .ikon-k { width: 14px; height: 14px; }
@media (max-width: 1280px) { .toplu-sayi { display: none; } }