/* ═══════════════════════════════════════
   GLOBAL RESETS + UNIVERSAL PLATFORM SUPPORT
   ═══════════════════════════════════════ */
*{box-sizing:border-box;margin:0;padding:0}
html{
  -webkit-text-size-adjust:100%;
  -moz-text-size-adjust:100%;
  text-size-adjust:100%;
  -webkit-tap-highlight-color:transparent;
  overflow:hidden!important;
  height:100%;
}
html,body{
  width:100%;
  height:100%;
  max-height:100vh;
  max-height:100dvh;
  font-family:'Segoe UI','Noto Sans',Arial,sans-serif;
  color:#0f172a;
  background:#D4F1FF;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
body{
  overflow:hidden!important;
  height:100%!important;
  padding-top:0!important;
  padding-bottom:0!important;
  margin:0!important;
}
a{text-decoration:none;color:inherit}
button{font-family:inherit;border:0;background:none;cursor:pointer;color:inherit}
img,video,svg{max-width:100%;height:auto}

/* Custom selection */
::selection{background:rgba(20,184,166,.3);color:#0f172a}
::-moz-selection{background:rgba(20,184,166,.3);color:#0f172a}

/* Scrollbar gizle */
::-webkit-scrollbar{display:none;width:0;height:0}
html{scrollbar-width:none}

/* Focus visible — keyboard a11y */
:focus{outline:none}
:focus-visible{
  outline:2px solid #14b8a6;
  outline-offset:2px;
  border-radius:4px;
  box-shadow:0 0 0 4px rgba(20,184,166,.25);
}

/* Reduced motion */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
}

/* Reduced data */
@media(prefers-reduced-data:reduce){
  *{animation:none!important;transition:none!important}
}

/* High contrast */
@media(prefers-contrast:more){
  .level-btn,.topic-box,.usage-box{border:2px solid #0f172a!important}
  .back{border:2px solid #0f172a!important}
}

/* ═══════════════════════════════════════
   VIEW SISTEMI (3 sayfa)
   ═══════════════════════════════════════ */
.view{display:none;min-height:100vh;padding:40px 28px 80px;animation:fadeIn .35s ease both;position:relative;z-index:1}
.view.active{display:block}

/* Konu ve sticky ekranları kaydırılabilir (toolbar altından başlar) */
#view-topics.active,
#view-stickies.active{
  height:100vh;
  height:100dvh;
  overflow-y:auto;
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  /* Ortala - sticky dock bu ekranlarda görünmüyor */
  padding-left: max(20px, 4vw);
  padding-right: max(20px, 4vw);
  z-index: 100;
  box-sizing: border-box;
  padding-top:calc(var(--toolbar-height,56px) + 20px);
  box-sizing:border-box;
}

/* 1. katman — tam ekran, toolbar üstte sabit overlay, kutular ortada */
#view-levels{
  padding:0;
  height:100vh;
  height:100dvh;
  overflow:hidden;
  box-sizing:border-box;
  animation:none; /* transform'lu fadeIn yok — fixed sahne viewport'a göre sabit kalsın */
}
#view-levels.active{display:block}
/* Başlık + kutular TEK bağlı sahne — demo.html'deki dbox-wrap gibi:
   ekran ortasına çakılı, içerik büyüse de simetrik (kaymaz), sadece vmin ile orantılı ölçeklenir */
#view-levels .levels-stage{
  position:fixed;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:min(1.8vmin, 1.8vh);
  width:min(94vw, 92vmin);
  max-height:88vh;
  max-height:88dvh;
  z-index:1;
  pointer-events:none;
  overflow:visible;
}
#view-levels .levels-stage > *{ pointer-events:auto; }
#view-levels .head{ margin-bottom:0; }
#view-levels .levels-wrap{max-width:min(94vw,90vmin);width:100%;padding:0 min(1.8vmin, 1.8vh);box-sizing:border-box}
@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.head{display:flex;align-items:center;justify-content:center;gap:min(0.8vmin,8px);margin-bottom:min(1.2vmin,12px);flex-wrap:wrap}
.head h1,.head h2{margin:0;font-size:min(2vmin,20px);font-weight:700;letter-spacing:-.01em;color:#0f172a}
.head .sub{color:#64748b;font-size:min(1.2vmin,12px);font-weight:500}
.back{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 18px;border-radius:12px;
  background:#fff;color:#0f172a;font-weight:700;font-size:14px;
  box-shadow:0 2px 0 #cbd5e1,0 6px 14px rgba(15,23,42,.10);
  transition:transform .2s,box-shadow .2s;
}
.back:hover{transform:translateY(-2px);box-shadow:0 4px 0 #cbd5e1,0 10px 20px rgba(15,23,42,.15)}
.back:active{transform:translateY(1px);box-shadow:0 1px 0 #cbd5e1,0 3px 8px rgba(15,23,42,.10)}

/* ═══════════════════════════════════════
   1) SEVİYE BUTONLARI - 3D ULTRA HIGH CLASS (%50 küçültülmüş, ortalı)
   ═══════════════════════════════════════ */
.levels-wrap{
  max-width:min(94vw, 92vmin);margin:0 auto;padding:0 min(2vmin, 2vh);box-sizing:border-box;
  width:100%;
}
.levels-grid{
  display:grid;
  /* 4 sütun → 8 kutu = 4 üst / 4 alt */
  grid-template-columns:repeat(4, 1fr);
  gap:min(2vmin, 2vh);
  position:relative;
  width:100%;
  box-sizing:border-box;
}
/* Tablet (650px ve altı) → 3 sütun */
@media(max-width:650px){
  .levels-grid{
    grid-template-columns:repeat(3, 1fr);
    gap:min(1.6vmin, 1.6vh);
  }
}
/* Mobil (450px ve altı) → 2 sütun */
@media(max-width:450px){
  .levels-grid{
    grid-template-columns:repeat(2, 1fr);
    gap:min(1.4vmin, 1.4vh);
  }
}

/* DİKEY MOD CSS'i dosyanın sonunda - .sd-dock stillerinden SONRA tanımlı */

/* Kutular arasında dolaşan ışık */
.levels-grid::before{
  content:"";position:absolute;
  width:min(10vmin,90px);height:min(10vmin,90px);border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.4) 0%,rgba(135,206,235,.2) 40%,transparent 70%);
  filter:blur(min(1.8vmin,16px));
  pointer-events:none;z-index:0;
  animation:wanderLight 12s ease-in-out infinite;
}
.levels-grid::after{
  content:"";position:absolute;
  width:min(6vmin,60px);height:min(6vmin,60px);border-radius:50%;
  background:radial-gradient(circle,rgba(200,230,255,.3) 0%,rgba(100,200,240,.12) 50%,transparent 70%);
  filter:blur(min(1.4vmin,12px));
  pointer-events:none;z-index:0;
  animation:wanderLight2 15s ease-in-out infinite;
}
@keyframes wanderLight{
  0%  {top:10%;left:5%;opacity:.4}
  15% {top:5%;left:45%;opacity:.7}
  30% {top:15%;left:85%;opacity:.5}
  45% {top:55%;left:75%;opacity:.65}
  60% {top:60%;left:35%;opacity:.5}
  75% {top:50%;left:10%;opacity:.7}
  90% {top:20%;left:25%;opacity:.45}
  100%{top:10%;left:5%;opacity:.4}
}
@keyframes wanderLight2{
  0%  {top:55%;left:80%;opacity:.3}
  20% {top:50%;left:20%;opacity:.55}
  40% {top:10%;left:55%;opacity:.4}
  60% {top:40%;left:90%;opacity:.6}
  80% {top:60%;left:15%;opacity:.35}
  100%{top:55%;left:80%;opacity:.3}
}

.level-btn>*{pointer-events:none}
.level-btn{
  position:relative;z-index:1;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:min(1.5vmin, 1.5vh);
  cursor:pointer;text-decoration:none;
  padding:min(3.5vmin, 3.5vh) min(2.5vmin, 2.5vh);
  border-radius:min(2vmin, 18px);
  color:#fff;
  min-height:min(22vmin, 22vh);
  width:100%;
  aspect-ratio:1/1.1;
  background:
    linear-gradient(180deg, rgba(255,255,255,.30) 0%, rgba(255,255,255,0) 38%, rgba(0,0,0,.10) 100%),
    linear-gradient(135deg, var(--c1) 0%, var(--c2) 55%, var(--c3) 100%);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.55),
    inset 0 -3px 0 rgba(0,0,0,.18),
    inset 0 0 0 1px rgba(255,255,255,.15),
    0 4px 0 var(--c3),
    0 8px 16px rgba(15,23,42,.28),
    0 16px 36px rgba(15,23,42,.18);
  transform-origin:center;
  transition:transform .3s cubic-bezier(.2,.85,.4,1.4),box-shadow .35s ease,filter .25s;
  overflow:hidden;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
  user-select:none;
}
.level-btn::before{
  content:"";position:absolute;top:0;left:0;right:0;height:40%;
  background:linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,.12) 50%,rgba(255,255,255,0));
  border-radius:min(2vmin,18px) min(2vmin,18px) 50% 50%/min(2vmin,18px) min(2vmin,18px) 100% 100%;
  pointer-events:none;
}
.level-btn::after{
  content:"";position:absolute;right:min(-1.5vmin,-12px);bottom:min(-1.5vmin,-12px);
  width:min(8vmin,65px);height:min(8vmin,65px);border-radius:50%;
  background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.25),transparent 55%);
  pointer-events:none;
}

