/* Shared design for all Can Matematik pages */
/* Self-hosted fonts (Turkish: Ç Ğ İ Ö Ş Ü ç ğ ı ö ş ü fully covered) */
@font-face {
  font-family: 'Baloo 2'; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url('../fonts/baloo-2-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Baloo 2'; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url('../fonts/baloo-2-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Nunito'; font-style: normal; font-weight: 200 1000; font-display: swap;
  src: url('../fonts/nunito-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Nunito'; font-style: normal; font-weight: 200 1000; font-display: swap;
  src: url('../fonts/nunito-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    /* ── LIGHT THEME (default) ── */
    :root {
      --navy:      #0a2a9e;
      --navy-hover:#0f3ec7;
      --blue:      #0b57ff;
      --blue-lt:   #e3ebff;
      --blue-mid:  #c2d3ff;
      --accent-rgb: 11,87,255;
      --accent-1:  #6b96ff;
      --accent-2:  #a9c1ff;
      --deco:      'π∑∫√';
      --font-display: 'Baloo 2', 'Nunito', system-ui, sans-serif;
      --font-body:    'Nunito', system-ui, -apple-system, sans-serif;
      --white:     #ffffff;
      --gray-50:   #93b1ff;
      --gray-100:  #a8c0ff;
      --gray-200:  #6f93ff;
      --gray-400:  #3c58a8;
      --gray-600:  #16307a;
      --gray-900:  #04123a;
      --ink:       #0b4fe6;

      --bg:        #b8ccff;
      --bg-alt:    #93b1ff;
      --surface:   #ffffff;
      --border:    #6f93ff;
      --text:      #04123a;
      --text-sub:  #16307a;
      --text-muted:#3c58a8;
      --nav-bg:    rgba(184,204,255,0.95);
    }

    /* ── SUBJECT THEMES (mat = default) ── */
    html[data-subject="fen"] {
      --navy: #0a5c1f; --navy-hover: #0f7a2b;
      --blue: #12bd3a; --blue-lt: #e2f8e7; --blue-mid: #bff0ca;
      --accent-rgb: 18,189,58; --accent-1: #5fdc7e; --accent-2: #a4efb8;
      --deco: '⚗⚛λμ';
      --gray-50: #76d993; --gray-100: #8de0a5; --gray-200: #4bc26e; --gray-400: #2f7a45; --gray-600: #14522a; --gray-900: #03200b; --ink: #0b7d24;
      --bg: #a6e8b7; --bg-alt: #76d993; --surface: #ffffff; --border: #4bc26e;
      --text: #03200b; --text-sub: #14522a; --text-muted: #2f7a45;
      --nav-bg: rgba(166,232,183,.95);
    }
    html[data-subject="tr"] {
      --navy: #8a2f00; --navy-hover: #a83a00;
      --blue: #ff6d00; --blue-lt: #ffefe0; --blue-mid: #ffd6b0;
      --accent-rgb: 255,109,0; --accent-1: #ff9a4d; --accent-2: #ffc08f;
      --deco: 'ğşçö';
      --gray-50: #ffa666; --gray-100: #ffb87f; --gray-200: #ff8c33; --gray-400: #a35a25; --gray-600: #7a3410; --gray-900: #2e0f00; --ink: #cc4a00;
      --bg: #ffc999; --bg-alt: #ffa666; --surface: #ffffff; --border: #ff8c33;
      --text: #2e0f00; --text-sub: #7a3410; --text-muted: #a35a25;
      --nav-bg: rgba(255,201,153,.95);
    }

    html { scroll-behavior: smooth; }

    body {
      font-family: var(--font-body);
      color: var(--text);
      background: var(--bg);
      line-height: 1.7;
      -webkit-font-smoothing: antialiased;
      transition: background .3s, color .3s;
    }

    /* ── NAV ── */
    nav {
      position: fixed; top: 0; left: 0; right: 0; z-index: 200;
      height: 68px;
      display: flex; align-items: center; justify-content: space-between;
      padding: 0 6%;
      background: var(--nav-bg);
      backdrop-filter: blur(18px);
      border-bottom: 1px solid var(--border);
      transition: background .3s, border-color .3s;
    }

    .nav-logo { text-decoration: none; }
    .nav-logo .brand {
      font-family: var(--font-display);
      font-size: 1.2rem; font-weight: 600;
      letter-spacing: .03em; color: var(--text);
    }
    .nav-logo .brand b { font-weight: 700; }
    .nav-logo .tag {
      display: block; font-size: .58rem; font-weight: 400;
      letter-spacing: .2em; color: var(--text-muted);
      text-transform: uppercase; line-height: 1;
    }

    .nav-links { display: flex; align-items: center; gap: 2rem; list-style: none; }
    .nav-links a {
      text-decoration: none; color: var(--text-sub);
      font-size: .88rem; font-weight: 400;
      transition: color .2s;
    }
    .nav-links a:hover { color: var(--text); }

    .nav-btn {
      background: var(--navy) !important; color: #ffffff !important;
      padding: .48rem 1.2rem; border-radius: 8px;
      font-size: .82rem !important; font-weight: 500 !important;
      transition: opacity .2s !important;
    }
    .nav-btn:hover { opacity: .8; }

    .hamburger {
      display: none; flex-direction: column; gap: 5px;
      background: none; border: none; cursor: pointer;
    }
    .hamburger span { width: 22px; height: 1.5px; background: var(--navy); border-radius: 2px; }


    /* math symbols floating bg */
    .math-bg {
      position: absolute; inset: 0;
      pointer-events: none; overflow: hidden;
      z-index: 0;
    }
    .math-sym {
      position: absolute;
      font-family: var(--font-display); font-weight: 600;
      font-size: 1.8rem;
      color: rgba(var(--accent-rgb), 0.09);
      animation: floatSym linear infinite;
      user-select: none;
    }
    @keyframes floatSym {
      0%   { transform: translateY(0)   rotate(0deg);   opacity: 0; }
      10%  { opacity: 1; }
      90%  { opacity: 1; }
      100% { transform: translateY(-100vh) rotate(20deg); opacity: 0; }
    }


    .btn-dark {
      display: inline-flex; align-items: center; gap: .5rem;
      background: var(--navy); color: #fff;
      padding: .85rem 1.8rem; border-radius: 9px;
      font-weight: 500; font-size: .9rem; text-decoration: none;
      transition: background .2s, transform .15s;
    }
    .btn-dark:hover { background: var(--navy-hover); transform: translateY(-2px); }

    .btn-line {
      display: inline-flex; align-items: center; gap: .5rem;
      border: 1.5px solid var(--border); color: var(--text-sub);
      padding: .85rem 1.8rem; border-radius: 9px;
      font-weight: 500; font-size: .9rem; text-decoration: none;
      transition: border-color .2s, color .2s;
    }
    .btn-line:hover { border-color: var(--text); color: var(--text); }


    .s-kicker {
      font-size: .72rem; font-weight: 500; letter-spacing: .15em;
      text-transform: uppercase; color: var(--blue);
      display: block; margin-bottom: .7rem;
    }
    .s-title {
      font-family: var(--font-display);
      font-size: clamp(1.8rem, 3vw, 2.6rem);
      font-weight: 600; color: var(--text);
      line-height: 1.12; margin-bottom: 1rem;
    }
    .s-sub {
      font-size: .95rem; color: var(--text-sub);
      max-width: 520px; line-height: 1.8;
    }


    /* ── FOOTER ── */
    footer {
      background: var(--bg); border-top: 1px solid var(--border);
      padding: 2.5rem 6%; text-align: center; color: var(--text-muted);
    }
    .ft-brand {
      font-family: var(--font-display);
      font-size: 1.1rem; font-weight: 600; letter-spacing: .05em;
      color: var(--text); margin-bottom: .25rem;
    }
    footer p { font-size: .78rem; }



    .hero-kicker {
      display: inline-flex; align-items: center; gap: .5rem;
      font-size: .75rem; font-weight: 500; letter-spacing: .1em;
      text-transform: uppercase; color: var(--blue);
      margin-bottom: 1.4rem;
    }
    .hero-kicker::before {
      content: '';
      display: inline-block; width: 24px; height: 1.5px;
      background: var(--blue);
    }

    .hero-title {
      font-family: var(--font-display);
      font-size: clamp(2.4rem, 4.5vw, 3.8rem);
      font-weight: 600;
      line-height: 1.08;
      color: var(--text);
      margin-bottom: 1.4rem;
      letter-spacing: 0;
    }
    .hero-title em {
      font-style: normal;
      color: var(--blue);
    }

    .hero-sub {
      font-size: 1rem; font-weight: 400;
      color: var(--text-sub); max-width: 440px;
      margin-bottom: 2.2rem; line-height: 1.8;
    }


    .nav-links a.active { color: var(--blue); }

    /* ── PAGE HERO (sub pages) ── */
    .page-hero {
      position: relative; overflow: hidden;
      padding: 130px 6% 70px; background: var(--bg);
      text-align: center; border-bottom: 1px solid var(--border);
    }
    .page-hero-inner { position: relative; z-index: 1; max-width: 760px; margin: 0 auto; }
    .page-hero .hero-kicker { justify-content: center; }
    .page-hero .hero-title { font-size: clamp(2.3rem, 5vw, 3.5rem); }
    .page-hero .hero-sub { margin: 0 auto; max-width: 560px; }

    /* ── NAV (mobile) ── */
    @media(max-width:960px) {
      nav .nav-links { display:none; }
      .hamburger { display:flex; }
      .nav-links.open {
        display:flex; flex-direction:column;
        position:fixed; top:68px; left:0; right:0;
        background:var(--surface); padding:1.5rem 6%;
        border-bottom:1px solid var(--border);
        gap:1.2rem; z-index:199;
      }
    }

    /* ── WHATSAPP FLOAT ── */
    .wa-float {
      position: fixed; bottom: 2rem; right: 2rem;
      width: 56px; height: 56px; background: #25d366;
      border-radius: 50%; display: flex; align-items: center; justify-content: center;
      box-shadow: 0 4px 20px rgba(37,211,102,.45);
      z-index: 500; text-decoration: none;
      transition: transform .2s, box-shadow .2s;
    }
    .wa-float:hover { transform: scale(1.1); box-shadow: 0 8px 28px rgba(37,211,102,.6); }
    .wa-float svg { width: 30px; height: 30px; fill: #fff; }

    /* ── SUBJECT SWITCH ── */
    .subj-switch {
      display: flex; align-items: center; gap: .55rem;
      background: var(--bg-alt); border: 1.5px solid var(--border);
      border-radius: 99px; padding: 5px 12px 5px 8px;
    }
    .subj-dots { display: flex; gap: 6px; }
    .subj-dots button {
      width: 20px; height: 20px; border-radius: 50%; border: none;
      background: var(--c); cursor: pointer; opacity: .55;
      transition: transform .2s, opacity .2s, box-shadow .2s;
    }
    .subj-dots button:hover { opacity: .9; transform: scale(1.1); }
    .subj-dots button.active {
      opacity: 1; transform: scale(1.1);
      box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--c);
    }
    .subj-name { font-size: .74rem; font-weight: 500; color: var(--text-sub); min-width: 4.2rem; }
    @media(max-width:640px) { .subj-name { display: none; } .subj-switch { padding: 5px 8px; } }
    @media(max-width:480px) {
      nav { padding: 0 4%; }
      .nav-logo .brand { font-size: 1rem; letter-spacing: .03em; }
      .nav-logo .tag { letter-spacing: .12em; }
      .nav-buki { width: 28px; height: 28px; }
      .subj-dots button { width: 17px; height: 17px; }
    }

    /* ── BUKI MASCOT ── */
    .nav-buki {
      width: 34px; height: 34px; object-fit: contain;
      animation: bukiWiggle 5s ease-in-out infinite;
      transform-origin: bottom center;
    }
    @keyframes bukiWiggle {
      0%, 85%, 100% { transform: rotate(0deg); }
      88% { transform: rotate(-8deg); }
      91% { transform: rotate(7deg); }
      94% { transform: rotate(-4deg); }
      97% { transform: rotate(0deg); }
    }

    @keyframes bukiBob {
      0%, 100% { transform: translateY(0); }
      50%      { transform: translateY(-6px); }
    }

    /* hero intro card — Buki as part of the card stack, not a floating sticker */
    .buki-intro {
      display: flex; align-items: center; gap: 1rem;
      background: var(--blue-lt);
      border: 1px solid var(--blue-mid);
      border-radius: 18px; padding: 1.1rem 1.4rem;
    }
    .buki-intro img {
      width: 60px; height: 60px; object-fit: contain; flex-shrink: 0;
      animation: bukiBob 3.4s ease-in-out infinite;
    }
    .buki-intro h4 {
      font-family: var(--font-display);
      font-size: .92rem; font-weight: 500; color: var(--text); margin-bottom: .2rem;
    }
    .buki-intro p { font-size: .8rem; color: var(--text-sub); line-height: 1.5; }

    /* 3D Buki that follows the cursor everywhere */
    .buki-follow {
      position: fixed; left: 0; top: 0; z-index: 450;
      width: 210px; height: 220px;
      pointer-events: none; opacity: 0; transition: opacity .5s;
      will-change: transform;
    }
    .buki-follow.ready { opacity: 1; }
    @media (hover: none), (pointer: coarse) {
      .buki-follow { width: 150px; height: 158px; pointer-events: auto; touch-action: pan-y; }
    }
    @media (max-width: 640px) { .buki-follow { width: 150px; height: 158px; } }
    @media print { .buki-follow { display: none; } }

    /* inline avatar next to a section kicker/heading */
    .buki-row { display: flex; align-items: center; gap: .7rem; }
    .buki-row img {
      width: 42px; height: 42px; object-fit: contain; flex-shrink: 0;
      animation: bukiBob 3.4s ease-in-out infinite;
    }

    /* centered avatar sitting inside a card's own content */
    .buki-inline {
      width: 60px; height: 60px; object-fit: contain;
      margin: 0 auto .9rem;
      animation: bukiBob 3.4s ease-in-out infinite;
    }

/* rounded display font on buttons and small headings */
.btn-dark, .btn-line, .btn-white, .nav-btn, .trial-btn, .f-submit, .nav-cta, .s-kicker, .hero-kicker {
  font-family: var(--font-display) !important; letter-spacing: .02em;
}
.s-kicker, .hero-kicker { font-weight: 500; }