/* assets/css/component.css
   Buttons, header, nav drawer, cards, grids, footer, forms
   FINAL (mobile-first responsive)
*/

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:10px;
  border-radius: var(--r-2);
  padding: 12px 16px;
  font-weight:600;
  border:1px solid transparent;
  transition: transform var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
  will-change: transform;
}
.btn:active{ transform: translateY(1px); }
.btn--sm{ padding: 10px 12px; border-radius: 12px; font-size: 14px; }

.btn--primary{
  background: var(--c-accent-orange);
  color: #0b0f14;
}
.btn--primary:hover{ transform: translateY(-1px); }

.btn--ghost{
  background: transparent;
  border-color: var(--c-border);
  color: var(--c-text);
}
.btn--ghost:hover{ border-color: rgba(255,255,255,.22); transform: translateY(-1px); }

.btn--link{
  padding: 10px 0;
  border:0;
  color: rgba(255,255,255,.86);
}

/* Header */
.site-header{
  position:sticky; top:0; z-index:50;
  background: rgba(11,20,35,.72);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.site-header__inner{
  display:flex; align-items:center; justify-content:space-between;
  padding: 14px 0;
  gap: var(--s-4);
}
.brand{
  display:flex; align-items:center; gap: 12px;
  min-width: 260px;
}
.brand__mark{
  width: 36px; height: 36px; border-radius: 10px;
  background: linear-gradient(135deg, rgba(42,125,191,.75), rgba(242,106,46,.75));
  border: 1px solid rgba(255,255,255,.14);
}
.brand__text{ display:flex; flex-direction:column; line-height:1.1; }
.brand__name{ font-family: var(--ff-heading); font-weight:700; letter-spacing:.6px; }
.brand__tag{ font-size: 12px; color: rgba(255,255,255,.70); }

.nav__list{ list-style:none; display:flex; gap: 18px; margin:0; padding:0; }
.nav__item{ margin:0; padding:0; }
.nav__link{
  font-weight:650; font-size:14px;
  color: rgba(255,255,255,.82);
  padding: 10px 10px;
  border-radius: 12px;
  display:inline-flex;
  align-items:center;
  border: 1px solid transparent;
}
.nav__link:hover{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.10);
}

.site-header__actions{ display:flex; align-items:center; gap: 10px; }

/* Burger */
.burger{
  display:none;
  width: 44px; height: 44px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.10);
  background: transparent;
  padding: 10px;
}
.burger span{
  display:block; height:2px; background: rgba(255,255,255,.86);
  margin: 6px 0;
  border-radius: 2px;
}

/* Mobile drawer */
.mobile-drawer[hidden]{ display:none !important; }
body.nav-open .mobile-drawer{ display:block; }

.mobile-drawer{
  border-top: 1px solid rgba(255,255,255,.08);
  background: rgba(11,20,35,.95);
}
.mobile-drawer__inner{ padding: 16px 0 22px; }
.mobile-nav{ list-style:none; margin:0; padding:0; display:grid; gap: 8px; }
.mobile-nav__link{
  display:block;
  padding: 12px 12px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  color: rgba(255,255,255,.90);
}
.mobile-nav__link:hover{
  border-color: rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
}
.mobile-drawer__cta{ display:grid; gap: 10px; margin-top: 12px; }

/* Mobile breakpoint */

@media (max-width: 980px){
  body.nav-open{ overflow: hidden; }
}
@media (max-width: 980px){
  .nav{ display:none; }
  .burger{ display:inline-block; }
  .brand{ min-width: auto; }
  .brand__tag{ display:none; }
}

/* Cards / grids */
.card{
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--r-2);
  padding: var(--s-5);
  box-shadow: var(--sh-1);
}

.cards3{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-4);
}
@media (max-width: 980px){
  .cards3{ grid-template-columns: 1fr; }
}

/* Footer */
.site-footer{
  border-top: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.18);
  padding: var(--s-7) 0 var(--s-5);
}
.site-footer__grid{
  display:grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.4fr;
  gap: var(--s-6);
}
.footer-title{ font-family: var(--ff-heading); font-weight:600; margin:0 0 var(--s-3); }
.footer-links, .footer-meta{ list-style:none; margin:0; padding:0; display:grid; gap: 10px; }
.footer-links a{ color: rgba(255,255,255,.80); }
.footer-links a:hover{ color: rgba(255,255,255,.95); }

.footer-meta .meta-k{ display:block; font-size: 12px; color: rgba(255,255,255,.60); }
.footer-meta .meta-v{ display:block; color: rgba(255,255,255,.85); }

.footer-brand{ display:flex; gap: 12px; align-items:flex-start; }
.footer-brand__mark{
  width: 32px; height:32px; border-radius: 10px;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
}
.footer-brand__name{ display:block; margin-bottom: 6px; }

