@font-face {
    font-family: 'Hitchcut';
    src: url('../hitchcut.ttf') format('truetype');
}

:root{
  --cream:#F7E9C2;
  --cream-2:#FBF2DC;
  --ink:#2C2013;
  --ink-soft:#6b5a3f;
  --orange:#F6A623;
  --orange-2:#F2911A;
  --yellow:#F6C94A;
  --green-dark:#128A5E;
  --green-light:#AEE06A;
  --cyan:#57D6E4;
  --terracotta:#E07A50;
  --red:#EF5B4E;
  --card-shadow: 0 6px 0 rgba(44,32,19,0.15);
  --radius: 22px;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:'Quicksand',sans-serif;
  background:var(--cream);
  color:var(--ink);
  overflow-x:hidden;
  min-height:100vh;
  -webkit-tap-highlight-color:transparent;
}
h1,h2,h3,.display{font-family:'Baloo 2',sans-serif;}
button{font-family:'Quicksand',sans-serif;border:none;cursor:pointer;}
.app{
  max-width:480px;
  margin:0 auto;
  min-height:100vh;
  position:relative;
  background:var(--cream);
  box-shadow:0 0 40px rgba(0,0,0,0.15);
}

/* ---------- SCREEN BASE ---------- */
.screen{ display:none; min-height:100vh; position:relative; animation:fadeIn .4s ease; }
.screen.active{display:block;}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}

/* ---------- START SCREEN ---------- */
#screen-start{
  background:var(--cream);
  display:none;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-height:100vh;
  padding:32px;
  text-align:center;
}
#screen-start.active{display:flex;}

.start-title { font-family: 'Hitchcut', sans-serif; font-size: 4.5rem; line-height: 0.7; margin: 0; color: var(--ink); letter-spacing: 2px; }
.start-sub { font-family: 'Hitchcut', sans-serif; font-size: 3rem; line-height: 0.7; color: var(--orange-2); margin: 0 0 20px 0; }
.start-hint{ color:var(--ink-soft); font-size:1rem; font-weight:600; margin-bottom:12px; }
.lang-btn{ width:100%; max-width:320px; padding:16px 20px; border-radius:18px; font-weight:700; font-size:1.1rem; margin:8px 0; transition:transform .15s ease; box-shadow:var(--card-shadow); }
.lang-btn:active{transform:scale(.96) translateY(3px);box-shadow:0 2px 0 rgba(44,32,19,0.15);}
.lang-btn.yellow{background:var(--yellow);color:var(--ink);}
.lang-btn.green{background:var(--green-light);color:var(--ink);}

/* ---------- HOME HEADER ---------- */
.header{
  position:relative; padding:38px 20px 26px; text-align:center; overflow:hidden; cursor:pointer; user-select:none;
  background: radial-gradient(circle at 15% 20%, rgba(255,255,255,.35) 0 40px, transparent 41px), radial-gradient(circle at 85% 15%, rgba(255,255,255,.3) 0 30px, transparent 31px), var(--cream);
}
.header-image { max-width: 80%; height: auto; position: relative; z-index: 3; }

/* ---------- FIREWORKS CAKE EXPLOSION ---------- */
.particle {
  position: absolute; font-size: 1.8rem; pointer-events: none; z-index: 100;
  animation: explode 0.8s cubic-bezier(0.15, 0.9, 0.3, 1) forwards; 
}
@keyframes explode {
  0% { transform: translate(-50%, -50%) scale(0.2) rotate(0deg); opacity: 1; }
  60% { opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) scale(1.2) rotate(var(--rot)); opacity: 0; }
}

/* ---------- SEARCH ---------- */
.search-wrap{padding:0 20px;margin-top:6px;position:relative;}
.search-bar{ display:flex; align-items:center; background:var(--orange); border-radius:30px; padding:12px 18px; box-shadow:var(--card-shadow); }
.search-bar input{ flex:1; border:none; background:transparent; outline:none; font-size:1rem; font-weight:600; color:var(--ink); font-family:'Quicksand',sans-serif; }
.search-bar input::placeholder{color:rgba(44,32,19,.55);}
.cake-icon{font-size:1.4rem;margin-left:8px;transition:transform .25s;}

