/* ==========================================================================
   🖥️ GÖKÇEOS WEB OPERATING SYSTEM (WEBOS) DESKTOP SHELL & DOCK CSS
   ========================================================================== */

html, body {
  overflow: hidden !important;
  width: 100vw !important;
  height: 100vh !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

:root {
  --os-glass-bg: rgba(15, 23, 42, 0.88);
  --os-glass-border: rgba(56, 189, 248, 0.35);
  --os-glass-glow: rgba(56, 189, 248, 0.2);
  --os-dock-bg: rgba(2, 6, 23, 0.88);
  --os-window-header-bg: rgba(15, 23, 42, 0.98);
  --control-radius-sm: 4px;
  --control-radius-md: 6px;
  --control-radius-lg: 8px;
  --card-radius: 10px;
  --modal-radius: 14px;
  --badge-pill-radius: 9999px;
  --gokce-nav-sidebar-width: 220px;
}

/* ==========================================================================
   🎯 GÖKÇEOS UNIFIED CONTROL TOKEN FAMILY (G-023 SPECIFICATION)
   ========================================================================== */

/* 1. COMPACT (32px) - İkon Yalnız / Tooltip / Aria-Label */
.btn-ctrl-compact,
.win-control-btn,
.sidebar-rail-btn,
.gokceos-menubar-btn {
  height: 32px !important;
  min-height: 32px !important;
  max-height: 32px !important;
  border-radius: 6px !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  transition: all 0.15s ease !important;
  cursor: pointer !important;
  user-select: none !important;
}

/* 2. STANDARD (36px) - İkon + Kısa Metin */
.btn-ctrl-standard,
.btn-standard {
  height: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
  padding: 0 0.85rem !important;
  border-radius: 6px !important;
  font-size: 0.82rem !important;
  font-weight: 750 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  box-sizing: border-box !important;
  transition: all 0.15s ease !important;
  cursor: pointer !important;
  user-select: none !important;
  white-space: nowrap !important;
}

/* 3. PRIMARY - Yalnız Ana Aksiyon; Turkuaz Vurgu */
.btn-primary,
.btn-ctrl-primary {
  background: #0ea5e9 !important;
  background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%) !important;
  border: 1px solid #38bdf8 !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(14, 165, 233, 0.35) !important;
}
.btn-primary:hover,
.btn-ctrl-primary:hover {
  background: linear-gradient(135deg, #38bdf8 0%, #0ea5e9 100%) !important;
  border-color: #7dd3fc !important;
  box-shadow: 0 4px 14px rgba(14, 165, 233, 0.55) !important;
  transform: translateY(-1px) !important;
}
.btn-primary:active,
.btn-ctrl-primary:active {
  transform: scale(0.98) !important;
}

/* 4. NEUTRAL - Varsayılan Koyu Yüzey */
.btn-secondary,
.btn-neutral,
.btn-ctrl-neutral {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  color: #cbd5e1 !important;
}
.btn-secondary:hover,
.btn-neutral:hover,
.btn-ctrl-neutral:hover {
  background: rgba(255, 255, 255, 0.09) !important;
  border-color: rgba(56, 189, 248, 0.35) !important;
  color: #ffffff !important;
}

/* 5. DANGER - Yıkıcı Aksiyon */
.btn-danger,
.btn-ctrl-danger {
  background: rgba(239, 68, 68, 0.18) !important;
  border: 1px solid rgba(239, 68, 68, 0.4) !important;
  color: #f87171 !important;
}
.btn-danger:hover,
.btn-ctrl-danger:hover {
  background: rgba(239, 68, 68, 0.32) !important;
  border-color: #ef4444 !important;
  color: #ffffff !important;
}

/* 6. DISABLED & FOCUS-VISIBLE TOKENS */
button:disabled,
.btn:disabled,
.btn-ctrl-compact:disabled,
.btn-ctrl-standard:disabled {
  opacity: 0.45 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

button:focus-visible,
.btn:focus-visible,
.win-control-btn:focus-visible,
.gokceos-cm-item:focus-visible,
.gokceos-app-card:focus-visible {
  outline: 2px solid #38bdf8 !important;
  outline-offset: 1px !important;
}

/* 7. UNCLIPPED DRAG OVERFLOW RULE */
body.gokce-icon-drag-active #os-desktop-grid,
body.gokce-icon-drag-active .gokceos-desktop-grid,
body.gokce-icon-drag-active .gokceos-desktop-pages-slider,
body.gokce-icon-drag-active .gokceos-desktop-page {
  overflow: visible !important;
}

/* DESKTOP CANVAS CONTAINER */
#gokceos-desktop-canvas {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 99999;
  background: 
    radial-gradient(circle at 15% 15%, rgba(56, 189, 248, 0.15), transparent 45%),
    radial-gradient(circle at 85% 85%, rgba(168, 85, 247, 0.15), transparent 45%),
    radial-gradient(circle at 50% 50%, rgba(34, 197, 94, 0.08), transparent 60%),
    linear-gradient(145deg, #020617 0%, #090d16 50%, #030712 100%);
  background-size: cover;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  user-select: none;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

/* 🛑 SUPPRESS LEGACY PROTOTYPE TOPBAR & APP-LAYOUT ON LOGIN AND WEBOS */
#app-layout,
#topbar:not(.gokceos-top-menubar),
#main-frame,
#sidebar {
  display: none !important;
}

body.gokce-force-classic #app-layout,
body.gokce-force-classic #topbar,
body.gokce-force-classic #main-frame,
body.gokce-force-classic #sidebar {
  display: flex !important;
}

/* TOP STATUS BAR (macOS / Linux Style) */
.gokceos-top-menubar {
  height: 36px;
  background: rgba(10, 15, 30, 0.88);
  backdrop-filter: blur(32px) saturate(190%);
  -webkit-backdrop-filter: blur(32px) saturate(190%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  padding: 0 0.85rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 4000;
  position: relative;
  user-select: none;
}

.gokceos-top-menubar button {
  min-height: 0 !important;
}

.gokceos-menubar-left {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* ==========================================================================
   💠 GÖKÇEOS ULTRA-PREMIUM LOGO & LUMINOUS AURA EFFECTS (CRISP & CLEAR)
   ========================================================================== */

@keyframes gokceLogoAuraPulse {
  0%, 100% {
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6)) 
            drop-shadow(0 0 5px rgba(56, 189, 248, 0.35));
    opacity: 0.95;
    transform: scale(1);
  }
  50% {
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.7)) 
            drop-shadow(0 0 9px rgba(56, 189, 248, 0.6));
    opacity: 1;
    transform: scale(1.03);
  }
}

.gokce-brand-emblem,
.gokceos-brand-logo-img {
  image-rendering: auto;
  -webkit-font-smoothing: antialiased;
  display: block;
  object-fit: contain;
  transition: all 0.22s ease;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5)) 
          drop-shadow(0 0 5px rgba(56, 189, 248, 0.35));
}

.gokce-brand-emblem.animated,
.gokceos-brand-logo-img.animated {
  animation: gokceLogoAuraPulse 3.5s ease-in-out infinite;
}

.gokce-brand-emblem:hover,
.gokceos-brand-logo-img:hover {
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.7)) 
          drop-shadow(0 0 10px rgba(56, 189, 248, 0.75)) !important;
  transform: scale(1.08) !important;
}

.gokceos-apple-logo-btn {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  background: transparent;
  border: none !important;
  color: #38bdf8;
  font-weight: 850;
  font-size: 0.85rem;
  cursor: pointer;
  padding: 0 0.55rem;
  height: 26px !important;
  min-height: 0 !important;
  max-height: 26px !important;
  border-radius: 8px;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}

.gokceos-apple-logo-btn:hover {
  background: rgba(56, 189, 248, 0.12) !important;
  border: none !important;
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.25) !important;
  color: #7dd3fc !important;
  transform: translateY(-0.5px);
}

.gokceos-apple-logo-btn:hover .gokce-brand-emblem {
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8)) drop-shadow(0 0 10px rgba(56, 189, 248, 0.8)) !important;
  transform: scale(1.08);
}

.dock-item.dock-fixed-item:hover .gokce-brand-emblem {
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.8)) drop-shadow(0 0 12px rgba(56, 189, 248, 0.85)) !important;
  transform: scale(1.1);
}

.gokceos-menubar-menu {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.os-nav-dropdown {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 100%;
}

.os-nav-dropdown-trigger {
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  color: #cbd5e1 !important;
  font-size: 0.77rem !important;
  font-weight: 700 !important;
  padding: 0 0.55rem !important;
  height: 26px !important;
  min-height: 0 !important;
  max-height: 26px !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.35rem !important;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important;
  white-space: nowrap !important;
}

.os-nav-dropdown-trigger:hover,
.os-nav-dropdown:hover .os-nav-dropdown-trigger,
.os-nav-dropdown.is-open .os-nav-dropdown-trigger {
  background: rgba(56, 189, 248, 0.12) !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  color: #38bdf8 !important;
  text-shadow: 0 0 10px rgba(56, 189, 248, 0.7) !important;
  transform: translateY(-0.5px) !important;
}

.os-nav-dropdown-trigger small {
  transition: transform 0.18s ease;
}

.os-nav-dropdown:hover .os-nav-dropdown-trigger small,
.os-nav-dropdown.is-open .os-nav-dropdown-trigger small {
  transform: translateY(1px);
  color: #38bdf8;
}

.os-nav-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 240px;
  background: rgba(15, 23, 42, 0.98);
  backdrop-filter: blur(32px) saturate(180%);
  -webkit-backdrop-filter: blur(32px) saturate(180%);
  border: 1.5px solid rgba(56, 189, 248, 0.35);
  border-radius: 12px;
  padding: 0.45rem;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.92), 0 0 25px rgba(56, 189, 248, 0.2);
  display: none;
  flex-direction: column;
  gap: 0.25rem;
  z-index: 99999;
  animation: slideUpFade 0.12s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: auto;
}

/* 🛡️ INVISIBLE HOVER BRIDGE: Guarantees mouse never loses hover when moving downwards */
.os-nav-dropdown-menu::before {
  content: '';
  position: absolute;
  top: -12px;
  left: 0;
  right: 0;
  height: 14px;
  background: transparent;
  pointer-events: auto;
}

.os-nav-dropdown:hover .os-nav-dropdown-menu,
.os-nav-dropdown.is-open .os-nav-dropdown-menu {
  display: flex !important;
}

.os-dropdown-item {
  display: grid !important;
  grid-template-columns: var(--nav-icon-column, 24px) 1fr auto !important;
  align-items: center !important;
  gap: 0.5rem !important;
  width: 100% !important;
  padding: 0.35rem var(--nav-row-padding-x, 12px) !important;
  border-radius: 7px !important;
  background: transparent !important;
  border: none !important;
  color: #e2e8f0 !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  text-align: left !important;
  transition: all 0.12s ease !important;
  white-space: nowrap !important;
  min-height: 30px !important;
  height: 30px !important;
  max-height: 30px !important;
  box-sizing: border-box !important;
}

.os-dropdown-item span:first-child {
  font-size: 1.05rem;
  width: var(--nav-icon-column, 24px);
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.os-dropdown-item span:nth-child(2) {
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
}
  flex: 1;
  text-align: left !important;
}

.os-dropdown-item:hover {
  background: rgba(56, 189, 248, 0.22) !important;
  color: #38bdf8 !important;
  transform: translateX(3px);
}

.os-dropdown-sep {
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
  margin: 0.25rem 0.2rem;
}

/* ==========================================================================
   🍎 RIGHT TRAY: TAKIM HALİNDE BÜTÜNSEL MONOKROM DURUM ALANI
   ========================================================================== */
.gokceos-menubar-right {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

/* 👑 HARUN TAKIŞ PROFİL BUTONU (EN SOLDA - SADECE TIKLAYINCA AÇILIR) */
.mac-profile-dropdown {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.mac-profile-btn {
  background: transparent;
  border: none;
  color: #cbd5e1;
  height: 26px !important;
  min-height: 0 !important;
  max-height: 26px !important;
  padding: 0 0.45rem;
  border-radius: 6px;
  font-size: 0.76rem;
  font-weight: 750;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.mac-profile-btn:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
}

/* 🌐 DİL SEÇİCİ (TR - SADECE TIKLAYINCA AÇILIR) */
.mac-lang-dropdown {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.mac-lang-btn {
  background: transparent;
  border: none;
  color: #cbd5e1;
  padding: 0 0.35rem;
  border-radius: 6px;
  height: 26px !important;
  min-height: 0 !important;
  max-height: 26px !important;
  font-size: 0.76rem;
  font-weight: 750;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.2rem;
  transition: all 0.15s ease;
}

.mac-lang-btn:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
}

/* 🔒 CLICK-ONLY DROPDOWNS: NO HOVER OPENING, OPENS ONLY ON CLICK */
.os-click-dropdown {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.os-click-dropdown .os-click-menu {
  display: none !important;
}

.os-click-dropdown.is-open .os-click-menu {
  display: flex !important;
}

/* 🚫 ARROWS / CARETS REMOVED COMPLETELY FROM HARUN TAKIŞ AND DİL */
.mac-profile-btn::after,
.mac-profile-btn::before,
.mac-lang-btn::after,
.mac-lang-btn::before,
.os-click-trigger::after,
.os-click-trigger::before {
  display: none !important;
  content: none !important;
}

/* 🎛️ SAĞ TRAY MONOKROM İKON BUTONLARI (CHAT, BİLDİRİM, KONTROL, SES) */
.mac-tray-icon-btn {
  position: relative;
  width: 26px !important;
  height: 26px !important;
  min-height: 0 !important;
  max-height: 26px !important;
  padding: 0 !important;
  border-radius: 6px;
  background: transparent !important;
  border: none !important;
  color: #cbd5e1 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
  overflow: visible !important;
  flex-shrink: 0;
}

.mac-tray-icon-btn svg {
  stroke: #cbd5e1;
  transition: stroke 0.15s ease;
}

.mac-tray-icon-btn:hover,
.mac-tray-icon-btn.is-active,
.mac-tray-icon-btn.active {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
}

.mac-tray-icon-btn:hover svg,
.mac-tray-icon-btn.is-active svg,
.mac-tray-icon-btn.active svg {
  stroke: #ffffff;
}

/* 🕒 SAAT & TARİH WIDGET (EN SAĞDA) */
.mac-clock-widget {
  color: #cbd5e1;
  font-weight: 750;
  font-size: 0.76rem;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 0.45rem;
  border-radius: 6px;
  height: 26px !important;
  min-height: 0 !important;
  max-height: 26px !important;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.mac-clock-widget:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
}

/* 🎙️ SESLİ ASİSTAN BUTONU (ZEMİN VE ÇERÇEVE KALDIRILDI) */
.mac-siri-orb-btn {
  position: relative;
  width: 26px !important;
  height: 26px !important;
  min-height: 0 !important;
  max-height: 26px !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
  overflow: visible !important;
  flex-shrink: 0;
}

.mac-siri-orb-btn:hover,
.mac-siri-orb-btn.active {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  transform: scale(1.15);
  filter: drop-shadow(0 0 8px rgba(236, 72, 153, 0.9));
}

.siri-orb-glow {
  display: none !important;
}

/* GökçeOS Kontrol Merkezi Drawer / Popup */
#mac-control-center-popup {
  position: fixed;
  top: 38px;
  right: 60px;
  width: 320px;
  background: rgba(15, 23, 42, 0.96);
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  border: 1.5px solid rgba(56, 189, 248, 0.35);
  border-radius: 16px;
  padding: 1rem;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.9), 0 0 30px rgba(56, 189, 248, 0.25);
  z-index: 7500;
  display: none;
  flex-direction: column;
  gap: 0.75rem;
  animation: slideDownFade 0.15s ease-out;
}

#mac-control-center-popup.open {
  display: flex;
}

