/* ==========================================================================
   Pratik Zekam — Ortak Tasarım Sistemi (Design System)
   Bu dosya sitedeki TÜM sayfalarda ortak kullanılacak:
   renk/tipografi token'ları, sidebar, topbar, butonlar, kart bileşenleri.

   Kullanım: her sayfanın <head>'inde, Google Fonts linkinden SONRA ekle:
     <link rel="stylesheet" href="pz-design-system.css">

   Google Fonts (her sayfada gerekli):
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Caveat:wght@500;600;700&display=swap" rel="stylesheet">
     <link href="https://api.fontshare.com/v2/css?f[]=satoshi@900,700,500&display=swap" rel="stylesheet">
       (Satoshi sadece büyük başlıklarda / hero alanlarında kullanılır)
   ========================================================================== */

  :root{
    --navy:#121635;
    --navy-2:#1b2050;
    --purple:#6D5AF6;
    --purple-dark:#5943F0;
    --purple-light:#8A7BFC;
    --bg:#F3F4FC;
    --ink:#171833;
    --sub:#8A8CA8;

    --pink-bg:#FBE3EC; --pink-icon:#F0507E; --pink-icon-bg:#FCEFF3;
    --lav-bg:#EBE9FC;  --lav-icon:#6D5AF6; --lav-icon-bg:#F3F1FE;
    --blue-bg:#E2EEFC; --blue-icon:#2E8FE6; --blue-icon-bg:#EDF5FD;
    --mint-bg:#DEF3EF; --mint-icon:#16AE8C; --mint-icon-bg:#E9F8F4;
    --peach-bg:#FBE9D6; --peach-icon:#F0A22E; --peach-icon-bg:#FDF3E7;

    --card-r:20px;
    --shadow:0 1px 2px rgba(23,24,51,.04);

    /* ---------------------------------------------------------------
       Design token aliases — istenen isimlendirme (Design System v2).
       Mevcut değişkenlerin üstüne ekleniyor, hiçbirini değiştirmiyor —
       28 sayfa hâlâ eski isimlerle çalışmaya devam ediyor.
       --------------------------------------------------------------- */
    --bg-main:var(--bg);
    --bg-card:#fff;
    --sidebar-bg:var(--navy);
    --primary:var(--purple);
    --primary-dark:var(--purple-dark);
    --primary-light:var(--purple-light);
    --accent-pink:#F0507E;
    --accent-blue:#2E8FE6;
    --accent-cyan:#16AE8C;
    --accent-yellow:#FBD24A;

    --text-primary:var(--ink);
    --text-secondary:var(--sub);
    --text-muted:#B4B6D1;

    --border:#EEEEF8;

    --radius-sm:10px;
    --radius-md:16px;
    --radius-lg:20px;

    --shadow-sm:0 1px 2px rgba(23,24,51,.04);
    --shadow-md:0 12px 28px -14px rgba(23,24,51,.18);

    --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
    --space-5:20px; --space-6:24px; --space-7:32px; --space-8:40px;
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    font-family:'Inter',system-ui,sans-serif;
    background:var(--bg);
    color:var(--ink);
    -webkit-font-smoothing:antialiased;
  }
  a{text-decoration:none;color:inherit;}
  button{font-family:inherit;}

  /* ==========================================================================
     PZ COMPONENT SYSTEM — ortak, yeniden kullanılabilir bileşen sınıfları.
     Her çalışma sayfası (Eser Tanıma, Olay Tanıma, Eşleştirme, ...) bunları
     kullanır; içerik yapısı sayfaya göre değişir, görsel dil değişmez.
     ========================================================================== */

  .pz-section-header, .quiz-header-row{display:flex;align-items:flex-start;gap:14px;margin-bottom:var(--space-5);}
  .pz-icon-box, .quiz-icon-chip{
    width:52px;height:52px;border-radius:var(--radius-md);flex:none;
    background:linear-gradient(135deg,var(--primary-light),var(--primary));
    display:flex;align-items:center;justify-content:center;color:#fff;
    box-shadow:0 10px 20px -8px rgba(109,90,246,.5);
  }
  .pz-icon-box svg, .quiz-icon-chip svg{width:24px;height:24px;}
  .pz-section-header .pz-heading, .quiz-header-text{flex:1;min-width:0;}
  .pz-section-header .pz-heading h2, .quiz-header-text h2{font-family:'Satoshi',sans-serif;font-weight:800;font-size:20px;color:var(--text-primary);}
  .pz-section-header .pz-heading p, .quiz-header-text p{font-size:12.5px;color:var(--text-secondary);margin-top:3px;}
  .pz-badge-action, .quiz-period-pill{
    flex:none;display:flex;align-items:center;gap:6px;background:var(--lav-bg);color:var(--primary);
    font-size:12px;font-weight:700;padding:8px 14px;border-radius:100px;border:none;cursor:pointer;
  }

  .pz-card{
    background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);
    padding:var(--space-6);box-shadow:var(--shadow-sm);
  }
  .pz-badge{
    display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;
    padding:5px 12px;border-radius:100px;background:var(--lav-bg);color:var(--primary);
  }
  .pz-button{
    display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:14px;
    padding:12px 22px;border-radius:100px;border:none;cursor:pointer;
    transition:transform .15s ease,box-shadow .15s ease;font-family:'Inter',sans-serif;
  }
  .pz-button:hover{transform:translateY(-1px);}
  .pz-button-primary{
    background:linear-gradient(90deg,var(--accent-pink),var(--primary));color:#fff;
    box-shadow:0 12px 24px -10px rgba(109,90,246,.5);
  }
  .pz-button-secondary{background:#fff;color:var(--primary);border:1.5px solid var(--border);}
  .pz-button-ghost{background:var(--bg-main);color:var(--text-primary);}

  .pz-progress, .quiz-progress-row{display:flex;align-items:center;gap:14px;margin-bottom:var(--space-4);}
  .pz-progress .pz-progress-block, .quiz-progress-block{flex:1;}
  .pz-progress .pz-progress-frac, .quiz-progress-frac{font-size:12.5px;font-weight:700;color:var(--text-secondary);margin-bottom:6px;}
  .pz-progress .pz-progress-frac b, .quiz-progress-frac b{color:var(--text-primary);}
  .pz-progress-track, .quiz-progress-track{height:7px;border-radius:100px;background:var(--lav-bg);overflow:hidden;}
  .pz-progress-fill, .quiz-progress-fill{height:100%;border-radius:100px;background:linear-gradient(90deg,var(--accent-pink),var(--primary));transition:width .3s;}
  .pz-timer-chip, .quiz-timer-chip{
    flex:none;display:flex;align-items:center;gap:6px;background:var(--pink-bg);color:#E23A68;
    font-size:12.5px;font-weight:700;padding:8px 14px;border-radius:100px;
  }

  .pz-status-card, .quiz-score-row{
    display:flex;align-items:center;justify-content:space-between;gap:10px;
    background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-md);
    padding:12px 16px;margin-bottom:var(--space-5);box-shadow:var(--shadow-sm);
  }
  .pz-status-left, .quiz-score-left{display:flex;align-items:center;gap:10px;}
  .pz-status-left b, .quiz-score-left b{font-size:13px;display:block;}
  .pz-status-left span, .quiz-score-left span{font-size:11px;color:var(--text-secondary);}
  .pz-status-dots, .quiz-dots{display:flex;gap:5px;}
  .pz-status-dots i, .quiz-dots i{width:7px;height:7px;border-radius:50%;background:var(--lav-bg);display:block;font-style:normal;}
  .quiz-dots i.dot-correct{background:var(--accent-cyan);}
  .quiz-dots i.dot-wrong{background:#dc2626;}

  .pz-question-card, .question-card{
    width:100%;min-height:150px;background:var(--bg-card);border:1px solid var(--border);
    border-radius:var(--radius-lg);padding:34px 36px;display:flex;align-items:center;
    justify-content:center;text-align:center;box-shadow:var(--shadow-sm);margin-bottom:var(--space-5);
  }
  .pz-question-card span, .question-card span{font-weight:600;font-size:clamp(16px,2.2vw,19px);color:var(--text-primary);line-height:1.6;}

  .pz-answer-option, .opt-row{
    display:flex;align-items:center;gap:12px;padding:16px 18px;min-height:60px;
    border-radius:15px;box-sizing:border-box;background:var(--bg-card);
    border:1.5px solid var(--border);cursor:pointer;transition:all .15s;
  }
  .pz-answer-option:hover, .opt-row:hover{border-color:var(--primary);}
  .pz-answer-option.selected{border-color:var(--primary);background:var(--lav-bg);}
  .pz-answer-option.correct, .opt-row.correct{border-color:var(--accent-cyan);background:rgba(22,174,140,.07);}
  .pz-answer-option.wrong, .opt-row.wrong{border-color:#dc2626;background:rgba(220,38,38,.06);}
  .opt-letter{
    flex-shrink:0;width:26px;height:26px;border-radius:50%;background:var(--lav-bg);
    display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px;
    color:var(--text-secondary);transition:all .15s;
  }
  .opt-text{flex:1;font-size:13.5px;font-weight:500;line-height:1.4;color:var(--text-primary);}
  .opt-radio{
    flex:none;width:20px;height:20px;border-radius:50%;border:2px solid var(--border);
    display:flex;align-items:center;justify-content:center;transition:all .15s;
  }
  .opt-row.correct .opt-letter{background:var(--accent-cyan);color:#fff;}
  .opt-row.correct .opt-radio{background:var(--accent-cyan);border-color:var(--accent-cyan);}
  .opt-row.correct .opt-radio::after{content:"✓";color:#fff;font-size:11px;font-weight:700;line-height:1;}
  .opt-row.wrong .opt-letter{background:#dc2626;color:#fff;}
  .opt-row.wrong .opt-radio{background:#dc2626;border-color:#dc2626;}
  .opt-row.wrong .opt-radio::after{content:"✕";color:#fff;font-size:10px;font-weight:700;line-height:1;}
  .opt-row.disabled{cursor:default;pointer-events:none;}
  .opt-row.dim{opacity:.5;}


  .pz-info-banner{
    background:var(--lav-bg);border-radius:var(--radius-md);padding:14px 18px;
    font-size:12.5px;line-height:1.6;color:var(--text-primary);margin-bottom:var(--space-5);
  }
  .pz-hint-card, .study-hint-card{
    display:flex;align-items:flex-start;gap:12px;background:var(--lav-bg);
    border-radius:var(--radius-md);padding:16px 18px;margin-top:var(--space-5);
  }
  .pz-hint-card .pz-hint-icon, .study-hint-card .sh-icon{
    width:34px;height:34px;border-radius:var(--radius-sm);flex:none;background:#fff;
    display:flex;align-items:center;justify-content:center;font-size:16px;
  }
  .pz-hint-card b, .study-hint-card .sh-text b{display:block;font-size:12.5px;color:var(--primary);margin-bottom:3px;}
  .pz-hint-card p, .study-hint-card .sh-text p{font-size:12.5px;color:var(--text-primary);line-height:1.55;margin:0;}

  .app{
    display:grid;
    grid-template-columns:264px 1fr 64px;
    min-height:100vh;
  }

  /* ---------- SIDEBAR ---------- */
  .sidebar{
    background:linear-gradient(180deg,var(--navy) 0%, var(--navy-2) 100%);
    padding:24px 18px;
    display:flex;
    flex-direction:column;
    position:sticky;
    top:0;
    height:100vh;
  }
  .brand{
    display:flex;
    align-items:center;
    gap:12px;
    padding:4px 6px 22px 6px;
  }
  .brand-mark{
    width:42px;height:42px;border-radius:12px;flex:none;
    display:flex;align-items:center;justify-content:center;
    object-fit:contain;
  }
  .brand-name{color:#fff;font-weight:700;font-size:15px;line-height:1.2;}
  .brand-sub{color:#8285B0;font-size:11px;margin-top:2px;}

  nav.mainnav{display:flex;flex-direction:column;gap:2px;margin-top:6px;}
  .navitem{
    display:flex;align-items:center;gap:12px;
    padding:11px 14px;border-radius:12px;
    color:#B7B9D8;font-size:14px;font-weight:500;
    transition:background .15s ease, color .15s ease;
  }
  .navitem svg{width:18px;height:18px;flex:none;opacity:.9;}
  .navitem:hover{background:rgba(255,255,255,.05);color:#fff;}
  .navitem.active{
    background:linear-gradient(90deg,var(--purple-dark),var(--purple-light));
    color:#fff;
    box-shadow:0 6px 14px rgba(109,90,246,.35);
  }

  .side-spacer{flex:1;}

  .today-card{
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.08);
    border-radius:16px;
    padding:16px;
    margin-top:18px;
  }
  .today-card .bolt{
    width:30px;height:30px;border-radius:9px;
    background:rgba(240,162,46,.15);
    display:flex;align-items:center;justify-content:center;
    margin-bottom:10px;
  }
  .today-card .bolt svg{width:15px;height:15px;color:#F0A22E;}
  .today-card p{margin:0;color:#8285B0;font-size:12px;}
  .today-card p.strong{color:#fff;font-size:14px;font-weight:700;margin:2px 0 6px;}
  .progress-track{
    margin-top:10px;height:6px;border-radius:6px;
    background:rgba(255,255,255,.1);overflow:hidden;
  }
  .progress-fill{
    height:100%;width:38%;border-radius:6px;
    background:linear-gradient(90deg,#F0A22E,#6D5AF6);
  }

  .mountain-wrap{
    margin-top:20px;
    padding:14px 6px 4px;
    text-align:center;
  }
  .mountain-wrap svg{width:100%;height:auto;display:block;}
  .mountain-caption{
    color:#54578A;font-size:11.5px;line-height:1.4;margin-top:8px;
  }

  /* ---------- RIGHT RAIL ---------- */
  .rightrail{
    border-left:1px solid #E7E8F5;
    display:flex;flex-direction:column;align-items:center;
    gap:14px;padding:20px 0;
    position:sticky;top:0;height:100vh;
  }
  .rail-btn{
    width:34px;height:34px;border-radius:10px;
    display:flex;align-items:center;justify-content:center;
    background:#fff;border:1px solid #ECEDF8;color:#8A8CA8;
    box-shadow:var(--shadow);
  }
  .rail-btn svg{width:16px;height:16px;}
  .rail-btn.chev{background:#F3F1FE;color:var(--purple);border-color:transparent;}

  /* ---------- MAIN ---------- */
  main{padding:22px 28px 60px;min-width:0;}

  .topbar{
    display:flex;align-items:center;gap:16px;margin-bottom:22px;
    padding:16px 0;
  }
  .search{
    flex:1;
    display:flex;align-items:center;gap:10px;
    background:#fff;border:1px solid #ECEDF8;
    border-radius:999px;padding:12px 18px;
    color:#A9AAC6;font-size:13.5px;
    box-shadow:var(--shadow);
  }
  .search svg{width:16px;height:16px;flex:none;}
  .btn-ai{
    display:flex;align-items:center;gap:8px;
    background:linear-gradient(90deg,var(--purple-dark),var(--purple-light));
    color:#fff;font-weight:600;font-size:13.5px;
    padding:12px 20px;border-radius:999px;white-space:nowrap;
    box-shadow:0 8px 16px rgba(109,90,246,.28);
  }
  .btn-ai svg{width:15px;height:15px;}
  .icon-btn{
    width:42px;height:42px;border-radius:50%;
    background:#fff;border:1px solid #ECEDF8;
    display:flex;align-items:center;justify-content:center;
    position:relative;flex:none;box-shadow:var(--shadow);
  }
  .icon-btn svg{width:17px;height:17px;color:#7A7CA0;}
  .icon-btn .dot{
    position:absolute;top:9px;right:10px;
    width:7px;height:7px;border-radius:50%;
    background:#F0507E;border:1.5px solid #fff;
  }
  .profile-pill{
    display:flex;align-items:center;gap:9px;
    background:#fff;border:1px solid #ECEDF8;
    border-radius:999px;padding:6px 14px 6px 6px;
    font-size:13.5px;font-weight:600;white-space:nowrap;
    box-shadow:var(--shadow);
  }
  .profile-pill .avatar{
    width:28px;height:28px;border-radius:50%;
    background:var(--navy);color:#fff;
    display:flex;align-items:center;justify-content:center;
    font-size:12px;font-weight:700;
  }
  .profile-pill svg{width:13px;height:13px;color:#A9AAC6;}

  /* ---------- HERO ---------- */
  .hero{
    background:#EEEDFB;
    border-radius:26px;
    padding:36px 38px;
    display:grid;
    grid-template-columns:1.15fr 1fr auto;
    gap:20px;
    align-items:center;
    margin-bottom:26px;
  }
  .eyebrow{
    display:inline-flex;align-items:center;gap:7px;
    background:#fff;border-radius:999px;
    padding:7px 14px;font-size:12.5px;font-weight:600;color:var(--purple);
    margin-bottom:16px;
  }
  .eyebrow svg{width:13px;height:13px;}
  .hero h1{
    font-family:'Satoshi',sans-serif;
    font-size:42px;line-height:1.08;font-weight:900;
    margin:0 0 16px;letter-spacing:-.3px;
  }
  .hero h1 mark{
    background:#FBD24A;color:var(--ink);
    padding:2px 11px 7px;
    border-radius:255px 15px 225px 15px/15px 225px 15px 255px;
    display:inline-block;
    transform:rotate(-1.5deg);
    box-decoration-break:clone;-webkit-box-decoration-break:clone;
  }
  .hero p{
    font-size:14.5px;line-height:1.6;color:#6E7091;
    max-width:38ch;margin:0 0 22px;
  }
  .hero-actions{display:flex;align-items:center;gap:12px;}
  .btn-primary{
    display:flex;align-items:center;gap:8px;
    background:var(--purple);color:#fff;font-weight:700;font-size:14px;
    padding:13px 22px;border-radius:999px;
    box-shadow:0 10px 20px rgba(109,90,246,.32);
  }
  .btn-primary svg{width:15px;height:15px;}
  .btn-outline{
    display:flex;align-items:center;gap:8px;
    background:#fff;color:var(--ink);font-weight:600;font-size:14px;
    padding:13px 20px;border-radius:999px;border:1px solid #E1E1F3;
  }
  .btn-outline svg{width:11px;height:11px;color:var(--purple);}

  .hero-illustration{
    display:flex;align-items:center;justify-content:center;
    position:relative;height:280px;
  }
  .card-stack{position:relative;width:250px;height:290px;}
  .stack-card{
    position:absolute;width:185px;height:245px;border-radius:32px;
  }
  .stack-card.yellow{
    background:#FBD24A;
    left:-2px;top:64px;
    transform:rotate(-11deg);
  }
  .stack-card.purple{
    background:linear-gradient(145deg,#9284FF,#6D5AF6);
    left:52px;top:-2px;
    transform:rotate(9deg);
  }
  .stack-card.dark{
    background:#171833;
    left:32px;top:34px;
    transform:rotate(-6deg);
    box-shadow:0 22px 40px rgba(23,24,51,.28);
    padding:22px 20px;
    display:flex;flex-direction:column;
    z-index:3;
  }
  .stack-card.dark .quote{
    font-family:'Caveat',cursive;font-weight:600;
    font-size:25px;line-height:1.22;color:#fff;
  }
  .stack-card.dark .smiley{
    margin-top:auto;align-self:flex-end;
    width:26px;height:26px;
  }
  .sparkle-lines{position:absolute;z-index:5;}
  .sparkle-lines.left{left:-42px;top:70px;}
  .sparkle-lines.right{right:-30px;top:6px;}

  .hero-stats{display:flex;flex-direction:column;gap:16px;padding-left:6px;}
  .stat-row{display:flex;align-items:center;gap:12px;}
  .stat-icon{
    width:42px;height:42px;border-radius:12px;flex:none;
    display:flex;align-items:center;justify-content:center;
    background:#fff;
  }
  .stat-icon svg{width:19px;height:19px;color:var(--purple);}
  .stat-num{font-size:19px;font-weight:800;line-height:1.1;}
  .stat-label{font-size:12px;color:#8385AA;margin-top:1px;}
  .hero-note{
    margin-top:6px;font-family:'Caveat',cursive;
    font-size:19px;color:var(--ink);font-weight:600;
    display:flex;align-items:center;gap:5px;
  }

  /* ---------- SECTION HEADERS ---------- */
  .section{margin-bottom:28px;}
  .section-head{
    display:flex;align-items:center;justify-content:space-between;
    margin-bottom:16px;
  }
  .section-title{
    display:flex;align-items:center;gap:9px;
    font-size:17px;font-weight:700;
  }
  .section-title .ico{
    width:26px;height:26px;border-radius:8px;
    background:#F3F1FE;display:flex;align-items:center;justify-content:center;
  }
  .section-title .ico svg{width:13px;height:13px;color:var(--purple);}
  .section-sub{font-size:12.5px;color:#9294B3;margin:3px 0 0 35px;}
  .section-link{
    display:flex;align-items:center;gap:5px;
    font-size:13px;font-weight:600;color:var(--purple);
  }
  .section-link svg{width:12px;height:12px;}

  /* ---------- EXAM CARDS ---------- */
  .exam-grid{
    display:grid;grid-template-columns:repeat(5,1fr);gap:16px;
  }
  .exam-card{
    border-radius:var(--card-r);
    padding:18px;
    display:flex;flex-direction:column;
    min-height:168px;
  }
  .exam-card .top{display:flex;align-items:flex-start;justify-content:space-between;}
  .exam-card h3{margin:0;font-size:15.5px;font-weight:800;}
  .exam-card .exam-sub{font-size:11px;color:#6E7091;margin-top:3px;line-height:1.35;max-width:16ch;}
  .exam-card .icon-chip{
    width:56px;height:56px;border-radius:16px;flex:none;
    display:flex;align-items:center;justify-content:center;
    background:rgba(255,255,255,.45);
  }
  .exam-card .icon-chip svg{width:44px;height:44px;overflow:visible;}
  .exam-card .bottom{
    margin-top:auto;display:flex;align-items:flex-end;justify-content:space-between;
  }
  .exam-card .num{font-size:22px;font-weight:800;line-height:1;}
  .exam-card .num + span{display:block;font-size:11px;color:#6E7091;margin-top:4px;}
  .exam-card .go{
    width:30px;height:30px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;color:#fff;flex:none;
  }
  .exam-card .go svg{width:13px;height:13px;}

  .exam-card.tyt{background:var(--pink-bg);}
  .exam-card.tyt .go{background:var(--pink-icon);}

  .exam-card.ayt{background:var(--lav-bg);}
  .exam-card.ayt .go{background:var(--lav-icon);}

  .exam-card.ydt{background:var(--blue-bg);}
  .exam-card.ydt .go{background:var(--blue-icon);}

  .exam-card.kpss{background:var(--mint-bg);}
  .exam-card.kpss .go{background:var(--mint-icon);}

  .exam-card.kpssol{background:var(--peach-bg);}
  .exam-card.kpssol .go{background:var(--peach-icon);}

  /* ---------- SUBJECT CARDS ---------- */
  .subject-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;}
  .subject-card{
    background:#fff;border:1px solid #EEEEF8;border-radius:var(--card-r);
    padding:16px;box-shadow:var(--shadow);
  }
  .subject-card .icon-chip{
    width:52px;height:52px;border-radius:15px;
    display:flex;align-items:center;justify-content:center;margin-bottom:14px;
    background:transparent;
  }
  .subject-card .icon-chip svg{width:46px;height:46px;overflow:visible;}
  .subject-card h4{margin:0 0 3px;font-size:14.5px;font-weight:700;}
  .subject-card .subj-sub{font-size:11.5px;color:#9294B3;margin-bottom:14px;}
  .subject-card .bottom{display:flex;align-items:center;justify-content:space-between;}
  .subject-card .count{font-size:12px;font-weight:600;color:#6E7091;}
  .subject-card .go{
    width:26px;height:26px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    background:#F5F5FB;color:var(--purple);
  }
  .subject-card .go svg{width:11px;height:11px;}

  .subject-card:nth-child(1) .icon-chip{background:transparent;}
  .subject-card:nth-child(2) .icon-chip{background:transparent;}
  .subject-card:nth-child(3) .icon-chip{background:transparent;}
  .subject-card:nth-child(4) .icon-chip{background:transparent;}
  .subject-card:nth-child(5) .icon-chip{background:transparent;}

  @media (max-width:1180px){
    .exam-grid,.subject-grid{grid-template-columns:repeat(3,1fr);}
    .hero{grid-template-columns:1fr;}
    .hero-illustration{order:-1;height:200px;}
  }
  @media (max-width:760px){
    .app{grid-template-columns:1fr;}
    .sidebar{
      position:fixed;top:0;left:0;height:100vh;width:264px;z-index:300;
      transform:translateX(-100%);transition:transform .25s ease;
    }
    .sidebar.open{transform:translateX(0);box-shadow:20px 0 50px rgba(10,12,30,.35);}
    .rightrail{display:none;}
    .exam-grid,.subject-grid{grid-template-columns:repeat(2,1fr);}
    .mobile-menu-btn{display:flex !important;}
    .search{flex:0 0 auto;font-size:0;padding:12px;gap:0;}
    .search svg{width:18px;height:18px;}
    .btn-ai{font-size:0;padding:12px;gap:0;}
    .btn-ai svg{width:16px;height:16px;}
    .topbar{gap:8px;}
  }
  .sidebar-overlay{
    display:none;position:fixed;inset:0;background:rgba(10,12,30,.55);z-index:299;
  }
  .sidebar-overlay.show{display:block;}
  .mobile-menu-btn{
    display:none;width:42px;height:42px;border-radius:50%;
    background:#fff;border:1px solid #ECEDF8;align-items:center;justify-content:center;
    flex:none;box-shadow:var(--shadow);cursor:pointer;
  }
  .mobile-menu-btn svg{width:18px;height:18px;color:#7A7CA0;}

  /* ==========================================================================
     PZ APP SHELL v2 — izole "pz-" önekli sidebar/topbar sınıfları.
     Eski .sidebar/.navitem/.topbar kuralları YUKARIDA duruyor ve hâlâ
     28 sayfa tarafından kullanılıyor — onlara dokunulmadı.
     Bu blok, yeni sayfalar bu isimlendirmeye geçtikçe kullanılacak.
     ========================================================================== */
  .pz-sidebar{
    background:linear-gradient(180deg,var(--navy) 0%, var(--navy-2) 100%);
    padding:26px 20px; display:flex; flex-direction:column;
    position:sticky; top:0; height:100vh; flex:none;
  }
  .pz-sidebar-brand{display:flex; align-items:center; gap:12px; padding:4px 4px 24px;}
  .pz-sidebar-brand-mark{width:42px; height:42px; border-radius:12px; flex:none; object-fit:contain;}
  .pz-sidebar-brand-name{color:#fff; font-weight:700; font-size:15px; line-height:1.2;}
  .pz-sidebar-brand-sub{color:#8285B0; font-size:11px; margin-top:2px;}
  .pz-sidebar-nav{display:flex; flex-direction:column; gap:2px; margin-top:6px;}
  .pz-sidebar-item{
    display:flex; align-items:center; gap:12px; padding:11px 14px; border-radius:12px;
    color:#B7B9D8; font-size:14px; font-weight:500; transition:background .15s ease, color .15s ease;
  }
  .pz-sidebar-item svg{width:18px; height:18px; flex:none; opacity:.9;}
  .pz-sidebar-item:hover{background:rgba(255,255,255,.05); color:#fff;}
  .pz-sidebar-item.active{
    background:linear-gradient(90deg,var(--primary-dark),var(--primary-light));
    color:#fff; box-shadow:0 6px 14px rgba(109,90,246,.35);
  }
  .pz-sidebar-spacer{flex:1;}
  .pz-sidebar-footer{margin-top:20px; padding:14px 6px 4px; text-align:center;}
  .pz-sidebar-footer svg{width:100%; height:auto; display:block;}
  .pz-sidebar-footer-caption{color:#54578A; font-size:11.5px; line-height:1.4; margin-top:8px;}

  .pz-main{padding:0 32px 60px; min-width:0;}
  .pz-topbar{display:flex; align-items:center; gap:16px; min-height:84px; padding:20px 0;}
  .pz-search{
    flex:1; max-width:480px; min-width:0;
    display:flex; align-items:center; gap:10px;
    background:#fff; border:1px solid var(--border);
    border-radius:999px; padding:13px 20px;
    color:#A9AAC6; font-size:13.5px;
    box-shadow:var(--shadow-sm); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .pz-search svg{width:16px; height:16px; flex:none;}
  .pz-topbar-spacer{flex:1;}
  .pz-ai-button{
    display:flex; align-items:center; gap:8px; border:none; cursor:pointer;
    background:linear-gradient(90deg,var(--primary-dark),var(--primary-light));
    color:#fff; font-weight:600; font-size:13.5px;
    padding:12px 20px; border-radius:999px; white-space:nowrap;
    box-shadow:0 8px 16px rgba(109,90,246,.28);
  }
  .pz-ai-button svg{width:15px; height:15px;}
  .pz-notification{
    width:42px; height:42px; border-radius:50%;
    background:#fff; border:1px solid var(--border);
    display:flex; align-items:center; justify-content:center;
    position:relative; flex:none; box-shadow:var(--shadow-sm);
  }
  .pz-notification svg{width:17px; height:17px; color:#7A7CA0;}
  .pz-notification-dot{
    position:absolute; top:9px; right:10px; width:7px; height:7px; border-radius:50%;
    background:#F0507E; border:1.5px solid #fff;
  }