/* ==========================================================================
   Dizayn45 Optimized Stylesheet
   ========================================================================= */

/* --------------------
   Global Reset & Box Sizing
-------------------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* --------------------
   Root Variables
-------------------- */
:root {
  --color-primary: #0d6efd;
  --color-primary-dark: #0b5ed7;
  --color-text: #343a40;
  --color-light-bg: #f5f7fa;
  --color-alt-bg: #e9ecef;
  --overlay-bg: rgba(0, 0, 0, 0.65);
}

/* ====================
   Global Layout
==================== */
html, body {
  height: 100%;
  font-family: 'Inter', sans-serif;
  color: var(--color-text);
  background: var(--color-light-bg) !important;
  background-attachment: fixed;
  background-size: cover;
}

.wrapper { min-height: 100%; display: flex; flex-direction: column; }
.main-content { flex: 1; }

/* Animations */
@keyframes float { 0%,100%{transform:translateY(0) scale(1);} 50%{transform:translateY(-30px) scale(1.05);} }

/* ====================
   Header & Navbar
==================== */
header, nav.navbar {
  position: relative;
  z-index: 1;
  background: url('/assets/images/arkaplan.jpg') center/cover no-repeat;
  color: #fff;
}
header { padding: 60px 0; }
header::before, nav.navbar::before {
  content: ''; position: absolute; inset: 0;
  background-color: rgba(0,0,0,0.5); z-index: 0;
}
.header-container, nav.navbar .container {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: space-between;
}
.navbar-brand { font-size: 1.5rem; font-weight: 700; color: #fff !important; }
.nav-link { margin-left: 1rem; font-weight: 500; color: #fff !important; transition: color .3s; }
.nav-link:hover { color: #c59d5f !important; }

/* Hamburger (mobile) */
#menu-toggle { display: none; background:none; border:none; font-size:1.5rem; color:#fff; cursor:pointer; }
@media (max-width:768px){
  .header-container { flex-direction:column; align-items:flex-start; }
  .nav-menu { flex-direction:column; gap:10px; display:none; }
  .nav-menu.active { display:flex; }
  #menu-toggle { display:block; margin-top:.5rem; }
}

/* ====================
   Slider
==================== */
#mainSlider, #mainSlider .carousel-item, #mainSlider .carousel-item img {
  height: 100vh; width: 100vw;
  object-fit: cover; object-position: center;
  border-radius: 0 !important;
  margin: 0; padding: 0;
}
.slider-image {
  width: 100%; height: auto;
  object-fit: contain; object-position: center;
  border-radius: 0 !important;
}
.carousel-caption { bottom: 15%; }
@media (max-width:768px){ .slider-image{height:240px;} .carousel-caption{bottom:5%; font-size:1rem;} }

/* Slider bilgi kutusu */
.slider-info {
  position:absolute; right:clamp(12px,3vw,24px); bottom:clamp(12px,3vw,24px);
  max-width:min(46ch,48vw); color:#fff;
  padding:clamp(10px,1.8vw,16px) clamp(12px,2vw,18px);
  border-radius:14px; line-height:1.45;
  background:rgba(17,17,17,0.55);
  backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,0.12);
  box-shadow:0 8px 24px rgba(0,0,0,0.25);
  pointer-events:none;
}
.slider-info::before {
  content:""; position:absolute; inset:0; border-radius:inherit;
  padding:1px; background:linear-gradient(135deg,rgba(255,255,255,0.35),rgba(255,255,255,0.05));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
}
.si-title { font-weight:700; font-size:clamp(18px,2.2vw,28px); margin-bottom:6px; text-shadow:0 2px 8px rgba(0,0,0,0.35); }
.si-meta { font-size:clamp(13px,1.4vw,16px); opacity:0.92; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
@media (max-width:576px){ .slider-info{left:clamp(10px,4vw,16px); right:clamp(10px,4vw,16px); max-width:none;} }

/* Slider arrows */
.carousel-control-prev-icon, .carousel-control-next-icon { filter: drop-shadow(0 4px 10px rgba(0,0,0,0.5)); }
.carousel-control-prev, .carousel-control-next { z-index:5; }

/* ====================
   Projeler (Cards)
==================== */
#projelerimiz { padding: 2.5rem 0 2rem; }
.project-card {
  background:#fff; border-radius:8px; overflow:hidden;
  position:relative; display:block; z-index:1;
  transition:transform .2s cubic-bezier(.55,.08,.58,.99), box-shadow .2s;
}
.project-card:hover { transform:translateY(-7px) scale(1.03); box-shadow:0 12px 36px rgba(40,40,40,.13); z-index:2; }
.project-img-link { display:block; overflow:hidden; }
.project-img {
  width:100%; height:240px; object-fit:cover;
  border-radius:1.3rem 1.3rem 0 0;
  transition:transform .38s cubic-bezier(.52,.13,.35,.94);
}
.project-card:hover .project-img { transform:scale(1.08); }
.overlay {
  position:absolute; bottom:0; left:0; width:100%; padding:1rem;
  background:var(--overlay-bg); color:#fff; opacity:0; transition:opacity .4s;
}
.project-card:hover .overlay { opacity:1; }
.overlay-title { font-size:1.15rem; font-weight:600; }
.overlay-city { margin-top:.3rem; font-size:.9rem; opacity:.9; }
@media (max-width:768px){ .project-img{height:150px;} }

/* ====================
   Hakkımızda
==================== */
#hakkimizda {
  background:linear-gradient(90deg,#f6f6f6 60%,#fff 100%);
  border-radius:2rem; box-shadow:0 2px 12px rgba(120,120,120,.07);
  padding:3rem 0;
}
#hakkimizda .img-fluid { border-radius:1.5rem; }
@media (max-width:768px){ #hakkimizda{padding:1.2rem 0;} }

/* ====================
   Hizmetler
==================== */
#hizmetlerimiz { padding:2.5rem 0 2rem; }
.service-card {
  background:#fff;
  transition:transform .2s cubic-bezier(.45,.07,.52,.92), box-shadow .2s;
}
.service-card:hover { transform:translateY(-7px) scale(1.03); box-shadow:0 12px 32px rgba(60,60,60,.14); }
.service-card .bi, .service-card i { color:#ffc107 !important; }

/* ====================
   İletişim
==================== */
#iletisim { padding:2.5rem 0 2rem; }
.contact-box {
  background:linear-gradient(120deg,#fff 70%,#f6f6f6 100%);
  border-radius:2rem; box-shadow:0 2px 18px rgba(140,140,140,.1);
}
.contact-info i { color:#ffc107 !important; }
.contact-info h6 { font-weight:700; font-size:1.09rem; }

/* ====================
   Footer
==================== */
footer {
  background:#333; color:#ddd; text-align:center; padding:15px 0;
}
footer h5 { font-weight:600; color:#fff; margin-bottom:.5rem; }
footer p, footer li { font-size:.95rem; margin-bottom:.25rem; }
footer a { color:#ddd; text-decoration:none; transition:.3s; }
footer a:hover { text-decoration:underline; }

/* Modern Footer */
/* -------------------------------------------------------
   Footer Kart Yapısı (Geri Yüklendi ve Güçlendirildi)
   .footer-box  : Eski şablonla tam uyum (includes/footer.php kullanıyor)
   .footer-card : Aydınlık (light) site-footer teması için kart
   .dz-foot-card: Karanlık/gradyan (dz-footer) teması için kart
-------------------------------------------------------- */

/* Ortak kart stilleri – taban (varsayılan koyu arka plan uyumlu) */
.footer-box,
.footer-card,
.dz-foot-card {
  /* Görünüm */
  background: rgba(255, 255, 255, 0.06);   /* koyu zeminde hafif cam efekti */
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;

  /* İç boşluk ve katman */
  padding: 20px;
  height: 100%;

  /* Gölge */
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.12);

  /* Geçişler */
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease;
}

/* Hover efekti (tüm kart tipleri için nazik yükselme) */
.footer-box:hover,
.footer-card:hover,
.dz-foot-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.18);
}

/* -------- Tema bazlı iyileştirmeler -------- */

/* 1) Aydınlık footer (site-footer) içinde beyaz kartlar */
.site-footer .footer-card,
.site-footer .footer-box {
  background: #fff;                       /* açık zemin */
  border: 1px solid rgba(0, 0, 0, 0.06);
  color: #333;
}

/* 2) Gradyan/koyu footer (dz-footer) için cam efektli kartlar */
.dz-footer .dz-foot-card,
.dz-footer .footer-box {                   /* includes/footer.php eski markup ile uyum */
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #e8eaed;
}

/* Başlıklar ve metinler */
.footer-title,
.dz-foot-title,
.site-footer .footer-title {
  font-weight: 700;
  letter-spacing: .2px;
  color: inherit;                          /* bulunduğu temadan renk alsın */
  margin-bottom: .6rem;
}

.footer-subtitle,
.dz-foot-sub,
.site-footer .footer-subtitle {
  font-weight: 600;
  opacity: .95;
  color: inherit;
  margin-bottom: .4rem;
}

.footer-text,
.dz-foot-text,
.site-footer .footer-text {
  line-height: 1.7;
  opacity: .9;
}

/* Menü/linkler */
.footer-menu .footer-link,
.dz-foot-menu .dz-foot-link {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  text-decoration: none;
  color: currentColor;
  opacity: .9;
  transition: opacity .2s ease, transform .2s ease, color .2s ease;
}
.footer-menu .footer-link:hover,
.dz-foot-menu .dz-foot-link:hover {
  opacity: 1;
  transform: translateX(2px);
}

/* Satır yapıları (iletişim) */
.dz-foot-line {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  margin-bottom: .65rem;
  color: inherit;
}
.dz-foot-line i { margin-top: .15rem; opacity: .85; }

/* Sosyal ikonlar */
.dz-foot-social {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-top: .6rem;
}
.dz-foot-social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 36px;
  border-radius: 999px;
  text-decoration: none;
  color: inherit;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  transition: transform .2s ease, background .2s ease, border-color .2s ease, color .2s ease;
}
.dz-foot-social-link:hover {
  transform: translateY(-2px);
  background: rgba(122, 162, 255, 0.15);
  border-color: rgba(122, 162, 255, 0.5);
  color: #fff;
}

/* Alt şerit */
.dz-foot-bottom {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.dz-foot-copy { font-size: .95rem; opacity: .95; }

/* Responsive ince ayar */
@media (max-width: 991.98px) {
  .footer-box,
  .footer-card,
  .dz-foot-card { padding: 16px; }
  .dz-foot-bottom { flex-direction: column; gap: 8px; }
}

.dz-footer {
  position:relative; padding:60px 0 30px;
  color:#e8eaed; background:linear-gradient(160deg,#0b1020 0%,#141a2a 40%,#0f1530 100%);
}
.dz-footer-bg {
  position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(800px 400px at 10% 10%,rgba(13,110,253,.15),transparent 60%),
              radial-gradient(600px 300px at 90% 30%,rgba(111,66,193,.12),transparent 60%);
}
.dz-foot-title { color:#fff; font-weight:700; }
.dz-foot-menu .dz-foot-link { color:#cfd3dc; text-decoration:none; transition:.2s; }
.dz-foot-menu .dz-foot-link:hover { color:#fff; transform:translateX(2px); }

/* ====================
   Gallery (Custom)
==================== */
.gallery-grid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:16px;
}
.gallery-item { overflow:hidden; border-radius:12px; position:relative; }
.gallery-img {
  width:100%; height:260px; object-fit:cover;
  transition:transform .4s, box-shadow .4s; cursor:zoom-in;
}
.gallery-img:hover { transform:scale(1.08); box-shadow:0 12px 30px rgba(0,0,0,.2); }

/* Custom Gallery */
.custom-gallery-grid {
  display:flex; flex-wrap:wrap; gap:15px; justify-content:center;
}
.custom-gallery-item {
  flex:1 1 calc(50% - 15px); max-width:calc(50% - 15px); cursor:pointer;
}
@media(min-width:768px){
  .custom-gallery-item { flex:1 1 calc(33.333% - 15px); max-width:calc(33.333% - 15px); }
}

/* ====================
   Animations
==================== */
.scroll-fade-up { opacity:0; transform:translateY(40px); transition:all .7s; }
.scroll-fade-up.scroll-active { opacity:1; transform:translateY(0); }
.image-fade-in { opacity:0; transform:scale(1.03); transition:opacity 1.2s, transform 1.2s; }
.image-fade-in.loaded { opacity:1; transform:scale(1); }
.img-hover-zoom-shadow { transition:transform .4s, box-shadow .4s; }
.img-hover-zoom-shadow:hover { transform:scale(1.08); box-shadow:0 10px 20px rgba(255,255,255,.15); }