/* Modernized Dark Theme (layout/selectors preserved) */

/* Fonts (kept, just https) */
@import url(https://fonts.googleapis.com/css?family=Open+Sans:700,300,600,400);
@import url(https://fonts.googleapis.com/css?family=PT+Sans:400,700,400italic,700italic);

:root{
  --bg: #0b0f14;
  --surface: #0f172a;
  --surface-2: #111827;
  --surface-3: #0b1220;
  --border: #243244;
  --border-soft: #1f2a3a;

  --text: #e5e7eb;
  --muted: #9aa4b2;
  --muted-2: #6b7280;

  --brand: #7c2d2a;      /* eski #612d2c tonuna yakın ama dark’a uyumlu */
  --brand-2: #324e88;    /* mevcut mavi */
  --link: #c7d2fe;

  --shadow: 0 10px 25px rgba(0,0,0,.35);
}

html, body { margin: 0; height: 100%;}
body {
  font-family: "PT Sans";
  font-size: 14px;
  color: var(--text);
  background: var(--bg);
}

img { border:0;}
a { text-decoration: none; outline: none; color: var(--link);}
a:hover { text-decoration: underline; }

ul, li { list-style: none; margin: 0; padding: 0;}
h1, h2, h3, h4, h5, h6 { margin: 0;}
h4, h5, h6 { margin: 0;font-weight: 700;}
h2 { font-size: 23px; margin: 10px 0 10px 0; color: var(--text);}

.align-right {float:right;}
.align-left {float:left;}
.slogan, .slogan2, h1, h2, h3 { font-family: "PT Sans";}
.text-left {text-align: left;}
.text-right {text-align: right;}
.text-center {text-align: center;}
.text-justify {text-align: justify;}

#header::after, body::after, #menu > ul::after, #menu-toogle:after, #menu-logo:after,
.services:after, #content:after, #container:after, .social:after {
  content: " ";display: table;clear: both;
}
.clearFix { clear: both;}

/* Background image removed */
#page {
  background: var(--bg);
  min-height: 100%;
  height: auto;
  margin-bottom: -70px;
}
.footerheight {height: 70px;clear: both;}
#container { position: relative; margin: 0 auto; padding: 0;}

/* Header */
#header { position: relative;height: 100px; border-bottom: 1px solid var(--border); background: #0b0f1466 !important;}
#header #logo { float: left; width:280px;padding-top: 20px;}
#header #logo img{ width: 100%;}
#header #logo h1{ position: absolute; z-index: -5;text-indent: -999px;}
#header #menu { font-size: 14px;position: relative;float: right; }
#header #language { position:relative;float: right;width: 60%;height: 30px;line-height: 30px;text-align: right;margin-bottom: 25px; }
#header #language a { padding:2px 5px; text-transform:uppercase; color: var(--muted);}
#header #language a:hover, #language a.active {
  color: #fff;
  background-color: var(--brand-2);
  text-decoration:underline;
}

#menu > ul { font-family: "PT Sans";}
#menu > ul > li { float: left; position: relative; margin-left:5px;}
#menu > ul > li > a {
  display: block;
  padding: 5px 15px 11px 15px;
  line-height: 30px;
  color: var(--muted);
  text-transform: uppercase;
  border-radius: 0px;
}
#menu > ul > li > a span{ font-weight: bold;font-size: 8px;position: absolute;top: 0;right: 5px; color: var(--muted-2);}

/* Active/hover - underline preserved */
#menu > ul > li > a.active, #menu ul li a:hover {color: var(--text);text-decoration:underline;}

#menu > ul > li > ul { display: none; z-index: 999; background: var(--surface-2); box-shadow: var(--shadow); }
#menu > ul > li:hover > ul {
  display: block; width: 100%;
  position: absolute;
  border: 1px solid var(--border);
  border-top: none;
  margin-top: -1px;
  min-width: 170px;
  padding: 3px;
}
#menu > ul > li > ul > li a { display: block; padding: 3px 5px; color: var(--muted); font-size: 14px;}
#menu > ul > li > ul > li a.active, #menu ul li a:hover {text-decoration:underline; color: var(--text);}