.site-footer__bottom{
  margin-top: var(--s-6);
  padding-top: var(--s-4);
  border-top: 1px solid rgba(255,255,255,.08);
}

@media (max-width: 980px){
  .site-footer__grid{ grid-template-columns: 1fr; }
}

/* Forms */
.form-shell{
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  border-radius: 20px;
  padding: var(--s-6);
  box-shadow: var(--sh-1);
}
.lead-form{ display:block; }

.fs{
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.12);
  border-radius: 18px;
  padding: var(--s-5);
  margin: 0 0 var(--s-5);
}
.fs__title{
  font-family: var(--ff-heading);
  font-weight:700;
  letter-spacing: .6px;
  margin: 0 0 var(--s-4);
  padding: 0 8px;
}

.field{ display:grid; gap: 8px; }
.field label{ font-weight:700; font-size: 13px; color: rgba(255,255,255,.86); }
.field__err{ margin:0; color: rgba(242,106,46,.95); font-weight:800; font-size: 12px; }

input[type="text"],
input[type="email"],
input[type="tel"],
select,
textarea{
  width:100%;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  color: var(--c-text);
  padding: 12px 12px;
  outline: none;
}
textarea{ resize: vertical; min-height: 120px; }
input:focus, select:focus, textarea:focus{
  border-color: rgba(42,125,191,.45);
  box-shadow: 0 0 0 4px rgba(42,125,191,.14);
}

.grid2{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-4);
}
.grid-span2{ grid-column: span 2; }
@media (max-width: 980px){
  .grid2{ grid-template-columns: 1fr; }
  .grid-span2{ grid-column: auto; }
}

.checks{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
@media (max-width: 980px){ .checks{ grid-template-columns: 1fr; } }

.check{
  display:flex;
  gap: 10px;
  align-items:flex-start;
  padding: 10px 10px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.02);
}
.check input{ margin-top: 3px; }
.check span{ font-weight:700; color: rgba(255,255,255,.84); font-size: 13px; }

.form-actions{
  display:flex;
  gap: 12px;
  flex-wrap:wrap;
  margin-top: var(--s-4);
}

.alert{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  padding: 16px 16px;
  margin-bottom: var(--s-4);
}
.alert--success{
  border-color: rgba(42,125,191,.35);
  background: rgba(42,125,191,.10);
}
.alert--error{
  border-color: rgba(242,106,46,.40);
  background: rgba(242,106,46,.10);
}
.error-list{ margin: 10px 0 0; padding-left: 18px; }
.error-list a{ text-decoration: underline; }

.hp{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }


/* Nav open state */
.burger{ position: relative; z-index: 60; }
.mobile-drawer{ position: relative; z-index: 55; }

/* ===== Header Click Safety (v14) =====
   Ana sayfada hero/canvas/overlay bazen header üstüne binebilir.
   Header'ı en üste alıp burger tıklamasını garanti eder. */
.site-header{
  position: sticky;
  top: 0;
  z-index: 3000;
  isolation: isolate;
}
.site-header__inner{ position: relative; z-index: 3001; }
.burger{
  position: relative;
  z-index: 3002;
  pointer-events: auto;
  touch-action: manipulation;
}

/* =========================
   HEADER LOGO REAL IMAGE
========================= */

.brand{
  display:flex;
  align-items:center;
  gap:14px;
  text-decoration:none;
}

.brand__logo{
  width:110px;
  height:110px;
  object-fit:contain;
  border-radius:10px;
  transition: transform .25s ease;
  
}

@media (max-width: 768px){
  .brand__logo{
    width:80px;
    height:80px;
  }
}

/* Hover hafif premium hareket */
.brand:hover .brand__logo{
  transform: scale(1.05);
}

.brand__name{
  display:block;
  font-weight:600;
  font-size:16px;
}

.brand__tag{
  display:block;
  font-size:13px;
  opacity:.75;
}

/* Eski gradient kutuyu kapat */
.brand__mark{
  display:none !important;
}

@media (max-width: 768px){
  .site-header .btn--sm{
    display: none !important;
  }
}

@media (max-width: 768px){
  .site-footer{
    text-align: center;
  }
}


/* ===============================
   SERVICE SHOWCASE FINAL
================================ */

.service-showcase{ padding:80px 0; }

.section-head h2{
  font-size:36px;
  font-weight:900;
  margin-bottom:40px;
}

.service-filter{
  display:flex;
  gap:24px;
  flex-wrap:wrap;
  margin-bottom:40px;
}

.filter-btn{
  background:none;
  border:none;
  color:#7f9bb8;
  font-weight:700;
  cursor:pointer;
  transition:.3s;
}

.filter-btn.active,
.filter-btn:hover{
  color:#ffffff;
}

.service-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:30px;
}

