* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   font-family: 'Segoe UI', Arial, sans-serif;
}

body {
   background: #1a1b1f;
   color: #fff;
   line-height: 1.6;
}

.container {
   max-width: 1200px;
   margin: 20px auto;
   padding: 20px;
   background: rgba(255, 255, 255, 0.1);
   border-radius: 10px;
   border: 1px solid rgba(255, 255, 255, 0.2);
}

.header {
   text-align: center;
   margin-bottom: 30px;
   padding: 20px;
   background: rgba(255, 255, 255, 0.1);
   border-radius: 10px;
}

.header h1 {
   color: #fff;
   font-size: 2em;
   margin-bottom: 10px;
}
 /*Logo*/
 .panel-header {
   position: relative;
   background: var(--primary-color);
   color: white;
   padding: 1.5rem;
   text-align: center;
   }
   .panel-logo {
   margin-bottom: 1rem;
   }
   .panel-logo img {
   max-width: 100px;
   height: auto;
   }
   .panel-version {
   position: absolute;
   top: 1rem;
   right: 1rem;
   }
   .panel-header h2 {
   margin-bottom: 0.5rem;
   }

.content {
   background: rgba(255, 255, 255, 0.1);
   padding: 30px;
   border-radius: 10px;
}

.product-info-section,
.ingredients-section,
.additional-costs-section {
   margin-bottom: 30px;
   padding: 20px;
   background: rgba(255, 255, 255, 0.05);
   border-radius: 8px;
}