#menu > ul > li > a  {
  -webkit-transition: all 0.5s ease;
     -moz-transition: all 0.5s ease;
       -o-transition: all 0.5s ease;
      -ms-transition: all 0.5s ease;
          transition: all 0.5s ease;
}

#menu-toogle {
  background-color: var(--surface-2);
  border: 1px solid var(--border);
  padding:11px 20px; cursor: pointer; display: none;
  color: var(--text);
}
#menu-toogle:hover, #menu-toogle.active { background-color: var(--brand); color: #FFF;}
#menu-logo { display: none; color: var(--text);}

/* Banner */
#banner {}
#banner > img{ border-bottom: 1px solid var(--border);}
#banner img {width: 100%;}
#banner .info {
  position: absolute;
  text-align: center;
  font-family: "PT Sans";
  top: 10%;
  text-transform: uppercase;
  width: 70%;
  left: 25%;
  font-size: 21px;
  color: #FFF;
  letter-spacing: 5px;
  background: rgba(15,23,42,0.55);
  /* IE filter kept out; dark theme relies on rgba */
}
#banner  .info a.contct{ background: transparent; border: 1px solid #FFF;}
#banner  .info a{
  font-size: 18px;
  line-height:18px;
  border-radius: 2px;
  padding: 7px 15px;
  line-height: 30px;
  color: #FFF;
  background: var(--brand);
  letter-spacing: 0;
}

/* Content */
#content { min-height: 60px;}

/* center-bg.png removed */
#content .center {
  position: relative;
  border-top:1px solid var(--border);
  background: var(--surface-3);
  min-height: 45px;
  color: var(--muted);
  font-size: 18px;
  padding: 8px 15px 24px 15px;
  z-index: 1;
  box-shadow: var(--shadow);
}

#content img.menu-image { float: left; padding: 3px; margin: 0 5px 5px 0; border: 1px solid var(--border); background: var(--surface-2);}
.renk {background: var(--brand)!important}

.inn { float: left; width: 45%;}
.inn h3{ padding: 10px 0; color: var(--text);}
.inn p{ margin: 0; line-height: 22px; color: var(--muted);}
.inn b{ font-size: 12px; width: 100px; display: block; float: left; color: var(--muted);}
#form h3{ padding: 10px 0; color: var(--text);}
#form { min-height: 250px; }
.inn + #form { margin-left: 55%; }

@media (max-width: 767px) {
  .inn { float: none; width: 96%; border: 1px solid var(--border); padding: 0 5px; line-height: 20px; background: var(--surface-2); }
  .inn + #form { margin:0; width: 100%; }
}

.images {border-top: 1px solid var(--border-soft); padding: 5px 0}
.images h3 { margin:10px 0; border-bottom:1px solid var(--border-soft); color: var(--text);}
.images img {border: 1px solid var(--border); padding: 2px; margin: 3px; background: var(--surface-2);}

/* Services */
.services a {display: block; color: var(--text); background: var(--surface-2); border: 1px solid var(--border); box-shadow: var(--shadow);}
.services a .img {
  border: 1px solid var(--border);
  padding: 2px; margin: 3px;
  color: var(--text);
  background: var(--surface);
  -webkit-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
  transition-timing-function: ease-out;
}
.services img { border-bottom: 1px solid var(--border); width:100%}
.services span { display: block; padding: 0 5px; height: 25px; line-height: 25px; text-align: center;font-weight: bold;font-size: 13px; color: var(--text);}

