/* /mbti.css */


   :root{
      --bg: #0b1220;                 /* koyu ama siyah değil */
      --panel: rgba(255,255,255,.06);
      --panel2: rgba(255,255,255,.045);
      --border: rgba(255,255,255,.12);
      --text: rgba(255,255,255,.92);
      --muted: rgba(255,255,255,.74);
      --shadow: 0 16px 60px rgba(0,0,0,.35);
      --ring: 0 0 0 3px rgba(96,165,250,.22);
      --a: rgba(147,197,253,.95);
      --accent: rgba(96,165,250,.95);
      --accent2: rgba(181,122,255,.85);
      --warn: rgba(255,190,92,.90);
      --ok: rgba(52,211,153,.90);
    }


    body{
      background:
        radial-gradient(1200px 700px at 15% -10%, rgba(96,165,250,.22), transparent 55%),
        radial-gradient(900px 500px at 92% 0%, rgba(181,122,255,.16), transparent 52%),
        radial-gradient(700px 400px at 50% 120%, rgba(52,211,153,.10), transparent 55%),
        var(--bg);
      color: var(--text);
    }


    .muted{ color: var(--muted) !important; }
    a{ color: var(--a); }
    .card{
      background: var(--panel);
      border: 1px solid var(--border);
      box-shadow: var(--shadow);
    }

    /* Layout */
    .page{
      display:grid;
      grid-template-columns: 1fr;
      gap: 14px;
    }
    .grid2{
      display:grid;
      grid-template-columns: 1.2fr 0.3fr;
      gap: 14px;
      align-items: stretch;
    }
    @media (max-width: 980px){
      .grid2{ grid-template-columns: 1fr; }
    }

    /* Hero */
    .hero{
      border-radius: 22px;
      padding: 18px;
    }
    .hero h1{
      font-size: 30px;
      margin: 0 0 10px;
      letter-spacing: .2px;
    }
    .hero p{
      margin: 0;
      line-height: 1.8;
      max-width: 78ch;
    }
    .hero-illus{
      border-radius: 18px;
      padding: 14px;
      background: var(--panel2);
      border: 1px solid rgba(255,255,255,.10);
      display:flex;
      align-items:center;
      justify-content:center;
      max-width: 200px;
      max-height: 400px;
      overflow:hidden;
    }
    .hero-illus img{
      width: max(200px, 92%);
      height: max(400px, 92%);
      filter: drop-shadow(0 18px 34px rgba(0,0,0,.45));
    }

    /* Chips */
    .chips{ display:flex; flex-wrap:wrap; gap:10px; margin-top:12px; }
    .chip{
      display:flex; align-items:center; gap:8px;
      padding:10px 12px;
      border-radius:999px;
      background: rgba(255,255,255,.065);
      border:1px solid rgba(255,255,255,.12);
      font-size: 14px;
      user-select:none;
    }
    .chip svg{ width:18px; height:18px; opacity:.95; }

    /* Buttons */
    .btn-row{ display:flex; flex-wrap:wrap; gap:10px; margin-top:14px; }
    .btn-primary{
      background: var(--accent);
      border-color: var(--accent);
      color: #071325;
    }
    .btn-primary:focus{ outline: none; box-shadow: var(--ring); }
    .btn-ghost{
      background: rgba(255,255,255,.06);
      border: 1px solid rgba(255,255,255,.12);
    }

    /* Sections */
    .section{
      border-radius: 22px;
      padding: 18px;
    }
    .section h2{
      font-size: 22px;
      margin: 0 0 10px;
    }

    /* Info cards grid */
    .infogrid{
      display:grid;
      grid-template-columns: repeat(3, minmax(0,1fr));
      gap: 12px;
      margin-top: 12px;
    }
    @media (max-width: 980px){
      .infogrid{ grid-template-columns: 1fr; }
    }
    .icard{
      border-radius: 18px;
      padding: 14px;
      background: var(--panel2);
      border: 1px solid rgba(255,255,255,.10);
    }
    .icard h3{
      margin: 0 0 8px;
      display:flex; gap:10px; align-items:center;
      font-size: 16px;
      letter-spacing:.2px;
    }
    .icard h3 svg{ width:20px; height:20px; opacity:.95; }
    .icard p{ margin: 0; line-height: 1.75; }

    /* Divider callouts */
    .callout{
      border-radius: 18px;
      padding: 14px;
      background: linear-gradient(180deg, rgba(96,165,250,.12), rgba(255,255,255,.03));
      border: 1px solid rgba(96,165,250,.22);
      margin-top: 12px;
    }

    /* Split list cards */
    .split{
      display:grid;
      grid-template-columns: repeat(2, minmax(0,1fr));
      gap: 12px;
      margin-top: 12px;
    }
    @media (max-width: 980px){
      .split{ grid-template-columns: 1fr; }
    }
    .list{
      margin: 0;
      padding-left: 18px;
      line-height: 1.85;
    }

    /* Function cards */
    .fgrid{
      display:grid;
      grid-template-columns: repeat(2, minmax(0,1fr));
      gap: 12px;
      margin-top: 12px;
    }
    @media (max-width: 980px){
      .fgrid{ grid-template-columns: 1fr; }
    }
    .fcard{
      border-radius: 18px;
      padding: 14px;
      background: var(--panel2);
      border: 1px solid rgba(255,255,255,.10);
    }
    .fhead{
      display:flex; align-items:center; gap:10px;
      margin-bottom: 8px;
    }
    .badge{
      font-size: 12px;
      padding: 6px 10px;
      border-radius: 999px;
      background: rgba(255,255,255,.06);
      border: 1px solid rgba(255,255,255,.12);
      white-space: nowrap;
    }
    .fcard h3{ margin:0; font-size: 16px; }
    .fcard p{ margin: 8px 0 0; line-height: 1.8; }

    /* Meter */
    .meter{
      display:grid; gap:10px; margin-top: 12px;
    }
    .bar{
      height: 10px;
      border-radius: 999px;
      background: rgba(255,255,255,.08);
      overflow:hidden;
      border: 1px solid rgba(255,255,255,.10);
    }
    .fill{
      height: 100%;
      background: linear-gradient(90deg, rgba(96,165,250,.90), rgba(181,122,255,.80));
      width: 70%;
    }

    /* Accordions */
    details.ac{
      border-radius: 18px;
      padding: 14px;
      background: var(--panel2);
      border: 1px solid rgba(255,255,255,.10);
    }
    details.ac + details.ac{ margin-top: 10px; }
    details.ac summary{
      cursor: pointer;
      font-weight: 800;
      color: rgba(255,255,255,.92);
      list-style: none;
    }
    details.ac summary::-webkit-details-marker{ display:none; }
    .ac-body{ margin-top: 10px; }

    /* Footer */
    footer{
      opacity: .9;
      padding: 6px 2px 18px;
    }

