/* Üye tarafı (Bölüm 8.1) — kayıt/giriş/profil/anasayfa. survey_builder.css'teki
   turkuaz temayla aynı renk paletini kullanır; burada hedef kitle sıradan
   kullanıcılar (muhtemelen telefondan) olduğu için mobil-öncelikli, sade bir
   düzen tercih edildi. */

:root {
  --accent: #14b8a6;
  --accent-dark: #0f9c8c;
  --ink: #1f2937;
  --muted: #6b7280;
  --border: #e5e7eb;
  --bg: #f4f6f8;
  --card: #ffffff;
  --danger: #dc2626;
}

* { box-sizing: border-box; }

html { overflow-x: hidden; }
body {
  margin: 0;
  font-family: -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--ink);
  /* Kullanıcı raporu: Anketler sayfasında mobil web'de içerik SOLA doğru
     kırpılmış görünüyordu (ör. 'Ardahan' -> 'rdahan') — bu, sayfanın kendi
     genişliğini aşan bir öğe yüzünden dokümanın yatay olarak KAYDIRILABİLİR
     hale gelip tarayıcının bir şekilde sağa kaymış/kaydırılmış olmasından
     kaynaklanıyor gibi görünüyor (position:fixed alt çubuğun da bu yatay
     taşma yüzünden görünmez olması muhtemel). Kök nedeni garanti bulmak
     yerine — mobil web uygulamalarında standart bir savunma olarak —
     dokümanın YATAY kaymasını baştan engelliyoruz; hiçbir öğe artık
     viewport genişliğini aşıp sayfayı sağa/sola kaydıramaz. */
  overflow-x: hidden;
}

.uye-topbar {
  display: flex; align-items: center; justify-content: space-between;
  background: #fff; border-bottom: 1px solid var(--border);
  padding: 14px 20px;
}
.uye-brand {
  display: flex; align-items: center; gap: 8px;
  font-weight: 700; font-size: 15px; color: var(--ink); text-decoration: none;
}
/* Marka logosu (secmenlogo.png) — eskiden burada sade bir renkli nokta
   (.logo-dot) vardı, artık gerçek logo görseli kullanılıyor. Saydam zeminli
   versiyon (logo-transparent.png) sayesinde hem açık hem koyu (giriş ekranı
   hero paneli gibi) arkaplanlarda düzgün görünüyor. */
.brand-logo { height: 24px; width: auto; display: inline-block; vertical-align: middle; }
.uye-sidebar-brand .brand-logo { height: 28px; }
.btn-link {
  border: none; background: none; color: var(--accent-dark); font-size: 13px;
  font-weight: 600; cursor: pointer; padding: 0;
}
.btn-link:hover { text-decoration: underline; }

.uye-main {
  max-width: 480px; margin: 0 auto; padding: 28px 16px 60px;
}

/* ---------------------------------------------------------------------
   Giriş yapmış üye düzeni — Facebook tarzı: solda sabit (sticky) profil +
   ikonlu menü sidebar'ı, sağda geniş içerik alanı. Kullanıcı isteği: menüler
   artık üst köşede değil, profilin altında belirgin bir şekilde.
--------------------------------------------------------------------- */
.uye-app-layout {
  display: flex; align-items: flex-start; gap: 24px;
  max-width: 1200px; margin: 0 auto; padding: 24px 20px 60px;
}
.uye-sidebar {
  width: 264px; flex-shrink: 0; position: sticky; top: 24px;
  display: flex; flex-direction: column; gap: 2px;
}
.uye-sidebar-brand { padding: 6px 12px 22px; }

/* Profil satırı + karşısındaki (sağ köşedeki) marka ikonu — bkz. _base.html
   yorumu. Masaüstünde sidebar'ın üstünde, telefonda ekranın en üstündeki
   tek satırda görünür (mobil uygulamadaki HomeScreen üst satırıyla aynı
   yerleşim: solda avatar/isim, sağda sürekli hareket eden logo). */
.uye-sidebar-header-row { display: flex; align-items: center; gap: 4px; }
.uye-sidebar-profile {
  display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit;
  padding: 10px 12px; border-radius: 10px; margin-bottom: 10px; flex: 1; min-width: 0;
}
.uye-sidebar-profile:hover { background: #fff; }
.uye-brand-icon-link { flex-shrink: 0; padding: 0 10px 10px 0; display: flex; align-items: center; }
.uye-brand-icon { height: 30px; width: auto; animation: uye-brand-icon-move 2.4s ease-in-out infinite; }
@keyframes uye-brand-icon-move {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-4px) rotate(8deg); }
}
@media (prefers-reduced-motion: reduce) {
  .uye-brand-icon { animation: none; }
}

/* Mobil arama — kullanıcı isteği: "Mobilde arama ikon olarak kalsın."
   Görünürde sadece ikon (label) duruyor; input width:0/opacity:0 ile
   gizli ama DOM'da var — label'a dokunmak (native <label for> davranışı,
   JS'siz) input'u focuslar, :focus-within genişletip görünür yapar. */
.uye-mobile-search-form {
  align-items: center; gap: 6px; flex-shrink: 0; margin-right: 2px;
  color: var(--muted);
}
.uye-mobile-search-form label { display: flex; cursor: pointer; }
.uye-mobile-search-form input {
  width: 0; opacity: 0; border: none; outline: none; background: none; font-family: inherit;
  font-size: 13px; color: var(--ink); transition: width .15s ease, opacity .15s ease;
}
.uye-mobile-search-form:focus-within input {
  width: 120px; opacity: 1; border-bottom: 1px solid var(--border); padding: 2px 0;
}
.uye-sidebar-avatar {
  width: 42px; height: 42px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
  font-size: 15px; border: none;
}
.uye-sidebar-profile-info { display: flex; flex-direction: column; min-width: 0; }
.uye-sidebar-profile-info strong { font-size: 14.5px; color: var(--ink); line-height: 1.3; }
.uye-sidebar-profile-sub { font-size: 11.5px; color: var(--muted); }

/* Misafir gezinme (kullanıcı isteği: giriş yapmadan da Haberler/Belediye-
   lerden/Etrafım/Anketler görülebilsin) — profil satırının yerine geçen
   giriş/kayıt çağrısı. */
