/* ACG · Sanal Bebek (F25, 2026-10-14). Üye paneli "Kulüp" sekmesi + Ana Sayfa özeti. Önek .bb-.
   Akdeniz paleti: turkuaz #2EC4D6 · portakal #FF9F1C · yaprak #5BB85D · lacivert #0A2540. Kütüphane yok. */
.bb-zemin {
	--bb-lacivert: #0A2540; --bb-metin: #12263A; --bb-soluk: #5B6B7C;
	position: relative; border-radius: 22px; padding: 18px; overflow: hidden; isolation: isolate;
	background: radial-gradient(circle at 12% 18%, rgba(46, 196, 214, .55), transparent 46%),
		radial-gradient(circle at 88% 12%, rgba(255, 159, 28, .5), transparent 42%),
		radial-gradient(circle at 70% 92%, rgba(91, 184, 93, .4), transparent 48%), #EAF6F8;
}
.bb-cam {
	position: relative; max-width: 560px; margin: 0 auto; padding: 18px 18px 16px; border-radius: 20px;
	background: rgba(255, 255, 255, .62); border: 1px solid rgba(255, 255, 255, .75);
	box-shadow: 0 18px 48px rgba(10, 37, 64, .16); backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2);
	color: var(--bb-metin); font-family: Inter, system-ui, sans-serif;
}
.bb-baslik-satir { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-bottom: 12px; }
.bb-baslik { margin: 0; font: 800 22px/1.2 "Plus Jakarta Sans", Inter, sans-serif; color: var(--bb-lacivert); }
.bb-alt-baslik { font-size: 13px; color: var(--bb-soluk); }

