/* TeknikPro Servis - Ozel stiller (Tailwind tamamlayicisi) */

:root{
  --navy:#0A1A33;
  --primary:#1D4ED8;
  --accent:#06B6D4;
}

html{ scroll-behavior:smooth; }
body{ -webkit-font-smoothing:antialiased; }
section[id]{ scroll-margin-top:90px; }

/* ---- Header / Navbar ---- */
[data-navbar]{ transition:background .3s ease, box-shadow .3s ease; }
[data-navbar] .topbar{ overflow:hidden; transition:height .3s ease, opacity .25s ease; }
[data-navbar] .mainbar{ background:rgba(255,255,255,0.96); backdrop-filter:saturate(160%) blur(8px); transition:background .3s ease; }

/* Acik (default) sayfalarda header beyaz, ince golge */
[data-navbar]:not(.on-dark){ background:#fff; box-shadow:0 1px 0 rgba(15,23,42,0.06); }
[data-navbar].is-scrolled{ box-shadow:0 10px 30px -18px rgba(13,38,76,0.35); }

/* KOYU HERO uzerinde: header seffaf + okunabilirlik icin ust scrim */
[data-navbar].on-dark{
  background:linear-gradient(to bottom, rgba(4,12,28,0.55) 0%, rgba(4,12,28,0.18) 60%, transparent 100%);
}
[data-navbar].on-dark .mainbar{ background:transparent; backdrop-filter:none; }
[data-navbar].on-dark .topbar{ color:rgba(255,255,255,0.85); border-color:rgba(255,255,255,0.15); }
[data-navbar].on-dark [data-logo-text]{ color:#fff; }
[data-navbar].on-dark [data-nav-link]{ color:rgba(255,255,255,0.9); }
[data-navbar].on-dark [data-nav-link]:hover{ color:#fff; background:rgba(255,255,255,0.12); }
[data-navbar].on-dark [data-menu-toggle]{ color:#fff; }
[data-navbar].on-dark [data-wa-btn]{ background:rgba(255,255,255,0.12); color:#fff; }

/* Scroll edilince koyu hero header'i da beyazlasir */
[data-navbar].on-dark.is-scrolled{ background:rgba(255,255,255,0.96); backdrop-filter:saturate(160%) blur(10px); box-shadow:0 10px 30px -18px rgba(13,38,76,0.35); }
[data-navbar].on-dark.is-scrolled .topbar{ height:0; opacity:0; border:0; }
[data-navbar].on-dark.is-scrolled [data-logo-text]{ color:var(--navy); }
[data-navbar].on-dark.is-scrolled [data-nav-link]{ color:#334155; }
[data-navbar].on-dark.is-scrolled [data-nav-link]:hover{ color:var(--primary); background:var(--primary-700); background:rgba(29,78,216,0.08); }
[data-navbar].on-dark.is-scrolled [data-menu-toggle]{ color:var(--navy); }
[data-navbar].on-dark.is-scrolled [data-wa-btn]{ background:#ecfdf5; color:#059669; }

/* Acik sayfalarda da scroll edince topbar gizlensin */
[data-navbar]:not(.on-dark).is-scrolled .topbar{ height:0; opacity:0; border:0; }

/* Hero'yu seffaf header'in altina tasimak icin */
.under-header{ margin-top:-64px; padding-top:64px; }
@media (min-width:768px){ .under-header{ margin-top:-100px; padding-top:100px; } }

/* ---- Hero arka plan deseni ---- */
/* .hero-grid arka plan rengi header.php icindeki dinamik <style> ile gelir (Renk & Tema) */
.hero-grid{ position:relative; }
.hero-grid::before{
  content:"";
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 30%, #000 40%, transparent 100%);
          mask-image:radial-gradient(ellipse 80% 70% at 50% 30%, #000 40%, transparent 100%);
}

/* ---- Kartlar ---- */
.card-hover{ transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.card-hover:hover{ transform:translateY(-4px); }

/* Hizmet karti ikon kutusu */
.svc-icon{
  background:linear-gradient(135deg, rgba(29,78,216,0.12), rgba(6,182,212,0.12));
  color:var(--primary);
}

/* Gradient metin: renkler header.php dinamik <style> icinde tanimli */

/* Section etiketi */
.eyebrow{
  display:inline-flex; align-items:center; gap:.5rem;
  font-weight:600; font-size:.8rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--primary);
}

/* SSS accordion */
.faq-item[open] .faq-icon{ transform:rotate(180deg); }
.faq-icon{ transition:transform .2s ease; }
details.faq-item summary::-webkit-details-marker{ display:none; }

/* Form alanlari Tailwind forms ile uyumlu ince ayar */
.form-input, .form-textarea, .form-select{
  border-radius:.75rem; border-color:#e2e8f0;
}
.form-input:focus, .form-textarea:focus, .form-select:focus{
  border-color:var(--primary); box-shadow:0 0 0 3px rgba(29,78,216,.15);
}

/* Surec adimi baglanti cizgisi: renkler header.php dinamik <style> icinde */

[data-aos]{ pointer-events:none; }
[data-aos].aos-animate{ pointer-events:auto; }