/* Hava Durumu Botu — kart, hero baloncuğu ve sağdan kayan tanıtım paneli. Mor (var(--violet)): "önizleme, henüz
   herkese açık değil" anlamına gelir; yeşil (yayında) ve kırmızı (yakında) baloncuklardan bilerek farklı bir renk. */

/* ---------- Proje kartı: mor "Önizleme" rozeti + yeşil "Aktif" rozeti ---------- */
.badge-group { display: flex; align-items: center; gap: 6px; flex: none; }
.badge.small { padding: 3px 10px; font-size: 11px; }
.badge.preview { color: var(--violet); border-color: color-mix(in srgb, var(--violet) 50%, transparent); background: color-mix(in srgb, var(--violet) 14%, transparent); }
.card.preview { border-color: color-mix(in srgb, var(--violet) 35%, var(--border)); }
.card.preview:hover { border-color: color-mix(in srgb, var(--violet) 55%, var(--border)); box-shadow: 0 30px 80px color-mix(in srgb, var(--violet) 22%, rgba(0, 0, 0, .35)); }
button.card-link { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; text-align: left; }

/* Kart görseli: küçük bulut + yağmur damlası */
.mock-weather { background: linear-gradient(135deg, #ddd3ff, #fff0dc); }
[data-theme='dark'] .mock-weather { background: linear-gradient(135deg, #3d3470, #3a3350); }
.wcloud { position: relative; width: 120px; height: 64px; }
.wcloud::before, .wcloud::after { content: ''; position: absolute; border-radius: 50%; background: #fff; box-shadow: 0 8px 18px rgba(0, 0, 0, .18); }
.wcloud::before { width: 78px; height: 78px; left: 8px; top: -30px; }
.wcloud::after { width: 56px; height: 56px; right: 4px; top: -18px; }
.wdrop { position: absolute; bottom: -6px; width: 5px; height: 14px; border-radius: 3px; background: var(--accent-2); opacity: 0; animation: wdropfall 1.6s ease-in infinite; }
.w1 { left: 18%; animation-delay: 0s; } .w2 { left: 38%; animation-delay: .3s; } .w3 { left: 58%; animation-delay: .6s; } .w4 { left: 76%; animation-delay: .9s; } .w5 { left: 48%; animation-delay: 1.2s; }
@keyframes wdropfall { 0% { opacity: 0; transform: translateY(0); } 15% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; transform: translateY(30px); } }

/* ---------- Sağdan kayan tanıtım paneli ---------- */
.arcade.wx .g-bar-top h2 { grid-column: 2; }
.arcade.wx .g-icon.ghost { visibility: hidden; } /* yalnızca üç sütunlu başlığı ortalamak için, tıklanamaz */
.wx-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 8px max(16px, 4vw) 40px; display: grid; gap: 28px; justify-items: center; }
.wx-hero { padding-top: 10px; }
.wcloud.big { width: 190px; height: 100px; transform: scale(1.5); }
.wcloud.big .wdrop { width: 7px; height: 20px; }

/* Telefon/mesaj taklidi: gerçek bot mesajının görünümü, satır satır beliren animasyon */
.wx-phone { width: min(380px, 100%); border-radius: 26px; padding: 18px; background: radial-gradient(120% 100% at 50% 0%, var(--felt, color-mix(in srgb, var(--violet) 22%, var(--surface))), var(--surface)); border: 1px solid var(--border); box-shadow: var(--shadow); }
.wx-bubble { background: var(--surface-2); border: 1px solid var(--border); border-radius: 16px; border-bottom-left-radius: 4px; padding: 14px 16px; display: grid; gap: 6px; font-size: 14.5px; line-height: 1.5; }
.wx-bubble b { font-size: 15.5px; }
.wx-line { opacity: 0; transform: translateY(6px); animation: wxline .5s ease-out forwards; }
.wx-line.d1 { animation-delay: .5s; } .wx-line.d2 { animation-delay: .9s; } .wx-line.d3 { animation-delay: 1.3s; } .wx-line.d4 { animation-delay: 1.7s; } .wx-line.d5 { animation-delay: 2.1s; }
@keyframes wxline { to { opacity: 1; transform: none; } }

/* Özellik listesi */
.wx-features { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; width: min(480px, 100%); }
.wx-features li { display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border); }
.wf-ico { font-size: 22px; flex: none; line-height: 1.2; }
.wx-features b { font-size: 15px; }
.wx-features p { margin-top: 4px; color: var(--muted); font-size: 14px; }

.wx-note { width: min(480px, 100%); padding: 14px 18px; border-radius: 16px; text-align: center; font-weight: 700; font-size: 14.5px; color: var(--violet); background: color-mix(in srgb, var(--violet) 12%, var(--surface)); border: 1px solid color-mix(in srgb, var(--violet) 40%, transparent); }

@media (prefers-reduced-motion: reduce) {
  .wdrop, .wx-line { animation: none !important; opacity: 1; transform: none; }
}