.uye-sidebar-guest-cta {
  align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
}
.uye-sidebar-guest-buttons { display: flex; gap: 6px; flex-shrink: 0; }
.uye-sidebar-guest-btn {
  border: 1px solid var(--accent-dark); color: var(--accent-dark); background: #fff;
  border-radius: 8px; padding: 7px 12px; font-size: 12.5px; font-weight: 600;
  text-decoration: none; white-space: nowrap;
}
.uye-sidebar-guest-btn-primary { background: var(--accent-dark); color: #fff; }

.uye-sidebar-nav { display: flex; flex-direction: column; gap: 2px; }
.uye-sidebar-link {
  display: flex; align-items: center; gap: 13px; padding: 11px 12px; border-radius: 10px;
  color: var(--ink); text-decoration: none; font-size: 14px; font-weight: 600;
  background: none; border: none; width: 100%; text-align: left; cursor: pointer; font-family: inherit;
}
.uye-sidebar-icon { flex-shrink: 0; }
.uye-sidebar-link:hover { background: #fff; }
.uye-sidebar-link.active { background: #fff; color: var(--accent-dark); box-shadow: 0 1px 3px rgba(0, 0, 0, .07); }
.uye-sidebar-link-vip { color: #b45309; }
/* Kullanıcı isteği: "'Yaz' düğmesi görünür" — sidebar'daki diğer linkler
   arasında düz metin değil, dolgu renkli küçük bir buton gibi öne çıksın. */
.uye-sidebar-write-btn { background: var(--accent); color: #fff; margin-top: -4px; }
.uye-sidebar-write-btn:hover { background: var(--accent-dark); color: #fff; }

/* Yazı yazma ekranı — sınırlı zengin metin araç çubuğu (bkz. yazar.js).
   survey_builder.css'teki (admin-only) AYNI kurallar — o dosya bu
   sayfada yüklenmediği için burada tekrarlanıyor, bkz. yazi_duzenle.html. */
.rich-text-toolbar {
  display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
  margin-bottom: 10px; padding: 5px 6px; background: #fafbfc;
  border: 1px solid var(--border); border-radius: 6px;
}
.rt-btn {
  width: 26px; height: 24px; border: 1px solid var(--border); background: #fff;
  border-radius: 4px; font-size: 12px; line-height: 1; color: var(--ink); cursor: pointer;
}
.rt-btn:hover { background: #eef2ff; border-color: var(--accent); }
.rt-sep { width: 1px; height: 18px; background: var(--border); margin: 0 4px; }
.rt-color { width: 18px; height: 18px; border: 1px solid rgba(0,0,0,.15); border-radius: 50%; cursor: pointer; padding: 0; }
.rt-color:hover { outline: 2px solid var(--border); outline-offset: 1px; }

/* Yazı detay sayfası — sorumluluk ibaresi (kullanıcı isteği). */
.uye-article-disclaimer { margin-top: 24px; padding-top: 14px; border-top: 1px solid var(--border); font-size: 12px; color: var(--muted); font-style: italic; }

/* Puanım / Katıldığım Anket / Katılabileceğim Anket — mobil uygulamadaki
   Haberler sekmesinin üst kısmıyla aynı (bkz. _base.html yorumu). */
.uye-header-stats {
  display: flex; margin: 4px 0 14px; padding: 12px 6px; background: var(--card);
  border: 1px solid var(--border); border-radius: 12px;
}
.uye-header-stat { flex: 1; text-align: center; }
.uye-header-stat strong { display: block; font-size: 16px; font-weight: 800; color: var(--ink); }
.uye-header-stat span { display: block; font-size: 11px; color: var(--muted); margin-top: 2px; }

.uye-sidebar-logout-form { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.uye-sidebar-logout { color: var(--danger); }
.uye-sidebar-logout:hover { background: #fef2f2; }

.uye-main-app { flex: 1; min-width: 0; max-width: none; margin: 0; padding: 0; }

/* Mobil web gezinme düzeni (bkz. docs/tasarim/secmennediyor-gezinme-duzeni.jsx)
   bileşenleri — masaüstünde varsayılan olarak GİZLİ, @media (max-width: 900px)
   bloğu bunları görünür yapar (bkz. aşağısı). Bu kural bilerek media query'den
   ÖNCE tanımlı: aksi halde (sonra gelseydi) eşit özgüllükte kaynak sırası
   kazanır ve mobilde de gizli kalırdı. */
.uye-mobile-actions, .uye-mobile-nav, .uye-profile-chevron { display: none; }

@media (max-width: 900px) {
  /* Kullanıcı isteği: telefondan girince ekran mobil UYGULAMAYLA aynı hissi
     versin — üstte sade bir profil satırı, aşağıda sabit (fixed) bir ikon
     çubuğu (uygulamadaki Anketler/Puanlar/Görevler/Tavsiye Et alt sekmesiyle
     birebir aynı tasarım: ikon üstte, etiket altında). Eskiden burada tüm
     sidebar (profil + TÜM linkler) tek bir kutuda üst üste yığılıyordu —
     ekranın yarısını kaplayıp uygulamadan çok farklı görünüyordu. İletişim
     ve Çıkış Yap artık uygulamadaki ProfileScreen'deki gibi Profilim
     sayfasının altında (bkz. profilim.html) — alt çubukta sadece 4 ana
     hedef kalıyor, tıpkı uygulamadaki gibi. */
  /* min-height burada kritik: Android Chrome'un "dinamik adres çubuğu"
     davranışı yüzünden, sayfa içeriği viewport'tan KISA olup kaydırmaya
     hiç gerek kalmadığında (ör. 'Katılabileceğim Anketler' sekmesi 0
     kayıtla açılınca) adres çubuğu daralmıyor ve aşağıdaki position:fixed
     çubuk görünür alanın DIŞINDA/altında konumlanabiliyor — kullanıcı
     raporu: Haberler'de (içerik uzun, kaydırma tetikleniyor) çubuk hep
     düzgün, Anketler'de (varsayılan sekme kısa) kayboluyor. Sayfayı HER
     zaman en az tam viewport yüksekliğinde tutarak bu belirsizliği ortadan
     kaldırıyoruz — 100dvh (destekleyen tarayıcılarda) 100vh'nin daha
     güvenilir hali, üstteki satır eski tarayıcılar için fallback. */
  .uye-app-layout {
    /* KÖK NEDEN (kullanıcı raporu: iPhone 14'te Anketler/Haberler içeriği ve
       görselleri sağdan kırpılıyor): masaüstünde .uye-app-layout'un kendi
       align-items:flex-start'ı satır (row) yönünde DİKEY hizalama için
       (sidebar + içerik üstten hizalı, birbirini GERMESİN diye) doğruydu —
       ama flex-direction burada column'a dönünce çapraz eksen YATAY (width)
       oluyor ve align-items:flex-start ARTIK ".uye-main-app genişliğini
       İÇERİĞİNE göre küçült (shrink-to-fit)" anlamına geliyordu; .uye-sidebar
       kendi width:100%'ü sayesinde etkilenmiyordu ama .uye-main-app'te
       böyle bir genişlik hiç yoktu. Sonuç: sayfa genişliği en geniş SATIRA
       (ör. "Katılabileceğim Anketler" sekme çubuğu ya da bir kartın en uzun
       satırı) göre belirleniyor, o satır viewport'tan uzunsa TÜM sayfa
       (kartlar, görseller dahil) o kadar genişleyip sağdan kırpılıyordu.
       stretch, çapraz eksende (width) her zaman %100 doldurmasını garantiler. */
    align-items: stretch;
    flex-direction: column; gap: 0; max-width: none;
    /* 74px = alt gezinme çubuğunun kendi yüksekliği; artı env(safe-area-
       inset-bottom) (iPhone'da çentik/Dynamic Island altındaki "home
       indicator" güvenli alanı, bkz. viewport-fit=cover notu _base.html'de) —
       yoksa çubuk kendi güvenli-alan payı kadar YUKARI kayıyor ama bu alan
       ayrılmadığı için son kart/görsel çubuğun ARKASINDA kalıp yarım görünüyordu. */
    padding: 0 0 calc(74px + env(safe-area-inset-bottom, 0px));
    min-height: 100vh; min-height: 100dvh;
  }
  .uye-sidebar {
    width: 100%; position: static; flex-direction: column; gap: 0;
    background: var(--card); border-bottom: 1px solid var(--border);
  }
  .uye-sidebar-brand { display: none; }
  .uye-sidebar-profile { margin: 0; padding: 14px 16px; border-radius: 0; }
  .uye-sidebar-profile:hover { background: none; }

  /* Mobil web gezinme düzeni (bkz. docs/tasarim/secmennediyor-gezinme-
     duzeni.jsx): masaüstünün 8 linklik .uye-sidebar-nav'ı VE eski istatistik
     kartı (.uye-header-stats) mobilde artık hiç GÖRÜNMÜYOR — yerlerini
     aşağıdaki .uye-mobile-actions (4 karo) ve .uye-mobile-nav (4 linklik alt
     çubuk) alıyor (bkz. _base.html). Aynı listeyi CSS ile küçültmek yerine
     TAMAMEN ayrı tutmak masaüstünü bu değişiklikten izole ediyor.*/
  .uye-sidebar-nav, .uye-header-stats { display: none; }
  .uye-sidebar-logout-form { display: none; }
  .uye-main-app { padding: 14px; }

  .uye-profile-chevron { display: block; color: var(--muted); width: 18px; height: 18px; flex-shrink: 0; }

  .uye-mobile-actions { display: flex; gap: 7px; padding: 10px 14px 14px; background: var(--card); }
  .uye-mobile-action-tile {
    flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 4px;
    background: var(--bg); border: 1px solid var(--border); border-radius: 12px; padding: 10px 4px 9px;
    text-decoration: none; color: inherit; font-family: inherit;
  }
  .uye-mobile-action-icon {
    width: 30px; height: 30px; border-radius: 9px; background: #ccfbf1; color: var(--accent-dark);
    display: flex; align-items: center; justify-content: center;
  }
  .uye-mobile-action-icon .uye-icon { width: 16px; height: 16px; }
  .uye-mobile-action-tile-amber .uye-mobile-action-icon { background: #fef3c7; color: #b45309; }
  .uye-mobile-action-number { font-size: 15px; font-weight: 800; color: var(--ink); line-height: 1; }
  .uye-mobile-action-tile-amber .uye-mobile-action-number { color: #b45309; }
  .uye-mobile-action-label { font-size: 10.5px; color: var(--muted); text-align: center; line-height: 1.2; }

  .uye-mobile-nav {
    display: flex; position: fixed; left: 0; right: 0; z-index: 50;
    /* env(...) 3. parametre (0) fallback'i eski tarayıcılar için — jestli
       gezinme çubuğu olan telefonlarda alt çubuğun sistem çubuğunun
       ALTINDA/arkasında kalmaması için güvenli alan payı eklenir. */
    bottom: 0; bottom: env(safe-area-inset-bottom, 0);
    background: var(--card); border-top: 1px solid var(--border);
    padding: 4px 2px; box-shadow: 0 -2px 10px rgba(0, 0, 0, .05);
  }
  .uye-mobile-nav-link {
    flex: 1; display: flex; flex-direction: column; gap: 3px; align-items: center; justify-content: center;
    padding: 6px 2px; border-radius: 8px; font-size: 11px; text-align: center;
    text-decoration: none; color: var(--muted); font-family: inherit;
  }
  .uye-mobile-nav-link .uye-icon { width: 21px; height: 21px; }
  .uye-mobile-nav-link.active { color: var(--accent-dark); }
  .uye-mobile-nav-icon-wrap { position: relative; display: inline-flex; }
  .uye-mobile-nav-badge { position: absolute; top: -4px; right: -8px; margin-left: 0; }
}

/* Çizgi ikon seti (bkz. static/anketler/img/icons.svg) — <symbol> tanımları
   kendi stroke/fill'ini TAŞIMIYOR (sprite'a eklenirken kasıtlı çıkarıldı,
   tek yerden renk/kalınlık kontrolü için), o yüzden burada veriliyor. */
.uye-icon {
  width: 22px; height: 22px; display: inline-block; flex-shrink: 0;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

/* ---------------------------------------------------------------------
   Masaüstü üç sütunlu düzen (bkz. docs/tasarim/secmennediyor-masaustu-
   duzen.jsx) — kullanıcı isteği: "Şu an mobil düzen masaüstüne uyarlanmış
   durumda ... sağ yarısı boş." Mevcut mobil breakpoint'e (max-width:900px,
   yukarısı) HİÇ dokunulmuyor; üç sütunlu iskelet SADECE ≥900px'te devreye
   giriyor, 900px altı aynen eski flex/column davranışını koruyor.

   Üst bar SADECE ≥900px'te görünür — mobildeki arama ihtiyacı
   .uye-sidebar-header-row içindeki .uye-mobile-search-form ile karşılanır
   (bkz. _base.html), o da SADECE <900px'te görünür (aşağıda tersi kural). */
.uye-desktop-topbar { display: none; }
.uye-mobile-search-form { display: flex; }
/* <900px: sağ sütun tamamen gizli (Günün Anketi mobilde AYRICA .uye-poll-
   inline olarak akışın başında zaten var — bkz. haberler.html). */
.uye-right-rail { display: none; }

@media (min-width: 900px) {
  .uye-desktop-topbar {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    max-width: 1200px; margin: 0 auto; padding: 16px 20px 0;
  }
  .uye-topbar-search {
    display: flex; align-items: center; gap: 8px; flex: 1; max-width: 420px;
    background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px;
    color: var(--muted);
  }
  .uye-topbar-search .uye-icon { width: 18px; height: 18px; flex-shrink: 0; }
  .uye-topbar-search input {
    border: none; outline: none; background: none; font-size: 13.5px; font-family: inherit;
    color: var(--ink); width: 100%;
  }
  .uye-topbar-guest-buttons { display: flex; gap: 8px; flex-shrink: 0; }

  /* Mobildeki arama ikonu artık gerek yok — tam arama kutusu üst barda. */
  .uye-mobile-search-form { display: none; }

  /* Tablet kademesi (900px–1279px): sidebar + akış yan yana, sağ sütun
     (Günün Anketi/Açık Anketler/Gündem) akışın ALTINA tam genişlikte iner. */
  .uye-app-layout {
    display: grid;
    grid-template-columns: 264px minmax(0, 1fr);
    grid-template-areas: "sidebar feed" "sidebar rail";
    align-items: start; gap: 24px;
  }
  .uye-sidebar { grid-area: sidebar; }
  .uye-main-app { grid-area: feed; }
  .uye-right-rail { grid-area: rail; display: flex; flex-direction: column; gap: 16px; }
  .uye-right-rail:empty { display: none; }
}

@media (min-width: 1280px) {
  /* Masaüstü kademesi: üçüncü (sağ) sütun belirir — 264(sidebar)+~650(feed)+
     300(rail)+boşluklar için max-width 1200px'ten 1320px'e çıkarılıyor. */
  .uye-desktop-topbar, .uye-app-layout { max-width: 1320px; }
  .uye-app-layout {
    grid-template-columns: 264px minmax(0, 1fr) 300px;
    grid-template-areas: "sidebar feed rail";
  }
  .uye-main-app { max-width: 680px; }
  .uye-right-rail { position: sticky; top: 24px; align-self: start; }
}

/* Sağ sütun widget kutuları (Günün Anketi zaten kendi stiline sahip —
   bkz. .daily-poll-card; burası SADECE yeni Açık Anketler/Gündem kutuları
   için — bkz. _rail_acik_anketler.html, _rail_gundem.html). */
.uye-rail-box {
  background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px;
}
.uye-rail-title { font-size: 14px; font-weight: 800; color: var(--ink); margin: 0 0 10px; }
.uye-rail-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.uye-rail-item { display: flex; flex-direction: column; gap: 2px; }
/* Kullanıcı isteği: "Açık anketler/Gündem listesindeki her satır
   tıklanınca ilgili içeriğe gitsin ... fareyle üzerine gelince
   tıklanabilir olduğu belli olsun." — TÜM satır artık tek bir <a>
   (bkz. _rail_acik_anketler.html/_rail_gundem.html), display:flex ile
   başlık solda/meta sağda düzeni korunuyor, hover'da hafif arkaplan. */
.uye-rail-item-link {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  font-size: 13px; font-weight: 600; color: var(--ink); text-decoration: none; line-height: 1.35;
  cursor: pointer; padding: 4px 6px; margin: -4px -6px; border-radius: 6px;
}
.uye-rail-item-link:hover { color: var(--accent-dark); background: var(--bg); }
.uye-rail-item-meta { font-size: 11.5px; color: var(--muted); flex-shrink: 0; }
.uye-rail-more {
  display: block; margin-top: 12px; font-size: 12.5px; font-weight: 700; color: var(--accent-dark);
  text-decoration: none;
}
.uye-rail-more:hover { text-decoration: underline; }

/* Günün Anketi'nin mobil/masaüstü arası konum değişimi (bkz. haberler.html,
   _right_rail.html) — aynı partial iki yerde include edilir, sadece biri
   CSS ile görünür: <900px akışın başında, ≥900px sağ sütunda. */
.uye-poll-inline { }
@media (min-width: 900px) { .uye-poll-inline { display: none; } }

.uye-search-active { font-size: 13px; color: var(--muted); margin: 0 0 12px; }
.uye-search-active a { color: var(--accent-dark); font-weight: 600; }

.uye-messages { list-style: none; padding: 0; margin: 0 0 16px; }
.uye-message {
  padding: 10px 14px; border-radius: 8px; font-size: 13px; margin-bottom: 8px;
  background: #ecfdfb; color: var(--accent-dark); border: 1px solid #99f6e4;
}
.uye-message.error { background: #fef2f2; color: var(--danger); border-color: #fecaca; }

/* Kayıt / giriş / profil tamamlama — ortalanmış kart */
.uye-card {
  background: var(--card); border: 1px solid var(--border); border-radius: 12px;
  padding: 28px 24px;
}
.uye-card-title { font-size: 20px; margin: 0 0 6px; }
.uye-card-sub { font-size: 13px; color: var(--muted); margin: 0 0 22px; }

.uye-field { margin-bottom: 16px; flex: 1; }
.uye-field-row { display: flex; gap: 12px; }
.uye-field-row .uye-field { min-width: 0; }
.uye-field label {
  display: block; font-size: 12px; font-weight: 600; color: var(--muted);
  margin-bottom: 5px;
}
.uye-field-error { color: var(--danger); font-size: 12px; margin: 4px 0 0; }

/* Kullanıcı isteği: "Sayfa Sayfa" doldurma düzeni — tek soru + Geri/İleri. */
.uye-paged-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; }
.uye-paged-progress { font-size: 12px; color: var(--muted); font-weight: 600; }
.uye-paged-buttons { display: flex; gap: 10px; margin-left: auto; }
.uye-paged-buttons .btn-primary, .uye-paged-buttons .btn-secondary { margin-top: 0; }
.uye-paged-inline-notice { margin-top: 10px; }
.uye-invite-notice {
  background: #ecfdfb; color: var(--accent-dark); border: 1px solid #99f6e4;
  border-radius: 8px; padding: 10px 12px; font-size: 13px; margin: 0 0 18px;
}
.uye-form-error {
  color: var(--danger); font-size: 13px; background: #fef2f2; border: 1px solid #fecaca;
  border-radius: 8px; padding: 10px 12px; margin: 0 0 16px;
}
/* Kayıt ekranı — kısa anonimlik bilgilendirmesi + KVKK/Üyelik Sözleşmesi
   onay kutusu (kullanıcı isteği, bkz. kayit.html). */
.uye-kvkk-info-banner {
  background: var(--bg); color: var(--muted); border: 1px solid var(--border);
  border-radius: 8px; padding: 10px 12px; font-size: 12.5px; line-height: 1.5; margin: 0 0 16px;
}
.uye-kvkk-consent label { display: flex; align-items: flex-start; gap: 8px; font-size: 12.5px; color: var(--ink); font-weight: 400; text-transform: none; letter-spacing: normal; cursor: pointer; }
.uye-kvkk-consent input[type="checkbox"] { margin-top: 2px; width: 16px; height: 16px; flex-shrink: 0; accent-color: var(--accent); }
.uye-kvkk-consent a { color: var(--accent-dark); font-weight: 600; }

input[type="text"], input[type="email"], input[type="password"], input[type="number"],
input[type="tel"], select {
  width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px;
  font-size: 14px; color: var(--ink); background: #fff; font-family: inherit;
}
input:focus, select:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(20,184,166,.15);
}
/* Şifre alanları — kullanıcı isteği: şifre gizli olduğu için yanlış
   yazılabiliyordu, bir "göz" ikonuyla şifreyi geçici olarak görünür yapan
   buton eklendi (bkz. password_toggle.js). */
.uye-password-field { position: relative; }
.uye-password-field input { padding-right: 40px; }
.uye-password-toggle {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  border: none; background: none; cursor: pointer; font-size: 16px;
  padding: 6px 8px; line-height: 1;
}

input[type="file"] {
  width: 100%; padding: 8px; border: 1px dashed var(--border); border-radius: 8px;
  font-size: 13px; background: #fafbfc;
}

.uye-avatar-row { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.uye-avatar { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; border: 1px solid var(--border); flex-shrink: 0; }
.uye-avatar-placeholder {
  display: flex; align-items: center; justify-content: center;
  background: var(--accent); color: #fff; font-weight: 700; font-size: 18px;
  text-transform: uppercase;
}

/* Profilim (salt-okunur profil tanıtımı, bkz. profilim.html) — mobil
   uygulamadaki ProfileScreen ile aynı: ortalanmış büyük avatar + isim. */
.uye-profilim-intro { display: flex; flex-direction: column; align-items: center; text-align: center; }
.uye-avatar-lg { width: 104px; height: 104px; font-size: 34px; margin-bottom: 14px; }

.btn-primary {
  display: inline-block; background: var(--accent); color: #fff; border: none; padding: 12px 16px;
  border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; text-decoration: none; text-align: center;
}
.btn-primary:hover { background: var(--accent-dark); color: #fff; }
.btn-block { width: 100%; }
/* Kullanıcı isteği (Sayfa Sayfa doldurma ekranı, bkz. survey_take.js
   initPagedMode): anket bitmeden "Anketi Gönder" butonu basılamaz olsun.
   JS bunu orijinal <button type="submit">'i hidden=true yaparak sağlıyor,
   ama [hidden] ile .btn-primary/.btn-block'un display kuralı CSS'te EŞİT
   özgüllükte (specificity) olduğundan sıradaki (dosyada SONRA gelen)
   .btn-primary kazanıp hidden'ı görmezden alıyor, buton her sayfada
   (İleri butonuyla birlikte) görünür/tıklanabilir kalıyordu — aynı kök
   nedenin AYNI çözümü survey_builder.css .modal-overlay[hidden]'da da var. */
.btn-primary[hidden], .btn-block[hidden] { display: none; }

.btn-secondary {
  display: inline-block; border: 1px solid var(--border); background: #fff; color: var(--ink);
  padding: 8px 14px; border-radius: 8px; font-size: 13px; cursor: pointer; text-decoration: none;
}
.btn-secondary:disabled { color: var(--muted); cursor: not-allowed; }

.uye-alt-action { text-align: center; font-size: 13px; color: var(--muted); margin: 20px 0 0; }
.uye-alt-action a { color: var(--accent-dark); font-weight: 600; text-decoration: none; }
.uye-alt-action a:hover { text-decoration: underline; }

/* Anasayfa (dashboard) */
.uye-dashboard { display: flex; flex-direction: column; gap: 18px; }
.uye-cta-banner {
  display: block; text-align: center; background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  color: #fff; font-weight: 600; font-size: 13px; padding: 12px 16px; border-radius: 10px;
  text-decoration: none;
}
.uye-cta-banner:hover { opacity: .92; }
.uye-panel {
  background: var(--card); border: 1px solid var(--border); border-radius: 12px;
  padding: 20px;
}
.uye-panel-title { font-size: 13px; font-weight: 700; letter-spacing: .03em; color: var(--muted); margin: 0 0 14px; }

.uye-points-total { font-size: 30px; font-weight: 700; color: var(--accent-dark); margin-bottom: 12px; }
.uye-points-total span { font-size: 15px; font-weight: 600; color: var(--muted); }

.uye-ledger-list { list-style: none; margin: 0; padding: 0; }
.uye-ledger-list li {
  display: flex; justify-content: space-between; gap: 10px; padding: 8px 0;
  border-top: 1px solid var(--border); font-size: 13px;
}
.uye-ledger-list li:first-child { border-top: none; }
.uye-ledger-amount { font-weight: 600; color: var(--accent-dark); white-space: nowrap; }

/* Profilim > Bildirimler sekmesi — her satırın etiketi iki satırlı (başlık +
   açıklama) olabildiği için varsayılan .uye-ledger-list satırından farklı
   olarak dikey ortalama yerine üstten hizalanıyor. */
.uye-notification-list li { align-items: center; }
.uye-checkbox-toggle input[type="checkbox"] { width: 20px; height: 20px; cursor: pointer; accent-color: var(--accent); }

.uye-survey-list { display: flex; flex-direction: column; gap: 10px; }
.uye-survey-card {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  border: 1px solid var(--border); border-radius: 10px; padding: 14px;
}
.uye-survey-info h3 { font-size: 14px; margin: 0 0 4px; }
.uye-survey-desc { font-size: 12.5px; color: var(--muted); margin: 0 0 6px; }
.uye-survey-meta { font-size: 12px; color: var(--muted); margin: 0; }

/* Anket kartları — mobil uygulamadaki "haber bannerı" görünümüyle tutarlı:
   solda küçük bir görsel/logo, ortada bilgi, sağda "Ankete Git". */
.uye-survey-card-banner { align-items: center; }
.uye-survey-card-img {
  width: 64px; height: 64px; border-radius: 8px; object-fit: cover; flex-shrink: 0;
  background: var(--bg);
}
.uye-survey-card-img-placeholder {
  display: flex; align-items: center; justify-content: center;
  background: var(--accent); font-size: 24px;
}
.uye-survey-card-banner .uye-survey-info { flex: 1; min-width: 0; }

.uye-empty-hint { color: var(--muted); font-size: 13px; text-align: center; padding: 12px 0; margin: 0; }

/* Facebook profili tarzı üst başlık (Bölüm 9) — kapak + üste taşan avatar +
   isim/konum/meslek + 'Bilgilerimi Güncelle' + özet sayılar şeridi. */
.uye-profile-header {
  background: var(--card); border: 1px solid var(--border); border-radius: 12px;
  overflow: hidden;
}
.uye-profile-cover {
  height: 84px;
  background: linear-gradient(135deg, var(--accent) 0%, #0c8b7d 60%, #0a5f56 100%);
}
.uye-profile-header-body {
  display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap;
  padding: 0 18px 16px;
  margin-top: -34px;
}
.uye-profile-avatar {
  width: 76px; height: 76px; border-radius: 50%; object-fit: cover;
  border: 3px solid var(--card); flex-shrink: 0; background: var(--accent);
  font-size: 24px;
}
.uye-profile-header-info { flex: 1; min-width: 140px; padding-top: 40px; }
.uye-profile-name { font-size: 18px; font-weight: 700; margin: 0 0 4px; }
.uye-vip-badge {
  display: inline-block; background: #f5b301; color: #fff; font-size: 10px; font-weight: 700;
  padding: 2px 7px; border-radius: 999px; vertical-align: middle; margin-left: 4px;
}
/* Kullanıcı isteği: "web tarafında bildirim ayarlarını yapalım" — sidebar
   🔔 satırındaki okunmamış sayısı rozeti (bkz. uye/_base.html). */
.uye-notif-badge {
  display: inline-block; background: var(--danger, #c0392b); color: #fff; font-size: 10px; font-weight: 700;
  padding: 1px 6px; border-radius: 999px; vertical-align: middle; margin-left: 2px; min-width: 8px; text-align: center;
}
.uye-profile-meta { font-size: 12.5px; color: var(--muted); margin: 0; }
.uye-profile-edit-btn { margin-top: 40px; white-space: nowrap; }

.uye-profile-stats {
  display: flex; border-top: 1px solid var(--border);
}
.uye-profile-stat {
  flex: 1; text-align: center; padding: 12px 6px;
  border-left: 1px solid var(--border);
}
.uye-profile-stat:first-child { border-left: none; }
.uye-profile-stat strong { display: block; font-size: 15px; color: var(--accent-dark); }
.uye-profile-stat span { display: block; font-size: 11px; color: var(--muted); margin-top: 2px; }

/* 'Davet Et, Puan Kazan' — belirgin, dikkat çekici kart */
.uye-invite-card {
  background: linear-gradient(135deg, var(--accent) 0%, #0c8b7d 60%, #0a5f56 100%);
  color: #fff; border-radius: 12px; padding: 20px;
}
.uye-invite-title { font-size: 16px; margin: 0 0 10px; }
.uye-invite-copy { font-size: 13px; line-height: 1.6; opacity: .95; margin: 0 0 14px; }
.uye-invite-copy strong { font-weight: 700; }
.uye-invite-link-row { margin-bottom: 12px; }
.uye-invite-link-input {
  width: 100%; padding: 10px 12px; border-radius: 8px; border: none;
  font-size: 12.5px; background: rgba(255, 255, 255, .92); color: var(--ink);
}
.uye-invite-share-row { display: flex; gap: 8px; flex-wrap: wrap; }
.uye-share-btn {
  flex: 1; min-width: 90px; text-align: center; background: rgba(255, 255, 255, .16);
  color: #fff; border: 1px solid rgba(255, 255, 255, .35); border-radius: 8px;
  padding: 9px 10px; font-size: 12.5px; font-weight: 600; text-decoration: none;
}
.uye-share-btn:hover { background: rgba(255, 255, 255, .28); }

/* Puan tahsilatı talep formu */
.uye-redeem-form { display: flex; gap: 8px; margin-bottom: 4px; }
.uye-redeem-form input { flex: 1; }

/* 'Görevlerim' (VIP anketör) — sadece VIP üyelere görünen görev rezervasyon ekranı */
.uye-vip-survey-card {
  border: 1px solid var(--border); border-radius: 10px; padding: 14px; margin-bottom: 12px;
}
.uye-vip-survey-card h3 { font-size: 14px; margin: 0 0 10px; }
.uye-vip-segment-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 8px 0; border-top: 1px solid var(--border);
}
.uye-vip-segment-row:first-of-type { border-top: none; }
.uye-vip-segment-form { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; flex: 1; }
.uye-vip-segment-info { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 160px; font-size: 12.5px; }
.uye-vip-segment-remaining { color: var(--muted); }
.uye-vip-segment-row input[type="number"] { width: 100px; }

/* 'Anket Linki'/Saha Cevabı ekranlarındaki anket logosu — daha önce CSS'i
   eksikti (guest/anket_doldur.html'de kullanılıyordu, hiç stillenmemişti). */
.uye-guest-logo { max-width: 140px; max-height: 90px; border-radius: 8px; display: block; margin-bottom: 14px; object-fit: cover; }

/* Saha Cevabı Gir — "Panele üye olmak ister misiniz?" alt formu */
.uye-recruit-toggle { display: flex; align-items: center; gap: 10px; font-size: 14px; cursor: pointer; }
.uye-recruit-toggle input { width: 18px; height: 18px; accent-color: var(--accent); }
.uye-recruit-fields { margin-top: 16px; }

/* Haberler sayfası — dört sekme + kart listesi */
.uye-haberler-tabs {
  display: flex; gap: 6px; margin-bottom: 18px; border-bottom: 1px solid var(--border);
  overflow-x: auto; max-width: 100%; min-width: 0;
}
.uye-haberler-tab {
  border: none; background: none; padding: 10px 14px; font-size: 13px; font-weight: 600;
  color: var(--muted); cursor: pointer; white-space: nowrap; border-bottom: 2px solid transparent;
  margin-bottom: -1px; font-family: inherit;
}
.uye-haberler-tab.active { color: var(--accent-dark); border-bottom-color: var(--accent); }
.uye-haberler-panel { display: none; }
.uye-haberler-panel.active { display: block; }

.uye-haber-card {
  border: 1px solid var(--border); border-radius: 10px; overflow: hidden; margin-bottom: 12px;
  background: var(--card);
}
/* Kullanıcı isteği: masaüstünde de kart mobildeki gibi DİKEY dursun —
   görsel üstte tam genişlik, başlık/açıklama/beğeni-yorum altında (önceki
   "masaüstünde görsel solda, metin sağda" yatay düzeni geri alındı; bkz.
   git geçmişi). width/max-height artık ≥900px dahil HER genişlikte
   koşulsuz — haber/anket/yazar/istatistik/belediye kartlarının hepsi
   aynı (tek) .uye-haber-img/.uye-haber-body yapısını paylaştığı için bu
   tek kural hepsini birden mobil ile aynı görünüme getiriyor. */
.uye-haber-img { width: 100%; max-height: 260px; object-fit: cover; display: block; }
.uye-haber-body { padding: 16px; }
/* Kullanıcı isteği: ikonun/etiketin (HABER/İSTATİSTİK/YAZAR ADI) yanında
   başlık da aynı satırda — SADECE etiket (uye-haber-kicker-strong) büyük
   harf ve koyu, başlık normal biçimde kalsın diye text-transform ARTIK
   TÜM kicker'a değil sadece -strong span'e uygulanıyor (Yazarlar'da başlık
   da -strong içinde verildiği için o hâlâ büyük harf çıkar). */
/* Kullanıcı isteği: kartta "İçerik türü etiketi · Kaynak ... Tarih" tek
   satırda görünsün — kaynak (models.Announcement.source_name) ve tarih
   bu satıra taşındı (eskiden tarih alt satırdaydı, artık "Devamını Gör →"
   ile aynı satırı paylaşmıyor, bkz. _haberler_liste.html). flex ile
   son öğe (tarih) margin-left:auto'yla sağa itiliyor. */
.uye-haber-kicker {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px;
  font-size: 13px; font-weight: 500; color: var(--ink); margin: 0 0 4px; line-height: 1.4;
}
.uye-haber-kicker-strong { font-weight: 800; color: var(--accent-dark); text-transform: uppercase; letter-spacing: .02em; }
.uye-haber-icon { font-size: 13px; }
.uye-haber-kicker-source { color: var(--muted); font-weight: 500; }
.uye-haber-kicker .uye-haber-date { margin-left: auto; }
.uye-haber-kicker-sub { font-size: 11.5px; color: var(--muted); margin: 0 0 6px; }
.uye-haber-title { font-size: 16px; margin: 0 0 4px; }
.uye-haber-author { font-size: 12.5px; color: var(--muted); font-style: italic; margin: 0 0 6px; }
.uye-haber-text { font-size: 13.5px; line-height: 1.6; margin: 0; }
/* Kullanıcı isteği: gövde metni ilk 2 satırla sınırlansın, taşarsa altında
   tıklanabilir '...devamı' çıksın; tıklayınca (JS: haberler.js
   setupHaberTruncation) tüm metin aşağı doğru açılsın. -webkit-line-clamp
   hedef kitle (mobil Safari/Chrome) için güvenli, ayrı bir fallback
   gerekmiyor. */
.uye-haber-text-wrap { margin: 0 0 10px; }
.uye-haber-text.uye-clamped {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.uye-haber-more {
  display: block; margin-top: 2px; background: none; border: none; padding: 0;
  font-size: 13px; font-weight: 700; color: var(--accent-dark); cursor: pointer; text-align: right; width: 100%;
}
/* Aç-kapa (Instagram gibi): "...devamı"/"daha az" JS ile `hidden` özniteliği
   TAKAS EDİLEREK gösterilir (bkz. haberler.js) — ama .uye-haber-more'un
   kendi `display: block` kuralıyla [hidden]'ın (0,1,0) eşit özgüllüğü var,
   kaynak sırası KAZANIR ve [hidden] SESSİZCE YOK SAYILIR (AYNI kök neden
   .btn-primary[hidden] için de vardı, bkz. o kuralın yorumu) — bu yüzden
   burada AÇIKÇA ezmek gerekiyor.
*/
.uye-haber-more[hidden] { display: none; }
.uye-haber-footer { display: flex; justify-content: space-between; align-items: center; }
.uye-haber-date { font-size: 11.5px; color: var(--muted); }
.uye-haber-link { font-size: 13px; font-weight: 700; color: var(--accent-dark); text-decoration: none; }
.uye-haber-link:hover { text-decoration: underline; }

/* İçeriklere anket bağlantısı — kullanıcı isteği: "Ankete katıl" düğmesi
   "Devamını Gör"den GÖRSEL olarak ayrışsın, "birincil düğme gibi dursun"
   (bkz. _survey_action_button.html). uye-haber-footer zaten flex+space-
   between olduğu için ikisi aynı satırda, aralarında boşlukla durur; iki
   bağlantı da varsa gap ile ayrılsın diye footer'a gap eklendi. */
.uye-haber-footer { gap: 10px; flex-wrap: wrap; }
.uye-haber-link-primary {
  font-size: 12.5px; font-weight: 700; color: #fff; background: var(--accent-dark);
  padding: 6px 14px; border-radius: 20px; text-decoration: none; white-space: nowrap;
  list-style: none; cursor: pointer;
}
.uye-haber-link-primary:hover { opacity: 0.9; }
/* <summary> öğesinin varsayılan üçgen okunu (disclosure triangle) kaldırır
   — misafirken düğme normal bir <a> ile AYNI görünmeli (bkz. o markup). */
.uye-guest-join-details summary::-webkit-details-marker { display: none; }
.uye-guest-join-details summary { display: inline-block; }
.uye-guest-join-box {
  flex-basis: 100%; margin-top: 10px; padding: 12px; border-radius: 10px;
  background: var(--bg); border: 1px solid var(--border); text-align: left;
}
.uye-guest-join-box p { margin: 0 0 8px; font-size: 13px; color: var(--ink); }
.uye-guest-join-box .btn-primary { margin-right: 10px; }

/* Beğeni/yorum/paylaş/kaydet satırı (bkz. static/anketler/js/
   announcement.js, _haberler_liste.html) — kullanıcı isteği: kartta bu
   dört düğme görünmeli, gerçek/kalıcı (veritabanına yazan) etkileşim. */
.uye-haber-actions { display: flex; align-items: center; gap: 18px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); }
.uye-haber-action {
  display: flex; align-items: center; gap: 5px; background: none; border: none; padding: 4px;
  color: var(--muted); font-size: 12.5px; font-weight: 600; cursor: pointer; font-family: inherit;
}
.uye-haber-action .uye-icon { width: 18px; height: 18px; }
.uye-haber-action:hover { color: var(--ink); }
.uye-haber-action.active { color: #e0245e; }
.uye-haber-action.active .uye-icon { fill: currentColor; }
.uye-haber-action[data-action="bookmark"].active { color: var(--accent-dark); }
.uye-haber-action-end { margin-left: auto; }

/* Paylaş düğmesi (SIRA 2) — Web Share API yoksa açılan seçenek listesi
   (bkz. static/anketler/js/share.js). Düğmenin AYNI hizada, hemen
   altında/yanında beliren küçük bir açılır menü — kullanıcı isteği:
   "Desteklemeyen tarayıcılarda seçenek listesi çıksın: WhatsApp, X,
   Facebook, Linki kopyala." */
.uye-share-menu {
  position: absolute; top: 100%; right: 0; z-index: 20; margin-top: 6px;
  background: var(--card); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12); padding: 6px; min-width: 160px;
  display: flex; flex-direction: column;
}
.uye-share-menu-item {
  display: block; width: 100%; text-align: left; padding: 9px 12px; border-radius: 6px;
  background: none; border: none; font-family: inherit; font-size: 13px; font-weight: 600;
  color: var(--ink); text-decoration: none; cursor: pointer; box-sizing: border-box;
}
.uye-share-menu-item:hover { background: var(--bg); }

.uye-haber-comments { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
.uye-haber-comment { font-size: 12.5px; margin: 0 0 8px; line-height: 1.5; }
.uye-haber-comment-date { color: var(--muted); font-size: 11px; }
.uye-haber-comment-form { display: flex; gap: 8px; }
.uye-haber-comment-form input {
  flex: 1; min-width: 0; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px;
  font-family: inherit; font-size: 13px;
}

/* Günlük tek soruluk anket kartı (Haberler akışının içinde + paylaşılabilir
   sonuç sayfası) — bkz. _gunluk_anket_kart.html, daily_poll.js. */
/* Kullanıcı isteği: "Günün anketi kartı da tıklanabilir olsun ...
   fareyle üzerine gelince belli olsun." — bkz. daily_poll.js click-
   delegasyonu (oy/link butonları hariç tüm karta tıklamak detaya gider). */
.daily-poll-card {
  border: 1px solid var(--border); border-radius: 10px; padding: 16px; margin-bottom: 14px; background: var(--card);
  cursor: pointer;
}
.daily-poll-card:hover { border-color: var(--accent); }
.daily-poll-question { font-size: 15px; font-weight: 700; margin: 2px 0 12px; }
.daily-poll-choice-btn {
  display: block; width: 100%; text-align: left; padding: 11px 14px; margin-bottom: 8px;
  border: 1px solid var(--border); border-radius: 8px; background: none; font-size: 14px;
  font-family: inherit; cursor: pointer; color: var(--ink);
}
.daily-poll-choice-btn:hover:not(:disabled) { border-color: var(--accent); }
.daily-poll-choice-btn:disabled { cursor: default; opacity: .6; }
.daily-poll-guest-hint { font-size: 12.5px; color: var(--muted); margin: 4px 0 0; }
.daily-poll-result-row { margin-bottom: 10px; }
.daily-poll-result-label { display: flex; justify-content: space-between; font-size: 13.5px; margin-bottom: 4px; }
.daily-poll-result-bar-track { height: 8px; background: var(--border); border-radius: 4px; overflow: hidden; }
.daily-poll-result-bar-fill { height: 100%; background: var(--accent); }
.daily-poll-result-bar-fill.chosen { background: var(--accent-dark); }
.daily-poll-meta { font-size: 11.5px; color: var(--muted); margin: 10px 0 0; }
/* Küçük hücre koruması (bkz. PrivacySettings.daily_poll_min_participants) —
   yüzde/çubuklar yerine çıkan uyarı metni. */
.daily-poll-insufficient { font-size: 13.5px; color: var(--muted); font-style: italic; margin: 0; }

/* Günlük anket arşivi (İstatistikler sekmesi) */
.uye-daily-poll-archive-filter { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.uye-daily-poll-archive-filter input[type="date"] {
  padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; font-family: inherit; font-size: 13.5px;
}
.uye-daily-poll-archive-list { list-style: none; margin: 0 0 22px; padding: 0; }
.uye-daily-poll-archive-list li {
  display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 0; border-bottom: 1px solid var(--border);
}
.uye-daily-poll-archive-list a { font-size: 14px; font-weight: 600; color: var(--ink); text-decoration: none; }
.uye-daily-poll-archive-list a:hover { color: var(--accent-dark); text-decoration: underline; }

/* Kırılım (cinsiyet/yaş/il/ilçe) sekmeleri — gunluk_anket_detay.html */
.daily-poll-breakdown-tabs { display: flex; gap: 6px; margin: 20px 0 14px; flex-wrap: wrap; }
.daily-poll-breakdown-tab {
  border: 1px solid var(--border); background: none; padding: 7px 12px; border-radius: 999px;
  font-size: 12.5px; font-weight: 600; color: var(--muted); cursor: pointer; font-family: inherit;
}
.daily-poll-breakdown-tab.active { color: var(--accent-dark); border-color: var(--accent); background: var(--bel-petrol-soft, transparent); }
.daily-poll-breakdown-panel { display: none; }
.daily-poll-breakdown-panel.active { display: block; }
.daily-poll-breakdown-filter { margin-bottom: 12px; }
.daily-poll-breakdown-filter select {
  padding: 7px 10px; border: 1px solid var(--border); border-radius: 8px; font-family: inherit; font-size: 13px;
}
.daily-poll-breakdown-group { border-bottom: 1px solid var(--border); padding: 10px 0; }
.daily-poll-breakdown-group-label { font-size: 13.5px; font-weight: 700; margin: 0 0 6px; }
.daily-poll-breakdown-suppressed { font-size: 12.5px; color: var(--muted); font-style: italic; margin: 0; }

/* İletişim sayfası — geçmiş mesajlar + admin yanıtı */
.uye-message-card { border: 1px solid var(--border); border-radius: 10px; padding: 14px; margin-bottom: 10px; }
.uye-message-card h3 { font-size: 14px; margin: 0 0 6px; }
.uye-message-body { font-size: 13.5px; margin: 0 0 8px; }
.uye-message-reply {
  margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border);
  font-size: 13px;
}
.uye-message-reply strong { color: var(--accent-dark); display: block; margin-bottom: 4px; font-size: 12px; }
.uye-message-reply p { margin: 0; }
.uye-message-unreplied { font-size: 12px; color: var(--muted); font-style: italic; margin: 6px 0 0; }

/* Anket doldurma ekranı */
.uye-survey-intro {
  background: #fafbfc; border: 1px solid var(--border); border-radius: 8px;
  padding: 12px 14px; font-size: 13px; white-space: pre-wrap; margin-top: 8px;
}
.uye-question-block { margin-bottom: 14px; }
/* Soru açıklaması — kullanıcı isteği: "soru metninden görsel olarak
   ayrışsın, daha küçük punto ve soluk renkle üstte dursun." Sınırlı
   zengin metin (b/i/u/font) içerebilir (bkz. rich_text.py) — b/i/u
   burada ekstra stil GEREKTİRMEZ (tarayıcı varsayılanı yeterli). */
.uye-question-desc { font-size: 13px; color: var(--muted); line-height: 1.5; margin-bottom: 8px; }
.uye-question-title { font-size: 15px; font-weight: 600; margin-bottom: 12px; }
.uye-req { color: var(--danger); }
.uye-field-hint { font-size: 12px; color: var(--muted); margin: 0 0 10px; }

.uye-question-media { margin-bottom: 14px; }
.uye-question-media img { max-width: 100%; max-height: 280px; border-radius: 8px; display: block; }
.uye-question-media video { max-width: 100%; max-height: 280px; border-radius: 8px; display: block; }

/* Kullanıcı isteği: YouTube linki sayfa içinde (iframe) oynatılsın, thumbnail
   üzerinde bir play tuşu olsun. */
.uye-video-gate { position: relative; }
.uye-video-thumb { position: relative; cursor: pointer; border-radius: 8px; overflow: hidden; }
.uye-video-thumb img { width: 100%; max-height: 280px; object-fit: cover; }
.uye-video-play-btn {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 64px; height: 64px; border-radius: 50%; border: none;
  background: rgba(0, 0, 0, .65); color: #fff; font-size: 22px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; padding-left: 4px;
}
.uye-video-thumb:hover .uye-video-play-btn { background: rgba(0, 0, 0, .8); }
.uye-video-gate iframe { width: 100%; aspect-ratio: 16 / 9; border-radius: 8px; border: none; display: block; }
/* Kullanıcı isteği: video tamamen izlenmeden soru cevaplanamasın uyarısı. */
.uye-video-gate-hint {
  font-size: 12.5px; color: var(--accent-dark); background: #fff8e6; border: 1px solid #ffe4a3;
  border-radius: 8px; padding: 8px 12px; margin: 0 0 14px;
}

.uye-choice-option {
  display: flex; align-items: center; gap: 10px; padding: 10px 0;
  font-size: 14px; font-weight: 400; cursor: pointer; border-top: 1px solid var(--border);
}
.uye-choice-option:first-of-type { border-top: none; }
.uye-choice-option input { accent-color: var(--accent); width: 17px; height: 17px; flex-shrink: 0; }
.uye-choice-img { width: 40px; height: 40px; object-fit: cover; border-radius: 6px; }
/* "Diğer (belirtiniz)" seçilince açılan serbest metin kutusu (bkz.
   survey_take.js initOtherChoiceFields) — disabled iken soluk, seçilince
   normal görünsün diye ayrı stil. */
.uye-other-input {
  width: 100%; margin: -6px 0 8px 27px; padding: 8px 10px; font-size: 13px;
  border: 1px solid var(--border); border-radius: 6px; background: #fff; color: var(--ink);
}
.uye-other-input:disabled { background: #f4f6f8; color: var(--muted); }

.uye-ranking-table { width: 100%; border-collapse: collapse; }
.uye-ranking-table td { padding: 8px 0; border-top: 1px solid var(--border); font-size: 14px; }
.uye-ranking-table tr:first-child td { border-top: none; }
.uye-ranking-table select { width: 70px; }

/* Kullanıcı isteği: Sıralama sorusu artık dropdown değil, ok tuşlarıyla
   yukarı/aşağı taşınan bir liste (bkz. survey_take.js initRankingLists). */
.uye-ranking-list { list-style: none; margin: 0; padding: 0; }
.uye-ranking-item {
  display: flex; align-items: center; gap: 10px; padding: 10px 0;
  border-top: 1px solid var(--border);
}
.uye-ranking-item:first-child { border-top: none; }
.uye-ranking-num {
  width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: #fff;
  font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.uye-ranking-text { flex: 1; font-size: 14px; }
.uye-ranking-arrows { display: flex; flex-direction: column; gap: 2px; }
.uye-ranking-move {
  border: 1px solid var(--border); background: #fff; border-radius: 4px;
  width: 26px; height: 22px; font-size: 11px; line-height: 1; cursor: pointer; color: var(--ink);
}
.uye-ranking-move:disabled { opacity: .3; cursor: default; }
.uye-ranking-move:not(:disabled):hover { border-color: var(--accent); color: var(--accent-dark); }

/* Yıldız derecelendirme — klasik "ters sırada radio + kardeş seçici" CSS hilesi */
.uye-star-rating { display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: 4px; }
.uye-star-rating input { position: absolute; opacity: 0; width: 0; height: 0; }
.uye-star-rating label { font-size: 30px; color: #d1d5db; cursor: pointer; line-height: 1; }
.uye-star-rating input:checked ~ label,
.uye-star-rating label:hover,
.uye-star-rating label:hover ~ label { color: #f5b301; }

.uye-matrix-wrap { overflow-x: auto; }
.uye-matrix-table { border-collapse: collapse; width: 100%; font-size: 13px; }
.uye-matrix-table th, .uye-matrix-table td { border: 1px solid var(--border); padding: 8px; text-align: center; white-space: nowrap; }
.uye-matrix-table th:first-child, .uye-matrix-table td:first-child { text-align: left; white-space: normal; }
.uye-matrix-table input, .uye-matrix-table select { width: 100px; padding: 6px 8px; }
.uye-matrix-table input:disabled, .uye-matrix-table select:disabled { background: #f4f6f8; color: var(--muted); }
/* Likert ölçeği (satır=ifade, sütun=katılım düzeyi) tek seçimli radio
   grubu — yukarıdaki genel matris input'u width:100px'i EZER, aksi halde
   yuvarlak radyo butonu tuhaf bir dikdörtgene döner. */
.uye-likert-table input[type="radio"] { width: 18px; height: 18px; accent-color: var(--accent); padding: 0; }

@media (min-width: 640px) {
  .uye-main { max-width: 620px; padding-top: 44px; }
}

/* ---------------------------------------------------------------------
   Üye giriş ekranı — iki sütunlu tanıtım + form düzeni
   (bkz. tasarim-referans/1-admin.png, 2-admin.png). Mobilde tanıtım paneli
   gizlenir, öncelik forma verilir; masaüstünde yan yana görünür.
--------------------------------------------------------------------- */
.uye-auth-body { margin: 0; }
.uye-auth-layout { display: flex; min-height: 100vh; }

.uye-auth-hero {
  display: none; flex: 1.15; position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--accent) 0%, #0c8b7d 55%, #0a5f56 100%);
  color: #fff; padding: 48px;
}
.uye-auth-hero::before, .uye-auth-hero::after {
  content: ''; position: absolute; border-radius: 50%; background: rgba(255, 255, 255, .08);
}
.uye-auth-hero::before { width: 340px; height: 340px; top: -100px; right: -100px; }
.uye-auth-hero::after { width: 240px; height: 240px; bottom: -70px; left: -50px; }
.uye-auth-hero-inner { position: relative; max-width: 420px; margin: 0 auto; padding-top: 7vh; }

.uye-auth-brand { color: #fff; font-size: 17px; margin-bottom: 52px; }
.uye-auth-brand-mobile { margin-bottom: 22px; }

.uye-auth-headline { font-size: 30px; line-height: 1.28; margin: 0 0 16px; font-weight: 700; }
.uye-auth-sub { font-size: 14px; opacity: .92; line-height: 1.65; margin: 0 0 40px; }

.uye-auth-features { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 24px; }
.uye-auth-features li { display: flex; gap: 14px; align-items: flex-start; }
.uye-auth-feature-icon {
  width: 42px; height: 42px; border-radius: 11px; background: rgba(255, 255, 255, .16);
  display: flex; align-items: center; justify-content: center; font-size: 19px; flex-shrink: 0;
}
.uye-auth-features strong { font-size: 14px; display: block; margin-bottom: 3px; }
.uye-auth-features p { font-size: 12.5px; opacity: .85; margin: 0; line-height: 1.55; }

.uye-auth-form-side {
  flex: 1; display: flex; align-items: center; justify-content: center;
  padding: 32px 20px; background: var(--bg); min-height: 100vh;
}
.uye-auth-form-inner { width: 100%; max-width: 380px; }
.uye-auth-card { padding: 32px 28px; }

@media (min-width: 900px) {
  .uye-auth-hero { display: block; }
  .uye-auth-brand-mobile { display: none; }
}

/* ---------------------------------------------------------------------
   "Belediyelerden" sekmesi (şartname FAZ 1.4). Görsel referans: docs/
   tasarim/secmennediyor-belediyelerden.jsx (maket) — sitenin geri kalanı
   turkuaz --accent paletini kullanırken, bu maket YENİ bir petrol/amber
   paleti öneriyor. O paleti SADECE bu sekmeye özgü bileşenlerde (kaynak
   logosu, bölüm başlıkları, takip butonu, kalp rengi) kullanıyoruz — genel
   --accent DEĞİŞMİYOR, mevcut sayfalar (Haberler, Anketler vb.) etkilenmez.
--------------------------------------------------------------------- */
:root {
  --bel-petrol: #0F5C5E;
  --bel-petrol-soft: #E2EDEC;
  --bel-amber: #C77B0A;
  --bel-amber-soft: #FBF0DC;
}

.uye-bel-filter-bar { margin-bottom: 16px; }
.uye-bel-chip {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  border: 1px solid var(--bel-petrol); background: var(--bel-petrol-soft); color: var(--bel-petrol);
  border-radius: 20px; padding: 7px 14px; font-size: 13.5px; font-weight: 600;
  text-decoration: none; margin-bottom: 10px;
}
.uye-bel-filter-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.uye-bel-filter-form select { flex: 1; min-width: 120px; }
.uye-bel-filter-form button {
  border: 1px solid var(--border); background: var(--card); color: var(--muted);
  border-radius: 9px; padding: 10px 14px; font-size: 13.5px; cursor: pointer; font-family: inherit;
}
.uye-bel-clear-filter { font-size: 12.5px; color: var(--muted); margin-left: 4px; }

.uye-bel-section-head { padding: 18px 2px 8px; }
.uye-bel-section-title { font-size: 14.5px; font-weight: 700; color: var(--ink); }
.uye-bel-section-note { font-size: 12.5px; color: var(--muted); margin-top: 2px; }

.uye-bel-card-top { display: flex; gap: 11px; align-items: flex-start; padding: 15px 16px 0; }
.uye-bel-logo {
  width: 40px; height: 40px; border-radius: 9px; flex-shrink: 0;
  background: var(--bel-petrol-soft); color: var(--bel-petrol);
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px;
}
.uye-bel-logo-amber { background: var(--bel-amber-soft); color: var(--bel-amber); }
.uye-bel-name { font-size: 14.5px; font-weight: 700; color: var(--ink); }
.uye-bel-meta { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.uye-bel-card .uye-haber-body { padding: 11px 16px 15px; }
.uye-bel-card .uye-haber-title { font-size: 16px; margin: 0 0 6px; font-weight: 700; }
.uye-bel-source-link { font-size: 13px; font-weight: 600; color: var(--bel-petrol); text-decoration: none; display: inline-block; margin-bottom: 12px; }
.uye-bel-source-link:hover { text-decoration: underline; }

.uye-bel-actions { display: flex; align-items: center; gap: 20px; }
.uye-bel-action-btn {
  display: flex; align-items: center; gap: 6px; background: none; border: none; padding: 0;
  cursor: pointer; font-size: 13.5px; color: var(--muted); text-decoration: none; font-family: inherit;
}
.uye-bel-action-btn.liked { color: #C0392B; font-weight: 700; }

.uye-bel-follow-row {
  display: flex; align-items: center; gap: 11px; padding: 11px 16px;
  background: var(--card); border: 1px solid var(--border); border-radius: 10px; margin-bottom: 8px;
}
.uye-bel-follow-info { flex: 1; min-width: 0; }
.uye-bel-follow-name { font-size: 14.5px; color: var(--ink); }
.uye-bel-follow-loc { font-size: 12.5px; color: var(--muted); margin-top: 1px; }
.uye-bel-follow-btn {
  display: flex; align-items: center; gap: 5px; cursor: pointer; font-family: inherit;
  border: 1px solid var(--border); background: var(--card); color: var(--muted);
  border-radius: 8px; padding: 8px 13px; font-size: 13px;
}
.uye-bel-follow-btn.following { border-color: var(--bel-petrol); background: var(--bel-petrol-soft); color: var(--bel-petrol); }

.uye-bel-empty { padding: 30px 16px; text-align: center; color: var(--muted); font-size: 14px; }

/* Belediye hizmet karnesi — "Belediyeler" dizini + karne detay sayfası */
.uye-bel-own-card {
  display: flex; align-items: center; gap: 12px; padding: 14px 16px; margin-bottom: 10px;
  background: var(--bel-petrol-soft, var(--card)); border: 1px solid var(--bel-petrol, var(--border));
  border-radius: 10px; text-decoration: none; color: inherit;
}
.scorecard-score-big { font-size: 40px; font-weight: 800; color: var(--accent-dark); line-height: 1; }
.scorecard-score-of10 { font-size: 15px; color: var(--muted); }
.scorecard-change { font-size: 13.5px; font-weight: 700; margin-top: 6px; }
.scorecard-change.up { color: #1E8E3E; }
.scorecard-change.down { color: #C0392B; }
.scorecard-threshold-note { font-size: 13px; color: var(--muted); padding: 16px 0; text-align: center; }
.scorecard-breakdown-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 13.5px; }
.scorecard-breakdown-row:last-child { border-bottom: none; }
.scorecard-eval-question { margin-bottom: 18px; }
.scorecard-eval-label { font-size: 14px; font-weight: 600; margin-bottom: 8px; }
.scorecard-eval-scale { display: flex; gap: 5px; flex-wrap: wrap; }
.scorecard-eval-scale label {
  flex: 1; min-width: 30px; text-align: center; border: 1px solid var(--border); border-radius: 6px;
  padding: 8px 0; font-size: 13px; cursor: pointer; user-select: none;
}
.scorecard-eval-scale input { position: absolute; opacity: 0; pointer-events: none; }
.scorecard-eval-scale label:has(input:checked) { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 700; }

/* Haber detay sayfası — yorumlar */
.uye-bel-comment { border-bottom: 1px solid var(--border); padding: 10px 0; }
.uye-bel-comment:last-child { border-bottom: none; }
.uye-bel-comment-author { font-size: 13px; font-weight: 700; color: var(--ink); }
.uye-bel-comment-date { font-size: 11.5px; color: var(--muted); margin-left: 6px; font-weight: 400; }
.uye-bel-comment-body { font-size: 13.5px; color: var(--ink); margin: 4px 0 0; white-space: pre-wrap; }

/* "Etrafım" yer tutucu sayfası (bkz. member_views.etrafim_view) */
.uye-empty-placeholder {
  text-align: center; padding: 60px 20px; color: var(--muted);
}
.uye-empty-placeholder-icon {
  width: 40px; height: 40px; color: var(--accent-dark); margin-bottom: 14px;
}

/* Footer — kullanıcı isteği: "Footer'da bu sayfalara bağlantı olsun, tüm
   sayfalarda görünsün." (bkz. anketler/_footer.html). uye/_base.html'de
   .uye-app-layout/.uye-main'in DIŞINDA, body'nin en altında. */
.uye-footer {
  max-width: 1320px; margin: 24px auto 0; padding: 18px 20px 28px;
  border-top: 1px solid var(--border); text-align: center;
}
.uye-footer-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; margin-bottom: 8px; }
.uye-footer-nav a { font-size: 12.5px; color: var(--muted); text-decoration: none; }
.uye-footer-nav a:hover { color: var(--accent-dark); text-decoration: underline; }
.uye-footer-copy { font-size: 11.5px; color: var(--muted); margin: 0; }