/* ============================================================
   FonIndex — Ana CSS
   ============================================================ */

/* ── Reset & Base ───────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --blue:      #1565c0;
  --blue-lt:   #e3f2fd;
  --green:     #2e7d32;
  --green-lt:  #e8f5e9;
  --red:       #c62828;
  --red-lt:    #ffebee;
  --orange:    #e65100;
  --gray-50:   #f8f9fa;
  --gray-100:  #f1f3f5;
  --gray-200:  #e9ecef;
  --gray-400:  #ced4da;
  --gray-600:  #6c757d;
  --gray-800:  #343a40;
  --gray-900:  #212529;
  --radius:    8px;
  --shadow:    0 1px 4px rgba(0,0,0,.08);
  --shadow-md: 0 2px 12px rgba(0,0,0,.12);
  --font:      'Inter', system-ui, -apple-system, sans-serif;
  --max-w:     1140px;
}

html { font-size: 16px; scroll-behavior: smooth; }
body { font-family: var(--font); color: var(--gray-900); background: var(--gray-50); line-height: 1.6; }
a    { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }
img  { max-width: 100%; display: block; }

/* ── Layout ─────────────────────────────────────────────── */
.container { max-width: var(--max-w); margin: 0 auto; padding: 0 20px; }
.site-main  { padding: 32px 0 64px; }

/* ── Header ─────────────────────────────────────────────── */
.site-header {
  background: white;
  border-bottom: 1px solid var(--gray-200);
  position: sticky; top: 0; z-index: 100;
  box-shadow: 0 1px 6px rgba(0,0,0,.06);
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 60px; gap: 20px;
}
.site-logo { font-size: 20px; font-weight: 800; color: var(--blue); letter-spacing: -.5px; }
.site-logo span { color: var(--green); }

.site-nav { display: flex; gap: 4px; }
.site-nav a {
  padding: 6px 12px; border-radius: 6px; font-size: 14px; color: var(--gray-800);
  transition: background .15s;
}
.site-nav a:hover { background: var(--gray-100); text-decoration: none; }

.header-search { position: relative; }
.header-search input {
  padding: 8px 14px 8px 36px; border: 1px solid var(--gray-200); border-radius: 20px;
  font-size: 14px; width: 220px; background: var(--gray-50);
  transition: border-color .2s, width .3s;
}
.header-search input:focus { outline: none; border-color: var(--blue); width: 280px; background: white; }
.header-search .icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--gray-600); }

/* ── Footer ─────────────────────────────────────────────── */
.site-footer {
  background: var(--gray-800); color: #adb5bd; font-size: 13px;
  padding: 32px 0;
}
.footer-inner { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; }
.footer-links { display: flex; gap: 16px; }
.footer-links a { color: #adb5bd; }
.footer-links a:hover { color: white; }

/* ── Card ────────────────────────────────────────────────── */
.card {
  background: white; border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 20px 24px;
}
.card-title { font-size: 13px; font-weight: 600; color: var(--gray-600);
              text-transform: uppercase; letter-spacing: .5px; margin-bottom: 16px; }

/* ── Badges ─────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; padding: 3px 10px;
  border-radius: 20px; font-size: 12px; font-weight: 600;
}
.badge-green  { background: var(--green-lt); color: var(--green); }
.badge-red    { background: var(--red-lt);   color: var(--red);   }
.badge-blue   { background: var(--blue-lt);  color: var(--blue);  }
.badge-gray   { background: var(--gray-100); color: var(--gray-600); }

/* ── Return colors ──────────────────────────────────────── */
.positive { color: var(--green); }
.negative { color: var(--red); }
.neutral  { color: var(--gray-600); }

/* ── Fon detay sayfası ──────────────────────────────────── */
.fon-hero {
  background: white; border-bottom: 1px solid var(--gray-200);
  padding: 28px 0 24px;
}
.fon-hero-inner { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 20px; }
.fon-kod-badge {
  display: inline-block; background: var(--blue); color: white;
  padding: 4px 12px; border-radius: 6px; font-size: 13px;
  font-weight: 700; letter-spacing: 1px; margin-bottom: 8px;
}
.fon-hero h1 { font-size: 22px; font-weight: 700; color: var(--gray-900); line-height: 1.3; max-width: 640px; }
.fon-meta    { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; }
.fon-meta-item { font-size: 13px; color: var(--gray-600); display: flex; align-items: center; gap: 5px; }
.fon-meta-item strong { color: var(--gray-800); }

.fon-price-box { text-align: right; flex-shrink: 0; }
.fon-price     { font-size: 32px; font-weight: 800; color: var(--gray-900); }
.fon-price-label { font-size: 12px; color: var(--gray-600); }
.fon-daily     { font-size: 18px; font-weight: 700; margin-top: 4px; }

/* ── Grid layout ────────────────────────────────────────── */
.fon-grid {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 24px;
  margin-top: 28px;
  align-items: start;
}
@media (max-width: 768px) {
  .fon-grid { grid-template-columns: 1fr; }
  .fon-price-box { text-align: left; }
  .fon-hero h1 { font-size: 18px; }
}

/* ── Stats grid ─────────────────────────────────────────── */
.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 480px) { .stats-grid { grid-template-columns: repeat(2, 1fr); } }