/* PROJECT */
#project_view .img{ width:100%;}
#project_view .detail{ padding:0 10px;}
.project {margin: 5px;border: 1px solid var(--border); position:relative; background: var(--surface-2); box-shadow: var(--shadow);}
.project > a {display: block; color: var(--text); background: var(--surface-2); border-bottom: 1px solid var(--border);}
.project > a .img {
  -webkit-transition: all 1s ease;
     -moz-transition: all 1s ease;
       -o-transition: all 1s ease;
      -ms-transition: all 1s ease;
          transition: all 1s ease;
}
.project:hover a .img {-webkit-filter: grayscale(100%);}
.project h3 { text-overflow: ellipsis;white-space: nowrap;overflow: hidden; color: var(--text);}
.project img { width:100%}
.project span { display: block; padding: 0 5px; height: 25px; line-height: 25px; text-align: center;font-weight: bold;font-size: 13px; color: var(--text);}
.project p {margin:0;text-overflow: ellipsis;white-space: nowrap;overflow: hidden; color: var(--muted);}
.project .virtual {background:url('../image/virtual_ico.png') no-repeat;width:30px;height:32px; position: absolute;right: 5px;top: 5px; z-index: 50;}
.project_head { height:75px; background: var(--surface-2); padding:5px;}
.project_head a {position: absolute;right: 10px;bottom: 5px; color: var(--link);}
.project_head a:hover {text-decoration: underline;}
.virtuals span {text-overflow: ellipsis;width: 100%; display: block; white-space: nowrap; overflow: hidden;}
.iconset {}
.iconset a { display:block; width:100px; float:left; text-align:center;color: var(--muted); padding:0 5px;}
.iconset a span{ display: block;font-size: 16px;}
.iconset a.virtual div.img { background:url('../image/p-virtual.png') no-repeat center;height: 45px;}
.iconset a.catalog div.img { background:url('../image/p-catalog.png') no-repeat center;height: 45px;}
.iconset a.video div.img { background:url('../image/p-video.png') no-repeat center;height: 45px;}
.iconset a + a { background:url('../image/iconleft.png') no-repeat left center;}

/* tree/news */
.tree-bar, #news { font-family: "PT Sans";}
.tree-bar { padding: 5px 0; text-align: left;border-bottom: 1px solid var(--border);}
.tree-bar::after { content: " ";display: table;clear: both;}
.tree-bar h3, #news h3 { margin: 0px 7px;font-size: 17px;color: var(--text);}
.tree-bar p { margin: 5px 7px;font-size: 18px;color: var(--muted);}
.tree-bar .box {position: relative; border-right:1px solid var(--border); background: url('../image/right-ok.png') no-repeat 225px center;}

.home_bottom {font-family: "PT Sans";margin: 10px 0;}
.home_bottom h3 {position: absolute;font-size: 18px;line-height:32px;top: 18px;left: 10px;color: var(--text); padding-left:42px}
.home_bottom h3.icon-image-1 {background:url('../../../../../image/icons/icon-1.png') no-repeat;height: 32px;}
.home_bottom h3.icon-image-2 {background:url('../../../../../image/icons/icon-2.png') no-repeat;height: 32px;}
.home_bottom h3.icon-1 {background-position:top left;}
.home_bottom h3.icon-2 {background-position:center left;}
.home_bottom h3.icon-3 {background-position:bottom left;}
.home_bottom img {width:100%; height:90px;}
.home_bottom div {position:relative;min-height:70px;}

/* rgba overlay tuned for dark */
#news {
  position: relative;
  padding:5px 10px 0 10px;
  margin-top: -50px;
  font-size: 12px;
  background: rgba(15,23,42,0.75);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}
#news > span { margin: 5px 7px;font-size: 18px;color: var(--text);}
#news > p { margin: 7px; color: var(--muted);}
#news > a {float: right;margin-right: 15px;color: #ffb4b4; line-height: 10px; font-size: 20px;}
#news > div > img {width: 100%;}
#news > div > span { margin: 5px 7px;font-size: 18px;color: var(--text);}

