/* FONT TYPERWRITER — TETAP ADA */    
    @font-face {    
      font-family: 'Typerwriter';    
      src: url('https://fonts.gstatic.com/s/electrolize/v14/4iCp7cYj704726J316j8aA.woff2 ') format('woff2');    
      font-weight: normal;    
      font-style: normal;    
      font-display: swap;    
    }    /* RESET DASAR — TIDAK DIHAPUS */    
* {    
  margin: 0;    
  padding: 0;    
  box-sizing: border-box;    
  -webkit-tap-highlight-color: transparent;    
  outline: none;    
}    

body {    
  background: linear-gradient(135deg, #1a1a1a, #0a0a0a);    
  font-family: 'Typerwriter', monospace;    
  display: flex;    
  justify-content: center;    
  align-items: center;    
  min-height: 100vh;    
  padding: 20px;    
  color: #f8f9fa;    
  -webkit-user-select: none;    
  overflow-x: hidden;    
}    

.container {    
  display: flex;    
  flex-direction: column;    
  gap: 20px;    
  width: 100%;    
  max-width: 560px;    
}    

.calculator {    
  background: rgba(30, 30, 30, 0.85);    
  backdrop-filter: blur(12px);    
  border-radius: 30px;    
  padding: 30px;    
  box-shadow: 0 4px 25px rgba(0,0,0,0.35);    
  border: 1px solid rgba(255,255,255,0.05);    
}    

.input-display, .output-display {    
  width: 100%;    
  min-height: 80px;    
  border-radius: 16px;    
  padding: 20px;    
  margin-bottom: 16px;    
  font-size: 1.3rem;    
  line-height: 1.5;    
  text-align: left;    
  overflow-x: hidden;    
  white-space: normal;    
  word-break: break-word;    
  overflow-wrap: break-word;    
  box-shadow: inset 0 2px 12px rgba(0,0,0,0.8);    
  font-family: 'Typerwriter', monospace;    
  position: relative;    
  max-width: 100%;    
  display: block;    
  transition: all 0.3s ease;    
}    

/* Membuat MathJax elemen bisa memecah baris */    
.output-display .mjx-math {    
  display: block !important;    
  word-break: break-all !important;    
  white-space: normal !important;    
  max-width: 100% !important;    
  overflow: hidden;    
  font-size: 1.3rem;    
}    

.output-display .mjx-container {    
  width: 100% !important;    
  display: block !important;    
}    

.output-display .mjx-mrow {    
  display: block !important;    
  word-break: break-word !important;    
}    

.input-display {
  color: #a0f0a0;    
  border: 1px solid rgba(80, 255, 120, 0.2);    
}

.output-display {
  color: #f0f0f0;
  border: 1px solid rgba(230, 57, 70, 0.3);
  min-height: 80px;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: visible;
  text-align: left;
  position: relative;
  white-space: nowrap;
  padding: 20px;
}

.output-display .mjx-chtml {
  display: inline-block;
  white-space: nowrap;
}

.output-display .mjx-mrow {
  display: inline-block;
}

/* LOADING ANIMATION: MODERN SPINNER */    
.output-display.loading {    
  opacity: 0.8;    
  position: relative;    
}    

.output-display.loading::before {    
  content: '';    
  position: absolute;    
  top: 50%;    
  left: 50%;    
  transform: translate(-50%, -50%);    
  width: 40px;    
  height: 40px;    
  border: 4px solid rgba(255,255,255,0.1);    
  border-top: 4px solid #00ff66;    
  border-radius: 50%;    
  animation: spin 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;    
}    

.output-display.loading::after {    
  content: '';    
  position: absolute;    
  top: 50%;    
  left: 50%;    
  transform: translate(-50%, -50%);    
  width: 20px;    
  height: 20px;    
  background: #00ff66;    
  border-radius: 50%;    
  opacity: 0.8;    
  box-shadow: 0 0 10px #00ff66;    
}    

@keyframes spin {    
  0% { transform: translate(-50%, -50%) rotate(0deg); }    
  100% { transform: translate(-50%, -50%) rotate(360deg); }    
}    

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

button {
  height: 54px;
  font-size: 1rem;
  font-weight: 500;
  border: none;
  border-radius: 14px;
  cursor: pointer;
  background: rgba(60, 60, 60, 0.8);
  color: white;
  position: relative;
  overflow: hidden;
  transition: all 0.2s cubic-bezier(0.23, 1, 0.32, 1);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
  user-select: none;
  font-family: 'Typerwriter', monospace;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
  background: rgba(70, 70, 70, 0.9);
}

button:active {
  transform: translateY(1px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}

button::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(230, 57, 70, 0.12);
  border-radius: 14px;
  opacity: 0;
  transform: scale(0);
  pointer-events: none;
  transition: transform 0.4s, opacity 0.4s;
}

button:active::after {
  transform: scale(1.4);
  opacity: 0.25;
  transition: transform 0.1s, opacity 0.1s;
}

/* GRADIENT BUTTONS — TETAP RINGAN */
.operator { background: linear-gradient(135deg, #e63946, #d02b3a); }
.calculus { background: linear-gradient(135deg, #f4a261, #e76f51); }
.equals { background: linear-gradient(135deg, #4caf50, #3d8b40); }
.clear, .del { background: linear-gradient(135deg, #5a5a5a, #444); }
.sigma, .euler { background: linear-gradient(135deg, #6a4c93, #543a75); }
.partial { background: linear-gradient(135deg, #8338ec, #5e24d7); }
.high-order { background: linear-gradient(135deg, #ff006e, #cc0058); }
.func { background: linear-gradient(135deg, #3a3a5c, #2a2a4a); font-size: 0.9rem; }
.func-adv { background: linear-gradient(135deg, #4b3a5c, #3a2a4a); font-size: 0.85rem; }
.func-name { background: linear-gradient(135deg, #2d4b4b, #1d3a3a); font-size: 0.9rem; }
.const { background: linear-gradient(135deg, #4a3a3a, #3a2a2a); font-size: 1.1rem; }
.var { background: linear-gradient(135deg, #00b894, #008870); font-weight: 600; font-size: 1.1rem; }
.ans { background: linear-gradient(135deg, #fdcb6e, #f5972d); }
.gemini-btn {
  background: linear-gradient(135deg, #7209b7, #5a0790);
  grid-column: span 4;
  height: 62px;
  font-size: 1.12rem;
  border-radius: 20px;
  contain: content;
}

.func {    
  background: #3a3a5c;    
  font-size: 0.9rem;    
}    
.func:hover { background: #4a4a7c; }    

.func-adv {    
  background: #4b3a5c;    
  font-size: 0.85rem;    
}    
.func-adv:hover { background: #5b4a6c; }    

.func-name {    
  background: #2d4b4b;    
  font-size: 0.9rem;    
}    
.func-name:hover { background: #3d5b5b; }    

.const {    
  background: #4a3a3a;    
  font-size: 1.1rem;    
}    
.const:hover { background: #5a4a4a; }    

.var {    
  background: linear-gradient(135deg, #00b894, #00a085);    
  font-weight: 600;    
  font-size: 1.1rem;    
}    
.var:hover {    
  background: linear-gradient(135deg, #00a085, #008870);    
}    

.ans {    
  background: linear-gradient(135deg, #fdcb6e, #fab14d);    
  font-weight: 600;    
}    
.ans:hover {    
  background: linear-gradient(135deg, #fab14d, #f5972d);    
}    

.gemini-btn {    
  background: linear-gradient(135deg, #7209b7, #3a0ca3);    
  font-weight: 600;    
  grid-column: span 4;    
}    
.gemini-btn:hover {    
  background: linear-gradient(135deg, #5e0696, #2d0980);    
}    

/* MODAL STYLING */    
#sigmaModal {    
  display: none;    
  position: fixed;    
  top: 0;    
  left: 0;    
  width: 100%;    
  height: 100%;    
  background: rgba(0,0,0,0.7);    
  z-index: 1000;    
  justify-content: center;    
  align-items: center;    
  flex-direction: column;    
}    

#sigmaModal > div {    
  background: #222;    
  padding: 25px;    
  border-radius: 16px;    
  width: 90%;    
  max-width: 350px;    
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);    
}    

#sigmaModal h3 {    
  color: white;    
  margin-bottom: 15px;    
  text-align: center;    
}    

#sigmaModal label {    
  color: #ccc;    
  display: block;    
  margin-bottom: 5px;    
}    

#sigmaModal input {    
  width: 100%;    
  padding: 10px;    
  border-radius: 8px;    
  background: #333;    
  color: white;    
  border: none;    
}    

#sigmaModal div[style*="display:flex"] {    
  margin-bottom: 12px;    
}    

#sigmaModal button {    
  flex: 1;    
  padding: 10px;    
  border: none;    
  border-radius: 8px;    
  color: white;    
  cursor: pointer;    
}    

#sigmaModal button:first-child {    
  background: #f4a261;    
}    

#sigmaModal button:last-child {    
  background: #555;    
}