/* ═══ ZOOM ENGELLEME (mobil web) ═══
 * Viewport meta'sı user-scalable=no ile pinch zoom kapatıldı.
 * Aşağıdaki kurallar iOS double-tap zoom ve auto-zoom'u da engeller. */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    touch-action: pan-x pan-y; /* pinch-zoom gesture'ı disabled */
}
/* iOS Safari: input/textarea/select font-size < 16px iken otomatik zoom eder.
 * Tüm form elementlerinin minimum 16px olduğundan emin ol. */
@media (max-width: 900px) {
    input[type="text"],
    input[type="search"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="tel"],
    input[type="url"],
    input[type="date"],
    input[type="datetime-local"],
    input[type="month"],
    input[type="week"],
    input[type="time"],
    select,
    textarea {
        font-size: 16px !important;
    }
}

/* frontallob — Modül Tasarım Sistemi
 * Mobile uygulamadaki Apple News tarzı görünümü web'e taşır.
 * Tüm modüller bu sınıfları kullanarak tek tip dil oluşturur.
 *
 * Bileşenler:
 *   .fl-page             — sayfa container (max 1100px center)
 *   .fl-hero             — gradient hero blok (eyebrow + title + subtitle)
 *   .fl-eyebrow          — küçük letterspaced rozet
 *   .fl-hero-title       — 36px ana başlık
 *   .fl-hero-subtitle    — 16px italic alt yazı
 *   .fl-fab              — sağ üst floating action button
 *   .fl-section          — bölüm container (settings benzeri kart liste)
 *   .fl-section-label    — uppercase küçük etiket
 *   .fl-card             — soft kart (accent border ile)
 *   .fl-action-tile      — ikon + başlık + alt yazı + chevron şeklinde row
 *   .fl-pill             — pill chip (filled/outline)
 *   .fl-chip-strip       — yatay scroll chip dizisi
 *   .fl-date-strip       — yatay tarih şeridi
 * ===================================================================== */

:root {
  --fl-accent: #6366F1;          /* indigo */
  --fl-accent-strong: #4F46E5;
  --fl-text: #0F172A;
  --fl-text-2: #475569;
  --fl-text-3: #94A3B8;
  --fl-text-muted: #cbd5e1;
  --fl-card-bg: #FFFFFF;
  --fl-page-bg: #F2F2F7;
  --fl-border: rgba(15, 23, 42, .08);
  --fl-radius: 14px;
  --fl-radius-sm: 10px;
}
.dark-mode {
  --fl-text: #FFFFFF;
  --fl-text-2: #cbd5e1;
  --fl-text-3: #94a3b8;
  --fl-text-muted: #64748b;
  --fl-card-bg: #1C1C1E;
  /* body bg #121212 ile aynı — toolbar/akış zemini eşleşsin, ton farkı oluşmasın */
  --fl-page-bg: #121212;
  --fl-border: rgba(255, 255, 255, .08);
}

/* ─── Page container ─────────────────────────────────────────────── */
.fl-page {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 0 80px;
  color: var(--fl-text);
}

/* ─── Hero ───────────────────────────────────────────────────────── */
.fl-hero {
  position: relative;
  padding: 40px 32px 32px;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--fl-hero-accent, var(--fl-accent)) 18%, transparent),
    color-mix(in srgb, var(--fl-hero-accent, var(--fl-accent)) 4%, transparent) 55%,
    transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--fl-hero-accent, var(--fl-accent)) 12%, transparent);
}
.dark-mode .fl-hero {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--fl-hero-accent, var(--fl-accent)) 28%, transparent),
    color-mix(in srgb, var(--fl-hero-accent, var(--fl-accent)) 10%, transparent) 55%,
    transparent);
}

.fl-eyebrow {
  display: inline-block;
  padding: 5px 12px;
  background: color-mix(in srgb, var(--fl-hero-accent, var(--fl-accent)) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--fl-hero-accent, var(--fl-accent)) 30%, transparent);
  border-radius: 8px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: var(--fl-hero-accent, var(--fl-accent));
}

.fl-hero-title {
  font-size: 36px;
  font-weight: 900;
  letter-spacing: -0.7px;
  margin: 16px 0 14px;
  line-height: 1.12;
  color: var(--fl-text);
}

.fl-hero-subtitle {
  font-size: 16px;
  font-style: italic;
  color: var(--fl-text-2);
  max-width: 720px;
  line-height: 1.5;
  margin: 0;
}

/* ─── Floating action button (sağ üst) ───────────────────────────── */
.fl-fab {
  position: absolute;
  top: 28px;
  right: 32px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  border: none;
  border-radius: 22px;
  background: linear-gradient(135deg, var(--fl-accent), var(--fl-accent-strong));
  color: #fff;
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--fl-accent) 35%, transparent);
  transition: transform .15s;
}
.fl-fab:hover { transform: translateY(-1px); }
.fl-fab:disabled { opacity: .6; cursor: wait; }

/* ─── Section ───────────────────────────────────────────────────── */
.fl-section {
  padding: 0 32px;
  margin-top: 18px;
}

.fl-section-label {
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.4px;
  color: var(--fl-text-3);
  text-transform: uppercase;
  padding: 4px 4px 10px;
}

/* ─── Card ──────────────────────────────────────────────────────── */
.fl-card {
  background: var(--fl-card-bg);
  border: 1px solid var(--fl-border);
  border-radius: var(--fl-radius);
  padding: 14px 16px;
  margin-bottom: 10px;
}
.fl-card.fl-card-accent {
  border-color: color-mix(in srgb, var(--fl-card-accent, var(--fl-accent)) 25%, transparent);
}
.fl-card.fl-clickable {
  cursor: pointer;
  transition: transform .12s, box-shadow .12s, background .12s;
}
.fl-card.fl-clickable:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0,0,0,.06);
}

/* ─── Action tile (icon + text + chevron row) ────────────────────── */
.fl-action-tile {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 8px;
  cursor: pointer;
  border-radius: var(--fl-radius-sm);
  transition: background .12s;
}
.fl-action-tile:hover {
  background: color-mix(in srgb, var(--fl-text) 4%, transparent);
}
.fl-action-tile + .fl-action-tile {
  border-top: 1px solid var(--fl-border);
}
.fl-action-tile-icon {
  width: 38px;
  height: 38px;
  border-radius: var(--fl-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.fl-action-tile-body {
  flex: 1;
  min-width: 0;
}
.fl-action-tile-label {
  font-size: 14px;
  font-weight: 700;
  color: var(--fl-text);
  margin: 0;
  letter-spacing: -0.1px;
}
.fl-action-tile-desc {
  font-size: 12px;
  color: var(--fl-text-2);
  margin: 2px 0 0;
  line-height: 1.35;
}
.fl-action-tile-arrow {
  color: var(--fl-text-3);
  font-size: 18px;
  flex-shrink: 0;
}

/* ─── Pill / Chip ───────────────────────────────────────────────── */
.fl-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 20px;
  background: var(--fl-card-bg);
  border: 1px solid var(--fl-border);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--fl-text-2);
  cursor: pointer;
  transition: all .12s;
}
.fl-pill:hover {
  border-color: color-mix(in srgb, var(--fl-accent) 30%, var(--fl-border));
}
.fl-pill.on {
  background: var(--fl-accent);
  color: #fff;
  border-color: var(--fl-accent);
}

