/* ===== Reset & Base ===== */
*{margin:0;padding:0;box-sizing:border-box;}
html,body{height:100%;width:100%;overflow-x:hidden; color:#333;}
img{display:block;max-width:100%;height:auto;}
a{text-decoration:none;color:inherit;}

:root{
  --brand:#2b5a75;
  --border:#ddd;
  --panel:#fff;
  --header-bg:#f4f1ee;
  --footer-bg:#f4f1ee;
}

/* ===== Header / Navbar ===== */
.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;
}
.containerbar .navbar{
  max-width:1200px; margin:0 auto; padding:0 16px;
  display:flex; flex-direction:column; align-items:center;
  position:relative;
  min-height:150px;
}
.logo{
  font-family: 'Aboreto', sans-serif;
  font-weight:300; font-style:italic;
  color:#5c5858; text-align:center;
  font-size:50px; margin:8px 0 4px;
}
.adsense-header{width:100%;display:flex;justify-content:center;margin:4px 0 6px;}

/* Menü */
.menu-toggle{
  display:none; border:0; background:transparent; cursor:pointer;
  padding:8px; position:absolute; top:10px; right:10px; z-index:4000;
}
.menu-toggle .bar{
  display:block; width:26px; height:3px; background:#333; margin:5px 0; border-radius:2px;
  transition:.25s;
}
.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 a:hover{ background: rgb(66, 66, 66); color:#fff; }

/* ===== Cards ===== */
.card-container{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:16px; margin:20px auto; max-width:1100px; padding:0 12px;
}
.card{
  background:var(--panel); border:1px solid var(--border);
  border-radius:10px; overflow:hidden;
  box-shadow:0 1px 6px rgba(0,0,0,.06);
  transition:.2s;
}
.card:hover{transform:translateY(-3px);box-shadow:0 3px 10px rgba(0,0,0,.1);}
.card-img img{width:100%;height:auto;}
.cardtext{padding:10px 14px;text-align:center;}
.cardtext h2{font-size:18px;margin-bottom:6px;color:var(--brand);font-family:'Nunito',sans-serif;}
.cardtext p{font-size:14px;margin-bottom:8px;color:#555;font-family:'Nunito',sans-serif;}
.cardtext a{
  display:inline-block;margin-top:6px;padding:6px 14px;border:1px solid #aaa;
  border-radius:6px; font-size:14px; color:#555; background:#fff; transition:.2s;
}
.cardtext a:hover{filter:brightness(.95);}

/* ===== Popup video ===== */
.popup {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(0, 0, 0, 0.8);
  padding: 20px;
  border-radius: 8px;
  z-index: 1000;
  width: 80%;
  max-width: 600px;
}

.popup video {
  width: 100%;
  height: auto;
}

.popup .close {
  position: absolute;
  top: 10px;
  right: 20px;
  font-size: 24px;
  color: #fff;
  cursor: pointer;
}


/* ===== Projects ===== */
.araBaşlık h2{
  text-align:center;margin:2rem 0 1rem;font-size:28px;color:var(--brand);
  font-family:'Nunito',sans-serif;
}
.container-proje{
  display:flex;flex-wrap:wrap;justify-content:center;gap:20px;
}
.card-proje{
  display:block;width:min(680px,94%);border-radius:12px;
  overflow:hidden;position:relative;box-shadow:0 2px 8px rgba(0,0,0,.08);
}
.projebox img{width:100%;display:block;}
.projetext-overlay{
  position:absolute;left:50%;bottom:16px;transform:translateX(-50%);
  width:90%;padding:10px 14px;text-align:center;
  background:rgba(0,0,0,.48);color:#fff;border-radius:14px;
}
.projetext-overlay h4{margin:0;font-size:18px;font-family:'Nunito',sans-serif;}

/* ===== Footer ===== */
footer{margin:2rem 0 1.2rem;text-align:center;color:#666;font-size:14px;}

/* ===== AdSense ===== */
ins.adsbygoogle{display:block;margin:24px auto;width:100%;max-width:100%!important;min-height:120px;}
@media (max-width:600px){ ins.adsbygoogle{min-height:90px;} }

/* ===== Responsive ===== */
@media (max-width:992px){
  .logo{font-size:26px;}
  .menu-toggle{display:inline-block;}
  .nav-links{
    position:absolute; top:100%; left:0; right:0;
    display:none; flex-direction:column; align-items:center;
    background:rgba(255,255,255,.95); border-bottom:1px solid #eee;
    box-shadow:0 6px 16px rgba(0,0,0,.08); z-index:2000;
  }
  .nav-links.active{display:flex;}
  .nav-links li{width:100%;border-top:1px solid #f2f2f2;}
  .nav-links li:first-child{border-top:0;}
  .nav-links li a{display:block;padding:10px;font-size:16px;color:#312d2d;}
  body.nav-open{overflow:hidden;}
}

  @media (max-width: 600px) {
  .logo { font-size: 25px; margin-top: 30px; }
  header { height: 340px; }

  .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; }

  .card-container{grid-template-columns:1fr; margin-top: 100px;}
  .projetext-overlay h4{font-size:16px;}
}
@media (min-width:601px) and (max-width:1024px){
  .logo{font-size:34px;}
  .card-container{grid-template-columns:repeat(2,1fr);}
}
@media (min-width:1025px) and (max-width:1919px){
  .logo{font-size:46px;}
  .card-container{grid-template-columns:repeat(3,1fr);}
}
@media (min-width:1920px){
  .containerbar,.main-content{max-width:1600px;}
  .logo{font-size:56px;}
  .cardtext h2{font-size:20px;}
  .araBaşlık h2{font-size:32px;}
  .projetext-overlay h4{font-size:20px;}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important;}
}