/* =========================================================
   macOS GÖRÜNÜM STİLİ
   ---------------------------------------------------------
   Yalnızca <html data-tema-stil="macos"> etiketliyken devreye
   girer (bkz. app.js: temaUygula()). Renkler zaten --brand/--bg
   gibi CSS değişkenleriyle geliyor (data.js: TEMALAR.macos) —
   burada yalnızca ŞEKİL değişiyor: pencere çerçevesi, açılır
   pencere/menü görünümü, buton/giriş kutusu biçimi, kaydırma
   çubuğu. Diğer temaları etkilemez.
   ========================================================= */

html[data-tema-stil="macos"] {
  --radius: 14px;
  --shadow: 0 0 0 .5px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04), 0 10px 26px rgba(0,0,0,.08);
}

/* ---------- EMOJİ ---------- */
/* "Apple Color Emoji" yalnızca emoji glif'leri içerir; sıradan metin
   karakterleri için tarayıcı otomatik olarak --font'a düşer — bu yüzden
   yalnızca emoji karakterleri macOS'un kendi emoji setiyle (Mac/Safari'de)
   render edilir, diğer tüm yazılar seçili yazı tipinde kalır. Mac dışı
   sistemlerde bu yazı tipi sessizce atlanır, hiçbir görsel fark olmaz. */
html[data-tema-stil="macos"] body {
  font-family: "Apple Color Emoji", "Segoe UI Emoji", var(--font);
}

/* ---------- AÇILIR PENCERE (Yönetim / özel alt menüler) ---------- */
html[data-tema-stil="macos"] .nav-flyout-host {
  border-radius: 12px; padding: 7px;
  background: rgba(246,246,248,.92); backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow: 0 0 0 .5px rgba(0,0,0,.08), 0 16px 40px rgba(0,0,0,.22);
}
html[data-tema-stil="macos"] .nav-flyout-item { border-radius: 6px; font-size: 12.5px; }
html[data-tema-stil="macos"] .nav-flyout-item.active { background: var(--brand); color: #fff; }

/* ---------- KAYDIRMA ÇUBUĞU ---------- */
html[data-tema-stil="macos"] ::-webkit-scrollbar { width: 10px; height: 10px; }
html[data-tema-stil="macos"] ::-webkit-scrollbar-track { background: transparent; }
html[data-tema-stil="macos"] ::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,.22); border-radius: 99px; border: 2px solid transparent; background-clip: padding-box;
}
html[data-tema-stil="macos"] ::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,.35); background-clip: padding-box; }

/* ---------- KENAR ÇUBUĞU (sidebar) ---------- */
html[data-tema-stil="macos"] .sidebar {
  background: rgba(246,246,248,.78); backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%); border-right: 1px solid rgba(0,0,0,.08);
}
html[data-tema-stil="macos"] .sidebar-brand { position: relative; padding-top: 34px; }
html[data-tema-stil="macos"] .sidebar-brand::before {
  content: ""; position: absolute; top: 14px; left: 20px; width: 11px; height: 11px; border-radius: 50%;
  background: #ff5f57; box-shadow: 18px 0 0 #febc2e, 36px 0 0 #28c840;
}
html[data-tema-stil="macos"] .brand-ikon { border-radius: 9px; box-shadow: 0 2px 6px rgba(0,0,0,.18); }

html[data-tema-stil="macos"] .nav-item { border-radius: 7px; font-size: 13.5px; }
html[data-tema-stil="macos"] .nav-item:hover { background: rgba(0,0,0,.05); }
html[data-tema-stil="macos"] .nav-item.active {
  background: var(--brand); color: #fff; font-weight: 600;
  box-shadow: 0 1px 2px rgba(0,0,0,.15);
}
html[data-tema-stil="macos"] .nav-bolum-baslik { font-size: 10.5px; font-weight: 700; }
html[data-tema-stil="macos"] .kullanici-kutu { background: rgba(0,0,0,.045); border-radius: 9px; }

/* ---------- KARTLAR / PANELLER (vibrancy) ---------- */
html[data-tema-stil="macos"] .card,
html[data-tema-stil="macos"] .stat {
  background: rgba(255,255,255,.82); backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border: .5px solid rgba(0,0,0,.07); border-radius: var(--radius);
}
html[data-tema-stil="macos"] .reader-main { border-radius: var(--radius); border: .5px solid rgba(0,0,0,.08); }
html[data-tema-stil="macos"] .reader-toolbar {
  background: rgba(246,246,248,.9); backdrop-filter: blur(10px);
}

