/* ============================================================
   IMEJE — Üye paneli / auth stilleri
   style.css'teki :root değişkenlerini miras alır, üstüne yazmaz.
   ============================================================ */

/* Native form kontrollerini (select açılır listesi, dosya seçici, scrollbar)
   otomatik koyu temaya sokar — tarayıcı bunu kendi başına uygular. */
:root { color-scheme: dark; }

/* Panel/modal/auth-form yüzeylerinde ana buton: site genelindeki neon-cyan
   dolgu yerine X/Twitter tarzı düz beyaz — daha sade, "cart curt" değil.
   Ana pazarlama sitesinin (index/projeler/ekip/iletisim) butonlarına dokunmuyor. */
.panel-wrap .btn-primary,
.modal-overlay .btn-primary,
.auth-card .btn-primary {
  background: #fff;
  color: #0a0a0c;
}
.panel-wrap .btn-primary:hover,
.modal-overlay .btn-primary:hover,
.auth-card .btn-primary:hover {
  background: #d8d8d8;
  box-shadow: none;
}

/* ---------- Header: Giriş / kullanıcı pill'i ---------- */
.auth-area { display: flex; align-items: center; }
.btn-sm { padding: 0.55rem 1.1rem; font-size: 0.85rem; }

.user-pill-wrap { position: relative; }
.user-pill {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.35rem 0.9rem 0.35rem 0.35rem;
  cursor: pointer;
  font-family: inherit;
  color: inherit;
  transition: border-color 0.25s ease, transform 0.2s ease;
}
.user-pill-menu {
  position: absolute; top: calc(100% + 8px); right: 0;
  min-width: 150px;
  background: #16161c;
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.55);
  padding: 6px;
  z-index: 60;
}
.user-pill-menu a,
.user-pill-menu button {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  color: var(--text);
  font-family: inherit;
  font-size: 0.86rem;
  padding: 0.6rem 0.8rem;
  border-radius: 7px;
  cursor: pointer;
}
.user-pill-menu a:hover,
.user-pill-menu button:hover { background: rgba(255, 255, 255, 0.06); }
.user-pill-menu button { color: var(--neon-pink); }
.user-pill:hover { border-color: var(--accent); transform: translateY(-1px); }
.user-pill img,
.user-pill .avatar-fallback {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
  background: linear-gradient(135deg, var(--neon-cyan), var(--neon-pink));
  display: grid;
  place-items: center;
  font-size: 0.8rem;
  font-weight: 700;
  color: #2b1200;
}
.user-pill span { font-size: 0.9rem; font-weight: 500; color: var(--text); }

/* ---------- Auth sayfaları (giriş/şifremi-unuttum/sıfırla/davet) ---------- */
.auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--header-h) + 3rem) 1.5rem 3rem;
  background:
    radial-gradient(1000px 400px at 15% 0%, rgba(255, 106, 0, 0.10), transparent 60%),
    var(--bg);
}
.auth-card {
  width: 100%;
  max-width: 420px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 2.4rem 2.2rem;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
}
.auth-card h1 {
  font-family: "Oswald", sans-serif;
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 0.4rem;
}
.auth-card .auth-sub {
  color: var(--text-dim);
  font-size: 0.95rem;
  margin-bottom: 1.8rem;
}
.field { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 1.1rem; }
.field label { font-size: 0.85rem; color: var(--text-dim); }
.field input,
.field textarea,
.field select {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.8rem 1rem;
  color: var(--text);
  font-family: inherit;
  font-size: 0.95rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(255, 106, 0, 0.15);
}
.auth-card .btn { width: 100%; text-align: center; margin-top: 0.4rem; border: none; }
.auth-links { margin-top: 1.4rem; text-align: center; font-size: 0.88rem; color: var(--text-dim); }
.auth-links a { color: var(--accent); }
.auth-links a:hover { text-decoration: underline; }

.form-msg { font-size: 0.88rem; padding: 0.7rem 0.9rem; border-radius: 8px; margin-bottom: 1.1rem; display: none; }
.form-msg.error { display: block; background: rgba(255, 45, 120, 0.1); color: var(--neon-pink); border: 1px solid rgba(255, 45, 120, 0.3); }
.form-msg.success { display: block; background: rgba(255, 106, 0, 0.08); color: var(--accent); border: 1px solid rgba(255, 106, 0, 0.25); }

/* ---------- Panel iskeleti ---------- */
.panel-wrap { padding-top: var(--header-h); min-height: 100vh; }
.panel-banner {
  height: 220px;
  background:
    linear-gradient(135deg, rgba(255, 138, 61, 0.14), rgba(255, 45, 120, 0.14)),
    var(--bg-alt);
  background-size: cover;
  background-position: center;
  position: relative;
}
.panel-banner::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 40%, var(--bg) 100%);
}
.panel-header {
  width: min(1200px, 92%);
  margin: 0 auto;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.4rem;
  flex-wrap: wrap;
  transform: translateY(-46px);
  position: relative;
  z-index: 1;
  /* Rozet şeridi isim/rütbenin altına absolute konumlanıyor (bkz. .header-badge-row) —
     akışta yer kaplamadığı için burada elle boşluk ayırıyoruz ki alt sekmelerle çakışmasın. */
  margin-bottom: 2.6rem;
}
.panel-identity-group { display: flex; align-items: flex-end; gap: 1.4rem; }
.panel-avatar-col { display: flex; flex-direction: column; align-items: center; gap: 0.55rem; }
.panel-header-actions { display: flex; align-items: center; gap: 0.7rem; padding-bottom: 0.6rem; }

/* Header ikon butonları (Ayarlar / Bildirim / Çıkış) — arkaplansız, sade,
   hover'da hafif dolgu + küçük tooltip. Bordo/kutu görünümü yok, X tarzı. */
.icon-btn {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: transparent;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.icon-btn svg { width: 19px; height: 19px; display: block; }
.icon-btn:hover { background: rgba(255, 255, 255, 0.08); color: var(--text); }
.icon-btn::after {
  content: attr(data-tooltip);
  position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  background: #16161c;
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 0.7rem;
  white-space: nowrap;
  padding: 0.3rem 0.6rem;
  border-radius: 6px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 80;
}
.icon-btn:hover::after { opacity: 1; }

.settings-icon-btn svg { transition: transform 0.3s ease; }
.settings-icon-btn:hover svg { animation: iconBtnSpin 1s linear infinite; }
.settings-icon-btn.spin-once svg { animation: iconBtnSpin 0.5s ease; }
@keyframes iconBtnSpin { to { transform: rotate(360deg); } }

.logout-icon-btn:hover { background: rgba(255, 45, 120, 0.12); color: var(--neon-pink); }

.notif-badge {
  position: absolute; top: 2px; right: 2px;
  background: var(--neon-pink);
  color: #fff;
  font-size: 0.62rem; font-weight: 700;
  min-width: 15px; height: 15px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  padding: 0 3px;
  animation: notifBadgePulse 2.2s ease-in-out infinite;
}
@keyframes notifBadgePulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } }
.notif-modal-head {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: 0.4rem 0.8rem;
  padding-right: 2.6rem;
  margin-bottom: 1rem;
}
.notif-modal-head button {
  background: none; border: none; color: var(--text-dim);
  font-size: 0.78rem; cursor: pointer; font-family: inherit;
  white-space: nowrap;
}
.notif-modal-head button:hover { color: var(--text); }
.notif-item {
  display: block; width: 100%; text-align: left;
  padding: 0.85rem 0; border-top: 1px solid var(--border);
  background: none; border-left: none; border-right: none; border-bottom: none;
  color: var(--text); font-family: inherit; cursor: pointer;
}
.notif-item:first-child { border-top: none; }
.notif-item.unread .notif-msg::before {
  content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent); margin-right: 6px; vertical-align: middle;
}
.notif-item .notif-msg { font-size: 0.88rem; line-height: 1.5; }
.notif-item .notif-time { display: block; margin-top: 0.3rem; font-size: 0.74rem; color: var(--text-dim); }

/* Arama */
.search-input {
  display: block;
  width: 100%;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.7rem 1rem;
  color: var(--text);
  font-family: inherit;
  font-size: 0.9rem;
  margin-bottom: 1.2rem;
  transition: border-color 0.2s ease;
}
.search-input:focus { outline: none; border-color: var(--accent); }

/* Kaynaklar listesi */
.resource-item {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1rem 1.2rem;
  border-bottom: 1px solid var(--border);
}
.resource-item:last-child { border-bottom: none; }
.resource-item a { color: var(--accent); font-weight: 600; font-size: 0.95rem; }
.resource-item a:hover { text-decoration: underline; }
.resource-item .resource-desc { color: var(--text-dim); font-size: 0.82rem; margin-top: 0.2rem; }
.resource-item .resource-meta { color: var(--text-dim); font-size: 0.76rem; margin-top: 0.3rem; }
.panel-avatar {
  width: 108px;
  height: 108px;
  border-radius: 50%;
  border: 4px solid var(--bg);
  object-fit: cover;
  background: linear-gradient(135deg, var(--neon-cyan), var(--neon-pink));
  flex-shrink: 0;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}
.panel-identity { padding-bottom: 0.6rem; position: relative; }
.panel-identity h2 { font-family: "Oswald", sans-serif; font-size: 1.7rem; }
/* Kendi rozetlerim — isim/rütbe bloğunun akış YÜKSEKLİĞİNE dahil olmadan (absolute)
   hemen altında belirir; bu sayede rozet sayısı avatar/isim hizasını asla etkilemez. */
.header-badge-row {
  position: absolute; top: 100%; left: 0;
  margin-top: 0.55rem;
  justify-content: flex-start;
  max-width: 280px;
}
.header-badge-row .badge-chip { width: 26px; height: 26px; }
.header-badge-row .badge-chip .badge-icon { font-size: 0.85rem; }
.role-pill {
  display: inline-block;
  margin-top: 0.35rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  color: var(--text);
}

.panel-tabs {
  width: min(1200px, 92%);
  margin: 0.5rem auto 0;
  display: flex;
  gap: 2rem;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: var(--header-h);
  z-index: 20;
  background: var(--bg);
}
.panel-tab {
  background: none;
  border: none;
  color: var(--text-dim);
  font-weight: 500;
  font-size: 0.95rem;
  padding: 0.9rem 0.1rem;
  cursor: pointer;
  position: relative;
  transition: color 0.2s ease;
}
.panel-tab:hover { color: var(--text); }
.panel-tab.active { color: var(--accent); }
.panel-tab.active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--accent);
  border-radius: 2px;
}

.panel-body { width: min(1200px, 92%); margin: 2.4rem auto 5rem; }
.panel-section { display: none; animation: panelFadeIn 0.35s ease both; }
.panel-section.active { display: block; }
@keyframes panelFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   PANEL — İKİ SÜTUNLU YERLEŞİM (GitHub tarzı)
   SOL: kimlik kartı (avatar/isim/rütbe/rozet/aksiyon ikonları)
   SAĞ: banner + sekmeler + içerik
   Not: tüm ID'ler ve sekme mantığı aynen korunur; sadece kapsayıcı
        yerleşimi değişir. Aşağıdaki daha özgül seçiciler, yukarıdaki
        eski tek-sütun kurallarını ezer.
   ============================================================ */
.panel-layout {
  width: min(1280px, 94%);
  margin: 0 auto;
  padding-top: 1.6rem;
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 1.8rem;
  align-items: start;
}

/* --- SOL: profil kimlik kartı --- */
.panel-sidebar {
  position: sticky;
  top: calc(var(--header-h) + 1.1rem);
  align-self: start; /* grid item içerik boyunda kalsın -> sticky çalışsın */
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 1.8rem 1.4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Sol panelde açık profil düzenleme alanı (Bio + Bağlantılar + Vitrin) */
.sidebar-profile-edit {
  width: 100%;
  text-align: left;
  margin-top: 1.4rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--border);
}
.sidebar-profile-edit .field { margin-bottom: 1rem; }
.sidebar-profile-edit .social-block { margin: 0 0 1rem; }
.sidebar-profile-edit .showcase-block { margin: 0; }
.sidebar-profile-edit .form-msg { margin-bottom: 0.9rem; }
.sidebar-save-btn { width: 100%; margin-top: 1.2rem; border: none; }
.panel-sidebar .panel-avatar {
  width: 132px;
  height: 132px;
  transform: none;
  margin-bottom: 1rem;
}
.panel-sidebar .panel-identity {
  padding: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.panel-sidebar .panel-identity h2 { font-size: 1.5rem; line-height: 1.2; }
/* Rozetler: sidebar'da absolute değil -> normal akışta, ortalı */
.panel-sidebar .header-badge-row {
  position: static;
  margin: 0.85rem 0 0;
  max-width: none;
  justify-content: center;
  flex-wrap: wrap;
}
/* Aksiyon ikonları: kartın altında, ayraç çizgili, ortalı satır */
.panel-sidebar .panel-header-actions {
  margin-top: 1.4rem;
  padding: 1.2rem 0 0;
  border-top: 1px solid var(--border);
  width: 100%;
  justify-content: center;
  gap: 0.4rem;
}

/* --- SAĞ: içerik alanı --- */
.panel-main { min-width: 0; position: relative; } /* min-width:0 grid taşmasını önler; relative -> toggle butonu için */

/* Panel gizle/göster butonu — sekme çubuğunun (Profil·Yarışmalar...) başında.
   Banner'a değmez, hem açıkken hem kapalıyken görünür. Açıkken '‹',
   kapalıyken ikon 180° dönüp '›' olur. */
.tabs-toggle {
  align-self: center;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  border-radius: 8px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-dim);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.tabs-toggle:hover { background: rgba(255, 255, 255, 0.08); color: var(--text); border-color: rgba(255, 255, 255, 0.3); }
.tabs-toggle svg { width: 17px; height: 17px; display: block; transition: transform 0.3s ease; }
.panel-layout.sidebar-collapsed .tabs-toggle svg { transform: rotate(180deg); }

/* Panel kapalıyken: tek sütun, sağ içerik ortalı doldurur */
.panel-layout.sidebar-collapsed { grid-template-columns: 1fr; }
.panel-layout.sidebar-collapsed .panel-sidebar { display: none; }
.panel-layout.sidebar-collapsed .panel-main {
  max-width: 900px;
  margin: 0 auto;
  width: 100%;
}

/* Otomatik kaydetme ipucu (sol panelde, kaydet butonu yerine) */
.autosave-hint {
  margin-top: 1rem;
  font-size: 0.75rem;
  color: var(--text-dim);
  text-align: center;
}
.panel-main .panel-banner {
  height: 172px;
  border-radius: 16px;
  margin-bottom: 0;
}
.panel-main .panel-banner::after { display: none; } /* alta doğru solma artık gereksiz */
.panel-main .panel-tabs {
  width: 100%;
  margin: 1.4rem 0 0;
  gap: 1.6rem;
  overflow-x: auto;
  flex-wrap: nowrap;
  scrollbar-width: none;
}
.panel-main .panel-tabs::-webkit-scrollbar { display: none; }
.panel-main .panel-tab { white-space: nowrap; }
.panel-main .panel-body {
  width: 100%;
  margin: 1.6rem 0 4rem;
}

/* --- Mobil: iki sütun alt alta, sol kart yatay profil şeridine döner --- */
@media (max-width: 880px) {
  /* Sıra: SEKME BAŞLIKLARI -> KAPANIR PANEL (sidebar) -> DİĞER İÇERİK.
     panel-main'i display:contents yaparız -> içindeki tabs/body, panel-layout'un
     flex öğeleri olur; böylece sidebar (panel-main dışında) tam ortalarına girer. */
  .panel-layout {
    display: flex;
    flex-direction: column;
  }
  .panel-main { display: contents; }
  .panel-main .panel-tabs { order: 1; }
  .panel-sidebar {
    order: 2;
    margin: 1.2rem 0 0.4rem;
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    text-align: left;
    align-items: center;
    gap: 0.5rem 1.2rem;
  }
  .panel-main .panel-body { order: 3; }
  .panel-sidebar .panel-avatar { width: 88px; height: 88px; margin-bottom: 0; }
  .panel-sidebar .panel-identity { width: auto; align-items: flex-start; }
  .panel-sidebar .header-badge-row { justify-content: flex-start; }
  .panel-sidebar .panel-header-actions {
    border-top: none;
    padding-top: 0;
    margin-top: 0;
    margin-left: auto;
    width: auto;
  }

  /* Tab bar mobilde: kaydırma yok. Derli toplu "pill" düğmeler, alta sarar,
     üstte sabit (sticky) kalır. Alttaki çizgi/altçizgi yerine dolu pill. */
  .panel-main .panel-tabs {
    flex-wrap: wrap;
    justify-content: center;
    overflow-x: visible;
    gap: 0.5rem;
    position: static; /* sticky DEĞİL: en üstte kalır, aşağı kaydırınca akıp gider */
    background: var(--bg);
    border-bottom: none;
    padding: 0.4rem 0 0.7rem;
    margin-top: 0;
  }
  .panel-main .panel-tab {
    padding: 0.5rem 0.95rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 0.88rem;
    background: rgba(255, 255, 255, 0.03);
    line-height: 1;
  }
  .panel-main .panel-tab.active {
    color: #331500;
    background: var(--accent);
    border-color: var(--accent);
  }
  /* pill tasarımda alt çizgi göstergesi gereksiz */
  .panel-main .panel-tab.active::after { display: none; }
  /* Gizle/göster butonu mobilde gereksiz (sidebar zaten sekmeye göre görünür) */
  .tabs-toggle { display: none; }

  /* Sol profil kartı (sidebar) mobilde YALNIZCA Profil sekmesinde görünür,
     collapse durumundan bağımsız. Diğer sekmelerde gizli. */
  .panel-layout .panel-sidebar { display: none; }
  .panel-layout[data-active-tab="profil"] .panel-sidebar { display: flex; }

  /* Profil kapak görseli (banner) mobilde gizli */
  .panel-main .panel-banner { display: none; }
}

/* ---------- Profil görünümü (Twitter/X tarzı salt-okunur kart) ---------- */
.profile-view { padding: 1.8rem 2rem; }
.profile-view-bio { color: var(--text); font-size: 0.98rem; line-height: 1.7; margin-bottom: 1.2rem; }
.profile-view-socials { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 1.3rem; }
.profile-view-socials:empty { display: none; margin: 0; }
.profile-social-link {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border);
  color: var(--text-dim);
  transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}