/* Işık huzmesi — kaldırıldı (kutuların zeminden ayrı titreme hissini önler) */
.level-btn .lvl-glow{
  display:none;
}
@keyframes glowSpin{
  from{--glow-angle:0deg}
  to{--glow-angle:360deg}
}
@property --glow-angle{
  syntax:"<angle>";
  initial-value:0deg;
  inherits:false;
}

/* Emoji süzülme animasyonu */
.level-btn .lvl-emoji{
  position:relative;z-index:1;
  animation:emojiFloat 3s ease-in-out infinite;
}
.level-btn:nth-child(1) .lvl-emoji{animation-delay:0s}
.level-btn:nth-child(2) .lvl-emoji{animation-delay:-.5s}
.level-btn:nth-child(3) .lvl-emoji{animation-delay:-1s}
.level-btn:nth-child(4) .lvl-emoji{animation-delay:-1.5s}
.level-btn:nth-child(5) .lvl-emoji{animation-delay:-2s}
.level-btn:nth-child(6) .lvl-emoji{animation-delay:-2.5s}
.level-btn:nth-child(7) .lvl-emoji{animation-delay:-.8s}
.level-btn:nth-child(8) .lvl-emoji{animation-delay:-1.3s}
@keyframes emojiFloat{
  0%,100%{transform:translateY(0) rotate(0deg)}
  25%{transform:translateY(-3px) rotate(3deg)}
  75%{transform:translateY(2px) rotate(-2deg)}
}
.level-btn:hover{
  transform:translateY(-4px) scale(1.04);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.65),
    inset 0 -3px 0 rgba(0,0,0,.18),
    inset 0 0 0 1px rgba(255,255,255,.2),
    0 8px 0 var(--c3),
    0 14px 24px rgba(15,23,42,.30),
    0 24px 50px rgba(15,23,42,.20);
  filter:brightness(1.06) saturate(1.08);
}
.level-btn:active{
  transform:translateY(2px) scale(.99);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.45),
    inset 0 -2px 0 rgba(0,0,0,.18),
    inset 0 0 0 1px rgba(255,255,255,.1),
    0 1px 0 var(--c3),
    0 3px 8px rgba(15,23,42,.25);
}
/* ═══ SEVİYE KUTULARI YAZILARI — EKRANA ORANTILI, 3D PREMIUM ═══ */
.level-btn .lvl-emoji{
  font-size:min(4vmin, 4vh);line-height:1;display:block;
  filter:drop-shadow(0 3px 6px rgba(0,0,0,.35)) drop-shadow(0 1px 2px rgba(0,0,0,.25));
  position:relative;z-index:1;
}
.level-btn .lvl-code,.level-btn .lvl-name,.level-btn .lvl-count{position:relative;z-index:1}
.level-btn .lvl-code{
  font-size:min(3vmin, 3vh);font-weight:900;letter-spacing:-.01em;line-height:1.1;
  text-shadow:
    0 2px 0 rgba(0,0,0,.4),
    0 3px 8px rgba(0,0,0,.35),
    0 0 18px rgba(255,255,255,.15);
}
.level-btn .lvl-name{
  font-size:min(1.5vmin, 1.5vh);font-weight:700;opacity:.95;letter-spacing:.06em;
  text-shadow:
    0 1px 0 rgba(0,0,0,.35),
    0 2px 6px rgba(0,0,0,.3);
  text-align:center;
  text-transform:uppercase;
  max-width:100%;
  line-height:1.25;
}
.level-btn .lvl-count{
  display:inline-block;
  background:linear-gradient(180deg,rgba(255,255,255,.35),rgba(255,255,255,.18));
  border:1.5px solid rgba(255,255,255,.6);
  padding:min(.5vmin,.5vh) min(1.4vmin,1.4vh);border-radius:99px;
  font-size:min(1.2vmin, 1.2vh);font-weight:800;letter-spacing:.05em;
  backdrop-filter:blur(12px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.5),
    0 2px 4px rgba(0,0,0,.25);
  white-space:nowrap;
}