#lastprojects { padding: 0 5px;}
#lastprojects div {position:relative;}
#lastprojects div img{width: 100%;}
#lastprojects div span {
  position: absolute;bottom: 0;left: 0;right: 0;padding: 5px;text-align: center;
  color: #FFF;font-weight: bold;font-size: 15px;
  background: rgba(17,24,39,0.65);
}

/* Buttons/links */
.more {
  position:absolute; bottom: 5px; right: 5px;
  border: 1px solid var(--brand-2);
  background: var(--surface-2);
  padding: 4px 10px;
  border-radius: 25px;
  color: var(--link);
  font-size: 12px;
}
.more:hover { color: #fff; border: 1px solid var(--border); background: var(--surface);}

/* Grid */
.row { padding: 0 10px; min-height: 38px;}
[class*="col"] { float: left;}

.col-1 { width: 8.3%;}
.col-2 { width: 16.6%;}
.col-3 { width: 25%;}
.col-4 { width: 33.3%;}
.col-5 { width: 41.6%;}
.col-6 { width: 50%;}
.col-7 { width: 58.3%;}
.col-8 { width: 66.6%;}
.col-9 { width: 75%;}
.col-10 { width: 83.3%;}
.col-11 { width: 91.6%;}
.col-12 { width: 100%;}

.row label { line-height: 38px;display: block;float: left;width: 30%; color: var(--muted);}
.row h2 { border-bottom: 1px solid var(--brand);padding-left: 10px;}

/* Inputs */
input {
  padding: 7px;
  width: 66%;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  outline:none;
}
textarea {
  padding: 7px;
  width: 66%;
  height: 60px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  outline:none;
}
input:focus, textarea:focus { border-color: rgba(199,210,254,.6); box-shadow: 0 0 0 3px rgba(199,210,254,.12); }

button {
  padding: 7px;
  width: 100px;
  background: var(--brand);
  color: #FFF!important;
  border: 1px solid var(--border);
  margin-right:8px;
  cursor: pointer;
  transition: all 0.3s ease 0s;
}
button:hover { background: #df7629; color: #FFF;}

/* Slogans */
.slogan { font-size: 32px; color: var(--text); text-align: center; margin: 15px 0;}
.slogan2 { font-size: 21px; color: var(--muted);display: block;}
.slogan .left-in, .slogan .right-in {
  padding: 10px;
  font-family: initial;
  font-style: italic;
  color: var(--muted);
}
.slogan .tirnak {font-style: oblique;}
.slogan h2 {margin: 0;font-size: 24px;font-weight: 600;}

/* Footer */
#footer { color: var(--muted); padding: 1px 0;border-top: 1px solid var(--border); height:70px; background: var(--surface-3);}
#footer #f-menu { margin-top: 20px;font-family: "PT Sans";}
#footer #f-menu a { padding: 5px 7px;text-transform: uppercase; color: var(--muted);}
#footer #f-menu a:Hover, #footer #f-menu a.active {color: var(--text)}
#footer #logo { display:table; height:60px;#position: relative;}
#footer #logo a{ display:table-cell;vertical-align: middle;}
#footer #logo img{ width:145px;}
#footer p {margin: 5px;}
#footer a { color: var(--muted);}

.social { padding: 0; float: right; margin-top: 8px;}
.social a { width: 28px; height: 28px; margin-left: 3px; display: block; float: left;}
.social .facebook { background: url('../image/s-facebook.png') no-repeat;}
.social .twitter { background: url('../image/s-twitter.png') no-repeat;}
.social .youtube { background: url('../image/s-youtube.png') no-repeat;}
.social .kukla { background: url('../image/s-kukla.png') no-repeat;}
.social .sitemap { background: url('../image/s-sitemap.png') no-repeat;}
.social a {
  -webkit-transition: all 1s ease;
     -moz-transition: all 1s ease;
       -o-transition: all 1s ease;
      -ms-transition: all 1s ease;
          transition: all 1s ease;
}
.social a:hover { -webkit-filter: grayscale(100%); }

/* Misc */
#parentslide { margin-right:40%; border: 1px solid var(--border); margin-bottom: 15px; background: var(--surface-2);}
#parentbar { float:right; width:35%;}

/* Alerts */
.alert-success {color: #b7f7c2;background-color: rgba(16,185,129,0.12);border-color: rgba(16,185,129,0.25);}
.alert {padding: 7px 15px;margin-bottom: 20px;border: 1px solid transparent;border-radius: 4px;}
button.close {-webkit-appearance: none;padding: 0;cursor: pointer;background: transparent;border: 0;}
.close {float: right;font-size: 21px;width: 14px;margin:0;font-weight: bold;line-height: 1;color: var(--text);text-shadow: none;opacity: .35;}
.close:hover, .close:focus {color: var(--text);text-decoration: none;cursor: pointer;opacity: .6;}

/* Responsive (kept, colors updated) */
@media (max-width: 767px) {
  #container { width: 100%;}
  .col-3 { width: 100%;}
  #menu-toogle { display: block;}
  #header #menu ul{ display: none; background: none;}
  #header #menu {width: 100%;margin-top: 0; margin-right: 0;}
  #menu ul li { float: none;margin-left: 0px;}
  #menu > ul > li > ul, #menu > ul > li:hover > ul { display: none;}
  #menu ul li a:hover { background-color: rgba(255,255,255,.06); color: var(--text);}
  #menu ul li a:active { background-color: rgba(255,255,255,.08); color: var(--text);}
  #menu ul li a.active{ background-color: rgba(255,255,255,.10); color: var(--text);}
  #menu > ul > li > a {padding: 5px 15px 5px 15px;}
  #menu > ul > li > ul { display: block!important;position: relative!important;padding-left: 25px!important;}
  #menu-logo { display: block; line-height: 38px; font-size: 21px; margin: 10px;}
  #news {margin-top: 0px;padding: 0;}
  #news > span {margin: 5px 7px;font-size: 18px;color: var(--text);position: absolute;top: -5px;left: 110px;}
  #news h3 {font-size: 20px;}
  .social {margin: 8px auto 8px auto;width: 160px;float:none;}
  #lastprojects {border-top: 1px solid var(--border);}
  #header #language {position:absolute; right: 5px; z-index: 1;}
  input { width: 66.5%;}
  textarea { width: 66.5%;}
  .row { padding: 0 10px;}
  #header #logo { display: none;}
  #content .center { font-size:inherit}
}

@media (min-width: 767px) {
  #header > #menu > ul{ display: block!important;padding: 0px 30px;}
}

@media (min-width: 768px) and (max-width: 990px) {
  #container { width: 750px;}
  .col-3 { width: 100%;}
  .row label { width: 100%; float: none}
  input { width: 95%;}
  textarea { width: 95%;}
  button { margin-right:0;}
  #news {margin-top: 0px;}
}

@media (min-width: 990px) and (max-width: 1200px) {
  #container { width: 980px;}
}

@media (min-width: 1200px) {
  #container { width: 1100px;}
}


/* =========================
   HEADER MENU FIX (Dark + Modern)
   Header.php yapısı bozulmadan
========================= */

/* Header hizalama */
#header { height: auto; }
#header #container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  padding: 14px 0;
}

/* Logo */
#header #logo { float:none; width:280px; padding-top:0; }
#header #logo img{ width:325px; display:block; }

/* Language */
#header #language{
  float:none;
  width:auto;
  height:auto;
  line-height: 1;
  margin:0;
  order: 2;
}
#header #language a{
  border:1px solid var(--border, #243244);
  background: rgba(255,255,255,.03);
  border-radius: 8px;
  padding:6px 10px;
  margin-left:6px;
  display:inline-block;
}

/* Menu container */
#header #menu{
  float:none;
  width:auto;
  order: 3;
}