/* ---------- BUTONLAR ---------- */
html[data-tema-stil="macos"] .btn {
  border-radius: 7px; border-color: rgba(0,0,0,.1); font-weight: 590;
  box-shadow: 0 1px 1px rgba(0,0,0,.04); transition: transform .08s, filter .15s, background .15s;
}
html[data-tema-stil="macos"] .btn:hover { background: rgba(0,0,0,.04); }
html[data-tema-stil="macos"] .btn:active { transform: scale(.97); }
html[data-tema-stil="macos"] .btn-primary {
  background: linear-gradient(180deg, var(--brand-light), var(--brand));
  border-color: transparent; box-shadow: 0 1px 2px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.25);
}
html[data-tema-stil="macos"] .btn-primary:hover { filter: brightness(1.06); }
html[data-tema-stil="macos"] .ikon-btn { border-radius: 6px; }
html[data-tema-stil="macos"] .sekme,
html[data-tema-stil="macos"] .yonetim-nav {
  background: rgba(0,0,0,.055); border-radius: 9px; padding: 3px;
}
html[data-tema-stil="macos"] .sekme-btn.aktif {
  border-radius: 6px; box-shadow: 0 1px 3px rgba(0,0,0,.14);
}

/* ---------- GİRİŞ ALANLARI / AÇILIR LİSTELER ---------- */
html[data-tema-stil="macos"] .genis-input,
html[data-tema-stil="macos"] input[type="text"],
html[data-tema-stil="macos"] input[type="email"],
html[data-tema-stil="macos"] input[type="password"],
html[data-tema-stil="macos"] input[type="search"],
html[data-tema-stil="macos"] input[type="number"],
html[data-tema-stil="macos"] input[type="date"],
html[data-tema-stil="macos"] textarea,
html[data-tema-stil="macos"] select,
html[data-tema-stil="macos"] .giris-kart input {
  border-radius: 7px; border-color: rgba(0,0,0,.14);
  transition: box-shadow .12s, border-color .12s;
}
html[data-tema-stil="macos"] .genis-input:focus,
html[data-tema-stil="macos"] input:focus,
html[data-tema-stil="macos"] select:focus,
html[data-tema-stil="macos"] textarea:focus,
html[data-tema-stil="macos"] .giris-kart input:focus {
  outline: none; border-color: var(--brand-light);
  box-shadow: 0 0 0 3.5px rgba(10,132,255,.35); /* color-mix() destekleyen tarayıcılarda alttaki satırla ezilir */
  box-shadow: 0 0 0 3.5px color-mix(in srgb, var(--brand-light) 35%, transparent);
}
html[data-tema-stil="macos"] select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23697386' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 11px center; background-size: 10px 7px;
  padding-right: 30px; cursor: pointer;
}