h2 {
   color: #fff;
   margin-bottom: 20px;
   padding-bottom: 10px;
   border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.form-group {
   margin-bottom: 15px;
}

.form-row {
   display: grid;
   grid-template-columns: 3fr 1fr;
   gap: 10px;
}

.form-group label {
   display: block;
   margin-bottom: 5px;
   color: rgba(255, 255, 255, 0.9);
}

input[type="text"],
input[type="number"],
select {
   width: 100%;
   padding: 10px;
   background: rgba(255, 255, 255, 0.05);
   border: 1px solid rgba(255, 255, 255, 0.2);
   border-radius: 5px;
   color: #fff;
}

.ingredient-row {
   display: grid;
   grid-template-columns: 3fr 2fr 1.5fr 1.5fr 40px;
   gap: 10px;
   align-items: center;
   margin-bottom: 10px;
   padding: 10px;
   background: rgba(255, 255, 255, 0.05);
   border-radius: 5px;
}

.add-btn,
.calculate-btn,
.download-btn {
   padding: 10px 20px;
   border: none;
   border-radius: 5px;
   cursor: pointer;
   display: inline-flex;
   align-items: center;
   gap: 8px;
   color: #fff;
   transition: opacity 0.3s ease;
}

.add-btn:hover,
.calculate-btn:hover,
.download-btn:hover {
   opacity: 0.9;
}

.add-btn {
   background: #3498db;
   margin-top: 10px;
}

.delete-btn {
   background: #e74c3c;
   color: white;
   border: none;
   border-radius: 5px;
   width: 40px;
   height: 40px;
   cursor: pointer;
   transition: opacity 0.3s ease;
}

.delete-btn:hover {
   opacity: 0.9;
}

.results-container {
   background: rgba(255, 255, 255, 0.05);
   padding: 20px;
   border-radius: 8px;
   margin-top: 20px;
}

.result-item {
   display: flex;
   justify-content: space-between;
   margin-bottom: 10px;
   padding: 10px;
   border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.result-item.highlighted {
   background: rgba(255, 255, 255, 0.1);
   border-radius: 5px;
   font-weight: bold;
}

.action-buttons {
   display: flex;
   gap: 15px;
   justify-content: center;
   margin-top: 30px;
}

.calculate-btn {
   background: #2ecc71;
}

.download-btn {
   background: #9b59b6;
}

.footer {
   padding: 2rem 0;
   background: rgba(255, 255, 255, 0.1);
   margin-top: 3rem;
   text-align: center;
   border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.footer-content {
   max-width: 1200px;
   margin: 0 auto;
   padding: 0 1rem;
}

.footer-desc {
   font-size: 1.1rem;
   color: rgba(255, 255, 255, 0.8);
   margin-bottom: 1.5rem;
}

.social-links {
   display: flex;
   justify-content: center;
   gap: 2rem;
   margin-bottom: 1.5rem;
}

.social-links a {
   color: rgba(255, 255, 255, 0.8);
   font-size: 1.5rem;
   transition: color 0.3s ease;
}

.social-links a:hover {
   color: #fff;
}

.copyright {
   color: rgba(255, 255, 255, 0.6);
   font-size: 0.9rem;
}

.copyright a {
   color: rgba(255, 255, 255, 0.6);
   text-decoration: none;
   transition: color 0.3s ease;
}

.copyright a:hover {
   color: #fff;
}

@media (max-width: 768px) {
   .container {
       margin: 10px;
       padding: 10px;
   }

   .ingredient-row {
       grid-template-columns: 1fr;
   }

   .form-row {
       grid-template-columns: 1fr;
   }

   .action-buttons {
       flex-direction: column;
   }

   .calculate-btn,
   .download-btn {
       width: 100%;
   }
}

.step-row {
   display: grid;
   grid-template-columns: 30px 1fr 40px;
   gap: 10px;
   align-items: start;
   margin-bottom: 10px;
   padding: 10px;
   background: rgba(255, 255, 255, 0.05);
   border-radius: 5px;
}

.step-number {
   font-weight: bold;
   color: #fff;
   padding-top: 10px;
}

textarea.step-description {
   width: 100%;
   min-height: 60px;
   padding: 10px;
   background: rgba(255, 255, 255, 0.05);
   border: 1px solid rgba(255, 255, 255, 0.2);
   border-radius: 5px;
   color: #fff;
   resize: vertical;
}

/*kalkulator star*/
/* Tombol floating kalkulator */
/* Container Kalkulator */
.calculator {
   position: fixed;
   bottom: 80px;
   left: 20px;
   width: 280px;
   background: rgba(255, 255, 255, 0.95);
   border-radius: 20px;
   backdrop-filter: blur(10px);
   box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
   display: none;
   z-index: 1000;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
   border: 1px solid rgba(255, 255, 255, 0.4);
}

/* Tombol Floating */
.floating-calc-btn {
   position: fixed;
   bottom: 20px;
   left: 20px;
   width: 56px;
   height: 56px;
   background: linear-gradient(135deg, #2196F3, #1976D2);
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   color: white !important;
   cursor: pointer;
   box-shadow: 0 4px 15px rgba(33, 150, 243, 0.3);
   z-index: 999;
   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.floating-calc-btn:hover {
   transform: translateY(-2px);
   box-shadow: 0 6px 20px rgba(33, 150, 243, 0.4);
}

/* Header Kalkulator */
.calc-header {
   padding: 15px;
   background: linear-gradient(135deg, #2196F3, #1976D2);
   color: white !important;
   border-radius: 20px 20px 0 0;
   display: flex;
   justify-content: space-between;
   align-items: center;
   font-size: 16px;
   font-weight: 600;
}

.close-calc {
   background: none;
   border: none;
   color: white !important;
   font-size: 24px;
   cursor: pointer;
   width: 32px;
   height: 32px;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 50%;
   transition: background-color 0.2s;
}

.close-calc:hover {
   background-color: rgba(255, 255, 255, 0.1);
}

/* Layar Kalkulator */
.calc-screen {
   padding: 15px;
   background: rgba(245, 245, 245, 0.5);
}

#calc-input {
   width: 100%;
   padding: 15px;
   font-size: 24px;
   text-align: right;
   border: none;
   background: rgba(255, 255, 255, 0.9);
   border-radius: 12px;
   color: #333 !important;
   font-weight: 500;
   box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* Area Tombol */
.calc-buttons {
   padding: 15px;
   display: grid;
   gap: 10px;
}

.calc-row {
   display: flex;
   gap: 10px;
}

/* Style Tombol */
.calc-btn {
   flex: 1;
   min-height: 50px;
   border: none;
   border-radius: 12px;
   font-size: 18px;
   font-weight: 600;
   cursor: pointer;
   transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
   display: flex;
   align-items: center;
   justify-content: center;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* Warna dan Style berdasarkan tipe tombol */
.calc-btn.number {
   background: rgba(255, 255, 255, 0.9);
   color: #333 !important;
   border: 1px solid rgba(0, 0, 0, 0.05);
}

.calc-btn.operator {
   background: linear-gradient(135deg, #2196F3, #1976D2);
   color: white !important;
   font-weight: 700;
}

.calc-btn.clear {
   background: linear-gradient(135deg, #ff4444, #cc0000);
   color: white !important;
}

.calc-btn.delete {
   background: linear-gradient(135deg, #ff4444, #cc0000);
   color: white !important;
}

.calc-btn.equals {
   background: linear-gradient(135deg, #4CAF50, #388E3C);
   color: white !important;
   flex: 2;
}

.calc-btn:hover {
   transform: translateY(-1px);
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
   filter: brightness(1.05);
}

.calc-btn:active {
   transform: translateY(1px);
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Footer Kalkulator */
.calc-footer {
   padding: 12px;
   text-align: center;
   border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.calc-footer a {
   color: #666;
   text-decoration: none;
   font-size: 12px;
   font-style: italic;
   transition: color 0.2s;
}

.calc-footer a:hover {
   color: #2196F3;
}

/* Responsif */
@media (max-width: 768px) {
   .calculator {
       width: 90%;
       max-width: 320px;
       right: 50%;
       transform: translateX(50%);
       bottom: 100px;
   }
   
   .calc-btn {
       min-height: 45px;
       font-size: 16px;
   }
}

/* Animasi */
@keyframes calcSlideUp {
   from {
       opacity: 0;
       transform: translateY(20px);
   }
   to {
       opacity: 1;
       transform: translateY(0);
   }
}

.calculator.show {
   display: block;
   animation: calcSlideUp 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Input Focus Style */
#calc-input:focus {
   outline: none;
   box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1),
               0 0 0 2px rgba(33, 150, 243, 0.2);
}

/* Hover Effects */
.calc-btn.number:hover {
   background: rgba(255, 255, 255, 1);
}

.calc-btn.operator:hover {
   background: linear-gradient(135deg, #1E88E5, #1565C0);
}

.calc-btn.equals:hover {
   background: linear-gradient(135deg, #43A047, #2E7D32);
}

/* Active State Animation */
.calc-btn:active {
   transform: scale(0.95);
   transition: transform 0.1s;
}
/*kalkulator end*/

/*Wahtsapp & Scroll Up start*/
.sr-wa-button {
   position: fixed;
   bottom: 20px;
   right: 20px;
   background-color: #25D366;
   width: 65px;
   height: 65px;
   border-radius: 50%;
   display: flex;
   justify-content: center;
   align-items: center;
   cursor: pointer;
   box-shadow: 0 4px 10px rgba(0,0,0,0.3);
   z-index: 1000;
   animation: pulse 2s infinite;
   transition: transform 0.3s ease;
}

.sr-wa-button:hover {
   animation-play-state: paused;
   transform: scale(1.1);
}

.sr-wa-button i {
   color: white !important;
   font-size: 30px !important;
   width: auto !important;
   height: auto !important;
}

.sr-notification {
   position: fixed;
   bottom: 45px;
   right: 90px;
   background-color: rgb(10, 2, 2);
   padding: 10px 15px;
   border-radius: 10px;
   box-shadow: 0 2px 5px rgba(0,0,0,0.2);
   display: none;
   animation: sr-fadeIn 0.3s ease-in;
   z-index: 999998;
}

.sr-form-container {
   position: fixed;
   bottom: 95px;
   right: 20px;
   padding: 20px;
   border-radius: 15px;
   box-shadow: 0 4px 15px rgba(0,0,0,0.3);
   width: 300px !important;
   display: none;
   z-index: 999997;
   background: linear-gradient(135deg, #0f2027 0%, #203a43 50%, #2c5364 100%);
   color: white;
   border: 1px solid rgba(255,255,255,0.1);
}

.sr-form-container h2 {
   text-align: center;
   margin-bottom: 15px;
   color: #e0e0e0;
   font-size: 16px;
   text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

.sr-form-container input,
.sr-form-container textarea {
   width: 100%;
   padding: 8px;
   margin: 8px 0;
   border: 1px solid rgba(255,255,255,0.2);
   border-radius: 5px;
   background: rgba(32,58,67,0.5);
   color: white;
}

.sr-form-container textarea {
   height: 100px;
   resize: none;
}

.sr-send-wa-button {
   width: 100%;
   padding: 10px;
   background-color: #25D366;
   color: white;
   border: none;
   border-radius: 5px;
   cursor: pointer;
   margin-bottom: 10px;
   transition: background-color 0.3s ease;
}

.sr-send-wa-button:hover {
   background-color: #20b355;
}

.sr-footer-link {
   display: block;
   text-align: center;
   margin-top: 10px;
   color: #b0b0b0;
   font-style: italic;
   text-decoration: none;
   transition: color 0.3s ease;
}

.sr-footer-link:hover {
   color: #d0d0d0;
}

.sr-scroll-top {
   position: fixed;
   bottom: 95px;
   right: 20px;
   width: 60px;
   height: 60px;
   border-radius: 50%;
   background: #333;
   display: flex;
   justify-content: center;
   align-items: center;
   cursor: pointer;
   z-index: 999996;
   transition: all 0.3s ease;
   opacity: 0;
   visibility: hidden;
}

.sr-scroll-top.active {
   opacity: 1;
   visibility: visible;
}

.sr-scroll-top i {
   color: white;
   font-size: 24px;
}

.sr-scroll-top:hover {
   background: #555;
   transform: translateY(-3px);
}

.sr-overlay {
   display: none;
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: 999995;
}

@keyframes sr-pulse {
   0% { 
       transform: scale(1);
       box-shadow: 0 4px 10px rgba(0,0,0,0.3);
   }
   50% { 
       transform: scale(1.05);
       box-shadow: 0 6px 15px rgba(0,0,0,0.4);
   }
   100% { 
       transform: scale(1);
       box-shadow: 0 4px 10px rgba(0,0,0,0.3);
   }
}

@keyframes sr-fadeIn {
   from { opacity: 0; }
   to { opacity: 1; }
}
/*Wahtsapp & Scroll Up end*/