/* ============================================
   HANCAM MODERN v2 - Koyu Çelik / Endüstriyel
   index.php'de style.css'den SONRA ekle:
   <link rel="stylesheet" href="css/modern.css" />
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Outfit:wght@300;400;600&display=swap');

/* ── Değişkenler ── */
:root {
  --steel-darkest: #060f18;
  --steel-dark:    #0d1b2a;
  --steel-mid:     #1b2f45;
  --steel-light:   #243b52;
  --accent:        #4a9eca;
  --accent-dim:    #2c7aaa;
  --accent-glow:   rgba(74,158,202,0.25);
  --text-bright:   #ffffff;
  --text-light:    #c8dde8;
  --text-muted:    #5a8ca8;
  --text-dim:      #2c4a5e;
  --border-subtle: rgba(255,255,255,0.07);
  --border-accent: rgba(74,158,202,0.25);
  --transition:    all 0.28s cubic-bezier(0.4,0,0.2,1);
}

/* ── Temel ── */
html, body {
  font-family: 'Outfit', Arial, sans-serif !important;
  font-size: 15px;
  line-height: 1.6;
  background: #e8edf2;
  color: #1a2b38;
}

a { color: var(--accent-dim); transition: var(--transition); }
a:hover, a:focus { color: var(--accent); text-decoration: none; }
h1,h2,h3,h4 { font-family: 'Bebas Neue', Arial, sans-serif !important; letter-spacing: 0.05em; }
hr { border-top: 2px solid var(--accent); opacity: 0.35; }
.page-header  { border-bottom: 2px solid var(--accent); }
.alt-baslik   { border-bottom: 2px solid var(--accent); }

/* ══════════════════════════════════════════
   HEADER
══════════════════════════════════════════ */
.header {
  background: linear-gradient(135deg, var(--steel-dark) 0%, var(--steel-mid) 55%, var(--steel-light) 100%) !important;
  border-bottom: 3px solid var(--accent) !important;
  box-shadow: 0 4px 24px rgba(0,0,0,0.45);
}

/* Logo: koyu arka planda görünmesi için beyaza çevir */
.logo img {
  filter: brightness(0) invert(1) !important;
  opacity: 0.92;
  transition: var(--transition);
  max-height: 70px;
  max-width: 100%;
  width: auto !important;
  display: block;
}
.logo img:hover {
  opacity: 1;
  filter: brightness(0) invert(1) drop-shadow(0 0 8px rgba(74,158,202,0.6)) !important;
}

/* Mobil logo düzeltmesi */
@media only screen and (max-width: 767px) {
  .logo {
    width: 60% !important;
    margin: 14px 20% !important;
    text-align: center;
  }
  .logo img {
    max-height: 55px;
    margin: 0 auto;
  }
}

/* İletişim bilgileri */
.h-iletisim ul li { color: var(--text-muted); font-size: 12px; }
.h-iletisim ul li h2 {
  color: var(--text-light) !important;
  font-family: 'Outfit', sans-serif !important;
  font-size: 12px !important;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.h-iletisim ul li p { color: var(--text-muted); }
.h-iletisim ul li i { color: var(--accent); margin-right: 4px; }

/* Sosyal ikonlar */
.h-sosyal ul li a {
  color: var(--text-muted) !important;
  font-size: 20px;
  padding: 6px 7px;
  display: block;
  border-radius: 4px;
  transition: var(--transition);
}
.h-sosyal ul li a:hover {
  color: var(--accent) !important;
  background: rgba(74,158,202,0.12);
  transform: translateY(-2px);
}

/* ══════════════════════════════════════════
   MENÜ
══════════════════════════════════════════ */
.menu {
  background: var(--steel-darkest) !important;
  border-top: 1px solid var(--border-subtle);
  box-shadow: 0 3px 16px rgba(0,0,0,0.4);
}

.menu > ul > li > a {
  color: var(--text-muted) !important;
  font-family: 'Outfit', sans-serif !important;
  font-size: 12px !important;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 16px 0 !important;
  position: relative;
  transition: var(--transition);
}
.menu > ul > li > a::after {
  content: '';
  position: absolute;
  bottom: 0; left: 50%;
  width: 0; height: 3px;
  background: var(--accent);
  border-radius: 2px 2px 0 0;
  transition: var(--transition);
  transform: translateX(-50%);
}
.menu > ul > li > a:hover {
  color: var(--text-bright) !important;
  background: rgba(74,158,202,0.07);
}
.menu > ul > li > a:hover::after { width: 50%; }

/* Mobil menü */
.menuTab {
  color: var(--text-light) !important;
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  letter-spacing: 0.08em;
}
.menu > ul { background: rgba(6,15,24,0.97) !important; }

/* ══════════════════════════════════════════
   ARA SLOGAN
══════════════════════════════════════════ */
.ara-slogan {
  background: linear-gradient(90deg, var(--steel-dark), var(--steel-mid) 50%, var(--steel-dark)) !important;
  border-top: none;
  border-bottom: 3px solid var(--border-accent);
  position: relative;
  overflow: hidden;
}
.ara-slogan::before {
  content: '';
  position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg,
    transparent, transparent 100px,
    rgba(74,158,202,0.03) 100px,
    rgba(74,158,202,0.03) 101px
  );
}
.ara-slogan h2 {
  color: var(--text-light) !important;
  font-family: 'Bebas Neue', sans-serif !important;
  font-size: 20px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase;
  position: relative;
  font-weight: 400 !important;
}
.ara-slogan h2::before {
  content: '— ';
  color: var(--accent);
  opacity: 0.7;
}
.ara-slogan h2::after {
  content: ' —';
  color: var(--accent);
  opacity: 0.7;
}

