/*
Theme Name: MelyikAI Oktatási Platform
Theme URI: https://melyikai.hu
Author: Csernák Levente
Description: Konverzióorientált WordPress téma a melyikai.hu AI-oktatási, promptcsomag és digitális termékplatformhoz.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GPL v2 or later
Text Domain: melyikai
*/

:root{
      --bg:#f7fbf9;
      --surface:#ffffff;
      --surface-2:#eefaf6;
      --surface-3:#f1f5f9;
      --ink:#0b1728;
      --text:#27364a;
      --muted:#64748b;
      --line:#dbe7e3;
      --teal:#009f8f;
      --teal-dark:#007c72;
      --teal-soft:#dff8f3;
      --blue:#2563eb;
      --amber:#f59e0b;
      --purple:#7c3aed;
      --danger:#dc2626;
      --radius:22px;
      --radius-sm:14px;
      --shadow:0 18px 46px rgba(15, 45, 65, .08);
      --shadow-soft:0 10px 26px rgba(15,45,65,.06);
      --max:1180px;
      --vault-price:"9 990 Ft / hó";
    }

    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      background:var(--bg);
      color:var(--ink);
      font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
      line-height:1.55;
      text-rendering:optimizeLegibility;
    }
    body.menu-open{overflow:hidden}
    a{color:inherit;text-decoration:none}
    img{max-width:100%;height:auto}
    button,input,select,textarea{font:inherit}
    .container{width:min(var(--max),92%);margin-inline:auto}
    .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
    :focus-visible{outline:3px solid rgba(0,159,143,.45);outline-offset:3px}
    .skip-link{position:absolute;left:14px;top:-80px;background:var(--ink);color:#fff;padding:12px 16px;border-radius:12px;z-index:999}
    .skip-link:focus{top:14px}

    .site-header{
      position:sticky;
      top:0;
      z-index:80;
      background:rgba(255,255,255,.9);
      backdrop-filter:blur(18px);
      border-bottom:1px solid var(--line);
    }
    .navbar{
      min-height:76px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:22px;
    }
    .brand{
      display:flex;
      align-items:center;
      gap:10px;
      font-size:25px;
      font-weight:950;
      letter-spacing:-.045em;
      min-height:44px;
    }
    .brand-mark{
      width:38px;
      height:38px;
      border-radius:13px;
      display:grid;
      place-items:center;
      background:linear-gradient(135deg,var(--teal),#6ee7d8);
      color:white;
      font-weight:950;
      letter-spacing:-.08em;
    }
    .brand span:last-child{color:var(--teal)}
    .nav-menu{
      display:flex;
      align-items:center;
      gap:22px;
      font-size:14px;
      color:var(--text);
      font-weight:780;
    }
    .nav-menu a{min-height:44px;display:inline-flex;align-items:center}
    .header-actions{display:flex;align-items:center;gap:10px}
    .cart-link{
      min-height:44px;
      display:inline-flex;
      align-items:center;
      gap:7px;
      font-weight:800;
      color:var(--text);
      padding:0 8px;
    }
    .btn{
      min-height:46px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:9px;
      border:1px solid transparent;
      border-radius:999px;
      padding:12px 20px;
      background:var(--teal);
      color:#fff;
      font-weight:900;
      font-size:14px;
      cursor:pointer;
      box-shadow:0 10px 24px rgba(0,159,143,.18);
      transition:transform .18s ease, background .18s ease, border-color .18s ease;
    }
    .btn:hover{background:var(--teal-dark);transform:translateY(-1px)}
    .btn.secondary{
      background:#fff;
      color:var(--ink);
      border-color:var(--line);
      box-shadow:var(--shadow-soft);
    }
    .btn.secondary:hover{background:#f9fffd;border-color:#b6ddd7}
    .btn.dark{background:var(--ink);color:#fff;box-shadow:0 12px 26px rgba(11,23,40,.18)}
    .btn.dark:hover{background:#1d2939}
    .btn.full{width:100%}
    .mobile-toggle{
      display:none;
      min-width:46px;
      min-height:46px;
      border:1px solid var(--line);
      background:#fff;
      border-radius:14px;
      cursor:pointer;
      font-size:24px;
      line-height:1;
    }

    .section{padding:74px 0}
    .section.compact{padding:50px 0}
    .eyebrow{
      display:inline-flex;
      align-items:center;
      gap:8px;
      width:max-content;
      max-width:100%;
      padding:7px 12px;
      border-radius:999px;
      background:var(--teal-soft);
      color:var(--teal-dark);
      font-weight:900;
      font-size:13px;
      letter-spacing:.01em;
    }
    h1,h2,h3,p{margin-top:0}
    h1{
      font-size:clamp(42px,6vw,72px);
      line-height:.94;
      letter-spacing:-.065em;
      margin-bottom:22px;
      max-width:770px;
    }
    h2{
      font-size:clamp(32px,4vw,52px);
      line-height:1.02;
      letter-spacing:-.05em;
      margin-bottom:14px;
    }
    h3{
      font-size:22px;
      line-height:1.14;
      letter-spacing:-.025em;
      margin-bottom:10px;
    }
    .lead{font-size:19px;color:var(--text);max-width:680px;margin-bottom:28px}
    .muted{color:var(--muted)}
    .section-head{
      display:flex;
      align-items:end;
      justify-content:space-between;
      gap:28px;
      margin-bottom:30px;
    }
    .section-head p{max-width:660px;margin-bottom:0}
    .center{text-align:center}
    .center .section-head-copy{margin-inline:auto}
    .section-head-copy{max-width:760px}
    .section-sub{font-size:17px;color:var(--muted);margin-bottom:0}

    .hero{
      position:relative;
      overflow:hidden;
      background:
        radial-gradient(circle at 85% 15%, rgba(0,159,143,.14), transparent 28%),
        radial-gradient(circle at 12% 80%, rgba(37,99,235,.08), transparent 30%),
        linear-gradient(180deg,#ffffff 0%,#f6fbf9 100%);
      border-bottom:1px solid var(--line);
    }
    .hero-grid{
      position:relative;
      display:grid;
      grid-template-columns:1fr .92fr;
      gap:54px;
      align-items:center;
      padding:70px 0 64px;
    }
    .hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:28px}
    .proof-row{
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:12px;
      max-width:760px;
    }
    .proof{
      min-height:94px;
      border:1px solid var(--line);
      background:rgba(255,255,255,.78);
      border-radius:18px;
      padding:16px;
      box-shadow:var(--shadow-soft);
    }
    .proof strong{display:block;margin-bottom:4px}
    .proof span{display:block;color:var(--muted);font-size:13px}

    .route-card{
      background:#fff;
      border:1px solid var(--line);
      border-radius:30px;
      box-shadow:0 28px 80px rgba(15,45,65,.14);
      padding:26px;
    }
    .route-card header{display:flex;align-items:start;justify-content:space-between;gap:16px;margin-bottom:18px}
    .route-card small{color:var(--muted);font-weight:800}
    .route-list{display:grid;gap:10px;margin-bottom:16px}
    .route-btn{
      width:100%;
      min-height:54px;
      text-align:left;
      border:1px solid var(--line);
      background:#fff;
      border-radius:16px;
      padding:14px 16px;
      cursor:pointer;
      color:var(--text);
      font-weight:850;
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:12px;
    }
    .route-btn:hover,.route-btn.active{border-color:#9fe4d9;background:#effdfa;color:var(--teal-dark)}
    .recommendation{
      border:1px solid #a7e8df;
      background:linear-gradient(180deg,#f0fffb,#fff);
      border-radius:22px;
      padding:20px;
    }
    .recommendation .label{font-size:13px;color:var(--teal-dark);font-weight:900;text-transform:uppercase;letter-spacing:.08em}
    .recommendation h3{font-size:26px;margin:6px 0}
    .recommendation p{color:var(--muted);margin-bottom:16px}

    .start-grid{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:18px;
    }
    .path-card,.product-card,.category-card,.compare-card,.article-card,.faq-item,.value-card{
      background:var(--surface);
      border:1px solid var(--line);
      border-radius:var(--radius);
      box-shadow:var(--shadow-soft);
    }
    .path-card{padding:24px}
    .path-card .step{
      width:38px;height:38px;border-radius:13px;display:grid;place-items:center;
      background:var(--teal-soft);color:var(--teal-dark);font-weight:950;margin-bottom:18px;
    }
    .path-card p{color:var(--muted)}
    .text-link{color:var(--teal-dark);font-weight:950;display:inline-flex;gap:7px;align-items:center;margin-top:6px}

    .leadmagnet{
      background:linear-gradient(135deg,#09302f,#0b1728);
      color:#fff;
      border-radius:34px;
      padding:34px;
      display:grid;
      grid-template-columns:1fr .86fr;
      gap:34px;
      align-items:start;
      box-shadow:0 26px 70px rgba(11,23,40,.18);
    }
    .leadmagnet .eyebrow{background:rgba(255,255,255,.12);color:#b6fff5}
    .leadmagnet p,.leadmagnet .muted{color:#d7e8e5}
    .prompt-samples{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:24px}
    .prompt-sample{
      border:1px solid rgba(255,255,255,.16);
      background:rgba(255,255,255,.07);
      border-radius:18px;
      padding:16px;
    }
    .prompt-sample strong{display:block;margin-bottom:8px;color:#b6fff5}
    .lead-form{
      background:#fff;
      color:var(--ink);
      border-radius:24px;
      padding:24px;
      box-shadow:0 18px 44px rgba(0,0,0,.16);
    }
    .form-grid{display:grid;gap:12px}
    label{font-weight:850;font-size:14px;color:var(--text)}
    input,select,textarea{
      width:100%;
      min-height:46px;
      border:1px solid var(--line);
      background:#fff;
      color:var(--ink);
      border-radius:14px;
      padding:12px 14px;
    }
    .check{
      display:flex;
      align-items:flex-start;
      gap:10px;
      font-size:13px;
      color:var(--muted);
    }
    .check input{width:18px;height:18px;min-height:18px;margin-top:3px}
    .fine{font-size:13px;color:var(--muted);margin:12px 0 0}

    .product-grid{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:20px;
    }
    .product-card{overflow:hidden;display:flex;flex-direction:column}
    .cover{
      min-height:170px;
      display:flex;
      align-items:end;
      justify-content:space-between;
      gap:12px;
      padding:22px;
      background:
        linear-gradient(135deg,rgba(0,159,143,.16),rgba(37,99,235,.10)),
        #f8fffd;
      border-bottom:1px solid var(--line);
    }
    .cover .book{
      width:96px;height:126px;border-radius:12px;
      background:linear-gradient(135deg,#0f766e,#14b8a6);
      box-shadow:10px 12px 0 rgba(15,118,110,.14);
      color:#fff;
      padding:14px;
      display:flex;align-items:end;font-weight:950;letter-spacing:-.03em;
    }
    .cover.course .book{background:linear-gradient(135deg,#2563eb,#7c3aed)}
    .cover.prompt .book{background:linear-gradient(135deg,#f59e0b,#ef4444)}
    .cover small{font-weight:900;color:var(--teal-dark);background:#fff;border:1px solid var(--line);padding:6px 9px;border-radius:999px}
    .product-body{padding:22px;display:flex;flex-direction:column;flex:1}
    .product-meta{
      display:flex;
      flex-wrap:wrap;
      gap:8px;
      margin:10px 0 14px;
    }
    .tag{
      display:inline-flex;
      align-items:center;
      min-height:28px;
      background:#eefaf6;
      color:#0f766e;
      border:1px solid #c7ede5;
      border-radius:999px;
      padding:5px 9px;
      font-size:12px;
      font-weight:850;
    }
    .price{
      font-size:29px;
      font-weight:950;
      letter-spacing:-.04em;
      margin:12px 0 12px;
    }
    .price.free{color:var(--teal-dark)}
    .product-card ul,.audit-box ul{padding-left:0;list-style:none;margin:0 0 18px}
    .product-card li,.audit-box li{margin:8px 0;color:var(--muted);font-size:14px}
    .product-card li:before,.audit-box li:before{content:"✓";font-weight:950;color:var(--teal);margin-right:8px}
    .product-card .btn{margin-top:auto}

    .category-grid{
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:16px;
    }
    .category-card{padding:22px}
    .cat-icon{width:46px;height:46px;border-radius:16px;background:var(--teal-soft);display:grid;place-items:center;font-size:22px;margin-bottom:16px}
    .category-card p{color:var(--muted);font-size:14px}
    .category-card strong{display:block;margin:12px 0 3px}
    .category-card .tool{color:var(--teal-dark)}

    .compare-grid{
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:16px;
    }
    .compare-card{padding:20px}
    .compare-row{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:10px;
      margin:16px 0;
    }
    .compare-cell{
      background:#f7fbf9;
      border:1px solid var(--line);
      border-radius:14px;
      padding:12px;
      font-size:13px;
    }
    .affiliate-note{
      background:#fff8e6;
      border:1px solid #fde68a;
      color:#7c4a03;
      border-radius:16px;
      padding:14px 16px;
      margin-top:18px;
      font-size:14px;
    }

    .logic{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:18px;
    }
    .value-card{padding:24px}
    .value-card .num{font-size:42px;font-weight:950;color:var(--teal);line-height:1}

    .audit-transfer{
      background:#0b1728;
      color:#fff;
      border-radius:34px;
      padding:34px;
      display:grid;
      grid-template-columns:1fr .55fr;
      gap:28px;
      align-items:center;
    }
    .audit-transfer p{color:#d4e0e6;margin-bottom:0}
    .audit-transfer .btn{justify-self:end}

    .article-grid{
      display:grid;
      grid-template-columns:1.2fr repeat(3,1fr);
      gap:16px;
    }
    .article-card{padding:20px}
    .article-card.featured{background:linear-gradient(180deg,#effdfa,#fff)}
    .article-card .kind{font-size:12px;font-weight:950;color:var(--teal-dark);text-transform:uppercase;letter-spacing:.08em;margin-bottom:10px}

    .faq-list{display:grid;gap:12px;max-width:920px;margin-inline:auto}
    .faq-item{overflow:hidden}
    .faq-question{
      width:100%;
      min-height:58px;
      border:0;
      background:#fff;
      color:var(--ink);
      cursor:pointer;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:18px;
      padding:18px 20px;
      text-align:left;
      font-weight:950;
    }
    .faq-question span:last-child{font-size:22px;color:var(--teal)}
    .faq-answer{
      display:none;
      padding:0 20px 20px;
      color:var(--muted);
    }
    .faq-item.open .faq-answer{display:block}
    .faq-item.open .faq-question span:last-child{transform:rotate(45deg)}

    .final-cta{
      background:linear-gradient(135deg,#e9fffb,#ffffff);
      border:1px solid #c5eee6;
      border-radius:34px;
      padding:34px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:22px;
    }
    .final-cta p{margin-bottom:0;color:var(--muted)}
    .final-actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:flex-end}

    .site-footer{
      background:#071426;
      color:#cdd7df;
      padding:54px 0 90px;
      margin-top:30px;
    }
    .footer-grid{
      display:grid;
      grid-template-columns:1.5fr repeat(4,1fr);
      gap:32px;
    }
    .footer-grid h4{color:#fff;margin:0 0 12px}
    .footer-grid a{display:block;color:#cdd7df;margin:9px 0;font-size:14px}
    .footer-bottom{
      border-top:1px solid rgba(255,255,255,.12);
      margin-top:34px;
      padding-top:20px;
      display:flex;
      justify-content:space-between;
      gap:16px;
      color:#8fa2b0;
      font-size:13px;
    }
    .mobile-sticky{
      position:fixed;
      left:0;right:0;bottom:0;
      z-index:70;
      display:none;
      background:#fff;
      border-top:1px solid var(--line);
      padding:10px 14px;
      box-shadow:0 -12px 28px rgba(15,45,65,.1);
      gap:10px;
    }
    .mobile-sticky .btn{flex:1;padding-inline:10px}

    @media (prefers-reduced-motion: reduce){
      *,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}
      .btn:hover{transform:none}
    }
    @media (max-width:1080px){
      .nav-menu{display:none}
      .mobile-toggle{display:inline-grid;place-items:center}
      .nav-menu.open{
        display:flex;
        position:fixed;
        inset:76px 0 auto 0;
        background:#fff;
        border-bottom:1px solid var(--line);
        flex-direction:column;
        align-items:stretch;
        padding:18px 4%;
        gap:4px;
        box-shadow:var(--shadow);
      }
      .nav-menu.open a{padding:10px 0}
      .hero-grid,.leadmagnet,.audit-transfer{grid-template-columns:1fr}
      .audit-transfer .btn{justify-self:start}
      .proof-row,.category-grid,.compare-grid,.footer-grid{grid-template-columns:repeat(2,1fr)}
      .article-grid{grid-template-columns:1fr 1fr}
    }
    @media (max-width:760px){
      .header-actions .desktop-only,.cart-link{display:none}
      .navbar{min-height:68px}
      h1{font-size:42px}
      .section{padding:54px 0}
      .hero-grid{padding:44px 0}
      .proof-row,.start-grid,.prompt-samples,.product-grid,.category-grid,.compare-grid,.logic,.article-grid,.footer-grid{grid-template-columns:1fr}
      .leadmagnet,.audit-transfer,.final-cta{padding:24px;border-radius:26px}
      .section-head,.final-cta,.footer-bottom{display:block}
      .final-actions{justify-content:flex-start;margin-top:18px}
      .mobile-sticky{display:flex}
      .site-footer{padding-bottom:110px}
      .compare-grid{gap:14px}
      .cover{min-height:150px}
    }