/* ===========================================================
   BIG BROAST – ANA CSS DOSYASI
   ===========================================================
   İçerik bölümleri

   1  RESET / GENEL AYARLAR
   2  HEADER
   3  BANNER (ANA SAYFA)
   4  HERO ALANI
   5  FOOTER
   6  MODAL
   7  SİPARİŞ SAYFASI
   8  KVKK
   9  STICKY SEPET
   10 BAŞARILI SİPARİŞ POPUP
   11 MOBİL UYUM
   =========================================================== */


/* ===========================================================
   1 RESET / GENEL AYARLAR
   =========================================================== */

*{
margin:0;
padding:0;
box-sizing:border-box;
}

html,body{
font-family:"Poppins",sans-serif;
background:#111;
color:#fff;
scroll-behavior:smooth;
min-height:100%;
}

a{
text-decoration:none;
color:inherit;
transition:0.2s;
}

a:hover{
opacity:.8;
}


/* ===========================================================
   HEADER
   Amaç:
   - Menü sayfasındaki başarılı header görünümünü tüm siteye taşımak
   - Logo solda
   - Menü sağda
   - Yazılar daha güçlü ve profesyonel
   =========================================================== */

.site-header{

position:sticky;
top:0;
z-index:9999;

width:100%;
display:flex;
justify-content:space-between;
align-items:center;
padding:15px 40px;
background:#111;

}

.site-header a{
  color:#fff;
  text-decoration:none;
  font-weight:600;
}

.logo-area{
  display:flex;
  align-items:center;
}

.logo{
  height:45px;
  width:auto;
  display:block;
}

.main-nav{
  display:flex;
  align-items:center;
}

.main-nav a{
  margin-left:25px;
  color:#fff;
  text-decoration:none;
  font-weight:600;
}

.main-nav a:hover{
  color:#ff5e1f;
}

.socials{
  display:flex;
  align-items:center;
  gap:14px;
}

.socials img{
  width:22px;
  height:22px;
  display:block;
  transition:transform .2s ease, opacity .2s ease;
}

.socials a:hover img{
  transform:scale(1.08);
  opacity:.85;
}



/* ===========================================================
   ANA SAYFA BANNER
   Amaç:
   Banner yüksekliğini küçültmek
   Resim kırpılmadan oranlı küçülür
   =========================================================== */

.home-banner {

  padding-top: 40px;

  background: #ffffff;

  display: flex;
  justify-content: center;
  align-items: center;

}

.banner-img {

  width: 100%;
  max-width: 1400px;

  height: auto;

  transform: scale(0.90);

  display: block;

}



/* ===========================================================
   4 HERO ALANI
   =========================================================== */

.hero{

height:100vh;

background:url("./hero.png") center / cover no-repeat;

display:flex;
align-items:center;
justify-content:center;

text-align:center;

position:relative;

}

.hero .overlay{

position:absolute;
inset:0;

background:rgba(0,0,0,.45);

}

.hero-content{

position:relative;

max-width:800px;
padding:0 20px;

}

.hero-content h1{

font-size:3.2rem;
font-weight:700;

letter-spacing:2px;

margin-bottom:1rem;

}

.hero-content p{

font-size:1.2rem;
line-height:1.6;

margin-bottom:2rem;

color:#eee;

}

.button{

display:inline-block;

background:#ff5e1f;

padding:.9rem 2rem;

border-radius:6px;

font-weight:600;

}

.button:hover{

background:#e24c14;

transform:scale(1.03);

}



/* ===========================================================
   5 FOOTER
   =========================================================== */

.site-footer{

background:#0e0e0e;

color:#ccc;

text-align:center;

padding:1rem 0;

font-size:.9rem;

border-top:1px solid rgba(255,255,255,.08);

}

.site-footer a{

color:#ff5e1f;

font-weight:500;

}

.site-footer a:hover{
text-decoration:underline;
}



/* ===========================================================
   6 MODAL
   =========================================================== */

.modal{

position:fixed;

top:0;
left:0;

width:100%;
height:100%;

background:rgba(0,0,0,.6);

display:none;

align-items:center;
justify-content:center;

z-index:2000;

}

.modal-content{

background:#1a1a1a;

padding:2rem 2.5rem;

border-radius:8px;

max-width:380px;

text-align:center;

border:1px solid #ff5e1f;

}

.modal-content h2{

color:#ff5e1f;

margin-bottom:1rem;

}

.modal-content p{

margin-bottom:1.5rem;

}

.modal-content button{

background:#ff5e1f;

border:none;

padding:.7rem 1.6rem;

border-radius:5px;

font-weight:600;

cursor:pointer;

}