.hero-quote{
  border-radius: 16px;
  padding: 12px;
  background: linear-gradient(180deg, rgba(181,122,255,.12), rgba(255,255,255,.03));
  border: 1px solid rgba(181,122,255,.22);
  font-size: 13px;
  line-height: 1.7;
  color: rgba(255,255,255,.80);
}


/* =========================================================
   HEADER FIX: Topnav transparanlık / arkaplan etkilenmesin
   En sona ekle (override için).
   ========================================================= */

/* Header'ı her zaman kendi opak katmanına al */
.site-head,
.site-header,
header,
.site-header-wrap{
  position: relative;
  z-index: 9999; /* sayfadaki gradient / kartlardan üstte */
}

/* Header container hangi sınıfta ise yakalaması için geniş seçici */
.site-head{
  padding: 10px 0;
}

/* Header'ın arkasına opak bir "panel" bas.
   Not: wrap içinde header varsa arkaplanı stabilize eder. */
.site-head::before{
  content:"";
  position:absolute;
  inset:-10px -10px -10px -10px; /* biraz taşsın */
  background: rgba(2, 6, 23, .92); /* koyu, opak */
  border: 1px solid rgba(148,163,184,.20);
  border-radius: 18px;
  box-shadow: 0 18px 50px rgba(0,0,0,.55);
  z-index: -1; /* içerik üstte kalsın */
  pointer-events: none;
}

/* TOPNAV butonlarını opaklaştır (cam değil panel) */
.topnav-link,
.topnav .nav-item,
.topnav a{
  background: rgba(15, 23, 42, .92) !important; /* opak */
  border: 1px solid rgba(148,163,184,.28) !important;
  color: #e6eef8 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Hover */
.topnav-link:hover,
.topnav .nav-item:hover,
.topnav a:hover{
  background: rgba(30, 41, 59, .96) !important;
  border-color: rgba(148,163,184,.45) !important;
}

/* Aktif */
.topnav-link.is-active,
.topnav .nav-item.is-active,
.topnav a.is-active{
  background: rgba(2,41,71,.95) !important;
  border-color: rgba(255,255,255,.28) !important;
  color: #f9fafb !important;
}

/* Mega menu zaten koyu ama yine de garanti: */
.nav-mega{
  z-index: 10000;
}
.nav-mega-inner{
  background: #020617 !important;
  border: 1px solid rgba(148,163,184,.45) !important;
  box-shadow: 0 18px 60px rgba(15,23,42,.95) !important;
}

/* Eğer header üstteyken alttaki gradient "parlıyorsa", header metinlerini de sabitle */
.site-brand h1,
.site-brand a,
.site-brand{
  color: #f9fafb !important;
}