/* =========================================================================
   css/components.css
   Tekrar eden öğeler; butonlar, rozetler, geçiş anahtarları (toggle) vb.
   ========================================================================= */

/* --- Temel ve Menü Butonları --- */
.k-btn { width:42px; height:42px; border-radius:50%; background:rgba(255,255,255,.6); border:1px solid rgba(255,255,255,.8); display:flex; align-items:center; justify-content:center; color:var(--text-main); cursor:pointer; box-shadow:0 4px 10px rgba(0,0,0,.05); transition:all .3s; position:relative; }
.k-btn-with-icon svg { width: 20px; height: 20px; display: block; }
#settings-menu-btn-icon svg { stroke-width: 1.5px; stroke: currentColor; }

.menu-btn { display:block; width:100%; padding:16px; margin:10px 0; cursor:pointer; border-radius:20px; border:1px solid rgba(255,255,255,.4); background:rgba(229,229,234,.7); backdrop-filter:blur(10px); color:var(--text-main); font-size:16px; font-weight:700; letter-spacing:.5px; transition:all .3s cubic-bezier(.34,1.56,.64,1); box-sizing:border-box; box-shadow:0 8px 20px rgba(0,0,0,.06); }
.menu-btn.primary { background:linear-gradient(135deg,var(--apple-blue),#005bb5); border:none; color:#fff; box-shadow:0 8px 25px rgba(0,122,255,.3); }

.action-row { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:15px; }
.action-btn { flex:1; padding:10px 4px; background:rgba(255,255,255,.5); border-radius:16px; border:1px solid rgba(255,255,255,.6); font-size:11px; font-weight:700; color:var(--text-secondary); cursor:pointer; transition:all .3s cubic-bezier(.34,1.56,.64,1); display:flex; flex-direction:column; align-items:center; gap:6px; box-shadow:0 4px 15px rgba(0,0,0,.03); }
.action-btn span { font-size:18px; }

.count-btn { width:54px; height:54px; border-radius:50%; border:2px solid var(--text-secondary); background:transparent; font-size:20px; font-weight:800; cursor:pointer; transition:all .2s cubic-bezier(.34,1.56,.64,1); color:var(--text-secondary); display:flex; align-items:center; justify-content:center; }
.count-btn.active { background:var(--text-main); color:var(--bg); border-color:var(--text-main); transform:scale(1.1); box-shadow:0 4px 15px rgba(0,0,0,.1); }

.btn-google { background: #fff; color: #000; border: none; padding: 14px; border-radius: 14px; width: 100%; font-size: 15px; font-weight: 800; display: flex; align-items: center; justify-content: center; gap: 10px; cursor: pointer; box-shadow: 0 6px 15px rgba(255,255,255,0.2); transition: transform 0.2s; }
.btn-google img { width: 20px; height: 20px; }

/* --- İkon & Özelleştirme Butonları --- */
.menu-icon-btn { background:#fff; border:1px solid #e5e5ea; border-radius:16px; width:48px; height:48px; cursor:pointer; transition:all .2s ease; color:var(--text-main); display:flex; align-items:center; justify-content:center; box-shadow:0 4px 12px rgba(0,0,0,.06); }
.icon-grid-btn { font-size:24px; width:54px; height:54px; border-radius:18px; border:1px solid rgba(255,255,255,.6); background:rgba(255,255,255,.5); cursor:pointer; transition:all .3s cubic-bezier(.34,1.56,.64,1); display:flex; align-items:center; justify-content:center; box-shadow:0 4px 15px rgba(0,0,0,.03); }
.icon-grid-btn.selected { background:#fff; border-color:var(--apple-blue); box-shadow:0 0 0 2px var(--apple-blue),0 8px 20px rgba(0,122,255,.2); }
.icon-grid-btn.disabled { opacity:.3; cursor:not-allowed; filter:grayscale(1); background:rgba(0,0,0,.05); }

/* --- Chat Butonları --- */
.chat-tab-btn { background: var(--apple-blue); color: #fff; border: none; border-radius: 10px; padding: 8px 12px; font-size: 12px; font-weight: 800; cursor: pointer; flex-shrink: 0; box-shadow: 0 4px 10px rgba(0,122,255,0.3); transition: transform 0.2s; }
.inline-chat-btn { background: rgba(255, 255, 255, 0.6); border: 1px solid rgba(0, 0, 0, 0.05); border-radius: 10px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.02); white-space: nowrap; flex-shrink: 0; color: var(--text-main); }
.chat-balloon-panel .inline-chat-btn { width: 100% !important; height: 44px !important; font-size: 22px; margin: 0; }
.chat-balloon-panel .msg-list-container .inline-chat-btn { font-size: 13px !important; height: auto !important; padding: 12px !important; white-space: normal; text-align: left; justify-content: flex-start; }

/* --- UI Araçları: Toggles, Badges & Dividers --- */
.toggle-switch { position:relative; width:44px; height:24px; -webkit-appearance:none; appearance:none; background:#e5e5ea; border-radius:12px; outline:0; cursor:pointer; transition:background .3s; margin:0; box-shadow:inset 0 2px 4px rgba(0,0,0,.05); }
.toggle-switch::after { content:''; position:absolute; top:2px; left:2px; width:20px; height:20px; background:#fff; border-radius:50%; box-shadow:0 2px 5px rgba(0,0,0,.2); transition:transform .3s cubic-bezier(.34,1.56,.64,1); }
.toggle-switch:checked { background: var(--apple-blue); }
.toggle-switch:checked::after { transform:translateX(20px); }

.id-badge { background:#e5e5ea; color:var(--text-secondary); padding:6px 16px; border-radius:20px; font-size:12px; font-weight:700; letter-spacing:.5px; margin-top:8px; border:1px solid #d1d1d6; font-family:monospace; }
.id-badge::after { content:'\2398'; margin-left:5px; font-size:13px; vertical-align:-1px; opacity:.6; }

.notification-badge { position:absolute; top:-2px; right:-2px; width:16px; height:16px; background:var(--red); color:#fff; border-radius:50%; border:2px solid #fff; font-size:9px; font-weight:bold; display:flex; align-items:center; justify-content:center; box-shadow:0 2px 4px rgba(252,77,74,.4); animation:pulse-badge 2s infinite; }
@keyframes pulse-badge { 0% { transform:scale(1); box-shadow:0 0 0 0 rgba(252,77,74,.7); } 70% { transform:scale(1); box-shadow:0 0 0 6px rgba(252,77,74,0); } 100% { transform:scale(1); box-shadow:0 0 0 0 rgba(252,77,74,0); } }

.divider { height:1px; background:rgba(0,0,0,.05); margin:25px 0; position:relative; }
.divider::after { content:attr(data-label); position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); background:rgba(255,255,255,.8); padding:0 10px; font-size:12px; color:var(--text-secondary); font-weight:600; border-radius:10px; }

/* --- Özel İçerik Kartları & Satın Alma --- */
.setup-card { border:2px solid; border-radius:20px; padding:12px 15px; display:flex; align-items:center; gap:12px; background:rgba(255,255,255,.6); backdrop-filter:blur(10px); transition:all .3s; position:relative; overflow:hidden; box-shadow:0 8px 20px rgba(0,0,0,.03); }
.setup-card::after { content:''; position:absolute; inset:0; background:currentColor; opacity:.05; z-index:0; pointer-events:none; }
.setup-card > * { position:relative; z-index:1; }
.setup-card.disabled { opacity:.4; filter:grayscale(1); pointer-events:none; border-color:var(--board-lines)!important; color:var(--text-secondary)!important; background:var(--bg); }
.setup-card.disabled::after { display:none; }

.price-tag { display:flex; align-items:center; justify-content:center; gap:4px; background:rgba(0,0,0,.65); color:#fff; padding:3px 8px; border-radius:12px; font-size:10px; margin-top:6px; box-shadow:0 2px 5px rgba(0,0,0,.2); pointer-events:none; }
.price-tag svg { width:12px; height:12px; color:#48dbfb; }

.floating-coin { position:fixed; color:var(--apple-blue); font-weight:800; font-size:18px; display:flex; align-items:center; gap:4px; animation:floatUp 1.2s cubic-bezier(.34,1.56,.64,1) forwards; z-index:5000; text-shadow:0 2px 5px rgba(0,0,0,.2); pointer-events:none; will-change: transform, opacity; }
@keyframes floatUp { 0% { transform:translateY(0) scale(.5); opacity:0; } 20% { transform:translateY(-10px) scale(1.2); opacity:1; } 100% { transform:translateY(-50px) scale(1); opacity:0; } }

/* --- VIP Çerçeveler, Streak Ateşi & Özel Efektler --- */
.vip-border-gold { border: 4px solid #facb15 !important; box-shadow: 0 0 15px #facb15, inset 0 0 15px rgba(250,203,21,0.5) !important; }
.vip-border-diamond { border: 4px solid #48dbfb !important; box-shadow: 0 0 25px #48dbfb, inset 0 0 20px rgba(72,219,251,0.6) !important; animation: diamondShine 3s linear infinite; }
@keyframes diamondShine { 0% { filter: hue-rotate(0deg); } 100% { filter: hue-rotate(360deg); } }

.win-streak-fire { position: relative; box-shadow: 0 0 20px #ff3b30, 0 0 40px #ff9500, inset 0 0 15px #ff3b30 !important; border-color: #ff9500 !important; animation: firePulse 1s infinite alternate; }
.win-streak-fire::before { content: '🔥 SERİ!'; position: absolute; top: -15px; left: 50%; transform: translateX(-50%); font-size: 11px; font-weight: 900; color: #fff; background: linear-gradient(135deg, #ff3b30, #ff9500); padding: 2px 8px; border-radius: 10px; text-shadow: 0 1px 2px rgba(0,0,0,0.5); white-space: nowrap; z-index: 20; pointer-events: none; }

.grandmaster-glow::after {
    content: '';
    position: absolute;
    top: -8px; left: -8px; right: -8px; bottom: -8px;
    background: conic-gradient(from 0deg, #ff00cc, #333399, #00ffcc, #ff00cc);
    border-radius: 50%;
    z-index: -1;
    animation: esotericSpin 4s linear infinite;
    filter: blur(10px);
    opacity: 0.8;
}
@keyframes esotericSpin { 100% { transform: rotate(360deg); } }

/* --- Görev Kartları (Quests) --- */
.quest-card { background: var(--card-bg); border: 1px solid rgba(0,0,0,0.05); padding: 15px; border-radius: 20px; margin-bottom: 12px; display: flex; justify-content: space-between; align-items: center; box-shadow: 0 4px 15px rgba(0,0,0,0.03); transition: transform 0.2s; }
.quest-card:hover { transform: scale(1.02); }
body.dark-theme .quest-card { border-color: rgba(255,255,255,0.05); }

.quest-progress-bar { width: 100%; height: 8px; background: rgba(0,0,0,0.1); border-radius: 4px; margin-top: 8px; overflow: hidden; position: relative; }
.quest-progress-fill { height: 100%; background: var(--apple-blue); border-radius: 4px; transition: width 0.4s cubic-bezier(0.34,1.56,0.64,1); }

.quest-btn { background: var(--apple-blue); color: #fff; border: none; padding: 8px 16px; border-radius: 12px; font-weight: 800; cursor: pointer; transition: all 0.2s; box-shadow: 0 4px 10px rgba(0,122,255,0.3); }
.quest-btn:disabled { background: var(--green); box-shadow: 0 4px 10px rgba(52,199,89,0.3); cursor: default; }

/* Görev Menüsü Sekme Yapısı */
.quest-tabs { display:flex; border-bottom:1px solid rgba(0,0,0,0.1); width:100%; margin-bottom:15px; }
body.dark-theme .quest-tabs { border-color: rgba(255,255,255,0.1); }
.quest-tab-btn { flex:1; background:transparent; border:none; color:var(--text-muted); font-weight:bold; padding:15px 5px; font-size:12px; border-bottom:2px solid transparent; cursor:pointer; transition:all 0.3s; }
.quest-tab-btn.active { color:var(--apple-blue); border-bottom-color:var(--apple-blue); }

/* --- Hover ve Active Efektleri (Masaüstü/Mobil) --- */
@media (hover: hover) {
    .k-btn:hover { transform:scale(1.1); background:#fff; box-shadow:0 8px 20px rgba(0,0,0,.1); border-color:var(--apple-blue); color:var(--apple-blue) }
    .action-btn:hover { background:rgba(255,255,255,.9); color:var(--apple-blue); transform:translateY(-3px); box-shadow:0 8px 20px rgba(0,0,0,.08) }
    .menu-btn:hover { transform:translateY(-2px); box-shadow:0 10px 25px rgba(0,0,0,.1) }
    .menu-icon-btn:hover { background:#f2f2f7; transform:scale(.95); box-shadow:0 2px 6px rgba(0,0,0,.04) }
    .icon-grid-btn:hover:not(.disabled) { transform:scale(1.1); box-shadow:0 8px 20px rgba(0,0,0,.08); background:#fff }
    .btn-google:hover { transform: scale(1.02); }
    .chat-tab-btn:hover { transform: scale(1.05); }
    .inline-chat-btn:hover { transform: scale(1.05); background: #fff; border-color: var(--apple-blue); box-shadow: 0 4px 10px rgba(0, 122, 255, 0.15); }
    
    /* Özel Uyarı (Modal) Butonları Hover Efektleri */
    .custom-modal-btn.cancel:hover { background: rgba(0,0,0,.1); }
    .custom-modal-btn.confirm:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,122,255,.4); }
}

/* Oyun İçi Hızlı Sohbet Butonu Tıklama (Basılı Tutma) Efekti */
.inline-chat-btn:active { transform: scale(0.95); }

@media(max-width:480px){
    .menu-icon-btn { width:40px; height:40px; border-radius:12px; }
    .menu-icon-btn svg { width:20px; height:20px; }
    .menu-btn { padding:14px; font-size:15px; }
}

@media(max-width: 600px) {
    .chat-tab-btn { padding: 6px 8px; font-size: 11px; }
    .top-bar-controls .menu-icon-btn { width: 36px; height: 36px; min-height: 36px; border-radius: 10px; }
    .top-bar-controls .menu-icon-btn svg { width: 18px; height: 18px; }
}

/* --- Oyun Künyesi --- */
.credits { margin-top: 25px; font-size: 11px; color: #a1a1a6; line-height: 1.5; font-weight: 500;