.stat-box {
  /* Grid items default to min-width:auto, i.e. their content's min-content
     size -- the 7-dot .risk-meter below doesn't wrap, so its ~178px content
     width was propagating up and forcing the whole page to overflow
     horizontally on mobile (found 2026-09-08, every /fon/ page affected). */
  min-width: 0;
  background: var(--gray-50); border-radius: var(--radius);
  padding: 14px 16px; border: 1px solid var(--gray-200);
}
.stat-box .label { font-size: 11px; color: var(--gray-600); text-transform: uppercase; letter-spacing: .4px; }
.stat-box .value { font-size: 18px; font-weight: 700; margin-top: 2px; }
.stat-box .sub   { font-size: 12px; color: var(--gray-600); margin-top: 2px; }

/* ── Getiri tablosu ─────────────────────────────────────── */
.getiri-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.getiri-table th { font-size: 11px; color: var(--gray-600); font-weight: 600;
                   text-transform: uppercase; padding: 8px 12px; text-align: center;
                   border-bottom: 2px solid var(--gray-200); }
.getiri-table td { padding: 10px 12px; text-align: center; border-bottom: 1px solid var(--gray-100); }
.getiri-table tr:last-child td { border-bottom: none; }
.getiri-table .label-col { text-align: left; font-weight: 600; color: var(--gray-700); }
.getiri-table tr:hover td { background: var(--gray-50); }