/* Search Results Dropdown */
.search-results { display: none; position: absolute; top: 100%; left: 20px; right: 20px; background: var(--cream-2); border-radius: 24px; padding: 20px; margin-top: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.15); z-index: 20; max-height: 50vh; overflow-y: auto; }
.search-results.show { display: block; animation: slideUp .2s ease; }
.sr-title { font-family: 'Baloo 2', sans-serif; font-size: 1.2rem; margin-bottom: 12px; font-weight: 700; }
.sr-empty { color: var(--ink-soft); font-weight: 600; text-align: center; margin-bottom: 12px; }
.sr-add { display: block; background: #fff; border-radius: 14px; padding: 14px 16px; text-align: center; font-weight: 700; cursor: pointer; color: var(--green-dark); box-shadow: 0 2px 0 rgba(44,32,19,0.05); transition: transform .15s; }
.sr-add:active { transform: scale(0.96); }

/* ---------- CATEGORY FILTERS ---------- */
.filter-wrap { display: flex; gap: 10px; padding: 18px 20px 0; overflow-x: auto; -ms-overflow-style: none; scrollbar-width: none; }
.filter-wrap::-webkit-scrollbar { display: none; }
.filter-btn { background: #fff; color: var(--ink-soft); font-weight: 700; font-size: 0.95rem; padding: 10px 18px; border-radius: 20px; white-space: nowrap; box-shadow: 0 4px 0 rgba(44,32,19,0.06); transition: all 0.2s ease; }
.filter-btn:active { transform: scale(0.95); }
.filter-btn.active { background: var(--yellow); color: var(--ink); box-shadow: 0 4px 0 rgba(44,32,19,0.2); transform: translateY(-2px); }

/* ---------- CAROUSEL ---------- */
.carousel-wrap { margin-top:22px; overflow:hidden; }
.marquee-row { width: 100%; padding: 6px 0; overflow: hidden; }
.row-right { mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%); -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%); }
.row-left { mask-image: linear-gradient(to right, transparent 0%, #000 5%, #000 95%, transparent 100%); -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 5%, #000 95%, transparent 100%); }
.track { display: flex; width: max-content; gap: 14px; }
.row-left .track { animation: scrollLeft 15s linear infinite; }
.row-right .track { animation: scrollRight 15s linear infinite; }
@keyframes scrollLeft{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@keyframes scrollRight{from{transform:translateX(-50%);}to{transform:translateX(0);}}

.photo-card{ width:104px; height:104px; border-radius:18px; display:flex; align-items:center; justify-content:center; flex-shrink:0; box-shadow:var(--card-shadow); cursor:pointer; transition:transform .15s ease, opacity .3s ease; overflow:hidden; font-size: 2.5rem; }
.photo-card img{width:100%;height:100%;object-fit:cover;border-radius:18px;}
.photo-card:active{transform:scale(.92);}
.marquee-row.mid .photo-card{width:126px;height:126px;}

.info-text{ padding:22px 26px 6px; text-align:center; color:var(--ink-soft); font-weight:600; font-size:.92rem; line-height:1.5; }
.gs-label-wrap{text-align:center;margin:18px 0 14px;}
.gs-label{ display:inline-block; background:var(--red); color:#fff; font-family:'Baloo 2'; font-size:1.2rem; padding:10px 26px; border-radius:16px; box-shadow:var(--card-shadow); }

/* ---------- FOOTER ---------- */
.footer{ position:relative; width:100%; margin-top:24px; padding:40px 20px 100px 20px; }
.footer-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.menu-grid{ position: relative; z-index: 10; }
.menu-row{display:flex;gap:10px;margin-bottom:12px;}
.menu-btn{ flex:1; border-radius:20px; padding:16px 8px; text-align:center; font-weight:700; font-size:.95rem; color:var(--ink); box-shadow:var(--card-shadow); transition:transform .15s; line-height:1.25; }
.menu-btn:active{transform:scale(.95) translateY(3px);box-shadow:0 2px 0 rgba(44,32,19,.15);}
.menu-btn.mb-green-light{background:var(--green-light);}
.menu-btn.mb-green-dark{background:var(--green-dark);color:#fff;}
.menu-btn.mb-cyan{background:var(--cyan);}
.menu-btn.mb-terracotta{background:var(--terracotta);color:#fff;}
.menu-btn.mb-yellow{background:var(--yellow);}

/* ---------- MODALS ---------- */
.modal-overlay{ position:fixed; inset:0; background:rgba(44,32,19,.45); display:none; align-items:flex-end; justify-content:center; z-index:50; }
.modal-overlay.show{display:flex;animation:fadeIn .2s ease;}

.modal-sheet{ background:var(--cream-2); width:100%; max-width:480px; height:92vh; display: flex; flex-direction: column; border-radius:26px 26px 0 0; padding:16px 20px 20px; animation:slideUp .28s ease; }
@keyframes slideUp{from{transform:translateY(40px);opacity:0;}to{transform:translateY(0);opacity:1;}}

.modal-handle{width:44px;height:5px;background:#d8c69a;border-radius:4px;margin:0 auto 14px;flex-shrink:0;}
.modal-title{font-family:'Baloo 2';font-size:1.4rem;margin:0 0 14px;display:flex;justify-content:space-between;align-items:center;flex-shrink:0;}
.modal-close{background:var(--red);color:#fff;border:none;width:30px;height:30px;border-radius:50%;font-weight:700;font-size:1rem;line-height:1;cursor:pointer;}
.modal-back {background:none;border:none;font-size:1.5rem;color:var(--ink);cursor:pointer;padding:0;line-height:1;font-weight:bold;}

.modal-content-scroll { flex: 1; overflow-y: auto; padding-top: 5px; padding-bottom: 20px; -ms-overflow-style: none; scrollbar-width: none; }
.modal-content-scroll::-webkit-scrollbar { display: none; }
.empty-state{text-align:center;color:var(--ink-soft);padding:30px 10px;font-weight:600;}

/* Kartu putih */
.list-card { background: #fff; border-radius: 16px; padding: 16px; margin-bottom: 12px; cursor: pointer; box-shadow: 0 3px 0 rgba(44,32,19,0.04); display: flex; flex-direction: column; transition: transform .1s; }
.list-card:active { transform: scale(0.98); }
.lc-title { font-weight: 700; font-size: 1.1rem; color: var(--ink); margin-bottom: 4px; }
.lc-sub { font-size: 0.85rem; color: var(--ink-soft); font-weight: 600; line-height: 1.4; }

/* ---------- RECIPE DETAIL ---------- */
.recipe-header-img { width: 100%; height: 200px; border-radius: 20px; display: flex; align-items: center; justify-content: center; font-size: 5rem; margin-bottom: 16px; box-shadow: inset 0 -10px 20px rgba(0,0,0,0.05); }
.brand-chip { display: inline-block; background: var(--green-dark); color: #fff; padding: 6px 14px; border-radius: 20px; font-size: 0.85rem; font-weight: 700; margin-bottom: 16px; }
.recipe-section-title { font-family: 'Baloo 2', sans-serif; font-size: 1.25rem; margin: 16px 0 12px; }
.ingredient-row { background: #fff; padding: 14px 18px; border-radius: 14px; display: flex; justify-content: space-between; margin-bottom: 10px; font-weight: 700; font-size: 0.95rem; box-shadow: 0 2px 0 rgba(44,32,19,0.04); }
.step-row { display: flex; gap: 14px; margin-bottom: 16px; align-items: flex-start; }
.step-num { background: var(--orange-2); color: #fff; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; flex-shrink: 0; font-size: 0.95rem; }
.step-text { font-weight: 600; line-height: 1.5; color: var(--ink); padding-top: 3px; }
.recook-btn { width: 100%; background: var(--green-dark); color: #fff; padding: 18px; border-radius: 22px; font-weight: 800; font-size: 1.1rem; margin-top: 24px; box-shadow: 0 4px 0 rgba(0,0,0,0.15); }
.recook-btn.added { background: var(--red); }