/*
Theme Name: Leons ACKB
Author: Leons ACKB
Description: Leons ACKB platform temasi. TR/EN.
Version: 4.75.0
Text Domain: leons-ackb
*/

:root{
    --bg:#0c0a05; --bg2:#12100a; --panel:#181307; --panel2:#1f180b;
    --line:rgba(228,180,76,.16); --line-strong:rgba(228,180,76,.34);
    --gold:#E4B44C; --gold-deep:#B4842A; --gold-pale:#F6E3AC;
    --cream:#ECE4D2; --muted:#9C917A; --moon:#EFE6C0;
    --r:16px;
    --shadow:0 24px 60px -24px rgba(0,0,0,.85);
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    margin:0; background:var(--bg); color:var(--cream);
    font-family:'Inter',system-ui,sans-serif; line-height:1.6;
    -webkit-font-smoothing:antialiased;
    background-image:
      radial-gradient(1200px 700px at 50% -8%, rgba(228,180,76,.10), transparent 60%),
      radial-gradient(900px 500px at 90% 20%, rgba(180,132,42,.06), transparent 60%);
  }
  a{color:inherit;text-decoration:none}
  .wrap{max-width:1180px;margin:0 auto;padding:0 22px}
  .eyebrow{
    font-family:'Cinzel',serif;font-size:.72rem;letter-spacing:.34em;
    text-transform:uppercase;color:var(--gold);font-weight:600;
  }
  h1,h2,h3{font-family:'Cinzel',serif;font-weight:600;letter-spacing:.01em;line-height:1.15;margin:0}
  .gold-text{
    background:linear-gradient(180deg,var(--gold-pale),var(--gold) 55%,var(--gold-deep));
    -webkit-background-clip:text;background-clip:text;color:transparent;
  }

  /* moon bullet — signature motif */
  .moon{
    display:inline-block;width:11px;height:11px;border-radius:50%;
    background:radial-gradient(circle at 34% 32%,var(--moon),#c9bd86 70%);
    box-shadow:inset -3px -2px 0 rgba(0,0,0,.35),0 0 10px rgba(239,230,192,.4);
    flex:none;
  }

  /* ---------- header ---------- */
  header{
    position:sticky;top:0;z-index:50;
    backdrop-filter:blur(14px);
    background:linear-gradient(180deg,rgba(12,10,5,.92),rgba(12,10,5,.72));
    border-bottom:1px solid var(--line);
  }
  .nav{display:flex;align-items:center;gap:26px;height:66px}
  .brand{display:flex;align-items:center;gap:11px;font-family:'Cinzel',serif;font-weight:700;letter-spacing:.14em;font-size:1.02rem}
  .brand .mk{width:30px;height:30px;border-radius:8px;object-fit:cover;display:block;
    border:1px solid var(--line-strong);box-shadow:0 0 10px rgba(228,180,76,.28)}
  .brand b{color:var(--gold)}
  .nav .links{display:flex;gap:22px;margin-left:8px;font-size:.9rem;color:var(--muted);font-weight:500}
  .nav .links a{transition:color .2s;position:relative;padding:4px 0}
  .nav .links a:hover{color:var(--cream)}
  .nav .links a::after{content:"";position:absolute;left:0;bottom:-2px;height:2px;width:0;background:var(--nc,var(--gold));transition:width .25s;box-shadow:0 0 8px var(--nc,var(--gold))}
  .nav .links a.n-magaza{--nc:#FFCF3A}
  .nav .links a.n-dolap{--nc:#FF3DBE}
  .nav .links a.n-oyun{--nc:#2BFF88}
  .nav .links a.n-web{--nc:#2BFF88}
  .nav .links a.n-egitim{--nc:#37C6FF}
  .nav .links a.n-kod{--nc:#9B5CFF}
  .nav .links a.n-web{--nc:#39E29A}
  .nav .links a.n-kurs{--nc:#FF9F2E}
  .nav .links a:hover{color:var(--nc,var(--cream))}
  .nav .links a:hover::after{width:100%}
  .nav .right{margin-left:auto;display:flex;align-items:center;gap:12px}
  /* ---- acilir alt menu ---- */
  .nav .links .mi{position:relative;display:flex;align-items:center;gap:4px;padding-bottom:14px;margin-bottom:-14px}
  .nav .links .mi.m-egitim{--nc:#37C6FF}
  .nav .links .mi.m-kurs{--nc:#FF9F2E}
  .nav .links .mi .cr{background:none;border:0;padding:0 2px;cursor:pointer;color:var(--muted);
    font-size:.7rem;line-height:1;transition:.2s;font-family:inherit}
  .nav .links .mi:hover .cr,.nav .links .mi.open .cr{color:var(--nc,var(--gold));transform:rotate(180deg)}
  .nav .links .sub{position:absolute;top:100%;left:-12px;min-width:196px;display:none;flex-direction:column;
    background:var(--bg2);border:1px solid var(--line-strong);border-radius:12px;padding:7px;z-index:60;
    box-shadow:0 20px 44px -18px rgba(0,0,0,.95);
    /* Madde sayisi arttikca kutu asagi tasip kirpilabiliyordu.
       Ekrana sigmazsa kendi icinde kaysin — hicbir madde erisilemez
       kalmasin. Yeni kurs eklendiginde bir daha bakmaya gerek yok. */
    max-height:min(72vh,440px);overflow-y:auto;overscroll-behavior:contain}
  .nav .links .mi:hover .sub,.nav .links .mi.open .sub{display:flex}
  .nav .links .sub a{padding:9px 12px;border-radius:9px;font-size:.86rem;color:var(--cream);white-space:nowrap}
  .nav .links .sub a::after{display:none}
  .nav .links .sub a:hover{background:rgba(228,180,76,.10);color:var(--nc,var(--gold))}
  .btn{text-decoration:none;display:inline-flex;align-items:center;justify-content:center;
    font-family:'Inter';font-weight:600;font-size:.86rem;cursor:pointer;
    padding:9px 17px;border-radius:11px;border:1px solid var(--line-strong);
    background:transparent;color:var(--cream);transition:.2s;white-space:nowrap;
  }
  .btn:hover{border-color:var(--gold);color:var(--gold)}
  .btn.solid{
    border:none;color:#211803;font-weight:700;
    background:linear-gradient(180deg,var(--gold-pale),var(--gold) 60%,var(--gold-deep));
    box-shadow:0 6px 20px -8px rgba(228,180,76,.6);
  }
  .btn.solid:hover{filter:brightness(1.06);color:#211803}
  .hamb{display:none;background:none;border:none;color:var(--gold);font-size:1.5rem;cursor:pointer}

  /* ---------- hero ---------- */
  .hero{position:relative;padding:54px 0 30px;text-align:center;overflow:hidden}
  .hero .bgglow{
    position:absolute;inset:-20% 25% auto 25%;height:460px;pointer-events:none;z-index:0;
    background:radial-gradient(closest-side,rgba(228,180,76,.08),transparent 72%);
  }

  /* animated golden frame — light travels along the emblem's border */
  .plate-wrap{position:relative;display:inline-block;margin:0 auto 44px;z-index:1}
  @property --angle{syntax:'<angle>';initial-value:0deg;inherits:false}
  .plate{
    position:relative;z-index:1;display:inline-block;padding:15px;border-radius:22px;
    border:2px solid transparent;
    background:
      linear-gradient(180deg,#1a1409,#100d06) padding-box,
      conic-gradient(from var(--angle),
        #5a4417 0deg, #F6E3AC 45deg, #E4B44C 90deg, #7a5a1e 160deg,
        #4a3813 230deg, #F6E3AC 310deg, #5a4417 360deg) border-box;
    box-shadow:var(--shadow),0 0 24px -6px rgba(228,180,76,.4);
    animation:frameSpin 6s linear infinite;
  }
  @keyframes frameSpin{to{--angle:360deg}}
  .logo-base{display:block;width:min(720px,86vw);height:auto;border-radius:12px}
  .logo-stage{position:relative;display:inline-block;line-height:0;border-radius:12px;overflow:hidden}
  .plate .corner{position:absolute;width:18px;height:18px;border:2px solid var(--gold);opacity:.7}
  .plate .c1{top:8px;left:8px;border-right:none;border-bottom:none}
  .plate .c2{top:8px;right:8px;border-left:none;border-bottom:none}
  .plate .c3{bottom:8px;left:8px;border-right:none;border-top:none}
  .plate .c4{bottom:8px;right:8px;border-left:none;border-top:none}

  /* twinkling 8-point star under the emblem */
  .twinkle{position:absolute;bottom:-32px;left:50%;transform:translateX(-50%);z-index:3}
  .twinkle .star{width:36px;height:36px;overflow:visible;
    filter:drop-shadow(0 0 6px rgba(255,255,255,.8)) drop-shadow(0 0 14px rgba(246,227,172,.85)) drop-shadow(0 0 26px rgba(201,151,63,.5));
    animation:tw 2.6s ease-in-out infinite;transform-origin:center}
  .twinkle .spin8{transform-origin:12px 12px;animation:spin8 10s linear infinite;opacity:.9}
  @keyframes spin8{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
  @keyframes tw{0%,100%{opacity:.55;transform:scale(.8)}50%{opacity:1;transform:scale(1.18)}}
  .spark{position:absolute;border-radius:50%;background:var(--gold-pale);
    box-shadow:0 0 8px rgba(246,227,172,.9);animation:spk 3s ease-in-out infinite}
  .spark.s1{width:6px;height:6px;bottom:-14px;left:38%;animation-delay:.6s}
  .spark.s2{width:4px;height:4px;bottom:-8px;left:60%;animation-delay:1.4s}
  @keyframes spk{0%,100%{opacity:0;transform:scale(.4)}50%{opacity:1;transform:scale(1)}}

  .logo-stage{position:relative}
  .hero-slide{transition:opacity .8s ease}
  .hero-slide:not(.active){opacity:0}
  .logo-stage img.hero-slide:not(.logo-base){position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#0c0a05;border-radius:14px}
  .logo-stage video.hero-slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000;border-radius:14px;cursor:pointer}
  /* Video ses düğmesi */
  .hero-sound{display:none;position:absolute;right:12px;bottom:12px;z-index:7;width:42px;height:42px;border-radius:50%;border:1px solid rgba(232,182,76,.65);background:rgba(10,8,5,.65);color:#e8b64c;font-size:19px;line-height:1;align-items:center;justify-content:center;cursor:pointer;backdrop-filter:blur(3px)}
  .logo-stage.video-on .hero-sound{display:flex}
  .hero-sound:hover{background:rgba(232,182,76,.2)}
  .logo-stage img.hero-slide[data-href]{cursor:pointer}
  .hero-arrow{position:absolute;top:50%;transform:translateY(-50%);width:42px;height:42px;border-radius:50%;border:1px solid rgba(228,180,76,.4);background:rgba(12,10,5,.55);color:#F6E3AC;font-size:1.6rem;line-height:1;cursor:pointer;z-index:6;display:none;align-items:center;justify-content:center;transition:.15s}
  .hero-arrow:hover{background:rgba(228,180,76,.9);color:#211803}
  .hero-prev{left:6px}
  .hero-next{right:6px}
  .logo-stage.has-slides .hero-arrow{display:flex}
  .hero h1{font-size:clamp(2rem,5vw,3.3rem);margin:6px 0 14px}
  .hero p.lede{max-width:620px;margin:0 auto 26px;color:#cabfa6;font-size:1.06rem;position:relative;z-index:1}
  .hero .cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;position:relative;z-index:1}
  .trust{display:flex;gap:26px;justify-content:center;flex-wrap:wrap;margin-top:34px;color:var(--muted);font-size:.82rem;position:relative;z-index:1}
  .trust span{display:flex;align-items:center;gap:8px}

  /* ---------- section frame ---------- */
  section.blk{padding:64px 0}
  .head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:30px;flex-wrap:wrap}
  .head h2{font-size:clamp(1.5rem,3vw,2.1rem)}
  .head .eyebrow{display:flex;align-items:center;gap:10px;margin-bottom:10px}
  .head p{color:var(--muted);margin:8px 0 0;max-width:520px;font-size:.95rem}

  /* ---------- pillars ---------- */
  .pillars{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
  .pillars:has(> :only-child){grid-template-columns:minmax(0,640px);justify-content:center}
  .pill{
    position:relative;padding:30px 28px;border-radius:var(--r);
    border:3px solid transparent;
    background:
      linear-gradient(180deg,var(--panel),var(--bg2)) padding-box,
      conic-gradient(from var(--angle),
        var(--gdim) 0deg, var(--gdim) 30deg,
        var(--gc) 62deg, #ffffff 80deg, var(--gc) 98deg,
        var(--gdim) 132deg, var(--gdim) 360deg) border-box;
    overflow:hidden;transition:transform .28s;
    animation:frameSpin 4s linear infinite, pillGlow 3s ease-in-out infinite;
    --gc:#FFCF3A;--gdim:rgba(120,80,12,.45);
  }
  .pill.p1{--gc:#FFCF3A;--gdim:rgba(120,80,12,.45);animation-delay:0s}
  .pill.p2{--gc:#FF3DBE;--gdim:rgba(120,15,80,.45);animation-delay:-1s}
  .pill.p3{--gc:#2BFF88;--gdim:rgba(10,95,52,.45);animation-delay:-2s}
  .pill.p4{--gc:#37C6FF;--gdim:rgba(10,72,112,.45);animation-delay:-3s}
  .pill.p6{--gc:#2BFF88;--gdim:rgba(10,95,52,.45);animation-delay:-5s}
  /* HUKUK: platform bolumunun ILK ve TEK genis karti. Iki sutunlu izgarada
     ucuncu kart tek basina kalmasin diye tam satir kapliyor. Renk, kursun
     kendi pembesi. Gorsel cubbeli Leo videosu (sessiz, dongu). */
  .pill.p7{--gc:#F0509C;--gdim:rgba(110,15,60,.45);animation-delay:-4s}
  .pill.pfeat{grid-column:1/-1;min-height:250px}
  .pill.pfeat p{max-width:560px}
  .pill.pfeat .pill-art{width:46%;height:100%;object-fit:cover;object-position:center;opacity:.95;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 38%);mask-image:linear-gradient(90deg,transparent,#000 38%)}
  @media(max-width:700px){.pill.pfeat .pill-art{width:100%;opacity:.28;-webkit-mask-image:none;mask-image:none}}
  @media(prefers-reduced-motion:reduce){.pill-vid{display:none}}
  @keyframes pillGlow{0%,100%{box-shadow:0 0 16px -10px var(--gc)}50%{box-shadow:0 0 42px -4px var(--gc)}}
  .pill::before{content:"";position:absolute;inset:0;background:radial-gradient(600px 200px at 100% 0,rgba(228,180,76,.10),transparent 60%);opacity:0;transition:.3s}
  .pill:hover{transform:translateY(-4px)}
  .pill:hover::before{opacity:1}
  .pill-art{position:absolute;top:0;right:0;bottom:0;width:47%;z-index:0;pointer-events:none;
    background-size:contain;background-position:right center;background-repeat:no-repeat;opacity:.9;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 48%);mask-image:linear-gradient(90deg,transparent,#000 48%)}
  .pill>*:not(.pill-art){position:relative;z-index:1}
  .pill.p1 .pill-art{background-size:auto 62%}
  .pill.p3 .pill-art{background-size:auto 58%;background-position:right 12px center;opacity:.6;-webkit-mask-image:linear-gradient(90deg,transparent,#000 62%);mask-image:linear-gradient(90deg,transparent,#000 62%)}
  .pill.p6 .pill-art{background-size:auto 62%}
  .pill.p3 .pill-art{background-size:cover;background-position:center;opacity:.28;-webkit-mask-image:none;mask-image:none}
  .pill.p2 .pill-art{background-size:auto 84%}
  .pill.p4 .pill-art{background-size:auto 70%}

  /* inner page (sayfa) icerik stili */
  .leons-page{max-width:1180px;margin:0 auto;padding:44px 22px 70px}
  .leons-page h1.pt{font-family:'Cinzel',serif;font-size:clamp(1.6rem,3vw,2.1rem);color:var(--gold-pale);margin:0 0 22px}
  .leons-page .pc{font-size:1rem;line-height:1.75;color:#d8ceb6}
  .leons-page .pc p{margin:0 0 14px}
  .leons-page .pc a{color:var(--gold)}
  .leons-page .pc h2,.leons-page .pc h3{font-family:'Cinzel',serif;color:var(--gold-pale);margin:26px 0 10px}
  .leons-page.a1{max-width:1180px;padding:24px 14px 40px}
  .leons-page.a1 h1.pt{text-align:center}
  .pill .ic{width:48px;height:48px;border-radius:12px;display:grid;place-items:center;margin-bottom:16px;
    background:linear-gradient(180deg,rgba(228,180,76,.16),rgba(228,180,76,.04));border:1px solid var(--line)}
  .pill .ic svg{width:25px;height:25px;stroke:var(--gold);fill:none;stroke-width:1.6}
  .pill h3{font-size:1.22rem;margin-bottom:8px;color:var(--gold-pale);text-shadow:0 1px 8px rgba(0,0,0,.9)}
  .pill p{color:#DCD5C2;font-size:.92rem;margin:0 0 14px;text-shadow:0 1px 8px rgba(0,0,0,.9),0 0 3px rgba(0,0,0,.8)}
  .tags{display:flex;flex-wrap:wrap;gap:7px}
  .tag{font-size:.72rem;color:#d8cba7;padding:4px 10px;border-radius:999px;border:1px solid var(--line);background:rgba(228,180,76,.04)}
  .pill .go{margin-top:16px;display:inline-flex;align-items:center;gap:7px;color:var(--gold);font-weight:600;font-size:.85rem}
  .pill .go svg{width:15px;height:15px;stroke:var(--gold);fill:none;stroke-width:2;transition:.2s}
  .pill:hover .go svg{transform:translateX(4px)}

  /* ---------- store categories ---------- */
  .catgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
  .cat{display:flex;gap:14px;align-items:center;padding:18px;border-radius:14px;
    border:1px solid var(--line);background:linear-gradient(180deg,var(--panel),var(--bg2));transition:.25s;cursor:pointer}
  .cat:hover{transform:translateY(-3px);border-color:var(--line-strong)}
  .cat .ci{width:44px;height:44px;border-radius:11px;display:grid;place-items:center;flex:none;
    background:linear-gradient(180deg,rgba(228,180,76,.16),rgba(228,180,76,.04));border:1px solid var(--line)}
  .cat .ci svg{width:22px;height:22px;stroke:var(--gold);fill:none;stroke-width:1.6}
  .cat h4{font-family:'Inter';font-size:.98rem;font-weight:600;margin:0 0 2px;color:var(--gold-pale)}
  .cat p{margin:0;font-size:.78rem;color:var(--muted)}
  .cat.feat{border-color:var(--line-strong);background:linear-gradient(180deg,rgba(228,180,76,.10),var(--bg2))}
  .cat .badge{margin-left:auto;font-size:.64rem;color:#211803;font-weight:700;font-family:'Inter';
    background:linear-gradient(180deg,var(--gold-pale),var(--gold));padding:3px 9px;border-radius:999px;flex:none}

  /* ---------- listings preview ---------- */
  .listings{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
  .card{border-radius:14px;overflow:hidden;background:var(--panel);border:1px solid var(--line);transition:.25s;cursor:pointer;display:block;text-decoration:none;color:inherit}
  .card:hover{transform:translateY(-4px);border-color:var(--line-strong)}
  .thumb{height:230px;position:relative;display:grid;place-items:center;color:rgba(255,255,255,.25);font-size:.75rem}
  .thumb.t1{background:linear-gradient(135deg,#2a2413,#4a3a17)}
  .thumb.t2{background:linear-gradient(135deg,#1c2530,#2f4a52)}
  .thumb.t3{background:linear-gradient(135deg,#2e1f24,#4a2f3a)}
  .thumb.t4{background:linear-gradient(135deg,#24261c,#3d4a2f)}
  .thumb .pin{position:absolute;top:10px;left:10px;font-size:.68rem;padding:3px 9px;border-radius:999px;background:rgba(12,10,5,.7);color:var(--gold);border:1px solid var(--line-strong)}
  .card .cbody{padding:13px 15px}
  .card .cbody h4{font-family:'Inter';font-size:.94rem;font-weight:600;margin:0 0 4px}
  .card .meta{color:var(--muted);font-size:.78rem}
  .card .price{margin-top:9px;font-family:'Cinzel',serif;font-weight:600;color:var(--gold);font-size:1.02rem}

  /* ---------- academy ---------- */
  .split{display:grid;grid-template-columns:1fr 1fr;gap:18px}
  .track{padding:30px;border-radius:var(--r);border:2px solid #E4B44C;
    box-shadow:0 0 30px -10px rgba(228,180,76,.55);
    animation:trackGlow 3.4s ease-in-out infinite;
    background:linear-gradient(180deg,var(--panel),var(--bg2));position:relative;overflow:hidden}
  .track .lvl{font-family:'Cinzel';font-size:.7rem;letter-spacing:.2em;color:var(--gold);border:1px solid var(--line-strong);
    padding:4px 10px;border-radius:999px;display:inline-block;margin-bottom:16px}
  .track h3{font-size:1.4rem;margin-bottom:10px;color:var(--gold-pale)}
  .track p{color:var(--muted);font-size:.9rem;margin:0 0 18px}
  .prog{height:7px;border-radius:99px;background:rgba(255,255,255,.06);overflow:hidden;margin-bottom:8px}
  .prog i{display:block;height:100%;background:linear-gradient(90deg,var(--gold-deep),var(--gold),var(--gold-pale))}
  .track .row{display:flex;justify-content:space-between;font-size:.78rem;color:var(--muted)}
  .track ul{list-style:none;padding:0;margin:18px 0 0;display:flex;flex-direction:column;gap:9px}
  .track ul li{display:flex;align-items:center;gap:10px;font-size:.86rem;color:#d3c7a8}

  /* language level path (Duolingo-style) */
  .edu-stack{display:grid;gap:18px}
  .langpath{display:flex;justify-content:space-between;gap:8px;position:relative;margin:24px 0 22px}
  .langpath::before{content:"";position:absolute;top:28px;left:7%;right:7%;height:3px;border-radius:2px;z-index:0;
    background:linear-gradient(90deg,var(--gold) 0 16%,var(--line-strong) 16%)}
  .lnode{flex:1;display:flex;flex-direction:column;align-items:center;text-align:center;position:relative;z-index:1}
  .lnode .dot{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;
    font-family:'Cinzel',serif;font-weight:700;font-size:1.08rem;transition:.2s}
  .lnode.on .dot{background:linear-gradient(180deg,var(--gold-pale),var(--gold-deep));color:#211803;
    box-shadow:0 0 0 4px rgba(228,180,76,.16),0 8px 20px -8px rgba(228,180,76,.6)}
  .lnode.lock .dot{background:var(--panel);border:2px solid var(--line-strong);color:var(--muted)}
  .lnode:hover .dot{transform:translateY(-3px)}
  .lnode .cap{font-size:.72rem;color:var(--muted);margin-top:9px}
  .lp{margin-top:7px;font-size:.62rem;padding:2px 9px;border-radius:999px;font-weight:700;
    display:inline-flex;align-items:center;gap:4px;letter-spacing:.02em}
  .lp svg{width:11px;height:11px;stroke:currentColor;fill:none;stroke-width:1.8}
  .lp-free{color:#0c2c15;background:linear-gradient(180deg,#9fe6b2,#3cbf68)}
  .lp-lock{color:var(--gold);border:1px solid var(--line-strong)}
  .langfoot{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
    border-top:1px solid var(--line);padding-top:16px}
  .langfoot .note{font-size:.86rem;color:var(--muted);max-width:62ch}
  @media(max-width:640px){
    .langpath{flex-wrap:wrap;gap:18px 4px}
    .langpath::before{display:none}
    .lnode{flex:0 0 31%}
  }

  /* ---------- games strip ---------- */
  .games{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
  a.game{text-decoration:none}
  .game{aspect-ratio:3/4;border-radius:14px;border:1px solid var(--line);position:relative;overflow:hidden;
    display:flex;align-items:flex-end;padding:14px;cursor:pointer;transition:.25s}
  .game:hover{transform:translateY(-5px);border-color:var(--gold)}
  .game span{font-family:'Cinzel';font-size:.82rem;color:var(--cream);position:relative;z-index:2;font-weight:600}
  .game::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(6,5,2,.85))}
  .g1{background:url(assets/oyun-kosu.jpg) center/cover no-repeat,#181307}
  .g2{background:url(assets/oyun-ay.jpg) center/cover no-repeat,#0a1417}
  .g3{background:url(assets/oyun-kelime.jpg) center/cover no-repeat,#14070f}
  .g4{background:url(assets/oyun-sayi.jpg) center/cover no-repeat,#0e1a10}
  .g5{background:linear-gradient(135deg,#2a1810,#160b07)}

  /* ---------- cta band ---------- */
  .band{margin:20px 0 0;border-radius:22px;padding:52px 40px;text-align:center;position:relative;overflow:hidden;
    border:3px solid transparent;
    background:
      radial-gradient(700px 300px at 50% 0,rgba(228,180,76,.14),transparent 60%) padding-box,
      linear-gradient(180deg,var(--panel2),var(--bg)) padding-box,
      conic-gradient(from var(--angle),
        rgba(90,60,15,.5) 0deg, rgba(90,60,15,.5) 18deg,
        #FFC93C 46deg, #FF3DBE 66deg, #ffffff 80deg, #37C6FF 94deg, #2BFF88 114deg,
        rgba(90,60,15,.5) 142deg, rgba(90,60,15,.5) 360deg) border-box;
    animation:frameSpin 6.5s linear infinite, bandGlow 3.5s ease-in-out infinite;
  }
  @keyframes bandGlow{0%,100%{box-shadow:0 0 26px -14px rgba(255,110,200,.45)}50%{box-shadow:0 0 48px -6px rgba(90,180,255,.5)}}
  .band h2{font-size:clamp(1.6rem,3vw,2.3rem);margin-bottom:12px}
  .band p{color:var(--muted);max-width:520px;margin:0 auto 24px}
  .band .cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

  /* ---------- footer ---------- */
  footer{border-top:1px solid var(--line);margin-top:64px;padding:48px 0 34px}
  .fgrid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:30px}
  footer h5{font-family:'Cinzel';font-size:.75rem;letter-spacing:.2em;color:var(--gold);margin:0 0 14px;text-transform:uppercase}
  footer a{display:block;color:var(--muted);font-size:.86rem;padding:5px 0;transition:.2s}
  footer a:hover{color:var(--cream)}
  footer .about{color:var(--muted);font-size:.86rem;max-width:280px;margin:14px 0 0}
  .fbottom{margin-top:38px;padding-top:22px;border-top:1px solid var(--line);
    display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;color:var(--muted);font-size:.78rem}

  /* ---------- responsive ---------- */
  /* Menu basligi kendi icinde BOLUNMEZ: "Learning a Language" gibi
     basliklar kelime kelime alt alta dusuyordu. */
  .nav .links .mi>a,.nav .links>a{white-space:nowrap}

  /* Giris / Uye ol dugmelerinde simge + yazi. */
  .btn .btn-simge{display:none;font-size:16px;line-height:1}
  .btn .btn-yazi{display:inline}

  @media(max-width:900px){
    /* DAR EKRANDA YALNIZ SIMGE. Iki dugmenin yazisi cubugu tasiriyordu. */
    .btn .btn-simge{display:inline}
    .btn .btn-yazi{
      position:absolute;width:1px;height:1px;overflow:hidden;
      clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap
    }
    .nav .actions .btn{padding-left:11px;padding-right:11px}
    /* UST CUBUK TASMASIN. Sagdaki simgeler, dil secici ve hamburger
       sigmiyordu: TR/EN kesiliyor, menuyu acacak dugme ekran disinda
       kaliyordu. Marka daralabilir hale getiriliyor, bosluklar
       kisaliyor; sagdaki grup ise KUCULMUYOR cunku hamburger'in
       gorunmesi her seyden onemli. */
    .nav{gap:10px;flex-wrap:nowrap}
    .brand{min-width:0;flex:0 1 auto;overflow:hidden;white-space:nowrap}
    .nav .right{gap:8px;flex:0 0 auto}
    .nav .links{display:none}
    /* MOBILDE ALT LISTELER KAPALI. Hepsi acik gelince menu sayfadan
       uzun oluyor ve dil listesi kendi kaydirma cubugunu aciyordu.
       Baslik dokununca ( .mi.open ) kendi listesi acilir. */
    .nav .links .mi>.sub{display:none}
    .nav .links .mi.open>.sub{display:flex}
    .nav .links .mi>a{font-weight:700;padding-top:11px;padding-bottom:11px}
    .nav .links .sub a{padding-top:10px;padding-bottom:10px}
    .nav .links .mi>a::after{content:" \25BE";opacity:.65}
    .nav .links .mi.open>a::after{content:" \25B4"}
    .nav .links>a{padding-top:11px;padding-bottom:11px}
    .nav .links .mi{flex-direction:column;align-items:flex-start;gap:0;padding-bottom:0;margin-bottom:0;width:100%}
    .nav .links .mi .cr{display:none}
    .nav .links .sub{position:static;display:flex;min-width:0;background:none;border:0;box-shadow:none;
      padding:2px 0 6px 14px;border-left:2px solid var(--line-strong);margin:2px 0 4px 4px}
    .nav .links .sub a{padding:6px 0;font-size:.84rem}
    .hamb{display:block;margin-left:auto}
    .nav .right .btn.ghost{display:none}
    .pillars{grid-template-columns:repeat(2,1fr)}
    .listings{grid-template-columns:repeat(2,1fr)}
    .catgrid{grid-template-columns:repeat(2,1fr)}
    .split{grid-template-columns:1fr}
    .games{grid-template-columns:repeat(3,1fr)}
    .fgrid{grid-template-columns:1fr 1fr}
  }
  /* TELEFON: ust cubuktaki ogeler kuculur ki hepsi tek satira sigsin.
     Hicbiri gizlenmiyor — gizlemek, o ozelligi telefonda yok etmek
     demek olurdu. */
  @media(max-width:520px){
    .brand{font-size:.8rem;letter-spacing:.06em;gap:6px}
    .brand .mk{width:26px;height:26px}
    .iconbtn{width:35px;height:35px;border-radius:10px}
    .maske-yuz{font-size:18px}
    .maske-yuz img{width:22px;height:22px}
    .nav .right .btn{padding-left:9px;padding-right:9px}
    .langsw button{padding:6px 7px;font-size:.74rem}
    .hamb{font-size:1.3rem;padding:0 2px}
    .wrap{padding-left:14px;padding-right:14px}
  }

  @media(max-width:560px){
    .pillars{grid-template-columns:1fr}
    .listings{grid-template-columns:1fr 1fr}
    .games{grid-template-columns:repeat(2,1fr)}
    .catgrid{grid-template-columns:1fr}
    .fgrid{grid-template-columns:1fr}
  }
  @media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
  :focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:6px}

  /* language switch + arrow */
  /* DOSYA MASKELEME kisayolu. Simge emoji; tarayicinin kendi
     title balonu yerine RENKLI kendi balonumuz aciliyor —
     native balon gec geliyor ve bicimlendirilemiyor. Bu yuzden
     title ozniteligi bilerek YOK, erisilebilirlik icin aria-label var. */
  .iconbtn.maske-btn{overflow:visible}
  .iconbtn.maske-btn:hover{border-color:rgba(240,80,156,.75);
    box-shadow:0 0 16px -4px rgba(240,80,156,.75)}
  .maske-yuz{font-size:21px;line-height:1;display:block;transition:transform .16s}
  .maske-yuz img{display:block;width:26px;height:26px;object-fit:contain}
  .iconbtn.maske-btn:hover .maske-yuz{transform:scale(1.14) rotate(-6deg)}
  .maske-ipucu{
    position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%) translateY(-4px);
    background:linear-gradient(135deg,#F0509C,#B0186A);color:#fff;
    font-family:'Inter',system-ui,sans-serif;font-size:.78rem;font-weight:700;
    letter-spacing:.02em;white-space:nowrap;padding:7px 13px;border-radius:9px;
    box-shadow:0 10px 24px -10px rgba(240,80,156,.95),0 0 0 1px rgba(255,255,255,.14) inset;
    opacity:0;visibility:hidden;pointer-events:none;transition:.16s ease;z-index:70}
  .maske-ipucu::after{content:"";position:absolute;bottom:100%;left:50%;
    transform:translateX(-50%);border:6px solid transparent;border-bottom-color:#F0509C}
  .iconbtn.maske-btn:hover .maske-ipucu,
  .iconbtn.maske-btn:focus-visible .maske-ipucu{
    opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
  @media(prefers-reduced-motion:reduce){
    .maske-ipucu,.maske-yuz{transition:none}
    .iconbtn.maske-btn:hover .maske-yuz{transform:none}}
  .langsw{display:inline-flex;border:1px solid var(--line-strong);border-radius:10px;overflow:hidden;
    font-family:'Inter';font-size:.76rem;font-weight:700}
  .langsw button{background:transparent;border:none;color:var(--muted);padding:7px 10px;cursor:pointer;transition:.2s;font-family:'Inter'}
  .langsw button.active{background:linear-gradient(180deg,var(--gold-pale),var(--gold));color:#211803}
  .langsw button:not(.active):hover{color:var(--cream)}
  .iconbtn{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:11px;border:1px solid var(--line-strong);color:var(--cream);background:transparent;text-decoration:none;transition:.15s}
  .iconbtn:hover{border-color:var(--gold);color:var(--gold);transform:translateY(-1px)}
  .iconbtn.logout:hover{border-color:#ff8a94;color:#ff8a94}
  .pill .go::after{content:"\2192";margin-left:3px;display:inline-block;transition:transform .2s}
  .pill:hover .go::after{transform:translateX(4px)}
  .leons-page.sec{border:2px solid var(--sgc,#E4B44C);border-radius:18px;padding:22px 22px 28px;box-shadow:0 0 30px -10px var(--sgc);animation:secGlow 3.4s ease-in-out infinite;margin-top:14px}
  .leons-page.sec-magaza{--sgc:#FFCF3A}
  .leons-page.sec-dolap{--sgc:#FF3DBE}
  .leons-page.sec-oyun{--sgc:#2BFF88}
  .leons-page.sec-web{--sgc:#2BFF88}
  .leons-page.sec-egitim{--sgc:#37C6FF}
  @keyframes secGlow{0%,100%{box-shadow:0 0 22px -12px var(--sgc)}50%{box-shadow:0 0 52px -6px var(--sgc)}}
  @keyframes trackGlow{0%,100%{box-shadow:0 0 22px -12px rgba(228,180,76,.6)}50%{box-shadow:0 0 52px -6px rgba(228,180,76,.65)}}
  .leons-hint{color:#9C917A;font-size:.88rem;margin:-4px 0 14px}
  .iconbtn{position:relative}
  .cart-badge{position:absolute;top:-7px;right:-7px;background:#E4B44C;color:#211803;border-radius:999px;min-width:18px;height:18px;font-size:.68rem;font-weight:800;display:flex;align-items:center;justify-content:center;padding:0 4px;box-shadow:0 0 8px -2px #E4B44C}

/* Ana sayfadaki kurs listesi çipleri. */
.kurscipler{display:flex;flex-wrap:wrap;gap:7px;margin:12px 0 14px}
.kurscip{
  display:inline-block;padding:6px 11px;border:1px solid var(--line-strong);
  border-radius:999px;font-size:.8rem;color:var(--cream);text-decoration:none;
  transition:.15s;white-space:nowrap
}
.kurscip:hover{border-color:var(--gold);color:var(--gold)}

/* Ücretsiz giriş kursu çipi öne çıkar. */
.kurscip.kurscip-yeni{border-color:var(--gold);color:var(--gold);font-weight:600}

/* Menüdeki kurs kilidi. Dil değiştirici yalnızca [data-tr] taşıyan
   iç span'ı yeniden yazar; simge bu yüzden dışarıda durur, yoksa
   dil değişiminde kaybolurdu. */
.sub .kurslink{display:flex;align-items:center;gap:8px}
.sub .ksim{flex:0 0 auto;font-size:11px;line-height:1}
.sub .ksim.kapali{opacity:.6}
.sub .ksim.acik{opacity:.85}

/* SIBER GUVENLIK menu basligi: FOSFORLU LIME (#A6FF00). Bolum rengi
   --nc ile veriliyor; kodlama turuncusu, yapay zeka pembesi, atolye
   moru ve Kendini Dene turkuazinin hicbirine benzemiyor. */
.temabas .links .m-guv{--nc:#A6FF00}
.nav .links a.n-guv{--nc:#A6FF00}
.nav .links .mi.m-guv{--nc:#A6FF00}
.nav .links a.n-trc{--nc:#4DA3FF}
.nav .links a.n-dk{--nc:#86A6FF}

/* Ana sayfadaki SIBER GUVENLIK kutusu: bolum rengi fosforlu lime.
   Diger kutular turuncu/pembe; bu kutu menudeki renkle ayni olsun. */
.track.track-guv{--nc:#A6FF00}
.track.track-guv .lvl{color:#A6FF00}
.track.track-guv .kurscip-yeni{border-color:#A6FF00;color:#A6FF00}

/* ---------- IKI SATIRLI UST MENU (genis ekran) ----------
   Ust satirda logo ve sagdaki simgeler, bir alt satirda menu basliklari.
   Basliklar cogaldikca tek satira sigmiyordu; artik her biri rahat
   nefes aliyor. Dar ekranda (900 px ve alti) hamburger menu aynen
   kaliyor. Satir yuksekligi sayfalarin kendisi tarafindan olculuyor
   (yapiskan basliklar, Kod Atolyesi, Sunu Kaydi), sabit bir deger yok. */
@media(min-width:901px){
  .nav{flex-wrap:wrap;height:auto;column-gap:26px;row-gap:0}
  .nav .brand{order:1;height:62px;display:flex;align-items:center}
  .nav .right{order:2;margin-left:auto;height:62px}
  .nav .links{order:3;flex:0 0 100%;margin-left:0;min-height:46px;align-items:center;
    flex-wrap:wrap;column-gap:28px;row-gap:2px;padding:6px 0;font-size:.92rem;
    border-top:1px solid rgba(228,180,76,.12)}
  .nav .links .mi{padding-bottom:12px;margin-bottom:-12px}
  .hamb{order:4}
}
@media(min-width:901px) and (max-width:1100px){
  .nav .links{column-gap:18px;font-size:.88rem}
}

/* ---------- BIZ KIMIZ ---------- */
.kimiz-kutu{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.kimiz-kutu>div{display:flex;flex-direction:column;gap:6px;padding:18px 20px;border:1px solid var(--line);border-radius:16px;
  background:linear-gradient(180deg,rgba(228,180,76,.06),rgba(228,180,76,.01));font-size:.92rem;color:var(--muted)}
.kimiz-kutu b{color:var(--gold);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:4px}
.kimiz-kutu a{color:var(--cream);text-decoration:underline;text-underline-offset:3px}
@media(max-width:900px){.kimiz-kutu{grid-template-columns:1fr}}