.siri-orb-glow {
  position: absolute;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: radial-gradient(circle, #ec4899 0%, #a855f7 50%, #38bdf8 100%);
  filter: blur(4px);
  opacity: 0.7;
  animation: siriOrbPulse 2s ease-in-out infinite alternate;
}

.siri-orb-icon {
  position: relative;
  z-index: 2;
  font-size: 1.05rem;
}

@keyframes siriOrbPulse {
  0% { transform: scale(0.85); opacity: 0.5; }
  100% { transform: scale(1.15); opacity: 0.95; }
}

/* 🎙️ FLOATING SIRI DYNAMIC WAVE OVERLAY (SAATİN YANINDA SES KIPIRTISI) */
#mac-siri-overlay {
  position: fixed;
  top: 40px;
  right: 16px;
  width: 360px;
  background: rgba(15, 23, 42, 0.96);
  backdrop-filter: blur(40px) saturate(190%);
  -webkit-backdrop-filter: blur(40px) saturate(190%);
  border: 1.5px solid rgba(236, 72, 153, 0.45);
  border-radius: 18px;
  padding: 1.1rem;
  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.92), 0 0 35px rgba(236, 72, 153, 0.25), 0 0 20px rgba(56, 189, 248, 0.2);
  z-index: 8000;
  display: none;
  flex-direction: column;
  gap: 0.85rem;
  transform: scale(0.92) translateY(-8px);
  opacity: 0;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

#mac-siri-overlay.open {
  display: flex;
  transform: scale(1) translateY(0);
  opacity: 1;
}

.siri-overlay-top {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.siri-glowing-sphere {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ec4899, #8b5cf6, #38bdf8);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 20px rgba(236, 72, 153, 0.6), inset 0 0 10px rgba(255, 255, 255, 0.5);
  animation: siriSphereSpin 3s linear infinite;
  flex-shrink: 0;
}

.siri-sphere-core {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 12px #ffffff;
}

@keyframes siriSphereSpin {
  0% { transform: rotate(0deg) scale(0.95); filter: hue-rotate(0deg); }
  50% { transform: rotate(180deg) scale(1.05); filter: hue-rotate(90deg); }
  100% { transform: rotate(360deg) scale(0.95); filter: hue-rotate(0deg); }
}

.siri-status-box {
  flex: 1;
}

.siri-close-btn {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #94a3b8;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  transition: all 0.15s;
}

.siri-close-btn:hover {
  background: rgba(239, 68, 68, 0.2);
  color: #ef4444;
}

/* 🌊 SIRI ANIMATED SOUND WAVE (SES KIPIRTISI DALGALARI) */
.siri-waveform-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 48px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 0 1rem;
}

.siri-wave-bar {
  width: 5px;
  border-radius: 99px;
  background: linear-gradient(180deg, #ec4899 0%, #8b5cf6 50%, #38bdf8 100%);
  box-shadow: 0 0 10px rgba(236, 72, 153, 0.5);
  animation: siriWaveBounce 1.2s ease-in-out infinite alternate;
}

.siri-wave-bar.bar-1 { height: 16px; animation-delay: 0.1s; }
.siri-wave-bar.bar-2 { height: 28px; animation-delay: 0.3s; }
.siri-wave-bar.bar-3 { height: 42px; animation-delay: 0.15s; }
.siri-wave-bar.bar-4 { height: 34px; animation-delay: 0.4s; }
.siri-wave-bar.bar-5 { height: 44px; animation-delay: 0.25s; }
.siri-wave-bar.bar-6 { height: 24px; animation-delay: 0.5s; }
.siri-wave-bar.bar-7 { height: 14px; animation-delay: 0.2s; }

@keyframes siriWaveBounce {
  0% { transform: scaleY(0.3); opacity: 0.6; }
  100% { transform: scaleY(1); opacity: 1; filter: brightness(1.2); }
}

.siri-dialogue-area {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 0.75rem 0.9rem;
  color: #f1f5f9;
  font-size: 0.84rem;
  line-height: 1.45;
  font-weight: 600;
  min-height: 54px;
}

.siri-quick-prompts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.siri-prompt-chip {
  background: rgba(236, 72, 153, 0.12);
  border: 1px solid rgba(236, 72, 153, 0.3);
  color: #f472b6;
  font-size: 0.72rem;
  font-weight: 750;
  padding: 0.25rem 0.6rem;
  border-radius: 99px;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
}

.siri-prompt-chip:hover {
  background: rgba(236, 72, 153, 0.28);
  border-color: #ec4899;
  color: #ffffff;
  transform: translateY(-1px);
}

.siri-input-row {
  display: flex;
  gap: 0.4rem;
}

.siri-input-field {
  flex: 1;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  padding: 0.45rem 0.8rem;
  color: #ffffff;
  font-size: 0.8rem;
  outline: none;
}

.siri-input-field:focus {
  border-color: #ec4899;
  box-shadow: 0 0 10px rgba(236, 72, 153, 0.3);
}

.siri-send-btn {
  background: linear-gradient(135deg, #ec4899, #8b5cf6);
  border: none;
  color: #ffffff;
  padding: 0.45rem 0.85rem;
  border-radius: 10px;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.15s;
}

.siri-send-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 0 15px rgba(236, 72, 153, 0.5);
}

/* 🟢 HEY GÖKÇE WAKE WORD BADGE & LISTENER CONTROLS */
.siri-wake-badge-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(34, 197, 94, 0.08);
  border: 1px solid rgba(34, 197, 94, 0.25);
  border-radius: 9px;
  padding: 0.35rem 0.65rem;
  margin-top: -0.2rem;
}

.siri-wake-badge {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  color: #86efac;
  font-size: 0.72rem;
  font-weight: 800;
  cursor: pointer;
  user-select: none;
}

.siri-wake-pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 10px #22c55e;
  animation: pulseBadge 1.5s infinite;
}

.siri-wake-badge.muted .siri-wake-pulse-dot {
  background: #ef4444;
  box-shadow: 0 0 8px #ef4444;
}

.siri-wake-badge.muted {
  color: #fca5a5;
}

.siri-mic-trigger-btn {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #cbd5e1;
  font-size: 0.68rem;
  font-weight: 750;
  padding: 0.15rem 0.45rem;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.15s;
}

.siri-mic-trigger-btn:hover {
  background: rgba(34, 197, 94, 0.2);
  color: #ffffff;
}

.os-pill-badge {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 0.18rem 0.55rem;
  border-radius: 99px;
  color: #cbd5e1;
  font-family: monospace;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-weight: 750;
  font-size: 0.72rem;
}

.os-pill-badge.gpu {
  border-color: rgba(34, 197, 94, 0.45);
  color: #22c55e;
  background: rgba(34, 197, 94, 0.12);
}

.os-clock-widget {
  color: #ffffff;
  font-weight: 800;
  font-size: 0.78rem;
  background: transparent;
  padding: 0.2rem 0.45rem;
  border-radius: 6px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}

.os-clock-widget:hover {
  background: rgba(255, 255, 255, 0.1);
}

/* DESKTOP WORKSPACE AREA */
.gokceos-desktop-area {
  flex: 1;
  position: relative;
  overflow: hidden;
  padding: 1.5rem;
}

/* WINDOWS MARQUEE LASSO SELECTION BOX */
#os-marquee-selection-box {
  position: absolute;
  background: rgba(56, 189, 248, 0.18);
  border: 1.5px solid #38bdf8;
  border-radius: 4px;
  box-shadow: 0 0 15px rgba(56, 189, 248, 0.25);
  pointer-events: none;
  z-index: 200;
  display: none;
}

/* DESKTOP APP ICONS GRID / ABSOLUTE ITEMS */
.gokceos-desktop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 100px);
  grid-auto-rows: 110px;
  gap: 1.2rem;
  position: absolute;
  top: 1.5rem;
  left: 1.5rem;
  z-index: 150;
}

.gokceos-app-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.5rem;
  border-radius: 14px;
  cursor: pointer;
  transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.15s;
  border: 1.5px solid transparent;
  background: transparent;
  width: 100px;
  height: 105px;
  user-select: none;
}

.gokceos-app-icon:hover {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  transform: translateY(-2px) scale(1.045);
}

.gokceos-app-icon.selected {
  background: rgba(56, 189, 248, 0.22) !important;
  border-color: #38bdf8 !important;
  box-shadow: 0 0 20px rgba(56, 189, 248, 0.4) !important;
}

.gokceos-app-icon.selected .gokceos-app-icon-badge {
  transform: scale(1.12);
}

.gokceos-app-icon.is-dragging {
  opacity: 0.85;
  transform: scale(1.08);
  z-index: 10000 !important;
}

.gokceos-app-icon-badge {
  width: 54px;
  height: 54px;
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.6), inset 0 1px 1px rgba(255, 255, 255, 0.25);
  position: relative;
  transition: transform 0.2s;
}

.gokceos-app-icon:hover .gokceos-app-icon-badge {
  transform: scale(1.1);
}

.gokceos-app-label {
  color: #f8fafc;
  font-size: 0.72rem;
  font-weight: 800;
  text-align: center;
  line-height: 1.25;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.95);
  max-width: 95px;
  word-break: break-word;
}

/* DESKTOP LIVE WIDGETS (SÜRÜKLENEBİLİR & İBRELİ KARTLAR) */
/* ==========================================================================
   🧩 DESKTOP LIVE WIDGETS (ULTRA-PREMIUM FROSTED CRYSTAL GLASS / ŞEFFAF CAM EFEKTİ)
   ========================================================================== */
.gokceos-desktop-widgets {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 120;
}

.gokceos-widget-card {
  position: absolute;
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.45) 0%, rgba(15, 23, 42, 0.35) 100%) !important;
  backdrop-filter: blur(28px) saturate(210%) brightness(108%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(210%) brightness(108%) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: 20px !important;
  padding: 1.05rem 1.2rem !important;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 -1px 0 rgba(0, 0, 0, 0.25) !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  pointer-events: auto;
  user-select: none;
  width: 326px !important;
  max-width: 326px !important;
  min-width: 326px !important;
  box-sizing: border-box !important;
  overflow: hidden;
}

/* Glowing top specular highlight line */
.gokceos-widget-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.7), transparent);
  pointer-events: none;
}

.gokceos-widget-card:hover {
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.6) 0%, rgba(15, 23, 42, 0.5) 100%) !important;
  border-color: rgba(255, 255, 255, 0.35) !important;
  box-shadow: 0 28px 65px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 30px rgba(56, 189, 248, 0.2) !important;
  transform: translateY(-3px) scale(1.01);
}

.gokceos-widget-card.is-dragging {
  cursor: grabbing !important;
  opacity: 0.96;
  background: rgba(15, 23, 42, 0.72) !important;
  box-shadow: 0 35px 90px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 35px rgba(56, 189, 248, 0.5) !important;
  border-color: #38bdf8 !important;
  z-index: 900 !important;
  transform: scale(1.03);
}

/* Individual Neon Ambient Accents for each Widget */
#widget-patron-finance {
  border-top: 1px solid rgba(245, 158, 11, 0.5) !important;
  border-left: 2px solid rgba(245, 158, 11, 0.6) !important;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 0 24px rgba(245, 158, 11, 0.15) !important;
}
#widget-patron-finance:hover {
  border-color: rgba(245, 158, 11, 0.8) !important;
  box-shadow: 0 28px 65px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 0 32px rgba(245, 158, 11, 0.3) !important;
}

#widget-hardware-gauges {
  border-top: 1px solid rgba(34, 197, 94, 0.5) !important;
  border-left: 2px solid rgba(34, 197, 94, 0.6) !important;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 0 24px rgba(34, 197, 94, 0.15) !important;
}
#widget-hardware-gauges:hover {
  border-color: rgba(34, 197, 94, 0.8) !important;
  box-shadow: 0 28px 65px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 0 32px rgba(34, 197, 94, 0.3) !important;
}

#widget-hotel-occupancy {
  border-top: 1px solid rgba(56, 189, 248, 0.5) !important;
  border-left: 2px solid rgba(56, 189, 248, 0.6) !important;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 0 24px rgba(56, 189, 248, 0.15) !important;
}
#widget-hotel-occupancy:hover {
  border-color: rgba(56, 189, 248, 0.8) !important;
  box-shadow: 0 28px 65px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 0 32px rgba(56, 189, 248, 0.3) !important;
}

#widget-quick-shortcuts {
  border-top: 1px solid rgba(168, 85, 247, 0.5) !important;
  border-left: 2px solid rgba(168, 85, 247, 0.6) !important;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 0 24px rgba(168, 85, 247, 0.15) !important;
}
#widget-quick-shortcuts:hover {
  border-color: rgba(168, 85, 247, 0.8) !important;
  box-shadow: 0 28px 65px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 0 32px rgba(168, 85, 247, 0.3) !important;
}

/* Header with Frosted Glass styling */
.widget-drag-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
  cursor: grab;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.widget-drag-header:active {
  cursor: grabbing;
}

.widget-title-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.widget-grip-handle {
  color: rgba(255, 255, 255, 0.35);
  font-size: 0.95rem;
  cursor: grab;
  transition: all 0.2s ease;
  line-height: 1;
}

.widget-drag-header:hover .widget-grip-handle {
  color: #38bdf8;
  transform: scale(1.15);
}

/* Glass Badge Pill */
.widget-glass-badge {
  padding: 0.18rem 0.6rem;
  border-radius: 20px;
  font-size: 0.68rem;
  font-weight: 850;
  letter-spacing: 0.4px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* Frosted Glass Gauge Capsule */
.widget-gauges-row {
  display: flex;
  justify-content: space-around;
  align-items: center;
  gap: 0.6rem;
  margin: 0.65rem 0;
  background: rgba(255, 255, 255, 0.04) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  padding: 0.65rem 0.5rem;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 6px 18px rgba(0, 0, 0, 0.2) !important;
}

.radial-gauge-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.gauge-svg-wrap {
  position: relative;
  width: 58px;
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.3));
}

.gauge-svg-wrap svg {
  transform: rotate(-90deg);
}

.gauge-center-text {
  position: absolute;
  font-size: 0.72rem;
  font-weight: 900;
  font-family: monospace;
  color: #ffffff;
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
}

.gauge-sublabel {
  font-size: 0.68rem;
  color: #cbd5e1;
  font-weight: 750;
  margin-top: 0.25rem;
}

/* ULTRA-PREMIUM CRYSTAL GLASS BUTTONS */
.widget-quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.75rem;
}

.widget-action-btn {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.03) 100%) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  color: #f1f5f9 !important;
  padding: 0.45rem 0.8rem !important;
  border-radius: 12px !important;
  font-size: 0.75rem !important;
  font-weight: 750 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.4rem !important;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 4px 12px rgba(0, 0, 0, 0.2) !important;
}

.widget-action-btn:hover {
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.28) 0%, rgba(2, 132, 199, 0.4) 100%) !important;
  border-color: rgba(56, 189, 248, 0.6) !important;
  color: #ffffff !important;
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow: 0 8px 22px rgba(56, 189, 248, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.45) !important;
}

/* NATIVE FLOATING OS WINDOWS */
.gokceos-os-window {
  position: absolute;
  min-width: 480px;
  min-height: 340px;
  background: rgba(15, 23, 42, 0.96);
  backdrop-filter: blur(28px);
  border: 1.5px solid rgba(56, 189, 248, 0.35);
  border-radius: 18px;
  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.85), 0 0 40px rgba(56, 189, 248, 0.18);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: box-shadow 0.2s;
  z-index: 500;
}

.gokceos-os-window.active {
  border-color: #38bdf8;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.92), 0 0 50px rgba(56, 189, 248, 0.35);
  z-index: 1000;
}