.profile-social-link:hover { color: var(--text); border-color: rgba(255, 255, 255, 0.4); background: rgba(255, 255, 255, 0.08); }
.profile-social-link svg { width: 15px; height: 15px; }
.profile-view-meta { color: var(--text-dim); font-size: 0.85rem; border-top: 1px solid var(--border); padding-top: 1rem; margin-top: 0.2rem; }

/* ---------- Rozetler ---------- */
.badge-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem; margin-top: 0; }
.badge-row:empty { display: none; margin: 0; }
.badge-chip {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.04);
  cursor: pointer;
  flex-shrink: 0;
}
.badge-chip .badge-icon { font-size: 0.95rem; line-height: 1; }
.badge-chip.earned { border-color: rgba(255, 106, 0, 0.35); background: rgba(255, 106, 0, 0.08); }
.badge-chip.locked { opacity: 0.4; filter: grayscale(1); }
.badge-tooltip {
  position: absolute; bottom: calc(100% + 8px); left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: #16161c;
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 0.72rem; font-weight: 600; line-height: 1.4;
  padding: 0.4rem 0.65rem;
  border-radius: 8px;
  white-space: normal; max-width: 180px; width: max-content;
  text-align: center;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
  z-index: 40;
}
.badge-chip:hover .badge-tooltip { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }

/* ---------- Vitrin (pinlenmiş şarkılar) ---------- */
.showcase-row { display: flex; gap: 0.9rem; margin-top: 1.3rem; flex-wrap: wrap; }
.showcase-row:empty { display: none; margin: 0; }
.showcase-card { width: 88px; text-decoration: none; color: inherit; }
.showcase-card img {
  width: 88px; height: 88px; border-radius: 10px; object-fit: cover; display: block;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45);
  transition: transform 0.2s ease;
}
.showcase-card:hover img { transform: scale(1.03); }
.showcase-card-title {
  font-size: 0.72rem; font-weight: 600; margin-top: 0.4rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.showcase-card-artist {
  font-size: 0.66rem; color: var(--text-dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Ayarlar modalı — vitrin yönetimi (arama + pinleme) */
.showcase-block {
  margin-top: 1.8rem;
  padding: 1.4rem 1.5rem 1.6rem;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.025);
}
.showcase-block .mini-label { display: block; font-size: 0.8rem; margin-bottom: 0.2rem; }
.showcase-block-hint { color: var(--text-dim); font-size: 0.8rem; margin: 0.15rem 0 1rem; }
.showcase-slots { display: flex; gap: 0.7rem; margin: 0 0 1.2rem; }
.showcase-slot {
  position: relative;
  /* Sabit 100px + gap 3 kart olunca dar telefonda taşıyordu. Esnek yaptık:
     3 kart her zaman satıra sığar (her biri (alan-gap)/3), masaüstünde 100px'i
     geçmez — yani geniş ekranda görünüm aynı kalır. */
  flex: 1 1 0; min-width: 0; max-width: 100px;
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg-alt);
  border: 1px dashed var(--border);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-dim); font-size: 1.7rem;
  transition: border-color 0.2s ease;
}
.showcase-slot.filled { border-style: solid; border-color: var(--border); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4); }
.showcase-slot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.showcase-slot-caption {
  position: absolute; inset: auto 0 0 0;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.9));
  padding: 0.38rem 0.42rem 0.34rem;
  font-size: 0.66rem; font-weight: 600; line-height: 1.25; color: #fff;
}
.showcase-slot-remove {
  position: absolute; top: 4px; right: 4px;
  width: 23px; height: 23px; border-radius: 50%;
  background: rgba(0, 0, 0, 0.72); color: #fff;
  border: none; font-size: 0.78rem; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background-color 0.2s ease;
}
.showcase-slot-remove:hover { background: var(--neon-pink); }
.showcase-search { position: relative; }
.showcase-search input.search-input { margin-bottom: 0; }
.showcase-results {
  display: none;
  position: absolute; top: calc(100% + 0.4rem); left: 0; right: 0;
  background: #16161c; border: 1px solid var(--border); border-radius: 12px;
  max-height: 290px; overflow-y: auto;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5);
  z-index: 30;
}
.showcase-results.open { display: block; }
.showcase-result-item {
  display: flex; align-items: center; gap: 0.85rem;
  padding: 0.7rem 0.85rem; cursor: pointer;
  transition: background-color 0.15s ease;
}
.showcase-result-item:hover { background: rgba(255, 255, 255, 0.07); }
.showcase-result-item img {
  width: 44px; height: 44px; border-radius: 8px; object-fit: cover; flex-shrink: 0;
  background: var(--bg-alt);
}
.showcase-result-title { font-size: 0.9rem; font-weight: 600; }
.showcase-result-artist { font-size: 0.78rem; color: var(--text-dim); margin-top: 0.1rem; }

/* ---------- Rozetlerim modalı (büyük kart grid) ---------- */
.badge-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 1rem; }
.badge-card {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 0.5rem;
  padding: 1.3rem 1rem 1.15rem;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.03);
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.badge-card.earned { border-color: rgba(255, 106, 0, 0.3); background: rgba(255, 106, 0, 0.05); }
.badge-card.earned:hover { transform: translateY(-3px); }
.badge-card.locked { opacity: 0.5; filter: grayscale(0.85); }
.badge-card-icon { font-size: 2.3rem; line-height: 1; }
.badge-card-label { font-family: "Oswald", sans-serif; font-size: 0.95rem; font-weight: 600; }
.badge-card-desc { font-size: 0.76rem; color: var(--text-dim); line-height: 1.4; }
.badge-pin-btn {
  margin-top: 0.35rem;
  font-size: 0.74rem; font-weight: 700;
  padding: 0.42rem 0.85rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}
.badge-pin-btn:hover { border-color: var(--accent); color: var(--accent); }
.badge-pin-btn.pinned { background: rgba(255, 106, 0, 0.12); border-color: rgba(255, 106, 0, 0.4); color: var(--accent); }

/* Zorluk renk kodlaması: kolay=sarı, orta=turuncu (varsayılan .earned rengi), zor=kırmızı */
.badge-card.tier-kolay.earned { border-color: rgba(255, 214, 10, 0.35); background: rgba(255, 214, 10, 0.06); }
.badge-card.tier-kolay .badge-pin-btn.pinned { background: rgba(255, 214, 10, 0.14); border-color: rgba(255, 214, 10, 0.45); color: #ffd60a; }
.badge-card.tier-zor.earned { border-color: rgba(255, 45, 120, 0.35); background: rgba(255, 45, 120, 0.06); }
.badge-card.tier-zor .badge-pin-btn.pinned { background: rgba(255, 45, 120, 0.14); border-color: rgba(255, 45, 120, 0.45); color: var(--neon-pink); }
.badge-chip.tier-kolay.earned { box-shadow: 0 0 0 2px rgba(255, 214, 10, 0.4); }
.badge-chip.tier-orta.earned { box-shadow: 0 0 0 2px rgba(255, 106, 0, 0.4); }
.badge-chip.tier-zor.earned { box-shadow: 0 0 0 2px rgba(255, 45, 120, 0.45); }

/* Kullanıcı görüntüleme kartı (başkasının profili — modal içinde) */
.user-card-head { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 1.3rem; }
.user-card-avatar {
  width: 60px; height: 60px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
  background: linear-gradient(135deg, var(--neon-cyan), var(--neon-pink));
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; font-weight: 700; color: #2b1200;
}
.user-card-head h3 { font-size: 1.1rem; line-height: 1.3; margin-bottom: 0.3rem; }
/* Başkasının pinlenmiş rozetleri — normal akışta (absolute DEĞİL), küçük ve nizami.
   Modalın kendi hizalaması flex-start olduğu için burada absolute'a gerek yok. */
.user-modal-badge-row { justify-content: flex-start; gap: 0.35rem; margin-top: 0.5rem; }
.user-modal-badge-row .badge-chip { width: 22px; height: 22px; }
.user-modal-badge-row .badge-chip .badge-icon { font-size: 0.75rem; }

/* ---------- Profil düzenleme (Ayarlar modalı) ---------- */
.profile-media { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 1.4rem; }

.media-upload {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.03);
  transition: border-color 0.25s ease, transform 0.2s ease;
}
.media-upload:hover { border-color: var(--accent); }
.media-upload:active { transform: scale(0.99); }
/* Avatar: tam-genişlik dev kare yerine ortalanmış, ölçülü kare (mobil+masaüstü). */
.avatar-upload { width: 160px; max-width: 55%; aspect-ratio: 1; margin: 0 auto; }
.avatar-upload img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar-consent-note {
  font-size: 0.76rem;
  line-height: 1.5;
  color: var(--text-dim);
  margin: -0.5rem 0 0;
}
.avatar-consent-note strong { color: var(--text); }
.banner-upload { aspect-ratio: 16 / 9; }
.banner-fallback {
  width: 100%; height: 100%;
  background:
    linear-gradient(135deg, rgba(255, 138, 61, 0.16), rgba(255, 45, 120, 0.16)),
    var(--bg-alt);
  background-size: cover;
  background-position: center;
}
/* İpucu artık HER ZAMAN görünür (alt şeritte) — eskiden sadece :hover'da çıkıyordu,
   dokunmatikte hover olmadığı için mobilde "değiştirilebilir" belli olmuyordu. */
.media-upload-hint {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; justify-content: center; gap: 0.35rem;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.8));
  padding: 0.9rem 0.5rem 0.5rem;
  color: #fff; font-size: 0.72rem; font-weight: 600;
  pointer-events: none;
}
.media-upload-hint span { font-size: 0.95rem; }

/* Yükleme sırasında karart + spinner göster (geri bildirim) */
.media-upload.uploading { pointer-events: none; }
.media-upload.uploading::after {
  content: ""; position: absolute; inset: 0; z-index: 4; background: rgba(0, 0, 0, 0.55);
}
.media-upload.uploading::before {
  content: ""; position: absolute; top: 50%; left: 50%; z-index: 5;
  width: 28px; height: 28px; margin: -14px 0 0 -14px;
  border: 3px solid rgba(255, 255, 255, 0.3); border-top-color: #fff; border-radius: 50%;
  animation: botSpin 0.8s linear infinite;
}
@keyframes botSpin { to { transform: rotate(360deg); } }

/* Ayarlar modalında "Değişiklikleri Kaydet" — yapışkan alt bar, her zaman görünür. */
.settings-footer {
  position: sticky; bottom: 0; z-index: 6;
  margin: 1.5rem -1.8rem -1.9rem;
  padding: 0.9rem 1.8rem;
  background: var(--bg-alt);
  border-top: 1px solid var(--border);
}
.settings-footer .profile-save-btn { width: 100%; font-weight: 700; transition: background-color 0.25s ease, color 0.25s ease; }
/* Kaydet butonu canlı geri bildirim durumları */
.profile-save-btn.saving { opacity: 0.75; cursor: progress; }
.profile-save-btn.saved {
  background: #2ecc71 !important; color: #05130a !important; border-color: #2ecc71 !important;
  animation: savedPop 0.45s ease;
}
.profile-save-btn.save-error {
  background: #ff5b6b !important; color: #fff !important; border-color: #ff5b6b !important;
  animation: savedShake 0.4s ease;
}
@keyframes savedPop { 0% { transform: scale(0.96); } 45% { transform: scale(1.04); } 100% { transform: scale(1); } }
@keyframes savedShake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }

.color-picker-block {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.1rem 1.2rem;
}
.mini-label {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 0.7rem;
}

.profile-form-card { padding: 1.9rem 2rem; }
.field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1rem; }

.section-hint {
  color: var(--text-dim);
  font-size: 0.9rem;
  line-height: 1.6;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 0 10px 10px 0;
  padding: 0.9rem 1.1rem;
  margin-bottom: 1.4rem;
}
.section-hint strong { color: var(--text); }

.social-block { margin: 0.5rem 0 1.5rem; }
.social-link-row {
  display: flex; align-items: center; gap: 0.5rem;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.35rem 0.6rem;
  margin-bottom: 0.55rem;
  transition: border-color 0.2s ease;
}
.social-link-row:focus-within { border-color: var(--accent); }
.social-icon {
  flex: 0 0 auto;
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-dim);
}
.social-icon svg { width: 17px; height: 17px; display: block; }
.social-link-row input {
  background: transparent;
  border: none;
  color: var(--text);
  font-family: inherit;
  padding: 0.5rem 0.2rem;
  flex: 1; font-size: 0.88rem; min-width: 0;
}
.social-link-row input:focus { outline: none; }

/* ---------- Özel açılır liste (native <select> yerine — iOS Safari popup'ı
   CSS ile tema değiştirilemiyor, bu yüzden kendi dropdown'ımızı çiziyoruz) ---------- */
.custom-select { position: relative; flex: 0 0 132px; }
.custom-select-trigger {
  display: flex; align-items: center; gap: 0.4rem; width: 100%;
  background: transparent; border: none; color: var(--text);
  font-family: inherit; font-size: 0.84rem; cursor: pointer;
  padding: 0.5rem 0.2rem; text-align: left;
}
.custom-select-trigger .trigger-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.custom-select-trigger .chev { margin-left: auto; font-size: 0.6rem; color: var(--text-dim); transition: transform 0.2s ease; flex-shrink: 0; }
.custom-select.open .custom-select-trigger .chev { transform: rotate(180deg); }
.custom-select-menu {
  position: absolute; top: calc(100% + 6px); left: 0;
  min-width: 180px;
  background: #16161c;
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.55);
  padding: 6px;
  z-index: 60;
  display: none;
  max-height: 240px;
  overflow-y: auto;
}
.custom-select.open .custom-select-menu { display: block; }
.custom-select-option {
  display: flex; align-items: center; gap: 0.55rem;
  padding: 0.6rem 0.7rem; border-radius: 7px; cursor: pointer;
  font-size: 0.85rem; color: var(--text);
  transition: background 0.15s ease;
}
.custom-select-option:hover { background: rgba(255, 255, 255, 0.07); }
.custom-select-option.selected { color: var(--accent); font-weight: 600; }