/* Top-level menu */
#menu > ul{
  display:flex;
  align-items:center;
  gap: 6px;
  padding:0;
  margin:0;
}
#menu > ul > li{
  float:none;
  margin:0;
  position:relative;
}

/* Top-level links */
#menu > ul > li > a{
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  border-radius: 10px;

  color: var(--muted, #9aa4b2);
  text-decoration:none;
  line-height: 1;
  white-space: nowrap;
  background: transparent;
}
#menu > ul > li > a:hover{
  background: rgba(255,255,255,.05);
  border-color: var(--border, #243244);
  text-decoration:none;
  color: var(--text, #e5e7eb);
}
#menu > ul > li > a.active{
  background: rgba(199,210,254,.10);
  border-color: rgba(199,210,254,.25);
  color: var(--text, #e5e7eb);
  text-decoration:none;
}

/* Dropdown common */
#menu > ul > li > ul,
#menu > ul > li > ul > li > ul{
  display:none;
  position:absolute;
  top: calc(100% + 8px);
  left:0;
  min-width: 220px;
  background: var(--surface-2, #111827);
  border:1px solid var(--border, #243244);
  border-radius: 12px;
  padding: 8px;
  box-shadow: 0 14px 35px rgba(0,0,0,.45);
  z-index: 9999;
}
#menu > ul > li:hover > ul{ display:block; }

/* Dropdown items */
#menu > ul > li > ul > li{ position:relative; }
#menu > ul > li > ul > li a{
  display:block;
  padding:9px 10px;
  border-radius: 10px;
  color: var(--muted, #9aa4b2);
  text-decoration:none;
}
#menu > ul > li > ul > li a:hover{
  background: rgba(255,255,255,.06);
  color: var(--text, #e5e7eb);
  text-decoration:none;
}
#menu > ul > li > ul > li a.active{
  background: rgba(199,210,254,.10);
  color: var(--text, #e5e7eb);
}

/* 3. seviye dropdown (sister_id) */
#menu > ul > li > ul > li > ul{
  top: 0;
  left: calc(100% + 8px);
  margin:0;
}
#menu > ul > li > ul > li:hover > ul{ display:block; }

/* "- " ile başlayan sister item'lar için daha düzgün görünüm */
#menu > ul > li > ul > li > ul > li a{
  padding-left: 12px;
  opacity: .95;
}