/* 👑 PATRON HARUN VIP SUPERCHARGED WINDOW STYLES */
.gokceos-os-window.patron-supercharged {
  border: 1.5px solid #f59e0b !important;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.95), 0 0 45px rgba(245, 158, 11, 0.45) !important;
}
.gokceos-os-window.patron-supercharged .gokceos-window-titlebar {
  background: linear-gradient(90deg, rgba(245, 158, 11, 0.15) 0%, rgba(15, 23, 42, 0.95) 50%, rgba(6, 182, 212, 0.12) 100%) !important;
  border-bottom: 1px solid rgba(245, 158, 11, 0.4) !important;
}
.win-patron-5080-btn,
.win-tool-btn.win-patron-5080-btn {
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.2) 0%, rgba(2, 132, 199, 0.3) 100%) !important;
  border: 1px solid rgba(6, 182, 212, 0.6) !important;
  color: #38bdf8 !important;
  border-radius: 6px !important;
  padding: 0 0.55rem !important;
  height: 28px !important;
  min-height: 28px !important;
  max-height: 28px !important;
  font-size: 0.72rem !important;
  font-weight: 850 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.3rem !important;
  box-shadow: 0 0 10px rgba(6, 182, 212, 0.25) !important;
  transition: all 0.15s ease !important;
  user-select: none !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}
.win-patron-5080-btn:hover,
.win-tool-btn.win-patron-5080-btn:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 0 16px rgba(6, 182, 212, 0.55) !important;
  border-color: #38bdf8 !important;
  color: #ffffff !important;
}
.win-patron-5080-btn:active,
.win-tool-btn.win-patron-5080-btn:active {
  transform: scale(0.97) !important;
}

.gokceos-os-window.minimized {
  display: none !important;
}

.gokceos-os-window.maximized {
  top: 36px !important;
  left: 0 !important;
  width: 100vw !important;
  height: calc(100vh - 36px) !important;
  border-radius: 0 !important;
  border-left: none !important;
  border-right: none !important;
  border-bottom: none !important;
}

.gokceos-os-window.snapped-left {
  top: 36px !important;
  left: 0 !important;
  width: 50vw !important;
  height: calc(100vh - 36px) !important;
  border-radius: 0 !important;
}

.gokceos-os-window.snapped-right {
  top: 36px !important;
  left: 50vw !important;
  width: 50vw !important;
  height: calc(100vh - 36px) !important;
  border-radius: 0 !important;
}

/* 8-DIRECTION WINDOW RESIZE HANDLES */
.win-resize-handle {
  position: absolute;
  z-index: 1200;
  pointer-events: auto;
}
.handle-n { top: 0; left: 20px; right: 20px; height: 8px; cursor: ns-resize; }
.handle-s { bottom: 0; left: 20px; right: 20px; height: 8px; cursor: ns-resize; }
.handle-e { top: 20px; bottom: 20px; right: 0; width: 8px; cursor: ew-resize; }
.handle-w { top: 20px; bottom: 20px; left: 0; width: 8px; cursor: ew-resize; }
.handle-ne { top: 0; right: 0; width: 22px; height: 22px; cursor: nesw-resize; z-index: 1201; }
.handle-nw { top: 0; left: 0; width: 22px; height: 22px; cursor: nwse-resize; z-index: 1201; }
.handle-se { bottom: 0; right: 0; width: 22px; height: 22px; cursor: nwse-resize; z-index: 1201; }
/* CANONICAL GÖKÇEOS WINDOW TITLEBAR & CONTROLS */
.gokceos-window-titlebar {
  height: 42px;
  min-height: 42px;
  max-height: 42px;
  background: linear-gradient(180deg, #10243b 0%, #0c1c2e 100%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.8rem;
  cursor: grab;
  user-select: none;
  flex-shrink: 0;
  box-sizing: border-box;
}

.gokceos-window-titlebar:active {
  cursor: grabbing;
}

/* SOL: App Icon + App Name + Optional Status Badge */
.gokceos-window-title {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #f1f5f9;
  font-size: 0.88rem;
  font-weight: 750;
  max-width: 70%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.win-title-icon {
  font-size: 1.15rem;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.win-title-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.win-title-badge {
  font-size: 0.68rem;
  font-weight: 750;
  padding: 2px 7px;
  border-radius: 4px;
  background: rgba(56, 189, 248, 0.15);
  border: 1px solid rgba(56, 189, 248, 0.35);
  color: #38bdf8;
  flex-shrink: 0;
  white-space: nowrap;
}

.win-badge-live {
  background: rgba(34, 197, 94, 0.15);
  border-color: rgba(34, 197, 94, 0.4);
  color: #4ade80;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.win-badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 6px #22c55e;
}

/* SAĞ: Standartlaştırılmış Pencere Kontrolleri (Minimize, Maximize, Close) */
.gokceos-window-controls {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  margin-left: auto !important;
  flex-shrink: 0 !important;
}

.win-control-btn {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  max-width: 32px !important;
  max-height: 32px !important;
  border-radius: 6px !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  background: rgba(255, 255, 255, 0.03) !important;
  color: #94a3b8 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 !important;
  transition: all 0.15s ease !important;
  flex-shrink: 0 !important;
}

.win-control-btn svg {
  pointer-events: none;
}

.win-control-btn:focus-visible {
  outline: 2px solid #38bdf8 !important;
  outline-offset: 1px !important;
}

.win-minimize-btn:hover,
.win-maximize-btn:hover {
  background: rgba(56, 189, 248, 0.15) !important;
  border-color: rgba(56, 189, 248, 0.4) !important;
  color: #38bdf8 !important;
}

.win-close-btn:hover {
  background: rgba(239, 68, 68, 0.2) !important;
  border-color: rgba(239, 68, 68, 0.5) !important;
  color: #ef4444 !important;
}

.gokceos-window-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.gokceos-window-actions button {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  outline: none !important;
  color: #cbd5e1 !important;
  padding: 0 !important;
  border-radius: 6px !important;
  min-height: 24px !important;
  max-height: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  max-width: 24px !important;
  width: 24px !important;
  font-size: 0.75rem !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  box-sizing: border-box !important;
  flex-shrink: 0 !important;
  transition: all 0.15s cubic-bezier(0.16, 1, 0.3, 1) !important;
  user-select: none;
}

.gokceos-window-actions button:hover {
  background: rgba(56, 189, 248, 0.2) !important;
  border-color: rgba(56, 189, 248, 0.45) !important;
  color: #ffffff !important;
  box-shadow: 0 0 8px rgba(56, 189, 248, 0.3) !important;
}

.gokceos-window-actions button:active {
  transform: scale(0.92) !important;
}

/* ==========================================================================
   🪟 WINDOW EXPLORER COMMAND BAR & TOOLBAR (WINDOWS 11 STYLE)
   ========================================================================== */
.gokceos-window-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.35rem 0.85rem;
  background: rgba(12, 18, 36, 0.85);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
  user-select: none;
  min-height: 38px;
  max-height: 50px;
  box-sizing: border-box;
  position: relative !important;
  z-index: 1000 !important;
  overflow: visible;
  transition: max-height 0.25s cubic-bezier(0.4, 0, 0.2, 1), min-height 0.25s ease, opacity 0.2s ease, padding 0.25s ease, border-bottom 0.2s ease;
}

.gokceos-window-toolbar.is-collapsed {
  max-height: 0 !important;
  min-height: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  opacity: 0 !important;
  overflow: hidden !important;
  border-bottom: 0px solid transparent !important;
  pointer-events: none !important;
}

.win-toggle-toolbar-action {
  width: 24px !important;
  height: 22px !important;
  min-width: 24px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #38bdf8 !important;
  font-size: 0.65rem !important;
  font-weight: 900 !important;
  border-radius: 5px !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.win-toggle-toolbar-action:hover {
  background: rgba(56, 189, 248, 0.22) !important;
  border-color: #38bdf8 !important;
  color: #ffffff !important;
}

.win-tool-btn.toggle-collapse-btn {
  width: 28px !important;
  min-width: 28px !important;
  padding: 0 !important;
  color: #94a3b8 !important;
}

.win-tool-btn.toggle-collapse-btn:hover {
  color: #38bdf8 !important;
  background: rgba(56, 189, 248, 0.18) !important;
}

.win-toolbar-collapsed-bar {
  display: none;
  width: 100%;
  height: 0;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 990;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.gokceos-os-window.toolbar-hidden .win-toolbar-collapsed-bar {
  display: flex;
  height: 0;
}

.gokceos-os-window.toolbar-hidden .gokceos-window-body {
  padding-top: 2.5rem !important;
}

.gokceos-os-window.toolbar-hidden .gokceos-window-sidebar-rail {
  padding-top: 2.2rem !important;
}

.win-toolbar-collapsed-bar .collapsed-bar-pill {
  position: absolute;
  top: 0;
  background: rgba(12, 18, 36, 0.96);
  border: 1px solid rgba(56, 189, 248, 0.45);
  border-top: none;
  color: #38bdf8;
  font-size: 0.68rem;
  font-weight: 850;
  padding: 0.22rem 0.95rem;
  border-bottom-left-radius: 9px;
  border-bottom-right-radius: 9px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.75);
  opacity: 0.88;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  white-space: nowrap;
}

.win-toolbar-collapsed-bar:hover .collapsed-bar-pill {
  opacity: 1;
  background: rgba(14, 165, 233, 0.35);
  border-color: #38bdf8;
  color: #ffffff;
  transform: translateY(2px);
}

.win-toolbar-nav {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex-shrink: 0;
}

.win-tool-btn {
  height: 28px !important;
  min-height: 28px !important;
  max-height: 28px !important;
  box-sizing: border-box !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: none !important;
  outline: none !important;
  color: #cbd5e1 !important;
  font-size: 0.74rem;
  font-weight: 700;
  padding: 0 0.55rem !important;
  border-radius: 7px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  transition: all 0.15s ease;
  white-space: nowrap;
  line-height: 1;
}

.win-tool-btn svg {
  display: block;
  flex-shrink: 0;
  stroke: currentColor;
  fill: none;
  transition: stroke 0.15s ease, transform 0.2s ease;
}

.win-tool-btn:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  border: none !important;
  outline: none !important;
  color: #ffffff !important;
}

.win-tool-btn:hover svg {
  stroke: #ffffff;
}

.win-tool-btn.nav-btn {
  width: 28px !important;
  min-width: 28px !important;
  max-width: 28px !important;
  height: 28px !important;
  min-height: 28px !important;
  max-height: 28px !important;
  padding: 0 !important;
  font-size: 0.72rem;
  border-radius: 7px;
  box-sizing: border-box !important;
}

.win-tool-btn.primary {
  background: rgba(56, 189, 248, 0.18) !important;
  border: none !important;
  outline: none !important;
  color: #38bdf8 !important;
}

.win-tool-btn.primary:hover {
  background: rgba(56, 189, 248, 0.3) !important;
  border: none !important;
  outline: none !important;
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.25);
}

/* 🧭 & 🔍 FLUID MIDDLE CLUSTER: ADDRESS BAR & SEARCH BAR FILL 100% GAP */
.win-toolbar-middle-cluster {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
  min-width: 0;
  margin: 0 0.3rem;
}

.win-toolbar-address {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  background: rgba(255, 255, 255, 0.04);
  border: none !important;
  border-radius: 7px;
  padding: 0 0.65rem;
  height: 28px !important;
  min-height: 28px !important;
  max-height: 28px !important;
  font-size: 0.74rem;
  color: #94a3b8;
  flex: 1.2;
  min-width: 100px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-sizing: border-box !important;
}

.win-toolbar-address .address-crumb {
  color: #cbd5e1;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.win-toolbar-address .address-crumb.current {
  color: #38bdf8;
  font-weight: 800;
}

.win-toolbar-address .address-sep {
  color: #64748b;
  font-size: 0.68rem;
  flex-shrink: 0;
}

.win-toolbar-address .address-icon {
  flex-shrink: 0;
  font-size: 0.85rem;
}

.win-toolbar-search {
  display: flex;
  align-items: center;
  position: relative;
  background: rgba(255, 255, 255, 0.04);
  border: none !important;
  outline: none !important;
  border-radius: 7px;
  padding: 0 0.65rem;
  height: 28px !important;
  min-height: 28px !important;
  max-height: 28px !important;
  flex: 0.8;
  min-width: 90px;
  box-sizing: border-box !important;
  transition: background 0.15s ease, flex 0.2s ease;
}

.win-toolbar-search:focus-within {
  background: rgba(255, 255, 255, 0.08) !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  flex: 1.1;
}

.win-toolbar-search .search-icon {
  font-size: 0.75rem;
  color: #94a3b8;
  margin-right: 0.45rem;
  flex-shrink: 0;
}

.win-search-input {
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  color: #ffffff !important;
  font-size: 0.76rem;
  width: 100%;
  padding: 0 !important;
  margin: 0 !important;
  min-width: 0;
}

.win-search-input::placeholder {
  color: #64748b;
  font-size: 0.74rem;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.win-search-clear {
  background: transparent;
  border: none !important;
  outline: none !important;
  color: #94a3b8;
  cursor: pointer;
  padding: 0 0.15rem;
  font-size: 0.7rem;
  display: none;
  flex-shrink: 0;
}

.win-toolbar-search:focus-within .win-search-clear,
.win-search-input:not(:placeholder-shown) + .win-search-clear {
  display: block;
}

.win-toolbar-right-cluster {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-left: auto;
  flex-shrink: 0;
  position: relative;
  z-index: 1001;
}

/* Dropdown Menus (EN ÜSTTE Z-INDEX 99999999) */
.win-toolbar-dropdown-wrap {
  position: relative;
  z-index: 1002;
}

.win-toolbar-dropdown-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: rgba(15, 23, 42, 0.98);
  backdrop-filter: blur(24px);
  border: 1px solid rgba(56, 189, 248, 0.35);
  border-radius: 8px;
  padding: 0.35rem;
  min-width: 175px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.95), 0 0 25px rgba(56, 189, 248, 0.3);
  z-index: 99999999 !important;
  display: none;
  animation: slideDownFade 0.12s ease-out;
}

.win-toolbar-dropdown-menu.show {
  display: block;
}

.win-toolbar-dropdown-menu .dropdown-header {
  font-size: 0.65rem;
  font-weight: 850;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.25rem 0.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  margin-bottom: 0.2rem;
}

.win-toolbar-dropdown-menu .dropdown-item {
  width: 100%;
  text-align: left;
  background: transparent;
  border: none !important;
  outline: none !important;
  color: #cbd5e1;
  font-size: 0.74rem;
  font-weight: 600;
  padding: 0.3rem 0.55rem;
  border-radius: 5px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  transition: all 0.1s ease;
}

.win-toolbar-dropdown-menu .dropdown-item:hover {
  background: rgba(56, 189, 248, 0.15) !important;
  border: none !important;
  outline: none !important;
  color: #38bdf8;
}

.win-toolbar-dropdown-menu .dropdown-item.active {
  color: #38bdf8;
  font-weight: 800;
  background: rgba(56, 189, 248, 0.12) !important;
  border: none !important;
  outline: none !important;
}

/* ⊞ ☰ ▤ View Mode Toggles - Pixel-Perfect Segmented Control */
.win-toolbar-view-toggle {
  display: inline-flex !important;
  align-items: center !important;
  gap: 2px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  padding: 2px !important;
  border-radius: 7px !important;
  border: none !important;
  height: 28px !important;
  min-height: 28px !important;
  max-height: 28px !important;
  box-sizing: border-box !important;
}

