/* ============================================================
   Konlife Teknik Servis — Modern Design System 2026
   Mevcut Bootstrap 3 + style.css üzerine eklenir
   ============================================================ */

/* === DESIGN TOKENS === */
:root {
  /* Marka Renkleri */
  --color-primary:        #1863AB;
  --color-primary-dark:   #064E94;
  --color-primary-light:  #e8f0fb;
  --color-secondary:      #ED4B41;
  --color-secondary-dark: #c73b32;

  /* Nötr */
  --color-text:           #353a42;
  --color-text-muted:     #6e7889;
  --color-surface:        #ffffff;
  --color-surface-2:      #f8f8f8;
  --color-border:         #e9e9e9;

  /* Tipografi */
  --font-heading: 'Poppins', sans-serif;
  --font-body:    'Roboto', sans-serif;

  --text-xs:   clamp(0.75rem, 1vw,   0.8rem);
  --text-sm:   clamp(0.875rem,1.5vw, 0.9rem);
  --text-md:   clamp(1rem,    1.5vw, 1.05rem);
  --text-lg:   clamp(1.1rem,  2vw,   1.25rem);
  --text-xl:   clamp(1.25rem, 2.5vw, 1.5rem);
  --text-2xl:  clamp(1.5rem,  3vw,   2rem);
  --text-3xl:  clamp(1.8rem,  4vw,   2.5rem);
  --text-4xl:  clamp(2rem,    5vw,   3rem);

  /* Boşluk (8px grid) */
  --sp-1: 0.25rem;  /* 4px  */
  --sp-2: 0.5rem;   /* 8px  */
  --sp-3: 0.75rem;  /* 12px */
  --sp-4: 1rem;     /* 16px */
  --sp-6: 1.5rem;   /* 24px */
  --sp-8: 2rem;     /* 32px */
  --sp-12: 3rem;    /* 48px */
  --sp-16: 4rem;    /* 64px */

  /* Gölge Sistemi */
  --shadow-sm:  0 1px 3px rgb(0 0 0 / .06), 0 1px 2px rgb(0 0 0 / .04);
  --shadow-md:  0 4px 8px rgb(0 0 0 / .08), 0 2px 4px rgb(0 0 0 / .04);
  --shadow-lg:  0 12px 24px rgb(0 0 0 / .10), 0 4px 8px rgb(0 0 0 / .06);
  --shadow-colored: 0 8px 20px rgb(24 99 171 / .25);

  /* Radius */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 9999px;

  /* Animasyon */
  --ease-out:    cubic-bezier(0, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:    150ms;
  --dur-base:    250ms;
  --dur-slow:    400ms;
}

/* === REDUCED MOTION === */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* === GENEL İYİLEŞTİRMELER === */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  color: var(--color-text);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* === TİPOGRAFİ === */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.2;
  color: var(--color-text);
}

/* === MODERN BUTON SİSTEMİ === */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  border-radius: var(--radius-full) !important;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition:
    background var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-spring);
  position: relative;
  overflow: hidden;
}

.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0);
  transition: background var(--dur-fast);
}

.btn:hover::after  { background: rgba(255,255,255,0.1); }
.btn:active::after { background: rgba(0,0,0,0.05); }

.btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}
.btn:active {
  transform: translateY(0);
  box-shadow: var(--shadow-sm);
}

.btn.btn-alt {
  background: var(--color-secondary) !important;
  box-shadow: 0 4px 12px rgb(237 75 65 / .30);
}
.btn.btn-alt:hover {
  background: var(--color-secondary-dark) !important;
  box-shadow: 0 8px 20px rgb(237 75 65 / .40);
}

/* Telefon arama butonları */
.telefonaramasi {
  transition: transform var(--dur-base) var(--ease-spring);
}
.telefonaramasi:hover {
  transform: scale(1.04);
}

/* === KART SİSTEMİ === */
.box-s1, .box-s2, .box-s3, .box-s4 {
  border-radius: var(--radius-lg) !important;
  transition:
    transform var(--dur-slow) var(--ease-out),
    box-shadow var(--dur-slow) var(--ease-out);
}

.box-s1:hover, .box-s2:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg) !important;
}

/* Servis kartları (feature row) */
.feature-box,
.service-box,
.icon-box {
  border-radius: var(--radius-lg);
  transition:
    transform var(--dur-slow) var(--ease-out),
    box-shadow var(--dur-slow) var(--ease-out);
}

.feature-box:hover,
.service-box:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

/* === HEADER İYİLEŞTİRMELERİ === */
.site-header {
  transition: box-shadow var(--dur-base) var(--ease-out),
              background var(--dur-base) var(--ease-out);
}