/* Sosyal platform seçici: seçilince SADECE logo (isim yok); açılır listede logo+isim.
   .icon-only + .trigger-icon/.opt-icon buildCustomSelect(iconOnly:true) ile üretilir. */
.custom-select.icon-only { flex: 0 0 auto; }
.custom-select.icon-only .custom-select-trigger { gap: 0.3rem; padding: 0.5rem 0.3rem; }
.custom-select-trigger .trigger-icon {
  display: flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; color: var(--text); flex-shrink: 0;
}
.custom-select-trigger .trigger-icon svg { width: 18px; height: 18px; display: block; }
.custom-select-option .opt-icon {
  display: flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; flex-shrink: 0; color: var(--text-dim);
}
.custom-select-option .opt-icon svg { width: 17px; height: 17px; display: block; }
.custom-select-option.selected .opt-icon { color: var(--accent); }
.admin-custom-select { flex: 0 0 auto; min-width: 180px; }
.admin-custom-select .custom-select-trigger {
  background: var(--bg-alt); border: 1px solid var(--border); border-radius: 8px;
  padding: 0.5rem 0.7rem;
}
.remove-link-btn {
  flex: 0 0 auto;
  background: none;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 0.9rem;
  width: 26px; height: 26px;
  border-radius: 6px;
  transition: color 0.2s ease, background 0.2s ease;
}
.remove-link-btn:hover { color: var(--neon-pink); background: rgba(255, 45, 120, 0.12); }

.add-link-btn {
  width: 100%;
  background: none;
  border: 1px dashed var(--border);
  color: var(--text-dim);
  border-radius: 10px;
  padding: 0.7rem;
  font-size: 0.85rem;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.add-link-btn:hover { border-color: rgba(255, 255, 255, 0.4); color: var(--text); background: rgba(255, 255, 255, 0.04); }

.profile-save-btn { width: auto; border: none; }

/* Profil rengi — sabit palet yerine tarayıcının native (yuvarlak/tekerlek)
   renk seçicisi: tıklanınca OS'un kendi renk seçme arayüzü açılır, istenen
   HERHANGİ bir renk seçilebilir. Burada sadece önizleme kutusunun görünümü
   stillendiriliyor — seçicinin kendi arayüzüne müdahale edilemez (ve gerekmiyor). */
.color-picker-input-wrap {
  display: inline-block;
  width: 44px; height: 44px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--border);
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.color-picker-input-wrap:hover { border-color: var(--accent); transform: scale(1.06); }
.color-picker-input-wrap input[type="color"] {
  width: 140%; height: 140%;
  margin: -20%;
  border: none;
  padding: 0;
  cursor: pointer;
  background: none;
}

/* ---------- Yarışmalar / takvim ---------- */
.calendar-trigger {
  display: flex; align-items: center; gap: 0.9rem;
  width: 100%;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1rem 1.2rem;
  margin-bottom: 1.4rem;
  cursor: pointer;
  text-align: left;
  color: var(--text);
  font-family: inherit;
  transition: border-color 0.2s ease;
}
.calendar-trigger:hover { border-color: rgba(255, 255, 255, 0.35); }
.calendar-trigger-icon { font-size: 1.5rem; }
.calendar-trigger strong { display: block; font-size: 0.95rem; }
.calendar-trigger small { display: block; margin-top: 0.15rem; color: var(--text-dim); font-size: 0.8rem; }

.mini-calendar { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-top: 1rem; }
.mini-calendar .cal-cell {
  position: relative;
  aspect-ratio: 1; display: grid; place-items: center;
  font-size: 0.78rem; color: var(--text-dim); border-radius: 8px;
  cursor: default;
}
.mini-calendar .cal-cell.marked { color: var(--text); font-weight: 700; cursor: pointer; }
.mini-calendar .cal-cell.marked:hover { background: rgba(255, 255, 255, 0.06); }
.mini-calendar .cal-cell.marked::after {
  content: "";
  position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%);
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent);
}
.calendar-day-detail {
  margin-top: 1.2rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--border);
}
.calendar-day-detail h4 { font-size: 0.9rem; margin-bottom: 0.6rem; color: var(--text-dim); }

.milestone-list { margin-top: 0.8rem; display: flex; flex-direction: column; gap: 0.35rem; }
.milestone-list .ms-item { font-size: 0.85rem; color: var(--text-dim); }
.milestone-list .ms-item strong { color: var(--text); }

/* ---------- Topluluk ---------- */
.post-image-picker { margin-bottom: 1.1rem; }
.post-image-picker .add-link-btn { width: auto; padding: 0.55rem 1rem; }
.post-image-preview { position: relative; display: inline-block; margin-top: 0.7rem; }
.post-image-preview img {
  max-width: 220px; max-height: 160px; border-radius: 10px;
  border: 1px solid var(--border); display: block; object-fit: cover;
}
.post-image-preview .remove-link-btn {
  position: absolute; top: -8px; right: -8px;
  background: var(--bg); border: 1px solid var(--border);
}

/* ---------- Vitrin: proje gönderme / yönetimi ---------- */
.vitrin-subhead { font-family: "Oswald", sans-serif; font-size: 1.1rem; margin-bottom: 1rem; }
.project-image-picker .add-link-btn { width: auto; padding: 0.55rem 1rem; }
.project-image-previews { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 0.7rem; }
.project-image-preview { position: relative; }
.project-image-preview img {
  width: 96px; height: 96px; border-radius: 10px;
  border: 1px solid var(--border); display: block; object-fit: cover;
}
.project-image-remove {
  position: absolute; top: -8px; right: -8px;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--bg); border: 1px solid var(--border); color: var(--text);
  font-size: 0.75rem; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.project-image-remove:hover { border-color: var(--neon-pink); color: var(--neon-pink); }

.project-item { display: flex; gap: 1rem; padding: 1rem 1.1rem; margin-bottom: 0.9rem; align-items: flex-start; }
.project-img-strip { display: flex; gap: 0.4rem; flex-shrink: 0; }
.project-img-strip img {
  width: 66px; height: 66px; border-radius: 8px; object-fit: cover;
  border: 1px solid var(--border);
}
.project-item-body { flex: 1 1 auto; min-width: 0; }
.project-item-head { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; margin-bottom: 0.35rem; }
.project-item-head strong { font-size: 1rem; }
.project-item-link {
  display: inline-block; color: var(--accent); font-size: 0.82rem;
  word-break: break-all; margin-bottom: 0.5rem;
}
.project-submitter { font-size: 0.78rem; color: var(--text-dim); }
.project-item-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.4rem; }
.project-item-actions .btn { width: auto; padding: 0.4rem 0.85rem; }

.status-pill {
  display: inline-block; font-size: 0.68rem; font-weight: 700;
  padding: 0.18rem 0.6rem; border-radius: 999px; letter-spacing: 0.3px;
}
.status-approved { background: rgba(0, 242, 255, 0.12); color: var(--accent); border: 1px solid rgba(0, 242, 255, 0.35); }
.status-pending { background: rgba(255, 209, 102, 0.12); color: #ffd166; border: 1px solid rgba(255, 209, 102, 0.4); }

.subtab-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px; background: var(--neon-pink); color: #fff;
  font-size: 0.66rem; font-weight: 700; margin-left: 0.35rem;
}

/* ---------- Ekip kartları (admin) ---------- */
.team-admin-avatar {
  width: 66px; height: 66px; border-radius: 8px; object-fit: cover;
  border: 1px solid var(--border); flex-shrink: 0;
}
.team-admin-item.team-admin-hidden { opacity: 0.55; }
.team-admin-name {
  background: none; border: none; padding: 0; cursor: pointer;
  font-size: 1rem; font-weight: 600; color: var(--text);
  text-decoration: underline; text-decoration-color: transparent;
  transition: text-decoration-color 0.2s ease, color 0.2s ease;
}
.team-admin-name:hover { color: var(--accent); text-decoration-color: var(--accent); }
.team-admin-detail {
  font-size: 0.82rem; color: var(--text-dim); line-height: 1.6;
  background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border);
  border-radius: 8px; padding: 0.6rem 0.8rem; margin: 0.4rem 0;
}

/* Topluluk araç çubuğu (arama + gönderi oluştur FAB) */
.community-toolbar { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 1.2rem; }
.community-toolbar .search-input { margin-bottom: 0; flex: 1; }
.new-post-fab { flex-shrink: 0; background: rgba(255, 255, 255, 0.06); }
.new-post-fab:hover { background: rgba(255, 255, 255, 0.14); color: var(--accent); }

/* Akış — X/Twitter tarzı: üstte avatar+isim+zaman, altında gönderi metni,
   varsa tam genişlik görsel, en altta ince bir aksiyon satırı. */
.community-feed {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
}
.community-post {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  padding: 1rem 1.2rem;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.community-post:hover { background-color: rgba(255, 255, 255, 0.025); }
.community-post:last-child { border-bottom: none; }
.community-avatar {
  flex-shrink: 0;
  width: 44px; height: 44px;
  border-radius: 50%;
  object-fit: cover;
  cursor: pointer;
  border: 2px solid var(--border);
  background: linear-gradient(135deg, var(--neon-cyan), var(--neon-pink));
  display: flex; align-items: center; justify-content: center;
  font-size: 0.9rem; font-weight: 700; color: #2b1200;
}
.community-body { flex: 1 1 auto; min-width: 0; }
.community-meta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; font-size: 0.85rem; margin-bottom: 0.25rem; }
.community-meta-row .author-name { color: var(--text); font-weight: 700; cursor: pointer; }
.community-meta-row .author-name:hover { text-decoration: underline; }
.community-meta-row .dot { color: var(--text-dim); opacity: 0.6; }
.community-meta-row .time { color: var(--text-dim); }
.community-title { color: var(--text); font-size: 0.98rem; font-weight: 700; margin: 0 0 0.15rem; overflow-wrap: anywhere; }
.community-excerpt { color: var(--text); font-size: 0.94rem; line-height: 1.5; margin: 0 0 0.6rem; overflow-wrap: anywhere; }
.community-post-image {
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--border);
  margin-bottom: 0.6rem;
  max-height: 320px;
}
.community-post-image img { width: 100%; height: 100%; max-height: 320px; object-fit: cover; display: block; }
.community-footer { display: flex; align-items: center; gap: 0.4rem; color: var(--text-dim); font-size: 0.82rem; }
.community-footer svg { width: 15px; height: 15px; }
@media (max-width: 560px) {
  .community-post { flex-wrap: wrap; }
  .community-thumb { width: 100%; height: 160px; }
}

/* Gönderi detay / görsel modalları */
.modal-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(14px);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.modal-card {
  position: relative;
  width: min(100%, 640px);
  max-height: 88vh;
  overflow-y: auto;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.6);
}
.modal-close {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--border);
  background: rgba(10, 10, 12, 0.7);
  color: var(--text);
  font-size: 1.1rem;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.modal-close:hover { border-color: var(--accent); color: var(--accent); }

.modal-post-image {
  width: 100%; max-height: 320px; object-fit: cover; display: block;
  cursor: zoom-in;
}
.modal-post-body { padding: 1.6rem 1.8rem 1.9rem; }
.modal-post-head { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 1.1rem; }
.modal-post-authorline { display: flex; flex-direction: column; line-height: 1.3; }
.modal-post-authorline .author-name { font-size: 0.94rem; font-weight: 600; color: var(--text); }
.modal-post-authorline .author-time { font-size: 0.76rem; color: var(--text-dim); }
.modal-post-body h3 { font-size: 1.3rem; margin-bottom: 0.6rem; }
.modal-post-body > p { color: var(--text-dim); font-size: 0.95rem; line-height: 1.7; margin-bottom: 1.4rem; }

.post-avatar,
.reply-avatar {
  width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
  background: linear-gradient(135deg, var(--neon-cyan), var(--neon-pink));
  display: flex; align-items: center; justify-content: center;
  font-size: 0.85rem; font-weight: 700; color: #2b1200;
}
.reply-avatar { width: 32px; height: 32px; font-size: 0.75rem; }
.reply-item { display: flex; gap: 0.65rem; padding: 0.8rem 0; border-top: 1px solid var(--border); }
.reply-item:first-child { border-top: none; }
.reply-body .author-name { font-size: 0.86rem; font-weight: 600; color: var(--text); }
.reply-body p { margin-top: 0.2rem; color: var(--text-dim); font-size: 0.88rem; line-height: 1.5; }

.lightbox-overlay { background: rgba(0, 0, 0, 0.92); backdrop-filter: blur(6px); }
.lightbox-overlay img { max-width: 100%; max-height: 86vh; object-fit: contain; border-radius: 10px; }

/* ---------- Genel alt-sekme (Yarışmalar: Tümü / Bana Atananlar) ---------- */
.subtabs { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 1.4rem; }
.subtab {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  color: var(--text-dim);
  border-radius: 999px;
  padding: 0.55rem 1.1rem;
  font-size: 0.88rem;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.2s ease;
}
.subtab:hover { color: var(--text); border-color: rgba(255, 255, 255, 0.25); }
.subtab.active { background: #fff; color: #0a0a0c; border-color: #fff; font-weight: 600; }
.subtab-panel { display: none; animation: panelFadeIn 0.3s ease both; }
.subtab-panel.active { display: block; }

/* ---------- Yarışma kart grid (herkese açık katalog) ---------- */
.competition-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1.2rem;
}
.competition-card {
  padding: 0;
  overflow: hidden;
  cursor: pointer;
  display: flex;
  flex-direction: column;
}
.competition-card-media { aspect-ratio: 16 / 10; background: var(--bg-alt); overflow: hidden; }
.competition-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.competition-card-media.empty {
  display: flex; align-items: center; justify-content: center;
  color: var(--text-dim); font-size: 0.8rem;
  background:
    linear-gradient(135deg, rgba(255, 138, 61, 0.12), rgba(255, 45, 120, 0.12)),
    var(--bg-alt);
}
.competition-card-body { padding: 1.1rem 1.2rem 1.3rem; flex: 1; display: flex; flex-direction: column; }
.competition-card-body h4 { font-size: 1rem; margin-bottom: 0.4rem; }
.competition-card-body p { color: var(--text-dim); font-size: 0.85rem; line-height: 1.55; flex: 1; }
.competition-badge {
  align-self: flex-start;
  margin-top: 0.8rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.4px;
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  color: var(--text);
}

/* ---------- Oyun listesi (Oyun sekmesi) ---------- */
.game-list { display: flex; flex-direction: column; gap: 0.9rem; }
.game-list-item {
  display: flex; align-items: center; gap: 1.1rem;
  padding: 0.9rem 1.2rem;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.03);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  color: var(--text);
  transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.15s ease;
}
.game-list-item:hover { border-color: rgba(255, 106, 0, 0.35); background: rgba(255, 106, 0, 0.05); transform: translateY(-2px); }
.game-list-cover {
  width: 76px; height: 76px; border-radius: 10px; flex-shrink: 0;
  background-size: cover; background-position: center top;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}
.game-list-info { flex: 1 1 auto; min-width: 0; }
.game-list-info h3 { font-family: "Oswald", sans-serif; font-size: 1.05rem; margin-bottom: 0.25rem; }
.game-list-info p { font-size: 0.85rem; color: var(--text-dim); }
.game-list-info strong { color: var(--accent); }
.game-list-arrow { font-size: 1.6rem; color: var(--text-dim); flex-shrink: 0; }