/* Üst satır + bar */
.bb-ust { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.bb-ad { font-weight: 800; font-size: 16px; }
.bb-seviye { font-size: 12.5px; font-weight: 600; color: var(--bb-lacivert); background: rgba(10, 37, 64, .08); border-radius: 999px; padding: 5px 11px; }
.bb-bar-bas { display: flex; justify-content: space-between; font-size: 12px; font-weight: 700; color: var(--bb-soluk); margin-bottom: 6px; letter-spacing: .02em; }
.bb-bar-bas [data-bb-yuzde] { font-variant-numeric: tabular-nums; color: var(--bb-lacivert); }
.bb-bar { height: 14px; border-radius: 999px; background: rgba(10, 37, 64, .1); overflow: hidden; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .08); }
.bb-bar > span { display: block; height: 100%; border-radius: inherit; transition: width .9s cubic-bezier(.2, .8, .2, 1);
	background: linear-gradient(90deg, #FFB347, #FF7A59 60%, #FF5D8F); position: relative; overflow: hidden; }
[data-bb-karakter="caretta"] .bb-bar > span { background: linear-gradient(90deg, #5FE0D0, #2EC4D6 55%, #1E88E5); }
.bb-bar > span::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .55) 50%, transparent 70%); transform: translateX(-100%); animation: bb-isik 2.8s ease-in-out infinite; }
@keyframes bb-isik { 60%, 100% { transform: translateX(100%); } }

/* Üzgün konuşma balonu (2026-10-15): sahnenin üstünde, kuyruğu bebeğe bakar. */
.bb-ozlem { position: relative; margin: 12px auto -4px; max-width: max-content; padding: 9px 14px; border-radius: 16px; background: #fff; font-size: 13.5px; font-weight: 700; color: #7A4B12;
	box-shadow: 0 4px 14px rgba(10, 37, 64, .14); border: 1.5px solid #F2B66D; z-index: 1; }
.bb-ozlem::after { content: ""; position: absolute; left: 50%; bottom: -8px; width: 14px; height: 14px; margin-left: -7px; background: #fff; border-right: 1.5px solid #F2B66D; border-bottom: 1.5px solid #F2B66D; transform: rotate(45deg); }
.bb-ozlem[hidden], [data-bb-kalp][hidden], .bb-hasat-kutu[hidden], .bb-bekleyen[hidden] { display: none; }
.bb-ipucu { margin: 6px 0 0; font-size: 12px; color: var(--bb-soluk); min-height: 1em; }
.bb-sezon { margin-left: 6px; font-size: 11px; font-weight: 700; color: #7A4B12; background: #FFE9C7; border-radius: 999px; padding: 3px 8px; vertical-align: 2px; }
.bb-bekleyen { font-weight: 700; color: #9A5B00; }

/* Hasat / Denize Uğurlama (21. gün ödülü) */
.bb-hasat-kutu { margin: 0 0 12px; padding: 12px; border-radius: 16px; text-align: center; display: grid; gap: 8px; justify-items: center;
	background: linear-gradient(135deg, rgba(255, 214, 102, .55), rgba(255, 159, 28, .35)); border: 1px solid rgba(255, 196, 64, .8); }
[data-bb-karakter="caretta"] .bb-hasat-kutu { background: linear-gradient(135deg, rgba(95, 224, 224, .5), rgba(30, 136, 229, .3)); border-color: rgba(46, 196, 214, .8); }
.bb-hasat-kutu p { margin: 0; font-weight: 800; font-size: 14px; color: var(--bb-lacivert); }
.bb-hasat { appearance: none; border: 0; cursor: pointer; padding: 13px 26px; border-radius: 16px; font: 800 16px Inter, sans-serif; color: #5A3A00;
	background: linear-gradient(160deg, #FFE27A, #F5A623); box-shadow: 0 6px 0 rgba(0, 0, 0, .18), 0 0 0 0 rgba(255, 196, 64, .7); animation: bb-nabiz 1.8s ease-out infinite; }
[data-bb-karakter="caretta"] .bb-hasat { color: #fff; background: linear-gradient(160deg, #5FE0E0, #1E88E5); }
.bb-hasat:focus-visible { outline: 3px solid var(--bb-lacivert); outline-offset: 3px; }
.bb-hasat:disabled { opacity: .7; animation: none; }
@keyframes bb-nabiz { 70% { box-shadow: 0 6px 0 rgba(0, 0, 0, .18), 0 0 0 14px rgba(255, 196, 64, 0); } 100% { box-shadow: 0 6px 0 rgba(0, 0, 0, .18), 0 0 0 0 rgba(255, 196, 64, 0); } }
.bb-rozetler li.is-zirve { background: linear-gradient(135deg, #FFF3C4, #FFE08A); border-color: #F2C14E; }
.bb-rozetler li.is-madalya { background: #EAF8FB; border-color: #9EDCE6; }

/* Sahne */
.bb-sahne { position: relative; margin: 12px 0; border-radius: 18px; overflow: hidden; box-shadow: 0 8px 22px rgba(10, 37, 64, .14); }
.bb-sahne-svg { display: block; width: 100%; height: auto; }
.bb-sahne--kucuk { margin: 0 0 10px; box-shadow: none; }

/* Boşta: sallanma / süzülme / göz kırpma */
.bb-karakter { animation: bb-salla 4.5s ease-in-out infinite; transform-box: view-box; }
.bb-yuzen { animation: bb-suzul 5s ease-in-out infinite; }
@keyframes bb-salla { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(1.6deg); } }
@keyframes bb-suzul { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(0, -6px); } }
.bb-goz { animation: bb-kirp 5.2s infinite; transform-box: view-box; }
@keyframes bb-kirp { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
/* Yüzgeç kulaçı: kök gövde tarafında (sol yüzgeç sağ ucu, sağ yüzgeç sol ucu), iki yan ayna; arka yüzgeçler küçük ve yarım tur geç. */
.bb-yuzgec { animation: bb-kulac 2.6s ease-in-out infinite; transform-box: fill-box; }
.bb-yuzgec--sol { transform-origin: 90% 50%; --kulac: 14deg; }
.bb-yuzgec--sag { transform-origin: 10% 50%; --kulac: -14deg; }
.bb-yuzgec--arka { animation-delay: -1.3s; }
.bb-yuzgec--arka.bb-yuzgec--sol { --kulac: 7deg; }
.bb-yuzgec--arka.bb-yuzgec--sag { --kulac: -7deg; }
@keyframes bb-kulac { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(var(--kulac)); } }
.bb-portakal { animation: bb-portakal 3.6s ease-in-out infinite; transform-box: view-box; }
@keyframes bb-portakal { 50% { transform: rotate(4deg); } }
.bb-balik { animation: bb-balik 9s linear infinite; }
@keyframes bb-balik { 0% { transform: translateX(-40px); } 50% { transform: translateX(40px); } 100% { transform: translateX(-40px); } }
.bb-isilti { animation: bb-isilti 3.2s ease-in-out infinite; }
@keyframes bb-isilti { 0%, 100% { opacity: .15; } 50% { opacity: .9; } }
.bb-parilti { animation: bb-parilti 2s ease-in-out infinite; }
@keyframes bb-parilti { 50% { opacity: .2; } }
.bb-dalga { animation: bb-dalga 4s ease-in-out infinite; }
@keyframes bb-dalga { 50% { transform: translateX(-8px); } }

/* Yüz durumları */
.bb-agiz-uzgun, .bb-uyku, .bb-uyku-goz, .bb-cop { display: none; }
.is-uzgun .bb-agiz-gulen { display: none; }
.is-uzgun .bb-agiz-uzgun { display: inline; }
.is-uzgun .bb-sahne-svg { filter: saturate(.45) brightness(.97); }
[data-bb-karakter="portakal"] .is-uzgun .bb-karakter { animation: none; transform: rotate(-3deg) translateY(2px); }
[data-bb-karakter="caretta"] .is-uzgun .bb-yuz .bb-goz { display: none; }
[data-bb-karakter="caretta"] .is-uzgun .bb-uyku-goz, [data-bb-karakter="caretta"] .is-uzgun .bb-uyku { display: inline; }
.is-uzgun .bb-uyku { display: none !important; }   /* aç/üzgün, uykulu değil: "zzz" yok, yalnız hüzünlü göz */
[data-bb-karakter="caretta"] .is-uzgun .bb-karakter { animation: none; transform: rotate(5deg) translateY(4px); }
/* Mutlu (bugün ≥ 2 öğün): zıplama + pırıltı */
.is-mutlu .bb-karakter { animation: bb-zipla 1.4s cubic-bezier(.3, .7, .4, 1) infinite; }
@keyframes bb-zipla { 0%, 100% { transform: translateY(0) scale(1, 1); } 12% { transform: translateY(0) scale(1.04, .96); } 40% { transform: translateY(-9px) scale(.98, 1.03); } 70% { transform: translateY(0) scale(1.03, .97); } }
.bb-sahne.is-mutlu::before, .bb-sahne.is-mutlu::after { content: "✨"; position: absolute; font-size: 20px; pointer-events: none; animation: bb-pirilti 2.2s ease-in-out infinite; }
.bb-sahne.is-mutlu::before { top: 14%; left: 16%; }
.bb-sahne.is-mutlu::after { top: 22%; right: 15%; animation-delay: 1.1s; }
@keyframes bb-pirilti { 0%, 100% { opacity: 0; transform: scale(.4) rotate(0); } 45% { opacity: 1; transform: scale(1.1) rotate(25deg); } }
.is-uzgun .bb-uyku text:nth-child(2) { animation-delay: .4s; }
.is-uzgun .bb-uyku text:nth-child(3) { animation-delay: .8s; }
@keyframes bb-uyku { 0% { opacity: 0; transform: translate(0, 6px); } 40% { opacity: 1; } 100% { opacity: 0; transform: translate(6px, -10px); } }
.is-cop .bb-cop { display: inline; }
.bb-cop.is-gidiyor { display: inline; animation: bb-cop-git .9s ease-in forwards; transform-box: fill-box; transform-origin: center; }
@keyframes bb-cop-git { 30% { transform: scale(1.15) rotate(-8deg); } 100% { transform: scale(0) rotate(30deg); opacity: 0; } }

/* Eylem efektleri: yalnız sahnede .fx-<eylem> varken */
.bb-fx { display: none; }
.fx-sula .bb-fx-sula, .fx-gunes .bb-fx-gunes, .fx-bakim .bb-fx-bakim,
.fx-yem .bb-fx-yem, .fx-sev .bb-fx-sev, .fx-temizle .bb-fx-temizle { display: inline; }
.bb-damla { animation: bb-dus 1.1s ease-in both; transform-box: view-box; }
@keyframes bb-dus { 0% { transform: translateY(-10px); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(140px); opacity: 0; } }
.fx-sula .bb-karakter, .fx-sev .bb-karakter { animation: bb-nese .9s ease-in-out 2; }
@keyframes bb-nese { 25% { transform: rotate(-5deg); } 75% { transform: rotate(5deg); } }
.bb-isinlar { animation: bb-don 1.8s linear; transform-box: view-box; transform-origin: 268px 46px; }
@keyframes bb-don { to { transform: rotate(60deg); } }
.bb-huzme { animation: bb-huzme 1.8s ease-in-out both; }
@keyframes bb-huzme { 0% { opacity: 0; } 35% { opacity: .55; } 100% { opacity: 0; } }
.fx-gunes .bb-karakter { animation: bb-isin 1.8s ease-in-out; }
@keyframes bb-isin { 40% { filter: brightness(1.18) drop-shadow(0 0 10px rgba(255, 214, 102, .9)); } }
.bb-yukselen { animation: bb-yuksel 1.6s ease-out both; transform-box: view-box; }
@keyframes bb-yuksel { 0% { opacity: 0; transform: translateY(10px) scale(.6); } 25% { opacity: 1; } 100% { opacity: 0; transform: translateY(-70px) scale(1.15); } }
.bb-marul { animation: bb-marul 1.2s ease-in both; transform-box: view-box; }
@keyframes bb-marul { 0% { transform: translateY(-30px) rotate(-20deg); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(60px) rotate(15deg); opacity: 0; } }
.fx-yem .bb-kafa { animation: bb-uzan 1.6s ease-in-out; transform-box: view-box; }
@keyframes bb-uzan { 30%, 70% { transform: translateY(-8px) scale(1.06); } }
.fx-yem .bb-cene { animation: bb-cigne .3s ease-in-out 5 .6s; transform-box: view-box; }
@keyframes bb-cigne { 50% { transform: scaleY(.85); } }
.bb-balon { animation: bb-balon 1.8s ease-out both; transform-box: view-box; }
@keyframes bb-balon { 0% { opacity: 0; transform: translateY(0) scale(.5); } 20% { opacity: .9; } 100% { opacity: 0; transform: translateY(-170px) scale(1.2); } }
.fx-sev .bb-karakter { animation: bb-takla 1.4s cubic-bezier(.4, 0, .2, 1); }
@keyframes bb-takla { 0% { transform: rotate(0); } 60% { transform: rotate(360deg) translateY(-14px); } 100% { transform: rotate(360deg); } }

/* Düğmeler */
.bb-dugmeler { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.bb-dugme { appearance: none; border: 0; cursor: pointer; border-radius: 16px; padding: 12px 6px 10px; display: grid; justify-items: center; gap: 3px;
	color: #fff; font: inherit; box-shadow: 0 6px 0 rgba(0, 0, 0, .18), 0 10px 20px rgba(10, 37, 64, .18); transition: transform .08s, box-shadow .08s, filter .2s; }
.bb-dugme:hover:not(:disabled) { filter: brightness(1.06); }
.bb-dugme:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 2px 0 rgba(0, 0, 0, .18), 0 4px 10px rgba(10, 37, 64, .16); }
.bb-dugme:focus-visible { outline: 3px solid var(--bb-lacivert); outline-offset: 3px; }
.bb-dugme-emoji { font-size: 28px; line-height: 1; }
.bb-dugme-ad { font-weight: 800; font-size: 14px; }
.bb-dugme-puan { font-size: 12px; font-weight: 700; opacity: .92; background: rgba(255, 255, 255, .22); border-radius: 999px; padding: 2px 8px; }
.bb-dugme--sula { background: linear-gradient(160deg, #5BC0FF, #2B8FE0); }
.bb-dugme--gunes { background: linear-gradient(160deg, #FFD15C, #F5A623); color: #5A3A00; }
.bb-dugme--bakim { background: linear-gradient(160deg, #7AD27A, #3FA34D); }
.bb-dugme--yem { background: linear-gradient(160deg, #8EE07A, #45B14F); }
.bb-dugme--sev { background: linear-gradient(160deg, #5FE0E0, #1FA8C4); }
.bb-dugme--temizle { background: linear-gradient(160deg, #4F8BE8, #1E4FA8); }
.bb-dugme:disabled { cursor: default; filter: saturate(.25) brightness(1.08); opacity: .8; box-shadow: 0 2px 0 rgba(0, 0, 0, .08); transform: translateY(4px); }
.bb-dugme.is-basildi { animation: bb-pop .45s ease-out; }
/* Öğün hakkı (bugün/hak) ve 5 saatlik bekleme */
.bb-dugme { position: relative; }
.bb-dugme-hak { position: absolute; top: 6px; right: 8px; font-size: 10.5px; font-weight: 800; font-variant-numeric: tabular-nums; background: rgba(0, 0, 0, .18); border-radius: 999px; padding: 1px 6px; }
.bb-dugme.is-bekliyor .bb-dugme-puan { font-variant-numeric: tabular-nums; background: rgba(10, 37, 64, .28); }
@keyframes bb-pop { 40% { transform: translateY(4px) scale(1.06); } }

.bb-durum-ileti { min-height: 1.3em; margin: 10px 0 0; text-align: center; font-weight: 700; font-size: 13.5px; color: var(--bb-lacivert); }
.bb-alt { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 6px; font-size: 12.5px; color: var(--bb-soluk); }
.bb-kalp { font-weight: 700; color: #D6336C; }
.bb-rozetler { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
/* Uygulama (/uygulama/#kulup): oturumsuz tanıtım + çevrimdışı notu */
.bb-tanitim { display: grid; gap: 12px; }
.bb-tanitim .bb-secim-giris { margin: 0; }
.bb-tanitim-resim { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bb-tanitim-resim .bb-sahne { margin: 0; border-radius: 14px; }
.bb-tanitim-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-weight: 700; font-size: 14px; color: var(--bb-lacivert); }
.bb-tanitim-liste li { padding: 8px 12px; border-radius: 12px; background: rgba(255, 255, 255, .78); }
.bb-tanitim-dugmeler { display: grid; gap: 8px; justify-items: center; }
.bb-tanitim-zaten { margin: 0; font-size: 13.5px; color: var(--bb-soluk); }
.bb-tanitim-zaten a { font-weight: 800; color: var(--bb-lacivert); }
.bb-cevrimdisi-not { margin: 0 0 10px; padding: 8px 12px; border-radius: 12px; background: rgba(10, 37, 64, .08); color: var(--bb-lacivert); font-size: 13px; font-weight: 700; }

/* /kulup/ tanıtım sayfası (kamusal; oturumsuz ziyaretçi) */
.bbk.bb-zemin { border-radius: 0; padding: 28px 16px 44px; overflow: visible; }   /* tam genişlik bölüm: kart köşesi yok */
.bbk-ic { max-width: 980px; margin: 0 auto; display: grid; gap: 22px; }
.bbk-hero { text-align: center; display: grid; gap: 12px; justify-items: center; padding: 26px 18px; border-radius: 24px; background: rgba(255, 255, 255, .72); border: 1px solid rgba(255, 255, 255, .9); box-shadow: 0 18px 40px rgba(10, 37, 64, .08); }
.bbk-ust { margin: 0; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #1E7FA0; }
.bbk-hero h1 { margin: 0; font: 800 clamp(28px, 5vw, 44px)/1.1 "Plus Jakarta Sans", Inter, sans-serif; color: var(--bb-lacivert); text-wrap: balance; }
.bbk-giris { margin: 0; max-width: 60ch; font-size: 16.5px; line-height: 1.6; color: var(--bb-metin); }
.bbk-cta { display: grid; gap: 8px; justify-items: center; }
.bbk-dugme { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 28px; border-radius: 14px; background: linear-gradient(135deg, #FF9F1C, #E67E22); color: #111 !important; font: 800 16px/1 Inter, sans-serif; text-decoration: none; box-shadow: 0 6px 0 #B85F12; }
.bbk-dugme:hover { filter: brightness(1.05); }
.bbk-dugme:focus-visible, .bbk-zaten a:focus-visible { outline: 3px solid #2EC4D6; outline-offset: 3px; }
.bbk-zaten { margin: 6px 0 0; font-size: 14px; color: var(--bb-soluk); }
.bbk-zaten a { font-weight: 800; color: var(--bb-lacivert); }
.bbk-h2 { margin: 8px 0 0; text-align: center; font: 800 24px/1.25 "Plus Jakarta Sans", Inter, sans-serif; color: var(--bb-lacivert); }
.bbk-kartlar { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.bbk-kart { padding: 12px 12px 16px; border-radius: 22px; background: rgba(255, 255, 255, .8); border: 1px solid rgba(255, 255, 255, .9); text-align: center; }
.bbk-kart .bb-sahne { margin: 0 0 10px; border-radius: 16px; }
.bbk-kart h3 { margin: 4px 0; font: 800 19px/1.3 "Plus Jakarta Sans", Inter, sans-serif; color: var(--bb-lacivert); }
.bbk-kart p { margin: 0 0 6px; font-size: 14.5px; line-height: 1.55; color: var(--bb-metin); }
.bbk-eylem { font-weight: 700; color: #1E7FA0 !important; }
.bbk-adimlar { margin: 0 auto; max-width: 640px; padding: 0; list-style: none; counter-reset: bbk; display: grid; gap: 10px; }
.bbk-adimlar li { counter-increment: bbk; display: grid; grid-template-columns: 36px 1fr; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 16px; background: rgba(255, 255, 255, .8); color: var(--bb-metin); }
.bbk-adimlar li::before { content: counter(bbk); display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--bb-lacivert); color: #fff; font-weight: 800; }
.bbk-rozetler { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.bbk-rozetler li { padding: 7px 12px; border-radius: 999px; background: rgba(255, 255, 255, .85); border: 1px solid rgba(10, 37, 64, .1); font-weight: 700; font-size: 13.5px; color: var(--bb-lacivert); }
.bbk-not { margin: 0 auto; max-width: 62ch; text-align: center; font-size: 15px; line-height: 1.6; color: var(--bb-metin); }

/* Bebeği değiştir (haftada bir) */
.bb-degistir { margin-top: 12px; text-align: center; font-size: 12.5px; color: var(--bb-soluk); }
.bb-degistir-ac { background: none; border: 0; padding: 4px 6px; font: inherit; font-weight: 700; color: var(--bb-lacivert); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.bb-degistir-ac:disabled { color: var(--bb-soluk); text-decoration: none; cursor: default; }
.bb-degistir-ac:focus-visible, .bb-degistir-onay button:focus-visible { outline: 3px solid #2EC4D6; outline-offset: 2px; border-radius: 8px; }
.bb-degistir-onay { margin: 8px auto 0; max-width: 420px; padding: 12px; border-radius: 16px; background: rgba(255, 255, 255, .85); border: 1px solid rgba(10, 37, 64, .12); display: grid; gap: 10px; }
.bb-degistir-onay[hidden], .bb-degistir-not[hidden] { display: none; }
.bb-degistir-onay p { margin: 0; color: var(--bb-lacivert); font-size: 13px; line-height: 1.5; }
.bb-degistir-onay div { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.bb-degistir-onay button { padding: 8px 14px; border-radius: 10px; font: 700 13px/1.2 Inter, sans-serif; cursor: pointer; border: 1.5px solid rgba(10, 37, 64, .18); background: #fff; color: var(--bb-lacivert); }
.bb-degistir-onay .bb-degistir-evet { background: var(--bb-lacivert); border-color: var(--bb-lacivert); color: #fff; }
.bb-degistir-onay button:disabled { opacity: .6; cursor: default; }
.bb-rozetler li { font-size: 12px; font-weight: 700; padding: 5px 10px; border-radius: 999px; background: rgba(255, 255, 255, .8); border: 1px solid rgba(10, 37, 64, .1); }

/* Konfeti */
.bb-konfeti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; border-radius: 20px; }
.bb-konfeti i { position: absolute; top: -12px; width: 8px; height: 13px; border-radius: 2px; animation: bb-konfeti 2.2s cubic-bezier(.2, .6, .4, 1) forwards; }
@keyframes bb-konfeti { to { transform: translate(var(--x, 0), 560px) rotate(var(--r, 540deg)); opacity: .2; } }
.bb-sahne.is-evrim .bb-sahne-svg { animation: bb-evrim .9s ease-out; }
@keyframes bb-evrim { 0% { transform: scale(.85); filter: brightness(1.8); } 100% { transform: scale(1); filter: none; } }

/* Seçim ekranı */
.bb-secim-giris { margin: 0 0 12px; font-size: 14px; color: var(--bb-soluk); }
.bb-secim-izgara { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.bb-secim-kart { background: rgba(255, 255, 255, .78); border-radius: 18px; padding: 10px 10px 14px; text-align: center; border: 1px solid rgba(255, 255, 255, .9); }
.bb-secim-kart .bb-sahne { border-radius: 14px; }
.bb-secim-kart h3 { margin: 4px 0; font: 800 16px/1.3 "Plus Jakarta Sans", Inter, sans-serif; }
.bb-secim-kart p { margin: 0 0 10px; font-size: 12.5px; line-height: 1.5; color: var(--bb-soluk); }
.bb-sec-dugme { appearance: none; border: 0; cursor: pointer; padding: 10px 18px; border-radius: 12px; font: 800 14px Inter, sans-serif; color: #fff;
	background: linear-gradient(135deg, #E67E22, #D35400); box-shadow: 0 5px 0 rgba(0, 0, 0, .16); }
.bb-secim-kart--caretta .bb-sec-dugme { background: linear-gradient(135deg, #2EC4D6, #1E88E5); }
.bb-sec-dugme:focus-visible { outline: 3px solid var(--bb-lacivert); outline-offset: 3px; }
.bb-sec-dugme:disabled { opacity: .6; cursor: default; }

/* Ana Sayfa özeti */
.bb-ozet { margin: 0 0 16px; }
.bb-ozet-dugme { width: 100%; display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 18px; cursor: pointer; text-align: left; font: inherit; color: #12263A;
	border: 1px solid rgba(255, 255, 255, .8); box-shadow: 0 8px 22px rgba(10, 37, 64, .1);
	background: linear-gradient(120deg, rgba(46, 196, 214, .22), rgba(255, 159, 28, .22)), rgba(255, 255, 255, .7); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.bb-ozet-dugme:focus-visible { outline: 3px solid #0A2540; outline-offset: 2px; }
.bb-ozet-mini { flex: 0 0 auto; width: 72px; border-radius: 12px; overflow: hidden; }
.bb-ozet-mini svg { display: block; width: 100%; height: auto; }
.bb-ozet-ikon { font-size: 28px; }
.bb-ozet-m { display: grid; gap: 2px; flex: 1; min-width: 0; }
.bb-ozet-m strong { font-size: 14px; }
.bb-ozet-m span { font-size: 13px; color: #5B6B7C; }
.bb-ozet-ok { font-size: 20px; color: #0A2540; }

/* Mini görevler / hazine avı (2026-10-15) */
.bb-gorevler { margin: 14px 0 4px; padding: 12px; border-radius: 16px; background: rgba(255, 255, 255, .72); border: 1px solid rgba(10, 37, 64, .08); }
.bb-gorev-baslik { margin: 0 0 8px; font: 800 14px/1.3 "Plus Jakarta Sans", Inter, sans-serif; color: var(--bb-lacivert); }
.bb-gorevler ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.bb-gorev { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px; border-radius: 12px; background: #fff; }
.bb-gorev.is-acik { box-shadow: 0 0 0 2px #FFC94D inset; }
.bb-gorev.is-tamam, .bb-gorev.is-kilitli { opacity: .78; }
.bb-gorev-simge { font-size: 24px; text-align: center; }
.bb-gorev-metin { font-size: 13.5px; line-height: 1.4; color: #1f2937; }
.bb-gorev-metin strong { color: #B45309; }
.bb-gorev-metin small { display: block; margin-top: 2px; font-size: 11.5px; font-weight: 700; color: var(--bb-soluk); }
.bb-gorev-dugme { display: inline-flex; align-items: center; gap: 4px; min-height: 40px; padding: 0 12px; border-radius: 12px; background: #0A2540; color: #fff; font: 700 13px Inter, sans-serif; text-decoration: none; white-space: nowrap; }
.uyg .bb-gorev-dugme { color: #fff; }   /* uygulama kabuğunun ".uyg a { color: inherit }" kuralı yazıyı lacivert zeminde koyulaştırıyordu */
.bb-gorev-dugme:focus-visible { outline: 3px solid #E67E22; outline-offset: 2px; }
/* Sosyal görevler (2026-10-16): Günlük görevler kutusunda alt bölüm; "Puanı Al" yeşil düğme. */
.bb-gorev-alt-baslik { margin: 14px 0 8px; font: 800 13.5px/1.3 "Plus Jakarta Sans", Inter, sans-serif; color: var(--bb-lacivert); }
.bb-sosyal-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.bb-gorev--sosyal.is-acik { box-shadow: 0 0 0 2px #F6D58E inset; }
button.bb-gorev-dugme { border: 0; cursor: pointer; }
.bb-gorev-dugme--al { background: #2F8F3E; }
.bb-gorev-dugme:disabled { opacity: .6; cursor: default; }
.bb-gorev-tamam { font-size: 12.5px; font-weight: 800; color: #3FA34D; white-space: nowrap; }
.bb-gorev-not { font-size: 12px; font-weight: 700; color: var(--bb-soluk); text-align: right; max-width: 110px; }

@media (max-width: 520px) {
	.bb-gorev { grid-template-columns: 30px minmax(0, 1fr); }
	.bb-gorev-dugme, .bb-gorev-not, .bb-gorev-tamam { grid-column: 2; justify-self: start; text-align: left; max-width: none; }
	.bb-zemin { padding: 10px; border-radius: 18px; }
	.bb-cam { padding: 14px 12px 12px; }
	.bb-secim-izgara { grid-template-columns: 1fr; }
	.bb-dugme-emoji { font-size: 24px; }
	.bb-dugme-ad { font-size: 12.5px; }
}
@media (prefers-reduced-motion: reduce) {
	.bb-karakter, .bb-yuzen, .bb-goz, .bb-yuzgec, .bb-portakal, .bb-balik, .bb-isilti, .bb-parilti, .bb-dalga, .bb-bar > span::after,
	.bb-damla, .bb-isinlar, .bb-huzme, .bb-yukselen, .bb-marul, .bb-balon, .is-uzgun .bb-uyku text, .bb-konfeti i, .bb-dugme.is-basildi,
	.fx-sula .bb-karakter, .fx-sev .bb-karakter, .fx-gunes .bb-karakter, .fx-yem .bb-kafa, .fx-yem .bb-cene, .bb-sahne.is-evrim .bb-sahne-svg, .bb-hasat { animation: none !important; }
	.bb-bar > span { transition: none; }
	.bb-sahne.is-mutlu::before, .bb-sahne.is-mutlu::after { animation: none; opacity: .9; }
}