:host { display: block; width: 100vw; height: 100vh; overflow: hidden; }
    .aktivasyon-ekran {
      width: 100%; height: 100%; background: #0a0e27;
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      position: relative; overflow: hidden;
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    }
    .bg-grid {
      position: absolute; inset: 0;
      background-image: linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
      background-size: 40px 40px;
    }
    .bg-glow {
      position: absolute; top: -200px; left: 50%; transform: translateX(-50%);
      width: 600px; height: 600px; border-radius: 50%;
      background: radial-gradient(circle, rgba(22,119,255,0.15) 0%, transparent 70%);
      animation: glowPulse 4s ease-in-out infinite;
    }
    .logo-alani { text-align: center; margin-bottom: 32px; position: relative; z-index: 1; }
    .logo-cerceve {
      width: 72px; height: 72px; border-radius: 20px;
      background: linear-gradient(135deg, #1677ff, #0050b3);
      display: flex; align-items: center; justify-content: center;
      margin: 0 auto 16px; box-shadow: 0 8px 32px rgba(22,119,255,0.3);
    }
    .logo-ikon { font-size: 36px; }
    .marka { color: #fff; font-size: 28px; font-weight: 700; margin: 0 0 4px; letter-spacing: -0.5px; }
    .alt-baslik { color: rgba(255,255,255,0.5); font-size: 14px; margin: 0; }
    .kart {
      position: relative; z-index: 1; background: rgba(255,255,255,0.05);
      backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.1);
      border-radius: 20px; padding: 40px; width: 440px; max-width: calc(100vw - 32px);
      animation: kartGir 0.4s ease-out;
    }
    .kart-baslik { text-align: center; margin-bottom: 32px; }
    .kart-ikon { font-size: 32px; display: block; margin-bottom: 12px; }
    .kart-baslik h2 { color: #fff; font-size: 22px; margin: 0 0 8px; font-weight: 600; }
    .kart-baslik p { color: rgba(255,255,255,0.5); font-size: 13px; margin: 0; line-height: 1.5; }
    .kod-alani { display: flex; gap: 8px; justify-content: center; margin-bottom: 24px; }
    .kod-input {
      width: 52px; height: 64px; background: rgba(255,255,255,0.07);
      border: 2px solid rgba(255,255,255,0.12); border-radius: 12px;
      color: #fff; font-size: 28px; font-weight: 700; text-align: center;
      text-transform: uppercase; outline: none; transition: all 0.2s; caret-color: #1677ff;
    }
    .kod-input.aktif { border-color: #1677ff; background: rgba(22,119,255,0.1); box-shadow: 0 0 0 3px rgba(22,119,255,0.2); }
    .kod-input.dolu { border-color: rgba(82,196,26,0.5); background: rgba(82,196,26,0.08); }
    .hata-mesaj {
      background: rgba(255,77,79,0.1); border: 1px solid rgba(255,77,79,0.3);
      border-radius: 10px; padding: 10px 16px; color: #ff7875; font-size: 13px;
      text-align: center; margin-bottom: 20px;
    }
    .aktive-btn {
      width: 100%; padding: 14px; background: linear-gradient(135deg, #1677ff, #0050b3);
      border: none; border-radius: 12px; color: #fff; font-size: 16px; font-weight: 600;
      cursor: pointer; transition: all 0.3s; margin-bottom: 20px;
    }
    .aktive-btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(22,119,255,0.4); }
    .aktive-btn:disabled { opacity: 0.4; cursor: not-allowed; }
    .cihaz-bilgi {
      display: flex; align-items: center; justify-content: center; gap: 8px;
      color: rgba(255,255,255,0.3); font-size: 12px;
    }
    .cihaz-bilgi code {
      background: rgba(255,255,255,0.08); padding: 2px 8px;
      border-radius: 4px; font-family: monospace; font-size: 11px;
    }
    .yukleme-alani { text-align: center; padding: 24px 0; }
    .yukleme-alani h2 { color: #fff; font-size: 20px; margin: 24px 0 8px; }
    .yukleme-alani p { color: rgba(255,255,255,0.5); font-size: 14px; }
    .spinner {
      width: 48px; height: 48px; margin: 0 auto;
      border: 3px solid rgba(255,255,255,0.1); border-top-color: #1677ff;
      border-radius: 50%; animation: spin 0.8s linear infinite;
    }
    .basarili-kart { border-color: rgba(82,196,26,0.3); }
    .basarili-alani { text-align: center; }
    .basarili-ikon-wrap { margin-bottom: 16px; }
    .basarili-ikon { font-size: 56px; animation: basariBounce 0.6s ease; }
    .basarili-alani h2 { color: #52c41a; font-size: 22px; margin: 0 0 8px; }
    .firma-adi {
      color: #fff; font-size: 24px; font-weight: 700; margin: 0 0 24px;
      background: linear-gradient(90deg, #52c41a, #73d13d);
      -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    }
    .bilgi-satirlari { margin-bottom: 24px; }
    .bilgi-satir {
      display: flex; justify-content: space-between; align-items: center;
      padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,0.06);
    }
    .bs-etiket { color: rgba(255,255,255,0.5); font-size: 13px; }
    .bs-deger { color: #fff; font-size: 14px; font-weight: 500; }
    .mod-badge { background: rgba(22,119,255,0.2); padding: 3px 10px; border-radius: 6px; color: #69b1ff; font-size: 12px; }
    .geri-sayim { color: rgba(255,255,255,0.4); font-size: 13px; }
    .geri-sayim span { color: #1677ff; font-weight: 700; font-size: 18px; }
    .hata-kart { border-color: rgba(255,77,79,0.3); }
    .hata-alani { text-align: center; padding: 16px 0; }
    .hata-ikon { font-size: 56px; display: block; margin-bottom: 16px; }
    .hata-alani h2 { color: #ff4d4f; font-size: 22px; margin: 0 0 8px; }
    .hata-alani p { color: rgba(255,255,255,0.5); font-size: 14px; margin: 0 0 24px; }
    .tekrar-btn {
      padding: 12px 32px; background: rgba(255,255,255,0.08);
      border: 1px solid rgba(255,255,255,0.15); border-radius: 10px;
      color: #fff; font-size: 14px; font-weight: 500; cursor: pointer; transition: all 0.2s;
    }
    .tekrar-btn:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.25); }
    .alt-bilgi {
      position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);
      color: rgba(255,255,255,0.2); font-size: 12px; display: flex; gap: 8px; align-items: center;
    }
    .separator { font-size: 6px; }

    /* Hoşgeldiniz */
    .hosgeldiniz-kart { width: 520px; }
    .hg-baslik { text-align: center; margin-bottom: 28px; }
    .hg-baslik h2 { color: #fff; font-size: 24px; margin: 0 0 8px; font-weight: 700; }
    .hg-baslik p { color: rgba(255,255,255,0.5); font-size: 14px; margin: 0; line-height: 1.5; }
    .hg-ozellikler { display: flex; flex-direction: column; gap: 14px; margin-bottom: 32px; }
    .hg-ozellik {
      display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 14px;
      background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.06); transition: all 0.2s;
    }
    .hg-ozellik:hover { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.1); transform: translateX(4px); }
    .hg-ikon { font-size: 28px; flex-shrink: 0; }
    .hg-ozellik-icerik { display: flex; flex-direction: column; gap: 2px; }
    .hg-ozellik-icerik strong { color: #fff; font-size: 14px; font-weight: 600; }
    .hg-ozellik-icerik span { color: rgba(255,255,255,0.4); font-size: 12px; }
    .kurulum-btn {
      width: 100%; padding: 16px; background: linear-gradient(135deg, #1677ff, #0050b3);
      border: none; border-radius: 14px; color: #fff; font-size: 15px; font-weight: 600;
      cursor: pointer; transition: all 0.3s; display: flex; align-items: center; justify-content: center; gap: 10px;
      margin-bottom: 12px;
    }
    .kurulum-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 32px rgba(22,119,255,0.4); }
    .kurulum-btn-ikon { font-size: 18px; }
    .geri-btn {
      width: 100%; padding: 12px; background: transparent;
      border: 1px solid rgba(255,255,255,0.1); border-radius: 12px;
      color: rgba(255,255,255,0.4); font-size: 13px; font-weight: 500;
      cursor: pointer; transition: all 0.2s;
    }
    .geri-btn:hover { border-color: rgba(255,255,255,0.25); color: rgba(255,255,255,0.7); }
    .geri-link {
      background: none; border: none; color: rgba(255,255,255,0.3); font-size: 12px;
      cursor: pointer; margin-top: 16px; transition: color 0.2s;
    }
    .geri-link:hover { color: rgba(255,255,255,0.6); }

    /* Aktivasyon Bekliyor */
    .bekliyor-kart { border-color: rgba(250,173,20,0.3); width: 480px; }
    .bekliyor-alani { text-align: center; }
    .bekliyor-ikon-wrap {
      position: relative; width: 80px; height: 80px; margin: 0 auto 20px;
      display: flex; align-items: center; justify-content: center;
    }
    .bekliyor-pulse {
      position: absolute; inset: -10px; border-radius: 50%;
      border: 2px solid rgba(250,173,20,0.3);
      animation: bekliyorPulse 2s ease-out infinite;
    }
    .bekliyor-ikon { font-size: 48px; position: relative; z-index: 1; }
    .bekliyor-alani h2 { color: #faad14; font-size: 22px; margin: 0 0 8px; }
    .bekliyor-aciklama { color: rgba(255,255,255,0.5); font-size: 13px; margin: 0 0 24px; line-height: 1.6; }
    .cihaz-kimlik-kutu {
      background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
      border-radius: 12px; padding: 16px; margin-bottom: 24px;
    }
    .ck-etiket { color: rgba(255,255,255,0.4); font-size: 11px; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 6px; }
    .ck-deger { color: #faad14; font-size: 22px; font-weight: 700; font-family: monospace; letter-spacing: 3px; }

    /* Durum bar */
    .durum-bar { display: flex; align-items: center; justify-content: center; gap: 0; margin-bottom: 24px; }
    .durum-adim { display: flex; flex-direction: column; align-items: center; gap: 6px; }
    .durum-adim span { color: rgba(255,255,255,0.3); font-size: 11px; font-weight: 600; }
    .durum-adim.tamamlandi span { color: #52c41a; }
    .durum-adim.bekliyor span { color: #faad14; }
    .durum-nokta {
      width: 32px; height: 32px; border-radius: 50%;
      background: rgba(255,255,255,0.08); border: 2px solid rgba(255,255,255,0.15);
      display: flex; align-items: center; justify-content: center;
      color: rgba(255,255,255,0.3); font-size: 12px; font-weight: 700;
      position: relative;
    }
    .durum-adim.tamamlandi .durum-nokta { background: rgba(82,196,26,0.2); border-color: #52c41a; color: #52c41a; }
    .durum-nokta.aktif { background: rgba(250,173,20,0.2); border-color: #faad14; color: #faad14; }
    .durum-nokta-pulse {
      position: absolute; inset: -4px; border-radius: 50%;
      border: 2px solid rgba(250,173,20,0.4);
      animation: bekliyorPulse 2s ease-out infinite;
    }
    .durum-cizgi { width: 40px; height: 2px; background: rgba(255,255,255,0.1); margin: 0 8px; margin-bottom: 24px; }

    .polling-bilgi {
      display: flex; align-items: center; justify-content: center; gap: 8px;
      color: rgba(255,255,255,0.25); font-size: 12px; margin-bottom: 20px;
    }
    .polling-dot {
      width: 6px; height: 6px; border-radius: 50%; background: #faad14;
      animation: bekliyorPulse 2s ease-out infinite;
    }
    .iptal-btn {
      padding: 10px 24px; background: transparent;
      border: 1px solid rgba(255,77,79,0.3); border-radius: 10px;
      color: rgba(255,77,79,0.6); font-size: 12px; cursor: pointer; transition: all 0.2s;
    }
    .iptal-btn:hover { border-color: #ff4d4f; color: #ff4d4f; background: rgba(255,77,79,0.05); }

    @keyframes glowPulse { 0%,100%{opacity:0.7;transform:translateX(-50%) scale(1)} 50%{opacity:1;transform:translateX(-50%) scale(1.1)} }
    @keyframes spin { to { transform: rotate(360deg); } }
    @keyframes kartGir { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
    @keyframes basariBounce { 0%{transform:scale(0)} 50%{transform:scale(1.2)} 100%{transform:scale(1)} }
    @keyframes bekliyorPulse { 0%{transform:scale(0.8);opacity:1} 100%{transform:scale(2);opacity:0} }

    @media (max-width: 480px) {
      .kart { padding: 24px 20px; }
      .hosgeldiniz-kart, .bekliyor-kart { width: calc(100vw - 32px); }
      .kod-input { width: 44px; height: 56px; font-size: 22px; }
      .marka { font-size: 22px; }
    }