/* ══════════════════════════════════════════
   ANA SAYFA KARTLARI
══════════════════════════════════════════ */
.main {
  background: var(--steel-dark);
  padding: 0 !important;
}
.main > .container { padding-top: 0 !important; }
.main > .container > .row { margin: 0; }

.main-kutu {
  background: linear-gradient(180deg, var(--steel-mid) 0%, #162840 100%) !important;
  border-radius: 0 !important;
  border-right: 1px solid var(--border-subtle) !important;
  border-top: 3px solid transparent;
  padding: 0 !important;
  margin-bottom: 0 !important;
  overflow: hidden;
  transition: var(--transition);
  position: relative;
}
.main-kutu::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s ease;
}
.main-kutu:hover::before { transform: scaleX(1); }
.main-kutu:hover {
  background: linear-gradient(180deg, #223c54 0%, #1a2e40 100%) !important;
}

.main-kutu img {
  width: 100% !important;
  height: 160px !important;
  object-fit: cover;
  display: block;
  filter: brightness(0.75) saturate(0.8);
  transition: var(--transition);
}
.main-kutu:hover img { filter: brightness(0.9) saturate(1); }

.main-kutu h2 {
  font-family: 'Bebas Neue', sans-serif !important;
  font-size: 16px !important;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 12px 14px 10px !important;
  color: var(--text-light) !important;
  border-bottom: 1px solid var(--border-subtle) !important;
  background: rgba(0,0,0,0.2);
  font-weight: 400 !important;
}

.main-kutu ul { padding: 8px 0 10px !important; }
.main-kutu ul li { border-bottom: none !important; }
.main-kutu ul li a {
  display: flex !important;
  align-items: center;
  gap: 8px;
  padding: 7px 14px !important;
  font-size: 13px !important;
  font-weight: 400;
  color: var(--text-muted) !important;
  transition: var(--transition);
  letter-spacing: 0.02em;
}
.main-kutu ul li a:hover {
  color: var(--text-bright) !important;
  background: rgba(74,158,202,0.1);
  padding-left: 20px !important;
}
.main-kutu ul li a i {
  color: var(--accent) !important;
  font-size: 13px;
  opacity: 0.7;
  flex-shrink: 0;
  transition: var(--transition);
}
.main-kutu ul li a:hover i { opacity: 1; }

/* Hover overlay */
.hovereffect .overlay {
  background: linear-gradient(to top, rgba(6,15,24,0.8) 0%, transparent 50%) !important;
  transition: var(--transition) !important;
}
.hovereffect:hover .overlay {
  background: linear-gradient(to top, rgba(6,15,24,0.9) 0%, rgba(74,158,202,0.2) 100%) !important;
}
.hovereffect img { transition: transform 0.5s ease !important; }
.hovereffect a.info h5 {
  color: var(--accent) !important;
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 0.12em;
  font-size: 15px;
}

/* ══════════════════════════════════════════
   İKON KUTULARI (main-iki)
══════════════════════════════════════════ */
.main-iki {
  background: #fff;
  border-top: 3px solid var(--accent);
  border-bottom: 1px solid #d8e4ec;
  padding: 20px 0 !important;
  margin-bottom: 0 !important;
}

.main-iki-kutu {
  background: #f3f8fc !important;
  border: 1px solid #d0e3ef;
  border-radius: 8px !important;
  padding: 18px 10px 14px !important;
  text-align: center;
  transition: var(--transition);
  position: relative;
  overflow: hidden;
}
.main-iki-kutu::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: var(--accent);
  transform: scaleX(0);
  transition: transform 0.35s ease;
}
.main-iki-kutu:hover::after { transform: scaleX(1); }
.main-iki-kutu:hover {
  background: var(--steel-dark) !important;
  border-color: var(--accent);
  transform: translateY(-4px);
  box-shadow: 0 8px 28px rgba(13,27,42,0.25);
}