/* ---------- Oyun (Geometry Dash Lite) ---------- */
.game-layout { display: flex; gap: 1.4rem; align-items: flex-start; }
.game-wrap { flex: 1 1 auto; min-width: 0; padding: 1.4rem 1.6rem 1.6rem; }
.game-leaderboard-card { flex: 0 0 280px; padding: 0; }
.game-leaderboard-card h3 { padding: 1.3rem 1.4rem 0.6rem; font-family: "Oswald", sans-serif; font-size: 1.1rem; }
.icon-heading { display: flex; align-items: center; gap: 0.5rem; }
.icon-heading svg { width: 19px; height: 19px; flex-shrink: 0; color: var(--accent); }
.game-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap; }
.game-header h3 { font-family: "Oswald", sans-serif; font-size: 1.2rem; }
.game-header strong { color: var(--accent); }
.game-header-actions { display: flex; align-items: center; gap: 0.8rem; }
.game-canvas-wrap { position: relative; width: 100%; border-radius: 14px; overflow: hidden; border: 1px solid var(--border); background: #0a0a0c; }
#gameCanvas, #waveCanvas { display: block; width: 100%; height: auto; cursor: pointer; touch-action: manipulation; }
.game-overlay {
  position: absolute; inset: 0;
  background: rgba(6, 6, 8, 0.82);
  backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  padding: 1.5rem;
  overflow-y: auto; /* içerik (ör. market listesi) konteynerden uzun olursa üstü kırpılmasın, kaydırılabilsin */
}
.game-overlay-cover {
  background:
    linear-gradient(rgba(6, 8, 10, 0.42), rgba(4, 4, 6, 0.88)),
    url("/assets/geometrydashlite.webp") center top / cover no-repeat;
}
.wave-overlay-cover {
  background:
    linear-gradient(rgba(6, 8, 14, 0.42), rgba(4, 4, 8, 0.9)),
    url("/assets/waveattack.webp") center top / cover no-repeat;
}
#gameOverlayInner h3, #waveOverlayInner h3 { font-family: "Oswald", sans-serif; font-size: 1.4rem; margin-bottom: 0.5rem; }
#gameOverlayInner p, #waveOverlayInner p { color: var(--text-dim); font-size: 0.92rem; margin-bottom: 1.2rem; text-shadow: 0 1px 6px rgba(0,0,0,0.6); }
#gameOverlayInner .btn, #waveOverlayInner .btn { width: auto; border: none; }
#tycoonOverlayInner { max-width: 380px; margin: 0 auto; }
#tycoonOverlayInner h3 { font-family: "Oswald", sans-serif; font-size: 1.4rem; margin-bottom: 0.5rem; }
#tycoonOverlayInner p { color: var(--text-dim); font-size: 0.86rem; line-height: 1.5; margin-bottom: 1.2rem; }
#tycoonOverlayInner .btn { width: auto; border: none; }
/* Wave Attack'a özel temalı butonlar — düz beyaz yerine mavi ışıltılı, oyunun renk kimliğiyle uyumlu */
#waveOverlayInner .btn.btn-primary {
  background: linear-gradient(135deg, #3b7dff, #1c48b3);
  color: #fff;
  font-family: "Oswald", sans-serif;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  font-size: 0.92rem;
  box-shadow: 0 0 24px rgba(47, 111, 237, 0.55);
  transition: box-shadow 0.2s ease, transform 0.15s ease;
}
#waveOverlayInner .btn.btn-primary:hover { box-shadow: 0 0 32px rgba(59, 125, 255, 0.8); transform: translateY(-1px); }
.wave-shop-btn { width: 34px; height: 34px; border: 1px solid var(--border); }
.wave-shop-btn svg { width: 16px; height: 16px; }
/* Mobil sanal joystick — sadece dokunmatik/kaba işaretçili cihazlarda görünür */
.wave-touch-controls { position: absolute; left: 16px; bottom: 16px; z-index: 15; display: none; }
@media (hover: none), (pointer: coarse) {
  .wave-touch-controls { display: block; }
}
.wave-joystick {
  width: 92px; height: 92px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  border: 2px solid rgba(47, 111, 237, 0.45);
  position: relative;
  touch-action: none;
}
.wave-joystick-knob {
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(59, 125, 255, 0.6);
  box-shadow: 0 0 14px rgba(59, 125, 255, 0.65);
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  transition: transform 0.05s linear;
}
/* Kompakt market — kaydırmaya gerek kalmadan canvas alanına sığsın diye
   2 sütunlu, dar dolgulu bir düzen. */
.wave-shop { width: min(100%, 420px); text-align: left; }
.wave-shop-head { display: flex; align-items: center; justify-content: space-between; gap: 0.7rem; margin-bottom: 0.4rem; }
.wave-shop-head h3 { font-family: "Oswald", sans-serif; font-size: 1.05rem; }
.wave-shop-tagline { text-align: center; color: var(--text-dim); font-size: 0.7rem; margin-bottom: 0.6rem; line-height: 1.35; }
.wave-shop-lvl {
  display: inline-block;
  font-size: 0.64rem; font-weight: 700;
  color: var(--accent);
  background: rgba(255, 106, 0, 0.12);
  border: 1px solid rgba(255, 106, 0, 0.35);
  border-radius: 999px;
  padding: 0.03rem 0.4rem;
  margin-left: 0.25rem;
  vertical-align: middle;
}
.wave-xp-badge {
  display: inline-flex; align-items: center; white-space: nowrap;
  background: rgba(255, 209, 102, 0.12);
  border: 1px solid rgba(255, 209, 102, 0.4);
  color: #ffd166;
  font-family: "Oswald", sans-serif;
  font-weight: 700;
  font-size: 0.9rem;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
}
.wave-shop-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0.45rem; }
.wave-shop-item {
  display: flex; flex-direction: column; align-items: stretch; gap: 0.35rem;
  padding: 0.5rem 0.6rem;
  border-radius: 9px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.03);
}
.wave-shop-item-info { display: flex; flex-direction: column; gap: 0.1rem; }
.wave-shop-item-info strong { font-size: 0.76rem; line-height: 1.25; }
.wave-shop-item-info span { font-size: 0.64rem; color: var(--text-dim); }
#waveOverlayInner .wave-shop-item .btn { width: 100%; padding: 0.32rem 0.5rem; font-size: 0.68rem; }
.wave-shop-item .btn[disabled] { opacity: 0.4; cursor: not-allowed; }
#waveOverlayInner #waveShopClose { margin-top: 0.8rem; width: auto; padding: 0.5rem 1.4rem; }

@media (max-width: 900px) {
  .game-layout { flex-direction: column; }
  .game-leaderboard-card { flex-basis: auto; width: 100%; min-width: 0; }
}