/* Seviye renkleri */
.l-pre-a1{--c1:#5eead4;--c2:#14b8a6;--c3:#0d9488}
.l-a1{--c1:#fcd34d;--c2:#f59e0b;--c3:#b45309}
.l-a2{--c1:#fda4af;--c2:#ec4899;--c3:#be185d}
.l-b1{--c1:#c4b5fd;--c2:#8b5cf6;--c3:#6d28d9}
.l-b2{--c1:#6ee7b7;--c2:#10b981;--c3:#047857}
.l-c1{--c1:#fdba74;--c2:#f97316;--c3:#c2410c}
.l-c2{--c1:#93c5fd;--c2:#3b82f6;--c3:#1e40af}
.l-demo{--c1:#f0abfc;--c2:#a855f7;--c3:#7e22ce}
.l-exam{--c1:#5eead4;--c2:#0d9488;--c3:#0f766e}

/* ═══════════════════════════════════════
   2) KONU KUTULARI - 3D
   ═══════════════════════════════════════ */
.topics-wrap{
  max-width:1280px;margin:0 auto;
  perspective:1400px;perspective-origin:50% 30%;
}
.topics-section{margin-bottom:42px}
.topics-section h2{
  font-size:18px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:#475569;margin:0 0 18px;
  display:flex;align-items:center;gap:10px;
}
.topics-section h2::before{
  content:"";width:8px;height:24px;border-radius:4px;
  background:var(--level-c2,#14b8a6);
  box-shadow:0 2px 0 var(--level-c3,#0d9488);
}
.topics-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
  gap:14px;
  max-width: 1200px;
  margin: 0 auto;
  box-sizing: border-box;
}
/* Mobil için konu kutuları */
@media(max-width:480px){
  .topics-grid{
    grid-template-columns:1fr;
    gap:12px;
  }
}
@media(min-width:481px) and (max-width:768px){
  .topics-grid{
    grid-template-columns:repeat(2,1fr);
    gap:12px;
  }
}
.topic-box{
  position:relative;display:block;cursor:pointer;
  padding:14px 14px 16px;border-radius:14px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.5) 0%,rgba(255,255,255,0) 40%,rgba(0,0,0,.06) 100%),
    linear-gradient(135deg,#ffffff 0%,#f8fafc 100%);
  color:#0f172a;
  min-height:120px;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.9),
    inset 0 -3px 0 rgba(0,0,0,.05),
    inset 0 0 0 1px rgba(0,0,0,.04),
    0 5px 0 var(--level-c3,#0d9488),
    0 10px 18px rgba(15,23,42,.12),
    0 20px 40px rgba(15,23,42,.08);
  transform:translateY(0);
  transition:transform .3s cubic-bezier(.2,.85,.4,1.4),box-shadow .3s,filter .25s;
  overflow:hidden;
}
.topic-box::before{
  content:"";position:absolute;top:0;left:0;right:0;height:6px;
  background:linear-gradient(90deg,var(--level-c1,#5eead4),var(--level-c2,#14b8a6),var(--level-c3,#0d9488));
  border-radius:18px 18px 0 0;
}
.topic-box::after{
  content:"";position:absolute;right:-20px;top:-20px;
  width:80px;height:80px;border-radius:50%;
  background:radial-gradient(circle,var(--level-c1,#5eead4) 0%,transparent 60%);
  opacity:.18;pointer-events:none;
}
.topic-box:hover{
  transform:translateY(-5px) scale(1.04);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.95),
    inset 0 -3px 0 rgba(0,0,0,.05),
    inset 0 0 0 1px var(--level-c2,#14b8a6),
    0 10px 0 var(--level-c3,#0d9488),
    0 18px 30px rgba(15,23,42,.18),
    0 30px 50px rgba(15,23,42,.12);
}
.topic-box:hover::after{opacity:.35;transform:scale(1.4)}
.topic-box:active{
  transform:translateY(3px) scale(.99);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.7),
    inset 0 -2px 0 rgba(0,0,0,.05),
    inset 0 0 0 1px rgba(0,0,0,.04),
    0 1px 0 var(--level-c3,#0d9488),
    0 3px 8px rgba(15,23,42,.12);
}
.topic-box .t-num{
  display:inline-block;
  font-size:11px;font-weight:800;letter-spacing:.1em;
  color:var(--level-c3,#0d9488);
  background:var(--level-c1-soft,rgba(94,234,212,.25));
  padding:3px 9px;border-radius:99px;
  margin-bottom:10px;
  text-transform:uppercase;
}
.topic-box .t-title{
  font-size:17px;font-weight:700;line-height:1.25;
  color:#0f172a;letter-spacing:-.005em;
}
.topic-box .t-en{
  display:block;margin-top:4px;
  font-size:13px;font-weight:500;color:#64748b;
  font-style:italic;
}
.topic-box .t-arrow{
  position:absolute;right:14px;bottom:14px;
  width:28px;height:28px;border-radius:50%;
  background:var(--level-c2,#14b8a6);
  color:#fff;font-size:16px;font-weight:700;
  display:grid;place-items:center;
  box-shadow:0 2px 0 var(--level-c3,#0d9488);
  transition:transform .25s;
}
.topic-box:hover .t-arrow{transform:translateX(3px) rotate(-8deg) scale(1.15)}

/* Konu kutusu — büyük emoji (sağ üst köşede, çocuk dostu) */
.topic-box .t-emoji{
  position:absolute;
  right:10px;
  top:8px;
  font-size:44px;
  line-height:1;
  filter:drop-shadow(0 4px 6px rgba(0,0,0,.20));
  transition:transform .4s cubic-bezier(.2,.85,.4,1.6),filter .25s;
  z-index:3;
  pointer-events:none;
  transform-origin:center;
}
.topic-box:hover .t-emoji{
  transform:scale(1.28) rotate(-12deg) translateY(-3px);
  filter:drop-shadow(0 8px 10px rgba(0,0,0,.25)) saturate(1.15);
  animation:emojiBounce .6s ease;
}
@keyframes emojiBounce{
  0%{transform:scale(1) rotate(0)}
  30%{transform:scale(1.35) rotate(-15deg) translateY(-5px)}
  60%{transform:scale(1.2) rotate(8deg) translateY(-2px)}
  100%{transform:scale(1.28) rotate(-12deg) translateY(-3px)}
}
/* Başlık ve alt başlığa sağda biraz nefes alanı (emoji ile çakışmasın) */
.topic-box .t-title{padding-right:50px}
.topic-box .t-en{padding-right:50px}
/* Mobilde biraz daha küçük */
@media(max-width:560px){
  .topic-box .t-emoji{font-size:36px;right:8px;top:6px}
  .topic-box .t-title,.topic-box .t-en{padding-right:42px}
}

/* ── Golden kilit rozeti (sol-alt köşe; diğer görselleri kapatmaz) ── */
.topic-box .t-lock{
  position:absolute;
  left:12px;
  bottom:12px;
  width:30px;height:30px;
  border-radius:9px;
  display:grid;place-items:center;
  background:linear-gradient(145deg,#fdeeb0 0%,#f1c34e 42%,#d39a1e 72%,#b9810f 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.85),
    inset 0 -2px 3px rgba(120,78,8,.45),
    0 2px 5px rgba(150,100,15,.45),
    0 0 0 1.5px rgba(255,255,255,.4);
  z-index:4;
  pointer-events:none;
  transition:transform .35s cubic-bezier(.2,.85,.4,1.6),box-shadow .25s;
}
.topic-box .t-lock svg{width:16px;height:16px;display:block}
.topic-box .t-lock svg path{fill:#6b4708}
/* hafif altın parıltı (sürekli, çok belirsiz) */
.topic-box .t-lock::after{
  content:"";
  position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.65) 48%,transparent 62%);
  background-size:220% 220%;
  background-position:120% 0;
  opacity:.0;
  transition:opacity .3s;
}
/* Kutunun üzerine gelince kilit hareket etsin (kullanıcı hareket efekti istedi) */
.topic-box:hover .t-lock{
  transform:translateY(-3px) rotate(-7deg) scale(1.14);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 -2px 3px rgba(120,78,8,.5),
    0 6px 13px rgba(150,100,15,.55),
    0 0 0 1.5px rgba(255,255,255,.55),
    0 0 14px rgba(245,200,80,.65);
  animation:lockWiggle .6s ease;
}
.topic-box:hover .t-lock::after{
  opacity:1;
  animation:lockShine .9s ease;
}
@keyframes lockWiggle{
  0%{transform:translateY(0) rotate(0) scale(1)}
  30%{transform:translateY(-4px) rotate(-11deg) scale(1.2)}
  60%{transform:translateY(-2px) rotate(6deg) scale(1.1)}
  100%{transform:translateY(-3px) rotate(-7deg) scale(1.14)}
}
@keyframes lockShine{
  from{background-position:120% 0}
  to{background-position:-40% 0}
}
@media(max-width:560px){
  .topic-box .t-lock{width:26px;height:26px;left:10px;bottom:10px;border-radius:8px}
  .topic-box .t-lock svg{width:14px;height:14px}
}

/* ═══════════════════════════════════════
   2.5) BECERİLER BANNER + ÖZEL KART STİLLERİ
   ═══════════════════════════════════════ */
.topics-section h2 .sec-emoji{
  font-size:24px;
  filter:drop-shadow(0 2px 0 rgba(15,23,42,.08));
  margin-right:4px;
}

.skills-banner{
  margin:70px 0 36px;
  text-align:center;
  perspective:1000px;
}
.skills-banner-inner{
  display:inline-flex;
  align-items:center;
  gap:18px;
  padding:18px 36px;
  background:linear-gradient(135deg,#fbbf24 0%,#f59e0b 50%,#ea580c 100%);
  border-radius:999px;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.6),
    inset 0 -4px 0 rgba(0,0,0,.18),
    0 8px 0 #c2410c,
    0 16px 32px rgba(234,88,12,.35),
    0 30px 60px rgba(15,23,42,.18);
  transform:rotate(-1deg) translateZ(0);
  position:relative;
}
.skills-banner-inner::before{
  content:"";position:absolute;left:-12px;right:-12px;top:50%;
  height:2px;
  background:linear-gradient(90deg,transparent,#cbd5e1 20%,#cbd5e1 80%,transparent);
  z-index:-1;
}
.skills-banner .sb-text{
  display:flex;flex-direction:column;align-items:flex-start;line-height:1;
}
.skills-banner .sb-text h3{
  margin:0;font-size:24px;font-weight:900;color:#fff;
  letter-spacing:.02em;text-shadow:2px 2px 0 rgba(0,0,0,.18);
}
.skills-banner .sb-sub{
  margin-top:4px;font-size:13px;font-weight:700;color:rgba(255,255,255,.92);
  letter-spacing:.06em;text-transform:uppercase;
}
.skills-banner .sb-icon{
  font-size:28px;
  animation:wobble 3s ease-in-out infinite;
}
.skills-banner .sb-icon:nth-child(1){animation-delay:0s}
.skills-banner .sb-icon:nth-child(2){animation-delay:.4s}
.skills-banner .sb-icon:nth-child(3){animation-delay:.8s}
.skills-banner .sb-icon:nth-child(5){animation-delay:1.2s}
@keyframes wobble{
  0%,100%{transform:rotate(-8deg) scale(1)}
  50%{transform:rotate(8deg) scale(1.15)}
}

/* skill section başlığı — yatay çizgi rengi */
.topics-section.skill-section h2::before{background:var(--skill-c2,#f59e0b);box-shadow:0 2px 0 var(--skill-c3,#d97706)}
.topics-section.sk-reading{--skill-c1:#fde68a;--skill-c2:#f59e0b;--skill-c3:#b45309;--skill-soft:rgba(245,158,11,.18)}
.topics-section.sk-writing{--skill-c1:#fda4af;--skill-c2:#e11d48;--skill-c3:#9f1239;--skill-soft:rgba(225,29,72,.16)}
.topics-section.sk-speaking{--skill-c1:#7dd3fc;--skill-c2:#0ea5e9;--skill-c3:#075985;--skill-soft:rgba(14,165,233,.16)}

/* skill kart — kategoriye göre renkli */
.topic-box.sk-reading-box{
  background:
    linear-gradient(180deg,rgba(255,255,255,.5) 0%,rgba(255,255,255,0) 38%,rgba(0,0,0,.06) 100%),
    linear-gradient(135deg,#fef3c7 0%,#fde68a 100%);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.9),
    inset 0 -3px 0 rgba(0,0,0,.05),
    inset 0 0 0 1px rgba(180,83,9,.18),
    0 5px 0 #b45309,
    0 10px 18px rgba(180,83,9,.18),
    0 20px 40px rgba(15,23,42,.08);
}
.topic-box.sk-reading-box::before{background:linear-gradient(90deg,#fde68a,#f59e0b,#b45309)}
.topic-box.sk-reading-box::after{background:radial-gradient(circle,#fcd34d 0%,transparent 60%)}
.topic-box.sk-reading-box .t-num{color:#92400e;background:rgba(252,211,77,.4)}
.topic-box.sk-reading-box .t-arrow{background:#f59e0b;box-shadow:0 2px 0 #b45309}
.topic-box.sk-reading-box:hover{box-shadow:
  inset 0 2px 0 rgba(255,255,255,.95),
  inset 0 -3px 0 rgba(0,0,0,.05),
  inset 0 0 0 1px #f59e0b,
  0 10px 0 #b45309,
  0 18px 30px rgba(180,83,9,.28),
  0 30px 50px rgba(15,23,42,.12)}

.topic-box.sk-writing-box{
  background:
    linear-gradient(180deg,rgba(255,255,255,.5) 0%,rgba(255,255,255,0) 38%,rgba(0,0,0,.06) 100%),
    linear-gradient(135deg,#ffe4e6 0%,#fecdd3 100%);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.9),
    inset 0 -3px 0 rgba(0,0,0,.05),
    inset 0 0 0 1px rgba(159,18,57,.18),
    0 5px 0 #9f1239,
    0 10px 18px rgba(159,18,57,.18),
    0 20px 40px rgba(15,23,42,.08);
}
.topic-box.sk-writing-box::before{background:linear-gradient(90deg,#fecdd3,#e11d48,#9f1239)}
.topic-box.sk-writing-box::after{background:radial-gradient(circle,#fda4af 0%,transparent 60%)}
.topic-box.sk-writing-box .t-num{color:#9f1239;background:rgba(253,164,175,.4)}
.topic-box.sk-writing-box .t-arrow{background:#e11d48;box-shadow:0 2px 0 #9f1239}
.topic-box.sk-writing-box:hover{box-shadow:
  inset 0 2px 0 rgba(255,255,255,.95),
  inset 0 -3px 0 rgba(0,0,0,.05),
  inset 0 0 0 1px #e11d48,
  0 10px 0 #9f1239,
  0 18px 30px rgba(159,18,57,.28),
  0 30px 50px rgba(15,23,42,.12)}

.topic-box.sk-speaking-box{
  background:
    linear-gradient(180deg,rgba(255,255,255,.5) 0%,rgba(255,255,255,0) 38%,rgba(0,0,0,.06) 100%),
    linear-gradient(135deg,#e0f2fe 0%,#bae6fd 100%);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.9),
    inset 0 -3px 0 rgba(0,0,0,.05),
    inset 0 0 0 1px rgba(7,89,133,.18),
    0 5px 0 #075985,
    0 10px 18px rgba(7,89,133,.18),
    0 20px 40px rgba(15,23,42,.08);
}
.topic-box.sk-speaking-box::before{background:linear-gradient(90deg,#bae6fd,#0ea5e9,#075985)}
.topic-box.sk-speaking-box::after{background:radial-gradient(circle,#7dd3fc 0%,transparent 60%)}
.topic-box.sk-speaking-box .t-num{color:#075985;background:rgba(125,211,252,.45)}
.topic-box.sk-speaking-box .t-arrow{background:#0ea5e9;box-shadow:0 2px 0 #075985}
.topic-box.sk-speaking-box:hover{box-shadow:
  inset 0 2px 0 rgba(255,255,255,.95),
  inset 0 -3px 0 rgba(0,0,0,.05),
  inset 0 0 0 1px #0ea5e9,
  0 10px 0 #075985,
  0 18px 30px rgba(7,89,133,.28),
  0 30px 50px rgba(15,23,42,.12)}

@media (max-width:560px){
  .skills-banner-inner{padding:14px 22px;gap:10px;flex-wrap:wrap;justify-content:center}
  .skills-banner .sb-text h3{font-size:18px}
  .skills-banner .sb-sub{font-size:11px}
  .skills-banner .sb-icon{font-size:22px}
}

/* ═════════════════════════════════════════
   3) STICKY WALL - SOL DUVAR (user'ın örneği)
   ═══════════════════════════════════════ */
#view-stickies{padding:0;position:relative;min-height:100vh;overflow-x:hidden}
#view-stickies .head{
  position:fixed;top:20px;left:50%;transform:translateX(-50%);
  z-index:10000;
  background:rgba(255,255,255,.85);
  backdrop-filter:blur(12px);
  padding:10px 22px;border-radius:99px;
  box-shadow:0 2px 0 #e2e8f0,0 8px 20px rgba(15,23,42,.10);
  margin:0;
  flex-wrap:nowrap;
}
#view-stickies .head h1,#view-stickies .head h2{font-size:clamp(18px,2.3vw,24px);font-weight:800}
#view-stickies .head .back{background:#0f172a;color:#fff;box-shadow:0 2px 0 #475569}
#view-stickies .head .back:hover{box-shadow:0 4px 0 #475569,0 10px 20px rgba(15,23,42,.20)}

/* TOPIC DISPLAY — artık akış içinde (fixed değil) */
.topic-display{
  position:relative;
  text-align:center;
  max-width:1100px;
  margin:0 auto;
  padding:120px 32px 36px;
  z-index:10;
}
.topic-display .td-num{
  display:inline-block;
  font-size:13px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--level-c3);
  background:var(--level-c1-soft,rgba(94,234,212,.3));
  padding:6px 14px;border-radius:99px;
  margin-bottom:14px;
}
.topic-display .td-title{
  font-size:clamp(36px,5vw,68px);font-weight:900;
  line-height:1;letter-spacing:-.025em;
  color:#0f172a;
  margin:0 0 10px;
  text-shadow:2px 4px 0 rgba(15,23,42,.06);
}
.topic-display .td-en{
  font-size:clamp(18px,2.2vw,26px);font-weight:500;
  color:var(--level-c2);font-style:italic;
  letter-spacing:-.01em;
}
.topic-display .td-hint{
  margin-top:24px;font-size:14px;color:#94a3b8;
  display:inline-flex;align-items:center;gap:8px;
  border-top:2px dashed #e2e8f0;padding-top:18px;
}

/* USAGE KUTU BÖLÜMÜ — yeni */
.usage-section{
  max-width:1180px;
  margin:0 auto;
  padding:0 32px 100px;
  position:relative;z-index:10;
}
.usage-section-title{
  font-size:18px;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:#475569;
  margin:0 0 22px;
  display:flex;align-items:center;gap:12px;
  justify-content:center;
}
.usage-section-title::before{
  content:"";width:8px;height:24px;border-radius:4px;
  background:var(--level-c2,#14b8a6);
  box-shadow:0 2px 0 var(--level-c3,#0d9488);
}
.usage-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:22px;
  perspective:1400px;
  perspective-origin:50% 30%;
}
.usage-box{
  position:relative;
  padding:22px 22px 24px;border-radius:20px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.6) 0%,rgba(255,255,255,0) 40%,rgba(0,0,0,.05) 100%),
    linear-gradient(135deg,#ffffff 0%,#f8fafc 100%);
  color:#0f172a;
  min-height:160px;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.9),
    inset 0 -3px 0 rgba(0,0,0,.05),
    inset 0 0 0 1px rgba(0,0,0,.04),
    0 5px 0 var(--level-c3,#0d9488),
    0 10px 18px rgba(15,23,42,.12),
    0 20px 40px rgba(15,23,42,.08);
  transform:translateY(0);
  transition:transform .3s cubic-bezier(.2,.85,.4,1.4),box-shadow .3s;
  overflow:hidden;
}
.usage-box::before{
  content:"";position:absolute;top:0;left:0;right:0;height:6px;
  background:linear-gradient(90deg,var(--level-c1,#5eead4),var(--level-c2,#14b8a6),var(--level-c3,#0d9488));
  border-radius:20px 20px 0 0;
}
.usage-box::after{
  content:"";position:absolute;right:-20px;top:-20px;
  width:80px;height:80px;border-radius:50%;
  background:radial-gradient(circle,var(--level-c1,#5eead4) 0%,transparent 60%);
  opacity:.18;pointer-events:none;
}
.usage-box:hover{
  transform:translateY(-4px) scale(1.02);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.95),
    inset 0 -3px 0 rgba(0,0,0,.05),
    inset 0 0 0 1px var(--level-c2,#14b8a6),
    0 10px 0 var(--level-c3,#0d9488),
    0 18px 30px rgba(15,23,42,.18),
    0 30px 50px rgba(15,23,42,.12);
}
.usage-box .u-num{
  display:inline-block;
  font-size:11px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;
  color:#fff;
  background:linear-gradient(135deg,var(--level-c2,#14b8a6),var(--level-c3,#0d9488));
  padding:5px 12px;border-radius:99px;
  margin-bottom:12px;
  box-shadow:0 2px 0 rgba(0,0,0,.12),inset 0 1px 0 rgba(255,255,255,.4);
}
.usage-box .u-title{
  font-size:17px;font-weight:800;line-height:1.3;
  color:#0f172a;margin:0 0 10px;
  letter-spacing:-.005em;
}
.usage-box .u-ex{
  font-size:14px;line-height:1.45;
  color:#334155;font-style:italic;
  background:rgba(0,0,0,.03);
  padding:10px 12px;border-radius:10px;
  border-left:3px solid var(--level-c2,#14b8a6);
}
.usage-box .u-note{
  margin-top:10px;
  font-size:13px;color:#64748b;font-weight:500;
  display:flex;align-items:flex-start;gap:6px;
}
.usage-box .u-note::before{
  content:"💡";font-style:normal;
}

/* USAGE giriş animasyonu */
@keyframes usageIn{
  from{opacity:0;transform:translateY(20px)}
  to{opacity:1;transform:translateY(0)}
}
.usage-box{animation:usageIn .5s cubic-bezier(.2,.85,.4,1) both}
.usage-box:nth-child(1){animation-delay:.05s}
.usage-box:nth-child(2){animation-delay:.12s}
.usage-box:nth-child(3){animation-delay:.19s}
.usage-box:nth-child(4){animation-delay:.26s}
.usage-box:nth-child(5){animation-delay:.33s}
.usage-box:nth-child(6){animation-delay:.40s}
.usage-box:nth-child(7){animation-delay:.47s}
.usage-box:nth-child(8){animation-delay:.54s}
.usage-box:nth-child(9){animation-delay:.61s}

/* ═══════════════════════════════════════
   RESPONSIVE — SEVİYE KUTULARI
   ═══════════════════════════════════════ */

/* Seviye kutuları artık min(vw,vh,px) ile tam orantılı — ek breakpoint gerekmez */

/* === ORİJİNAL RESPONSIVE (diğer katmanlar) === */
@media (max-width:640px){
  .topic-display .td-title{font-size:28px}
  .topic-display .td-en{font-size:16px}
}
@media (max-width:560px){
  .skills-banner-inner{padding:14px 22px;gap:10px;flex-wrap:wrap;justify-content:center}
  .skills-banner .sb-text h3{font-size:18px}
  .skills-banner .sb-sub{font-size:11px}
  .skills-banner .sb-icon{font-size:22px}
}

/* ═══════════════════════════════════════
   GECE MODU (data-theme="dark")
   ════════════════════════════════════════ */
html[data-theme="dark"],
html[data-theme="dark"] body{
  background:#0f172a!important;
  color:#e2e8f0;
}

/* Kutular arası dolaşan ışık — gece modunda daha loş */
html[data-theme="dark"] .levels-grid::before{
  background:radial-gradient(circle,rgba(56,189,248,.2) 0%,rgba(30,58,138,.12) 40%,transparent 70%);
}
html[data-theme="dark"] .levels-grid::after{
  background:radial-gradient(circle,rgba(99,102,241,.15) 0%,rgba(30,58,138,.08) 50%,transparent 70%);
}

/* Başlık / alt yazı */
html[data-theme="dark"] .head h1,html[data-theme="dark"] .head h2{color:#e2e8f0}
html[data-theme="dark"] .head .sub{color:#94a3b8}

/* Seviye butonları — gölgeler gece uyumu */
html[data-theme="dark"] .level-btn{
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.25),
    inset 0 -3px 0 rgba(0,0,0,.35),
    inset 0 0 0 1px rgba(255,255,255,.08),
    0 4px 0 var(--c3),
    0 8px 16px rgba(0,0,0,.5),
    0 16px 36px rgba(0,0,0,.35);
}

/* Geri butonu */
html[data-theme="dark"] .back{
  background:#1e293b;color:#e2e8f0;
  box-shadow:0 2px 0 #0f172a,0 6px 14px rgba(0,0,0,.3);
}

/* Konu kutuları */
html[data-theme="dark"] .topic-box{
  background:
    linear-gradient(180deg,rgba(255,255,255,.08) 0%,rgba(255,255,255,0) 40%,rgba(0,0,0,.15) 100%),
    linear-gradient(135deg,#1e293b 0%,#0f172a 100%);
  color:#e2e8f0;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.08),
    inset 0 -3px 0 rgba(0,0,0,.2),
    inset 0 0 0 1px rgba(255,255,255,.06),
    0 5px 0 var(--level-c3,#0d9488),
    0 10px 18px rgba(0,0,0,.35),
    0 20px 40px rgba(0,0,0,.25);
}
html[data-theme="dark"] .topic-box .t-title{color:#f1f5f9}
html[data-theme="dark"] .topic-box .t-en{color:#94a3b8}

/* Konu bölüm başlığı */
html[data-theme="dark"] .topics-section h2{color:#94a3b8}

/* Topic display */
html[data-theme="dark"] .topic-display{
  background:linear-gradient(135deg,#1e293b,#0f172a);
  border-color:rgba(148,163,184,.15);
}
html[data-theme="dark"] .topic-display .td-title{color:#f1f5f9}
html[data-theme="dark"] .topic-display .td-en{color:#94a3b8}
html[data-theme="dark"] .topic-display .td-num{color:var(--level-c2,#14b8a6)}

/* Usage kutuları */
html[data-theme="dark"] .usage-box{
  background:linear-gradient(135deg,#1e293b,#0f172a);
  border-color:rgba(148,163,184,.12);
  color:#e2e8f0;
}
html[data-theme="dark"] .usage-box .u-en{color:#94a3b8}
html[data-theme="dark"] .usage-box .u-note{color:#64748b}

/* Skills banner */
html[data-theme="dark"] .skills-banner-inner{
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.3),
    inset 0 -4px 0 rgba(0,0,0,.3),
    0 8px 0 #c2410c,
    0 16px 32px rgba(0,0,0,.5),
    0 30px 60px rgba(0,0,0,.35);
}

/* Selection */
html[data-theme="dark"] ::selection{background:rgba(56,189,248,.3);color:#f1f5f9}
html[data-theme="dark"] ::-moz-selection{background:rgba(56,189,248,.3);color:#f1f5f9}

/* AI balonu */
html[data-theme="dark"] #aiBubbleAtlas div[style]{color:#e2e8f0!important}

/* Kumanda paneli zaten karanlık */