/* =========================
   GENEL SIFIRLAMA & TEMEL
   ========================= */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { 
  height: 100%; 
  overflow-x: hidden; 
}
body {
  font-family: 'Roboto', sans-serif;
  background-color: #fdfdfd;
  color: #333;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }

:root{
  --brand:#2b5a75;
  --muted:#7b3f00;
  --panel:#ffffff;
  --footer-bg:#f4f1ee;
  --border:#ccc;
}

/* Güvenli alan (çentikli cihazlar) */
@supports(padding:max(0px)) {
  body { 
    padding-left: max(0px, env(safe-area-inset-left)); 
    padding-right: max(0px, env(safe-area-inset-right)); 
  }
}

/* =========================
   HEADER / NAVBAR / ADSENSE
   ========================= */
.containerbar{
  position: sticky; top: 0; z-index: 1000;
  border-bottom: 1px solid var(--border);
  box-shadow: 0 2px 5px rgba(0,0,0,0.08);
  padding: 8px 0;
  overflow: visible; /* açılır menü taşmasın */
}

.navbar{
  max-width: 1200px; margin: 0 auto; padding: 0 16px;
  display: flex; flex-direction: column; align-items: center;
  position: relative; /* açılır menü referansı */
}

.logo{
  font-family:'Aboreto', system-ui;
  font-weight:300;font-style:italic;
  color:#666565;text-align:center;
  font-size:48px;margin:8px 0 4px;
}

.adsense-header{ 
  width:100%; display:flex; justify-content:center; 
  margin: 4px 0 6px; 
}
.adsense-header ins.adsbygoogle{ width:100%; }

/* Menü (default: desktop/tablet geniş) */
.nav-links{
  list-style: none;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 14px;
  margin: 6px 0 4px; padding: 0;
}
.nav-links li a{
  display: block;
  font-family:'Aboreto', system-ui;
  font-style:italic;
  font-weight:300;
  color:#312d2d;
  font-size:18px;
  padding:6px 10px;
  border-radius:6px;
  transition:background-color .2s ease;
}
.nav-links li a:hover{ background: rgb(66, 66, 66); color:#fff; }

/* Hamburger */
.menu-toggle{
  display: none;
  border: 0; background: transparent; cursor: pointer;
  padding: 8px; margin: 6px 0 4px;
  touch-action: manipulation;
}
.menu-toggle .bar{
  width: 26px; height: 3px; background: #333; margin: 5px 0;
  transition: transform .25s ease, opacity .25s ease;
}

/* =========================
   ANA İÇERİK
   ========================= */
.main-content{ max-width: 1200px; margin: 1.6rem auto; padding: 0 1rem; }

/* Kart Grid */
.container{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  margin-top: 1rem;
}
.card-beginner{
  background: var(--panel);
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.10);
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}
.card-beginner:hover{ transform: translateY(-4px); box-shadow: 0 6px 16px rgba(0,0,0,0.12); }
.imgbox img{ width: 100%; height: auto; }
.info-beginner{ padding: 1rem; }
.info-beginner h2{ font-size: 1.25rem; margin-bottom: .5rem; color: var(--brand); }
.text{ font-size: .95rem; margin-bottom: 1rem; }
.btn{
  padding: .6rem 1.2rem; background: var(--brand); color:#fff;
  border:0; border-radius: 5px; cursor: pointer; font-weight: 700;
}
.btn:hover{ filter: brightness(0.95); }

/* Ara Başlık */
.araBaslik h2{
  text-align: center;
  margin: 3rem 0 1rem;
  font-size: 2.3rem;
  color: var(--brand);
}

/* Blog alanı */
.container2{
  display: flex; flex-wrap: wrap; gap: 2rem;
  justify-content: center; margin-top: 2rem;
}
.blog-card{ max-width: 320px; text-align: center; flex: 1 1 280px; }
.blog-card img{ width: 100%; border-radius: 10px; }
.blog-card h4{ font-size: 1rem; margin-top: .6rem; color: var(--muted); }

/* =========================
   FOOTER
   ========================= */
footer{
  background: var(--footer-bg);
  text-align: center; padding: 1.4rem 1rem; margin-top: 4rem;
  font-size: .95rem; color: #555; border-top: 1px solid var(--border);
}
footer .social-icons{ margin-bottom: .6rem; }
footer .social-icons a{ margin: 0 .5rem; font-size: 22px; color: var(--brand); }
footer .social-icons a:hover{ filter: brightness(.9); }

/* =========================
   ADSENSE GENEL BLOKLAR
   ========================= */
ins.adsbygoogle{
  display:block;
  margin: 24px auto;
  text-align:center;
  width: 100%;
}
.adsense-gap{ height: 16px; }

/* =========================
   RESPONSIVE KIRILIMLAR
   ========================= */

/* --- Mobil + Tablet (≤ 992px) --- */
@media (max-width: 992px){
  
  .logo { font-size: 25px; margin-top: 30px; }
  header { height: 420px; }

  .menu-toggle {
    display: block;
    position: absolute; right: 16px; top: 16px;
    margin: 0;
  }

  .nav-links {
    display: none;
    flex-direction: column; align-items: center;
    position: absolute; top: 80px; left: 50%; transform: translateX(-50%);
    width: 90%;
    background: rgba(255,255,255,.95);
    border: 1px solid #e5e5e5; border-radius: 12px;
    box-shadow: 0 10px 24px rgba(0,0,0,.12);
    padding: 10px; gap: 10px; z-index: 10;
    margin: 0;
  }
  .nav-links.active { display: flex; }
  .nav-links li { margin: 6px 0; }
  }
  /* Menü açıkken scroll kilidi */
  body.nav-open{ overflow: hidden; }

  /* Blog kartı tek sütun */
  .container2{ flex-direction: column; align-items: center; }
  .blog-card{ width: 92%; max-width: 420px; }

  .main-content{ margin-top: 160px; }

  .araBaşlık h2{ font-size: 1.9rem; }

  .adsense-header{ margin: 4px 0 6px; }

  #menuToggle .bar{
    display: block;
    width: 26px;
    height: 3px;
    background: #111;      
    margin: 5px 0;
    border-radius: 2px;
  }
  #menuToggle.menu-toggle{
    padding: 6px;
    background: transparent;
    border: 0;
  }


/* --- Desktop (993px – 1919px) --- */
@media (min-width: 993px) and (max-width: 1919px){
  .main-content{ max-width: 1200px; }
  .araBaşlık h2{ font-size: 2.2rem; }
}

/* --- Geniş Ekran / 4K / Akıllı TV (≥ 1920px) --- */
@media (min-width: 1920px){
  .navbar{ max-width: 1600px; }
  .main-content{ max-width: 1600px; }
  .container{ gap: 2.2rem; }
  .logo{ font-size: 32px; }
  .info-beginner h2{ font-size: 1.35rem; }
  .araBaşlık h2{ font-size: 2.6rem; }
  .blog-card{ max-width: 380px; }
  ins.adsbygoogle{ max-width: 1200px; }
}

/* --- YATAY TAŞMA FİX (özellikle AdSense kaynaklı) --- */
.adsense-header,
.adsense-header ins.adsbygoogle {
  display: block !important;
  max-width: 100% !important;
  width: 100% !important;
  overflow: hidden !important;
}
.adsense-header ins.adsbygoogle iframe {
  max-width: 100% !important;
  width: 100% !important;
  display: block !important;
}
ins.adsbygoogle { max-width: 100% !important; width: 100% !important; overflow: hidden !important; }
ins.adsbygoogle iframe { max-width: 100% !important; width: 100% !important; }