.game-leaderboard-item {
  display: flex; align-items: center; gap: 0.9rem;
  padding: 0.85rem 1.2rem;
  border-bottom: 1px solid var(--border);
}
.game-leaderboard-item:last-child { border-bottom: none; }
.game-leaderboard-rank { width: 22px; flex-shrink: 0; font-family: "Oswald", sans-serif; font-weight: 700; color: var(--text-dim); text-align: center; }
.game-leaderboard-item:nth-child(1) .game-leaderboard-rank { color: #ffd166; }
.game-leaderboard-item:nth-child(2) .game-leaderboard-rank { color: #d8d8d8; }
.game-leaderboard-item:nth-child(3) .game-leaderboard-rank { color: #d98a4f; }
.game-leaderboard-name { flex: 1 1 auto; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.game-leaderboard-score { flex-shrink: 0; font-family: "Oswald", sans-serif; font-weight: 700; color: var(--accent); }

/* ---------- Oyun (Başkan Masası — idle/tycoon demo v4) ---------- */
.tycoon-inline-coin { display: inline-flex; vertical-align: -3px; }
.tycoon-inline-coin svg { width: 15px; height: 15px; }

.tycoon-scene-wrap { min-height: 460px; }
.tycoon-scene {
  position: relative;
  z-index: 1; /* kendi yığılma bağlamını kurar — içindeki z-index'li öğeler
                 (telefon/TV/vb.) dışarı sızıp #tycoonOverlay'in üstüne çıkamaz */
  width: 100%; height: 460px;
  overflow: hidden;
}
.tycoon-room {
  position: absolute; inset: 0;
  /* Eski tip ev duvarı — soluk hardal/yeşil, üstte hafif bir "kuşak" çizgisi */
  background:
    linear-gradient(180deg, transparent 62%, rgba(0, 0, 0, 0.18) 62.5%, transparent 63%),
    linear-gradient(180deg, #7c8452 0%, #6b7247 55%, #565c3a 100%);
}
/* Arka duvardaki pencere — dışarıda basit bir şehir silueti, sabah/öğlen/akşam
   arasında yavaşça geçiş yapar (bkz. tycoon.js applyTimeOfDay) */
.tycoon-window {
  /* Genişlik kısıldı — duvar süslerine (raf/çerçeve) çakışmadan duracakları
     gerçek bir kenar boşluğu bırakmak için (bkz. .tycoon-shelf/.tycoon-frame). */
  position: absolute; top: 4%; left: 50%; transform: translateX(-50%);
  width: min(300px, 62%); height: 42%;
  border-radius: 6px; overflow: hidden; z-index: 1;
  box-shadow: 0 0 0 10px #1c1410, 0 0 0 12px #0c0806, 0 18px 30px rgba(0, 0, 0, 0.5);
  background: #05070d;
}
/* Gökyüzü — sabit renk sınıfları yerine iki katman çapraz-solma (crossfade) ile
   geçiş yapıyor (bkz. tycoon.js applyTimeOfDay): gradient'ler arası doğrudan CSS
   transition güvenilir değil, opacity transition her tarayıcıda düzgün çalışır.
   Döngü: gece(siyah) -> gün doğumu(koyu mavi) -> gündüz(açık mavi) -> gün
   batımı(turuncu) -> akşam(koyu mavi) -> gece(siyah)... */
.tycoon-window-sky {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity 4s ease;
}
.tycoon-window-sky.tycoon-sky-visible { opacity: 1; }
.tycoon-window-city { position: absolute; inset: 0; transition: opacity 4s ease; }
.tycoon-window-city.tycoon-city-day .tycoon-bldg::before { opacity: 0.08; }
.tycoon-bldg {
  position: absolute; bottom: 0; width: 15%;
  background: #10182c;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
}
.tycoon-bldg::before {
  content: ""; position: absolute; inset: 10% 18%;
  background-image: repeating-linear-gradient(180deg, rgba(255, 214, 10, 0.35) 0 3px, transparent 3px 9px),
    repeating-linear-gradient(90deg, rgba(255, 214, 10, 0.35) 0 3px, transparent 3px 9px);
  background-size: 100% 9px, 9px 100%;
  opacity: 0.55;
  transition: opacity 4s ease;
}
.tycoon-bldg.b1 { left: 2%; height: 46%; }
.tycoon-bldg.b2 { left: 19%; height: 72%; }
.tycoon-bldg.b3 { left: 38%; height: 55%; }
.tycoon-bldg.b4 { left: 58%; height: 85%; }
.tycoon-bldg.b5 { left: 80%; height: 62%; }
.tycoon-window-frame {
  position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background:
    linear-gradient(90deg, transparent calc(50% - 1px), rgba(20, 14, 10, 0.9) calc(50% - 1px), rgba(20, 14, 10, 0.9) calc(50% + 1px), transparent calc(50% + 1px)),
    linear-gradient(180deg, transparent calc(50% - 1px), rgba(20, 14, 10, 0.9) calc(50% - 1px), rgba(20, 14, 10, 0.9) calc(50% + 1px), transparent calc(50% + 1px));
}

/* Dolanan bulutlar — gökyüzü katmanlarının üstünde, gece/gündüz'den bağımsız
   sabit bir katman, sürekli sağa doğru kayar. */
.tycoon-window-clouds { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
.tycoon-cloud {
  position: absolute; background: rgba(255, 255, 255, 0.55); border-radius: 999px;
  filter: blur(0.3px);
}
.tycoon-cloud::before, .tycoon-cloud::after {
  content: ""; position: absolute; background: inherit; border-radius: 999px;
}
.tycoon-cloud.cl1 { top: 14%; width: 46px; height: 14px; left: -60px; animation: tycoonCloudDrift 32s linear infinite; }
.tycoon-cloud.cl1::before { width: 24px; height: 22px; top: -10px; left: 6px; }
.tycoon-cloud.cl1::after { width: 20px; height: 16px; top: -6px; left: 26px; }
.tycoon-cloud.cl2 { top: 26%; width: 34px; height: 11px; left: -50px; opacity: 0.8; animation: tycoonCloudDrift 46s linear infinite; animation-delay: -18s; }
.tycoon-cloud.cl2::before { width: 18px; height: 16px; top: -7px; left: 4px; }
.tycoon-cloud.cl2::after { width: 15px; height: 12px; top: -4px; left: 19px; }
.tycoon-cloud.cl3 { top: 8%; width: 28px; height: 9px; left: -40px; opacity: 0.6; animation: tycoonCloudDrift 38s linear infinite; animation-delay: -9s; }
.tycoon-cloud.cl3::before { width: 15px; height: 13px; top: -6px; left: 3px; }
@keyframes tycoonCloudDrift { from { transform: translateX(0); } to { transform: translateX(340px); } }

/* Stor perde — tıklanınca aşağı iner (pencereyi kapatır), tekrar tıklanınca
   yukarı açılır. transform-origin:top ile "yukarıdan sarkan" bir his verir. */
.tycoon-blind {
  position: absolute; inset: 0; z-index: 3;
  border: none; padding: 0; cursor: pointer;
  transform-origin: top; transform: scaleY(0);
  transition: transform 0.5s ease;
}
.tycoon-blind.down { transform: scaleY(1); }
.tycoon-blind-slats {
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(180deg, #cbbf9e 0 10px, #b9ac89 10px 12px),
    linear-gradient(180deg, #d8cca8, #b0a37e);
  box-shadow: inset 0 -8px 14px rgba(0, 0, 0, 0.25);
}
.tycoon-blind-pull {
  position: absolute; left: 50%; bottom: -14px; transform: translateX(-50%);
  width: 2px; height: 14px; background: #9c8a5e;
}
.tycoon-blind-pull::after {
  content: ""; position: absolute; left: 50%; bottom: -5px; transform: translateX(-50%);
  width: 7px; height: 8px; border-radius: 2px; background: #9c8a5e;
}
/* Perde kapalıyken bile her zaman tıklanabilir küçük bir tutamaç — pencere
   üstünde sabit durur, açık/kapalı fark etmeden storu kontrol eder. */
/* Storu açıp kapatan gerçek bir ip — beyaz, ucunda boncuk, pencerenin sağ
   kenarından sarkıyor. Tıklanınca kısa bir "çekildi" animasyonu (aşağı gidip
   geri döner) oynatır; storun kendisi ayrıca yavaşça iner/kalkar. */
.tycoon-blind-tab {
  position: absolute; top: 0; right: 10px; z-index: 4;
  width: 16px; height: 58px;
  background: none; border: none; padding: 0; cursor: pointer;
}
.tycoon-blind-cord {
  position: absolute; left: 50%; top: 0; height: 46px; width: 2px;
  background: #f4f4ee; border-radius: 1px;
  transform: translate(-50%, 0);
  transition: transform 0.18s ease;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
}
.tycoon-blind-bead {
  position: absolute; left: 50%; top: 46px; width: 10px; height: 10px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffffff, #d6d6cd);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
  transform: translate(-50%, 0);
  transition: transform 0.18s ease;
}
.tycoon-blind-tab:hover .tycoon-blind-cord,
.tycoon-blind-tab:hover .tycoon-blind-bead { transform: translate(-50%, 2px); }
.tycoon-blind-tab.tugged .tycoon-blind-cord { transform: translate(-50%, 9px); }
.tycoon-blind-tab.tugged .tycoon-blind-bead { transform: translate(-50%, 12px); }

.tycoon-gold-counter {
  position: absolute; top: 14px; right: 16px; z-index: 6;
  display: flex; align-items: center; gap: 0.4rem;
  background: rgba(8, 8, 10, 0.72); border: 1px solid rgba(255, 214, 10, 0.5); color: #ffd60a;
  font-family: "Oswald", sans-serif; font-weight: 700; font-size: 1.1rem;
  padding: 0.4rem 0.85rem; border-radius: 999px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}
.tycoon-gold-counter svg { width: 18px; height: 18px; flex-shrink: 0; }

/* Gün sayacı — pencerenin hemen altında, bir tam gün döngüsü (gece->...->gece)
   tamamlanınca artıyor (bkz. tycoon.js applyTimeOfDay). */
.tycoon-day-counter {
  position: absolute; top: 62px; right: 16px; z-index: 6;
  background: rgba(8, 8, 10, 0.72); border: 1px solid rgba(255, 255, 255, 0.15); color: var(--text-dim);
  font-family: "Oswald", sans-serif; font-weight: 600; font-size: 0.66rem; letter-spacing: 0.4px;
  padding: 0.2rem 0.6rem; border-radius: 999px;
  text-align: center;
}

/* Şüphe barı — sol üstte, riskli işler yaptıkça dolar */
.tycoon-suspicion {
  position: absolute; top: 14px; left: 16px; z-index: 6;
  background: rgba(8, 8, 10, 0.72); border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 10px; padding: 0.4rem 0.6rem; width: 118px;
}
.tycoon-suspicion-label { font-family: "Oswald", sans-serif; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.5px; color: var(--text-dim); margin-bottom: 0.3rem; text-transform: uppercase; }
.tycoon-suspicion-track { height: 7px; border-radius: 999px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
.tycoon-suspicion-fill {
  height: 100%; width: 0%; border-radius: 999px;
  background: linear-gradient(90deg, #c81e3a, #ff2d2d);
  transition: width 0.6s ease;
}

/* Akşam/gece lamba ışığı — masaya vuran sıcak sarı bir parıltı, gündüz sönük */
.tycoon-lamp-glow {
  position: absolute; left: 50%; bottom: 20%; transform: translateX(-50%);
  width: 70%; height: 60%; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse at 50% 30%, rgba(255, 196, 92, 0.35), transparent 65%);
  opacity: 0;
  transition: opacity 4s ease;
}
.tycoon-lamp-glow.on { opacity: 1; }

/* Duvar süsleri — raf/kitaplar, çatlaklar, arada beliren örümcek */
/* top değeri altın sayacı + gün sayacı ikilisinin (px ile konumlanmış) hemen
   altına düşecek şekilde px cinsinden verildi — % kullanmak farklı sahne
   yüksekliklerinde üst üste binmeye yol açıyordu (bkz. kullanıcı ekran görüntüsü). */
.tycoon-shelf { position: absolute; top: 122px; right: 2%; z-index: 2; width: 100px; }
.tycoon-shelf-board { height: 6px; background: linear-gradient(180deg, #6e4527, #4a2c18); border-radius: 2px; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.4); }
.tycoon-shelf-book { position: absolute; bottom: 6px; width: 8px; height: 22px; border-radius: 1px 3px 0 0; }
.tycoon-shelf-book.b1 { left: 6px; background: #b5442e; transform: rotate(-2deg); }
.tycoon-shelf-book.b2 { left: 16px; height: 26px; background: #3a6ea5; }
.tycoon-shelf-book.b3 { left: 26px; height: 19px; background: #4a8a5c; transform: rotate(3deg); }
.tycoon-shelf-book.b4 { left: 38px; height: 24px; background: #9c6b3e; }
.tycoon-shelf-trophy {
  position: absolute; left: 50px; bottom: 6px; width: 12px; height: 15px;
  background: linear-gradient(165deg, #ffd60a, #c99700);
  border-radius: 50% 50% 20% 20% / 60% 60% 20% 20%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
.tycoon-shelf-pot { position: absolute; right: 4px; bottom: 6px; width: 24px; height: 26px; }
.tycoon-shelf-pot svg { width: 100%; height: 100%; display: block; }

/* İkinci, daha alçak bir raf — duvarın sade kalan kısmına canlılık katar */
.tycoon-shelf-lower { top: 50%; right: 3%; z-index: 2; width: 74px; }
.tycoon-shelf-lower .tycoon-shelf-book.b1 { left: 4px; height: 18px; background: #6a4c9c; }
.tycoon-shelf-lower .tycoon-shelf-book.b2 { left: 14px; height: 21px; background: #b5442e; transform: rotate(-2deg); }
.tycoon-shelf-frame {
  position: absolute; right: 4px; bottom: 4px; width: 20px; height: 24px;
  background: #d8cca8; border: 2px solid #6e4527; border-radius: 2px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Duvardaki küçük tablo — pencerenin karşı köşesinde */
/* top değeri şüphe barının hemen altına düşsün diye px cinsinden (bkz. .tycoon-shelf notu). */
.tycoon-frame { position: absolute; top: 66px; left: 2%; z-index: 2; width: 44px; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.4)); }
.tycoon-frame svg { width: 100%; height: auto; display: block; }
.tycoon-crack {
  position: absolute; width: 46px; height: 30px; z-index: 1; opacity: 0.35;
  background:
    linear-gradient(105deg, transparent 47%, rgba(0, 0, 0, 0.5) 48%, transparent 50%),
    linear-gradient(70deg, transparent 60%, rgba(0, 0, 0, 0.4) 61%, transparent 63%);
}
.tycoon-crack.c1 { left: 4%; bottom: 40%; }
.tycoon-crack.c2 { right: 8%; bottom: 36%; transform: scaleX(-1); }
.tycoon-spider {
  position: absolute; top: 22%; left: 12%; z-index: 2;
  width: 22px; height: 18px; color: #1a1a1a;
  opacity: 0; transition: opacity 1.2s ease, transform 6s linear;
}
.tycoon-spider.visible { opacity: 0.85; }
.tycoon-spider svg { width: 100%; height: 100%; display: block; }

/* Masa: alt kısım açılı bir trapez (clip-path) ile hafif 3 boyutlu/perspektif
   bir zemin izlenimi verir — üstündeki TV/telefon normal (2 boyutlu) kalır. */
.tycoon-desk { position: absolute; left: 0; right: 0; bottom: 0; height: 38%; z-index: 2; }
.tycoon-desk-top {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, #7a4b28 0%, #5a3720 55%, #3a2414 100%);
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}
.tycoon-desk-top::after {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(97deg, rgba(0, 0, 0, 0.1) 0 2px, transparent 2px 24px);
  mix-blend-mode: multiply;
}
.tycoon-desk-edge {
  position: absolute; left: 0; right: 0; bottom: 0; height: 10px;
  background: linear-gradient(180deg, #2a1a0e, #180f08);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5);
}

/* Masa süsü — masanın ön-sol köşesinde duran saksı bitki */
.tycoon-plant {
  position: absolute; left: 4%; bottom: 3%; z-index: 3;
  width: 40px; height: 46px;
  filter: drop-shadow(0 6px 6px rgba(0, 0, 0, 0.45));
}
.tycoon-plant svg { width: 100%; height: 100%; display: block; }

/* Masa saati — gün döngüsüyle birebir senkron (80s = 1 tam gün, bkz. tycoon.js
   restartClock). Masanın sağında, telefonun biraz solunda duruyor. */
.tycoon-clock {
  position: absolute; right: 16%; bottom: 30%; z-index: 4;
  width: 44px; height: 44px;
}
.tycoon-clock::after {
  /* Masaya oturduğunu belli eden gölge — hafif yükseltilmiş/3B hissi katar */
  content: ""; position: absolute; left: 50%; bottom: -8px; transform: translateX(-50%);
  width: 70%; height: 8px; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(0, 0, 0, 0.45), transparent 70%);
}
.tycoon-clock-face {
  position: relative; width: 100%; height: 100%; border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #fdfdf6, #d9d2bb 65%, #c4bb9c 100%);
  /* Kalın kabartma bezel + iç gölge + üstte parlama ile düz değil, gerçek bir
     kadran camı/çerçevesi hissi verir. */
  box-shadow:
    0 9px 18px rgba(0, 0, 0, 0.5),
    0 0 0 3px #7a5a30,
    0 0 0 4.5px #3a2a14,
    inset 0 2px 3px rgba(255, 255, 255, 0.55),
    inset 0 -3px 5px rgba(0, 0, 0, 0.25);
}
.tycoon-clock-tick { position: absolute; background: #3a2c1c; }
.tycoon-clock-tick.t0 { top: 3px; left: 50%; width: 2px; height: 5px; transform: translateX(-50%); }
.tycoon-clock-tick.t1 { bottom: 3px; left: 50%; width: 2px; height: 5px; transform: translateX(-50%); }
.tycoon-clock-tick.t2 { top: 50%; left: 3px; width: 5px; height: 2px; transform: translateY(-50%); }
.tycoon-clock-tick.t3 { top: 50%; right: 3px; width: 5px; height: 2px; transform: translateY(-50%); }
.tycoon-clock-hand {
  position: absolute; left: 50%; bottom: 50%; transform-origin: bottom center;
  background: #221a10; border-radius: 2px;
}
.tycoon-clock-hour { width: 3px; height: 12px; margin-left: -1.5px; }
.tycoon-clock-minute { width: 2px; height: 17px; margin-left: -1px; background: #4a3722; }
.tycoon-clock-pin { position: absolute; left: 50%; top: 50%; width: 5px; height: 5px; border-radius: 50%; background: #221a10; transform: translate(-50%, -50%); }
/* 80s = bir tam gün döngüsü (5 aşama x 16sn, bkz. tycoon.js SKY_STAGES) —
   saat ibreleri bununla birebir paralel ilerlesin diye aynı süreyi kullanıyor. */
.tycoon-clock-hour.running { animation: tycoonClockHour 80s linear infinite; }
.tycoon-clock-minute.running { animation: tycoonClockMinute 80s linear infinite; }
@keyframes tycoonClockHour { from { transform: rotate(0deg); } to { transform: rotate(720deg); } }
@keyframes tycoonClockMinute { from { transform: rotate(0deg); } to { transform: rotate(8640deg); } }

/* Televizyon — eski tüplü (CRT) tip: kalın plastik gövde, antenler, DÜZGÜN
   DİKDÖRTGEN ekran (öncekinden daha mantıklı) — küçültülüp aşağı alındı ki
   arkasındaki pencerenin çoğu görünsün. */
.tycoon-tv {
  /* Pencerenin ortasını kapatmasın diye masanın SOL tarafına alındı. */
  position: absolute; left: 8%; bottom: 30%;
  width: min(180px, 38%); z-index: 3;
}
.tycoon-tv-antenna { position: absolute; top: -20px; left: 50%; width: 60px; height: 22px; transform: translateX(-50%); }
.tycoon-tv-antenna span {
  position: absolute; bottom: 0; width: 2px; height: 22px; background: #8a8a8a; transform-origin: bottom center;
}
.tycoon-tv-antenna span:first-child { left: 46%; transform: rotate(-24deg); }
.tycoon-tv-antenna span:last-child { left: 54%; transform: rotate(24deg); }
.tycoon-tv-shell {
  background: linear-gradient(165deg, #d8c6a8, #a88e64 55%, #8a7250);
  border-radius: 12px;
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.55), inset 0 0 0 2px rgba(255, 255, 255, 0.15), inset 0 -6px 10px rgba(0, 0, 0, 0.25);
  padding: 10px; box-sizing: border-box;
}
.tycoon-tv-screen {
  /* Sabit mavi-lacivert ekran — kanal/renk değiştirme kaldırıldı (kullanıcı isteği). */
  position: relative;
  aspect-ratio: 4 / 3;
  background: radial-gradient(ellipse at 50% 35%, #26374a 0%, #101922 75%);
  border-radius: 6px;
  padding: 0; box-sizing: border-box; overflow: hidden;
  color: #eaf2ff; font-size: 0.72rem; line-height: 1.4;
  box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.8), inset 0 0 0 3px #05070a;
}
.tycoon-tv-scanlines {
  position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(180deg, rgba(0, 0, 0, 0.22) 0 1px, transparent 1px 3px);
  mix-blend-mode: multiply;
}
.tycoon-tv-goldflash {
  position: absolute; inset: 0; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  font-family: "Oswald", sans-serif; font-weight: 700; font-size: 1.35rem;
  opacity: 0; transition: opacity 0.3s ease, transform 0.3s ease;
  transform: scale(0.85);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
  pointer-events: none;
}
.tycoon-tv-goldflash.show { opacity: 1; transform: scale(1); }
.tycoon-tv-goldflash.positive { color: #7cff9e; }
.tycoon-tv-goldflash.negative { color: #ff6a7a; }
.tycoon-tv-knobs { display: flex; justify-content: center; gap: 10px; margin-top: 6px; }
.tycoon-tv-knobs span {
  width: 11px; height: 11px; border-radius: 50%;
  background: linear-gradient(165deg, #3a3226, #1c1811);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
}
.tycoon-tv-shadow {
  width: 55%; height: 12px; margin: 6px auto 0;
  background: radial-gradient(ellipse, rgba(0, 0, 0, 0.5), transparent 70%);
}
/* "HABERLER" kanal bandı + kayan başlık — ekranın ÜST kenarına, yayın grafiği
   gibi bindirilmiş (bkz. .tycoon-tv-screen'in kendisi dikdörtgen ve taşma
   olmadığı için burası artık her zaman tam görünür/okunur). */
.tycoon-tv-newsbar {
  position: absolute; top: 6px; left: 6px; right: 6px; z-index: 2;
  display: flex; align-items: center; gap: 0;
  font-family: "Oswald", sans-serif; font-size: 0.6rem;
  border-radius: 4px; overflow: hidden;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4);
}
.tycoon-tv-newstag {
  background: #c81e3a; color: #fff; font-weight: 700; letter-spacing: 0.5px;
  font-size: 0.54rem; padding: 0.3rem 0.4rem; flex-shrink: 0;
}
/* Kayan yazı: metin tycoon.js'te ölçülüp iki tur boyunca soldan gelip sağa
   doğru akıtılıyor (bkz. scrollTicker) — kullanıcıya okuması için zaman
   tanımak amacıyla, gerçek bir TV bandı gibi anlık kesilip durmuyor. */
.tycoon-tv-ticker {
  background: rgba(0, 0, 0, 0.72); color: #fff; padding: 0.3rem 0.5rem;
  flex: 1 1 auto; min-width: 0; overflow: hidden; position: relative;
}
.tycoon-tv-ticker-text { display: inline-block; white-space: nowrap; will-change: transform; }
/* Olay kutusu ekranı TAMAMEN kaplar — içerik uzunluğuna göre kırpılıp
   görünmez/erişilemez hale gelmesi (eski "kara ekran" hatası) mümkün değil. */
.tycoon-tv-event {
  position: absolute; inset: 0; z-index: 2;
  display: none; flex-direction: column; justify-content: center; gap: 0.5rem;
  background: linear-gradient(180deg, rgba(120, 10, 30, 0.94), rgba(30, 4, 10, 0.97));
  padding: 0.6rem;
}
.tycoon-event-title { font-weight: 700; color: #ffd9e2; display: flex; align-items: center; gap: 0.4rem; }
.tycoon-event-icon { width: 15px; height: 15px; flex-shrink: 0; }
.tycoon-event-icon svg { width: 100%; height: 100%; display: block; }
.tycoon-event-titletext { flex: 1 1 auto; }
.tycoon-event-timer { color: #fff; font-variant-numeric: tabular-nums; }
.tycoon-event-choices { display: flex; flex-direction: column; gap: 0.35rem; }
.tycoon-event-choices button {
  font-family: "Inter", sans-serif; font-size: 0.72rem; text-align: left;
  background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); color: #fff;
  padding: 0.4rem 0.55rem; border-radius: 5px; cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}
.tycoon-event-choices button:hover { border-color: #fff; background: rgba(255, 255, 255, 0.18); }

/* Telefon — masanın sağında duran, dokununca "açılan" bir simge */
.tycoon-phone {
  position: absolute; right: 24px; bottom: 12%; z-index: 5;
  display: flex; flex-direction: column; align-items: center; gap: 0.35rem;
  background: none; border: none; cursor: pointer; color: inherit; padding: 0;
}
.tycoon-phone-body {
  width: 56px; height: 56px; border-radius: 15px;
  background: linear-gradient(165deg, #23262f, #14151b);
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.5), 0 0 0 4px rgba(255, 106, 0, 0.1);
  transition: transform 0.15s ease, box-shadow 0.2s ease;
}
.tycoon-phone-body svg { width: 24px; height: 24px; color: var(--accent); }
.tycoon-phone-label {
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.4px; color: var(--text-dim);
  text-transform: uppercase;
}
.tycoon-phone:hover .tycoon-phone-body,
.tycoon-phone:focus-visible .tycoon-phone-body {
  transform: translateY(-3px);
  box-shadow: 0 14px 26px rgba(0, 0, 0, 0.55), 0 0 0 4px rgba(255, 106, 0, 0.25);
}
.tycoon-phone:active .tycoon-phone-body { transform: translateY(-1px) scale(0.96); }
.tycoon-phone-badge {
  position: absolute; top: -4px; right: 4px;
  min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px;
  background: var(--neon-pink); color: #fff; font-size: 0.62rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 2px #0e1015;
  animation: tycoonBadgePulse 1.4s ease-in-out infinite;
}
@keyframes tycoonBadgePulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.15); } }

/* SMS balonu — telefonun yanında beliren, kısa süreli bir mesaj bildirimi */
.tycoon-sms-bubble {
  position: absolute; right: 20px; bottom: calc(12% + 88px); z-index: 8;
  width: min(230px, 62%);
  background: #1c1e24; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 12px;
  padding: 0.7rem 0.8rem; box-shadow: 0 14px 32px rgba(0, 0, 0, 0.5);
}
.tycoon-sms-bubble::after {
  content: ""; position: absolute; right: 22px; bottom: -8px;
  border: 8px solid transparent; border-top-color: #1c1e24;
}
.tycoon-sms-title { font-family: "Oswald", sans-serif; font-size: 0.78rem; font-weight: 700; color: var(--accent); margin-bottom: 0.3rem; }
.tycoon-sms-body { font-size: 0.74rem; line-height: 1.5; color: var(--text); margin-bottom: 0.6rem; }
.tycoon-sms-actions { display: flex; gap: 0.4rem; }
.tycoon-sms-actions .btn { width: auto; flex: 1 1 auto; padding: 0.4rem 0.4rem; font-size: 0.72rem; }

/* Telefon "açılınca" gelen tam uygulama görünümü — gerçekten bir cihaz
   kaldırıp ekranına bakıyormuş hissi versin diye büyük bir telefon çerçevesi. */
.tycoon-phone-backdrop {
  position: absolute; inset: 0; z-index: 10;
  background: rgba(4, 4, 6, 0.72); backdrop-filter: blur(2px);
}
.tycoon-phone-app {
  position: absolute; inset: 0; z-index: 11;
  display: flex; align-items: center; justify-content: center;
}
.tycoon-phone-frame {
  width: min(240px, 78%); height: min(420px, 88%);
  background: linear-gradient(165deg, #2a2c33, #101114);
  border-radius: 30px; padding: 10px; box-sizing: border-box;
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.6), inset 0 0 0 2px rgba(255, 255, 255, 0.06);
  display: flex; flex-direction: column;
}
.tycoon-phone-notch {
  width: 34%; height: 8px; background: #000; border-radius: 0 0 8px 8px;
  margin: 0 auto 6px;
}
.tycoon-phone-screen {
  flex: 1 1 auto; min-height: 0;
  background: #08090c; border-radius: 18px;
  padding: 0.7rem; box-sizing: border-box;
  display: flex; flex-direction: column; gap: 0.6rem;
  overflow-y: auto;
}
/* Telefonun her ekranında sabit görünen altın göstergesi — telefon açıkken
   masadaki asıl sayaç arkada kaldığı için buraya da ihtiyaç vardı. */
.tycoon-phone-statusbar {
  display: flex; align-items: center; justify-content: center; gap: 0.35rem;
  flex-shrink: 0; font-family: "Oswald", sans-serif; font-weight: 700; font-size: 0.9rem;
  color: #ffd60a; background: rgba(255, 214, 10, 0.08); border: 1px solid rgba(255, 214, 10, 0.3);
  border-radius: 8px; padding: 0.3rem 0.5rem;
}
.tycoon-phone-statusbar svg { width: 15px; height: 15px; }
.tycoon-app-topbar { display: flex; align-items: center; gap: 0.3rem; flex-shrink: 0; }
.tycoon-app-tabs { display: flex; gap: 0.25rem; flex: 1 1 auto; min-width: 0; }
.tycoon-app-tab {
  flex: 1 1 auto; min-width: 0; font-family: "Oswald", sans-serif; font-size: 0.6rem; font-weight: 600;
  background: rgba(255, 255, 255, 0.05); border: 1px solid var(--border); color: var(--text-dim);
  padding: 0.4rem 0.2rem; border-radius: 7px; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}
.tycoon-app-tab.active { color: var(--accent); border-color: rgba(255, 106, 0, 0.5); background: rgba(255, 106, 0, 0.1); }
.tycoon-app-close {
  flex-shrink: 0; width: 26px; height: 26px; border-radius: 7px;
  background: rgba(255, 255, 255, 0.05); border: 1px solid var(--border); color: var(--text-dim);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.tycoon-app-close svg { width: 13px; height: 13px; }
.tycoon-app-close:hover { border-color: var(--neon-pink); color: var(--neon-pink); }
/* flex:1 1 auto + min-height:0 klasik hatası: içerik (6 market kademesi vb.)
   flex ile ayrılan alandan uzun olunca kutu içeriğe göre değil KAPSAYICIYA göre
   küçülüyordu — arka plan (kağıt rengi) içeriğin bir kısmını kapsamadan
   bitiyordu (Şube satırı arka planın dışına "taşıyordu"). flex:none ile kutu
   artık her zaman kendi içeriği kadar uzun; kaydırma zaten dıştaki
   .tycoon-phone-screen'de (overflow-y:auto) oluyor. */
.tycoon-app-body { flex: none; width: 100%; }
.tycoon-phone-home {
  width: 30%; height: 4px; background: rgba(255, 255, 255, 0.25); border-radius: 999px;
  margin: 8px auto 0; flex-shrink: 0;
}

.tycoon-market-row { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.15rem; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.tycoon-market-row:last-child { border-bottom: none; }
.tycoon-market-icon {
  position: relative; width: 26px; height: 26px; flex-shrink: 0; color: var(--accent);
}
.tycoon-market-icon svg { width: 100%; height: 100%; display: block; }
.tycoon-market-qty {
  position: absolute; right: -8px; bottom: -6px;
  background: #0e0e12; border: 1px solid var(--accent); color: var(--accent);
  font-size: 0.58rem; font-weight: 700; line-height: 1; padding: 0.14rem 0.28rem; border-radius: 999px;
}
.tycoon-market-info { flex: 1 1 auto; font-size: 0.76rem; color: var(--text); display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.tycoon-market-info small { color: var(--text-dim); display: inline-flex; align-items: center; gap: 0.2rem; }
.tycoon-market-row .btn { width: auto; padding: 0.32rem 0.6rem; font-size: 0.72rem; display: inline-flex; align-items: center; gap: 0.28rem; flex-shrink: 0; }
.tycoon-market-row .btn svg { width: 12px; height: 12px; }

/* Market sekmesi — diğer (kumarhane/yatırım/yardım) sekmelerin dijital app
   görünümünden bilinçli olarak ayrılıp, defter/kağıt temasına bağlanıyor:
   şirketin "alım listesi" gibi sıcak, kağıt dokulu bir defter sayfası hissi. */
#tycoonMarket {
  background: linear-gradient(165deg, #f3ead4, #e7dab8);
  border-radius: 8px; padding: 0.6rem 0.5rem 0.9rem; margin: -0.1rem;
  box-shadow: inset 0 0 0 1px rgba(90, 63, 34, 0.25);
}
#tycoonMarket .tycoon-market-row { border-bottom: 1px dashed rgba(90, 63, 34, 0.3); padding: 0.55rem 0.3rem; }
#tycoonMarket .tycoon-market-icon { color: #7a4b28; }
#tycoonMarket .tycoon-market-qty { background: #f3ead4; border-color: #7a4b28; color: #5a3f22; }
#tycoonMarket .tycoon-market-info { color: #2a2a26; }
#tycoonMarket .tycoon-market-info small { color: #6b5a3f; }
#tycoonMarket .tycoon-inline-coin { color: #a06a1e; }
#tycoonMarket .btn-primary {
  background: linear-gradient(165deg, #7a4b28, #5a3720); color: #f3ead4; border: none;
}

/* Kumarhane / Yatırım — ortak "info" başlığı: uzun açıklama metni her yeri
   kaplamasın diye artık her zaman görünmüyor, "?" simgesine tıklayınca açılan
   küçük bir balonda gösteriliyor. */
.tycoon-app-head { display: flex; align-items: center; justify-content: center; gap: 0.4rem; margin-bottom: 0.5rem; position: relative; }
.tycoon-app-head h4 { font-family: "Oswald", sans-serif; font-size: 0.82rem; margin: 0; }
.tycoon-info-btn {
  width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0;
  background: rgba(255, 255, 255, 0.08); border: 1px solid var(--border); color: var(--text-dim);
  font-size: 0.66rem; font-weight: 700; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.tycoon-info-btn:hover { border-color: var(--accent); color: var(--accent); }
.tycoon-info-pop {
  display: none; position: absolute; top: 24px; left: 50%; transform: translateX(-50%);
  width: 200px; background: #14151a; border: 1px solid var(--border); border-radius: 8px;
  padding: 0.55rem 0.65rem; font-size: 0.66rem; line-height: 1.45; color: var(--text-dim);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.5); z-index: 3; text-align: left;
}
.tycoon-info-pop.open { display: block; }

.tycoon-roulette-wheel {
  width: 48px; height: 48px; margin: 0 auto 0.5rem; color: var(--accent);
  transition: transform 0.15s ease;
}
.tycoon-roulette-wheel svg { width: 100%; height: 100%; display: block; }
.tycoon-roulette-wheel.spinning { animation: tycoonSpin 0.5s linear infinite; }
@keyframes tycoonSpin { to { transform: rotate(360deg); } }
.tycoon-roulette-chips { display: flex; gap: 0.3rem; justify-content: center; margin-bottom: 0.55rem; flex-wrap: wrap; }
.tycoon-chip {
  font-family: "Oswald", sans-serif; font-size: 0.64rem; font-weight: 700;
  background: rgba(255, 255, 255, 0.06); border: 1px solid var(--border); color: var(--text-dim);
  padding: 0.32rem 0.5rem; border-radius: 999px; cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.tycoon-chip.active, .tycoon-chip:hover { border-color: var(--accent); color: var(--accent); }
.tycoon-roulette-bet { text-align: center; font-size: 0.78rem; color: var(--text-dim); margin-bottom: 0.55rem; display: flex; align-items: center; justify-content: center; gap: 0.3rem; }
.tycoon-roulette-bet strong { color: var(--accent); }
#tycoonSpinBtn, #tycoonInvestBtn { width: 100%; }
.tycoon-roulette-result, .tycoon-invest-result { text-align: center; font-size: 0.74rem; font-weight: 600; color: var(--accent); min-height: 1.2em; margin-top: 0.45rem; }

/* Yatırım — gecikmeli/beklemeli bir şans mekaniği, rulet'in aksine anlık değil */
.tycoon-invest-progress {
  height: 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.08);
  overflow: hidden; margin: 0.6rem 0;
}
.tycoon-invest-progress-bar {
  height: 100%; width: 0%; background: var(--accent);
  transition: width linear;
}
.tycoon-invest-status { text-align: center; font-size: 0.7rem; color: var(--text-dim); }

/* Telefonun diğer sekmeleri — Market'in sıcak kağıt temasından bilinçli
   ayrışıp kendi kimliğine sahip: Kumarhane (yeşil keçe/altın), Yatırım
   (lacivert borsa), Yardım (yumuşak yeşil güven tonu). Hepsi aynı yapıyı
   (chip/buton/başlık) kullanıyor, sadece renk kimliği değişiyor. */
#tycoonRoulette {
  background: radial-gradient(ellipse at 50% 0%, rgba(255, 214, 10, 0.08), transparent 60%), linear-gradient(165deg, #123a26, #0b2318);
  border-radius: 8px; padding: 0.7rem 0.6rem; margin: -0.1rem;
  box-shadow: inset 0 0 0 1px rgba(255, 214, 10, 0.25), inset 0 0 20px rgba(0, 0, 0, 0.35);
}
#tycoonRoulette .tycoon-app-head h4 { color: #ffd60a; }
#tycoonRoulette .tycoon-info-pop { background: #0e1e15; }
#tycoonRoulette .tycoon-roulette-wheel { color: #ffd60a; }
#tycoonRoulette .tycoon-chip.active, #tycoonRoulette .tycoon-chip:hover { border-color: #ffd60a; color: #ffd60a; }
#tycoonRoulette #tycoonSpinBtn { background: linear-gradient(165deg, #c81e3a, #8a1226); border: none; }

#tycoonInvest {
  background: linear-gradient(165deg, #131c2e, #0a0f1a);
  border-radius: 8px; padding: 0.7rem 0.6rem; margin: -0.1rem;
  box-shadow: inset 0 0 0 1px rgba(79, 163, 232, 0.25);
}
#tycoonInvest .tycoon-app-head h4 { color: #4fa3e8; }
#tycoonInvest .tycoon-info-pop { background: #0e1520; }
#tycoonInvest .tycoon-chip.active, #tycoonInvest .tycoon-chip:hover { border-color: #4fa3e8; color: #4fa3e8; }
#tycoonInvest .tycoon-invest-progress-bar { background: #4fa3e8; }
#tycoonInvest #tycoonInvestBtn { background: linear-gradient(165deg, #2c6fc4, #1a4c8f); border: none; }

#tycoonWelfare {
  background: linear-gradient(165deg, #1c2c22, #12201a);
  border-radius: 8px; padding: 0.7rem 0.6rem; margin: -0.1rem;
  box-shadow: inset 0 0 0 1px rgba(76, 143, 90, 0.3);
}
#tycoonWelfare .tycoon-app-head h4 { color: #6fcf8a; }
#tycoonWelfare .tycoon-info-pop { background: #101c14; }
#tycoonWelfare .tycoon-chip.active, #tycoonWelfare .tycoon-chip:hover { border-color: #6fcf8a; color: #6fcf8a; }
#tycoonWelfare #tycoonDonateBtn { background: linear-gradient(165deg, #3a8a55, #245c37); border: none; }

.tycoon-cashout-btn {
  position: absolute; left: 16px; bottom: 14px; z-index: 5;
  width: auto; display: inline-flex; align-items: center; gap: 0.4rem;
}
.tycoon-cashout-btn svg { width: 15px; height: 15px; }

/* Masadaki resmi belge — hafif eğik duran beyaz bir kağıt, ödenmemişse
   üstünde dikkat çeken kırmızı bir ünlem rozeti var. */
.tycoon-paper {
  position: absolute; left: 46%; bottom: 8%; z-index: 4;
  width: 34px; height: 44px;
  background: linear-gradient(165deg, #fdfdf6, #eae8dd);
  border-radius: 2px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4), inset 0 0 0 1px rgba(0, 0, 0, 0.08);
  transform: rotate(-6deg);
  cursor: pointer;
  transition: transform 0.15s ease;
}
.tycoon-paper::before {
  content: ""; position: absolute; left: 15%; right: 15%; top: 22%;
  height: 2px; background: rgba(0, 0, 0, 0.12);
  box-shadow: 0 6px 0 rgba(0, 0, 0, 0.12), 0 12px 0 rgba(0, 0, 0, 0.12), 0 18px 0 rgba(0, 0, 0, 0.1);
}
.tycoon-paper:hover { transform: rotate(-6deg) translateY(-3px); }
.tycoon-paper.unpaid::after {
  content: "!"; position: absolute; top: -8px; right: -8px;
  width: 17px; height: 17px; border-radius: 50%;
  background: var(--neon-pink); color: #fff; font-weight: 700; font-size: 0.72rem;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 2px #0e1015;
  animation: tycoonBadgePulse 1.4s ease-in-out infinite;
}
.tycoon-paper.paid { background: linear-gradient(165deg, #e8f3ea, #d3e5d6); }

/* Dilekçe — keyfi bir teklif mektubu, kağıttan (ceza) ayırt edilsin diye
   zarf şeklinde ve balmumu mühürlü. */
.tycoon-petition {
  position: absolute; left: 30%; bottom: 10%; z-index: 4;
  width: 36px; height: 26px; border-radius: 2px;
  background: linear-gradient(165deg, #e4d3a0, #cbb87c);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4), inset 0 0 0 1px rgba(0, 0, 0, 0.15);
  cursor: pointer; transform: rotate(4deg); transition: transform 0.15s ease;
}
.tycoon-petition::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(135deg, transparent 49%, rgba(0, 0, 0, 0.12) 50%, transparent 51%),
    linear-gradient(45deg, transparent 49%, rgba(0, 0, 0, 0.12) 50%, transparent 51%);
}
.tycoon-petition:hover { transform: rotate(4deg) translateY(-3px); }
.tycoon-petition-seal {
  position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #d64545, #8a1f1f);
  transform: translate(-50%, -50%);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}
/* "notice" türü dilekçe (kabul/red gerektirmeyen otomatik kötü haber) daha
   soluk/gri, mühür de kırmızı yerine siyah — içeriğiyle uyumlu olsun diye. */
.tycoon-petition.notice { background: linear-gradient(165deg, #cfc7b4, #a89d82); }
.tycoon-petition.notice .tycoon-petition-seal { background: radial-gradient(circle at 35% 30%, #4a4a4a, #1a1a1a); }

/* Kağıt okuma modu — gerçek bir resmi belgeye benzeyen, açık renkli overlay */
.tycoon-paper-backdrop {
  position: absolute; inset: 0; z-index: 12;
  background: rgba(4, 4, 6, 0.75); backdrop-filter: blur(2px);
}
.tycoon-paper-modal {
  position: absolute; inset: 0; z-index: 13;
  display: flex; align-items: center; justify-content: center; padding: 1rem;
}
.tycoon-paper-sheet {
  width: min(280px, 100%); max-height: 100%; overflow-y: auto;
  background: linear-gradient(165deg, #fdfdf6, #eae8dd);
  color: #2a2a26; border-radius: 4px; padding: 1.1rem 1.2rem;
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.55);
  font-family: "Inter", serif;
}
.tycoon-paper-sheet h4 { font-family: "Oswald", sans-serif; font-size: 0.98rem; margin-bottom: 0.6rem; color: #1a1a17; }
.tycoon-paper-sheet p { font-size: 0.8rem; line-height: 1.6; margin-bottom: 0.8rem; }
.tycoon-paper-deadline { font-size: 0.72rem; font-weight: 700; color: #a0361f; margin-bottom: 1rem; }
.tycoon-paper-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.tycoon-paper-actions .btn { width: auto; }
.tycoon-paper-actions .btn-ghost { border-color: rgba(0, 0, 0, 0.25); color: #2a2a26; }

/* Şirket defteri — masada sabit duran, kadro/kira bilgisi gösteren prop */
.tycoon-notebook {
  position: absolute; left: 66%; bottom: 6%; z-index: 4;
  width: 40px; height: 30px; border-radius: 3px;
  background: linear-gradient(165deg, #3a6ea5, #2a4f78);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4), inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  cursor: pointer; transition: transform 0.15s ease;
}
.tycoon-notebook:hover { transform: translateY(-3px); }
.tycoon-notebook.due::after {
  content: ""; position: absolute; top: -5px; right: -5px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--neon-pink); box-shadow: 0 0 0 2px #0e1015;
  animation: tycoonBadgePulse 1.4s ease-in-out infinite;
}
.tycoon-notebook-spiral {
  position: absolute; left: 4px; top: 3px; bottom: 3px; width: 3px;
  background-image: repeating-linear-gradient(180deg, #cfd6de 0 2px, transparent 2px 5px);
  opacity: 0.8;
}
.tycoon-notebook-sheet { width: min(300px, 100%); }
.tycoon-notebook-tabs { display: flex; gap: 0.4rem; margin-bottom: 0.7rem; }
.tycoon-notebook-tab {
  flex: 1 1 auto; font-family: "Oswald", sans-serif; font-size: 0.72rem; font-weight: 700;
  background: rgba(0, 0, 0, 0.06); border: 1px solid rgba(0, 0, 0, 0.15); color: #2a2a26;
  padding: 0.4rem; border-radius: 6px; cursor: pointer;
}
.tycoon-notebook-tab.active { background: rgba(58, 110, 165, 0.18); border-color: #3a6ea5; color: #204468; }
.tycoon-notebook-page { font-size: 0.8rem; line-height: 1.6; }
.tycoon-notebook-row { display: flex; justify-content: space-between; gap: 0.6rem; padding: 0.3rem 0; border-bottom: 1px dashed rgba(0, 0, 0, 0.15); }
.tycoon-notebook-row:last-child { border-bottom: none; }
.tycoon-notebook-total { font-weight: 700; margin-top: 0.4rem; }
.tycoon-notebook-status {
  display: inline-block; font-family: "Oswald", sans-serif; font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.6px; padding: 0.2rem 0.6rem; border-radius: 999px; margin-bottom: 0.6rem;
}
.tycoon-notebook-status.due { background: rgba(200, 30, 58, 0.14); color: #a01e30; border: 1px solid rgba(200, 30, 58, 0.4); }
.tycoon-notebook-status.clear { background: rgba(76, 143, 90, 0.14); color: #2f7d4a; border: 1px solid rgba(76, 143, 90, 0.4); }
.tycoon-notebook-rent-amount {
  font-family: "Oswald", sans-serif; font-size: 1.6rem; font-weight: 700; color: #a01e30;
  display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.5rem;
}
.tycoon-notebook-rent-amount svg { width: 20px; height: 20px; }
.tycoon-notebook-billnote { font-size: 0.7rem; color: #6b5a3f; margin-top: 0.6rem; font-style: italic; }

.tycoon-overlay-cover {
  background:
    linear-gradient(rgba(6, 8, 10, 0.55), rgba(4, 4, 6, 0.9)),
    url("/assets/baskanmasasi.webp") center top / cover no-repeat;
  z-index: 20;
}
.tycoon-final-score {
  display: flex; align-items: center; justify-content: center; gap: 0.4rem;
  font-size: 2.2rem; font-weight: 700; color: var(--accent); margin: 0.3rem 0;
}
.tycoon-final-score svg { width: 26px; height: 26px; }

/* Mobil — dar ekranda hem daha fazla dikey alan veriyoruz hem de saf dekoratif
   öğeleri (raf/çerçeve/örümcek/bulut) kapatıp asıl oynanabilir kısımların
   (TV, telefon, kağıt, defter, saat, şüphe barı) üst üste binmesini önlüyoruz. */
/* ==================== Başkan Masası — MOBİL TAM EKRAN ====================
   Masaüstünde sahne, serbestçe konumlanmış küçük objelerle bir "diorama" gibi
   çalışıyor. Dar bir ekranda bunu küçültmeye çalışmak (objelerin çakışması,
   TV'nin havada uçması, okunamayan haber yazısı) başarısız oldu. Bu yüzden
   MOBİLDE tamamen farklı bir düzen kuruyoruz: oyun tıklanınca modal tüm ekranı
   kaplar (gerçek bir mobil oyun gibi), sahne 3 net katmana ayrılır —
     • üstte kompakt DURUM ÇUBUĞU (şüphe / altın / gün),
     • ortada büyütülmüş, okunur TV (asıl oynanış: haberler ve kararlar),
     • altta sabit AKSİYON ÇUBUĞU: 5 eşit, büyük, etiketli dokunma butonu
       (Kasa / Kağıt / Dilekçe / Defter / Telefon).
   Aynı DOM öğeleri ve JS fonksiyonları kullanılıyor; sadece CSS ile konum ve
   görünüm değişiyor, bu yüzden tüm oyun durumu (uyarılar, rozetler) otomatik
   senkron kalıyor. Ekran genişliğine bakıyoruz — "mobil" tespiti kandırılabilen
   bir user-agent kontrolü değil, gerçek kullanılabilir alana göre. */
@media (max-width: 640px) {
  /* 1) Oyun modalını tam ekran yap.
     ÖNEMLİ: yükseklik zincirini flex ile kurmak kırılgandı — bir ara katman
     çökünce .game-canvas-wrap'ın overflow:hidden'ı sahneyi 0'a kırpıyor ve
     modal simsiyah görünüyordu. Bu yüzden her katmana AÇIKÇA viewport yüksekliği
     (100dvh, eski tarayıcılarda 100vh) veriyoruz — hiçbir katman parent'ının
     yüksekliğini çözmesine bağlı değil. */
  #tycoonPlayModal { padding: 0; }
  #tycoonPlayModal .modal-card {
    width: 100vw; max-width: none; height: 100vh; height: 100dvh; max-height: none;
    border: none; border-radius: 0; overflow: hidden;
  }
  #tycoonPlayModal .modal-post-body { padding: 0 !important; height: 100vh; height: 100dvh; }
  #tycoonPlayModal .game-layout { display: block; height: 100vh; height: 100dvh; gap: 0; }
  #tycoonPlayModal .game-leaderboard-card { display: none; } /* skor tablosu oyun-sonu ekranında görünür */
  #tycoonPlayModal .game-header { display: none; }
  #tycoonPlayModal .game-wrap { height: 100vh; height: 100dvh; padding: 0; border: none; border-radius: 0; background: transparent; }
  #tycoonPlayModal .tycoon-scene-wrap { min-height: 0; height: 100vh; height: 100dvh; border: none; border-radius: 0; }
  #tycoonPlayModal .tycoon-scene { height: 100vh; height: 100dvh; }
  #tycoonPlayModalClose { top: 10px; right: 10px; z-index: 30; }

  /* 2) Durum çubuğu — üstte, kompakt */
  .tycoon-suspicion { width: 96px; padding: 0.3rem 0.5rem; top: 12px; left: 12px; z-index: 8; }
  .tycoon-suspicion-label { font-size: 0.56rem; }
  .tycoon-gold-counter { top: 12px; right: 52px; font-size: 0.95rem; padding: 0.3rem 0.65rem; z-index: 8; }
  .tycoon-day-counter { top: 54px; right: 52px; font-size: 0.62rem; z-index: 8; }

  /* 3) Orta katman — pencere arka planda, TV büyük ve okunur şekilde ortada */
  .tycoon-window { top: 9%; left: 50%; width: 88%; height: 24%; }
  .tycoon-tv {
    left: 50%; bottom: auto; top: 21%; width: min(300px, 82%); transform: translateX(-50%);
  }
  .tycoon-tv-screen { font-size: 0.82rem; }
  .tycoon-tv-newstag { font-size: 0.64rem; }
  .tycoon-tv-ticker-text { font-size: 0.72rem; }
  .tycoon-event-title { font-size: 0.86rem; }
  .tycoon-event-choices button { font-size: 0.84rem; padding: 0.6rem 0.7rem; }

  /* Kalabalık yapan dekorasyon kapalı; ama MASA ve SAAT geri geldi (kullanıcı
     isteği) — masa artık alt aksiyon çubuğunun oturduğu zemin, saat de masanın
     üstünde küçük bir obje olarak duruyor. */
  .tycoon-shelf, .tycoon-shelf-lower, .tycoon-frame, .tycoon-spider,
  .tycoon-cloud, .tycoon-plant, .tycoon-crack, .tycoon-lamp-glow { display: none; }
  .tycoon-scene { background: linear-gradient(180deg, #1b212c 0%, #12151d 100%); }

  /* Masa: ekranın alt kısmında ahşap bir yüzey — butonlar bunun üstünde durur */
  .tycoon-desk { display: block; height: 150px; z-index: 1; }
  /* Saat: masanın üstünde, orta-üstte küçük bir obje */
  .tycoon-clock {
    display: block; right: auto; left: 50%; bottom: 98px; width: 34px; height: 34px;
    transform: translateX(-50%); z-index: 2;
  }

  /* 4) Alt aksiyon çubuğu — masanın üstünde 5 eşit dokunma butonu. Hepsi aynı
     boyut (58px) ve %20'lik eşit dilimlerin ortasına oturuyor, bu yüzden asla
     çakışmıyorlar. Koşullu olanlar (Kağıt/Dilekçe) yokken yuvası boş kalır. */
  .tycoon-cashout-btn, .tycoon-paper, .tycoon-petition, .tycoon-notebook, .tycoon-phone {
    position: absolute; bottom: 22px; top: auto; z-index: 7;
    width: 58px; height: 58px; border-radius: 18px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    transform: translateX(-50%) !important;
  }
  /* Eşit 5 yuva: %10, %30, %50, %70, %90 */
  .tycoon-cashout-btn { left: 10%; right: auto; padding: 0; gap: 0.1rem; background: rgba(255,255,255,0.06); }
  .tycoon-paper       { left: 30%; }
  .tycoon-petition    { left: 50%; }
  .tycoon-notebook    { left: 70%; }
  .tycoon-phone       { left: 90%; }

  /* Etiketler (butonun altında) + ikon büyüklüğü. Kağıt/Dilekçe'nin kendi
     dekoratif ::before'u ve "!" ::after rozeti olduğundan, onların etiketini
     alt-satır olarak ::before'a değil ayrı kurala veremiyoruz — bu yüzden
     etiketleri sadece her zaman görünür 3 buton (Kasa/Defter/Telefon) için
     yazıyoruz; Kağıt/Dilekçe zaten belirdiğinde kendi ikon/rengiyle tanınıyor. */
  .tycoon-cashout-label { display: none; }
  .tycoon-cashout-btn::after, .tycoon-notebook::after, .tycoon-phone-label {
    position: absolute; bottom: -15px; left: 0; right: 0; text-align: center;
    font-size: 0.58rem; color: #fff; white-space: nowrap;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9); /* ahşap masa üstünde okunur olsun */
  }
  .tycoon-cashout-btn::after { content: "Kasa"; }
  .tycoon-notebook::after { content: "Defter"; }
  .tycoon-phone-label { display: block; transform: none; }
  .tycoon-cashout-btn svg { width: 20px; height: 20px; }
  .tycoon-notebook-spiral { display: none; }
  .tycoon-phone-body { width: 100%; height: 100%; border-radius: 18px; }
  .tycoon-phone-body svg { width: 24px; height: 24px; }
  .tycoon-paper::before, .tycoon-petition::before, .tycoon-paper::after { display: none; }
  .tycoon-paper { background: linear-gradient(165deg, #fdfdf6, #eae8dd); }

  /* SMS balonu — masanın/butonların üstünde, tam genişlik */
  .tycoon-sms-bubble { right: 12px; left: 12px; width: auto; bottom: 160px; }
  .tycoon-sms-bubble::after { display: none; }

  /* Kapat (×) butonu — koyu sahnede net görünsün diye yüksek kontrast */
  #tycoonPlayModalClose {
    background: rgba(0, 0, 0, 0.6); color: #fff; border: 1px solid rgba(255, 255, 255, 0.5);
  }

  /* Telefon/defter/kağıt/dilekçe modalları mobilde neredeyse tam ekran */
  .tycoon-phone-frame { width: min(340px, 94%); height: min(600px, 84vh); }
  .tycoon-paper-sheet, .tycoon-notebook-sheet { width: min(340px, 94%); }
}

/* ==================== Geometry Dash & Wave Attack — MOBİL (YÖN DUYARLI) ====================
   Bu iki canvas oyunu YATAY/geniş tasarlandı; dar bir DİKEY telefonda oynanamaz
   (skor sığmaz, alan dar). Bu yüzden dokunmatik cihazda:
     • DİKEY  -> "telefonu yan çevir" uyarısı (oyun gizli),
     • YATAY  -> oyun tam ekran, oranını koruyarak, oynanabilir.
   Masaüstü (fare = pointer:fine) hiç etkilenmez; orada eski pencere düzeni kalır. */
.game-rotate-prompt { display: none; }

/* Oyun-sonu ekranında skor tablosu — masaüstünde yan tablo zaten var, o yüzden
   sadece dokunmatik/mobilde (yan tablo gizliyken) overlay içinde gösterilir. */
.game-over-board { display: none; }
@media (pointer: coarse) {
  .game-over-board {
    display: block; width: min(340px, 90%); margin: 1.1rem auto 0;
    max-height: 38vh; overflow-y: auto; text-align: left;
    background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border); border-radius: 12px;
  }
  .game-over-board .game-leaderboard-item { padding: 0.55rem 0.9rem; }
}

/* Dokunmatik cihazda oyun modalı tam ekran (hem dikey hem yatay ortak iskelet) */
@media (pointer: coarse) {
  #gamePlayModal, #wavePlayModal { padding: 0; }
  #gamePlayModal .modal-card, #wavePlayModal .modal-card {
    width: 100vw; max-width: none; height: 100vh; height: 100dvh; max-height: none;
    border: none; border-radius: 0; overflow: hidden;
  }
  #gamePlayModal .modal-post-body, #wavePlayModal .modal-post-body {
    padding: 0 !important; height: 100vh; height: 100dvh;
  }
  #gamePlayModal .game-layout, #wavePlayModal .game-layout {
    display: flex; flex-direction: column; height: 100vh; height: 100dvh; gap: 0;
  }
  #gamePlayModal .game-leaderboard-card, #wavePlayModal .game-leaderboard-card { display: none; }
  #gamePlayModal .game-wrap, #wavePlayModal .game-wrap {
    display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0;
    padding: 0; border: none; border-radius: 0; background: transparent;
  }
  #gamePlayModal .game-canvas-wrap, #wavePlayModal .game-canvas-wrap {
    flex: 1 1 auto; min-height: 0; width: 100%; border: none; border-radius: 0;
    display: flex; align-items: center; justify-content: center;
  }
  #gameCanvas, #waveCanvas { width: auto; height: auto; max-width: 100%; max-height: 100%; }
  #gamePlayModal .game-header { display: none; }
  #wavePlayModal .game-header { margin: 0; padding: 8px 12px; justify-content: flex-end; }
  #wavePlayModal .game-header h3, #wavePlayModal .game-header-actions > div { display: none; }
  #wavePlayModal .wave-shop-btn { width: 44px; height: 44px; }
  #gamePlayModalClose, #wavePlayModalClose {
    background: rgba(0, 0, 0, 0.6); color: #fff; border: 1px solid rgba(255, 255, 255, 0.5); z-index: 30;
  }

  .game-rotate-prompt {
    flex: 1 1 auto; flex-direction: column; align-items: center; justify-content: center;
    gap: 1.1rem; text-align: center; padding: 2rem; color: var(--text-dim);
    background: linear-gradient(180deg, #12151d, #0a0c11);
  }
  .game-rotate-prompt svg { width: 64px; height: 64px; color: var(--accent); animation: rotateHint 2.2s ease-in-out infinite; }
  .game-rotate-prompt p { font-size: 1rem; line-height: 1.5; max-width: 260px; }
  .game-rotate-prompt strong { color: var(--text); }
  @keyframes rotateHint { 0%, 55%, 100% { transform: rotate(0deg); } 75%, 90% { transform: rotate(-90deg); } }
}

/* DİKEY (dokunmatik): oyunu gizle, "yan çevir" uyarısını göster */
@media (pointer: coarse) and (orientation: portrait) {
  #gamePlayModal .game-canvas-wrap, #wavePlayModal .game-canvas-wrap,
  #wavePlayModal .game-header { display: none; }
  #gamePlayModal .game-rotate-prompt, #wavePlayModal .game-rotate-prompt { display: flex; }
}

/* YATAY (dokunmatik): uyarı gizli, oyun görünür (yukarıdaki tam-ekran iskeleti devrede) */
@media (pointer: coarse) and (orientation: landscape) {
  #gamePlayModal .game-rotate-prompt, #wavePlayModal .game-rotate-prompt { display: none; }
}

/* ---- Başkan Masası (dokunmatik): Dash/Wave gibi YATAY zorunlu ----
   Dikey ekranda sahne dar kalıp kötü görünüyordu. Bu yüzden dokunmatik cihazda:
     • DİKEY  -> "telefonu yan çevir" uyarısı (sahne gizli, siyah ekran YOK çünkü
                 uyarı gösteriliyor),
     • YATAY  -> sahne tam ekranı doldurur (tüm öğeler #tycoonScene içinde ve %
                 ile konumlu olduğundan orantılı ölçeklenir).
   Masaüstü (pointer:fine) etkilenmez. */
@media (pointer: coarse) {
  #tycoonPlayModal { padding: 0; }
  #tycoonPlayModal .modal-card {
    width: 100vw; max-width: none; height: 100vh; height: 100dvh; max-height: none;
    border: none; border-radius: 0; overflow: hidden;
  }
  #tycoonPlayModal .modal-post-body { padding: 0 !important; height: 100vh; height: 100dvh; }
  #tycoonPlayModal .game-layout { display: block; height: 100vh; height: 100dvh; gap: 0; }
  #tycoonPlayModal .game-leaderboard-card { display: none; }
  #tycoonPlayModal .game-header { display: none; }
  /* game-wrap flex-kolon: DİKEY'de "yan çevir" uyarısı (flex:1) ortalanabilsin.
     YATAY'da uyarı gizli; sahne-wrap AÇIK 100dvh ile dolar (yüzde-zincirine bağlı
     DEĞİL — eski blokta olduğu gibi siyah ekranı bu önler). */
  #tycoonPlayModal .game-wrap {
    display: flex; flex-direction: column; height: 100vh; height: 100dvh;
    padding: 0; border: none; border-radius: 0; background: transparent;
  }
  #tycoonPlayModal .tycoon-scene-wrap {
    min-height: 0; height: 100vh; height: 100dvh; width: 100%; margin: 0;
    border: none; border-radius: 0;
  }
  #tycoonPlayModal .tycoon-scene { width: 100%; height: 100vh; height: 100dvh; }
  #tycoonPlayModalClose {
    background: rgba(0, 0, 0, 0.6); color: #fff; border: 1px solid rgba(255, 255, 255, 0.5); z-index: 30;
  }
}
/* DİKEY (dokunmatik): sahneyi gizle, "yan çevir" uyarısını göster */
@media (pointer: coarse) and (orientation: portrait) {
  #tycoonPlayModal .tycoon-scene-wrap { display: none; }
  #tycoonPlayModal .game-rotate-prompt { display: flex; }
}
/* YATAY (dokunmatik): uyarı gizli, oyun görünür */
@media (pointer: coarse) and (orientation: landscape) {
  #tycoonPlayModal .game-rotate-prompt { display: none; }
}

/* Skor tablosu — YATAY oyunda ekranın sol-üst köşesinde KÜÇÜK, yarı saydam yüzen
   panel. Eskiden mobilde gizliydi; oyun-sonu ekranında altta kalıp sadece 1. isim
   görünüyordu. Artık oyun boyunca köşede durur, telefondan rahat okunur ve canvas
   alanını bozmaz (absolute). */
@media (pointer: coarse) and (orientation: landscape) {
  #gamePlayModal .game-leaderboard-card,
  #wavePlayModal .game-leaderboard-card,
  #tycoonPlayModal .game-leaderboard-card {
    display: block !important;
    position: absolute; top: 8px; left: 8px; z-index: 25;
    width: 124px; max-height: 46vh; overflow-y: auto;
    background: rgba(10, 10, 14, 0.82); border: 1px solid var(--border);
    border-radius: 10px; padding: 0.45rem 0.5rem;
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
    flex: none;
  }
  #gamePlayModal .game-leaderboard-card h3,
  #wavePlayModal .game-leaderboard-card h3,
  #tycoonPlayModal .game-leaderboard-card h3 {
    padding: 0 0 0.35rem; font-size: 0.72rem; gap: 0.3rem;
  }
  #gamePlayModal .game-leaderboard-card h3 svg,
  #wavePlayModal .game-leaderboard-card h3 svg,
  #tycoonPlayModal .game-leaderboard-card h3 svg { width: 14px; height: 14px; }
  #gamePlayModal .game-leaderboard-item,
  #wavePlayModal .game-leaderboard-item,
  #tycoonPlayModal .game-leaderboard-item { padding: 0.25rem 0.15rem; font-size: 0.66rem; }
  /* Yan panel her zaman görünür olduğundan oyun-sonu içindeki tekrar tablo gereksiz */
  .game-over-board { display: none; }
}

/* ---------- Yönetim ---------- */
.admin-subtabs {
  display: flex; gap: 0.6rem; flex-wrap: wrap;
  margin-bottom: 1.8rem;
}
.admin-subtab {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  color: var(--text-dim);
  border-radius: 999px;
  padding: 0.55rem 1.1rem;
  font-size: 0.88rem;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.2s ease;
}
.admin-subtab:hover { color: var(--text); border-color: rgba(255,255,255,0.25); }
.admin-subtab.active { background: #fff; color: #0a0a0c; border-color: #fff; font-weight: 600; }

.admin-panel { display: none; animation: panelFadeIn 0.3s ease both; }
.admin-panel.active { display: block; }
.admin-block h3 { font-family: "Oswald", sans-serif; font-size: 1.2rem; margin-bottom: 1rem; }
.admin-game-block { margin-bottom: 1.8rem; padding-bottom: 1.6rem; border-bottom: 1px solid var(--border); }
.admin-game-block:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.admin-game-block h4 { font-family: "Oswald", sans-serif; font-size: 1.05rem; margin-bottom: 0.7rem; }
.suggestion-row {
  display: flex; align-items: center; gap: 0.8rem;
  padding: 0.7rem 1rem; border: 1px solid var(--border); border-radius: 8px; margin-bottom: 0.5rem;
  background: rgba(255, 255, 255, 0.02);
}
.suggestion-row .raw { color: var(--text-dim); font-size: 0.85rem; flex: 1; }
.suggestion-row input {
  background: var(--bg-alt); border: 1px solid var(--border); border-radius: 6px;
  padding: 0.4rem 0.6rem; color: var(--text); font-family: inherit;
}

.empty-state { color: var(--text-dim); font-size: 0.95rem; padding: 2rem 0; text-align: center; }

/* Kullanıcının yazdığı çok satırlı metinleri (forum gönderisi/yanıt, yarışma
   açıklaması) yazıldığı gibi göster: satır sonları ve boş satırlar korunur,
   uzun kelimeler taşmadan kırılır. escapeHtml zaten HTML'i güvenli kılıyor. */
.rich-text {
  white-space: pre-wrap;
  overflow-wrap: break-word;
  word-break: break-word;
}

/* Forum gönderi detayında sahibe özel Düzenle/Sil aksiyonları */
.post-manage-actions { margin-left: auto; display: flex; gap: 0.5rem; }
.post-manage-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border);
  color: var(--text-dim);
  border-radius: 999px;
  padding: 0.35rem 0.8rem;
  font-size: 0.82rem;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.18s ease;
  white-space: nowrap;
}
.post-manage-btn:hover { color: var(--text); border-color: rgba(255, 255, 255, 0.28); }
.post-manage-btn.danger:hover {
  color: #ff6b6b; border-color: rgba(255, 107, 107, 0.5); background: rgba(255, 107, 107, 0.08);
}

/* ---------- Admin: Yarışma Yönetimi kartları ---------- */
.admin-comp-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.2rem 1.3rem;
  margin-bottom: 1.1rem;
}
.admin-comp-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 1rem; flex-wrap: wrap;
}
.admin-comp-title h4 { font-family: "Oswald", sans-serif; font-size: 1.15rem; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.comp-status { font-size: 0.68rem; font-weight: 700; padding: 0.15rem 0.55rem; border-radius: 999px; letter-spacing: 0.03em; }
.comp-status.on { background: rgba(46, 204, 113, 0.15); color: #43d17a; }
.comp-status.off { background: rgba(255, 255, 255, 0.08); color: var(--text-dim); }
.comp-sub { font-size: 0.8rem; color: var(--text-dim); }
.admin-comp-head-actions { display: flex; gap: 0.45rem; flex-wrap: wrap; }
.comp-danger { color: #ff8080 !important; }
.comp-danger:hover { border-color: rgba(255, 107, 107, 0.5) !important; background: rgba(255, 107, 107, 0.08) !important; }

.admin-comp-edit {
  margin-top: 1rem; padding: 1rem; border: 1px dashed var(--border); border-radius: 10px;
  background: rgba(0, 0, 0, 0.15);
}
.admin-comp-edit-actions { display: flex; gap: 0.5rem; margin-top: 0.4rem; }

.admin-comp-section { margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.admin-comp-label { display: block; font-size: 0.85rem; font-weight: 600; color: var(--text); margin-bottom: 0.6rem; }

.ms-manage-list { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 0.7rem; }
.ms-manage-row {
  display: flex; justify-content: space-between; align-items: center; gap: 0.6rem;
  background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border);
  border-radius: 8px; padding: 0.45rem 0.75rem; font-size: 0.88rem;
}
.ms-manage-row .ms-auto {
  font-size: 0.62rem; background: rgba(0, 242, 255, 0.12); color: var(--accent);
  padding: 0.05rem 0.4rem; border-radius: 999px; margin-left: 0.3rem; vertical-align: middle;
}
.ms-del-btn {
  background: none; border: none; color: var(--text-dim); font-size: 1.3rem; line-height: 1;
  cursor: pointer; padding: 0 0.3rem; transition: color 0.15s ease;
}
.ms-del-btn:hover { color: #ff6b6b; }
.ms-empty { font-size: 0.85rem; color: var(--text-dim); padding: 0.3rem 0; }
.ms-add-row { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
.ms-add-row input[type="date"] { flex: 0 0 auto; }
.ms-add-row input[type="text"] { flex: 1 1 180px; min-width: 140px; }
.ms-add-row input {
  background: var(--bg-alt); border: 1px solid var(--border); border-radius: 8px;
  padding: 0.5rem 0.7rem; color: var(--text); font-family: inherit; font-size: 0.88rem;
}
.admin-comp-assign-row { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }

/* ---------- Takvim: ay navigasyonu ---------- */
.cal-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.7rem; gap: 0.5rem; }
.cal-month-label { font-family: "Oswald", sans-serif; font-size: 1.15rem; font-weight: 600; }
.cal-nav-btn {
  width: 36px; height: 36px; border-radius: 10px;
  background: rgba(255, 255, 255, 0.05); border: 1px solid var(--border); color: var(--text);
  font-size: 1.3rem; line-height: 1; cursor: pointer; transition: all 0.15s ease;
  display: flex; align-items: center; justify-content: center;
}
.cal-nav-btn:hover { background: rgba(255, 255, 255, 0.1); border-color: var(--accent); color: var(--accent); }
.cal-cell.today { outline: 1px solid var(--accent); outline-offset: -1px; border-radius: 6px; color: var(--accent); font-weight: 700; }

@media (max-width: 640px) {
  .panel-header { flex-direction: column; align-items: flex-start; }
  .field-row { grid-template-columns: 1fr; }
}