.win-tool-btn.view-btn {
  width: 24px !important;
  height: 24px !important;
  min-height: 24px !important;
  max-height: 24px !important;
  padding: 0 !important;
  margin: 0 !important;
  font-size: 0.75rem !important;
  border: none !important;
  outline: none !important;
  background: transparent !important;
  border-radius: 5px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #94a3b8 !important;
  cursor: pointer !important;
  transition: all 0.12s ease !important;
  line-height: 1 !important;
}

.win-tool-btn.view-btn:hover:not(.active) {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
}

.win-tool-btn.view-btn.active {
  background: rgba(56, 189, 248, 0.25) !important;
  border: none !important;
  outline: none !important;
  color: #38bdf8 !important;
  box-shadow: none !important;
}



/* WINDOW BODY & VERTICAL SIDEBAR RAIL CONTAINER */
.gokceos-window-container {
  display: flex;
  flex: 1;
  overflow: hidden;
  min-height: 0;
  height: calc(100% - 80px);
  position: relative;
}

/* 🎛️ DİKEY SOL MENÜ (VERTICAL SIDEBAR RAIL WITH LARGE ICONS & FAST TOOLTIPS) */
.gokceos-window-sidebar-rail {
  width: 64px;
  min-width: 64px;
  max-width: 64px;
  height: 100%;
  background: rgba(10, 16, 32, 0.95);
  backdrop-filter: blur(24px);
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.85rem 0;
  gap: 0.65rem;
  flex-shrink: 0;
  z-index: 100;
  user-select: none;
  box-sizing: border-box;
}

.sidebar-rail-btn {
  position: relative;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: #cbd5e1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: grab !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  aspect-ratio: 1 / 1 !important;
  transition: transform 0.18s cubic-bezier(0.2, 0, 0, 1), background 0.15s ease, border-color 0.15s ease, opacity 0.18s ease !important;
  user-select: none;
}

.sidebar-rail-btn:active {
  cursor: grabbing !important;
}

.sidebar-rail-btn.is-dragging-rail {
  opacity: 0.3 !important;
  transform: scale(0.9) !important;
  border-style: dashed !important;
  border-color: rgba(56, 189, 248, 0.6) !important;
}

.sidebar-rail-btn.shift-up {
  transform: translateY(-8px) !important;
}

.sidebar-rail-btn.shift-down {
  transform: translateY(8px) !important;
}

.sidebar-rail-drag-ghost {
  position: fixed;
  width: 46px;
  height: 46px;
  border-radius: 13px;
  background: rgba(10, 16, 32, 0.96);
  backdrop-filter: blur(24px);
  border: 1.5px solid #38bdf8;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.9), 0 0 22px rgba(56, 189, 248, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  pointer-events: none;
  z-index: 9999999;
  transform: translate(-50%, -50%) scale(1.12);
  transition: transform 0.05s ease;
}

.sidebar-rail-btn .rail-icon {
  font-size: 1.4rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s ease;
  pointer-events: none;
}

.sidebar-rail-btn:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(56, 189, 248, 0.5) !important;
  color: #ffffff !important;
  transform: translateY(-1px) scale(1.05);
}

.sidebar-rail-btn:hover .rail-icon {
  transform: scale(1.12);
}

.sidebar-rail-btn.active {
  background: rgba(56, 189, 248, 0.22) !important;
  border-color: #38bdf8 !important;
  color: #38bdf8 !important;
  box-shadow: 0 0 20px rgba(56, 189, 248, 0.35), inset 0 0 10px rgba(56, 189, 248, 0.15) !important;
}

.sidebar-rail-btn.active::before {
  content: '';
  position: absolute;
  left: -8px;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 22px;
  background: #38bdf8;
  border-radius: 0 4px 4px 0;
  box-shadow: 0 0 10px #38bdf8;
}

/* FAST FLOATING TOOLTIP ON HOVER */
.rail-fast-tooltip {
  position: absolute;
  left: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%) translateX(-6px);
  background: rgba(15, 23, 42, 0.98);
  backdrop-filter: blur(20px);
  color: #ffffff;
  border: 1px solid rgba(56, 189, 248, 0.4);
  padding: 0.35rem 0.8rem;
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 800;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.12s ease, transform 0.12s ease;
  z-index: 99999;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.85), 0 0 15px rgba(56, 189, 248, 0.25);
}

.rail-fast-tooltip::after {
  content: '';
  position: absolute;
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  border-width: 5px;
  border-style: solid;
  border-color: transparent rgba(56, 189, 248, 0.4) transparent transparent;
}

.sidebar-rail-btn:hover .rail-fast-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) translateX(0);
}

/* WINDOW BODY */
.gokceos-window-body {
  flex: 1;
  overflow-y: auto;
  padding: 1.4rem;
  background: rgba(2, 6, 23, 0.65);
  height: 100%;
  box-sizing: border-box;
  min-width: 0;
}

/* MACOS / WIN11 GLASSMORPHISM DOCK (INTERACTIVE DRAGGABLE & REORDERABLE) */
#gokceos-desktop-dock {
  position: fixed;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  height: 64px;
  max-width: calc(100vw - 24px);
  background: var(--os-dock-bg);
  backdrop-filter: blur(28px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 24px;
  padding: 0 0.9rem;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8), 0 0 30px rgba(56, 189, 248, 0.2);
  z-index: 3000;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.22s ease, box-shadow 0.2s ease, border-color 0.2s ease, height 0.2s ease;
  user-select: none;
}

#gokceos-desktop-dock.autohide {
  transform: translateX(-50%) translateY(calc(100% + 24px));
  opacity: 0;
  pointer-events: none;
}

#gokceos-desktop-dock.autohide.dock-revealed {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
  pointer-events: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.9), 0 0 35px rgba(56, 189, 248, 0.3);
}

/* Dock Sizes */
#gokceos-desktop-dock.dock-size-small {
  height: 52px;
  padding: 0 0.65rem;
  gap: 0.45rem;
}
#gokceos-desktop-dock.dock-size-small .dock-item {
  width: 38px;
  height: 38px;
  font-size: 1.3rem;
  border-radius: 11px;
}
#gokceos-desktop-dock.dock-size-small .dock-separator {
  height: 26px;
}

#gokceos-desktop-dock.dock-size-large {
  height: 74px;
  padding: 0 1.1rem;
  gap: 0.85rem;
}
#gokceos-desktop-dock.dock-size-large .dock-item {
  width: 56px;
  height: 56px;
  font-size: 1.85rem;
  border-radius: 16px;
}
#gokceos-desktop-dock.dock-size-large .dock-separator {
  height: 40px;
}

#gokceos-desktop-dock.dock-drop-target {
  box-shadow: 0 20px 60px rgba(56, 189, 248, 0.5), 0 0 35px rgba(56, 189, 248, 0.5);
  border-color: rgba(56, 189, 248, 0.7);
  transform: translateX(-50%) scale(1.05);
}

.dock-apps-container {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-height: 48px;
}

.dock-item {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  cursor: grab;
  position: relative;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.15s, margin 0.15s ease, opacity 0.15s ease;
  user-select: none;
}

.dock-item:active {
  cursor: grabbing;
}

.dock-item:hover {
  transform: translateY(-12px) scale(1.22);
  background: rgba(56, 189, 248, 0.3);
  border-color: #38bdf8;
  box-shadow: 0 12px 30px rgba(56, 189, 248, 0.5);
}

#gokceos-desktop-dock.dock-magnify-enabled .dock-item:hover {
  transform: translateY(-14px) scale(1.26);
}

.dock-item.is-dragging-dock {
  opacity: 0.25 !important;
  transform: scale(0.85) !important;
}

.dock-item.shift-right {
  margin-left: 28px !important;
}

.dock-item.shift-left {
  margin-right: 28px !important;
}

.dock-item.just-pinned {
  animation: dockBounceIn 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes dockBounceIn {
  0% { transform: scale(0.3) translateY(20px); opacity: 0; }
  60% { transform: scale(1.28) translateY(-14px); opacity: 1; }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}

.dock-item.is-running::after {
  content: '';
  position: absolute;
  bottom: -4px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #38bdf8;
  box-shadow: 0 0 8px #38bdf8;
}

.dock-item.is-minimized-app::after {
  background: #f59e0b;
  box-shadow: 0 0 8px #f59e0b;
}

.dock-minimized-container {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.dock-item.dock-minimized-item {
  border: 1.5px dashed rgba(56, 189, 248, 0.45);
  background: rgba(15, 23, 42, 0.65);
  animation: dockBounceIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
}

.dock-item.dock-minimized-item:hover {
  border-color: #38bdf8;
  border-style: solid;
  background: rgba(56, 189, 248, 0.25);
  box-shadow: 0 0 20px rgba(56, 189, 248, 0.5);
  transform: translateY(-12px) scale(1.22);
}

.dock-min-badge {
  position: absolute;
  top: -3px;
  right: -3px;
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: #020617;
  font-size: 0.62rem;
  font-weight: 900;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.8);
  line-height: 1;
}

.dock-separator {
  width: 1px;
  height: 32px;
  background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.18) 20%, rgba(255, 255, 255, 0.18) 80%, transparent);
  margin: 0 0.35rem;
  flex-shrink: 0;
}

/* GHOST FLOATING DRAG ELEMENT */
.dock-drag-ghost {
  position: fixed;
  pointer-events: none;
  z-index: 99999999;
  width: 54px;
  height: 54px;
  border-radius: 14px;
  background: rgba(15, 23, 42, 0.88);
  backdrop-filter: blur(16px);
  border: 2px solid #38bdf8;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.8), 0 0 20px rgba(56, 189, 248, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  transform: translate(-50%, -50%) scale(1.15);
  transition: transform 0.1s ease, border-color 0.1s ease;
}

.dock-drag-ghost.unpinning {
  border-color: #ef4444;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.8), 0 0 20px rgba(239, 68, 68, 0.6);
  transform: translate(-50%, -50%) scale(0.95);
  opacity: 0.85;
}

/* POOF EVAPORATION PARTICLES */
.gokceos-poof-puff {
  position: fixed;
  pointer-events: none;
  z-index: 99999999;
  width: 50px;
  height: 50px;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.2rem;
  animation: poofDisperse 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

@keyframes poofDisperse {
  0% { transform: translate(-50%, -50%) scale(0.6); opacity: 1; filter: blur(0px); }
  50% { transform: translate(-50%, -50%) scale(1.35); opacity: 0.8; filter: blur(2px); }
  100% { transform: translate(-50%, -50%) scale(2.1); opacity: 0; filter: blur(8px); }
}

/* PATRON TOP START MENU (ÜSTTEN AÇILAN BAŞLAT MENÜSÜ) */
#gokceos-start-menu {
  position: fixed;
  top: 38px;
  left: 10px;
  width: 520px;
  max-height: calc(100vh - 60px);
  background: rgba(15, 23, 42, 0.98);
  backdrop-filter: blur(36px);
  border: 1.5px solid rgba(56, 189, 248, 0.4);
  border-radius: 18px;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.95), 0 0 45px rgba(56, 189, 248, 0.3);
  z-index: 7000;
  display: none;
  flex-direction: column;
  overflow: hidden;
  animation: slideDownFade 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

#gokceos-start-menu.open {
  display: flex;
}

/* FULLSCREEN IPADOS & MACOS LAUNCHPAD (TAM EKRAN UYGULAMA MERKEZİ) */
#gokceos-launchpad {
  position: fixed;
  inset: 0;
  background: rgba(6, 11, 25, 0.84);
  backdrop-filter: blur(48px) saturate(180%);
  -webkit-backdrop-filter: blur(48px) saturate(180%);
  z-index: 8000;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 2.2rem 3rem 2rem;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1), transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

#gokceos-launchpad.open {
  display: flex;
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

/* TOP SEARCH BAR (APPLE SPOTLIGHT GLASS PILL) */
.launchpad-header {
  width: 100%;
  max-width: 680px;
  margin-top: 1.2rem;
  margin-bottom: 0.8rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
  z-index: 20;
}

.launchpad-search-box {
  width: 100%;
  max-width: 380px;
  position: relative;
  display: flex;
  align-items: center;
}

.launchpad-category-chips {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  flex-wrap: wrap;
}

.lp-chip {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #cbd5e1;
  font-size: 0.76rem;
  font-weight: 750;
  padding: 0.35rem 0.8rem;
  border-radius: 99px;
  cursor: pointer;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  backdrop-filter: blur(20px);
}

.lp-chip:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.3);
  color: #ffffff;
  transform: translateY(-1px);
}

.lp-chip.active {
  background: linear-gradient(135deg, #38bdf8 0%, #0284c7 100%);
  border-color: #38bdf8;
  color: #020617;
  font-weight: 900;
  box-shadow: 0 0 16px rgba(56, 189, 248, 0.5);
}

.launchpad-search-box {
  width: 100%;
  position: relative;
  display: flex;
  align-items: center;
}

.launchpad-search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255, 255, 255, 0.55);
  pointer-events: none;
  transition: color 0.15s ease;
}

.launchpad-search-input {
  width: 100%;
  height: 32px;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(40px) saturate(190%);
  -webkit-backdrop-filter: blur(40px) saturate(190%);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 99px;
  padding: 0 32px 0 36px;
  color: #ffffff;
  font-size: 0.85rem;
  font-weight: 500;
  outline: none;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35), inset 0 1px 1px rgba(255, 255, 255, 0.2);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  text-align: center;
}

.launchpad-search-input::placeholder {
  color: rgba(255, 255, 255, 0.55);
  font-weight: 500;
}

.launchpad-search-input:focus,
.launchpad-search-input:not(:placeholder-shown) {
  text-align: left;
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.4);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.3), 0 0 0 3px rgba(255, 255, 255, 0.12);
}

.launchpad-search-input:focus ~ .launchpad-search-icon,
.launchpad-search-input:not(:placeholder-shown) ~ .launchpad-search-icon {
  color: #ffffff;
}

.launchpad-search-clear {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  border: none;
  color: #ffffff;
  font-size: 0.65rem;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
}

.launchpad-search-clear:hover {
  background: rgba(255, 255, 255, 0.45);
}

/* CAROUSEL SLIDER WRAPPER */
.launchpad-carousel-container {
  width: 100%;
  max-width: 1260px;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: visible !important;
  margin: 0.5rem 0 1rem;
}

.launchpad-viewport {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}

.launchpad-track {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1);
}

.launchpad-page {
  min-width: 100%;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: 1.1rem 1.6rem;
  padding: 0.6rem 2.8rem;
  box-sizing: border-box;
  align-content: center;
}

/* APP ICON TILES (IPAD STYLE) */
.launchpad-app-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.65rem 0.5rem;
  border-radius: 20px;
  cursor: pointer;
  transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.18s;
  background: transparent;
  user-select: none;
}

.launchpad-app-tile:hover {
  transform: scale(1.08);
  background: rgba(255, 255, 255, 0.08);
}

.launchpad-app-tile:active {
  transform: scale(0.95);
}

.launchpad-icon-box {
  width: 72px; height: 72px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.2rem;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6), 0 0 20px rgba(56, 189, 248, 0.25);
  transition: all 0.2s;
  position: relative;
}

.launchpad-app-title {
  color: #ffffff;
  font-size: 0.82rem;
  font-weight: 750;
  text-align: center;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9);
  line-height: 1.25;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}

.launchpad-app-sub {
  color: #94a3b8;
  font-size: 0.68rem;
  font-weight: 600;
  margin-top: -0.25rem;
}

/* SLIDER ARROWS */
.launchpad-nav-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(15, 23, 42, 0.8);
  border: 1px solid rgba(56, 189, 248, 0.35);
  color: #ffffff;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 30;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
}