/* ---------- AÇILIR PENCERELER (foto/görsel modal) ---------- */
html[data-tema-stil="macos"] .foto-goruntule {
  background: rgba(20,20,22,.5); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
html[data-tema-stil="macos"] .foto-kare {
  position: relative; border-radius: 12px; padding-top: 38px;
  background: rgba(255,255,255,.92); backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow: 0 0 0 .5px rgba(0,0,0,.1), 0 20px 60px rgba(0,0,0,.35);
}
html[data-tema-stil="macos"] .foto-kare::before {
  content: ""; position: absolute; top: 14px; left: 16px; width: 11px; height: 11px; border-radius: 50%;
  background: #ff5f57; box-shadow: 18px 0 0 #febc2e, 36px 0 0 #28c840;
}
html[data-tema-stil="macos"] .foto-kare::after {
  content: ""; position: absolute; top: 38px; left: 0; right: 0; height: 1px; background: rgba(0,0,0,.08);
}
html[data-tema-stil="macos"] .foto-kontrol { border-top-color: rgba(0,0,0,.08); }

/* ---------- GİRİŞ EKRANI ---------- */
html[data-tema-stil="macos"] #girisEkrani {
  background: linear-gradient(160deg, var(--brand) 0%, var(--brand-light) 55%, #6fb7ff 100%);
}
html[data-tema-stil="macos"] .giris-kart {
  position: relative; border-radius: 16px; padding-top: 46px;
  background: rgba(255,255,255,.9); backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  box-shadow: 0 0 0 .5px rgba(0,0,0,.08), 0 30px 80px rgba(0,0,0,.35);
}
html[data-tema-stil="macos"] .giris-kart::before {
  content: ""; position: absolute; top: 18px; left: 22px; width: 12px; height: 12px; border-radius: 50%;
  background: #ff5f57; box-shadow: 20px 0 0 #febc2e, 40px 0 0 #28c840;
}

/* ---------- GÖRÜNÜM PANELİ ---------- */
html[data-tema-stil="macos"] .tema-kutu { border-radius: 10px; }
html[data-tema-stil="macos"] .tema-kutu.secili { border-color: var(--brand-light); background: rgba(10,132,255,.08); }
html[data-tema-stil="macos"] .ozel-renk-satir { border-radius: 9px; }

/* =========================================================
   MASAÜSTÜ MODU — ALT DOCK + AÇILIR MENÜLER + POPUP PENCERELER
   ---------------------------------------------------------
   Yalnızca Görünüm panelinden "macOS masaüstü modu" açıkken
   (html[data-mac-masaustu]) devreye girer — bkz. app.js:
   temaUygula()/macDockCiz()/macPencerelerCiz(). Kapalıyken bu blok
   tamamen etkisizdir, kenar çubuğu normal şekilde çalışmaya devam
   eder. ========================================================= */
html[data-tema-stil="macos"][data-mac-masaustu] .sidebar { display: none; }
html[data-tema-stil="macos"][data-mac-masaustu] .main { margin-left: 0; padding-bottom: 122px; padding-top: 44px; }
html[data-tema-stil="macos"][data-mac-masaustu] .menu-toggle { display: none !important; }

/* Ana Sayfa (panel) rotasındayken — "masaüstü" olarak düşünülebilecek tek
   an — kontrol panelini göstermek yerine sade bir duvar kağıdı gösterilir
   (bkz. app.js: menuCiz() — masaustuAnaSayfaGoster). Diğer rotalarda
   (Üyelik, Takvim, Forum vb. henüz pencereye taşınmadığı için) .main
   olduğu gibi görünür kalır. */
.mac-masaustu-duvar {
  display: none; position: fixed; inset: 0; z-index: 0;
  background: url("../img/mac-masaustu-duvar.svg") center/cover no-repeat;
}
html[data-tema-stil="macos"][data-mac-masaustu] body.mac-masaustu-anasayfa .main { display: none; }
html[data-tema-stil="macos"][data-mac-masaustu] body.mac-masaustu-anasayfa .mac-masaustu-duvar { display: block; }

/* Dock'un otomatik gizlenmesi — bkz. app.js: macDockHostEl(). İnce bir
   algılayıcı şerit (#macDockAlgilayici, gerçek pointer-events'e sahip)
   ekranın en altında bekler; DOM'da Dock'tan ÖNCE geldiği için genel
   kardeş seçici (~) ile ona "fare üzerinde" durumunu iletebiliyoruz —
   bir sarmalayıcıya pointer-events:none vermek yerine (o zaman :hover
   hiç eşleşmezdi). Dock'un kendisi de kendi :hover'ıyla açık kalır;
   bir açılır menü açıkken (.acik-tut, JS ile eklenir) de gizlenmez. */
.mac-dock-algilayici { position: fixed; left: 0; right: 0; bottom: 0; height: 8px; z-index: 500; }
.mac-dock {
  display: none; position: fixed; left: 50%; bottom: 16px;
  transform: translate(-50%, 0);
  transition: transform .28s cubic-bezier(.22,.9,.32,1);
  gap: 10px; padding: 10px 14px; border-radius: 22px; align-items: flex-end; z-index: 500;
  background: rgba(255,255,255,.55); backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  box-shadow: 0 0 0 .5px rgba(0,0,0,.08), 0 12px 34px rgba(0,0,0,.22);
}
.mac-dock.gorunur { display: flex; }
/* Varsayılan: Dock sürekli görünür. Yönetim panelindeki "Dock'u otomatik
   gizle" seçeneği açıkken (data-mac-dock-oto-gizle), imleç üzerine gelene
   kadar ekranın altında gizlenir. */
html[data-mac-dock-oto-gizle] .mac-dock { transform: translate(-50%, 78px); }
html[data-mac-dock-oto-gizle] .mac-dock-algilayici:hover ~ .mac-dock,
html[data-mac-dock-oto-gizle] .mac-dock:hover,
.mac-dock.acik-tut { transform: translate(-50%, 0); }
/* Dock'un açılır menüsü .nav-flyout-host'u yeniden kullanır (z-index:300) —
   ancak popup pencerelerin z-index'i (MAC_Z_SAYAC ile sürekli artan)
   zamanla bunu geçebilir; açılır menü her zaman pencerelerin ÜSTÜNDE
   kalmalı. */
#macDockDropdownHost.nav-flyout-host.acik { z-index: 900; }
.mac-dock-oge {
  width: 50px; height: 50px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  font-size: 25px; border-radius: 13px; cursor: pointer; position: relative;
  background: rgba(255,255,255,.55); box-shadow: 0 2px 5px rgba(0,0,0,.12);
  transition: transform .06s ease-out; transform-origin: bottom center;
}
/* Büyütme (magnification) efekti JS ile hesaplanır (bkz. app.js:
   macDockBuyutmeBagla) — komşu ikonların da imlece uzaklığına göre
   kademeli büyümesi saf CSS :hover ile yapılamaz. */
.mac-dock-oge.aktif::after {
  content: ""; position: absolute; bottom: -7px; left: 50%; transform: translateX(-50%);
  width: 5px; height: 5px; border-radius: 50%; background: var(--brand);
}

/* Ekranın en üstünde açık pencereler için sekme çubuğu — bkz. app.js:
   macSekmeCubuguCiz(). Tarayıcı sekmeleri gibi: tıklamak o pencereye
   geçer (küçültülmüşse geri getirir), sekmenin kendi "×"i kapatır. */
.mac-sekme-cubugu {
  display: none; position: fixed; left: 0; right: 0; top: 0; z-index: 600;
  gap: 4px; padding: 6px 10px; overflow-x: auto;
  background: rgba(255,255,255,.6); backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid rgba(0,0,0,.08); box-shadow: 0 2px 10px rgba(0,0,0,.06);
}
.mac-sekme-cubugu.gorunur { display: flex; }
.mac-sekme {
  display: flex; align-items: center; gap: 8px; flex-shrink: 0; max-width: 220px;
  padding: 6px 8px 6px 12px; font-size: 12.5px; font-weight: 600; border-radius: 8px;
  cursor: pointer; color: var(--muted); transition: background .12s, color .12s;
}
.mac-sekme:hover { background: rgba(0,0,0,.05); }
.mac-sekme.aktif { background: rgba(255,255,255,.9); color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.mac-sekme.kucultulmus { opacity: .6; font-style: italic; }
.mac-sekme-etiket { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mac-sekme-kapat {
  flex-shrink: 0; width: 16px; height: 16px; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; font-size: 12px; line-height: 1; color: var(--muted);
}
.mac-sekme-kapat:hover { background: rgba(0,0,0,.12); color: var(--text); }
.mac-sekme.sayfa-sekmesi { padding-inline-end: 12px; margin-inline-end: 6px; border-inline-end: 1px solid rgba(0,0,0,.1); }

.mac-pencere {
  position: fixed; display: flex; flex-direction: column; min-width: 280px; min-height: 220px;
  border-radius: 12px; overflow: hidden; z-index: 400;
  background: rgba(246,246,248,.95); backdrop-filter: blur(26px) saturate(180%);
  -webkit-backdrop-filter: blur(26px) saturate(180%);
  box-shadow: 0 0 0 .5px rgba(0,0,0,.1), 0 24px 60px rgba(0,0,0,.32);
}
/* Yalnızca büyüt/küçült gibi ayrık eylemlerde animasyon istiyoruz —
   sürükleme/yeniden boyutlandırma sırasında JS bu class'ın etkisini
   inline style="transition:none" ile geçici olarak iptal eder (bkz.
   app.js: macPencereSuruklemeBaslat/YenidenBoyutlandirBaslat), yoksa
   her fare hareketinde gecikmeli/kayan bir sürükleme hissi olurdu. */
.mac-pencere.gecisli {
  transition: left .25s cubic-bezier(.22,.9,.32,1), top .25s cubic-bezier(.22,.9,.32,1),
    width .25s cubic-bezier(.22,.9,.32,1), height .25s cubic-bezier(.22,.9,.32,1), border-radius .2s;
}
.mac-pencere:fullscreen { width: 100vw !important; height: 100vh !important; left: 0 !important; top: 0 !important; border-radius: 0; }
.mac-pencere-baslik {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; flex-shrink: 0;
  border-bottom: 1px solid rgba(0,0,0,.08); cursor: grab; user-select: none;
  font-size: 13px; font-weight: 600;
}
.mac-pencere-baslik:active { cursor: grabbing; }
.mac-pencere-trafik { display: flex; gap: 9px; flex-shrink: 0; }
.mac-nokta {
  width: 16px; height: 16px; border-radius: 50%; cursor: pointer; position: relative;
  display: flex; align-items: center; justify-content: center; transition: transform .1s;
}
.mac-nokta:hover { transform: scale(1.12); }
.mac-nokta::before {
  content: ""; font-size: 10px; line-height: 1; font-weight: 700; color: rgba(0,0,0,.5);
  opacity: 0; transition: opacity .1s;
}
.mac-nokta:hover::before { opacity: 1; }
.mac-nokta.kirmizi { background: #ff5f57; }
.mac-nokta.kirmizi::before { content: "×"; }
.mac-nokta.sari { background: #febc2e; }
.mac-nokta.sari::before { content: "−"; }
.mac-nokta.yesil { background: #28c840; }
.mac-nokta.yesil::before { content: "⤢"; font-size: 8.5px; }
.mac-nokta.mavi { background: #0a84ff; }
.mac-nokta.mavi::before { content: "⛶"; color: rgba(255,255,255,.85); font-size: 9px; }
.mac-pencere-etiket { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mac-pencere-govde {
  flex: 1; overflow-y: auto; overflow-x: hidden; padding: 14px;
  word-wrap: break-word; overflow-wrap: break-word;
}
/* Ders/konu sayfasından gelen tablolar tam sayfa genişliği için
   tasarlanmış — dar pencerede taşmasınlar diye kendi içlerinde yatay
   kaydırılabilir hale getirilir, pencere sınırları asla aşılmaz. */
.mac-pencere-govde table { display: block; overflow-x: auto; max-width: 100%; }
.mac-pencere-geri { font-size: 12.5px; font-weight: 600; color: var(--brand); cursor: pointer; margin-bottom: 10px; }
.mac-pencere-geri:hover { text-decoration: underline; }

.mac-liste-satir {
  display: flex; align-items: center; gap: 10px; padding: 9px 8px; border-radius: 8px; cursor: pointer; transition: .12s;
}
.mac-liste-satir:hover { background: rgba(0,0,0,.05); }
.mac-liste-ok { color: var(--muted); font-size: 16px; }

/* ---------- TAM SAYFA GÖRÜNÜM BAŞLIK ÇUBUĞU (materyal okuma, Finansallar) ---------- */
html[data-tema-stil="macos"][data-mac-masaustu] .mac-tam-baslik {
  display: flex; align-items: center; gap: 10px; padding: 9px 16px; margin: -44px -30px 18px;
  background: rgba(246,246,248,.92); backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid rgba(0,0,0,.08); position: sticky; top: 0; z-index: 20;
  font-size: 13px; font-weight: 600; transition: all .2s;
}
html[data-tema-stil="macos"][data-mac-masaustu] .mac-tam-baslik.kucuk {
  width: fit-content; border-radius: 0 0 12px 0; margin-bottom: 0;
}
html[data-tema-stil="macos"][data-mac-masaustu] .mac-tam-baslik.kucuk .mac-pencere-etiket { display: none; }
html[data-tema-stil="macos"][data-mac-masaustu] body.mac-genis-mod .main { max-width: none; padding-left: 14px; padding-right: 14px; }

/* ---------- PENCERE YENİDEN BOYUTLANDIRMA TUTAMAÇLARI ---------- */
.mac-resize { position: absolute; }
.mac-resize-n, .mac-resize-s { left: 8px; right: 8px; height: 7px; cursor: ns-resize; }
.mac-resize-n { top: -3px; }
.mac-resize-s { bottom: -3px; }
.mac-resize-e, .mac-resize-w { top: 8px; bottom: 8px; width: 7px; cursor: ew-resize; }
.mac-resize-e { right: -3px; }
.mac-resize-w { left: -3px; }
.mac-resize-ne, .mac-resize-sw { width: 14px; height: 14px; cursor: nesw-resize; }
.mac-resize-nw, .mac-resize-se { width: 14px; height: 14px; cursor: nwse-resize; }
.mac-resize-ne { top: -3px; right: -3px; }
.mac-resize-nw { top: -3px; left: -3px; }
.mac-resize-se { bottom: -3px; right: -3px; }
.mac-resize-sw { bottom: -3px; left: -3px; }

/* ---------- DAR EKRAN (mobil) ---------- */
@media (max-width: 720px) {
  html[data-tema-stil="macos"][data-mac-masaustu] .main { padding-bottom: 96px; }
  .mac-dock { bottom: 10px; padding: 7px 9px; gap: 6px; max-width: calc(100vw - 20px); overflow-x: auto; }
  .mac-dock-oge { width: 42px; height: 42px; font-size: 21px; border-radius: 11px; }
  /* Dokunmatik ekranda büyütme efekti anlamsız (imleç yok) — pencereler
     her zaman ekranı dolduracak şekilde açılır, sürükleme/yeniden
     boyutlandırma tutamaçları gizlenir. */
  .mac-pencere {
    left: 10px !important; top: 10px !important;
    width: calc(100vw - 20px) !important; height: calc(100vh - 120px) !important;
  }
  .mac-pencere .mac-resize { display: none; }
  .mac-pencere-baslik { cursor: default; }
  .mac-sekme { max-width: 140px; }
}