:root{
  --gold1:#a0782c; --gold2:#f3d794; --gold3:#7a5a1d;
  --ink:#1d1f1e; --inkInv:#101010;
}

html,body{height:100%;margin:0;padding:0;overflow:hidden;color:var(--text);font-family:Verdana,sans-serif;}
*,*::before,*::after{box-sizing:border-box}

/* Üst barlar */
.topbarsocialmedia{position:fixed;top:0;right:0;height:48px;padding:6px 10px;display:flex;align-items:center;gap:10px;background:#000;opacity:.7;border-bottom-left-radius:10px;z-index:3;}
.topbarsocialmedia a{display:inline-flex}
.socialmedialogo{width:26px;height:26px;display:block}
.topbarcontact{position:fixed;top:0;right:120px;height:48px;display:flex;align-items:center;background:#000;opacity:.7;border-bottom-left-radius:10px;border-bottom-right-radius:10px;padding:6px 12px;z-index:3;font-weight:600;}
.topbarcontact a{text-decoration:none;background:linear-gradient(-45deg,rgba(147,102,25,1)0%,rgba(242,213,142,1)60%,rgba(147,102,25,1)100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;font-size:14px;}
.ebulten{position:fixed;top:20%;right:0;display:inline-flex;align-items:center;justify-content:center;width:90px;height:40px;background:#bb0000;color:#fff;text-decoration:none;border-top-left-radius:10px;border-bottom-left-radius:10px;opacity:.85;z-index:3}

/* Navbar */
.navbar{
  position: fixed;
  left: 4%;
  right: 4%;
  top: 52px;
  height: 56px;
  background: linear-gradient(-45deg, var(--gold1), var(--gold2));
  border-radius: 10px;
  z-index: 5;
  display: flex;
  align-items: center;
  padding: 0 10px;
  opacity: .85;
}

/* Menü düzeni */
.navtabmenu{
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between; /* logo solda, link grubu ortada */
}

/* Link grubunu ortalamak için yeni kapsayıcı */
.navlinks{
  display: flex;
  justify-content: center;
  flex: 1;
  gap: 20px;
}

/* Logo sola sabit */
.navtabmenu .logo{
  margin-right: auto;
}
.navtabmenu .logo img{
  height: 45px;
  width: auto;
  object-fit: contain;
  display: block;
  border-radius: 10px;
}

.navtabmenu a{
  text-decoration: none;
  color: rgb(29,31,30);
  font-size: 16px;
  padding: 8px 10px;
  border-bottom: 1px solid transparent;
  transition: border-color .25s, text-decoration .25s;
}
.navtabmenu a:hover{ text-decoration: underline }
.navtabmenu li{display:inline-flex;align-items:center}

/* Slideshow */
.slideshow{ background:#000;z-index: 0 !important; }
.panel{ z-index: 2; }
.topbarsocialmedia,.topbarcontact{ z-index: 6; }

/* Her span için sabit hız + crossfade */
.slideshow li span{
  position:absolute; inset:0;
  background-position:50% 50%; background-size:cover;
  opacity:0;
  animation:imageFade 30s linear infinite both;
  will-change:opacity, transform;
}

/* Gecikmeler (5sn aralık) */
.slideshow li:nth-child(1) span{ animation-delay: 0s;  }
.slideshow li:nth-child(2) span{ animation-delay: 5s;  }
.slideshow li:nth-child(3) span{ animation-delay:10s; }
.slideshow li:nth-child(4) span{ animation-delay:15s; }
.slideshow li:nth-child(5) span{ animation-delay:20s; }
.slideshow li:nth-child(6) span{ animation-delay:25s; }

/* Crossfade keyframes */
@keyframes imageFade{
  0%   { opacity:0; transform:scale(1.04); }
  2%   { opacity:1; transform:scale(1.05); }
  18%  { opacity:1; transform:scale(1.08); }
  20%  { opacity:0; transform:scale(1.09); }
  100% { opacity:0; transform:scale(1.09); }
}

/* Paneller */
.panel{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);max-width:min(90vw,880px);width:fit-content;text-align:center;padding:18px 22px;border-radius:12px;z-index:2;}
.glass{background:var(--glass);color:#fff;backdrop-filter:saturate(1.05)blur(2px);}

/* Alt bar */
.bottombar{position:fixed;left:50%;transform:translateX(-50%);bottom:2%;width:420px;height:36px;background:#000;opacity:.7;border-radius:10px;z-index:2;display:flex;align-items:center;justify-content:center;}
#bottomallrightsreserved{font-size:12px;font-weight:600;background:linear-gradient(-45deg,var(--gold1),var(--gold2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;}

.subnav{
  display:flex; justify-content:center; flex-wrap:wrap;
  gap:.6rem; list-style:none; margin:12px 0 16px; padding:0;
}
.subnav a{
  --bg: linear-gradient(135deg, rgba(243,215,148,.85), rgba(160,120,44,.85));
  display:inline-block; padding:.55rem 1rem; border-radius:999px;
  text-decoration:none; color:var(--inkInv);
  background: var(--bg);
  border:1px solid rgba(122,90,29,.45);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.35),
    0 2px 8px rgba(0,0,0,.18);
  transition: transform .12s ease, box-shadow .2s ease, filter .2s ease;
  backdrop-filter: saturate(1.05) blur(2px);
}
.subnav a:hover{ transform:translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 6px 14px rgba(0,0,0,.25); }
.subnav a:focus-visible{ outline:2px solid #fff; outline-offset:2px }

.subnav li.actived a{
  background: linear-gradient(135deg, var(--gold2), var(--gold1));
    color: #fff;
    border-color: rgba(243,215,148,0.8);
    box-shadow:
      0 0 10px rgba(243,215,148,0.55),
      inset 0 1px 1px rgba(255,255,255,0.5);
    transform: scale(1.02);
}

/* Alt panel görünümü */
.subtabservices-pane,.subtababout-pane,.subtabcontact-pane{display:none;}
.subtabservices-pane.actived,.subtababout-pane.actived,.subtabcontact-pane.actived{display:flex;gap:16px;align-items:center;justify-content:center;max-width:min(92vw,900px);margin:0 auto;text-align:left;}
.subpane-media{flex:0 0 300px;max-width:300px}
.subpane-media img{width:100%;height:auto;border-radius:12px;display:block}
.subpane-body{min-width:240px}
.subpane-body h3{margin:.2rem 0 .4rem}

@media (max-width:640px){
  .navbar{ padding-left:8px; }
  .navtabmenu{ gap:12px; flex-direction:column; justify-content:center; }
  .navlinks{flex-direction:column;}
  .navtabmenu .logo img{ height:48px;border-radius: 0 0 10px 10px; }
  .subtabservices-pane.actived,.subtababout-pane.actived,.subtabcontact-pane.actived{flex-direction:column;text-align:center}.subpane-media{max-width:88vw}
}

@media (prefers-color-scheme: dark){
  .subnav a{ color:#111 }
}

@media (prefers-reduced-motion: reduce){
  .slideshow li span{ animation:none; opacity:1; transform:none; }
}

/* Görsel boyutları */
.subpane-media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 12px;
  display: block;
}

.subtabservices-pane .subpane-media img,
.subtababout-pane .subpane-media img,
.subtabcontact-pane .subpane-media img {
  max-width: 320px;
  aspect-ratio: 1 / 1;
}

.panel.glass {
  border: 1.5px solid rgba(243,215,148,.55);
  box-shadow: 0 0 12px rgba(243,215,148,.25),
              inset 0 0 18px rgba(243,215,148,.15);
  backdrop-filter: blur(4px) saturate(1.1);
}
.panel.glass h2, 
.panel.glass h1 {
  border-bottom: 1px solid rgba(243,215,148,.4);
  padding-bottom: 6px;
  margin-bottom: 12px;
}

/* Altın tonlu bağlantılar */
.subtabcontact-pane a {
  color: #f3d794;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.25s ease, text-shadow 0.25s ease;
}

.subtabcontact-pane a:hover,
.subtabcontact-pane a:focus-visible {
  color: #ffffff;
  text-shadow: 0 0 8px rgba(243,215,148,0.6);
}

.subtabcontact-pane p {
  color: #fff;
  line-height: 1.6;
  font-size: 15px;
  letter-spacing: 0.2px;
}

.socialmedialogo{
  width:26px;height:26px;display:block;
  filter:drop-shadow(0 0 4px rgba(243,215,148,0.4));
  transition:transform .2s ease, filter .2s ease;
}
.socialmedialogo:hover{transform:scale(1.1);filter:drop-shadow(0 0 6px rgba(243,215,148,0.8));}

@media (max-width:640px){
  html, body { overflow: auto; }              /* mobilde kaydırma aktif */
  
  /* Paneli mutlak ortalamayı bırak, normal akış + üst marj */
  .panel{
    position: relative;
    left: auto; 
    top: auto; 
    transform: none;
    max-width: 92vw;
    margin: calc(48px + 56px + 20px) auto 12px;
    text-align: center;
  }

  /* Navbar yüksekliği artarsa nefes payı */
  .navtabmenu{ gap: 15px; flex-direction: column; justify-content: center; }
  .navlinks{ flex-direction: column; }
  
  /* Alt bar ekranda kalır, içerikle çakışmayı azalt */
  .bottombar{ bottom: 2%; max-width: 92vw; }
}

/* ==== Üst menü aktif durum (Hizmetler / İletişim) - cam-altın şıklığı ==== */
.navtabmenu li.active a {
  position: relative;
  color: #fff;
  font-weight: 600;
  background: rgba(243,215,148,0.15);
  border-radius: 6px;
  padding: 6px 12px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.4),
    0 0 6px rgba(243,215,148,0.25);
  backdrop-filter: blur(3px) saturate(1.1);
  transition: all 0.25s ease;
}

/* Alt çizgi yerine zarif parıltı efekti */
.navtabmenu li.active a::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 15%;
  width: 70%;
  border-radius: 1px;
  background: rgba(243,215,148,0.35);
  height: 1px;
  opacity: 0.4;
  transition: opacity .25s ease;
}

/* Hover ile alt menüdeki davranışa uyum */
.navtabmenu li.active a:hover::after {
  opacity: 1;
}

/* ==== Mobilde navbar'ı yukarı taşı ve hizayı düzelt ==== */
@media (max-width:640px){
  .navbar{
    top: 12px; /* önce 52px idi, yukarı taşıma */
    margin-top: 0;
    background: none;
    padding: 0;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  /* Menü kısmı (altın bar) */
  .navtabmenu .navlinks{
    background: linear-gradient(-45deg, var(--gold1), var(--gold2));
    width: 100%;
    border-radius: 10px;
    padding: 10px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  /* Logo üstte boşluklu ama barın içinde değil */
  .navtabmenu .logo{
    margin-bottom: 0;
    margin-top: -20px;
    margin-left: 0;
  }

  /* Aradaki sosyal medya/telefon hizasına oturtmak için */
  .topbarcontact, .topbarsocialmedia{
    top: 0;
    transform: translateY(0);
  }
  
  .subtabproduct-pane.actived{ flex-direction:column; text-align:center; }
}

.subtabproduct-pane{display:none;}
.subtabproduct-pane.actived{
  display:flex; gap:16px; align-items:center; justify-content:center;
  max-width:min(92vw,900px); margin:0 auto; text-align:center;
}

#panel-hero{display:none !important;}