.main-iki-kutu h2 {
  font-family: 'Outfit', sans-serif !important;
  font-size: 12px !important;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #2c4a5e;
  transition: var(--transition);
}
.main-iki-kutu:hover h2 { color: var(--text-light) !important; }

.main-iki-kutu img {
  opacity: 0.65;
  transition: var(--transition);
  filter: grayscale(30%);
}
.main-iki-kutu:hover img { opacity: 1; filter: grayscale(0%) brightness(1.15); }

/* ══════════════════════════════════════════
   PROJELER (main-uc)
══════════════════════════════════════════ */
.main-uc {
  position: relative;
  padding: 40px 0 30px !important;
}
.main-uc::before {
  content: '';
  position: absolute; inset: 0;
  background: rgba(6,15,24,0.78);
}
.main-uc .container { position: relative; }

.main-uc h1 {
  font-family: 'Bebas Neue', sans-serif !important;
  color: #fff !important;
  font-size: 26px !important;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(255,255,255,0.12) !important;
  padding-bottom: 12px !important;
  font-weight: 400 !important;
}

.muc-cizgi {
  border-top-color: var(--accent) !important;
  width: 40% !important;
  margin-bottom: 20px !important;
}

.main-uc-kutu {
  background: rgba(74,158,202,0.07) !important;
  border: 1px solid rgba(74,158,202,0.25);
  border-radius: 6px !important;
  transition: var(--transition);
  cursor: pointer;
}
.main-uc-kutu:hover {
  background: rgba(74,158,202,0.18) !important;
  border-color: var(--accent);
  transform: scale(1.02);
  box-shadow: 0 8px 32px rgba(0,0,0,0.35);
}
.main-uc-kutu h2 {
  font-family: 'Bebas Neue', sans-serif !important;
  color: var(--text-light) !important;
  font-size: 18px !important;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 28px 0 !important;
  border: none !important;
  font-weight: 400 !important;
}
.main-uc-kutu:hover h2 { color: #fff !important; }

/* ══════════════════════════════════════════
   FOOTER
══════════════════════════════════════════ */
.footer {
  background: linear-gradient(160deg, var(--steel-darkest) 0%, var(--steel-dark) 100%) !important;
  border-top: 3px solid var(--accent) !important;
  padding: 30px 0 12px !important;
}

.footer-kutu { min-height: unset !important; margin-bottom: 20px !important; }
.footer-kutu h2 {
  font-family: 'Bebas Neue', sans-serif !important;
  color: var(--accent) !important;
  font-size: 14px !important;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--border-accent) !important;
  padding-bottom: 8px !important;
  margin-bottom: 12px !important;
  font-weight: 400 !important;
}

.footer-kutu > ul > li > a {
  color: var(--text-muted) !important;
  font-size: 13px;
  padding: 3px 0 !important;
  transition: var(--transition);
}
.footer-kutu > ul > li > a:hover {
  color: var(--accent) !important;
  padding-left: 6px !important;
}
.footer-kutu > ul > li > p { color: var(--text-muted); font-size: 13px; }
.f-icon { color: var(--accent) !important; }

.footer-sosyal > ul > li > a {
  color: var(--text-muted) !important;
  font-size: 22px;
  padding: 0 5px;
  transition: var(--transition);
}
.footer-sosyal > ul > li > a:hover {
  color: var(--accent) !important;
  transform: scale(1.2) translateY(-2px);
}

.copyright {
  border-top-color: var(--border-subtle) !important;
  color: var(--text-dim) !important;
  font-size: 11px;
  letter-spacing: 0.08em;
  padding-top: 14px !important;
  margin-top: 8px;
}
.copyright a { color: var(--text-muted) !important; }
.copyright a:hover { color: var(--accent) !important; }

/* ══════════════════════════════════════════
   DİĞER ELEMENTLER
══════════════════════════════════════════ */
.panel-default > .panel-heading {
  background: linear-gradient(90deg, var(--steel-dark), var(--steel-mid)) !important;
  border-color: var(--steel-light) !important;
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 0.06em;
  color: var(--text-light) !important;
}

a.list-group-item, button.list-group-item { color: var(--text-light) !important; }
.list-group-item {
  background-color: var(--steel-mid) !important;
  border-color: var(--border-subtle) !important;
  transition: var(--transition);
}
.list-group-item:hover {
  background-color: var(--steel-light) !important;
  color: var(--text-bright) !important;
}

.whatsapp {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
  position: relative;
  margin: 25px 0 !important;
}
.whatsapp::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,0.6), rgba(0,0,0,0.35));
}
.whatsapp a {
  position: relative;
  letter-spacing: 0.04em;
  font-family: 'Bebas Neue', sans-serif !important;
  font-size: 26px !important;
  letter-spacing: 0.1em !important;
}

/* Genel içerik sayfaları */
.duvar { min-height: 420px; }