/* Mobile toggle (senin custom.js bunu aç/kapa yapıyordur) */
#menu-toogle{
  display:none;
  user-select:none;
  border-radius: 10px;
  padding:10px 14px;
  border:1px solid var(--border, #243244);
  background: rgba(255,255,255,.03);
  color: var(--text, #e5e7eb);
}

/* Responsive */
@media (max-width: 900px){
  #header #container{
    align-items:flex-start;
  }
  #header #logo{ width: 220px; }
  #header #language{ order: 3; width:100%; text-align:left; margin-top:8px; }

  #header #menu{ width:100%; order:2; }
  #menu-toogle{ display:inline-block; margin-top:8px; }

  /* Menü mobilde alt alta */
  #menu > ul{
    display:none; /* toggle ile açılacak */
    flex-direction:column;
    align-items:stretch;
    gap:6px;
    margin-top:10px;
    padding: 8px;
    border:1px solid var(--border, #243244);
    border-radius: 12px;
    background: var(--surface-3, #0b1220);
  }
  #menu > ul > li > a{ width:100%; }

  /* Mobilde dropdownları açılır blok yap */
  #menu > ul > li > ul,
  #menu > ul > li > ul > li > ul{
    position:static;
    display:block;         /* alt menüler görünür */
    min-width: unset;
    box-shadow:none;
    border-radius: 10px;
    margin-top:6px;
    padding:6px;
  }
}

/* Eğer custom.js "active" class'ı ekliyorsa bu işe yarar */
#menu-toogle.active + ul{ display:flex; }



.bosluk-1 {padding: 10px; background: #0b0f14; border-bottom: 5px solid #7a6249; }
.alt-cizgili {padding-top : 3px; border-bottom: 3px solid #7a6249;}