/* FatihFit10 main styles */
:root {
  --turq: #1ABC9C;
  --red: #E74C3C;
  --yellow: #FFD700;
  --brown: #8B4513;
}
*{box-sizing:border-box;font-weight:bold;}
html,body{margin:0;padding:0;height:100%;width:100%;}
body{
  font-family:'Montserrat',sans-serif;
  color:#000;
  background:url('img/fruit-pattern.png') repeat;
  background-size:64px;
  line-height:1.25;
}
#hero{
  position:relative;
  width:100%;
  height:220px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  background:rgba(255,255,255,0.8);
  overflow:hidden;
}
#hero-logo{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0.35;
  pointer-events:none;
}
#slogan{
  position:relative;
  z-index:1;
  font-family:'Amiri',serif;
  font-size:clamp(1.5rem,4vw,2.5rem);
  color:#000;
  text-shadow:0 0 5px rgba(255,255,255,0.8);
  padding:0 1rem;
}
#lang-select-wrapper{
  position:absolute;
  top:10px;
  left:10px;
  z-index:2;
}
#lang-select{
  font-size:0.9rem;
  padding:4px 6px;
  border-radius:4px;
}
#diet-buttons{
  position:fixed;
  top:10px;
  right:10px;
  z-index:5;
  display:flex;
  gap:8px;
}
#diet-buttons button{
  padding:8px 12px;
  font-size:0.8rem;
  border:none;
  border-radius:6px;
  background:var(--turq);
  color:#fff;
  cursor:pointer;
  box-shadow:0 3px 6px rgba(0,0,0,.2);
}
#diet-buttons button:hover{
  transform:scale(1.05);
}
#calculator{
  max-width:420px;
  margin:2rem auto;
  background:rgba(255,255,255,0.92);
  padding:1.25rem;
  border-radius:1rem;
  border:2px solid rgba(0,0,0,.1);
}
#calculator label{
  display:block;
  margin-bottom:1rem;
  text-align:left;
  font-size:1rem;
}
#calculator input,#calculator select{
  width:100%;
  margin-top:0.25rem;
  padding:0.6rem;
  border-radius:8px;
  border:2px solid #ccc;
  font-size:1rem;
}
#calculate-btn{
  width:100%;
  background:var(--turq);
  border:3px solid var(--red);
  border-radius:50px;
  padding:0.9rem;
  font-size:1.2rem;
  color:#fff;
  cursor:pointer;
  box-shadow:0 6px 12px rgba(0,0,0,0.25);
  transition:transform .15s ease;
}
#calculate-btn:hover{transform:scale(1.03);}
#result-box{
  display:none;
  margin-top:1.5rem;
  background:var(--yellow);
  border:6px solid var(--brown);
  padding:1.2rem;
  border-radius:15px;
  text-align:center;
  font-size:1.2rem;
  color:#000;
  box-shadow:0 0 15px rgba(0,0,0,.3);
}
#modal.hidden{display:none;}
#modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.6);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:100;
}
#modal-content{
  position:relative;
  max-width:600px;
  width:90%;
  max-height:80%;
  overflow-y:auto;
  background:#fff;
  padding:2rem 1.5rem 1.5rem;
  border-radius:16px;
  border:4px solid var(--turq);
  box-shadow:0 0 25px rgba(0,0,0,.4);
  text-align:left;
}
#modal-title{
  font-size:1.5rem;
  margin-bottom:1rem;
  text-align:center;
}
#diet-scroll{max-height:60vh;overflow-y:auto;padding-right:0.5rem;}
.diet-card{
  margin-bottom:1.25rem;
  padding:1rem;
  border:2px solid var(--turq);
  border-radius:12px;
  background:rgba(26,188,156,.08);
}
.diet-card h3{margin-bottom:0.5rem;font-size:1.1rem;}
.diet-card ul{margin-left:1.25rem;margin-top:0.5rem;}
.diet-card li{margin-bottom:0.35rem;}
#close-modal{
  position:absolute;
  top:10px;
  right:10px;
  font-size:1.5rem;
  background:var(--red);
  color:#fff;
  border:none;
  border-radius:50%;
  width:32px;
  height:32px;
  cursor:pointer;
  line-height:1;
}
#contact{
  position:fixed;
  bottom:20px;
  left:20px;
  z-index:50;
  background:rgba(255,255,255,.9);
  border:2px solid #ccc;
  border-radius:12px;
  padding:8px 12px;
  display:flex;
  align-items:center;
  gap:6px;
  font-size:0.9rem;
}
#contact img{width:24px;height:auto;}
#contact a{text-decoration:none;color:#000;}

.sr-only{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden;}

@media(max-width:480px){
  #diet-buttons{flex-direction:column;gap:6px;}
  #calculator{margin:1.5rem auto;}
  #slogan{font-size:1.75rem;}
}