.launchpad-nav-arrow:hover {
  background: rgba(56, 189, 248, 0.45);
  border-color: #38bdf8;
  box-shadow: 0 0 22px rgba(56, 189, 248, 0.6), 0 8px 24px rgba(0, 0, 0, 0.6);
  transform: translateY(-50%) scale(1.12);
  color: #ffffff;
}

.launchpad-nav-prev { left: -16px; }
.launchpad-nav-next { right: -16px; }

/* PAGINATION DOTS */
.launchpad-pagination {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 1.2rem;
  background: rgba(0, 0, 0, 0.45);
  border-radius: 99px;
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.launchpad-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  cursor: pointer;
  transition: all 0.2s ease;
}

.launchpad-dot.active {
  width: 24px;
  border-radius: 99px;
  background: #38bdf8;
  box-shadow: 0 0 12px #38bdf8;
}

/* DESKTOP & ICON CONTEXT MENU (SAĞ TIK) */
#gokceos-context-menu {
  position: fixed;
  background: rgba(15, 23, 42, 0.98);
  backdrop-filter: blur(28px);
  border: 1.5px solid rgba(56, 189, 248, 0.4);
  border-radius: 14px;
  padding: 0.6rem;
  min-width: 250px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.92), 0 0 25px rgba(56, 189, 248, 0.25);
  z-index: 10000;
  display: none;
  flex-direction: column;
  gap: 0.25rem;
  animation: slideUpFade 0.12s ease-out;
}

.ctx-menu-item {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 0.75rem !important;
  width: 100% !important;
  padding: 0.55rem 0.85rem !important;
  border-radius: 8px !important;
  background: transparent !important;
  border: none !important;
  color: #e2e8f0 !important;
  font-size: 0.82rem !important;
  font-weight: 750 !important;
  cursor: pointer !important;
  text-align: left !important;
  transition: all 0.12s ease !important;
  min-height: 34px !important;
  height: 34px !important;
  white-space: nowrap !important;
}

.ctx-menu-item span:first-child {
  font-size: 1.15rem;
  width: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  text-align: center;
}

.ctx-menu-item span:last-child {
  flex: 1;
  text-align: left !important;
}

.ctx-menu-item:hover {
  background: rgba(56, 189, 248, 0.22) !important;
  color: #38bdf8 !important;
  transform: translateX(3px);
}

.ctx-separator {
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
  margin: 0.35rem 0.2rem;
}

/* SUBMENU & CASCADING FLYOUT MENUS (WINDOWS TARZI YAN MENÜLER) */
.ctx-menu-item.has-submenu {
  position: relative;
}

.ctx-arrow {
  font-size: 0.9rem !important;
  color: #94a3b8 !important;
  margin-left: auto !important;
  padding-left: 0.5rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  width: auto !important;
  flex-shrink: 0 !important;
}

.ctx-submenu {
  position: absolute;
  left: calc(100% + 4px);
  top: -6px;
  background: rgba(15, 23, 42, 0.98);
  backdrop-filter: blur(28px);
  border: 1.5px solid rgba(56, 189, 248, 0.4);
  border-radius: 12px;
  padding: 0.5rem;
  min-width: 220px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.92), 0 0 25px rgba(56, 189, 248, 0.25);
  z-index: 10010;
  display: none;
  flex-direction: column;
  gap: 0.2rem;
  animation: slideRightFade 0.12s ease-out;
}

.ctx-menu-item.has-submenu:hover > .ctx-submenu,
.ctx-menu-item.has-submenu:focus-within > .ctx-submenu {
  display: flex;
}

.ctx-submenu.open-left {
  left: auto;
  right: calc(100% + 4px);
}

@keyframes slideRightFade {
  from {
    opacity: 0;
    transform: translateX(-6px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ==========================================================================
   🔔 NOTIFICATION CENTER & FLOATING TOASTS (BİLDİRİM MERKEZİ & ANLIK ALARMLAR)
   ========================================================================== */

/* Topbar Notification Bell */
.os-topbar-bell-btn {
  position: relative;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #ffffff;
  padding: 0.25rem 0.65rem;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.82rem;
  font-weight: 700;
  transition: all 0.15s ease;
}

.os-topbar-bell-btn:hover {
  background: rgba(56, 189, 248, 0.2);
  border-color: #38bdf8;
}

.notif-badge-count {
  background: #ef4444;
  color: #ffffff;
  font-size: 0.68rem;
  font-weight: 900;
  padding: 0.05rem 0.4rem;
  border-radius: 99px;
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.8);
  animation: pulseBadge 1.8s infinite;
}

@keyframes pulseBadge {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); box-shadow: 0 0 16px rgba(239, 68, 68, 1); }
}

/* ==========================================================================
   🍎 APPLE MACOS SEQUOIA / IOS 18 NOTIFICATION CENTER & WIDGETS
   ========================================================================== */
#os-notification-drawer {
  position: fixed;
  top: 38px;
  right: 12px;
  bottom: 12px;
  width: 390px;
  max-width: calc(100vw - 24px);
  background: linear-gradient(165deg, rgba(15, 23, 42, 0.75) 0%, rgba(23, 32, 54, 0.65) 50%, rgba(10, 15, 28, 0.82) 100%) !important;
  backdrop-filter: blur(60px) saturate(220%) brightness(108%) !important;
  -webkit-backdrop-filter: blur(60px) saturate(220%) brightness(108%) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  border-radius: 24px;
  box-shadow: -20px 0 60px rgba(0, 0, 0, 0.6), 0 25px 50px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
  z-index: 7500;
  display: flex;
  flex-direction: column;
  transform: translateX(110%);
  transition: transform 0.34s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease;
  overflow: hidden;
}

#os-notification-drawer.open {
  transform: translateX(0);
}

/* 1. APPLE NOTIFICATION CENTER HEADER */
.notif-drawer-header {
  padding: 0.85rem 1.15rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255, 255, 255, 0.02);
  backdrop-filter: blur(16px);
  gap: 0.6rem;
  flex-shrink: 0;
}

.notif-drawer-title-group {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.apple-notif-logo {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: rgba(56, 189, 248, 0.15);
  border: 1px solid rgba(56, 189, 248, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #38bdf8;
}

.notif-drawer-title-group strong {
  color: #ffffff;
  font-size: 0.92rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.notif-badge-count {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  color: #ffffff;
  font-size: 0.65rem;
  font-weight: 900;
  padding: 0.15rem 0.5rem;
  border-radius: 99px;
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.6);
}

.notif-header-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
}

.apple-header-action-btn {
  height: 28px !important;
  min-height: 28px !important;
  max-height: 28px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.35rem !important;
  padding: 0 0.75rem !important;
  border-radius: 99px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.13) !important;
  color: #e2e8f0 !important;
  font-size: 0.72rem !important;
  font-weight: 650 !important;
  cursor: pointer !important;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important;
  white-space: nowrap !important;
  line-height: 1 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 2px 6px rgba(0, 0, 0, 0.25) !important;
  outline: none !important;
  user-select: none !important;
  box-sizing: border-box !important;
}

.apple-header-action-btn:hover {
  background: rgba(255, 255, 255, 0.16) !important;
  border-color: rgba(255, 255, 255, 0.28) !important;
  color: #ffffff !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

.apple-header-action-btn:active {
  transform: translateY(0);
}

.apple-header-action-btn.btn-test {
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.18) 0%, rgba(14, 165, 233, 0.25) 100%) !important;
  border-color: rgba(56, 189, 248, 0.4) !important;
  color: #38bdf8 !important;
  font-weight: 750 !important;
}

.apple-header-action-btn.btn-test:hover {
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.3) 0%, rgba(14, 165, 233, 0.4) 100%) !important;
  border-color: rgba(56, 189, 248, 0.7) !important;
  color: #ffffff !important;
  box-shadow: 0 0 14px rgba(56, 189, 248, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
}

.apple-header-action-btn.btn-close-circle {
  width: 24px !important;
  min-width: 24px !important;
  max-width: 24px !important;
  height: 24px !important;
  min-height: 24px !important;
  max-height: 24px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  color: #94a3b8 !important;
  font-size: 0.7rem !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-sizing: border-box !important;
  flex-shrink: 0 !important;
  transition: all 0.15s cubic-bezier(0.16, 1, 0.3, 1) !important;
  user-select: none;
}

.apple-header-action-btn.btn-close-circle:hover {
  background: rgba(239, 68, 68, 0.25) !important;
  border-color: rgba(239, 68, 68, 0.5) !important;
  color: #ffffff !important;
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.35) !important;
}

.apple-header-action-btn.btn-close-circle:active {
  transform: scale(0.92) !important;
}

/* 2. SCROLLABLE WIDGETS & NOTIFICATION STREAM */
.apple-widgets-scroll-area {
  flex: 1;
  overflow-y: auto;
  padding: 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}

.apple-widgets-scroll-area::-webkit-scrollbar {
  width: 5px;
}

.apple-widgets-scroll-area::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 99px;
}

/* 3. MODULAR WIDGETS DECK (APPLE STYLE) */
.apple-widgets-deck {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.apple-widgets-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.apple-widget-card {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.03) 100%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  padding: 0.85rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), background 0.2s, border-color 0.2s, box-shadow 0.2s;
  cursor: pointer;
  user-select: none;
  box-sizing: border-box;
}

.apple-widget-card:hover {
  transform: translateY(-2px) scale(1.015);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 100%);
  border-color: rgba(56, 189, 248, 0.4);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 20px rgba(56, 189, 248, 0.18);
}

