* { margin: 0; padding: 0; box-sizing: border-box; font-family: -apple-system, sans-serif; }

body {
    height: 100vh; display: flex; justify-content: center; align-items: center;
    background-color: #000;
}

.calculator {
    width: 330px; background-color: #000; padding: 20px; border-radius: 40px;
}

.calculator-input {
    width: 100%; height: 120px; border: none; background: transparent;
    color: #fff; font-size: 4.5rem; text-align: right; outline: none; padding: 10px;
}

.calculator-keys { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }

.key {
    height: 72px; width: 72px; border-radius: 50%; border: none;
    background-color: #333; color: #fff; font-size: 1.8rem; cursor: pointer;
}

.key:active { filter: brightness(1.3); }
.key.grey { background-color: #a5a5a5; color: #000; }
.key.orange { background-color: #ff9f0a; color: #fff; }
.key.double { grid-column: span 2; width: 156px; border-radius: 40px; text-align: left; padding-left: 28px; }

/* Gizli Menü - Keskin Köşeli (Corner) */
#dev-menu {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.98); display: flex; justify-content: center; align-items: center; z-index: 1000;
}

.menu-content {
    background: #000; border: 2px solid #00ff41; width: 90%; max-width: 500px;
    font-family: monospace; color: #00ff41;
}

.menu-header { background: #00ff41; color: #000; padding: 10px; font-weight: bold; }
.asset-grid { padding: 20px; max-height: 300px; overflow-y: auto; }
.asset-item { border-left: 3px solid #00ff41; padding-left: 10px; margin-bottom: 10px; font-size: 0.8rem; }
.exit-btn { width: 100%; background: transparent; border: 1px solid #ff3b30; color: #ff3b30; padding: 10px; cursor: pointer; }

/* Animasyon */
.menu-show { animation: zoomIn 0.3s ease-out forwards; }
@keyframes zoomIn { from { transform: scale(0.7); opacity: 0; } to { transform: scale(1); opacity: 1; } }