.site-header.scrolled,
.site-header.sticky-active {
  box-shadow: 0 2px 20px rgb(0 0 0 / .12) !important;
}

.navbar-brand img {
  transition: transform var(--dur-base) var(--ease-out);
}
.navbar-brand:hover img {
  transform: scale(1.03);
}

/* === SLIDER / BANNER === */
.banner-slider .carousel-item,
.banner-slider .item {
  position: relative;
}

.banner-slider::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgb(24 99 171 / .08) 0%,
    transparent 60%
  );
  pointer-events: none;
}

/* === CTA BÖLÜMÜ === */
.call-action,
.cta-block {
  position: relative;
  overflow: hidden;
}

.call-action::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,
    rgb(24 99 171 / .15) 0%,
    transparent 60%);
  pointer-events: none;
}

/* === FOOTER === */
.footer-widget {
  position: relative;
}

.footer-widget .widget a {
  transition: color var(--dur-fast) var(--ease-out),
              padding-left var(--dur-base) var(--ease-out);
  display: inline-block;
}

.footer-widget .widget a:hover {
  color: var(--color-primary) !important;
  padding-left: 6px;
}

/* === SCROLL ANİMASYON === */
[data-animate] {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.65s var(--ease-out),
    transform 0.65s var(--ease-out);
}

[data-animate].animate-in {
  opacity: 1;
  transform: translateY(0);
}

[data-delay="1"] { transition-delay: 0.1s; }
[data-delay="2"] { transition-delay: 0.2s; }
[data-delay="3"] { transition-delay: 0.3s; }
[data-delay="4"] { transition-delay: 0.4s; }
[data-delay="5"] { transition-delay: 0.5s; }

/* === DISCLAIMER BANNER === */
#konlife-disclaimer-banner {
  font-size: var(--text-sm);
  font-family: var(--font-body);
  line-height: 1.4;
}

/* === SAYFA İÇİ MODÜLLER (menuicerik, menu) === */
.col-md-8 h2,
.col-md-8 h3 {
  color: var(--color-primary);
}

.col-md-8 ul li {
  padding: var(--sp-1) 0;
}

/* === MOBILE CONTACT BAR === */
#mobileNav .fixed-bottom-nav {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* === SOSYAL MEDYA İKONLARI === */
.social-icons a,
.social-links a {
  transition:
    transform var(--dur-base) var(--ease-spring),
    color var(--dur-fast);
}

.social-icons a:hover,
.social-links a:hover {
  transform: scale(1.2) rotate(-3deg);
}

/* === INPUT / FORM === */
.form-control {
  border-radius: var(--radius-md) !important;
  border-color: var(--color-border) !important;
  transition:
    border-color var(--dur-fast),
    box-shadow var(--dur-fast);
}

.form-control:focus {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 3px rgb(24 99 171 / .15) !important;
  outline: none;
}

/* === HEADING SECTION AKSANI === */
.heading-section .with-line::after,
.heading-section::after {
  background: linear-gradient(90deg, var(--color-primary), var(--color-secondary)) !important;
  height: 3px;
  border-radius: var(--radius-full);
}

/* === GÖLGE İYİLEŞTİRMELERİ === */
.thumbnail,
.panel,
.well {
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--dur-base) var(--ease-out);
}

.thumbnail:hover {
  box-shadow: var(--shadow-md);
}

/* === ÖZEL: WhatsApp ve Click-to-Call Butonları === */
a[href^="https://wa.me"],
a[href^="tel:"].fixed-btn {
  transition:
    transform var(--dur-base) var(--ease-spring),
    box-shadow var(--dur-base) var(--ease-out) !important;
}

a[href^="https://wa.me"]:hover,
a[href^="tel:"].fixed-btn:hover {
  transform: scale(1.08) !important;
  box-shadow: 0 8px 24px rgb(0 0 0 / .20) !important;
}

/* === RESPONSIVE === */
@media (max-width: 48em) { /* 768px */
  .btn {
    min-height: 44px;
    min-width: 44px;
    padding: 0.6em 1.2em;
  }

  h1 { font-size: var(--text-3xl); }
  h2 { font-size: var(--text-2xl); }
  h3 { font-size: var(--text-xl);  }

  .box-s1, .box-s2, .box-s3, .box-s4 {
    margin-bottom: var(--sp-4);
  }
}

@media (max-width: 30em) { /* 480px */
  body {
    font-size: 15px;
  }
}

/* === YAZDIRMA === */
@media print {
  .site-header,
  .banner-slider,
  .call-action,
  .cta-block,
  #mobileNav,
  .footer-widget .widget-social {
    display: none !important;
  }

  body {
    font-size: 12pt;
    color: #000;
  }
}