@media(max-width:1024px){
  .service-grid{ grid-template-columns:repeat(2,1fr); }
}

@media(max-width:640px){
  .service-grid{ grid-template-columns:1fr; }
}

.service-card{
  perspective:1000px;
  height:160px;
  display:block;
  text-decoration:none;
}

.card-inner{
  position:relative;
  width:100%;
  height:100%;
  transform-style:preserve-3d;
  transition:transform .7s cubic-bezier(.2,.8,.2,1);
}

.service-card:hover .card-inner{
  transform:rotateY(180deg);
}

.card-front,
.card-back{
  position:absolute;
  inset:0;
  border-radius:20px;
  overflow:hidden;
  backface-visibility:hidden;
}

.card-front{
  display:flex;
  align-items:flex-end;
  padding:30px;
  background-size:cover;
  background-position:center;
}

.card-front::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.2),rgba(0,0,0,.85));
}

.card-front h3{
  position:relative;
  z-index:2;
  color:#fff;
  font-weight:900;
  font-size:20px;
}

.card-back{
  background:#0f2236;
  color:#fff;
  transform:rotateY(180deg);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:30px;
  text-align:center;
}

.service-card.is-hidden{
  display:none !important;
}

/* MOBILE */
@media(max-width:768px){
  .service-card{
    perspective:none;
    height:auto;
  }
  .card-inner{
    transform:none !important;
  }
  .card-front,
  .card-back{
    position:relative;
    transform:none !important;
  }
}


/* IMAGE MAP */
.card-front[data-img="enerji-nakil"]{
  background-image:url("/assets/img/services/hizmet2.webp");
}

.card-front[data-img="ag-og-yg"]{
  background-image:url("/assets/img/services/hizmet1.webp");
}

.card-front[data-img="fiber"]{
  background-image:url("/assets/img/services/hizmet4.webp");
}

.card-front[data-img="guvenlik"]{
  background-image:url("/assets/img/services/hizmet5.webp");
}

.card-front[data-img="hemzemin"]{
  background-image:url("/assets/img/services/hizmet3.webp");
}

.card-front[data-img="enerji-yonetim"]{
  background-image:url("/assets/img/services/hizmet6.webp");
}

.card-front[data-img="yangin-algilama"]{
  background-image:url("/assets/img/services/yangın.webp");
}

.card-front[data-img="deplase-calismalari"]{
  background-image:url("/assets/img/services/deplase.webp");
}

.card-front[data-img="bariyer-gecis"]{
  background-image:url("/assets/img/services/bariyer.webp");
}

.card-front[data-img="demiryolu-sinyalizasyon"]{
  background-image:url("/assets/img/services/sinyalizasyon.webp");
}

.service-desc{
  margin-top:-20px;
  margin-bottom:40px;
}




/* =========================================================
   HOMEPAGE REFERANSLAR — MOBİL TEK SATIR CAROUSEL (FIX)
   Hedef: SADECE mobilde tek satır yatay akış + sağ/sol nav.
   Desktop'ta mevcut grid davranışı aynen kalır.
   Not: .refs-grid/.ref-logo başka dosyalarda tekrar tanımlandığı için
        burada .refs-carousel scope + !important ile kilitlenir.
========================================================= */

.refs-carousel{ position: relative; }
.refs-carousel .refs-nav{ display:none; }

@media (max-width: 768px){
  .refs-carousel{ margin-top: var(--s-4); }

  /* Nav buttons (sadece mobil) */
  .refs-carousel .refs-nav{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(12,18,28,.72);
    color: rgba(255,255,255,.92);
    display: grid !important;
    place-items: center;
    box-shadow: 0 10px 30px rgba(0,0,0,.25);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
  .refs-carousel .refs-nav--prev{ left: 6px; }
  .refs-carousel .refs-nav--next{ right: 6px; }

  /* Track */
  .refs-carousel .refs-track{
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 6px 52px; /* nav için boşluk */
    scrollbar-width: none;
  }
  .refs-carousel .refs-track::-webkit-scrollbar{ display:none; }

  /* Tek satır */
  .refs-carousel .refs-grid{
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 12px !important;
    align-items: stretch !important;
  }

  /* Kart ölçüsü */
  .refs-carousel .ref-logo{
    flex: 0 0 auto !important;
    width: 190px !important;
    scroll-snap-align: start;
  }

  /* Görsel oturtma */
  .refs-carousel .ref-logo img{
    max-width: 140px !important;
    max-height: 60px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
  }

  /* Reveal gecikmesi: kaydırmada takılmasın */
  .refs-carousel .ref-logo.reveal{ transition: none !important; }
}

@media (min-width: 769px){
  .refs-carousel .refs-nav{ display:none !important; }
  .refs-carousel .refs-track{ overflow: visible !important; padding: 0 !important; }
}