/* ---- layout & type stability ---- */
html {
  font-synthesis-weight: none; /* fake-bold yapma, genişlik oynamasın */
}
html, body {
  margin: 0;
  padding: 0;
  overflow-x: hidden; /* off-canvas ve 100vw sızıntılarını kes */
}
html, body{
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI",
               Roboto, Helvetica, Arial, "Noto Sans", sans-serif;
}
/* başlık fontu */
.font-display{ font-family: Outfit, ui-sans-serif, system-ui; }

/* Geçişler SADECE tema değişirken açılsın */
.theme-xfade,
.theme-xfade body,
.theme-xfade .surface,
.theme-xfade .welcome-box,
.theme-xfade .grad-blue,
.theme-xfade .card,
.theme-xfade .bottom-nav,
.theme-xfade .nav-indicator{
  transition: background-color .35s cubic-bezier(.2,.7,.2,1),
              color            .35s cubic-bezier(.2,.7,.2,1),
              border-color     .35s cubic-bezier(.2,.7,.2,1),
              box-shadow       .35s cubic-bezier(.2,.7,.2,1);
}
a,
a:focus,
a:active,
button,
button:focus,
button:active {
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

 * {
   margin: 0;
   padding: 0;  box-sizing: border-box;
  text-decoration: none;
} 


    html{
        min-height:100%;
        
    }

    body{
      height: 100%;
    }
    body {
      background: linear-gradient(115deg, #06090d, #2d3857, #06090d);
      color: #333;
      min-height: 100vh;
      padding-bottom: 80px;
    }

    .top-header {
      text-align: left;
      
      padding: 2rem 2rem 1rem;
      
      color: #fff;
      border-radius: 0 0 30px 30px;
      
    }

    .top-header h1 {
      font-size: x-large;
    }

    .grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
      gap: 20px;
      max-width: 100%;
      margin: 0 auto;
    }

    .card {
      background:linear-gradient(176deg, rgb(15, 21, 39, 0.5), rgb(36 35 55 / 0));
      border-radius: 20px;
      
      opacity: 0.8;
      padding: 20px 15px;
      text-align: center;
      backdrop-filter: blur(8px);
      box-shadow: 0 6px 16px rgba(0,0,0,0.06);
      transition: transform 0.25s ease, background-color 0.25s ease;
    }

    .card:hover {
      background-color:rgba(0, 0, 0, 0.34);
      transform: scale(1.05) ;
      box-shadow: 0 8px 16px rgba(0,0,0,0.3);
      cursor: pointer;
    }



    .card strong {
      font-size: 1.2rem;
      color: #fff;
    }

    .card p {
      font-size: 0.9rem;
      color:rgba(255, 255, 255, 0.7);
    }

    .bottom-nav {
      position: fixed;
      bottom: 0;
      left: 0; right: 0;
      background-color: #25263c;
      padding: 1rem;
      display: flex;
      justify-content: space-around;
      
      box-shadow: 0 -2px 8px rgba(0,0,0,0.05);
    }
    .bottom-nav a.active {
      color: #ffcc00;
      text-shadow: 0 0 8px rgba(255, 255, 0, 0.5);
    }
    .bottom-nav a {
      font-size: 1.5rem;
      color: #fff;
      transition: color 0.2s ease-in-out;
    }

    .bottom-nav a:hover {
      color: #cce0ff;
    }
    .nav-icon {
      width: 24px;
      height: 24px;
      transition: filter 0.3s ease;
      filter: invert(80%) sepia(10%) saturate(300%) hue-rotate(10deg) brightness(95%) contrast(90%);
    }
    .welcome-box {
      position: relative;
      margin: 20px auto;
      max-width: 85%;
      background: linear-gradient(176deg, rgb(15, 21, 39, -1.5), #242337e0);
      color: #ffffff57;
      padding: 16px 24px;
      border-radius: 20px;
      text-align: left;
      font-size: 1rem;
      box-shadow: 0 4px 10px rgba(0,0,0,0.05);
      transition: background-color 0.3s ease;
    }
    .welcome-box a{
      color:#f4f3ff99 ;
    }
    .welcome-box strong{
      font-size: 2rem;
      color: #fff;
    }
    .welcome-box:hover {
      background-color:rgba(0, 0, 0, 0.34);
    }
    .welcome-box img{
      
        position: absolute;
        top: -30px; 
        right: -15px; 
        max-width: 40%;
       
        
    }



.icon{ width:26px; height:26px; display:inline-block; color:#ffffff; }

:root{
  --c-words:#8ab4ff;
  --c-awl:#a78bfa;
  --c-grammar:#fbbf24;
  --c-listening:#22d3ee;
  --c-phrasal:#34d399;
  --c-profile:#e5e7eb;
}

/* Kart ve nav renkleri aynı paleti kullanır */
.card--words .icon, .nav--words .icon{ color: var(--c-words); }
.card--awl .icon, .nav--awl .icon{ color: var(--c-awl); }
.card--grammar .icon, .nav--grammar .icon{ color: var(--c-grammar); }
.card--listening .icon, .nav--listening .icon{ color: var(--c-listening); }
.card--phrasal .icon, .nav--phrasal .icon{ color: var(--c-phrasal); }
.card--profile .icon, .nav--profile .icon{ color: var(--c-profile); }
.card--mywords .icon, .nav--mywords .icon{ color : #4e8ef3; }

/* Hover/aktif vurgular */
.bottom-nav a[aria-current="page"] .icon{ filter: drop-shadow(0 0 10px rgba(95,106,246,.35)); }
.card:hover .icon{ transform: translateY(-1px); }    

.grid svg{
  width: 30px;
  height: 30px;
}



/* ALT NAV ANİMASYON — pill arka plan */
/* ALT NAV — ortak yapı + değişkenler */
.bottom-nav{
  position:fixed; left:0; right:0; bottom:0; z-index:50;
  display:flex; justify-content:space-around; gap:12px;
  background:#25263c; padding:6px 12px calc(14px + env(safe-area-inset-bottom));
  box-shadow:0 -2px 8px rgba(0,0,0,.08);
  /* JS bu değişkenleri günceller */
  --x:0px;        /* aktif linkin sol konumu */
  --w:64px;       /* aktif linkin genişliği */
  --cx:32px;      /* aktif linkin merkezi */
  --acc1:#5f6af6; --acc2:#2fd4ee; /* brand degrade */
}
.bottom-nav a{
  position:relative; z-index:1; display:flex; align-items:center; justify-content:center;
  width:64px; height:44px; border-radius:12px; color:#d9e4ff; text-decoration:none;
}
.bottom-nav a:is(:hover,[aria-current="page"]){ color:#fff; }
.bottom-nav .nav-icon,.bottom-nav .icon{ width:24px; height:24px; }

/* Indicator elemanı (şekli stile göre aşağıda belirlenir) */
.bottom-nav .nav-indicator{ position:absolute; left:0; pointer-events:none; }
@media (prefers-reduced-motion: reduce){
  .bottom-nav .nav-indicator{ transition:none!important; }
}
/* İnce çizgi animasyonu */
.bottom-nav.nav--underline .nav-indicator{
  bottom:8px; height:3px; width:var(--w);
  transform: translateX(var(--x));
  background: linear-gradient(90deg, var(--acc1), var(--acc2));
  border-radius:3px;
  transition: transform .35s cubic-bezier(.2,.7,.2,1), width .35s cubic-bezier(.2,.7,.2,1);
}



.skeleton{
  background: linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,.14), rgba(255,255,255,.06));
  background-size: 300% 100%;
  animation: skeleton-shine 1.1s linear infinite;
}
@keyframes skeleton-shine{ 0%{background-position:0 0} 100%{background-position:100% 0} }