:root{
        --card-max-w:420px;
        --card-pad:24px;
        --title-fs:1.25rem;
        --desc-fs:.9rem;
      }
      /* --------- Temel görünüm --------- */
      .promo-overlay{
        position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
        background:rgba(0,0,0,.5);z-index:9999;
      }
      .promo-card{
        position:relative;width:clamp(280px,90vw,var(--card-max-w));
        background:#fff;border-radius:16px;padding:var(--card-pad);
        box-shadow:0 15px 40px rgba(0,0,0,.25);
        font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
        animation:promo-scale .35s ease;
      }
      @keyframes promo-scale{from{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}
      .promo-card h2{margin:0 0 8px;font-size:var(--title-fs);font-weight:700;line-height:1.3}
      .promo-card p{margin:0 0 20px;font-size:var(--desc-fs);color:#555;line-height:1.45}
      .promo-btn{
        display:inline-block;width:100%;text-align:center;background:#4f46e5;
        color:#fff;padding:12px 16px;border-radius:8px;font-weight:600;text-decoration:none;
        transition:background .2s ease;
      }
      .promo-btn:hover{background:#4338ca}
      .promo-close{
        position:absolute;right:12px;top:10px;font-size:26px;line-height:1;
        background:none;border:none;color:#777;cursor:pointer;
      }
      .promo-close:hover{color:#000}

      /* --------- Küçük ekran (≤480 px) --------- */
      @media(max-width:480px){
        :root{--card-pad:20px;--title-fs:1.1rem;--desc-fs:.85rem}
      }

      /* --------- Orta ekran (≥768 px) --------- */
      @media(min-width:768px){
        :root{--card-max-w:480px;--title-fs:1.35rem;--desc-fs:.95rem}
      }

      /* --------- Büyük ekran (≥1024 px) --------- */
      @media(min-width:1024px){
        :root{--card-max-w:520px;--title-fs:1.45rem;--desc-fs:1rem}
      }