:root{--primary-color:#E67E22;--primary-color-dark:#d35400;--secondary-color:#2C3E50;--secondary-color-light:#34495E;--background-color:#F8F9FA;--text-color:#343A40;--text-color-light:#7f8c8d;--light-gray:#E9ECEF;--white-color:#FFFFFF;--font-heading:'Poppins', sans-serif;--font-body:'Lato', sans-serif;--shadow:0 4px 15px rgba(0, 0, 0, 0.08);--shadow-strong:0 8px 25px rgba(0, 0, 0, 0.12);--border-radius:16px;--success-color:#27ae60;--danger-color:#e74c3c}*{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth}body{font-family:var(--font-body);background-color:var(--background-color);color:var(--text-color);line-height:1.6;transition:background-color 0.3s ease,color 0.3s ease}.container{max-width:1200px;margin:0 auto;padding:0 20px}.navbar{background-color:var(--white-color);padding:1rem 0;box-shadow:var(--shadow);position:sticky;top:0;z-index:1000;transition:background-color 0.3s}.navbar .container{display:flex;justify-content:space-between;align-items:center}.navbar-brand{font-family:var(--font-heading);font-size:1.8rem;font-weight:700;color:var(--secondary-color);text-decoration:none;transition:color 0.3s}.navbar-nav{display:flex;align-items:center;gap:2rem}.nav-link{color:var(--text-color);text-decoration:none;font-weight:700;position:relative;padding-bottom:8px;transition:color 0.3s ease}.nav-link:hover{color:var(--primary-color)}.nav-link::after{content:'';position:absolute;width:100%;transform:scaleX(0);height:3px;bottom:0;left:0;background-color:var(--primary-color);transform-origin:center;transition:transform 0.4s cubic-bezier(.19,1,.22,1)}.nav-link:hover::after{transform:scaleX(1)}.nav-link.active{color:var(--primary-color)}.hero{position:relative;color:var(--white-color);text-align:center;padding:80px 0;display:flex;align-items:center;justify-content:center;min-height:400px;overflow:hidden;background-image:url(cumisaospadang.png);background-size:cover;background-position:center center}.hero::before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgb(44 62 80 / .6);z-index:1}.hero-content{position:relative;z-index:2;text-shadow:1px 1px 4px rgb(0 0 0 / .5)}.hero h1{font-family:var(--font-heading);font-size:3rem;margin-bottom:1rem}.btn-main{background-color:var(--primary-color);color:var(--white-color)!important;padding:12px 24px;border-radius:50px;transition:all 0.3s ease;border:none;cursor:pointer;font-weight:700}.btn-main:hover{background-color:var(--primary-color-dark);transform:translateY(-2px)}.btn-main-outline{background-color:#fff0;color:var(--primary-color);padding:10px 22px;border-radius:50px;border:2px solid var(--primary-color);cursor:pointer;font-weight:700;transition:all 0.3s;display:inline-flex;align-items:center;gap:8px;justify-content:center;text-align:center}.btn-main-outline:hover{background-color:var(--primary-color);color:var(--white-color)}.btn-secondary{background-color:var(--light-gray);color:var(--text-color);border:none;padding:8px 16px;border-radius:8px;cursor:pointer;transition:background-color 0.3s}.section-title{font-family:var(--font-heading);font-size:2rem;margin-bottom:1.5rem;text-align:center}.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem}.collections-section{padding:60px 0;background-color:color-mix(in srgb,var(--background-color) 50%,var(--light-gray))}.collections-container{display:grid;grid-template-columns:repeat(auto-fit,minmax(350px,1fr));gap:30px}.collection-card{background:var(--white-color);border-radius:var(--border-radius);box-shadow:var(--shadow);overflow:hidden;cursor:pointer;transition:transform 0.3s ease,box-shadow 0.3s ease;position:relative;color:#fff;min-height:200px;display:flex;flex-direction:column;justify-content:flex-end;padding:1.5rem}.collection-card::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(to top,rgb(0 0 0 / .8) 0%,#fff0 60%);z-index:2;transition:background-color 0.4s ease}.collection-card-bg{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;z-index:1;transition:transform 0.4s ease}.collection-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-strong)}.collection-card:hover .collection-card-bg{transform:scale(1.1)}.collection-card:hover::before{background:linear-gradient(to top,rgb(0 0 0 / .9) 0%,rgb(0 0 0 / .2) 60%)}.collection-card h3{font-family:var(--font-heading);z-index:3;position:relative;font-size:1.8rem}.collection-card p{z-index:3;position:relative}.meal-planner-section{padding:60px 0}.meal-planner-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:15px;margin-bottom:1rem}.planner-day{background-color:var(--white-color);border-radius:var(--border-radius);padding:1rem;min-height:200px;transition:background-color 0.3s}.planner-day.drag-over{background-color:color-mix(in srgb,var(--success-color) 20%,transparent)}.planner-day-header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--light-gray);padding-bottom:.5rem;margin-bottom:1rem}.planner-day-header h4{font-family:var(--font-heading)}.clear-day-btn{background:none;border:none;cursor:pointer;color:var(--text-color-light)}.planner-day-content{display:flex;flex-direction:column;gap:.8rem;min-height:50px}.planner-empty-state{color:var(--text-color-light);font-style:italic;font-size:.85rem;text-align:center;padding:1rem .5rem;border:2px dashed var(--light-gray);border-radius:8px;height:100%;display:flex;align-items:center;justify-content:center}.planner-item{background:var(--light-gray);padding:.5rem .8rem;border-radius:8px;display:flex;justify-content:space-between;align-items:center;font-size:.9rem}.planner-item button{background:none;border:none;cursor:pointer;color:var(--primary-color)}.planner-instruction{text-align:center;color:var(--text-color-light);font-style:italic}.filters-section{padding:40px 0}#gallery-title{text-align:left}.search-and-actions{display:flex;gap:1rem;margin-bottom:1.5rem}.search-wrapper{flex-grow:1;position:relative;display:flex;align-items:center}#search-input{width:100%;font-size:1.1rem;padding:14px 20px 14px 50px;border:2px solid var(--light-gray);border-radius:var(--border-radius);background-color:var(--white-color);transition:all 0.3s ease}#search-input:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 4px color-mix(in srgb,var(--primary-color) 15%,transparent)}.search-icon{position:absolute;left:20px;color:var(--text-color-light)}.filter-bar{display:flex;flex-wrap:wrap;gap:1rem;align-items:center}.filter-group{display:flex;align-items:center;gap:.8rem;background-color:var(--light-gray);padding:8px;border-radius:50px}.filter-group label{font-weight:700;padding-left:1rem}.filter-btn{background:#fff0;border:none;padding:10px 20px;border-radius:50px;cursor:pointer;font-weight:700;transition:all 0.3s}.filter-btn.active{background-color:var(--white-color);color:var(--primary-color);box-shadow:0 2px 10px rgb(0 0 0 / .1)}.recipe-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:30px}.recipe-card{background:var(--white-color);border-radius:var(--border-radius);box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column;transition:transform 0.3s ease,box-shadow 0.3s ease;position:relative}.recipe-card-clickable{cursor:pointer}.recipe-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-strong)}.recipe-card-img{width:100%;height:200px;object-fit:cover}.recipe-card-content{padding:1.2rem;display:flex;flex-direction:column;flex-grow:1}.recipe-card-title{font-family:var(--font-heading);font-size:1.2rem;margin-bottom:.5rem;flex-grow:1}.recipe-card-info{display:flex;justify-content:space-between;align-items:center;color:var(--text-color-light);font-size:.9rem;margin-top:auto;padding-top:1rem;border-top:1px solid var(--light-gray)}.bookmark-btn{position:absolute;top:15px;right:15px;background-color:rgb(0 0 0 / .4);color:#fff;border:none;width:40px;height:40px;border-radius:50%;font-size:1.5rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform 0.2s,background-color 0.2s}.bookmark-btn:hover{transform:scale(1.1)}.bookmark-btn.active{background-color:var(--danger-color)}.reviews-section{margin-top:2rem;padding-top:2rem;border-top:1px solid var(--light-gray)}.review-form h4,.reviews-section h4{font-family:var(--font-heading);margin-bottom:1rem}.interactive-stars{font-size:2rem;color:var(--light-gray);cursor:pointer}.interactive-stars .star.hover,.interactive-stars .star.selected{color:var(--primary-color)}.review-form textarea{width:100%;min-height:80px;padding:10px;border:1px solid var(--light-gray);border-radius:8px;margin:1rem 0;background-color:var(--background-color);color:var(--text-color)}.review-list{margin-top:2rem;display:flex;flex-direction:column;gap:1.5rem}.review-item{background-color:var(--light-gray);padding:1rem;border-radius:8px;position:relative}.review-item-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem}.review-item-header strong{font-family:var(--font-heading)}.review-item .rating-stars{color:var(--primary-color)}.review-item-footer{display:flex;justify-content:flex-end;margin-top:.5rem}.delete-review-btn{background:none;border:none;color:var(--danger-color);cursor:pointer;font-size:.8rem;font-weight:700;opacity:.6;transition:opacity 0.2s}.delete-review-btn:hover{opacity:1}.modal-body-padded{padding:30px 40px}#ingredient-modal-body{display:flex;flex-direction:column;flex-grow:1;min-height:0}.ingredient-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;margin:1.5rem 0;overflow-y:auto;flex-grow:1}.ingredient-item label{display:flex;align-items:center;gap:.8rem;background:var(--light-gray);padding:10px;border-radius:8px;cursor:pointer}.cooking-assistant-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:var(--background-color);z-index:3000;display:none;padding:2rem}.cooking-assistant-overlay.show{display:flex}.assistant-content{max-width:700px;width:100%;height:100%;margin:0 auto;text-align:center;display:flex;flex-direction:column;position:relative}.assistant-step-counter{font-size:1.5rem;font-weight:700;color:var(--primary-color);flex-shrink:0;padding-top:2rem}.assistant-step-text-wrapper{flex-grow:1;overflow-y:auto;margin:1.5rem 0;padding:0 1rem;min-height:0;display:flex;justify-content:center;align-items:flex-start}.assistant-step-text{font-family:var(--font-heading);font-size:2.5rem;line-height:1.3}.assistant-nav{display:flex;justify-content:center;gap:1rem;margin-top:1rem;flex-shrink:0}.assistant-close-btn{position:absolute;top:0;right:0;background:none;border:none;font-size:2.5rem;cursor:pointer;color:var(--text-color-light);transition:color 0.2s}.assistant-close-btn:hover{color:var(--text-color)}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgb(0 0 0 / .7);backdrop-filter:blur(5px);display:none;justify-content:center;align-items:center;z-index:2000;padding:20px}.modal-overlay.show{display:flex}.modal-content{background:var(--background-color);width:100%;max-width:800px;max-height:90vh;border-radius:var(--border-radius);box-shadow:var(--shadow-strong);position:relative;display:flex;flex-direction:column}.modal-close-btn{position:absolute;top:15px;right:15px;background:var(--light-gray);border:none;width:40px;height:40px;border-radius:50%;font-size:1.5rem;font-weight:700;color:var(--text-color-light);cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:10;transition:all 0.2s}.modal-close-btn:hover{background-color:var(--danger-color);color:#fff;transform:rotate(90deg)}#modal-body{overflow-y:auto}.footer{background-color:var(--white-color);color:var(--text-color-light);padding:4rem 0 0;margin-top:60px;border-top:1px solid var(--light-gray)}.footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:2rem;margin-bottom:3rem}.footer-col h4{font-family:var(--font-heading);color:var(--text-color);margin-bottom:1rem;font-size:1.1rem}.footer-col ul{list-style:none}.footer-col ul li a{color:var(--text-color-light);text-decoration:none;display:block;margin-bottom:.5rem;transition:color 0.2s}.footer-col ul li a:hover{color:var(--primary-color)}.footer-brand{font-family:var(--font-heading);font-size:2rem;font-weight:700;color:var(--secondary-color);text-decoration:none;display:block;margin-bottom:.5rem}.footer-tagline{font-size:.9rem;margin-bottom:1.5rem}.social-links{display:flex;gap:1rem}.social-links a{color:var(--text-color-light);font-size:1.5rem;transition:color 0.2s}.social-links a:hover{color:var(--primary-color)}.newsletter-form{display:flex;margin-top:1rem}.newsletter-form input{flex-grow:1;border:1px solid var(--light-gray);padding:10px;border-radius:8px 0 0 8px;min-width:0}.newsletter-form button{background-color:var(--primary-color);border:none;color:#fff;padding:0 15px;cursor:pointer;border-radius:0 8px 8px 0}.footer-bottom{text-align:center;padding:1.5rem 0;border-top:1px solid var(--light-gray);font-size:.9rem;color:var(--text-color-light)}.small-modal{max-width:400px}.planner-day-selector{display:flex;flex-direction:column;gap:.8rem;margin-top:1.5rem}.planner-day-selector .day-select-btn{width:100%;padding:1rem;background-color:var(--light-gray);border:none;border-radius:8px;font-size:1rem;font-weight:700;text-align:left;cursor:pointer;transition:background-color 0.2s,color 0.2s}.planner-day-selector .day-select-btn:hover{background-color:var(--primary-color);color:var(--white-color)}.mobile-menu-toggle{display:none;flex-direction:column;justify-content:space-between;width:30px;height:24px;background:#fff0;border:none;cursor:pointer;padding:0;z-index:1002}.hamburger-line{width:30px;height:3px;background:var(--secondary-color);border-radius:10px;transition:all 0.3s ease-in-out;position:relative;transform-origin:center}.mobile-menu-toggle.active .hamburger-line:nth-child(1){transform:translateY(10.5px) rotate(45deg)}.mobile-menu-toggle.active .hamburger-line:nth-child(2){opacity:0;transform:translateX(-20px)}.mobile-menu-toggle.active .hamburger-line:nth-child(3){transform:translateY(-10.5px) rotate(-45deg)}@media (max-width:850px){.mobile-menu-toggle{display:flex}.navbar-nav{position:fixed;top:0;right:0;height:100vh;width:300px;background-color:var(--white-color);box-shadow:-10px 0 30px rgb(0 0 0 / .1);flex-direction:column;align-items:flex-start;justify-content:flex-start;padding:6rem 2rem 2rem;gap:2.5rem;transform:translateX(100%);transition:transform 0.4s cubic-bezier(.23,1,.32,1);z-index:1001}.navbar-nav.active{transform:translateX(0)}.nav-link{font-size:1.2rem}.section-title{font-size:1.8rem}.section-header{flex-direction:column;gap:1rem}.hero h1{font-size:2.2rem}.collections-container,.recipe-grid{grid-template-columns:1fr;gap:20px}.collection-card h3{font-size:1.5rem}.recipe-card-title{font-size:1.1rem}.recipe-card-img{height:180px}.recipe-card-content{min-height:130px}.meal-planner-grid{grid-template-columns:repeat(2,1fr);gap:15px}.planner-day{min-height:150px}#gallery-title{text-align:center}.search-and-actions{flex-direction:column;align-items:center;gap:1rem}#ingredient-search-btn{width:fit-content;padding-left:30px;padding-right:30px}.filter-bar{justify-content:center}.filter-group{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;width:100%;padding:1rem;border-radius:var(--border-radius)}.filter-group label{grid-column:1 / -1;text-align:center;margin-bottom:.5rem;padding-left:0}.filter-group .filter-btn{width:100%;text-align:center;background-color:var(--white-color);margin-top:0;padding:12px;border-radius:12px}.filter-group .filter-btn.active{background-color:var(--primary-color);color:var(--white-color)}.footer-grid{grid-template-columns:1fr;text-align:center}.footer-col{align-items:center;display:flex;flex-direction:column}}@media (max-width:500px){.assistant-step-text{font-size:1.8rem}.planner-day-selector .day-select-btn{padding:.7rem;font-size:.9rem}.planner-day-selector{gap:.5rem}.small-modal .modal-body-padded{padding:20px}}.fade-in{opacity:0;transform:translateY(30px);transition:opacity 0.6s ease-out,transform 0.6s ease-out}.fade-in.visible{opacity:1;transform:translateY(0)}.footer-social-links{display:flex;gap:1.5rem;margin-top:1rem}.footer-social-links a{color:var(--text-color);font-size:2rem;transition:color 0.3s ease,transform 0.3s ease}.footer-social-links a:hover{color:var(--primary-color);transform:translateY(-5px)}@media (max-width:850px){.footer-social-links{justify-content:center}}@media (max-width:450px){.review-item-header{flex-wrap:wrap;gap:.5rem}.review-item .rating-stars{font-size:.9rem}#planner-adder-body h3{font-size:1.3rem;padding-right:35px}}