.modal-content button:hover{
background:#e24c14;
}



/* ===========================================================
   7 SİPARİŞ SAYFASI
   =========================================================== */

.order-page{

display:flex;
flex-wrap:wrap;

justify-content:space-between;

padding:60px 5%;

background:#fffaf6;

color:#222;

}

.menu-section{

flex:1 1 60%;
padding-right:40px;

}

.menu-list{

display:grid;

grid-template-columns:repeat(auto-fill,minmax(240px,1fr));

gap:20px;

}

.menu-item{

background:#fff;

border:1px solid #eee;

border-radius:8px;

text-align:center;

padding:15px;

}

.menu-item img{

width:100%;
height:160px;

object-fit:cover;

border-radius:6px;

margin-bottom:10px;

}

.menu-item .price{

font-weight:600;

color:#c64a00;

}

.add-to-cart{

margin-top:10px;

background:#c64a00;

color:#fff;

border:none;

padding:8px 14px;

border-radius:5px;

cursor:pointer;

font-weight:600;

}

.add-to-cart:hover{
background:#e06500;
}



/* ===========================================================
   8 KVKK
   =========================================================== */

.kvkk-check{

margin-top:15px;

font-size:14px;

color:#555;

display:flex;

align-items:flex-start;

}

.kvkk-check input{
margin-right:8px;
}

.kvkk-check a{

color:#ff5e1f;

font-weight:600;

}



/* ===========================================================
   9 STICKY SEPET
   =========================================================== */

@media(min-width:901px){

.order-section{

position:sticky;

top:90px;

align-self:flex-start;

}

}

@media(max-width:900px){

.order-section{
position:static;
}

}



/* ===========================================================
   10 BAŞARILI SİPARİŞ POPUP
   =========================================================== */

.success-popup{

position:fixed;

top:0;
left:0;

width:100%;
height:100%;

background:rgba(0,0,0,.6);

display:flex;

align-items:center;
justify-content:center;

z-index:5000;

}

.success-popup .popup-content{

background:#1a1a1a;

padding:2rem 2.5rem;

border-radius:8px;

border:1px solid #ff5e1f;

text-align:center;

}

.success-popup button{

background:#ff5e1f;

border:none;

padding:.7rem 1.6rem;

border-radius:5px;

cursor:pointer;

}

.success-popup button:hover{
background:#e24c14;
}



/* ===========================================================
   11 MOBİL UYUM
   =========================================================== */

@media(max-width:900px){

.order-page{
flex-direction:column;
}

.menu-section{
padding-right:0;
margin-bottom:40px;
}

.site-header{

flex-direction:column;

height:auto;

padding:1rem;

}

.main-nav{

flex-wrap:wrap;

justify-content:center;

margin-top:.5rem;

}

.hero-content h1{
font-size:2.2rem;
}

.hero-content p{
font-size:1rem;
}

}
/* ===========================================================
ANA SAYFA TANITIM ALANI
=========================================================== */

.about-section{

background:#fff;
color:#111;

padding:80px 5%;

}

.about-container{

max-width:1200px;
margin:auto;

display:flex;
align-items:center;
gap:60px;

}

.about-image img{

width:100%;
max-width:500px;

}

.about-text{

max-width:500px;

}

.about-text h2{

font-size:38px;
color:#e63946;
margin-bottom:20px;

}

.about-text p{

font-size:17px;
line-height:1.7;
margin-bottom:20px;
color:#333;

}
/* ===========================================================
   ANA SAYFA BİLGİ BARLARI
   Amaç:
   - Banner ile alt içerik arasına 3 vurgu kutusu eklemek
   - Masaüstünde yan yana
   - Mobilde alt alta
   =========================================================== */
.info-bars {
  background: #ffffff;
  padding: 40px 5% 20px;
}

.info-bars-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  gap: 28px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.info-bar {
  min-width: 280px;
  padding: 26px 36px;
  border-radius: 999px;
  text-align: center;
  color: #ffffff;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}

.info-bar.red {
  background: #d72638;
}

.info-bar.orange {
  background: #ff7a00;
}

.info-bar-top {
  display: block;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 6px;
  letter-spacing: 0.3px;
}

.info-bar-title {
  display: block;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
}

/* ===========================================================
   MOBİL: bilgi barları
   =========================================================== */
@media (max-width: 900px) {
  .info-bars {
    padding: 30px 5% 10px;
  }

  .info-bars-container {
    gap: 16px;
  }

  .info-bar {
    width: 100%;
    min-width: unset;
    border-radius: 24px;
    padding: 20px 18px;
  }

  .info-bar-title {
    font-size: 18px;
  }
}