/* ── Benchmark bar ──────────────────────────────────────── */
.benchmark-list { display: flex; flex-direction: column; gap: 10px; }
.bm-row { display: grid; grid-template-columns: 90px 1fr 70px; align-items: center; gap: 10px; font-size: 13px; }
.bm-label { color: var(--gray-700); font-weight: 500; }
.bm-bar-wrap { height: 8px; background: var(--gray-100); border-radius: 4px; overflow: visible; position: relative; }
.bm-bar {
  height: 100%; border-radius: 4px; min-width: 2px;
  transition: width .6s ease;
}
.bm-bar.fon      { background: var(--blue); }
.bm-bar.altin    { background: #f9a825; }
.bm-bar.bist     { background: #7b1fa2; }
.bm-bar.usd      { background: #00838f; }
.bm-bar.eur      { background: #2e7d32; }
.bm-bar.tufe     { background: #e65100; }
.bm-bar.mevduat  { background: #546e7a; }
.bm-val { text-align: right; font-weight: 600; }

/* ── Portföy dağılımı ───────────────────────────────────── */
.portfoy-list { display: flex; flex-direction: column; gap: 10px; }
.portfoy-row  { display: grid; grid-template-columns: 1fr 60px; align-items: center; gap: 8px; font-size: 13px; }
.portfoy-bar-wrap { height: 6px; background: var(--gray-100); border-radius: 3px; overflow: hidden; margin-top: 4px; }
.portfoy-bar { height: 100%; border-radius: 3px; background: var(--blue); }
.portfoy-pct { text-align: right; font-weight: 600; color: var(--gray-800); }
.portfoy-name { color: var(--gray-700); }

/* ── Sidebar bilgi kutusu ───────────────────────────────── */
.info-list { display: flex; flex-direction: column; }
.info-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 0; border-bottom: 1px solid var(--gray-100); font-size: 13px;
  gap: 12px;
}
.info-row:last-child { border-bottom: none; }
.info-row .key   { color: var(--gray-600); flex-shrink: 0; }
.info-row .val   { font-weight: 600; color: var(--gray-900); text-align: right; }

/* ── Risk göstergesi ────────────────────────────────────── */
.risk-meter { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.risk-dot {
  width: 22px; height: 8px; border-radius: 3px; background: var(--gray-200);
  flex-shrink: 0;
}
.risk-dot.active-1, .risk-dot.active-2 { background: var(--green); }
.risk-dot.active-3, .risk-dot.active-4 { background: #f9a825; }
.risk-dot.active-5, .risk-dot.active-6 { background: var(--orange); }
.risk-dot.active-7 { background: var(--red); }

/* ── Fon listesi (archive) ──────────────────────────────── */
/* display:block + overflow-x:auto turns the table into its own horizontal
   scroller. Its wrapping .card uses overflow:hidden (for the border-radius),
   which was silently CLIPPING the price/return columns on mobile rather
   than letting them scroll into view (found 2026-09-08 on /fon-turu/ pages). */
.fon-list-table { display: block; overflow-x: auto; width: 100%; border-collapse: collapse; font-size: 14px; }
.fon-list-table thead th {
  background: var(--gray-50); padding: 10px 14px;
  font-size: 12px; font-weight: 600; color: var(--gray-600);
  text-transform: uppercase; letter-spacing: .3px;
  border-bottom: 2px solid var(--gray-200); text-align: right;
}
.fon-list-table thead th:first-child { text-align: left; }
.fon-list-table tbody td { padding: 11px 14px; border-bottom: 1px solid var(--gray-100); text-align: right; }
.fon-list-table tbody td:first-child { text-align: left; }
.fon-list-table tbody tr:hover td { background: #f0f6ff; }
.fon-list-table .fon-kod { font-family: monospace; font-weight: 700; font-size: 13px; color: var(--blue); }
.fon-list-table .fon-unvan { color: var(--gray-800); font-size: 13px; max-width: 280px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Ana sayfa ──────────────────────────────────────────── */
.home-hero {
  background: linear-gradient(135deg, #1565c0 0%, #0d47a1 100%);
  color: white; padding: 64px 0 48px; text-align: center;
}
.home-hero h1 { font-size: 36px; font-weight: 800; margin-bottom: 12px; }
.home-hero p  { font-size: 18px; opacity: .85; margin-bottom: 32px; }
.home-search  { max-width: 520px; margin: 0 auto; position: relative; }
.home-search input {
  width: 100%; padding: 14px 20px 14px 46px; border-radius: 30px; border: none;
  font-size: 16px; box-shadow: 0 4px 20px rgba(0,0,0,.2);
}
.home-search input:focus { outline: 2px solid rgba(255,255,255,.5); }
.home-search .icon { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: #999; }
.home-search-btn {
  position: absolute; right: 6px; top: 6px;
  background: var(--blue); color: white; border: none;
  padding: 8px 20px; border-radius: 24px; font-size: 14px;
  font-weight: 600; cursor: pointer;
}

.home-sections { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 40px; }
@media (max-width: 768px) { .home-sections { grid-template-columns: 1fr; } }

.home-section-title {
  font-size: 16px; font-weight: 700; margin-bottom: 16px;
  display: flex; align-items: center; gap: 8px;
}

/* ── Arama sonuçları ────────────────────────────────────── */
.search-results { display: flex; flex-direction: column; gap: 8px; }
.search-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; background: white; border-radius: var(--radius);
  border: 1px solid var(--gray-200); transition: box-shadow .15s;
}
.search-item:hover { box-shadow: var(--shadow-md); text-decoration: none; }
.search-item-left .kod  { font-weight: 700; color: var(--blue); font-size: 13px; }
.search-item-left .unvan { font-size: 14px; color: var(--gray-800); }
.search-item-right       { text-align: right; }

/* ── Utility ─────────────────────────────────────────────── */
.text-sm  { font-size: 13px; }
.text-xs  { font-size: 12px; }
.text-muted { color: var(--gray-600); }
.mb-0  { margin-bottom: 0; }
.mb-4  { margin-bottom: 4px; }
.mb-8  { margin-bottom: 8px; }
.mb-16 { margin-bottom: 16px; }
.mb-24 { margin-bottom: 24px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }

/* ── AJAX arama dropdown ─────────────────────────────────── */
.search-dropdown {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0;
  background: white; border-radius: var(--radius); box-shadow: var(--shadow-md);
  border: 1px solid var(--gray-200); z-index: 200; overflow: hidden; display: none;
}
.search-dropdown.open { display: block; }
.search-dd-item {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 16px; cursor: pointer; transition: background .1s; font-size: 14px;
}
.search-dd-item:hover { background: var(--blue-lt); }
.search-dd-item .kod  { font-weight: 700; color: var(--blue); margin-right: 10px; font-size: 12px; }
.search-dd-item .unvan { color: var(--gray-800); flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search-dd-item .pct  { font-size: 13px; font-weight: 600; flex-shrink: 0; margin-left: 10px; }

/* ── Blog ───────────────────────────────────────────────── */
.blog-layout { display: grid; grid-template-columns: 1fr 280px; gap: 32px; align-items: start; }
/* Same min-width:auto grid trap as .stat-box: a wide post-body table's
   min-content was propagating up through .blog-main and forcing the whole
   layout wider than the viewport even on the single-column mobile grid,
   despite the table's own overflow-x:auto (found 2026-09-08). */
.blog-main, .blog-sidebar { min-width: 0; }

.blog-page-title { font-size: 28px; font-weight: 800; margin-bottom: 8px; }
.blog-page-desc  { color: var(--gray-600); font-size: 15px; margin-bottom: 28px; }

.blog-card {
  background: white; border-radius: var(--radius);
  border: 1px solid var(--gray-200); padding: 24px;
  margin-bottom: 16px; transition: box-shadow .15s;
}
.blog-card:hover { box-shadow: var(--shadow-md); }

.blog-card-meta, .blog-post-meta {
  display: flex; align-items: center; gap: 12px; margin-bottom: 12px;
}
.blog-cat-badge {
  background: var(--blue-lt); color: var(--blue);
  font-size: 12px; font-weight: 600; padding: 3px 10px;
  border-radius: 20px; text-decoration: none;
}
.blog-cat-badge:hover { text-decoration: none; opacity: .85; }
.blog-date { font-size: 13px; color: var(--gray-600); }

.blog-card-title { font-size: 20px; font-weight: 700; margin-bottom: 10px; line-height: 1.4; }
.blog-card-title a { color: var(--gray-900); }
.blog-card-title a:hover { color: var(--blue); text-decoration: none; }
.blog-card-excerpt { font-size: 14px; color: var(--gray-600); line-height: 1.7; margin-bottom: 16px; }
.blog-card-excerpt p { margin: 0; }
.blog-read-more { font-size: 14px; font-weight: 600; color: var(--blue); }
.blog-read-more:hover { text-decoration: none; }

.blog-pagination { margin-top: 24px; }
.blog-pagination .nav-links { display: flex; gap: 8px; flex-wrap: wrap; }
.blog-pagination .page-numbers {
  padding: 8px 14px; border-radius: 6px; background: white;
  border: 1px solid var(--gray-200); font-size: 14px; color: var(--gray-800);
}
.blog-pagination .page-numbers.current {
  background: var(--blue); color: white; border-color: var(--blue);
}
.blog-pagination .page-numbers:hover:not(.current) { background: var(--gray-100); text-decoration: none; }

.blog-post-title { font-size: 32px; font-weight: 800; line-height: 1.3; margin-bottom: 24px; }
.blog-content { font-size: 16px; line-height: 1.85; color: var(--gray-800); }
.blog-content h2 { font-size: 22px; font-weight: 700; margin: 32px 0 14px; }
.blog-content h3 { font-size: 18px; font-weight: 700; margin: 24px 0 10px; }
.blog-content p  { margin-bottom: 18px; }
.blog-content ul, .blog-content ol { margin: 0 0 18px 24px; }
.blog-content li { margin-bottom: 6px; }
/* display:block + overflow-x:auto turns a wide table into its own scroll
   container without a wrapper element -- post-body tables with many/long
   columns were pushing the whole page wider than the viewport on mobile
   (found 2026-09-08, e.g. the Pusula Portföy analysis post: 438px vs 375px). */
.blog-content table { display: block; overflow-x: auto; width: 100%; border-collapse: collapse; font-size: 14px; margin-bottom: 20px; }
.blog-content th { background: var(--gray-100); padding: 10px 12px; text-align: left; font-weight: 600; border-bottom: 2px solid var(--gray-200); }
.blog-content td { padding: 9px 12px; border-bottom: 1px solid var(--gray-200); }
.blog-content tr:last-child td { border-bottom: none; }
.blog-content a { color: var(--blue); }
.blog-content strong { font-weight: 700; }

.blog-disclaimer {
  margin-top: 40px; padding: 16px 20px;
  background: var(--gray-100); border-radius: var(--radius);
  font-size: 13px; color: var(--gray-600);
  border-left: 3px solid var(--gray-400); line-height: 1.6;
}
.blog-disclaimer a { color: var(--gray-600); text-decoration: underline; }

.blog-cat-list { list-style: none; }
.blog-cat-list li { padding: 6px 0; border-bottom: 1px solid var(--gray-100); font-size: 14px; }
.blog-cat-list li:last-child { border-bottom: none; }
.blog-cat-list a { color: var(--gray-800); }
.blog-cat-list a:hover { color: var(--blue); text-decoration: none; }
.blog-cat-list .children { margin-left: 12px; }

.archive-heading { font-size: 24px; font-weight: 800; margin-bottom: 24px; }
.archive-heading span { color: var(--blue); }

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 768px) {
  .blog-layout { grid-template-columns: 1fr; }
  .blog-sidebar { display: none; }
  .blog-post-title { font-size: 24px; }
}
@media (max-width: 640px) {
  .header-search input { width: 160px; }
  .header-search input:focus { width: 200px; }
  .site-nav { display: none; }
  .home-hero h1 { font-size: 26px; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .bm-row { grid-template-columns: 70px 1fr 55px; }
}

/* ── AdSense reklam alanları ─────────────────────────────── */
.fi-ad { overflow: hidden; }
.fi-ad-content { margin: 20px 0; }
.fi-ad-sidebar { margin-bottom: 16px; }

/* Leaderboard sadece desktop'ta görünür */
.fi-ad-leaderboard { display: none; }
@media (min-width: 768px) {
  .fi-ad-leaderboard { display: block; background: #f8f9fa; border-bottom: 1px solid var(--gray-200); }
}

/* Sidebar reklamlar mobilde content-width'e dönüşür */
@media (max-width: 767px) {
  .fi-ad-sidebar { display: none; }
}