html { scroll-behavior: smooth; }

body{
  margin: 0;
  font-family: Arial, sans-serif;
  background-color: #1F6B4A; /* Yeşil tema */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* =========================
   HEADER
   ========================= */
header{
  background-color: #C72831; /* Kırmızı */
  color: #EDD8A0;            /* Krem */
  padding: 28px 20px 24px;   /* biraz büyüttük */
  text-align: center;
  border-bottom: 1px solid #ddd;
}

/* 🔴 LOGO BÜYÜTÜLDÜ */
header img{
  width: 260px;              /* eskisi 200px */
  max-width: 90vw;
  border-radius: 28px;
  display: block;
  margin: 0 auto 14px;
}

nav{
  margin-top: 10px;
}

nav a{
  color: #EDD8A0;
  margin: 0 16px;
  text-decoration: none;
  font-size: 18px;
  font-weight: bold;
  display: inline-block;
}

nav a:hover{
  color: #fff;
  background-color: #1F6B4A;
  padding: 4px 8px;
  border-radius: 8px;
}

/* =========================
   ORTA BEYAZ KUTU
   ========================= */
.content-wrapper{
  background-color: #ffffff;
  flex: 1;
  display: flex;
  justify-content: center;
}

/* ⬇️ BEYAZ ALAN DARALTILDI */
main{
  width: 100%;
  max-width: 760px;          /* eskisi 900px */
  padding: 22px 16px 32px;
}

h1, h2{
  color: #C72831;
  margin: 12px 0;
}

p, li{
  color: #000000;
  line-height: 1.5;
}

a{
  color: #1F6B4A;
  font-weight: bold;
}

a:hover{
  text-decoration: underline;
}

/* =========================
   INSTAGRAM GRID
   ========================= */
.ig-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
  margin-top: 12px;
}

/* 🔴 Instagram postu için DIŞ ÇERÇEVE */
.ig-card{
  border: 2px solid #C72831;
  border-radius: 14px;
  padding: 10px;
  background: #fff;
}

/* 🔧 Instagram embed’in kendi ölçülerini bastır */
.ig-card blockquote.instagram-media{
  margin: 0 !important;
  width: 100% !important;
  min-width: 0 !important;
}

/* Instagram iframe tam sarsın */
.ig-card iframe{
  width: 100% !important;
  border-radius: 10px;
}

/* =========================
   MENÜ GÖRSELİ
   ========================= */
.menu-img{
  width: 100%;
  max-width: 760px;          /* beyaz alanla uyumlu */
  border: 2px solid #C72831;
  border-radius: 14px;
  display: block;
  margin: 12px auto 0;
}

/* =========================
   İLETİŞİM QR
   ========================= */
.qr{
  width: min(340px, 100%);
  border: 2px solid #C72831;
  border-radius: 14px;
  display: block;
  margin: 12px 0 0;
}

/* =========================
   FOOTER
   ========================= */
footer{
  text-align: center;
  font-size: 14px;
  color: #EDD8A0;
  background-color: #1F6B4A;
  padding: 36px 10px 22px;
}

/* =========================
   MOBİL
   ========================= */
@media (max-width: 600px){

  /* Logo mobilde de büyük ama taşmaz */
  header img{
    width: 180px;
  }

  nav a{
    font-size: 16px;
    margin: 0 8px;
  }

  main{
    max-width: 92%;          /* mobilde kenarlardan nefes */
    padding: 20px 10px;
  }

  h1, h2{
    text-align: center;
  }
}