/* A. Apple Calendar Widget */
.apple-widget-calendar {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.apple-cal-header {
  color: #f87171;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.apple-cal-day-num {
  color: #ffffff;
  font-size: 1.85rem;
  font-weight: 800;
  line-height: 1;
  margin: 0.2rem 0;
}

.apple-cal-day-name {
  color: #cbd5e1;
  font-size: 0.72rem;
  font-weight: 600;
}

.apple-cal-event-pill {
  margin-top: 0.45rem;
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 6px;
  padding: 0.2rem 0.4rem;
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.cal-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #ef4444;
  flex-shrink: 0;
}

.cal-event-text {
  color: #fca5a5;
  font-size: 0.65rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* B. Apple Weather Widget */
.apple-widget-weather {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.apple-weather-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.weather-city {
  color: #94a3b8;
  font-size: 0.72rem;
  font-weight: 700;
}

.weather-temp {
  color: #ffffff;
  font-size: 1.7rem;
  font-weight: 800;
  line-height: 1.1;
}

.weather-icon {
  font-size: 1.6rem;
}

.weather-condition {
  color: #e2e8f0;
  font-size: 0.72rem;
  font-weight: 700;
}

.weather-hl {
  color: #94a3b8;
  font-size: 0.65rem;
}

.weather-hourly-mini {
  display: flex;
  justify-content: space-between;
  margin-top: 0.4rem;
  padding-top: 0.35rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.w-hour {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  font-size: 0.6rem;
  color: #94a3b8;
}

.w-hour span:last-child {
  color: #ffffff;
  font-weight: 700;
}

/* C. Apple Stocks & MRR Widget */
.apple-widget-stocks {
  padding: 0.85rem 1rem;
}

.stocks-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.6rem;
}

.stocks-title {
  color: #94a3b8;
  font-size: 0.68rem;
  font-weight: 850;
  letter-spacing: 0.04em;
}

.stocks-badge-live {
  background: rgba(34, 197, 94, 0.2);
  border: 1px solid rgba(34, 197, 94, 0.4);
  color: #22c55e;
  font-size: 0.6rem;
  font-weight: 900;
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
}

.stocks-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
}

.stock-item {
  background: rgba(255, 255, 255, 0.04);
  border-radius: 8px;
  padding: 0.4rem 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.stock-symbol {
  font-size: 0.62rem;
  color: #94a3b8;
  font-weight: 700;
}

.stock-val {
  font-size: 0.78rem;
  color: #ffffff;
  font-weight: 800;
}

.stock-change {
  font-size: 0.62rem;
  font-weight: 800;
}

.stock-change.is-up {
  color: #22c55e;
}

/* D. Apple Hardware & Telemetry Widget */
.apple-widget-hardware {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.hardware-header {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  color: #94a3b8;
  font-size: 0.68rem;
  font-weight: 850;
  letter-spacing: 0.04em;
}

.hw-ring-container {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-top: 0.4rem;
}

.hw-meter {
  position: relative;
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.hw-meter svg {
  transform: rotate(-90deg);
}

.hw-meter-val {
  position: absolute;
  font-size: 0.68rem;
  font-weight: 850;
  color: #ffffff;
}

.hw-info {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.hw-info small {
  font-size: 0.62rem;
  color: #94a3b8;
}

.hw-info strong {
  font-size: 0.75rem;
  color: #ffffff;
  font-weight: 800;
}

/* E. World Clocks Widget */
.apple-widget-clocks {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.clocks-header {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  color: #94a3b8;
  font-size: 0.68rem;
  font-weight: 850;
  letter-spacing: 0.04em;
  margin-bottom: 0.35rem;
}

.world-clock-list {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.w-clock-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.68rem;
  color: #cbd5e1;
}

.w-clock-row strong {
  color: #ffffff;
  font-weight: 800;
  font-family: monospace;
}

/* 4. APPLE NOTIFICATION STREAM SECTION */
.apple-notif-section {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin-top: 0.25rem;
}

.apple-notif-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.apple-notif-title {
  color: #ffffff;
  font-size: 0.88rem;
  font-weight: 850;
  letter-spacing: -0.01em;
}

/* Apple Segmented Control Track (Frosted Glass Capsule - Ultra Slim) */
.apple-segmented-control {
  display: flex;
  align-items: center;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 99px;
  padding: 2px;
  gap: 2px;
  width: 100%;
  height: 26px;
  min-height: 0 !important;
  box-sizing: border-box;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.apple-segmented-btn {
  flex: 1;
  background: transparent;
  border: none !important;
  outline: none !important;
  color: #94a3b8;
  font-size: 0.68rem;
  font-weight: 600;
  height: 22px !important;
  min-height: 0 !important;
  max-height: 22px !important;
  padding: 0 0.35rem !important;
  border-radius: 99px;
  cursor: pointer;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  text-align: center;
  white-space: nowrap;
  line-height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  box-sizing: border-box;
}

.apple-segmented-btn:hover:not(.active) {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
}

.apple-segmented-btn.active {
  background: rgba(255, 255, 255, 0.16);
  color: #ffffff;
  font-weight: 750;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4), inset 0 0.5px 0 rgba(255, 255, 255, 0.25);
}

.notif-drawer-list {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

/* 5. APPLE NOTIFICATION BANNER CARDS */
.apple-notif-banner {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.03) 100%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  padding: 0.75rem 0.9rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}

.apple-notif-banner:hover {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.11) 0%, rgba(255, 255, 255, 0.05) 100%);
  border-color: rgba(56, 189, 248, 0.35);
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 20px rgba(56, 189, 248, 0.15);
}

.apple-notif-banner.is-urgent {
  border-left: 3px solid #ef4444 !important;
}

.apple-notif-banner.is-update {
  border-left: 3px solid #38bdf8 !important;
}

.apple-notif-banner.is-chat {
  border-left: 3px solid #a855f7 !important;
}

.apple-notif-banner-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.35rem;
}

.apple-notif-app-meta {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.apple-notif-app-icon {
  width: 20px;
  height: 20px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
}

.apple-notif-app-name {
  color: #94a3b8;
  font-size: 0.65rem;
  font-weight: 850;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.apple-notif-time-wrap {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.notif-time {
  color: #64748b;
  font-size: 0.65rem;
  font-weight: 600;
}

.apple-notif-close-btn {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #94a3b8 !important;
  font-size: 0.62rem !important;
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  max-width: 20px !important;
  min-height: 20px !important;
  max-height: 20px !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  padding: 0 !important;
  line-height: 1 !important;
  box-sizing: border-box !important;
  flex-shrink: 0 !important;
  transition: all 0.15s cubic-bezier(0.16, 1, 0.3, 1) !important;
  user-select: none;
}

.apple-notif-close-btn:hover {
  background: rgba(239, 68, 68, 0.25) !important;
  color: #ffffff !important;
  border-color: rgba(239, 68, 68, 0.5) !important;
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.35) !important;
}

.apple-notif-close-btn:active {
  transform: scale(0.9) !important;
}

/* Empty State Glass Card */
.notif-empty-state {
  padding: 3.5rem 1.5rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.notif-empty-icon-wrap {
  width: 72px;
  height: 72px;
  border-radius: 24px;
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.15) 0%, rgba(168, 85, 247, 0.1) 100%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.2rem;
  position: relative;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.notif-empty-bell {
  font-size: 2rem;
  display: block;
  animation: floatBell 3s ease-in-out infinite;
}

@keyframes floatBell {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-4px) rotate(8deg); }
}

.notif-empty-halo {
  position: absolute;
  inset: -10px;
  border-radius: 28px;
  background: radial-gradient(circle, rgba(56, 189, 248, 0.2) 0%, transparent 70%);
  pointer-events: none;
  z-index: -1;
}

/* ==========================================================================
   💬 GÖKÇEOS MESSENGER UI STYLES
   ========================================================================== */
.gokceos-messenger-container {
  display: flex;
  height: 100%;
  width: 100%;
  background: #090d16;
  border-radius: 0 0 16px 16px;
  overflow: hidden;
}

.messenger-sidebar {
  width: 260px;
  background: rgba(15, 23, 42, 0.75);
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}

.messenger-sidebar-search {
  padding: 0.8rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.messenger-search-input {
  width: 100%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 0.45rem 0.75rem;
  color: #fff;
  font-size: 0.8rem;
  outline: none;
}

.messenger-contacts-list {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.messenger-contact-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 0.9rem;
  cursor: pointer;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
  transition: background 0.12s;
  position: relative;
}

.messenger-contact-item:hover, .messenger-contact-item.active {
  background: rgba(56, 189, 248, 0.12);
}

.messenger-contact-avatar {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
  position: relative;
}

.messenger-online-dot {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #22c55e;
  border: 2px solid #0f172a;
}

.messenger-contact-info {
  flex: 1;
  min-width: 0;
}

.messenger-contact-name {
  color: #ffffff;
  font-size: 0.82rem;
  font-weight: 750;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.messenger-contact-lastmsg {
  color: #94a3b8;
  font-size: 0.7rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 0.1rem;
}

.messenger-chat-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: #040812;
}

.messenger-chat-header {
  height: 52px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(15, 23, 42, 0.5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.2rem;
}

.messenger-messages-stream {
  flex: 1;
  overflow-y: auto;
  padding: 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.chat-bubble {
  max-width: 72%;
  padding: 0.65rem 0.95rem;
  border-radius: 14px;
  font-size: 0.82rem;
  line-height: 1.4;
  position: relative;
  word-break: break-word;
}

.chat-bubble.incoming {
  align-self: flex-start;
  background: rgba(30, 41, 59, 0.85);
  color: #f1f5f9;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom-left-radius: 4px;
}

.chat-bubble.outgoing {
  align-self: flex-end;
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
  color: #ffffff;
  border-bottom-right-radius: 4px;
  box-shadow: 0 4px 15px rgba(2, 132, 199, 0.35);
}

.chat-time {
  font-size: 0.65rem;
  opacity: 0.7;
  margin-top: 0.25rem;
  text-align: right;
}

.messenger-quick-replies {
  display: flex;
  gap: 0.4rem;
  padding: 0.4rem 1rem;
  background: rgba(15, 23, 42, 0.4);
  overflow-x: auto;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.quick-reply-pill {
  background: rgba(56, 189, 248, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.25);
  color: #38bdf8;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.25rem 0.6rem;
  border-radius: 99px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s;
}

.quick-reply-pill:hover {
  background: #38bdf8;
  color: #020617;
}

.messenger-input-bar {
  padding: 0.75rem 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(15, 23, 42, 0.6);
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.messenger-text-input {
  flex: 1;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  padding: 0.6rem 0.9rem;
  color: #ffffff;
  font-size: 0.85rem;
  outline: none;
}

.messenger-text-input:focus {
  border-color: #38bdf8;
  background: rgba(255, 255, 255, 0.1);
}

.messenger-send-btn {
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
  color: #ffffff;
  border: none;
  border-radius: 10px;
  padding: 0.6rem 1.1rem;
  font-weight: 800;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.15s;
}

.messenger-send-btn:hover {
  background: #38bdf8;
  color: #020617;
  transform: scale(1.04);
}

/* ==========================================================================
   🚀 LIVE OTA UPDATE MODAL DIALOG
   ========================================================================== */
#os-ota-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(24px);
  z-index: 99999;
  display: none !important;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.15s ease;
}

#os-ota-modal.open {
  display: flex !important;
}

.ota-card {
  width: 500px;
  background: #0f172a;
  border: 2px solid #38bdf8;
  border-radius: 20px;
  padding: 1.8rem;
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.95), 0 0 50px rgba(56, 189, 248, 0.35);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.ota-progress-bar-wrap {
  width: 100%;
  height: 12px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 99px;
  overflow: hidden;
  position: relative;
}

.ota-progress-bar-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #38bdf8 0%, #22c55e 100%);
  border-radius: 99px;
  transition: width 0.2s ease;
}

/* ==========================================================================
   🔒 MACOS / IOS 18 BIOMETRIC GLASS LOCK SCREEN
   ========================================================================== */
#gokceos-lock-screen {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: radial-gradient(circle at 50% 35%, rgba(15, 23, 42, 0.9) 0%, rgba(2, 6, 23, 0.98) 100%) !important;
  backdrop-filter: blur(60px) saturate(200%) !important;
  -webkit-backdrop-filter: blur(60px) saturate(200%) !important;
  z-index: 999999 !important;
  display: none;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 2.5rem 2rem 3rem;
  box-sizing: border-box;
  user-select: none;
  transition: opacity 0.3s ease, backdrop-filter 0.3s ease;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

#gokceos-lock-screen.is-locked {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

.lock-top-status {
  width: 100%;
  max-width: 1200px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.8rem;
  font-weight: 600;
}

.lock-status-left, .lock-status-right {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.lock-clock-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-top: 1rem;
}

.lock-padlock-icon {
  font-size: 1.4rem;
  margin-bottom: 0.2rem;
  color: rgba(255, 255, 255, 0.7);
  transition: transform 0.2s ease;
}

.lock-time-display {
  font-size: 5.5rem;
  font-weight: 800;
  letter-spacing: -2px;
  color: #ffffff;
  text-shadow: 0 10px 40px rgba(0, 0, 0, 0.7), 0 0 30px rgba(56, 189, 248, 0.2);
  line-height: 1;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Outfit", sans-serif;
}

.lock-date-display {
  font-size: 1.25rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  margin-top: 0.5rem;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.lock-profile-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 24px;
  padding: 1.5rem 2rem;
  backdrop-filter: blur(30px);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6), inset 0 1px 1px rgba(255, 255, 255, 0.2);
  width: 100%;
  max-width: 395px;
}

.lock-avatar-wrapper {
  position: relative;
  width: 76px;
  height: 76px;
  margin-bottom: 0.8rem;
}

.lock-avatar-glow {
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, #38bdf8, #ec4899, #8b5cf6, #38bdf8);
  filter: blur(6px);
  opacity: 0.7;
  animation: spinGlow 8s linear infinite;
}

.lock-avatar {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: linear-gradient(135deg, #1e293b, #0f172a);
  border: 2px solid rgba(255, 255, 255, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.2rem;
}

.lock-user-name {
  color: #ffffff;
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: 0.3px;
}

.lock-user-role {
  color: #38bdf8;
  font-size: 0.75rem;
  font-weight: 700;
  margin-top: 0.2rem;
  margin-bottom: 1.2rem;
}

.lock-auth-box {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.lock-input-wrap {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  box-sizing: border-box;
}

.lock-pass-field {
  width: 100%;
  height: 44px !important;
  background: rgba(0, 0, 0, 0.45);
  border: 1.5px solid rgba(255, 255, 255, 0.2);
  border-radius: 99px;
  padding: 0 48px 0 18px !important;
  color: #ffffff;
  font-size: 0.92rem;
  outline: none;
  box-sizing: border-box !important;
  transition: all 0.2s ease;
}

.lock-pass-field:focus {
  border-color: #38bdf8;
  box-shadow: 0 0 20px rgba(56, 189, 248, 0.4);
  background: rgba(0, 0, 0, 0.65);
}

.lock-submit-btn {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  max-width: 32px !important;
  min-height: 32px !important;
  max-height: 32px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 50% !important;
  background: #38bdf8 !important;
  border: none !important;
  color: #0f172a !important;
  font-weight: 900;
  font-size: 1.1rem;
  cursor: pointer;
  display: flex !important;
  align-items: center;
  justify-content: center;
  box-sizing: border-box !important;
  aspect-ratio: 1 / 1 !important;
  line-height: 1 !important;
  transition: all 0.15s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.lock-submit-btn:hover {
  transform: translateY(-50%) scale(1.08);
  background: #7dd3fc !important;
  box-shadow: 0 0 15px rgba(56, 189, 248, 0.6);
}

.lock-biometric-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: rgba(56, 189, 248, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.3);
  border-radius: 14px;
  padding: 0.65rem 0.85rem;
  color: #7dd3fc;
  font-size: 0.81rem;
  font-weight: 750;
  cursor: pointer;
  transition: all 0.18s ease;
  width: 100%;
  box-sizing: border-box;
  white-space: nowrap;
}

.lock-biometric-btn:hover {
  background: rgba(56, 189, 248, 0.25);
  border-color: #38bdf8;
  color: #ffffff;
  box-shadow: 0 0 20px rgba(56, 189, 248, 0.4);
  transform: translateY(-1px);
}

.lock-bottom-bar {
  width: 100%;
  max-width: 900px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.lock-quick-circle-btn {
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  max-width: 48px !important;
  min-height: 48px !important;
  max-height: 48px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #ffffff;
  font-size: 1.3rem;
  display: flex !important;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
  backdrop-filter: blur(12px);
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  aspect-ratio: 1 / 1 !important;
}

.lock-quick-circle-btn:hover {
  background: rgba(255, 255, 255, 0.25);
  border-color: rgba(255, 255, 255, 0.4);
  transform: scale(1.1);
  box-shadow: 0 0 18px rgba(255, 255, 255, 0.2);
}

.lock-unlock-hint {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.15s;
}

.lock-unlock-hint:hover {
  color: #ffffff;
}

.lock-chevron-up {
  font-size: 1rem;
  animation: bounceUp 1.5s infinite;
}

@keyframes bounceUp {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

/* ==========================================================================
   📌 STICKY NOTES WIDGET (YAPIŞKAN POST-IT NOTLARI)
   ========================================================================== */
.gokceos-sticky-note {
  position: absolute;
  width: 230px;
  min-height: 220px;
  background: linear-gradient(135deg, #fef08a 0%, #fde047 100%);
  border-radius: 14px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.45), 0 0 15px rgba(253, 224, 71, 0.3);
  padding: 0.65rem 0.8rem;
  display: flex;
  flex-direction: column;
  z-index: 150;
  user-select: none;
  animation: popIn 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
  border: 1px solid rgba(250, 204, 21, 0.6);
}

.sticky-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: grab;
  padding-bottom: 0.4rem;
  border-bottom: 1px dashed rgba(161, 98, 7, 0.3);
  margin-bottom: 0.4rem;
}

.sticky-header:active {
  cursor: grabbing;
}

.sticky-pin {
  font-size: 1.1rem;
}

.sticky-title {
  color: #713f12;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

.sticky-close {
  background: transparent;
  border: none;
  color: #854d0e;
  font-size: 0.8rem;
  font-weight: 900;
  cursor: pointer;
  padding: 0 4px;
  border-radius: 4px;
  transition: all 0.15s;
}

.sticky-close:hover {
  background: rgba(0, 0, 0, 0.1);
  color: #000000;
}

.sticky-textarea {
  flex: 1;
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  resize: none;
  color: #1e293b;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.45;
}

.sticky-textarea::placeholder {
  color: rgba(113, 63, 18, 0.6);
}

/* ==========================================================================
   🧮 MACOS GLASS CALCULATOR
   ========================================================================== */
.mac-calculator-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  height: 100%;
  padding: 0.5rem;
  box-sizing: border-box;
}

.calc-screen {
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  padding: 1.1rem 1rem;
  color: #ffffff;
  font-size: 2.2rem;
  font-weight: 800;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", monospace;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.5);
  line-height: 1;
}

.calc-keypad {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.55rem;
  flex: 1;
}

.calc-btn {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  color: #ffffff;
  font-size: 1.25rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.12s ease;
  user-select: none;
  min-height: 48px;
}

.calc-btn:hover {
  background: rgba(255, 255, 255, 0.18);
  transform: scale(1.03);
}

.calc-btn:active {
  transform: scale(0.96);
}

.calc-btn-func {
  background: rgba(148, 163, 184, 0.15);
  color: #cbd5e1;
}

.calc-btn-op {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  border-color: #f59e0b;
  color: #ffffff;
  font-weight: 900;
}

.calc-btn-op:hover {
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
  box-shadow: 0 0 15px rgba(245, 158, 11, 0.4);
}

.calc-btn-zero {
  grid-column: span 2;
  justify-content: flex-start;
  padding-left: 1.6rem;
}

.calc-btn-eq {
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
  border-color: #22c55e;
}

.calc-btn-eq:hover {
  background: linear-gradient(135deg, #4ade80 0%, #22c55e 100%);
  box-shadow: 0 0 15px rgba(34, 197, 94, 0.4);
}

/* ==========================================================================
   📓 MACOS PATRON NOTEPAD & AJANDA
   ========================================================================== */
.mac-notepad-wrap {
  display: flex;
  height: 100%;
  background: rgba(15, 23, 42, 0.7);
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.notepad-sidebar {
  width: 220px;
  background: rgba(0, 0, 0, 0.35);
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
}

.notepad-sidebar-header {
  padding: 0.85rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  color: #ffffff;
  font-size: 0.85rem;
}

.notepad-add-btn {
  background: rgba(56, 189, 248, 0.15);
  border: 1px solid rgba(56, 189, 248, 0.3);
  color: #38bdf8;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 0.2rem 0.55rem;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s;
}

.notepad-add-btn:hover {
  background: rgba(56, 189, 248, 0.3);
  color: #ffffff;
}

.notepad-list {
  flex: 1;
  overflow-y: auto;
  padding: 0.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.notepad-item {
  padding: 0.6rem 0.75rem;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.notepad-item:hover {
  background: rgba(255, 255, 255, 0.05);
}

.notepad-item.active {
  background: rgba(56, 189, 248, 0.18);
  border: 1px solid rgba(56, 189, 248, 0.3);
}

.notepad-item-title {
  color: #f1f5f9;
  font-size: 0.82rem;
  font-weight: 750;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.notepad-item-date {
  color: #94a3b8;
  font-size: 0.7rem;
}

.notepad-editor {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.notepad-textarea {
  flex: 1;
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  resize: none;
  padding: 1.2rem;
  color: #f8fafc;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Menlo", monospace;
  font-size: 0.92rem;
  line-height: 1.6;
  box-sizing: border-box;
}

.notepad-footer {
  padding: 0.5rem 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  justify-content: space-between;
  font-size: 0.72rem;
  color: #64748b;
  font-weight: 600;
}

/* ==========================================================================
   🍞 10. APPLE MACOS INCOMING LIVE NOTIFICATION TOAST BANNERS
   ========================================================================== */
#os-toast-container {
  position: fixed;
  top: 46px;
  right: 16px;
  width: 370px;
  max-width: calc(100vw - 32px);
  z-index: 99990;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.apple-toast-banner {
  pointer-events: auto;
  background: linear-gradient(145deg, rgba(15, 23, 42, 0.9) 0%, rgba(26, 36, 56, 0.84) 100%) !important;
  backdrop-filter: blur(50px) saturate(220%) brightness(108%) !important;
  -webkit-backdrop-filter: blur(50px) saturate(220%) brightness(108%) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  border-radius: 18px;
  padding: 0.85rem 1rem;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.65), 0 0 25px rgba(56, 189, 248, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
  transform: translateX(115%) scale(0.92);
  opacity: 0;
  transition: transform 0.38s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.28s ease, box-shadow 0.2s ease;
  cursor: pointer;
  box-sizing: border-box;
}

.apple-toast-banner.is-visible {
  transform: translateX(0) scale(1);
  opacity: 1;
}

.apple-toast-banner:hover {
  background: linear-gradient(145deg, rgba(15, 23, 42, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%) !important;
  border-color: rgba(56, 189, 248, 0.5) !important;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.75), 0 0 32px rgba(56, 189, 248, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
  transform: translateY(-2px) scale(1.01);
}

.apple-toast-banner.is-urgent {
  border-left: 4px solid #ef4444 !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.65), 0 0 30px rgba(239, 68, 68, 0.3) !important;
}

.apple-toast-banner.is-update {
  border-left: 4px solid #38bdf8 !important;
}

.apple-toast-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.35rem;
}

.apple-toast-meta {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.apple-toast-icon {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
}

.apple-toast-app-name {
  color: #94a3b8;
  font-size: 0.68rem;
  font-weight: 850;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.apple-toast-right {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.apple-toast-time {
  color: #64748b;
  font-size: 0.65rem;
}

.apple-toast-close {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #94a3b8 !important;
  font-size: 0.62rem !important;
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  max-width: 20px !important;
  min-height: 20px !important;
  max-height: 20px !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  padding: 0 !important;
  line-height: 1 !important;
  box-sizing: border-box !important;
  flex-shrink: 0 !important;
  transition: all 0.15s cubic-bezier(0.16, 1, 0.3, 1) !important;
  user-select: none;
}

.apple-toast-close:hover {
  background: rgba(239, 68, 68, 0.25) !important;
  color: #ffffff !important;
  border-color: rgba(239, 68, 68, 0.5) !important;
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.35) !important;
}

.apple-toast-close:active {
  transform: scale(0.9) !important;
}

.apple-toast-body {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.apple-toast-title {
  color: #ffffff;
  font-size: 0.84rem;
  font-weight: 800;
  line-height: 1.3;
}

.apple-toast-desc {
  color: #cbd5e1;
  font-size: 0.76rem;
  line-height: 1.4;
  margin: 0;
}

.apple-toast-actions {
  margin-top: 0.55rem;
  display: flex;
  gap: 0.4rem;
}

.apple-toast-btn {
  background: rgba(56, 189, 248, 0.18);
  border: 1px solid rgba(56, 189, 248, 0.35);
  color: #38bdf8;
  padding: 0.3rem 0.75rem;
  border-radius: 8px;
  font-size: 0.72rem;
  font-weight: 750;
  cursor: pointer;
  transition: all 0.15s ease;
}

.apple-toast-btn:hover {
  background: rgba(56, 189, 248, 0.35);
  color: #ffffff;
  border-color: #38bdf8;
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.35);
}

/* ==========================================================================
   💬 11. ENRICHED GÖKÇEOS MESSENGER & TEAM CHAT STYLES
   ========================================================================== */
.messenger-container {
  height: 100%;
  display: flex;
  background: #080e1a;
  border-radius: inherit;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
}

.messenger-sidebar {
  width: 260px;
  min-width: 220px;
  background: rgba(15, 23, 42, 0.65);
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}

.messenger-search-header {
  padding: 0.75rem 0.85rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.messenger-search-box {
  display: flex;
  align-items: center;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 99px;
  padding: 0.35rem 0.65rem;
  gap: 0.4rem;
}

.messenger-search-box .search-icon {
  font-size: 0.75rem;
  opacity: 0.7;
}

.messenger-search-box input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: #ffffff;
  font-size: 0.76rem;
  min-width: 0;
}

.messenger-search-box .search-clear {
  background: transparent;
  border: none;
  color: #94a3b8;
  font-size: 0.65rem;
  cursor: pointer;
  padding: 0;
}

.messenger-list-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 0.5rem 0.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.messenger-group-title {
  color: #64748b;
  font-size: 0.62rem;
  font-weight: 850;
  letter-spacing: 0.06em;
  padding: 0.4rem 0.5rem 0.2rem;
}

.messenger-contact-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.65rem;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.16s ease;
  user-select: none;
}

.messenger-contact-item:hover {
  background: rgba(255, 255, 255, 0.06);
}

.messenger-contact-item.active {
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.22) 0%, rgba(99, 102, 241, 0.2) 100%);
  border: 1px solid rgba(56, 189, 248, 0.35);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.contact-avatar-wrap {
  position: relative;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}

.contact-status-dot {
  position: absolute;
  bottom: 0px;
  right: 0px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 2px solid #0f172a;
}

.contact-status-dot.online {
  background: #22c55e;
  box-shadow: 0 0 6px rgba(34, 197, 94, 0.8);
}

.contact-status-dot.idle {
  background: #f59e0b;
}

.contact-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.contact-name-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.contact-name {
  color: #f1f5f9;
  font-size: 0.8rem;
  font-weight: 750;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.contact-badge {
  background: #ef4444;
  color: #ffffff;
  font-size: 0.6rem;
  font-weight: 900;
  padding: 0.1rem 0.4rem;
  border-radius: 99px;
}

.contact-role {
  color: #94a3b8;
  font-size: 0.68rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.messenger-chat-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: rgba(10, 15, 28, 0.85);
  min-width: 0;
}

.messenger-chat-header {
  padding: 0.75rem 1.1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.02);
  display: flex;
  justify-content: space-between;
  align-items: center;
  backdrop-filter: blur(12px);
}

.chat-header-meta {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.chat-header-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(56, 189, 248, 0.15);
  border: 1px solid rgba(56, 189, 248, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
}

.chat-header-title {
  color: #ffffff;
  font-size: 0.92rem;
  font-weight: 800;
  display: block;
}

.chat-header-desc {
  color: #94a3b8;
  font-size: 0.72rem;
  margin: 0.1rem 0 0;
}

.chat-header-actions {
  display: flex;
  gap: 0.35rem;
}

.chat-action-btn {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #cbd5e1;
  padding: 0.32rem 0.65rem;
  border-radius: 8px;
  font-size: 0.78rem;
  cursor: pointer;
  transition: all 0.15s ease;
}

.chat-action-btn:hover {
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
}

.messenger-messages-stream {
  flex: 1;
  overflow-y: auto;
  padding: 1rem 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.messenger-date-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0.4rem 0;
}

.messenger-date-divider span {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #64748b;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 0.2rem 0.65rem;
  border-radius: 99px;
}

.messenger-msg-row {
  display: flex;
  gap: 0.65rem;
  max-width: 82%;
}

.messenger-msg-row.incoming {
  align-self: flex-start;
}

.messenger-msg-row.outgoing {
  align-self: flex-end;
  flex-direction: row-reverse;
}

.msg-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  flex-shrink: 0;
  margin-top: 0.2rem;
}

.msg-bubble-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.msg-sender-name {
  color: #94a3b8;
  font-size: 0.68rem;
  font-weight: 750;
  margin-left: 0.4rem;
}

.msg-sender-role {
  color: #64748b;
  font-weight: 600;
  font-size: 0.64rem;
}

.msg-bubble {
  padding: 0.65rem 0.9rem;
  border-radius: 16px;
  position: relative;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  line-height: 1.45;
}

.messenger-msg-row.incoming .msg-bubble {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-top-left-radius: 4px;
}

.messenger-msg-row.is-ai .msg-bubble {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.15) 0%, rgba(15, 23, 42, 0.8) 100%);
  border: 1px solid rgba(34, 197, 94, 0.35);
  box-shadow: 0 0 16px rgba(34, 197, 94, 0.15);
}

.messenger-msg-row.outgoing .msg-bubble {
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
  border: 1px solid rgba(56, 189, 248, 0.4);
  border-top-right-radius: 4px;
}

.msg-text {
  color: #f1f5f9;
  font-size: 0.82rem;
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
}

.msg-meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.3rem;
  margin-top: 0.3rem;
}

.msg-time {
  font-size: 0.62rem;
  color: rgba(255, 255, 255, 0.55);
}

.msg-status {
  color: #38bdf8;
  font-size: 0.65rem;
  font-weight: 800;
}

.messenger-input-container {
  padding: 0.75rem 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.02);
}

.messenger-input-bar {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 0.35rem 0.65rem;
}

.input-tool-btn {
  background: transparent;
  border: none;
  color: #94a3b8;
  font-size: 0.88rem;
  cursor: pointer;
  padding: 0.2rem;
  border-radius: 6px;
  transition: all 0.15s ease;
}

.input-tool-btn:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
}

.messenger-text-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: #ffffff;
  font-size: 0.82rem;
}

.messenger-send-btn {
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
  border: 1px solid rgba(56, 189, 248, 0.5);
  color: #ffffff;
  font-size: 0.78rem;
  font-weight: 800;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
}

.messenger-send-btn:hover {
  background: linear-gradient(135deg, #38bdf8 0%, #0284c7 100%);
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.4);
  transform: scale(1.05);
}

/* ==========================================================================
   🧮 12. APPLE CALCULATOR STYLES
   ========================================================================== */
.apple-calc-container {
  height: 100%;
  background: #1c1c1e;
  display: flex;
  flex-direction: column;
  padding: 1.2rem;
  box-sizing: border-box;
  user-select: none;
}

.apple-calc-display {
  color: #ffffff;
  font-size: 2.8rem;
  font-weight: 300;
  text-align: right;
  padding: 0.8rem 0.5rem;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", sans-serif;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.apple-calc-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.6rem;
  flex: 1;
}

.calc-btn {
  background: #505050;
  border: none;
  border-radius: 50%;
  color: #ffffff;
  font-size: 1.2rem;
  font-weight: 500;
  cursor: pointer;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: filter 0.15s ease;
}

.calc-btn:hover {
  filter: brightness(1.25);
}

.calc-btn.fn {
  background: #a5a5a5;
  color: #000000;
}

.calc-btn.op {
  background: #ff9f0a;
  color: #ffffff;
  font-size: 1.4rem;
}

.calc-btn.zero {
  grid-column: span 2;
  aspect-ratio: auto;
  border-radius: 99px;
  justify-content: flex-start;
  padding-left: 1.5rem;
}

/* SLIDE DOWN ANIMATION FOR FACTORY INTERACTIVE DIALOGUE DRAWER */
@keyframes slideDown {
  0% {
    opacity: 0;
    transform: translateY(-16px) scale(0.98);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

#factory-executive-proposal-card {
  animation: slideDown 0.28s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* ==========================================================================
   📱 13. UNIVERSAL CROSS-DEVICE RESPONSIVE SYSTEM (MOBILE / TABLET / POS / 4K)
   ========================================================================== */

/* Universal Device Profile Base Styles */
@media (max-width: 768px) {
  .gokceos-app-window {
    left: 4px !important;
    top: 32px !important;
    width: calc(100vw - 8px) !important;
    max-width: calc(100vw - 8px) !important;
    height: calc(100vh - 52px) !important;
    max-height: calc(100vh - 52px) !important;
    border-radius: 10px !important;
    box-shadow: 0 4px 25px rgba(0, 0, 0, 0.8) !important;
  }

  .gokceos-top-menubar {
    padding: 0 0.4rem;
    height: 30px !important;
  }

  .mac-clock-widget {
    font-size: 0.7rem;
    padding: 0 0.25rem;
  }

  .gokceos-dock-container {
    bottom: 6px;
    padding: 0.35rem 0.6rem;
    max-width: 96vw;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .gokceos-dock-container::-webkit-scrollbar {
    display: none;
  }

  .dock-item {
    width: 38px;
    height: 38px;
    font-size: 1.25rem;
  }

  .window-header {
    padding: 0.4rem 0.6rem;
    min-height: 36px;
  }

  .window-title {
    font-size: 0.82rem;
  }

  .window-body {
    padding: 0.6rem !important;
  }

  .window-ribbon-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    scrollbar-width: thin;
  }
}

html.gokce-device-mobile .gokceos-app-window {
  left: 4px !important;
  top: 32px !important;
  width: calc(100vw - 8px) !important;
  max-width: calc(100vw - 8px) !important;
  height: calc(100vh - 52px) !important;
  max-height: calc(100vh - 52px) !important;
  border-radius: 10px !important;
  box-shadow: 0 4px 25px rgba(0, 0, 0, 0.8) !important;
}

html.gokce-device-mobile .dock-item {
  width: 38px;
  height: 38px;
  font-size: 1.25rem;
}

/* Tablet & POS Terminal Optimizations */
@media (min-width: 769px) and (max-width: 1024px) {
  .gokceos-app-window {
    max-width: calc(100vw - 16px) !important;
    max-height: calc(100vh - 60px) !important;
  }

  .dock-item {
    width: 44px;
    height: 44px;
  }

  .window-body {
    padding: 0.85rem !important;
  }
}

html.gokce-device-tablet .gokceos-app-window {
  max-width: calc(100vw - 16px) !important;
  max-height: calc(100vh - 60px) !important;
}

/* 4K Ultra-Wide Monitors (>1920px) */
@media (min-width: 1921px) {
  .gokceos-top-menubar {
    height: 36px;
    font-size: 0.88rem;
  }

  .dock-item {
    width: 58px;
    height: 58px;
    font-size: 1.8rem;
  }

  .gokceos-app-window {
    box-shadow: 0 25px 70px rgba(0, 0, 0, 0.75), 0 0 35px rgba(56, 189, 248, 0.2) !important;
  }
}

html.gokce-device-ultrawide .gokceos-top-menubar {
  height: 36px;
  font-size: 0.88rem;
}

/* ==========================================================================
   ✨ GÖKÇEOS PREMIUM MULTI-PAGE DESKTOP LAUNCHER & SPOTLIGHT SYSTEM
   ========================================================================== */

#os-desktop-grid,
.gokceos-desktop-grid,
.gokceos-desktop-page-viewport {
  position: absolute;
  top: 45px;
  left: 24px;
  right: 24px;
  bottom: 85px;
  display: block !important;
  overflow: visible !important;
  z-index: 10;
  pointer-events: auto;
  box-sizing: border-box;
}

@media (max-width: 1200px) {
  .gokceos-desktop-grid,
  .gokceos-desktop-page-viewport {
    right: 24px;
  }
}

.gokceos-desktop-pages-slider {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

.gokceos-desktop-page,
.gokceos-desktop-page-container {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-start !important;
  align-content: flex-start !important;
  gap: 1.2rem 1.4rem !important;
  padding: 20px 24px !important;
  max-width: 100% !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

@media (min-width: 2400px) {
  .gokceos-desktop-page,
  .gokceos-desktop-page-container {
    max-width: 2200px !important;
    gap: 2rem 1.8rem !important;
    padding: 36px 48px !important;
  }
}

@media (min-width: 1920px) and (max-width: 2399px) {
  .gokceos-desktop-page,
  .gokceos-desktop-page-container {
    max-width: 1720px !important;
    gap: 1.8rem 1.6rem !important;
    padding: 30px 42px !important;
  }
}

@media (min-width: 1440px) and (max-width: 1919px) {
  .gokceos-desktop-page,
  .gokceos-desktop-page-container {
    max-width: 1340px !important;
    gap: 1.4rem 1.2rem !important;
    padding: 24px 36px !important;
  }
}

@media (min-width: 1100px) and (max-width: 1439px) {
  .gokceos-desktop-page,
  .gokceos-desktop-page-container {
    max-width: 1060px !important;
    padding: 20px 28px !important;
    gap: 1.2rem 1rem !important;
  }
}

@media (min-width: 768px) and (max-width: 1099px) {
  .gokceos-desktop-page,
  .gokceos-desktop-page-container {
    max-width: 740px !important;
    padding: 16px 20px !important;
    gap: 1rem 0.8rem !important;
  }
}

@media (max-width: 767px) {
  .gokceos-desktop-page,
  .gokceos-desktop-page-container {
    max-width: 100% !important;
    padding: 12px 14px !important;
    gap: 0.8rem 0.6rem !important;
  }
}

/* 🎴 DESKTOP APP CARD — PREMIUM macOS / iPadOS LAUNCHER (P2) */
.gokceos-app-card,
.gokceos-desktop-app-card {
  width: 104px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  cursor: pointer;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none;
  padding: 0.35rem 0.2rem;
  border-radius: 12px;
  transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.18s ease;
  user-select: none;
  position: relative;
  text-decoration: none;
  pointer-events: auto;
}

.gokceos-app-card:focus-visible,
.gokceos-desktop-app-card:focus-visible {
  outline: 1.5px solid rgba(56, 189, 248, 0.6);
  outline-offset: 3px;
  border-radius: 10px;
}

.gokceos-app-card:hover,
.gokceos-desktop-app-card:hover {
  transform: translateY(-2px) scale(1.045);
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

.gokceos-app-card:active,
.gokceos-desktop-app-card:active {
  transform: translateY(0) scale(0.97);
  transition-duration: 0.08s;
}

.gokceos-app-icon-box {
  width: 62px;
  height: 62px;
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transition: transform 0.15s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.15s ease, border-color 0.15s ease;
  position: relative;
}

.gokceos-app-card:hover .gokceos-app-icon-box,
.gokceos-desktop-app-card:hover .gokceos-app-icon-box {
  border-color: rgba(56, 189, 248, 0.5);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.5), 0 0 16px rgba(56, 189, 248, 0.35);
  transform: scale(1.03);
}

/* 📐 CANONICAL MENU ROW STRICT LEFT ALIGNMENT & 36px STANDARD HEIGHT (G-025-A) */
.menu-row,
.settings-nav-btn,
.account-nav-btn,
.gokce-account-nav-btn,
.sidebar-item-btn,
.user-mgmt-nav-btn,
.gkv2-nav-item,
.factory-v3-nav-item {
  display: grid !important;
  grid-template-columns: 24px minmax(0, 1fr) auto !important;
  column-gap: 8px !important;
  justify-content: stretch !important;
  align-items: center !important;
  text-align: left !important;
  box-sizing: border-box !important;
  height: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
  padding: 0 8px !important;
  border-radius: 6px !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  transition: all 0.12s ease !important;
}

/* Collapsed rail items (32x32px Compact) */
.sidebar-rail-btn {
  width: 32px !important;
  min-width: 32px !important;
  max-width: 32px !important;
  height: 32px !important;
  min-height: 32px !important;
  max-height: 32px !important;
  padding: 0 !important;
  border-radius: 6px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}

.gkv2-nav-item.active,
.settings-nav-btn.active,
.sidebar-item-btn.active,
.factory-v3-nav-item.active,
.sidebar-rail-btn.active {
  background: rgba(56, 189, 248, 0.16) !important;
  color: #38bdf8 !important;
  border-left: 3px solid #38bdf8 !important;
  font-weight: 750 !important;
}

.menu-row > .menu-icon,
.settings-nav-btn > span:first-child,
.account-nav-btn > span:first-child,
.gokce-account-nav-btn > span:first-child,
.sidebar-item-btn > span:first-child,
.user-mgmt-nav-btn > span:first-child,
.gkv2-nav-item > .gkv2-item-icon {
  width: 24px !important;
  height: 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.1rem !important;
  text-align: center !important;
  margin: 0 !important;
  padding: 0 !important;
}

.menu-row > .menu-label,
.settings-nav-btn > span:nth-child(2),
.account-nav-btn > span:nth-child(2),
.gokce-account-nav-btn > span:nth-child(2),
.sidebar-item-btn > span:nth-child(2),
.user-mgmt-nav-btn > span:nth-child(2) {
  text-align: left !important;
  justify-self: start !important;
  width: 100% !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  margin: 0 !important;
  padding: 0 !important;
}

.gkv2-nav-item > .gkv2-item-label {
  text-align: left !important;
  justify-self: start !important;
  width: 100% !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
  margin: 0 !important;
  padding: 0 !important;
}

.gokceos-icon-badge-container {
  position: absolute;
  top: -4px;
  right: -6px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 3px;
  z-index: 15;
  pointer-events: none;
}

.gokce-product-badge {
  display: inline-flex;
  align-items: center;
  gap: 2.5px;
  font-size: 8.5px;
  font-weight: 700;
  height: 16px;
  max-height: 18px;
  padding: 0 5px;
  border-radius: 99px;
  letter-spacing: 0.02em;
  white-space: nowrap;
  line-height: 1;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(8px);
}

.gokce-product-badge svg {
  width: 7px;
  height: 7px;
  flex-shrink: 0;
}

/* Compact status dot for secondary state (e.g. unconfigured connection) */
.gokce-badge-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-block;
  box-shadow: 0 0 5px currentColor;
  border: 1px solid rgba(0, 0, 0, 0.6);
}

.gokce-badge-dot.badge-unconfigured {
  background: #60a5fa;
  color: #60a5fa;
}

.gokce-badge-dot.badge-warn {
  background: #f59e0b;
  color: #f59e0b;
}

/* “Özel”: koyu mor/lacivert zemin, küçük yıldız simgesi */
.gokce-product-badge.badge-custom {
  background: linear-gradient(135deg, #4c1d95 0%, #1e1b4b 100%);
  color: #f3e8ff;
  border: 1px solid #c084fc;
}

/* “Ek”: amber/altın ton, küçük artı simgesi */
.gokce-product-badge.badge-paid,
.gokce-product-badge.badge-addon {
  background: linear-gradient(135deg, #78350f 0%, #451a03 100%);
  color: #fef08a;
  border: 1px solid #fbbf24;
}

/* “Bağlantı Gerekli”: nötr koyu gri/mavi ton */
.gokce-product-badge.badge-unconfigured {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  color: #93c5fd;
  border: 1px solid #60a5fa;
}

/* “Çekirdek”: koyu mavi/teal ton, çekirdek nokta simgesi */
.gokce-product-badge.badge-core {
  background: linear-gradient(135deg, #075985 0%, #042f2e 100%);
  color: #5eead4;
  border: 1px solid #2dd4bf;
}

/* “Dahil”: zümrüt yeşili */
.gokce-product-badge.badge-included {
  background: linear-gradient(135deg, #064e3b 0%, #022c22 100%);
  color: #a7f3d0;
  border: 1px solid #34d399;
}

.gokce-product-badge.badge-default {
  background: rgba(15, 23, 42, 0.9);
  color: #e2e8f0;
  border: 1px solid rgba(255, 255, 255, 0.2);
}


.gokceos-app-label {
  color: #f1f5f9;
  font-size: 0.82rem;
  font-weight: 600;
  text-align: center;
  max-width: 110px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.9);
  letter-spacing: -0.01em;
}

/* 🔘 PAGE INDICATOR DOTS */
.gokceos-page-dots {
  position: absolute;
  bottom: 84px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.35rem 0.8rem;
  background: rgba(15, 23, 42, 0.5);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 99px;
  z-index: 160;
}

.gokceos-page-dots .page-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: all 0.22s ease;
}

.gokceos-page-dots .page-dot:hover {
  background: rgba(255, 255, 255, 0.7);
}

.gokceos-page-dots .page-dot.active {
  width: 22px;
  border-radius: 99px;
  background: #38bdf8;
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.6);
}

/* 🔍 SPOTLIGHT SEARCH FLOATING MODAL */
.gokceos-spotlight-modal {
  position: fixed;
  inset: 0;
  background: rgba(2, 6, 23, 0.65);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  z-index: 8500;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 14vh;
  animation: spotlightFadeIn 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes spotlightFadeIn {
  from { opacity: 0; transform: scale(0.98); }
  to { opacity: 1; transform: scale(1); }
}

.gokceos-spotlight-panel {
  width: 640px;
  max-width: 90vw;
  background: rgba(15, 23, 42, 0.94);
  border: 1.5px solid rgba(56, 189, 248, 0.35);
  border-radius: 20px;
  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.9), 0 0 35px rgba(56, 189, 248, 0.25);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.spotlight-input-wrap {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 1.1rem 1.4rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.spotlight-input-wrap .spotlight-search-icon {
  font-size: 1.3rem;
  color: #38bdf8;
}

.spotlight-input-wrap input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: #ffffff;
  font-size: 1.15rem;
  font-weight: 500;
}

.spotlight-input-wrap input::placeholder {
  color: #64748b;
}

.spotlight-shortcut-badge {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #94a3b8;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.2rem 0.5rem;
  border-radius: 6px;
}

.spotlight-results-container {
  max-height: 420px;
  overflow-y: auto;
  padding: 0.6rem 0.8rem 1rem;
}

.spotlight-group-title {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  color: #38bdf8;
  letter-spacing: 0.06em;
  padding: 0.6rem 0.6rem 0.3rem;
}

.spotlight-result-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.65rem 0.85rem;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.12s ease;
}

.spotlight-result-item:hover,
.spotlight-result-item.selected {
  background: rgba(56, 189, 248, 0.15);
}

.spotlight-item-left {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.spotlight-item-icon {
  font-size: 1.35rem;
  width: 32px;
  text-align: center;
}

.spotlight-item-name {
  font-size: 0.92rem;
  font-weight: 600;
  color: #f1f5f9;
}

.spotlight-item-category {
  font-size: 0.76rem;
  color: #94a3b8;
}

.spotlight-item-hint {
  font-size: 0.74rem;
  color: #38bdf8;
  font-weight: 600;
}

/* ▦ APP LIBRARY LAUNCHPAD MODAL */
.gokceos-app-library-modal {
  position: fixed;
  inset: 0;
  background: rgba(2, 6, 23, 0.85);
  backdrop-filter: blur(32px) saturate(180%);
  -webkit-backdrop-filter: blur(32px) saturate(180%);
  z-index: 8400;
  display: flex;
  flex-direction: column;
  padding: 2.5rem 4rem 4rem;
  overflow-y: auto;
  animation: appLibraryFadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes appLibraryFadeIn {
  from { opacity: 0; transform: scale(0.97); }
  to { opacity: 1; transform: scale(1); }
}

.app-library-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2rem;
  max-width: 1360px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.app-library-header h2 {
  font-size: 1.6rem;
  font-weight: 800;
  color: #ffffff;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.app-library-close-btn {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #cbd5e1;
  font-size: 1.1rem;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}

.app-library-close-btn:hover {
  background: rgba(239, 68, 68, 0.2);
  border-color: #ef4444;
  color: #fff;
}

.app-library-categories {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 2rem;
  max-width: 1360px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.app-library-cat-pill {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #cbd5e1;
  padding: 0.45rem 1rem;
  border-radius: 99px;
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.app-library-cat-pill:hover {
  background: rgba(56, 189, 248, 0.15);
  border-color: rgba(56, 189, 248, 0.4);
  color: #38bdf8;
}

.app-library-cat-pill.active {
  background: #38bdf8;
  border-color: #38bdf8;
  color: #030712;
  font-weight: 750;
  box-shadow: 0 0 15px rgba(56, 189, 248, 0.4);
}

.app-library-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 2rem 2.2rem;
  max-width: 1360px;
  width: 100%;
  margin: 0 auto;
  align-content: flex-start;
}

.dock-utility-item {
  background: rgba(56, 189, 248, 0.1) !important;
  border-color: rgba(56, 189, 248, 0.25) !important;
  cursor: pointer !important;
}

.dock-utility-item:hover {
  background: rgba(56, 189, 248, 0.25) !important;
  border-color: #38bdf8 !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   🖥️ DESKTOP INTERACTION: DRAG & DROP, LASSO MARQUEE & JIGGLE EDIT MODE
   ══════════════════════════════════════════════════════════════════════════ */

#os-marquee-selection-box {
  position: absolute;
  background: rgba(56, 189, 248, 0.16);
  border: 1.5px solid #38bdf8;
  border-radius: 6px;
  pointer-events: none;
  z-index: 9999;
  display: none;
  box-shadow: 0 0 15px rgba(56, 189, 248, 0.25);
}

.gokceos-app-card.is-selected {
  outline: 2px solid #38bdf8;
  outline-offset: 4px;
  border-radius: 12px;
  background: rgba(56, 189, 248, 0.12);
  box-shadow: 0 0 20px rgba(56, 189, 248, 0.35);
}

.gokceos-app-card.is-dragging {
  cursor: grabbing !important;
  pointer-events: none;
  filter: drop-shadow(0 15px 30px rgba(0,0,0,0.8));
}

@keyframes iconJiggle {
  0% { transform: rotate(-1deg); }
  50% { transform: rotate(1.2deg); }
  100% { transform: rotate(-1deg); }
}

.gokceos-desktop-pages-slider.is-editing .gokceos-app-card {
  animation: iconJiggle 0.25s infinite ease-in-out;
  position: relative;
}

.gokceos-icon-delete-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #ef4444;
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.6);
  z-index: 10;
}

/* ══════════════════════════════════════════════════════════════════════════
   🔒 GÖKÇEOS CINEMATIC LOCK & LOGIN EXPERIENCE V3 (BOSPHORUS / CAPPADOCIA)
   ══════════════════════════════════════════════════════════════════════════ */

.gokceos-lock-screen {
  position: fixed;
  inset: 0;
  z-index: 9999999;
  background: radial-gradient(circle at 50% 30%, rgba(15, 23, 42, 0.75) 0%, rgba(2, 6, 23, 0.95) 100%),
              url('../assets/brand/cosmic-aurora.svg') center/cover no-repeat;
  backdrop-filter: blur(40px) saturate(190%);
  -webkit-backdrop-filter: blur(40px) saturate(190%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 3.5rem 2rem 2rem;
  color: #f8fafc;
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.gokceos-lock-screen:not(.is-locked) {
  opacity: 0;
  pointer-events: none;
  transform: scale(1.04);
}

.lock-profile-card {
  background: rgba(15, 23, 42, 0.85);
  border: 1.5px solid rgba(56, 189, 248, 0.4);
  border-radius: 20px;
  padding: 2.2rem 2rem;
  width: 380px;
  max-width: 90vw;
  text-align: center;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.9), 0 0 40px rgba(56, 189, 248, 0.15);
}

.lock-pass-field {
  width: 100%;
  background: rgba(2, 6, 23, 0.9);
  border: 1.5px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  color: #fff;
  padding: 0.65rem 0.9rem;
  font-size: 0.92rem;
  box-sizing: border-box;
  transition: all 0.15s ease;
}

.lock-pass-field:focus {
  outline: none;
  border-color: #38bdf8;
  box-shadow: 0 0 15px rgba(56, 189, 248, 0.4);
}

.lock-actions-row {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.8rem;
  justify-content: center;
}

.lock-secondary-btn {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #cbd5e1;
  font-size: 0.76rem;
  font-weight: 700;
  padding: 0.45rem 0.8rem;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.lock-secondary-btn:hover {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}