/* ─── Chip strip (yatay scroll) ─────────────────────────────────── */
.fl-chip-strip {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 4px 32px 14px;
  scroll-snap-type: x mandatory;
}
.fl-chip-strip::-webkit-scrollbar { display: none; }
.fl-chip-strip { scrollbar-width: none; }
.fl-chip-strip > * { scroll-snap-align: start; flex-shrink: 0; }

/* ─── Empty state ───────────────────────────────────────────────── */
.fl-empty {
  padding: 60px 32px;
  text-align: center;
  color: var(--fl-text-3);
}
.fl-empty-icon {
  font-size: 56px;
  margin-bottom: 12px;
  opacity: .55;
}
.fl-empty-title {
  font-size: 17px;
  font-weight: 800;
  color: var(--fl-text-2);
  margin-bottom: 8px;
}

/* ─── Badge ─────────────────────────────────────────────────────── */
.fl-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.3px;
}
.fl-badge.warn { background: #fef3c7; color: #92400e; }
.fl-badge.ok   { background: #d1fae5; color: #065f46; }
.fl-badge.danger { background: #fee2e2; color: #991b1b; }
.fl-badge.info { background: #dbeafe; color: #1e40af; }

/* ═══════════════════════════════════════════════════════════════════ */
/* Mevcut kart sınıflarında padding/gap sıkılaştırması                 */
/* Mobil uygulama görünümüne yakınlaştırır                              */
/* ═══════════════════════════════════════════════════════════════════ */
.art-cards-grid {
  gap: 14px !important;
  padding: 0 !important;
}
@media (min-width: 900px) {
  .art-cards-grid { gap: 16px !important; }
}
@media (min-width: 1280px) {
  .art-cards-grid { gap: 18px !important; }
}

.fn-card {
  border-radius: 14px !important;
}
.fn-card-body {
  padding: 14px 16px 16px !important;
  gap: 6px !important;
}
.fn-card-visual { padding: 14px !important; }
.fn-card-title { font-size: 16.5px !important; line-height: 1.28 !important; }
.fn-card-summary { font-size: 13px !important; line-height: 1.5 !important; -webkit-line-clamp: 2 !important; }
.fn-card-meta { font-size: 11px !important; padding-top: 4px !important; }

@media (min-width: 900px) {
  .fn-card--hero .fn-card-visual { padding: 22px !important; min-height: 240px !important; }
  .fn-card--hero .fn-card-body { padding: 22px 26px !important; gap: 10px !important; }
  .fn-card--hero .fn-card-title { font-size: 22px !important; -webkit-line-clamp: 3 !important; }
  .fn-card--hero .fn-card-summary { font-size: 14px !important; -webkit-line-clamp: 3 !important; }
}

/* Ana sayfa: home-latest kartları en alta yapışsın (masaüstü) */
.home-landing { display: flex !important; flex-direction: column !important; min-height: 100% !important; }
.home-latest { margin-top: auto !important; padding-top: 18px !important; }
.home-latest-row { gap: 10px !important; padding: 4px 0 8px !important; }

/* Mobilde son eklenenler — alt menünün üstünde fixed bant */
@media (max-width: 768px) {
  .home-latest {
    position: fixed !important;
    left: 0; right: 0;
    bottom: 80px !important;
    z-index: 90;
    padding: 4px 6px 6px !important;
    margin: 0 !important;
    background: linear-gradient(to top,
      var(--fl-page-bg) 35%,
      color-mix(in srgb, var(--fl-page-bg) 75%, transparent) 80%,
      transparent);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }
  .home-latest-head {
    font-size: 10px !important;
    padding: 2px 4px 3px !important;
    color: var(--fl-text-3) !important;
    letter-spacing: 0.4px !important;
  }
  .home-latest-row { gap: 6px !important; padding: 0 !important; }
  .home-latest-card {
    flex: 0 0 148px !important;
    padding: 8px 10px !important;
    border-radius: 11px !important;
    background: var(--fl-card-bg) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  }
  .home-latest-card .home-latest-title {
    font-size: 14px !important;
    line-height: 1.3 !important;
    /* Makale başlığı tam görünsün — clamp kaldırıldı */
    display: block !important;
    -webkit-line-clamp: unset !important;
    -webkit-box-orient: unset !important;
    overflow: visible !important;
    font-weight: 700 !important;
  }
  .home-latest-card { height: auto !important; }
  .home-latest-card .home-latest-meta { font-size: 12.5px !important; }
  .home-latest-cat { font-size: 11px !important; letter-spacing: 1px !important; font-weight: 800 !important; }
  .home-latest-card--ai { flex: 0 0 220px !important; }
  .home-latest-preview {
    font-size: 12px !important;
    line-height: 1.35 !important;
    color: rgba(15, 23, 42, 0.62) !important;
    margin: 4px 0 6px !important;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  /* home-landing'in alt boşluğu — fixed bar arkasında içerik kalmasın */
  .home-landing { padding-bottom: 240px !important; min-height: auto !important; }
}
.home-latest-card {
  flex: 0 0 220px !important;
  padding: 12px 14px !important;
  border-radius: 12px !important;
  border: 1px solid var(--fl-border) !important;
}
.home-latest-card .home-latest-title { font-size: 13px !important; line-height: 1.35 !important; }
.home-latest-card .home-latest-meta { font-size: 11px !important; }
.home-latest-cat { font-size: 10px !important; letter-spacing: 1px !important; }
.home-latest-head {
  font-size: 11.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.4px !important;
  text-transform: uppercase !important;
  color: var(--fl-text-3) !important;
  padding: 8px 4px !important;
}

/* Akış sayfası dış margin'i daralt — mobil'de neredeyse sıfır */
.tw-feed { max-width: 1100px; margin: 0 auto; padding: 0 16px; }
.tw-detail-page { padding: 16px !important; }

/* Yuvarlak ikon butonu — daily summaries + makale header'da kullanılır */
.ds-icon-btn {
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid var(--fl-border);
  background: var(--fl-card-bg);
  color: var(--fl-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
  transition: all .15s;
}
.ds-icon-btn:hover { color: var(--fl-accent); border-color: var(--fl-accent); }
.ds-icon-btn:disabled { opacity: .4; cursor: not-allowed; }
.ds-icon-btn svg { display: block; }

/* ═══════════════════════════════════════════════════════════════════ */
/* Makale detay sayfası — Apple News tarzı sticky pill header          */
/* ═══════════════════════════════════════════════════════════════════ */
.art-news-header {
  position: sticky;
  top: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 8px 12px;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.art-news-header.expanded {
  background: rgba(255, 255, 255, 0.98);
  border-bottom-color: rgba(0, 0, 0, 0.08);
}
.dark-mode .art-news-header {
  background: rgba(28, 28, 30, 0.92);
}
.dark-mode .art-news-header.expanded {
  background: rgba(28, 28, 30, 0.98);
  border-bottom-color: rgba(255, 255, 255, 0.08);
}
/* Makale arkaplan rengi — sayfa + parent'lar dahil tek beyaz */
.art-page,
.art-page .art-main-card.reading-card,
.art-page .reading-card {
  background: #FFFFFF !important;
  border: none !important;
  box-shadow: none !important;
}
.dark-mode .art-page,
.dark-mode .art-page .art-main-card.reading-card,
.dark-mode .art-page .reading-card {
  background: #1C1C1E !important;
}
/* Art-page açıkken üst içerik kabı (tw-main, body) da beyaz — header üstünde
 * gri/farklı renk bandı görünmesin. is-reading-page JS-class :has() fallback. */
body:has(.art-page), body.is-reading-page,
body:has(.art-page) .tw-main, body.is-reading-page .tw-main,
body:has(.art-page) .tw-main.tw-main-full, body.is-reading-page .tw-main.tw-main-full {
  background: #FFFFFF !important;
}
.dark-mode body:has(.art-page), .dark-mode body.is-reading-page,
.dark-mode body:has(.art-page) .tw-main, .dark-mode body.is-reading-page .tw-main,
.dark-mode body:has(.art-page) .tw-main.tw-main-full, .dark-mode body.is-reading-page .tw-main.tw-main-full {
  background: #1C1C1E !important;
}
/* Header sabit (fixed), içerik altında scroll — sayfa kabına padding ver,
 * tw-main'e dokunma (başka sayfaları bozmayalım) */
.art-page, .ds-page {
  padding-top: 88px !important;
}
@media (max-width: 768px) {
  .art-page, .ds-page {
    padding-top: 76px !important;
  }
}

/* Fixed header (makale/özet detay) */
body:has(.art-page) .art-news-header,
body.is-reading-page .art-news-header {
  position: fixed !important;
  top: 0 !important; left: 0 !important; right: 0 !important;
  width: 100% !important;
  margin: 0 !important;
  border-radius: 0 !important;
  z-index: 100 !important;
  background: #FFFFFF !important;
  padding-top: 14px !important;
  padding-bottom: 8px !important;
  box-shadow: none !important;
}
.dark-mode body:has(.art-page) .art-news-header,
.dark-mode body.is-reading-page .art-news-header {
  background: #1C1C1E !important;
  box-shadow: none !important;
}

/* Fixed header (günlük özetler liste — .ds-top-bar) */
body:has(.ds-page) .ds-top-bar,
body.is-reading-page .ds-top-bar {
  position: fixed !important;
  top: 0 !important; left: 0 !important; right: 0 !important;
  width: 100% !important;
  margin: 0 !important;
  z-index: 100 !important;
  background: #FFFFFF !important;
  padding: 14px 20px 8px !important;
  box-shadow: none !important;
}
.dark-mode body:has(.ds-page) .ds-top-bar,
.dark-mode body.is-reading-page .ds-top-bar {
  background: #1C1C1E !important;
  box-shadow: none !important;
}
@media (max-width: 768px) {
  body:has(.ds-page) .ds-top-bar,
  body.is-reading-page .ds-top-bar {
    padding: 12px 14px 6px !important;
  }
}

/* Aşağı kaydırınca: header transparent kalır, sadece marquee belirginleşir */
.art-news-header.expanded { /* no-op */ }

.art-main-col { background: transparent !important; }
.art-page .art-topbar { background: transparent !important; }

/* Sağdaki aksiyon butonları her zaman sağa yaslı (defansif) */
.art-news-actions { margin-left: auto; }

/* Admin küçük düzenle/sil butonları — başlık altı, sağ tarafta */
.art-admin-mini {
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 1px solid var(--fl-border);
  background: var(--fl-card-bg);
  color: var(--fl-text-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: all .12s;
}
.art-admin-mini:hover { color: var(--fl-accent); border-color: var(--fl-accent); }
.art-admin-mini.danger {
  color: #EF4444;
  border-color: rgba(239, 68, 68, 0.35);
  background: rgba(239, 68, 68, 0.06);
}
.art-admin-mini.danger:hover {
  color: #fff; background: #EF4444; border-color: #EF4444;
}
.art-admin-mini svg { display: block; }

/* Marquee — butonlarla birebir aynı stil: 38px, yuvarlak, beyaz, border'lı */
.art-news-marquee {
  flex: 1; min-width: 0;
  height: 38px;
  overflow: hidden;
  position: relative;
  max-width: 0;
  opacity: 0;
  border-radius: 999px;
  background: var(--fl-card-bg);
  border: 1px solid var(--fl-border);
  display: flex;
  align-items: center;
  transition: max-width .35s ease, opacity .25s ease;
  /* mask kaldırıldı — fade yok, butonlar gibi düz pill */
}
.art-news-header.expanded .art-news-marquee {
  max-width: 100%;
  opacity: 1;
}
.art-news-marquee-track {
  display: inline-block;
  white-space: nowrap;
  animation: art-news-marquee 24s linear infinite;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.1px;
  color: var(--fl-text);
  will-change: transform;
  padding: 0 20px;
}
/* Hover/odakta marquee duraklasın — kullanıcı başlığı okuyabilsin */
.art-news-marquee:hover .art-news-marquee-track,
.art-news-marquee:focus-within .art-news-marquee-track { animation-play-state: paused; }
/* Sadece bir başlık görünsün — ikinci kopya gizli */
.art-news-marquee-track > span:nth-child(n+2) { display: none !important; }
/* Tek metin: sağdan girer, sola çıkar, kısa bekleme sonrası tekrar başlar */
@keyframes art-news-marquee {
  0%   { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}

.art-news-actions { display: flex; gap: 6px; flex-shrink: 0; }
.art-news-header .ds-icon-btn { width: 38px; height: 38px; }

/* Sol üstte brand mark — tıklayınca anasayfa (study) */
.art-news-brand {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  text-decoration: none;
  line-height: 0.95;
  letter-spacing: -0.4px;
  font-weight: 800;
  padding: 4px 6px;
  border-radius: 8px;
  cursor: pointer;
  flex-shrink: 0;
  transition: opacity .15s;
}
.art-news-brand:hover { opacity: 0.75; }
.art-news-brand-top {
  background: linear-gradient(135deg, #6366F1 0%, #8B5CF6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-size: 14px;
}
.art-news-brand-bottom {
  color: #0F172A;
  font-size: 14px;
}
.dark-mode .art-news-brand-bottom { color: #f1f5f9; }

@media (max-width: 768px) {
  .art-news-header { top: 0; margin: 0; gap: 6px; }
  body:has(.art-page) .art-news-header { padding: 12px 8px 6px !important; }
  .art-news-marquee-track { font-size: 12.5px; }
  .art-news-brand-top, .art-news-brand-bottom { font-size: 12.5px; }
}

/* Eski "Makalelere Dön" butonu — gizle (yeni header üstte zaten) */
.art-topbar .art-back-btn { display: none !important; }

/* Makale başlık altı meta satırı — okuma süresi + font ayarları */
.art-title-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  margin: 4px 0 14px;
  font-size: 12.5px;
  color: var(--fl-text-2);
}
.art-title-meta .art-reading-time {
  display: inline-flex; align-items: center; gap: 5px;
  font-weight: 600;
}
.art-title-meta .art-reading-toolbar { gap: 6px; }

/* Dikkat sinyalleri / faydalı noktalar / klinik / bulgular — daha sıkı liste */
.art-redflags-list,
.art-useful-list { gap: 5px !important; }
.art-redflags-list li,
.art-useful-list li {
  font-size: 14px !important;
  line-height: 1.45 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
/* Özel kartlar — Dikkat Sinyalleri, Faydalı Noktalar, Kısıtlamalar, İlaç Referansları,
 * ICD-10, Özgün Değer: edge-to-edge, yan border yok, üst/alt border */
.art-redflags-card,
.art-useful-card,
.art-limits-card,
.art-value-mobile,
.art-sec.sec-drugs,
.art-sec.sec-icd {
  padding: 14px 16px !important;
  margin: 0 -16px !important;
  border-radius: 0 !important;
  border-left: none !important;
  border-right: none !important;
  border-top: 1px solid var(--fl-border) !important;
  border-bottom: 1px solid var(--fl-border) !important;
  background: transparent !important;
}
/* Birbirine yapışık kartlar arasında çift border olmasın (geniş selector — Özgün Değer dahil) */
.art-value-mobile + .art-redflags-card,
.art-value-mobile + .art-useful-card,
.art-value-mobile + .art-limits-card,
.art-value-mobile + .art-sec.sec-drugs,
.art-redflags-card + .art-value-mobile,
.art-redflags-card + .art-useful-card,
.art-redflags-card + .art-limits-card,
.art-redflags-card + .art-sec.sec-drugs,
.art-useful-card + .art-value-mobile,
.art-useful-card + .art-redflags-card,
.art-useful-card + .art-limits-card,
.art-useful-card + .art-sec.sec-drugs,
.art-limits-card + .art-value-mobile,
.art-limits-card + .art-redflags-card,
.art-limits-card + .art-useful-card,
.art-limits-card + .art-sec.sec-drugs,
.art-sec.sec-drugs + .art-value-mobile,
.art-sec.sec-drugs + .art-redflags-card,
.art-sec.sec-drugs + .art-useful-card,
.art-sec.sec-drugs + .art-limits-card,
.art-sec.sec-drugs + .art-sec.sec-icd,
.art-sec.sec-icd + .art-sec.sec-drugs {
  border-top: none !important;
  margin-top: 0 !important;
}
.art-redflags-head,
.art-useful-head,
.art-limits-head,
.art-value-mobile-head { margin-bottom: 8px !important; }

/* İlaç referansları mobilde — taşma engellensin (dose alt satıra düşsün) */
@media (max-width: 640px) {
  .art-drug-row {
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    gap: 6px 10px !important;
    padding: 9px 12px !important;
  }
  .art-drug-name {
    flex: 1 1 100% !important;
    min-width: 0 !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
  }
  .art-drug-dose {
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
    max-width: 100% !important;
    align-self: flex-start;
  }
}

/* Makale başlığı altında collapsible künye butonu */
.art-kunye-collapse {
  margin: 6px 0 14px;
  border-top: 1px solid rgba(15, 23, 42, 0.08);
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}
.dark-mode .art-kunye-collapse {
  border-color: rgba(255, 255, 255, 0.08);
}
.art-kunye-collapse > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 4px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--fl-text-2, #475569);
  user-select: none;
  outline: none;
}
.art-kunye-collapse > summary::-webkit-details-marker { display: none; }
.art-kunye-collapse > summary:hover { color: var(--fl-accent, #6366F1); }
.art-kunye-collapse .art-kunye-chevron {
  margin-left: auto;
  transition: transform 0.18s ease;
  flex-shrink: 0;
  opacity: 0.7;
}
.art-kunye-collapse[open] .art-kunye-chevron { transform: rotate(180deg); }
.art-kunye-collapse .art-kunye-admin {
  display: inline-flex; gap: 4px; margin-left: 4px;
}
.art-kunye-collapse[open] > summary {
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}
.dark-mode .art-kunye-collapse[open] > summary {
  border-bottom-color: rgba(255, 255, 255, 0.06);
}
.art-kunye-collapse-body {
  padding: 12px 4px 14px;
  animation: artKunyeFade 0.18s ease;
}
@keyframes artKunyeFade {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Alt toolbar — özet kartının en altına taşındı */
.art-title-meta--bottom {
  margin-top: 18px !important;
  padding-top: 14px !important;
  border-top: 1px solid rgba(15, 23, 42, 0.08) !important;
}
.dark-mode .art-title-meta--bottom {
  border-top-color: rgba(255, 255, 255, 0.08) !important;
}

/* Ana okuma kabı — bloklar arası boşluk yok, opak sürekli bg, yan padding minimal */
.art-page .art-main-card.reading-card,
.art-page .art-sec.sec-abstract,
.art-page #ai-summary-body,
.ds-page .ds-stage,
.ds-page .ds-cards {
  background: #FFFFFF !important;
}
.art-page .art-main-card {
  padding: 14px 8px !important;
}
@media (min-width: 769px) {
  .art-page .art-main-card { padding: 18px 12px !important; }
}

/* Tüm özel kart ve bölümler: yan padding/margin SIFIR — text edge'e dayansın */
.art-page .art-sec,
.art-page .art-redflags-card,
.art-page .art-useful-card,
.art-page .art-limits-card,
.art-page .art-value-mobile,
.art-page .art-sec.sec-drugs,
.art-page .art-sec.sec-icd {
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.ai-summary-md .ds-block { padding-left: 0 !important; padding-right: 0 !important; }
.dark-mode .art-page .art-main-card.reading-card,
.dark-mode .art-page .art-sec.sec-abstract,
.dark-mode .art-page #ai-summary-body,
.dark-mode .ds-page .ds-stage,
.dark-mode .ds-page .ds-cards {
  background: #1C1C1E !important;
}

/* Makale bölümleri — edge-to-edge, sadece alt border, kompakt tipo, yan padding minimal */
.art-page .art-sec {
  font-size: 15px !important;
  line-height: 1.55 !important;
  background: #FFFFFF !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08) !important;
  border-radius: 0 !important;
  margin: 0 !important;
  padding: 12px 0 !important;
  box-shadow: none !important;
}
.art-page .art-sec:last-child { border-bottom: 0 !important; }
.dark-mode .art-page .art-sec {
  background: #1C1C1E !important;
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}
.art-page .art-sec p,
.art-page .art-sec li {
  font-size: 15px !important;
  line-height: 1.55 !important;
}
/* Kopyala butonu sadece hover'da görünsün (Notion stili) */
.art-page .art-copy-btn { opacity: 0 !important; }
.art-page .art-sec:hover .art-copy-btn,
.art-page .art-redflags-card:hover .art-copy-btn,
.art-page .art-useful-card:hover .art-copy-btn,
.art-page .art-limits-card:hover .art-copy-btn,
.art-page .art-value-mobile:hover .art-copy-btn,
.art-page .art-copy-btn:focus-visible { opacity: 1 !important; }
@media (hover: none) {
  .art-page .art-copy-btn { opacity: 0.5 !important; }
}

/* Her bölümün sağ üstünde küçük kopyala butonu */
.art-sec, .art-redflags-card, .art-useful-card, .art-limits-card, .art-value-mobile { position: relative; }
.art-copy-btn {
  position: absolute;
  top: 10px; right: 10px;
  width: 24px; height: 24px;
  border-radius: 50%;
  border: 1px solid var(--fl-border);
  background: var(--fl-card-bg);
  color: var(--fl-text-3);
  cursor: pointer;
  padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  opacity: 0.45;
  transition: all .15s;
  z-index: 2;
}
.art-copy-btn:hover { opacity: 1; color: var(--fl-accent); border-color: var(--fl-accent); }
.art-copy-btn.copied { color: #10b981; border-color: #10b981; opacity: 1; }
.art-copy-btn svg { display: block; }

/* art-sec listeleri — genel sıkılaştırma */
.art-sec ul, .art-sec ol { margin: 6px 0 !important; padding-left: 20px !important; }
.art-sec ul li, .art-sec ol li {
  margin: 3px 0 !important;
  line-height: 1.45 !important;
  font-size: 14px !important;
}

/* Akış üstü mobile şerit — logo+ikon satırı sticky, greeting kart normal scroll */
.fl-feed-toolbar {
  padding: 0 0 0;
  margin-bottom: 14px;
}
.fl-feed-toolbar-row {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--fl-page-bg);
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  padding: 10px 14px 8px;
}
/* Bölüm renkli özet kutusu — modern, ince gölgeli, cam efektli */
.fl-feed-greeting {
  position: relative;
  margin: 0 14px !important;
  padding: 16px 48px 16px 16px !important;
  border-radius: 22px;
  background:
    radial-gradient(120% 110% at 0% 0%,
      color-mix(in srgb, var(--fl-feed-accent, var(--fl-accent)) 88%, transparent),
      color-mix(in srgb, var(--fl-feed-accent, var(--fl-accent)) 55%, transparent) 75%);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 3px 10px color-mix(in srgb, var(--fl-feed-accent, var(--fl-accent)) 15%, transparent);
  transition: transform .15s, box-shadow .2s;
  display: flex; align-items: center; gap: 14px;
  overflow: hidden;
  isolation: isolate;
}
.fl-feed-greeting::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 60% at 100% 0%, rgba(255,255,255,0.22), transparent 65%),
    linear-gradient(180deg, rgba(255,255,255,0.08), transparent 30%, transparent 70%, rgba(0,0,0,0.08));
  pointer-events: none;
  z-index: 0;
}
.fl-feed-greeting > * { position: relative; z-index: 1; }
.fl-feed-greeting:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--fl-feed-accent, var(--fl-accent)) 22%, transparent);
}
.fl-feed-greeting:active { transform: translateY(0); }
.fl-feed-greeting-icon {
  width: 44px; height: 44px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.20);
  border: 1px solid rgba(255,255,255,0.30);
  border-radius: 14px;
  font-size: 23px;
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.25);
}
.fl-feed-greeting-body { flex: 1; min-width: 0; }
.fl-feed-greeting-date {
  font-size: 10.5px !important; font-weight: 800 !important;
  letter-spacing: 0.6px !important; text-transform: uppercase;
  color: rgba(255,255,255,0.78) !important;
  margin-bottom: 3px !important;
}
.fl-feed-greeting-text {
  font-size: 19px !important; font-weight: 900 !important;
  letter-spacing: -0.4px !important;
  color: #fff !important;
  line-height: 1.18 !important;
}
.fl-feed-greeting-arrow {
  position: absolute; right: 18px; top: 50%;
  transform: translateY(-50%);
  font-size: 26px; font-weight: 700;
  opacity: 0.8;
}
.fl-feed-toolbar-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.fl-feed-brand {
  flex: 1; min-width: 0;
  font-size: 15px; font-weight: 700;
  letter-spacing: -0.3px;
  color: var(--fl-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fl-feed-brand-accent { color: var(--fl-accent); font-weight: 800; }
.fl-feed-brand-rest { color: var(--fl-text-2); font-weight: 600; }

/* İki satır logo — küçük "aptenodytes." üstte, büyük "frontallob" altta */
.fl-feed-brand--stacked {
  display: flex; flex-direction: column;
  line-height: 1; gap: 0;
}
.fl-feed-brand-top {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2px;
  color: var(--fl-accent);
}
.fl-feed-brand-bottom {
  font-size: 19px;
  font-weight: 900;
  letter-spacing: -0.5px;
  color: var(--fl-text);
  margin-top: 1px;
}
.fl-feed-toolbar-actions { display: flex; gap: 6px; flex-shrink: 0; }
.fl-feed-icon-btn {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid var(--fl-border);
  background: var(--fl-card-bg);
  color: var(--fl-text-2);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: all .15s;
}
.fl-feed-icon-btn:hover { color: var(--fl-accent); border-color: var(--fl-accent); }
.fl-feed-greeting {
  margin-top: 8px; padding-left: 2px;
}
.fl-feed-greeting-text {
  font-size: 22px; font-weight: 900;
  letter-spacing: -0.5px;
  color: var(--fl-text);
  line-height: 1.15;
}
.fl-feed-greeting-date {
  font-size: 12.5px; color: var(--fl-text-3);
  margin-top: 2px; font-weight: 600;
}

@media (max-width: 768px) {
  /* Akış mobil görünümde edge-to-edge yakın */
  .tw-feed { padding: 0 6px !important; }
  .tw-main, .tw-main.tw-main-full { padding-left: 0 !important; padding-right: 0 !important; }
  #study-main-content { padding: 0 !important; }
  .study-persistent-layout { padding: 0 !important; }
  /* Card grid mobile'da iyice kompakt — minik kart */
  .art-cards-grid { gap: 8px !important; padding: 0 4px !important; }
  .fn-card { border-radius: 10px !important; box-shadow: none !important; }
  .fn-card-body { padding: 10px 12px 11px !important; gap: 4px !important; }
  .fn-card-visual { padding: 10px !important; aspect-ratio: 21/9 !important; }
  .fn-card-title { font-size: 14.5px !important; line-height: 1.25 !important; -webkit-line-clamp: 2 !important; }
  .fn-card-summary { font-size: 12px !important; line-height: 1.4 !important; -webkit-line-clamp: 2 !important; }
  .fn-card-meta { font-size: 10.5px !important; padding-top: 2px !important; }
  .fn-card-cat { font-size: 9.5px !important; padding: 2px 8px !important; }
  /* Hero kart mobile'da diğerlerinden ayırt edilmesin */
  .fn-card--hero .fn-card-visual { aspect-ratio: 21/9 !important; min-height: 0 !important; padding: 10px !important; }
  .fn-card--hero .fn-card-body { padding: 10px 12px 11px !important; }
  .fn-card--hero .fn-card-title { font-size: 14.5px !important; -webkit-line-clamp: 2 !important; }
  .fn-card--hero .fn-card-summary { font-size: 12px !important; -webkit-line-clamp: 2 !important; }

  /* Mobilde üst menü (topbar) gizle — tüm erişim profilde + alt menüde */
  .gb-topbar { display: none !important; }
  /* Topbar gizlenince içerik üstten boşlukla başlasın */
  body.has-fl-bnav main,
  body.has-fl-bnav #content,
  .tw-main {
    padding-top: max(env(safe-area-inset-top, 0px), 8px) !important;
  }

  /* fl-page (profil, özetler, bildirimler) mobile padding sıkıştır */
  .fl-page { padding-bottom: 80px !important; }
  .fl-hero { padding: 24px 14px 18px !important; }
  .fl-hero-title { font-size: 26px !important; margin: 12px 0 8px !important; }
  .fl-hero-subtitle { font-size: 14px !important; }
  .fl-fab { top: 14px !important; right: 14px !important; padding: 7px 11px !important; font-size: 11.5px !important; }
  .fl-section { padding: 0 10px !important; margin-top: 14px !important; }
  .fl-section-label { padding: 4px 4px 8px !important; font-size: 11px !important; }
  .fl-card { padding: 10px 12px !important; border-radius: 12px !important; margin-bottom: 8px !important; }
  .fl-action-tile { padding: 10px 6px !important; gap: 12px !important; }
  .fl-action-tile-icon { width: 34px !important; height: 34px !important; }
  .fl-action-tile-label { font-size: 13.5px !important; }
  .fl-action-tile-desc { font-size: 11.5px !important; }

  /* Koç balonu (🧠) mobilde gizli — alt menüde koç zaten var */
  .coach-bubble { display: none !important; }

  /* Daily Summaries sayfası mobile sıkıştır */
  .ds-hero { padding: 24px 14px 20px !important; }
  .ds-title { font-size: 26px !important; margin: 12px 0 8px !important; }
  .ds-subtitle { font-size: 13.5px !important; }
  .ds-share-fab { top: 14px !important; right: 14px !important; padding: 7px 11px !important; font-size: 11.5px !important; }
  .ds-strip { padding: 10px 12px 14px !important; }
  .ds-section-label { padding: 10px 12px 6px !important; font-size: 11px !important; }
  .ds-cards { padding: 0 10px !important; gap: 8px !important; }
  .ds-card { padding: 12px 12px !important; border-radius: 12px !important; }
  .ds-card-title { font-size: 14px !important; }
  .ds-card-meta { font-size: 11px !important; }
  .ds-card-preview { font-size: 12.5px !important; margin-top: 8px !important; }
  .ds-empty { padding: 40px 16px !important; }
}

/* ═══════════════════════════════════════════════════════════════════ */
/* Mobile bottom-nav (uygulama tab bar paritesi)                       */
/* Sadece dar ekranlarda görünür                                       */
/* ═══════════════════════════════════════════════════════════════════ */
/* Floating pill bottom-nav — uygulamadaki gibi ortalanmış,
 * footer'dan biraz yukarıda, yuvarlak, blur backdrop */
.fl-bottom-nav {
  display: none;
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  /* Coach popup z-index 9997 — onun üstünde olsun ki modül değiştirilebilsin */
  z-index: 9999;
  background: rgba(255, 255, 255, 0.78);    /* Daha translucent → arkadaki gökkuşağı süzülerek geçer */
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  border: 1px solid rgba(15,23,42,0.04);
  border-radius: 999px;
  padding: 6px 8px;
  box-shadow:
    0 8px 28px rgba(0, 0, 0, 0.10),
    0 2px 8px rgba(0, 0, 0, 0.05);
  gap: 2px;
  align-items: center;
  max-width: calc(100% - 16px);
}
.dark-mode .fl-bottom-nav {
  background: rgba(28, 28, 30, 0.72) !important;
}
.dark-mode .fl-bottom-nav {
  background: rgba(28, 28, 30, 0.85);
  border-color: rgba(255, 255, 255, 0.10);
  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.45),
    0 2px 8px rgba(0, 0, 0, 0.30);
}

/* ═══ Bottom nav item — dinamik boyut (5 sekme rahat, 6 sekme sıkı) ═══ */
.fl-bnav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 8px 11px;
  background: none;
  border: none;
  cursor: pointer;
  color: #64748B;             /* Pasif: orta-koyu gri */
  border-radius: 999px;
  transition: all .18s cubic-bezier(.4,0,.2,1);
}
.fl-bnav-item:hover { color: #334155; background: rgba(15,23,42,.04); }
.fl-bnav-item:focus-visible { outline: 2px solid #6B7280; outline-offset: 2px; }
.fl-bnav-item.active {
  background: #F3F4F6;
  color: #0F172A;
  padding: 8px 14px;
}
.dark-mode .fl-bnav-item { color: #94A3B8; }
.dark-mode .fl-bnav-item:hover { color: #E5E7EB; background: rgba(255,255,255,.05); }
.dark-mode .fl-bnav-item.active { background: #2A2A2C; color: #F1F5F9; }

.fl-bnav-item .fl-bnav-icon {
  font-size: 22px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.fl-bnav-item .fl-bnav-icon svg { display: block; width: 22px; height: 22px; }

/* Label: aktif item'da görünür — EDU yazısı ile aynı boyut/ağırlık */
.fl-bnav-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2px;
  display: none;
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
}
.fl-bnav-item.active .fl-bnav-label {
  display: inline-block;
  max-width: 90px;
  margin-left: 6px;
}
.fl-bnav-item.active {
  flex-direction: row;
  gap: 0;
}

/* ─── EDU MODU (6 sekme) — sıkı düzen, küçük ikon ─── */
html.edu-mode-on .fl-bottom-nav .fl-bnav-item {
  padding: 7px 8px;
}
html.edu-mode-on .fl-bottom-nav .fl-bnav-item.active {
  padding: 7px 11px;
}
html.edu-mode-on .fl-bottom-nav .fl-bnav-item .fl-bnav-icon,
html.edu-mode-on .fl-bottom-nav .fl-bnav-item .fl-bnav-icon svg {
  font-size: 20px;
  width: 20px;
  height: 20px;
}
html.edu-mode-on .fl-bottom-nav .fl-bnav-item .fl-bnav-label {
  font-size: 10px;
  font-weight: 500;
}
html.edu-mode-on .fl-bottom-nav .fl-bnav-item.active .fl-bnav-label {
  margin-left: 5px;
  max-width: 75px;
}

/* ─── Çok dar ekranlar (<360px) için ek küçültme ─── */
@media (max-width: 380px) {
  .fl-bottom-nav { padding: 5px 6px; gap: 1px; }
  .fl-bnav-item { padding: 7px 8px; }
  .fl-bnav-item.active { padding: 7px 12px; }
  .fl-bnav-item .fl-bnav-icon svg { width: 20px; height: 20px; }
  .fl-bnav-label { font-size: 12px; }
  html.edu-mode-on .fl-bottom-nav .fl-bnav-item { padding: 6px 6px; }
  html.edu-mode-on .fl-bottom-nav .fl-bnav-item.active { padding: 6px 9px; }
  html.edu-mode-on .fl-bottom-nav .fl-bnav-item .fl-bnav-icon svg { width: 18px; height: 18px; }
  html.edu-mode-on .fl-bottom-nav .fl-bnav-item .fl-bnav-label { font-size: 11px; }
}

/* EDU butonu — Koç ile aynı font-size (12px); diğer stiller EDU'ya özgü */
.fl-bnav-icon--edu {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;             /* Koç ile aynı */
  font-weight: 800;
  letter-spacing: 1.2px;
  color: #9CA3AF;
  text-transform: uppercase;
  min-width: auto;
  height: 22px;
  line-height: 1;
  font-family: inherit;
  padding: 0 2px;
}
.fl-bnav-item[data-mod="edu-toggle"] { margin: 0; padding: 9px 14px !important; }

html.edu-mode-on .fl-bnav-icon--edu {
  font-size: 12px;
  letter-spacing: 1.2px;
  min-width: auto;
  height: 22px;
  padding: 0 2px;
}
html.edu-mode-on .fl-bnav-item[data-mod="edu-toggle"] { margin: 0; padding: 9px 14px !important; }

@media (max-width: 380px) {
  .fl-bnav-icon--edu { font-size: 11px; padding: 0 1px; }
  html.edu-mode-on .fl-bnav-icon--edu { font-size: 11px; padding: 0 1px; }
}
.dark-mode .fl-bnav-icon--edu { color: #94A3B8; }
/* EDU mod AÇIK iken — sadece yazı biraz daha koyu gri, ARKAPLAN VURGUSU YOK */
html.edu-mode-on .fl-bnav-item[data-mod="edu-toggle"] .fl-bnav-icon--edu {
  color: #475569;
}
/* Eski EDU label (artık kullanılmıyor ama yine de sakla) */
.fl-bnav-label--edu {
  text-transform: uppercase;
  font-weight: 800 !important;
  letter-spacing: 1.4px;
}

/* ═══ HARD-CODED MODE TOGGLE — JS yüklenmeden önce doğru mod görünür ═══ */
.fl-bnav-mode { display: contents; }
.fl-bnav-mode--edu { display: none; }
html.edu-mode-on .fl-bnav-mode--default { display: none; }
html.edu-mode-on .fl-bnav-mode--edu { display: contents; }
/* EDU modunda renkli stripe YOK — sadece gökkuşağı animasyonu (geçişte) kalır */

/* ═══ GÖKKUŞAĞI — BORDER BOYUNCA AKAN IŞIK (GÖLGE OLARAK) ═══ */
/* Conic-gradient açısı animasyonla değişir (--fl-rainbow-angle).
 * Mask ile sadece DIŞ RİM görünür → kalıp gibi DÖNMEZ, renkler border
 * boyunca akar (chasing-light effect). Nav'ın ARKASINDA (z-index:-1). */
@property --fl-rainbow-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
@keyframes fl-bnav-rainbow-angle {
  from { --fl-rainbow-angle: 0deg; }
  to   { --fl-rainbow-angle: 360deg; }
}
@keyframes fl-bnav-rainbow-fade {
  0%, 100% { opacity: 0; }
  15%      { opacity: 0.35; }
  50%      { opacity: 0.45; }
  85%      { opacity: 0.35; }
}
.fl-bottom-nav::before {
  content: '';
  position: absolute;
  inset: -6px;                 /* Nav'dan 6px dışa — rim için yeterli */
  border-radius: 999px;
  background: conic-gradient(
    from var(--fl-rainbow-angle, 0deg),
    #EF4444 0deg,
    #F97316 40deg,
    #FBBF24 80deg,
    #84CC16 125deg,
    #10B981 170deg,
    #06B6D4 210deg,
    #3B82F6 250deg,
    #6366F1 285deg,
    #A855F7 320deg,
    #EC4899 350deg,
    #EF4444 360deg
  );
  /* MASK — sadece ince RİM (kenar şeridi) görünür; iç şeffaf kalır */
  padding: 6px;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  z-index: -1;                 /* Nav'ın ARKASINDA */
  pointer-events: none;
  opacity: 0;
  filter: blur(8px) saturate(1.4) brightness(1.05);  /* Yumuşak gölge */
  will-change: --fl-rainbow-angle, opacity;
}
.fl-bottom-nav.fl-bnav-rainbow-anim::before {
  animation:
    fl-bnav-rainbow-angle 1.8s linear,
    fl-bnav-rainbow-fade 1.8s ease-in-out;
}
/* @property desteklemeyen browser'lar için fallback — transform rotate */
@supports not (background: conic-gradient(from var(--x))) {
  @keyframes fl-bnav-rainbow-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
  }
  .fl-bottom-nav.fl-bnav-rainbow-anim::before {
    animation:
      fl-bnav-rainbow-spin 1.8s linear,
      fl-bnav-rainbow-fade 1.8s ease-in-out;
  }
}
@media (prefers-reduced-motion: reduce) {
  .fl-bottom-nav.fl-bnav-rainbow-anim::before { animation: none !important; }
}
/* EDU modunda padding override yok — normal padding kullanılır */
/* Inline render edilen bottom nav görünür olsun (logged-in user için) */
@media (max-width: 900px) {
  body.has-user-nav .fl-bottom-nav { display: inline-flex; }
  body.has-user-nav.has-fl-bnav main,
  body.has-user-nav.has-fl-bnav .tw-main { padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }
}

/* Koç session aktifken bottom nav gizli (focus mode — mobil parite) */
body.coach-chat-active .fl-bottom-nav { display: none !important; }
body.coach-chat-active main,
body.coach-chat-active .tw-main { padding-bottom: 16px !important; }

/* Material Symbols — font yüklenmeden önce ham text gizli (FOIT) */
.material-symbols-rounded {
  font-family: 'Material Symbols Rounded' !important;
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24;
  vertical-align: middle;
}

/* Sadece mobile/tablet'te göster + ana içeriğe alt padding ekle */
@media (max-width: 900px) {
  .fl-bottom-nav { display: inline-flex; }
  body.has-fl-bnav main,
  body.has-fl-bnav #content {
    padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* Koç seansı aktifken alt menü gizli — chat sırasında kaza ile modül
 * değiştirilmesin. Seansa dönülünce/kapanınca tekrar görünür. */
body.coach-session-active .fl-bottom-nav { display: none !important; }
/* Modal açıkken alt menüyü gizle — kaydet butonunu engellemesin */
body.modal-open .fl-bottom-nav { display: none !important; }
body.modal-open .tw-fab { display: none !important; }

/* Profil sayfası fl-hero (üst header) arkaplanı yok */
body:has(.fl-page) .fl-hero,
.fl-page .fl-hero {
  background: transparent !important;
  border-bottom: none !important;
}

/* Profil ve fl-page tabanlı sayfalarda mobilde header sticky değil — sayfayla birlikte kaysın */
@media (max-width: 768px) {
  .fl-page .fl-feed-toolbar {
    position: static !important;
    top: auto !important;
  }
}

/* Anasayfa chip alanı altında istenmeyen çizgi (sr-tabs/sr-meta hidden iken görünmesin) */
.sr-tabs[hidden], .sr-meta[hidden] { display: none !important; border: 0 !important; }
.home-chips { border: 0 !important; box-shadow: none !important; }
.home-chip { border: 0 !important; box-shadow: none !important; }
.home-chip:focus, .home-chip:active { outline: none !important; }

/* "Yakında" chip — diğer chip'lerle aynı stil, sade rozetli */
.home-chip.home-chip--soon {
  position: relative;
  opacity: 0.85;
}
.home-chip.home-chip--soon::after {
  content: 'YAKINDA';
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.6px;
  padding: 2px 6px;
  margin-left: 6px;
  background: rgba(99, 102, 241, 0.14);
  color: #4F46E5;
  border-radius: 999px;
  vertical-align: 1px;
}
.dark-mode .home-chip.home-chip--soon::after {
  background: rgba(165, 180, 252, 0.18);
  color: #c7d2fe;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(1.3); }
}

/* AI günlük özet kartı — her modda (manuel dark + OS prefers-color-scheme + mobil)
 * gündüz görünümünde sabit. CSS değişkenlerini de yerelde yenileyerek child
 * elemanların var(--fl-text) okumasında bile renk gündüz değerinde kalır.
 * Inline !important ile birleştiğinde mobil-masaüstü fark etmez. */
.fn-card--ai,
.home-latest-card--ai,
.ai-card-locked-light {
  --fl-text: #0F172A !important;
  --fl-text-2: #475569 !important;
  --fl-text-3: #94A3B8 !important;
  --fl-card: #FFFFFF !important;
  --fl-card-bg: #FFFFFF !important;
  --fl-border: rgba(15, 23, 42, 0.08) !important;
  --fl-page-bg: #FFFFFF !important;
  color-scheme: light !important;
  background: #FFFFFF !important;
  color: #0F172A !important;
}
.fn-card--ai *,
.home-latest-card--ai *,
.ai-card-locked-light * {
  /* Child elementler doğrudan renk vermediyse gündüz değerini miras alır */
  color-scheme: light;
}
/* Manuel dark-mode override — body.dark-mode olduğunda */
.dark-mode .fn-card--ai,
.dark-mode .home-latest-card--ai,
.dark-mode .ai-card-locked-light {
  background: #FFFFFF !important;
  color: #0F172A !important;
  border-color: rgba(15, 23, 42, 0.08) !important;
}
/* OS düzeyinde prefers-color-scheme: dark — mobilde otomatik dark */
@media (prefers-color-scheme: dark) {
  .fn-card--ai,
  .home-latest-card--ai,
  .ai-card-locked-light {
    background: #FFFFFF !important;
    color: #0F172A !important;
    border-color: rgba(15, 23, 42, 0.08) !important;
  }
}

/* Anasayfa footer — yasal + tanıtım linkleri */
.home-footer {
  margin: 32px auto 24px;
  max-width: 720px;
  padding: 16px 20px;
  text-align: center;
  border-top: 1px solid var(--fl-border);
}
.home-footer-links {
  display: flex; flex-wrap: wrap; justify-content: center;
  align-items: center; gap: 4px 10px;
  font-size: 12.5px; color: var(--fl-text-2);
}
.home-footer-links a {
  color: var(--fl-text-2); text-decoration: none;
  font-weight: 600; padding: 4px 6px;
}
.home-footer-links a:hover { color: var(--fl-accent); }
.home-footer-links span { color: var(--fl-text-muted); }
.home-footer-brand {
  margin-top: 10px; font-size: 11px;
  color: var(--fl-text-muted); font-weight: 600;
}

/* Misafir kullanıcı için üst menü ve son eklenenler bandı tamamen gizli */
body.is-guest .gb-topbar,
body.is-guest .home-latest,
body.is-guest #home-latest { display: none !important; }
/* Misafir ise içeriği üst boşluk olmadan göster (topbar yok) */
body.is-guest .tw-main { padding-top: 12px !important; }

/* Misafir anasayfa CTA — Giriş yap / Kayıt ol */
.home-auth-cta {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin: 14px auto 18px;
  max-width: 360px;
  width: 100%;
  padding: 0 16px;
}
.home-auth-primary,
.home-auth-secondary {
  flex: 1;
  padding: 13px 18px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -0.1px;
  cursor: pointer;
  transition: all .15s;
  border: 1px solid var(--fl-border);
}
.home-auth-primary {
  background: linear-gradient(135deg, #6366F1, #4F46E5);
  color: #fff;
  border: none;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.35);
}
.home-auth-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(99, 102, 241, 0.42); }
.home-auth-secondary {
  background: var(--fl-card-bg);
  color: var(--fl-text);
}
.home-auth-secondary:hover { border-color: #6366F1; color: #6366F1; }

/* Makale içi sağ kenar bölüm gezgini — yarı saydam noktalar */
.art-section-nav {
  position: fixed;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 55;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 8px 4px;
  background: transparent;
  border: none;
  user-select: none;
  touch-action: pan-y;
}
.art-section-nav-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--fl-text-3);
  opacity: 0.18;
  cursor: pointer;
  transition: opacity .15s, transform .15s, background .15s, width .15s, height .15s;
  flex-shrink: 0;
  border: none;
  padding: 0;
}
.art-section-nav-dot:hover { opacity: 0.55; }
.art-section-nav-dot.active {
  background: var(--fl-accent);
  opacity: 0.65;
  width: 9px; height: 9px;
}
/* Dot yanında label çıkartı (hover veya nav drag durumunda hepsi) */
.art-section-nav-dot[data-label] { position: relative; }
.art-section-nav-dot[data-label]::after {
  content: attr(data-label);
  position: absolute;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  background: var(--fl-card-bg);
  color: var(--fl-text);
  font-size: 11.5px;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: 12px;
  border: 1px solid var(--fl-border);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity .18s ease, transform .18s ease;
  box-shadow: 0 4px 12px rgba(0,0,0,.08);
}
.art-section-nav-dot:hover::after,
.art-section-nav.dragging .art-section-nav-dot::after {
  opacity: 1;
}
/* Drag esnasında nav görünür hale gelir, etiketler tam belirir */
.art-section-nav.dragging {
  background: color-mix(in srgb, var(--fl-card-bg) 92%, transparent);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  padding: 10px 6px;
  border: 1px solid color-mix(in srgb, var(--fl-text) 6%, transparent);
  border-radius: 999px;
}
.art-section-nav.dragging .art-section-nav-dot {
  opacity: 0.85;
}
.art-section-nav.dragging .art-section-nav-dot.active {
  opacity: 1;
}

/* AI özet body — markdown başlıkları arası okunabilir boşluk */
#ai-summary-body { line-height: 1.65; }
#ai-summary-body > h2[style],
#ai-summary-body > h3[style],
#ai-summary-body > h4[style],
#ai-summary-body > h5[style] {
  margin-top: 32px !important;
  margin-bottom: 12px !important;
  line-height: 1.3 !important;
  padding-top: 4px !important;
}
#ai-summary-body > h2[style] {
  font-size: 19px !important;
  margin-top: 38px !important;
  margin-bottom: 14px !important;
}
#ai-summary-body > h3[style] {
  font-size: 16.5px !important;
  margin-top: 30px !important;
  margin-bottom: 10px !important;
}
#ai-summary-body > h4[style] {
  font-size: 15px !important;
  margin-top: 24px !important;
  margin-bottom: 8px !important;
}
#ai-summary-body > p {
  margin: 10px 0 14px !important;
  line-height: 1.7 !important;
}
#ai-summary-body > ul,
#ai-summary-body > ol {
  margin: 10px 0 16px !important;
  padding-left: 22px !important;
}
#ai-summary-body > ul > li,
#ai-summary-body > ol > li {
  margin: 6px 0 !important;
  line-height: 1.6 !important;
}
/* İlk başlık sayfayla bitişik durmasın */
#ai-summary-body > *:first-child { margin-top: 0 !important; }

/* Scroll target offset — başlığa tıklanınca üstte 80px boşluk kalsın
 * (header bar arkasında kaybolmasın) */
.art-page .art-sec,
.art-page .art-redflags-card,
.art-page .art-useful-card,
.art-page .art-limits-card,
.art-page .art-value-mobile,
.art-page #ai-summary-body h2,
.art-page #ai-summary-body h3,
.ds-page .ds-card {
  scroll-margin-top: 80px;
}
@media (max-width: 480px) {
  .art-section-nav { right: 4px; padding: 8px 4px; gap: 5px; }
  .art-section-nav-dot { width: 8px; height: 8px; }
  .art-section-nav-dot.active { width: 10px; height: 10px; }
}