/* ==========================================================================
   MARIN DOOR — custom.css
   Extends the base template (style.css / plugins.css) — does not edit them.
   Index:
     1. font import + brand tokens
     2. logo sizing fix
     3. nav-tools (language switcher / search / sidebar trigger)
     4. language dropdown
     5. search overlay
     6. offcanvas sidebar menu
     7. hero: slogan/description, tightened spacing, scroll-down cue
     8. hero background artwork (placeholder, no stock photos)
     9. responsive
     20. arama sonuçları (search results)
   ========================================================================== */

/* 1. font import + brand tokens ------------------------------------------ */
@import url('https://fonts.googleapis.com/css2?family=Faculty+Glyphic&family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  --md-blue: #0B5AAE;
  --md-blue-deep: #073A73;
  --md-blue-light: #4F8FD1;
  --md-charcoal: #3A3A3C;
  --md-white: #FFFFFF;
  --md-font-display: 'Faculty Glyphic', sans-serif;
  --md-font-body: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* body copy / descriptions sitewide use Inter by default; headings, nav
   and buttons override this explicitly where they need a different face */
body {
  font-family: var(--md-font-body);
}

/* ==========================================================================
   1b. PRELOADER — "pencere efekti": iki panel ortadan ikiye ayrılıp yana
   kayarak siteyi açığa çıkarıyor. Sol panelde Marin Door, sağ panelde
   Marin Cam logosu (her ikisi kendi yarısının ortasında), koyu lacivert
   zemin. GSAP timeline'ı custom.js içinde.
   ========================================================================== */
.loader-wrap {
  position: fixed;
  z-index: 999999;
  inset: 0;
  height: 100vh;
  width: 100vw;
  display: flex;
  overflow: hidden;
}

.loader-panel {
  position: relative;
  width: 50%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--md-blue-deep);
  background-image: linear-gradient(160deg, #073A73 0%, #052443 100%);
}

.loader-panel-left {
  border-right: 1px solid rgba(255,255,255,.08);
}

.loader-panel-logo {
  width: 168px;
  height: auto;
}

@media only screen and (max-width: 767px) {
  .loader-panel-logo {
    width: 110px;
  }
}

/* 2. logo sizing fix ------------------------------------------------------ */
/* şablonun eski (flex olmayan) navbar yapısından kalan padding-top
   kalıntıları — yeni flex + align-items:center nav ile çakışıp logoyu
   aşağı/asimetrik kaydırıyordu, sıfırlıyoruz */
.logo,
.main-navigation-bg .logo {
  padding-top: 0;
}

.navbar-brand.logo {
  position: relative;
  display: inline-block;
  width: 114px;
  height: 58px;
}

.main-navigation-bg .navbar-brand.logo {
  width: 91px;
  height: 46px;
}

.logo .logo-light,
.logo .logo-dark {
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  height: 58px !important;
  width: 114px;
}

/* crossfade wrapper — two logo frames stacked, JS toggles .active every
   10s to alternate between the two brand marks with a soft fade+scale */
.logo-crossfade {
  overflow: visible;
}

.logo-crossfade .logo-frame {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: auto;
  max-width: none;
  opacity: 0;
  transform: scale(.94);
  transition: opacity 1s ease-in-out, transform 1s ease-in-out;
  pointer-events: none;
}

.logo-crossfade .logo-frame.active {
  opacity: 1;
  transform: scale(1);
}

/* ==========================================================================
   2b. NAV LAYOUT REWRITE — a single flex row (logo / menu / tools) instead
   of the template's stacked padding-offset hack. This is what was causing
   the menu titles and the language/tools block to sit at different
   vertical baselines ("kayma") between the two states.

   IMPORTANT: the outer <nav> itself must carry the height (not just
   .container) — the template's own .main-navigation-bg rule sets a fixed
   58px height + white background on <nav>. If only .container were taller
   than that, the bottom of the menu row would poke out past the white
   background and visually collide with the hero content underneath
   (this was the "sticky header bozuk" bug).
   ========================================================================== */
nav.navbar {
  height: 104px;
  transition: height .4s ease-out, background .4s ease-out;
}

nav.navbar.main-navigation-bg {
  height: 86px;
}

/* sticky durumda header daraldığı için logoyu da hafifçe küçültüp
   üst/alt boşluğu dengeliyoruz — önceki haliyle logo alt kenara çok
   yakın duruyor, menüyle sıkışık hissettiriyordu */
.main-navigation-bg .logo .logo-light,
.main-navigation-bg .logo .logo-dark {
  height: 46px !important;
  width: 91px;
}

.navbar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

.navbar .navbar-header {
  flex: 0 0 auto;
}

.navbar .logo {
  padding-top: 0 !important;
}

.navbar .main-navigation {
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
}

.navbar .main-navigation .navbar-nav {
  display: flex;
  align-items: center;
  float: none;
  margin: 0;
}

.navbar .main-navigation .navbar-nav li {
  float: none;
}

.navbar .main-navigation .navbar-nav li a,
.navbar.main-navigation-bg .main-navigation .navbar-nav li a,
.main-navigation-bg .navbar .main-navigation .navbar-nav li a {
  padding: 0 17px !important;
  line-height: normal;
  font-family: var(--md-font-display);
  font-size: 16px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: .01em;
}

.navbar .nav-tools {
  position: static;
  flex: 0 0 auto;
  margin-left: 26px;
  transition: none;
  /* NOT: "margin-top: 26px" burada nav-tools'u (dil/arama/sidebar ikonları)
     menü başlıklarının (aynı satırda, .navbar .container'ın
     align-items:center ile ortaladığı) hizasından aşağı kaydırıp masaüstünde
     iki grubun farklı yükseklikte görünmesine sebep oluyordu — kaldırıldı,
     artık ikisi de aynı flex satırında aynı şekilde ortalanıyor. */
}

@media only screen and (max-width: 879px) {
  nav.navbar,
  nav.navbar.main-navigation-bg {
    height: 68px;
  }
  /* logo ile dil/arama/menü ikonları arasına, ve ikon grubunun ekran
     kenarına çok az boşluk kalmasına biraz nefes alanı ekliyoruz.
     NOT: masaüstü kuralındaki "margin-top: 26px" burada da geçerli
     kalıyordu — flex ile zaten ortalanan nav-tools'u aşağı ittiriyor ve
     sticky header'da (kısalmış 60px yükseklikte) çok aşağıda/dışarıda
     kalmasına sebep oluyordu; mobilde bunu sıfırlıyoruz. */
  .navbar .nav-tools {
    margin-left: 20px;
    margin-right: 8px;
    margin-top: 0;
    gap: 10px;
  }
  /* iç sayfalarda üstteki mavi/şeffaf (henüz scroll edilmemiş) header'da
     logo ve araçlar üst kenara çok yakın duruyordu — sadece bu durumda
     (":not(.main-navigation-bg)") yukarıdan az bir boşluk ekliyoruz;
     sticky/beyaz duruma (.main-navigation-bg) dokunmuyor. */
  nav.navbar:not(.main-navigation-bg) .navbar-header,
  nav.navbar:not(.main-navigation-bg) .nav-tools {
    margin-top: 16px;
  }
}

/* ==========================================================================
   2c. MENU HOVER — sibling-dim + sliding underline
   ========================================================================== */
.navbar .main-navigation .navbar-nav li a {
  position: relative;
  transition: opacity .3s ease-out, color .3s ease-out;
}

.navbar .main-navigation .navbar-nav li a::after {
  content: "";
  position: absolute;
  left: 17px;
  right: 17px;
  bottom: -2px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s cubic-bezier(.4,0,.2,1);
}

.navbar .main-navigation .navbar-nav li a:hover::after {
  transform: scaleX(1);
}

/* Sadece üst seviye menü linkleri (Anasayfa/Kurumsal/Ürünler...) soluklaşsın;
   önceki ">li a" (soyundan gelen) seçici, açık mega menü içindeki ürün
   grubu linklerini de eşleyip onları da soluk gösteriyordu. ">" (doğrudan
   çocuk) ile sınırlayarak mega menü/dropdown içeriği bu etkiden muaf
   tutuluyor. */
.navbar .main-navigation .navbar-nav:hover > li > a:not(:hover) {
  opacity: .45;
}

/* ==========================================================================
   2d. DROPDOWN (Kurumsal) + MEGA MENU (Ürünler)
   ========================================================================== */
.main-navigation .navbar-nav li.has-dropdown,
.main-navigation .navbar-nav li.has-megamenu {
  position: relative;
  align-self: stretch;
  display: flex;
}

.main-navigation .navbar-nav li.has-dropdown > a,
.main-navigation .navbar-nav li.has-megamenu > a {
  display: flex;
  align-items: center;
}

.nav-caret {
  font-size: 9px;
  margin-left: 5px;
  position: relative;
  top: -1px;
  transition: transform .3s ease-out;
}

.has-dropdown.menu-open .nav-caret,
.has-megamenu.menu-open .nav-caret {
  transform: rotate(180deg);
}

/* simple dropdown — Kurumsal. Position is set dynamically in custom.js
   (fixed, anchored to the header bar's own bottom edge) so it always opens
   flush under the full nav bar rather than under the individual link. */
.nav-submenu {
  position: fixed;
  min-width: 250px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 24px 50px rgba(7,58,115,.18);
  padding: 16px;
  margin: 0;
  list-style: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .3s ease-out, transform .3s ease-out, visibility .3s;
  z-index: 60;
}

.has-dropdown.menu-open .nav-submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav-submenu li + li {
  margin-top: 10px;
}

.nav-submenu li a {
  display: block;
  padding: 16px 18px !important;
  border-radius: 10px;
  font-family: var(--md-font-body) !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  letter-spacing: .01em;
  color: var(--md-charcoal) !important;
  text-decoration: none;
  white-space: nowrap;
  text-transform: none;
  transition: background .2s ease-out, color .2s ease-out, padding-left .2s ease-out;
}

.nav-submenu li a::after {
  display: none;
}

.nav-submenu li a:hover {
  background: #EEF4FB;
  color: var(--md-blue) !important;
  padding-left: 22px !important;
}

/* mega menu — Ürünler. Same fixed, JS-positioned anchoring as the dropdown. */
.mega-menu {
  position: fixed;
  width: 600px;
  max-width: 88vw;
  background: #fff;
  border-radius: 22px;
  box-shadow: 0 28px 65px rgba(7,58,115,.2);
  padding: 38px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 34px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .35s ease-out, transform .35s ease-out, visibility .35s;
  z-index: 60;
}

.has-megamenu.menu-open .mega-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.mega-menu-col-visual {
  display: block;
  position: relative;
  height: 100px;
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 20px;
  transition: opacity .25s ease-out;
}

.mega-menu-col-visual:hover {
  opacity: .85;
}

.mega-menu-col h4 {
  font-family: var(--md-font-display);
  font-weight: 400;
  font-size: 20px;
  color: var(--md-charcoal);
  margin: 0 0 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid #EEF0F3;
}

.mega-menu-col h4 a {
  color: inherit !important;
  text-decoration: none;
  text-transform: none !important;
  font-family: var(--md-font-display) !important;
  font-size: 20px !important;
  font-weight: 400 !important;
  letter-spacing: normal !important;
  padding: 0 !important;
  transition: color .2s ease-out;
}

.mega-menu-col h4 a::after {
  display: none;
}

.mega-menu-col h4 a:hover {
  color: var(--md-blue) !important;
}

.mega-menu-col ul li.mega-menu-all {
  margin-top: 6px;
  padding-top: 10px;
  border-top: 1px solid #EEF0F3;
}

.mega-menu-col ul li.mega-menu-all a {
  color: var(--md-blue) !important;
  font-weight: 700 !important;
  display: flex !important;
  align-items: center;
  gap: 6px;
}

.mega-menu-col ul li.mega-menu-all a:hover {
  gap: 10px;
}


.mega-menu-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mega-menu-col ul li a {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 8px 0 !important;
  font-family: var(--md-font-body) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #6B7280 !important;
  text-decoration: none;
  text-transform: none;
  transition: color .25s ease-out, gap .25s ease-out;
}

.mega-menu-col ul li a::after {
  display: none;
}

.mega-menu-col ul li a:hover {
  color: var(--md-blue) !important;
  gap: 8px;
}

.mega-menu-col ul li a:hover::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--md-blue);
  flex-shrink: 0;
}

/* ==========================================================================
   3. NAV TOOLS ROW (language / search / sidebar trigger)
   ========================================================================== */
/* right/top offsets clear the template's 40px decorative frame (present
   at >=880px — see style.css .border-top/.border-right); sitting under it
   would make light icons blend into its white background */
.nav-tools {
  display: flex;
  align-items: center;
  gap: 14px;
  position: absolute;
  right: 60px;
  top: 46px;
  z-index: 20;
  transition: top .4s ease-out;
}

.main-navigation-bg .nav-tools {
  top: 22px;
}

@media only screen and (max-width: 879px) {
  .nav-tools {
    top: 14px;
    right: 55px;
    gap: 8px;
  }
  .main-navigation-bg .nav-tools {
    top: 14px;
  }
}

.tool-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.55);
  background: transparent;
  color: #fff;
  cursor: pointer;
  padding: 0;
  transition: all .3s ease-out;
}

.tool-circle:hover {
  background: #fff;
  border-color: #fff;
  color: var(--md-blue);
}

.main-navigation-bg .tool-circle {
  border-color: rgba(17,17,17,.25);
  color: #111;
}

.main-navigation-bg .tool-circle:hover {
  background: var(--md-blue);
  border-color: var(--md-blue);
  color: #fff;
}

.tool-circle i {
  font-size: 15px;
  line-height: 1;
}

/* dot-grid sidebar icon (2 x 2 dots inside a circle) */
.dot-grid {
  display: grid;
  grid-template-columns: repeat(2, 4px);
  grid-template-rows: repeat(2, 4px);
  gap: 4px;
}

.dot-grid span {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  display: block;
}

/* ==========================================================================
   4. LANGUAGE SWITCHER
   ========================================================================== */
.lang-switcher {
  position: relative;
}

.lang-current {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 38px;
  padding: 0 12px 0 4px;
  border-radius: 19px;
  border: 1px solid rgba(255,255,255,.55);
  background: transparent;
  color: #fff;
  cursor: pointer;
  transition: all .3s ease-out;
}

.lang-current:hover {
  background: #fff;
  border-color: #fff;
  color: var(--md-blue);
}

.main-navigation-bg .lang-current {
  border-color: rgba(17,17,17,.25);
  color: #111;
}

.main-navigation-bg .lang-current:hover {
  background: var(--md-blue);
  border-color: var(--md-blue);
  color: #fff;
}

.flag-circle {
  display: block;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: 0 0 0 1px rgba(0,0,0,.08);
}

.flag-circle svg {
  width: 100%;
  height: 100%;
  display: block;
}

.lang-code {
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
}

.lang-dropdown {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  min-width: 168px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 12px 34px rgba(7,58,115,.18);
  padding: 8px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: all .25s ease-out;
  z-index: 30;
}

.lang-switcher.open .lang-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.lang-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 6px;
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: #333;
  text-decoration: none;
  transition: background .2s ease-out;
}

.lang-option:hover,
.lang-option.active {
  background: #EEF4FB;
  color: var(--md-blue);
}

/* ==========================================================================
   5. SEARCH OVERLAY
   ========================================================================== */
.search-overlay {
  position: fixed;
  inset: 0;
  background: rgba(7, 26, 48, .97);
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s ease-out, visibility .35s ease-out;
}

.search-overlay.open {
  opacity: 1;
  visibility: visible;
}

.search-overlay-inner {
  width: 100%;
  max-width: 720px;
  padding: 0 30px;
  text-align: center;
}

.search-overlay-inner form {
  display: flex;
  align-items: center;
  border-bottom: 2px solid rgba(255,255,255,.35);
  padding-bottom: 18px;
}

.search-overlay-inner input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: #fff;
  font-family: var(--md-font-display);
  font-size: 32px;
  padding: 6px 0;
}

.search-overlay-inner input::placeholder {
  color: rgba(255,255,255,.4);
}

.search-overlay-inner button[type="submit"] {
  background: none;
  border: none;
  color: #fff;
  font-size: 22px;
  cursor: pointer;
  padding: 0 0 0 16px;
}

.search-close {
  position: absolute;
  top: 34px;
  right: 34px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.4);
  background: transparent;
  color: #fff;
  cursor: pointer;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .3s ease-out;
}

.search-close:hover {
  background: #fff;
  color: var(--md-blue);
}

@media only screen and (max-width: 768px) {
  .search-overlay-inner input { font-size: 22px; }
  .search-close { top: 18px; right: 18px; width: 38px; height: 38px; }
}

/* ==========================================================================
   6. OFFCANVAS SIDEBAR MENU
   ========================================================================== */
.sidebar-overlay {
  position: fixed;
  inset: 0;
  background: rgba(7, 26, 48, .55);
  z-index: 998;
  opacity: 0;
  visibility: hidden;
  transition: all .4s ease-out;
}

.sidebar-overlay.open {
  opacity: 1;
  visibility: visible;
}

.site-sidebar {
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  width: 420px;
  /* "ortaya doğru" biraz daha genişleyip sol kenara (ekranın ortasına)
     daha çok yaklaşsın diye 92vw'den 96vw'ye çıkarıldı */
  max-width: 96vw;
  background: var(--md-blue-deep);
  background-image: linear-gradient(165deg, #073A73 0%, #063057 60%, #052443 100%);
  z-index: 999;
  transform: translateX(100%);
  transition: transform .5s cubic-bezier(.77,0,.18,1);
  display: flex;
  flex-direction: column;
  padding: 50px 46px;
  overflow-y: auto;
}

.site-sidebar.open {
  transform: translateX(0);
}

.sidebar-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 60px;
}

.sidebar-top img {
  max-height: 34px;
  width: auto;
}

.sidebar-close {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.35);
  background: transparent;
  color: #fff;
  cursor: pointer;
  font-size: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .3s ease-out;
  flex-shrink: 0;
}

.sidebar-close:hover {
  background: #fff;
  color: var(--md-blue-deep);
}

.sidebar-nav {
  list-style: none;
  margin: 0 0 auto 0;
  padding: 0;
}

.sidebar-nav li {
  border-bottom: 1px solid rgba(255,255,255,.12);
}

.sidebar-nav li:first-child {
  border-top: 1px solid rgba(255,255,255,.12);
}

.sidebar-nav a {
  display: block;
  padding: 16px 4px;
  font-family: var(--md-font-display);
  font-size: 26px;
  color: #fff;
  text-decoration: none;
  letter-spacing: .01em;
  transition: all .3s ease-out;
  position: relative;
}

.sidebar-nav a:hover {
  color: var(--md-blue-light);
  padding-left: 12px;
}

.sidebar-bottom {
  margin-top: 50px;
  padding-top: 30px;
  border-top: 1px solid rgba(255,255,255,.12);
}

.sidebar-bottom p {
  font-family: var(--md-font-body);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgba(255,255,255,.5);
  margin: 0 0 8px 0;
}

.sidebar-bottom a.sidebar-contact-line {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  margin-bottom: 4px;
}

.sidebar-bottom a.sidebar-contact-line:hover {
  color: var(--md-blue-light);
}

.sidebar-social {
  display: flex;
  gap: 10px;
  margin-top: 22px;
}

.sidebar-social a {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.25);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-decoration: none;
  font-size: 13px;
  transition: all .3s ease-out;
}

.sidebar-social a:hover {
  background: #fff;
  color: var(--md-blue-deep);
}

/* mobilde menü linkleri sola yaslı kalıp panelin sol kenarına çok yakın
   duruyordu — sola yaslı kalıp (ortalanmıyor) sadece yazı puntosunu
   küçültüyoruz */
@media only screen and (max-width: 767px) {
  .sidebar-nav a {
    font-size: 22px;
  }
}

@media only screen and (max-width: 480px) {
  .site-sidebar { padding: 34px 26px; }
  .sidebar-top { margin-bottom: 40px; }
  .sidebar-nav a { font-size: 19px; padding: 13px 4px; }
}

/* ==========================================================================
   6b. PREV/NEXT SLIDE ARROWS — thin outlined circles (akyolinsaat.com ref)
   Kept prev=left-arrow / next=right-arrow for clarity; only the visual
   treatment (thin ring, transparent fill, thin icon) is taken from the
   reference — let me know if you'd rather mirror their reversed arrows too.
   ========================================================================== */
.swiper-slide-controls,
.swiper-slide-controls.slide-prev,
.swiper-slide-controls.slide-next {
  width: 46px !important;
  height: 46px;
  line-height: 46px;
  background: transparent;
  border: 1px solid rgba(255,255,255,.4);
  color: rgba(255,255,255,.75);
  margin-right: 10px;
}

.swiper-slide-controls:hover {
  background: transparent;
  border-color: #fff;
  color: #fff;
}

.swiper-slide-controls .ion-ios-arrow-left,
.swiper-slide-controls .ion-ios-arrow-right {
  font-size: 15px;
  font-weight: 300;
}

/* ==========================================================================
   7. HERO — slogan/description, tightened spacing, scroll-down cue
   ========================================================================== */

/* halved inner spacing around the hero copy block */
.hero-fullscreen .divider-m {
  height: 25px;
}

.hero-fullscreen .swiper-slide-inner-txt {
  width: 90% !important;
  max-width: 760px;
}

/* eyebrow/subheading above the slogan was removed from the markup (item 3);
   the heading size is halved from the template default (55px / 65px @1920 /
   45px <=995px) */
.hero-fullscreen .hero-heading {
  font-family: var(--md-font-display);
  font-weight: 400;
  letter-spacing: 0;
  margin-top: 0;
  font-size: 28px;
}

@media all and (min-width: 1920px) {
  .hero-fullscreen .hero-heading {
    font-size: 32px;
  }
}

@media only screen and (max-width: 995px) {
  .hero-fullscreen .hero-heading {
    font-size: 23px;
  }
}

.hero-description {
  font-family: var(--md-font-body);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.7;
  color: rgba(255,255,255,.82);
  max-width: 540px;
  margin: 0 auto;
  text-align: center;
}

@media only screen and (max-width: 880px) {
  .hero-description { font-size: 14px; }
}

/* ==========================================================================
   7d. TEXT REVEAL — word-by-word staggered "wipe up" animation for the
   hero heading + description on load / slide change (ref: hotelza's
   "Welcome to Hotelza..." text-effect — that template's actual GSAP/JS
   wasn't included in the zip, so this is a from-scratch equivalent)
   ========================================================================== */
.hero-heading .word,
.hero-description .word {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  line-height: 1.25;
}

.hero-heading .word-inner,
.hero-description .word-inner {
  display: inline-block;
  transform: translateY(115%);
  opacity: 0;
  transition: transform .8s cubic-bezier(.19,1,.22,1), opacity .6s ease-out;
}

.hero-heading .word-inner.in-view,
.hero-description .word-inner.in-view {
  transform: translateY(0);
  opacity: 1;
}

/* scroll-down cue, centered at the bottom of the hero (replaces the old
   play/pause + progress-ring control) — label + glowing vertical line,
   after polokablo.com's slider scroll cue */
.hero-scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 40px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  z-index: 10;
  text-decoration: none;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}

.hero-scroll-cue span {
  font-family: var(--md-font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: rgba(255,255,255,.8);
}

.hero-scroll-cue .scroll-line {
  position: relative;
  width: 2px;
  height: 58px;
  overflow: hidden;
  background: linear-gradient(to bottom, rgba(255,255,255,.15), transparent);
}

.hero-scroll-cue .scroll-line::before {
  content: "";
  position: absolute;
  top: -60%;
  left: 0;
  width: 100%;
  height: 60%;
  background: linear-gradient(to bottom, transparent, var(--md-blue-light) 55%, #fff);
  animation: md-scroll-glow 2.2s ease-in-out infinite;
}

@keyframes md-scroll-glow {
  0%   { top: -60%; }
  100% { top: 100%; }
}

@media only screen and (max-width: 768px) {
  .hero-scroll-cue { bottom: 22px; gap: 10px; }
  .hero-scroll-cue .scroll-line { height: 42px; }
}

/* ==========================================================================
   7b. FRAME MARGIN HALVED, BOTTOM FRAME REMOVED, HERO GETS ROUNDED TOP
   CORNERS and sits inset within the (now thinner) white frame.
   ========================================================================== */
@media only screen and (min-width: 880px) {
  .border-top {
    height: 20px !important;
  }
  .border-left,
  .border-right {
    width: 20px !important;
  }
  .border-bottom {
    display: none !important;
  }

  .hero-fullscreen {
    top: 20px;
    left: 20px;
    right: 20px;
    bottom: 0;
    width: auto;
    height: auto;
    border-radius: 32px 32px 0 0;
  }
}

/* ==========================================================================
   7c. HERO VIDEO BACKGROUND — sits behind everything; while
   .hero-video-active is on .hero-fullscreen, the per-slide photo
   backgrounds below are neutralized (kept in the markup/CSS so this is
   easy to revert — remove the class to bring the photo slides back).
   ========================================================================== */
.hero-video-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity .8s ease-out;
}

.hero-video-bg.hero-video-ready {
  opacity: 1;
}

/* graceful fallback behind the <video> — shows instantly, and stays
   visible (no black box) until an actual video file loads and fades in */
.hero-fullscreen.hero-video-active {
  background-image: url('../img/hero-bg.png');
  background-size: cover;
  background-position: center;
}

.hero-video-active .hero-fullscreen-FIX {
  position: relative;
  z-index: 1;
}

/* passive photo slides: backgrounds hidden, but slide text/pagination/
   arrows keep working exactly as before */
.hero-video-active .swiper-slide-inner-bg {
  background-image: none !important;
  background: none !important;
}

.hero-video-active .swiper-slide-inner {
  background: transparent !important;
}

.hero-video-active .swiper-slide-inner-bg::after {
  display: none;
}

/* keep the readability overlay + slightly darken for video footage */
.hero-video-active .overlay.overlay-dark-75 {
  background: rgba(3,15,30,.42);
}

/* ==========================================================================
   8. HERO BACKGROUND ARTWORK (placeholder — brand-toned, no stock photos)
   Swap these for real product / yacht photography when available; the
   .bg-img-1..4 classes just need a background-image declaration.
   ========================================================================== */
.hero-fullscreen .bg-img-1,
.hero-fullscreen .bg-img-2,
.hero-fullscreen .bg-img-3,
.hero-fullscreen .bg-img-4 {
  background-image: none;
  background-color: var(--md-blue-deep);
  position: relative;
  overflow: hidden;
}

.hero-fullscreen .bg-img-1 { background: linear-gradient(120deg, #052443 0%, #0B5AAE 100%); }
.hero-fullscreen .bg-img-2 { background: linear-gradient(120deg, #073A73 0%, #114E93 100%); }
.hero-fullscreen .bg-img-3 { background: linear-gradient(120deg, #041B33 0%, #0B5AAE 120%); }
.hero-fullscreen .bg-img-4 { background: linear-gradient(120deg, #073A73 0%, #082F5C 100%); }

/* fine diagonal line pattern, evoking door-panel / hull grooves */
.hero-fullscreen .bg-img-1::after,
.hero-fullscreen .bg-img-2::after,
.hero-fullscreen .bg-img-3::after,
.hero-fullscreen .bg-img-4::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    115deg,
    rgba(255,255,255,.035) 0px,
    rgba(255,255,255,.035) 1px,
    transparent 1px,
    transparent 64px
  );
}

/* ==========================================================================
   9a. PRODUCT GROUPS HEADING — centered title + centered gradient-accent
   divider (transparent → blue → transparent)
   ========================================================================== */
.section-heading-center {
  text-align: center;
  margin-bottom: 40px;
}

.section-heading-center h2:not(.hero-subheading) {
  font-family: var(--md-font-display);
  font-weight: 400;
  font-size: 30px;
  color: var(--md-charcoal);
  margin: 10px 0 16px;
}

/* .hero-subheading span'in temel stili çizgiyi sadece SAĞ tarafa ekliyor
   (padding-right/margin-right), bu da ortalanmış (.section-heading-center)
   kullanımlarda metnin altındaki büyük başlığa göre gerçek ortadan sola
   kaymış görünmesine sebep oluyordu. Burada çizgiyi simetrik hale
   getirip (sol tarafa da aynısını ekleyip) metni gerçekten ortalıyoruz —
   sol/sağ hizalı diğer kullanımlar (.page-story-text, .projects-head-text,
   .blog-teaser-head) kendi text-align:left kurallarını koruduğu için
   etkilenmiyor. */
.section-heading-center .hero-subheading span {
  padding-left: 60px;
  margin-left: 30px;
}

@media only screen and (max-width: 880px) {
  .section-heading-center .hero-subheading span {
    padding-left: 40px;
    margin-left: 20px;
  }
}

.section-heading-center .hero-subheading span::after {
  content: "";
  position: absolute;
  display: block;
  top: 50%;
  left: 0;
  width: 30px;
  height: 0;
  margin-top: -1px;
  border-top: 1px solid #fff;
}

.section-heading-center .hero-subheading.hero-subheading-dark span::after {
  border-top: 1px solid #111;
}

@media only screen and (max-width: 880px) {
  .section-heading-center .hero-subheading span::after {
    width: 20px;
  }
}

.gradient-divider {
  width: 220px;
  height: 2px;
  margin: 0 auto;
  background: linear-gradient(
    to right,
    transparent 0%,
    var(--md-blue) 50%,
    transparent 100%
  );
  position: relative;
}

.gradient-divider::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 7px;
  height: 7px;
  background: var(--md-blue);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 10px 2px rgba(11,90,174,.55);
}

/* ==========================================================================
   9b. PRODUCT GROUPS — "Yat Kapısı" / "Yat Camı", directly under the hero,
   same inset width + radius language as the slider.
   ========================================================================== */
.product-groups {
  padding: 90px 0 0;
}

.product-groups-inner {
  margin: 0 20px;
}

@media only screen and (max-width: 879px) {
  .product-groups-inner { margin: 0 16px; }
  .product-groups { padding: 56px 0 0; }
}

.product-groups-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}

.product-card {
  position: relative;
  display: block;
  min-height: 440px;
  border-radius: 32px;
  overflow: hidden;
  text-decoration: none;
  isolation: isolate;
}

.product-card-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform .7s cubic-bezier(.25,.8,.25,1);
}

.product-card:hover .product-card-bg {
  transform: scale(1.08);
}

.product-card-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(4,17,34,.78) 0%, rgba(4,17,34,.18) 55%, rgba(4,17,34,.05) 100%);
  transition: background .4s ease-out;
}

.product-card:hover .product-card-bg::after {
  background: linear-gradient(to top, rgba(4,17,34,.88) 0%, rgba(4,17,34,.32) 60%, rgba(4,17,34,.1) 100%);
}

/* inset 1px hairline frame — the "10-15px inward padding" border */
.product-card-border {
  position: absolute;
  inset: 14px;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 20px;
  pointer-events: none;
  z-index: 2;
  transition: inset .4s ease-out, border-color .4s ease-out;
}

.product-card:hover .product-card-border {
  inset: 10px;
  border-color: rgba(255,255,255,.65);
}

.product-card-content {
  position: relative;
  z-index: 3;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 40px 40px 38px;
  transition: transform .45s cubic-bezier(.25,.8,.25,1);
}

.product-card:hover .product-card-content {
  transform: translateY(-8px);
}

.product-card-label {
  display: block;
  font-family: var(--md-font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.7);
  margin-bottom: 10px;
}

.product-card h3 {
  font-family: var(--md-font-display);
  font-weight: 400;
  font-size: 40px;
  line-height: 1.1;
  color: #fff;
  margin: 0;
}

/* the "incele" explore button — hidden, springs in on hover */
.product-card-explore {
  position: absolute;
  top: 26px;
  right: 26px;
  z-index: 3;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.55);
  background: rgba(255,255,255,.08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 18px;
  opacity: 0;
  transform: scale(.65) rotate(-12deg);
  transition: all .45s cubic-bezier(.34,1.56,.64,1);
}

.product-card:hover .product-card-explore {
  opacity: 1;
  transform: scale(1) rotate(0deg);
}

.product-card-explore i {
  transform: rotate(-45deg);
}

.pg-bg-a { background: linear-gradient(150deg, #0B5AAE 0%, #052443 100%); }
.pg-bg-b { background: linear-gradient(150deg, #4F8FD1 0%, #073A73 100%); }

.pg-bg-a::before,
.pg-bg-b::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    115deg,
    rgba(255,255,255,.055) 0px,
    rgba(255,255,255,.055) 1px,
    transparent 1px,
    transparent 46px
  );
}

@media only screen and (max-width: 880px) {
  .product-groups-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .product-card {
    min-height: 320px;
    border-radius: 22px;
  }
  .product-card-border {
    inset: 10px;
    border-radius: 14px;
  }
  .product-card h3 { font-size: 30px; }
  .product-card-content { padding: 28px; }
  .product-card-explore {
    opacity: 1;
    transform: scale(1);
    width: 44px;
    height: 44px;
    top: 18px;
    right: 18px;
  }
}

/* ==========================================================================
   9d. PROJELER — exact structural port of bizen.zip's index-4.html
   "OUR PROJECTS" (project-sec2 / project-wrap / project-carousel2): one
   shared full-bleed background layer behind the cards that cross-fades to
   whichever card is active/hovered, flush (non-rounded) cards divided by
   hairlines. Meta tags + description stay dropped per the brief — title +
   a "go to" arrow only. The carousel mechanics (autoplay/loop/prev-next)
   from the previous build are kept as-is on top of this.
   ========================================================================== */
.projects-section {
  padding: 90px 0 0;
}

.projects-inner {
  margin: 0 20px;
}

@media only screen and (max-width: 879px) {
  .projects-inner { margin: 0 16px; }
  .projects-section { padding: 56px 0 0; }
}

.projects-panel {
  position: relative;
  overflow: hidden;
  border-radius: 32px;
  padding: 56px;
  background: #031830;
}

.projects-head {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 44px;
}

.projects-head-text .hero-subheading {
  text-align: left;
  margin: 0 0 14px;
}

.projects-head-text .hero-subheading span {
  color: var(--md-blue-light);
}

.projects-head-text .hero-subheading span::before {
  border-top-color: var(--md-blue-light);
}

.projects-head-text h2:not(.hero-subheading) {
  font-family: var(--md-font-display);
  font-weight: 400;
  font-size: 32px;
  color: #fff;
  margin: 0;
}

.projects-intro {
  font-family: var(--md-font-body);
  font-size: 14px;
  line-height: 1.7;
  color: rgba(255,255,255,.7);
  max-width: 480px;
  margin: 14px 0 0;
}

/* prev/next — connected pill duo */
.projects-nav {
  flex-shrink: 0;
  display: flex;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 40px;
  padding: 5px;
}

.projects-nav button {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: rgba(255,255,255,.8);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  cursor: pointer;
  transition: background .3s ease-out, color .3s ease-out;
}

.projects-nav button:hover {
  background: var(--md-blue-light);
  color: #052443;
}

/* project-wrap: shared background layer + the card carousel on top —
   exact mechanic from the reference */
.project-wrap {
  position: relative;
  overflow: hidden;
  height: 600px;
  border-radius: 18px;
}

@media only screen and (max-width: 767px) {
  .project-wrap { height: 450px; }
}

.project-cover {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.project-cover::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(359.73deg, #020e28 17.1%, rgba(2,14,40,.2) 99.76%);
  mix-blend-mode: multiply;
  z-index: 1;
}

.project-cover .tab-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: scale(1.1);
  transition: all .7s;
}

.project-cover .tab-img.active {
  opacity: 1;
  transform: scale(1);
}

.project-carousel2 {
  position: relative;
  z-index: 3;
  height: 100%;
}

.project-carousel2 .swiper-wrapper {
  height: 100%;
}

.project-card2 {
  display: flex;
  align-items: flex-end;
  border-inline-end: 1px solid hsla(0,0%,100%,.3);
  overflow: hidden;
  position: relative;
  height: 600px;
  text-decoration: none;
  cursor: pointer;
}

@media only screen and (max-width: 767px) {
  .project-card2 { height: 450px; }
}

.project-card2 .content {
  position: relative;
  bottom: 20px;
  width: 100%;
  margin: 0 30px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  transition: all .4s ease-in-out;
}

.project-card2 .feat-title {
  color: #fff;
  margin: 0;
  font-family: var(--md-font-display);
  font-weight: 400;
  font-size: 21px;
  line-height: 1.3;
}

.project-card-location {
  display: flex;
  align-items: center;
  gap: 6px;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  color: rgba(255,255,255,.75);
  font-family: var(--md-font-body);
  font-size: 12.5px;
  transition: max-height .4s ease-out, opacity .35s ease-out, margin-top .4s ease-out;
}

.project-card-location i {
  font-size: 13px;
  color: var(--md-blue-light);
}

.project-card2.active .project-card-location,
.project-card2:hover .project-card-location {
  max-height: 24px;
  opacity: 1;
  margin-top: 8px;
}

@media only screen and (max-width: 880px) {
  .projects-panel {
    padding: 32px 22px;
    border-radius: 24px;
  }
  .projects-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }
  .projects-head-text h2:not(.hero-subheading) { font-size: 25px; }
  .project-card2 .feat-title { font-size: 17px; }
}

/* ==========================================================================
   9c. HAKKINDA / ABOUT-HERO — "Şirket Profili" panel with animated button,
   counters, and a 5-photo strip (navy-tinted, colour on hover). Sits right
   under Product Groups, same inset width as the slider. The background is
   an original gradient + floating glow (aqlix's hero-bg.png / hero-1-1.png
   assets live on an external domain the sandbox can't fetch, so this is a
   built equivalent rather than the literal files).
   ========================================================================== */
.about-hero {
  padding: 90px 0 0;
}

.about-hero-inner {
  margin: 0 20px;
}

@media only screen and (max-width: 879px) {
  .about-hero-inner { margin: 0 16px; }
  .about-hero { padding: 56px 0 0; }
}

.about-hero-panel {
  position: relative;
  overflow: hidden;
  border-radius: 32px;
  padding: 64px;
  background-color: #052443;
  background-image: url('../img/hero-bg.png');
  background-size: cover;
  background-position: center;
}

/* navy brand tint over the uploaded background photo, so white text stays
   readable and the palette matches the rest of the site */
.about-hero-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(7,58,115,.80) 0%, rgba(5,36,67,.86) 55%, rgba(3,24,48,.92) 100%);
  pointer-events: none;
}

.about-hero-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    115deg,
    rgba(255,255,255,.04) 0px,
    rgba(255,255,255,.04) 1px,
    transparent 1px,
    transparent 56px
  );
  pointer-events: none;
}

.about-hero-shape {
  position: absolute;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  right: -160px;
  top: -180px;
  background: radial-gradient(circle, rgba(79,143,209,.4) 0%, transparent 70%);
  filter: blur(4px);
  animation: about-float 9s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes about-float {
  0%   { transform: translate(0,0) scale(1); }
  100% { transform: translate(-34px, 30px) scale(1.08); }
}

.about-hero-content {
  position: relative;
  z-index: 1;
}

.about-hero-text {
  max-width: 600px;
}

.about-hero-eyebrow {
  display: inline-block;
  font-family: var(--md-font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--md-blue-light);
  margin-bottom: 18px;
}

.about-hero-text h2 {
  font-family: var(--md-font-display);
  font-weight: 400;
  font-size: 38px;
  line-height: 1.25;
  color: #fff;
  margin: 0 0 20px;
}

.about-hero-text p,
.about-hero-text .about-hero-desc-clamp {
  font-family: var(--md-font-body);
  font-size: 15px;
  line-height: 1.8;
  color: rgba(255,255,255,.75);
  margin: 0 0 32px;
  max-width: 520px;
}

/* "Hakkında" özet metni 4 satırla sınırlanır, taşan kısım "..." ile kesilir */
.about-hero-desc-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* animated "Devamını Oku" pill button */
.about-hero-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 6px 6px 6px 24px;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 40px;
  color: #fff;
  text-decoration: none;
  font-family: var(--md-font-body);
  font-weight: 600;
  font-size: 14px;
  overflow: hidden;
  isolation: isolate;
  transition: border-color .35s ease-out;
}

.about-hero-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #fff;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s cubic-bezier(.65,0,.35,1);
  z-index: -1;
  border-radius: 40px;
}

.about-hero-btn:hover::before {
  transform: scaleX(1);
}

.about-hero-btn:hover {
  border-color: transparent;
  color: var(--md-blue-deep);
}

.about-hero-btn span {
  transition: color .4s ease-out;
}

.about-hero-btn .about-hero-btn-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,.12);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform .5s cubic-bezier(.34,1.56,.64,1), background .4s ease-out, color .4s ease-out;
}

.about-hero-btn:hover .about-hero-btn-icon {
  transform: translateX(3px) rotate(45deg);
  background: rgba(11,90,174,.12);
  color: var(--md-blue-deep);
}

.about-hero-actions {
  display: flex;
  align-items: center;
  gap: 26px;
  flex-wrap: wrap;
}

.about-hero-video-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: #fff;
  font-family: var(--md-font-body);
  font-weight: 600;
  font-size: 14px;
}

.about-hero-video-btn .play-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.45);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: #fff;
  transition: all .3s ease-out;
}

.about-hero-video-btn:hover .play-icon {
  background: var(--md-blue-light);
  border-color: var(--md-blue-light);
  transform: scale(1.08);
}

@media only screen and (max-width: 767px) {
  .about-hero-actions { gap: 20px; }
}

/* counters */
.about-counters {
  display: flex;
  flex-wrap: wrap;
  margin-top: 56px;
  padding-top: 34px;
  border-top: 1px solid rgba(255,255,255,.15);
  position: relative;
  z-index: 1;
}

.about-counter {
  flex: 1 1 0;
  min-width: 140px;
  padding: 0 20px;
  border-right: 1px solid rgba(255,255,255,.15);
}

.about-counter:first-child { padding-left: 0; }
.about-counter:last-child { border-right: none; }

.counter-value {
  display: flex;
  align-items: baseline;
  gap: 3px;
}

.counter-num,
.counter-suffix {
  font-family: var(--md-font-display);
  font-weight: 400;
  font-size: 40px;
  color: #fff;
  line-height: 1;
}

.counter-suffix {
  font-size: 20px;
  color: var(--md-blue-light);
}

.counter-label {
  display: block;
  margin-top: 10px;
  font-family: var(--md-font-body);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.6);
}

/* 5-photo strip — navy-tinted by default, original colour on hover */
.about-photo-strip {
  display: flex;
  gap: 14px;
  margin-top: 44px;
  position: relative;
  z-index: 1;
}

.about-photo {
  flex: 1 1 0;
  aspect-ratio: 3 / 4;
  border-radius: 16px;
  position: relative;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  filter: grayscale(1) brightness(.6) sepia(1) hue-rotate(180deg) saturate(2.6);
  transition: filter .6s ease-out, transform .5s ease-out;
}

.about-photo:hover {
  filter: none;
  transform: translateY(-6px);
}

@media only screen and (max-width: 880px) {
  .about-hero-panel {
    padding: 36px 24px;
    border-radius: 24px;
  }
  .about-hero-text h2 { font-size: 27px; }
  .about-counters {
    padding-top: 26px;
    margin-top: 36px;
  }
  .about-counter {
    flex: 0 0 50%;
    border-right: none;
    padding: 0 10px;
    margin-bottom: 22px;
  }
  .counter-num, .counter-suffix { font-size: 28px; }
  .about-photo-strip {
    flex-wrap: wrap;
    margin-top: 30px;
  }
  .about-photo {
    flex: 0 0 calc(33.33% - 10px);
    aspect-ratio: 1 / 1;
  }
}

/* ==========================================================================
   10. HİZMETLERİMİZ — 4-up carousel (dot pagination, no prev/next, no
   numbering), 1:1 mechanic port of bugfree.zip's "Our Services"
   (service-item-gold): a curtain panel slides away on hover/active to
   reveal a tinted photo behind the icon/title; text swaps to white for
   contrast, then reverts. Sits in its own inset + rounded panel, same
   width language as the slider. Colours adapted to brand (gold accent ->
   brand blue), photos are our existing gradient placeholders until real
   ones are dropped in.
   ========================================================================== */
.services-section {
  /* diğer bölümlerle aynı ritim: sadece üstten boşluk (90px), altta değil —
     böylece Hizmetler-Blog arası boşluk, Hakkında-Hizmetler arasıyla
     (90px) eşit oluyor, önceden alttan da 90px eklendiği için toplamda
     190px'e çıkıp orantısız duruyordu */
  padding: 90px 0 0;
}

.services-inner {
  margin: 0 20px;
}

@media only screen and (max-width: 879px) {
  .services-inner { margin: 0 16px; }
  .services-section { padding: 56px 0 0; }
}

.services-panel {
  background: #F4F8FC;
  border-radius: 32px;
  padding: 56px;
}

@media only screen and (max-width: 880px) {
  .services-panel {
    padding: 32px 20px;
    border-radius: 24px;
  }
}

.services-intro {
  font-family: var(--md-font-body);
  font-size: 15px;
  line-height: 1.8;
  color: #666;
  max-width: 560px;
  margin: 20px auto 0;
}

.services-carousel {
  overflow: hidden;
  padding: 6px 6px 44px;
}

.services-carousel .swiper-slide {
  height: auto;
}

.services-pagination {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-top: -30px;
}

.services-pagination .swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(11,90,174,.25);
  opacity: 1;
  transition: all .3s ease-out;
  cursor: pointer;
}

.services-pagination .swiper-pagination-bullet-active {
  width: 24px;
  border-radius: 4px;
  background: var(--md-blue);
}

.service-item-gold {
  position: relative;
  background: #fff;
  border-radius: 16px;
  min-height: 340px;
  height: 100%;
  padding: 36px;
  overflow: hidden;
}

.service-item-gold::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #fff;
  border-radius: 16px;
  transition: transform .5s ease-in-out;
  z-index: 1;
}

.service-item-gold.active::before,
.service-item-gold:hover::before {
  transform: translate(100%, -100%);
}

.service-item-image-gold {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .4s ease-in-out;
}

.service-item-gold.active .service-item-image-gold,
.service-item-gold:hover .service-item-image-gold {
  opacity: 1;
}

.service-item-image-gold::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--md-blue-deep);
  opacity: .68;
}

.service-item-body-gold {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 30px;
  height: 100%;
  min-height: 268px;
}

.service-item-body-content-gold .icon-box {
  position: relative;
  width: 50px;
  height: 50px;
  background: rgba(11,90,174,.1);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  margin-bottom: 26px;
  font-size: 19px;
  color: var(--md-blue);
  transition: all .4s ease-in-out;
}

.service-item-gold.active .service-item-body-content-gold .icon-box,
.service-item-gold:hover .service-item-body-content-gold .icon-box {
  background: #fff;
  color: var(--md-blue-deep);
}

.glass-icon {
  width: 21px;
  height: 21px;
}

.service-item-content-gold h2 {
  font-family: var(--md-font-display);
  font-weight: 400;
  font-size: 21px;
  color: var(--md-charcoal);
  margin: 0;
  transition: color .4s ease-in-out;
}

.service-item-content-gold h2 a {
  color: inherit;
  text-decoration: none;
}

.service-item-gold.active .service-item-content-gold h2,
.service-item-gold:hover .service-item-content-gold h2 {
  color: #fff;
}

.service-item-content-gold p {
  font-family: var(--md-font-body);
  font-size: 13px;
  line-height: 1.7;
  color: #777;
  border-top: 1px solid #E7E7E4;
  padding-top: 16px;
  margin: 14px 0 0;
  transition: all .4s ease-in-out;
}

.service-item-gold.active .service-item-content-gold p,
.service-item-gold:hover .service-item-content-gold p {
  color: rgba(255,255,255,.82);
  border-color: rgba(255,255,255,.2);
}

.service-item-btn-gold a.readmore-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--md-font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--md-charcoal);
  text-decoration: none;
  transition: color .4s ease-in-out, gap .3s ease-out;
}

.service-item-btn-gold a.readmore-btn::after {
  content: "\f125";
  font-family: "Ionicons";
  font-size: 13px;
}

.service-item-gold.active .service-item-btn-gold a.readmore-btn,
.service-item-gold:hover .service-item-btn-gold a.readmore-btn {
  color: #fff;
  gap: 12px;
}

@media only screen and (max-width: 600px) {
  .service-item-gold { padding: 28px; min-height: 300px; }
  .service-item-body-gold { min-height: 230px; }
}

/* ==========================================================================
   10b. BLOG TEASER — homepage "latest posts" section, same inset width as
   the hero slider, light pattern background (ref: awaikenthemes/plantiva
   "Latest Tips & Inspiration" layout — 1 tall featured card + 2 stacked)
   ========================================================================== */
.blog-teaser {
  background-color: #fff;
  /* aynı 90px üstten-boşluk ritmine geçirildi — Hizmetler-Blog ve
     Blog-Referanslar arası boşluklar da Hakkında-Hizmetler arasıyla
     (90px) eşitlensin diye */
  padding: 90px 0 0;
}

.blog-teaser-inner {
  margin: 0 20px;
}

@media only screen and (max-width: 879px) {
  .blog-teaser-inner { margin: 0 16px; }
  .blog-teaser { padding: 56px 0 0; }
}

/* title left, "view all" link right */
.blog-teaser-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin: 0 0 40px;
}

.blog-teaser-head .hero-subheading.hero-subheading-dark {
  text-align: left;
  margin: 0;
}

.blog-teaser-head h2:not(.hero-subheading) {
  font-family: var(--md-font-display);
  font-weight: 400;
  font-size: 34px;
  line-height: 1.25;
  color: var(--md-charcoal);
  margin: 16px 0 0;
}

/* rounded panel wrapping the whole grid, with inner breathing room */
.blog-panel {
  position: relative;
  background-color: #fff;
  border: 1px solid #ECEBE7;
  border-radius: 28px;
  padding: 36px;
  overflow: hidden;
}

/* subtle grid + soft blue glow blobs (in place of the earlier diamond
   pattern — a code-built equivalent of the aqlix "technology" section
   background: I couldn't pull its exact CSS/assets from the sandbox, so
   this recreates the same idea — faint grid + corner glows) */
.blog-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 92% 0%, rgba(11,90,174,.12) 0%, transparent 45%),
    radial-gradient(circle at 4% 100%, rgba(11,90,174,.10) 0%, transparent 42%),
    linear-gradient(rgba(11,90,174,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11,90,174,.055) 1px, transparent 1px);
  background-size: auto, auto, 42px 42px, 42px 42px;
  pointer-events: none;
  z-index: 0;
}

.blog-panel > * {
  position: relative;
  z-index: 1;
}

.blog-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 20px;
}

.blog-card {
  background: #fff;
  border: 1px solid #ECEBE7;
  border-radius: 16px;
  overflow: hidden;
  transition: border-color .3s ease-out, box-shadow .3s ease-out;
}

.blog-card:hover {
  border-color: #DCE3EC;
  box-shadow: 0 18px 40px rgba(15,30,60,.08);
}

/* meta line: category (accent) + dot + date */
.blog-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--md-font-body);
  font-size: 12px;
  margin-bottom: 10px;
}

.blog-cat {
  color: var(--md-blue);
  font-weight: 600;
}

.blog-dot {
  color: #B9C3CF;
}

.blog-date {
  color: #8B94A0;
}

.blog-readmore {
  display: inline-block;
  font-family: var(--md-font-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--md-charcoal);
  text-decoration: underline;
  text-underline-offset: 3px;
  margin-top: 14px;
}

.blog-readmore:hover {
  color: var(--md-blue);
}

/* featured (large) card */
.blog-featured {
  grid-row: 1 / 3;
  position: relative;
  min-height: 420px;
  color: #fff;
}

.blog-featured-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}

.blog-featured-img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(4,17,34,.86) 0%, rgba(4,17,34,.25) 45%, transparent 70%);
}

.blog-featured-content {
  position: relative;
  z-index: 1;
  padding: 34px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
}

.blog-featured .blog-cat {
  color: var(--md-blue-light);
}

.blog-featured .blog-dot,
.blog-featured .blog-date {
  color: rgba(255,255,255,.65);
}

.blog-featured h3 {
  font-family: var(--md-font-display);
  font-weight: 400;
  font-size: 26px;
  line-height: 1.3;
  margin: 0;
  max-width: 480px;
}

.blog-featured .blog-readmore {
  color: #fff;
}

.blog-featured .blog-readmore:hover {
  color: var(--md-blue-light);
}

/* small stacked cards */
.blog-small {
  display: flex;
  align-items: stretch;
}

.blog-small-img {
  flex: 0 0 42%;
  position: relative;
  min-height: 160px;
  background-size: cover;
  background-position: center;
}

.blog-small-content {
  flex: 1 1 auto;
  padding: 26px 26px 26px 22px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.blog-small h3 {
  font-family: var(--md-font-display);
  font-weight: 400;
  font-size: 19px;
  line-height: 1.32;
  color: var(--md-charcoal);
  margin: 0;
}

.blog-teaser-cta {
  flex: 0 0 auto;
  padding-bottom: 4px;
}

.blog-teaser-cta a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--md-font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--md-blue);
  text-decoration: none;
  border-bottom: 2px solid var(--md-blue);
  padding-bottom: 6px;
  white-space: nowrap;
  transition: all .3s ease-out;
}

.blog-teaser-cta a:hover {
  color: var(--md-blue-deep);
  border-color: var(--md-blue-deep);
  gap: 16px;
}

/* placeholder editorial backgrounds for the three posts — swap for real
   photography via background-image once available */
.blog-bg-a,
.blog-bg-b,
.blog-bg-c {
  background-size: cover;
  background-position: center;
}

.blog-bg-a { background: linear-gradient(140deg, #0B5AAE 0%, #052443 100%); }
.blog-bg-b { background: linear-gradient(140deg, #4F8FD1 0%, #0B5AAE 100%); }
.blog-bg-c { background: linear-gradient(140deg, #3A3A3C 0%, #0B5AAE 130%); }

.blog-bg-a::before,
.blog-bg-b::before,
.blog-bg-c::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    115deg,
    rgba(255,255,255,.06) 0px,
    rgba(255,255,255,.06) 1px,
    transparent 1px,
    transparent 30px
  );
}

@media only screen and (max-width: 880px) {
  .blog-panel {
    padding: 14px;
    border-radius: 20px;
  }
  .blog-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 14px;
  }
  .blog-featured {
    grid-row: auto;
    min-height: 320px;
  }
  .blog-small {
    flex-direction: column;
  }
  .blog-small-img {
    min-height: 180px;
  }
  .blog-teaser-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
  .blog-teaser-head h2:not(.hero-subheading) { font-size: 26px; }
}

/* ==========================================================================
   10c. REFERANSLAR — dark navy bar with a single-row logo marquee sliding
   behind a fixed, solid, amber-on-taupe "Referanslar" badge on the right
   (ref: htmldesigntemplates.com/lawberg "Top Trusted Brands" strip)
   ========================================================================== */
.references-section {
  /* üst boşluk 90px'e çekildi (diğer bölümlerle aynı ritim); alt boşluk
     (footer'dan önceki boşluk) değişmedi */
  padding: 90px 0 100px;
}

.references-inner {
  margin: 0 20px;
}

@media only screen and (max-width: 879px) {
  .references-inner { margin: 0 16px; }
  .references-section { padding: 56px 0 64px; }
}

.references-panel {
  position: relative;
  background: #fff;
  border: 1.5px solid var(--md-blue);
  border-radius: 28px;
  padding: 6px;
  overflow: hidden;
}

.marquee-row {
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 6%, #000 78%, transparent 92%);
          mask-image: linear-gradient(to right, transparent 0%, #000 6%, #000 78%, transparent 92%);
}

.marquee-track {
  display: flex;
  align-items: center;
  width: max-content;
  padding: 30px 0;
  animation: marquee-left 30s linear infinite;
}

@keyframes marquee-left {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* .marquee-item base + hover styling now lives further below, right
   after the marquee-track logo rewrite (image-based, not text) */

.marquee-item {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 28px;
  height: 71px;
  transition: transform .3s ease-out;
}

.marquee-item img {
  max-width: 157px;
  width: auto;
  object-fit: contain;
  transition: opacity .3s ease-out;
}

.marquee-item:hover {
  transform: translateY(-3px);
}

.marquee-item:hover img {
  opacity: 1;
}

/* fixed "Referanslar" badge, right edge */
.references-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  bottom: 6px;
  width: 190px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 18px;
  background: var(--md-blue);
  border-radius: 22px;
  z-index: 2;
}

.references-badge span {
  font-family: var(--md-font-body);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.3;
  color: #fff;
}

@media only screen and (max-width: 700px) {
  .references-badge {
    position: static;
    width: auto;
    margin: 6px;
    padding: 14px 20px;
  }
  .marquee-track { padding: 22px 0; }
  .marquee-item { height: 44px; margin: 0 20px; }
  .marquee-item img { max-width: 96px; }
}

/* ==========================================================================
   11. FOOTER
   ========================================================================== */
.site-footer {
  background: var(--md-blue-deep);
  background-image: linear-gradient(160deg, #073A73 0%, #052443 100%);
  padding: 60px 0 0;
  margin: 0 20px;
  border-radius: 32px 32px 0 0;
}

@media only screen and (max-width: 879px) {
  .site-footer {
    margin: 0 16px;
    border-radius: 24px 24px 0 0;
  }
}

/* top row: logo left, big social icons right */
.footer-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 34px;
}

.footer-top-logo img {
  max-height: 48px;
  width: auto;
}

.footer-social {
  display: flex;
  gap: 14px;
}

.footer-social a {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.25);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-decoration: none;
  font-size: 13px;
  transition: all .3s ease-out;
}

.footer-social.footer-social-lg a {
  width: 52px;
  height: 52px;
  font-size: 19px;
}

.footer-social a:hover {
  background: #fff;
  color: var(--md-blue-deep);
  transform: translateY(-3px);
}

.footer-divider {
  height: 1px;
  background: rgba(255,255,255,.12);
}

/* four columns */
.footer-columns-4 {
  display: grid;
  grid-template-columns: 1.1fr 1fr 1fr 1.3fr;
  gap: 40px;
  padding: 46px 0 60px;
}

.footer-col h4 {
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 22px;
}

.footer-col p {
  font-family: var(--md-font-body);
  font-size: 13px;
  line-height: 1.8;
  color: rgba(255,255,255,.65);
  margin: 0 0 18px;
}

.footer-links {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-links li {
  margin-bottom: 13px;
}

.footer-links a {
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  color: rgba(255,255,255,.68);
  text-decoration: none;
  transition: color .25s ease-out, padding-left .25s ease-out;
}

.footer-links a:hover {
  color: #fff;
  padding-left: 4px;
}

.footer-contact-item {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 14px;
  font-family: var(--md-font-body);
  font-size: 13px;
  color: rgba(255,255,255,.75);
  line-height: 1.6;
}

.footer-contact-item a {
  color: rgba(255,255,255,.75);
  text-decoration: none;
  transition: color .25s ease-out;
}

.footer-contact-item a:hover {
  color: #fff;
}

.footer-contact-item i {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--md-blue-light);
  font-size: 15px;
  transition: background .25s ease-out, border-color .25s ease-out;
}

.footer-contact-item:hover i {
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.22);
}

.footer-legal-links {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,.08);
}

.footer-legal-links a {
  font-family: var(--md-font-body);
  font-size: 12px;
  color: rgba(255,255,255,.55);
  text-decoration: none;
  transition: color .25s ease-out;
}

.footer-legal-links a:hover {
  color: #fff;
}

.footer-legal-links span {
  color: rgba(255,255,255,.3);
  font-size: 10px;
}

/* newsletter column */
.footer-newsletter-form {
  position: relative;
  margin-bottom: 16px;
}

.footer-newsletter-form input[type="email"] {
  width: 100%;
  height: 50px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 30px;
  padding: 0 52px 0 20px;
  font-family: var(--md-font-body);
  font-size: 13px;
  color: #fff;
  transition: border-color .25s ease-out, background .25s ease-out;
}

.footer-newsletter-form input[type="email"]::placeholder {
  color: rgba(255,255,255,.45);
}

.footer-newsletter-form input[type="email"]:focus {
  outline: none;
  border-color: var(--md-blue-light);
  background: rgba(255,255,255,.1);
}

.footer-newsletter-form button {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: var(--md-blue-light);
  color: #052443;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  cursor: pointer;
  transition: background .25s ease-out, transform .25s ease-out;
}

.footer-newsletter-form button:hover {
  background: #fff;
  transform: scale(1.05);
}

.footer-newsletter-check {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  cursor: pointer;
}

.footer-newsletter-check input[type="checkbox"] {
  margin-top: 3px;
  accent-color: var(--md-blue-light);
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  cursor: pointer;
}

.footer-newsletter-check span {
  font-family: var(--md-font-body);
  font-size: 12px;
  line-height: 1.6;
  color: rgba(255,255,255,.6);
}

.footer-newsletter-form button:disabled {
  opacity: .6;
  cursor: not-allowed;
}

.footer-newsletter-notice {
  display: none;
  margin-top: 10px;
  font-family: var(--md-font-body);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.5;
}

.footer-newsletter-notice:not(:empty) {
  display: block;
}

.footer-newsletter-notice.is-success {
  color: #6FE3A1;
}

.footer-newsletter-notice.is-error {
  color: #FF8A8A;
}

.footer-bottom {
  padding: 24px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid rgba(255,255,255,.1);
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  color: rgba(255,255,255,.5);
}

.footer-bottom a {
  color: rgba(255,255,255,.7);
  text-decoration: none;
}

.footer-bottom a:hover {
  color: #fff;
}

.footer-credit {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  opacity: .7;
  transition: opacity .3s ease-out;
}

.footer-credit-label {
  font-family: var(--md-font-body);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .01em;
  color: rgba(255,255,255,.6);
}

.footer-credit img {
  height: 15px;
  width: auto;
  display: block;
}

.footer-credit:hover {
  opacity: 1;
}

@media only screen and (max-width: 991px) {
  .footer-columns-4 {
    grid-template-columns: 1fr 1fr;
    row-gap: 40px;
  }
}

@media only screen and (max-width: 600px) {
  .footer-top {
    flex-direction: column;
    align-items: flex-start;
    gap: 22px;
  }
  .footer-columns-4 {
    grid-template-columns: 1fr;
  }
  .footer-bottom {
    flex-direction: column;
    gap: 10px;
    text-align: center;
  }
}

/* 9. responsive tweaks for the added elements ----------------------------- */
@media only screen and (max-width: 768px) {
  .navbar-brand.logo,
  .main-navigation-bg .navbar-brand.logo {
    width: 71px;
    /* Kutu yüksekliğini görselin kendi yüksekliğiyle (48px) eşitliyoruz —
       böylece görsel kutudan taşmıyor (ne üstten ne alttan), taşma
       olmadığı için border-top çerçevesi tarafından üstten kesilme
       ihtimali de kalmıyor. Dikey ortalamayı .navbar .container'daki
       align-items:center zaten yapıyor. */
    height: 48px;
    left: 28px;
    top: 0;
  }
  /* NOT: hem ".logo .logo-light/.logo-dark" hem de daha spesifik olan
     ".main-navigation-bg .logo .logo-light/.logo-dark" burada AYRI AYRI
     tanımlanıyor — ikisi de eşit önem (!important) taşıdığı için, sadece
     birini yazmak diğerinin (daha spesifik, masaüstü "scrolled" durumu
     için tanımlı 91x46'lık) kuralın kazanmasına yol açıyordu. Bu da iç
     sayfalarda (nav yüklenirken doğrudan "scrolled/beyaz" durumda
     başladığı için) mobilde logonun masaüstü boyutuna zıplayıp navbar'a
     sığmayarak kesik görünmesine sebep oluyordu. */
  .logo .logo-light,
  .logo .logo-dark,
  .main-navigation-bg .logo .logo-light,
  .main-navigation-bg .logo .logo-dark {
    height: 48px !important;
    top: 0;
  }
}

/* below desktop width, the inline menu titles step aside and the sidebar
   (opened via the dot-grid icon) becomes the one navigation mechanism —
   avoids showing two different hamburger triggers at once */
@media only screen and (max-width: 991px) {
  .main-navigation .navbar-nav {
    display: none !important;
  }
}

/* ==========================================================================
   13. INNER PAGES — shared page banner (dark navy, breadcrumb + title,
   nav floats transparently over it exactly like the hero) plus a few
   reusable content components (story section, value cards) used across
   Hakkımızda and the other inner pages.
   ========================================================================== */
.page-banner-section {
  position: relative;
  overflow: hidden;
  margin: 20px 20px 0;
  border-radius: 32px;
  padding: 116px 0 24px;
  background: linear-gradient(135deg, #073A73 0%, #052443 55%, #031830 100%);
}

.page-banner-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    115deg,
    rgba(255,255,255,.04) 0px,
    rgba(255,255,255,.04) 1px,
    transparent 1px,
    transparent 56px
  );
  pointer-events: none;
}

.page-banner-row {
  position: relative;
  z-index: 1;
  /* Header logosuyla aynı hizada durması için, sitenin geri kalanında
     kullanılan standart 1170px'lik ortalanmış içerik kapsayıcısıyla
     (.navbar .container ile aynı genişlik/kenar boşluğu) birebir aynı
     sistemi kullanıyor — böylece laptop/masaüstü gibi farklı ekran
     genişliklerinde de logo ile breadcrumb/başlık her zaman aynı hizada
     kalıyor (öncekinde sabit piksel boşluk kullanılıyordu). */
  max-width: 1170px;
  margin: 0 auto;
  padding: 0 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.page-banner-crumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--md-font-body);
  font-size: 13px;
  color: rgba(255,255,255,.6);
}

.page-banner-crumb a {
  color: rgba(255,255,255,.6);
  text-decoration: none;
  transition: color .25s ease-out;
}

.page-banner-crumb a:hover {
  color: #fff;
}

.page-banner-crumb i {
  font-size: 10px;
  opacity: .6;
}

.page-banner-crumb span {
  color: var(--md-blue-light);
}

.page-banner-section h1 {
  font-family: var(--md-font-display);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.3;
  color: #fff;
  margin: 0;
}

@media only screen and (max-width: 767px) {
  .page-banner-section {
    margin: 16px 16px 0;
    border-radius: 24px;
    padding: 122px 0 22px;
  }
  .page-banner-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .page-banner-section h1 { font-size: 21px; }
  /* mobilde "Anasayfa > Kurumsal > ..." şeklindeki yönlendirme linkleri
     kaldırılıp sadece sayfa başlığı (h1) kalıyor */
  .page-banner-crumb {
    display: none;
  }
}

/* story section — two columns, text + image */
.page-story-section {
  padding: 90px 0;
}

.page-story-inner {
  max-width: 1170px;
  margin: 0 auto;
  padding: 0 15px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  
}

.page-story-text .hero-subheading {
  text-align: left;
  margin: 0 0 14px;
  color: var(--md-blue);
}

.page-story-text .hero-subheading span {
  color: var(--md-blue);
}

.page-story-text .hero-subheading span::before {
  border-top-color: var(--md-blue);
}

.page-story-text h2:not(.hero-subheading) {
  font-family: var(--md-font-display);
  font-weight: 400;
  font-size: 30px;
  color: var(--md-charcoal);
  margin: 0 0 20px;
  line-height: 1.3;
}

.page-story-text p,
.page-story-text .page-story-desc {
  font-family: var(--md-font-body);
  font-size: 14.5px;
  line-height: 1.85;
  color: #666;
  margin: 0 0 16px;
}

.page-story-img {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  aspect-ratio: 3 / 3.2;
  background-size: cover;
  background-position: center;
}

@media only screen and (max-width: 880px) {
  .page-story-inner {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 0 16px;
  }
  .page-story-section { padding: 56px 0; }
}

/* değerlerimiz — simple static value cards (distinct from the
   hover-photo-reveal service-item-gold cards, to avoid repeating that
   pattern on every page) */
.values-section {
  padding: 30px 0 90px;
}

.values-grid {
  max-width: 1170px;
  margin: 0 auto;
  padding: 0 15px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}

.value-card {
  background: #F8F9FB;
  border-radius: 18px;
  padding: 34px 28px;
  transition: background .3s ease-out, transform .3s ease-out;
}

.value-card:hover {
  background: #EEF4FB;
  transform: translateY(-4px);
}

.value-card .icon-box {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(11,90,174,.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--md-blue);
  font-size: 19px;
  margin-bottom: 20px;
}

.value-card h3 {
  font-family: var(--md-font-display);
  font-weight: 400;
  font-size: 18px;
  color: var(--md-charcoal);
  margin: 0 0 10px;
}

.value-card p {
  font-family: var(--md-font-body);
  font-size: 13px;
  line-height: 1.7;
  color: #777;
  margin: 0;
}

@media only screen and (max-width: 991px) {
  .values-grid { grid-template-columns: repeat(2, 1fr); padding: 0 16px; }
}

@media only screen and (max-width: 600px) {
  .values-grid { grid-template-columns: 1fr; }
}

/* sayılarla — dark panel reusing the about-counter component */
.stats-section {
  padding: 0 0 90px;
}

.stats-panel {
  margin: 0 20px;
  background: linear-gradient(135deg, #073A73 0%, #052443 100%);
  border-radius: 32px;
  padding: 54px 56px;
}

.stats-panel .about-counters {
  border-top: none;
  padding-top: 0;
  margin-top: 0;
}

@media only screen and (max-width: 767px) {
  .stats-panel { margin: 0 16px; padding: 34px 24px; border-radius: 24px; }
}

/* generic CTA banner used across inner pages */
.page-cta-section {
  padding: 0 0 100px;
}

.page-cta-panel {
  margin: 0 20px;
  background: #052443;
  border-radius: 32px;
  padding: 60px 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  flex-wrap: wrap;
}

.page-cta-panel h2 {
  font-family: var(--md-font-display);
  font-weight: 400;
  font-size: 26px;
  color: #fff;
  margin: 0;
  max-width: 480px;
}

.page-cta-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--md-blue);
  color: #fff;
  text-decoration: none;
  font-family: var(--md-font-body);
  font-weight: 600;
  font-size: 14px;
  padding: 16px 30px;
  border-radius: 30px;
  transition: background .25s ease-out, transform .25s ease-out;
}

.page-cta-btn:hover {
  background: var(--md-blue-light);
  transform: translateY(-2px);
}

@media only screen and (max-width: 767px) {
  .page-cta-panel {
    margin: 0 16px;
    padding: 40px 26px;
    border-radius: 24px;
    flex-direction: column;
    align-items: flex-start;
  }
}

/* small nav active-state indicator, used by inner pages */
.navbar-nav .current-nav::after {
  transform: scaleX(1) !important;
}

/* ==========================================================================
   14. MISYON & VIZYON — two large statement cards
   ========================================================================== */
.mv-section {
  padding: 90px 0;
}

.mv-grid {
  max-width: 1170px;
  margin: 0 auto;
  padding: 0 15px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px;
}

.mv-card {
  position: relative;
  border-radius: 28px;
  padding: 48px 44px;
  overflow: hidden;
}

.mv-card.mv-mission {
  background: linear-gradient(135deg, #073A73 0%, #052443 100%);
  /* panelden gelen Misyon içeriği her zaman <p> etiketiyle sarmalanmış
     olmayabiliyor (düz metin de olabiliyor) — aşağıdaki ".mv-mission p"
     kuralı bu durumda hiç eşleşmeyip yazı koyu arka planda varsayılan
     (koyu) renkte kalıyordu. Rengi kutunun kendisine de tanımlayıp içindeki
     her içeriğin (etiketli/etiketsiz) beyaz görünmesini garantiliyoruz. */
  color: rgba(255,255,255,.8);
}

.mv-card.mv-vision {
  background: #F4F8FC;
}

.mv-card .icon-box {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 21px;
  margin-bottom: 26px;
}

.mv-mission .icon-box {
  background: rgba(255,255,255,.12);
  color: #fff;
}

.mv-vision .icon-box {
  background: rgba(11,90,174,.1);
  color: var(--md-blue);
}

.mv-card h2 {
  font-family: var(--md-font-display);
  font-weight: 400;
  font-size: 24px;
  margin: 0 0 16px;
}

.mv-mission h2 { color: #fff; }
.mv-vision h2 { color: var(--md-charcoal); }

.mv-card p {
  font-family: var(--md-font-body);
  font-size: 14.5px;
  line-height: 1.85;
  margin: 0;
}

.mv-mission p { color: rgba(255,255,255,.8); }
.mv-vision p { color: #666; }

@media only screen and (max-width: 880px) {
  .mv-grid { grid-template-columns: 1fr; padding: 0 16px; }
  .mv-card { padding: 36px 28px; }
  .mv-section { padding: 56px 0; }
}

/* ==========================================================================
   15. KALİTE POLİTİKASI — numbered principle rows
   ========================================================================== */
.quality-section {
  padding: 0 0 90px;
}

.quality-list {
  max-width: 1170px;
  margin: 0 auto;
  padding: 0 15px;
  display: flex;
  flex-direction: column;
}

.quality-row {
  display: flex;
  gap: 26px;
  padding: 30px 0;
  border-top: 1px solid #ECEBE7;
}

.quality-row:last-child {
  border-bottom: 1px solid #ECEBE7;
}

.quality-num {
  flex-shrink: 0;
  width: 50px;
  font-family: var(--md-font-display);
  font-size: 22px;
  color: var(--md-blue);
}

.quality-row h3 {
  font-family: var(--md-font-display);
  font-weight: 400;
  font-size: 18px;
  color: var(--md-charcoal);
  margin: 0 0 8px;
}

.quality-row p {
  font-family: var(--md-font-body);
  font-size: 13.5px;
  line-height: 1.75;
  color: #777;
  margin: 0;
  max-width: 640px;
}

@media only screen and (max-width: 767px) {
  .quality-list { padding: 0 16px; }
  .quality-row { gap: 16px; }
  .quality-num { width: 36px; font-size: 18px; }
}

/* ==========================================================================
   16. NEDEN MARIN CAM — checkmark advantages list, 2 columns
   ========================================================================== */
.advantages-section {
  padding: 0 0 90px;
}

.advantages-grid {
  max-width: 1170px;
  margin: 0 auto;
  padding: 0 15px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 40px;
}

.advantage-item {
  display: flex;
  gap: 16px;
}

.advantage-item .check-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(11,90,174,.1);
  color: var(--md-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

.advantage-item h3 {
  font-family: var(--md-font-display);
  font-weight: 400;
  font-size: 16.5px;
  color: var(--md-charcoal);
  margin: 0 0 6px;
}

.advantage-item p {
  font-family: var(--md-font-body);
  font-size: 13px;
  line-height: 1.7;
  color: #777;
  margin: 0;
}

@media only screen and (max-width: 767px) {
  .advantages-grid { grid-template-columns: 1fr; padding: 0 16px; }
}

/* ==========================================================================
   17. REFERANSLAR (page) — full logo grid
   ========================================================================== */
.refs-grid-section {
  padding: 0 0 90px;
}

.refs-grid {
  max-width: 1170px;
  margin: 0 auto;
  padding: 0 15px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
}

.refs-grid-item {
  background: #F8F9FB;
  border-radius: 16px;
  height: 170px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 00px;
  transition: background .3s ease-out, transform .3s ease-out;
}

.refs-grid-item:hover {
  background: #EEF4FB;
  transform: translateY(-3px);
}

.refs-grid-item img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

@media only screen and (max-width: 991px) {
  .refs-grid { grid-template-columns: repeat(3, 1fr); padding: 0 16px; }
}

@media only screen and (max-width: 600px) {
  .refs-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .refs-grid-item { height: 120px; padding: 18px; }
}

/* ==========================================================================
   18. ÜRÜN DETAY — hero image band under the page banner, related-articles
   mini grid. Subcategories reuse the existing .values-grid/.value-card
   component (same visual language, no need for a new one).
   ========================================================================== */
.product-hero-img-section {
  padding: 0 0 0;
}

.product-hero-img {
  margin: -40px 20px 0;
  position: relative;
  z-index: 2;
  border-radius: 24px;
  overflow: hidden;
  aspect-ratio: 21 / 8;
  background-size: cover;
  background-position: center;
  box-shadow: 0 30px 60px rgba(5,20,45,.18);
}

@media only screen and (max-width: 767px) {
  .product-hero-img {
    margin: -24px 16px 0;
    aspect-ratio: 4 / 3;
    border-radius: 18px;
  }
}

.related-articles-grid {
  max-width: 1170px;
  margin: 0 auto;
  padding: 0 15px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.article-card {
  display: block;
  text-decoration: none;
  border-radius: 18px;
  overflow: hidden;
  background: #F8F9FB;
  transition: transform .3s ease-out, box-shadow .3s ease-out;
}

.article-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(5,20,45,.1);
}

.article-card-img {
  height: 170px;
  background-size: cover;
  background-position: center;
}

.article-card-body {
  padding: 20px 22px 24px;
}

.article-card .blog-meta {
  margin-bottom: 10px;
}

.article-card h3 {
  font-family: var(--md-font-display);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.4;
  color: var(--md-charcoal);
  margin: 0;
}

@media only screen and (max-width: 880px) {
  .related-articles-grid { grid-template-columns: 1fr; padding: 0 16px; }
}

/* ==========================================================================
   19. PROJELER (listing page) — static grid version of the project cards
   ========================================================================== */
.projects-grid-section {
  /* NOT: banner ile bu bölüm arasında sadece boşluk vermek için var olan
     boş bir ".page-story-section" kaldırıldı (içinde hiç metin yoktu, buna
     rağmen 90px+ padding ekleyip kurumsal sayfalardaki banner-içerik
     boşluğuna göre çok daha büyük bir boşluk yaratıyordu) — o boşluğun
     yerini, kurumsal sayfalardaki ile aynı ölçüde (90px) buradaki üst
     padding alıyor. */
  padding: 90px 0 90px;
}

@media only screen and (max-width: 767px) {
  .projects-grid-section { padding-top: 56px; }
}

.projects-static-grid {
  max-width: 1170px;
  margin: 0 auto;
  padding: 0 15px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.project-grid-card {
  position: relative;
  display: block;
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 4 / 3.2;
  text-decoration: none;
  transition: transform .4s cubic-bezier(.25,.8,.25,1), box-shadow .4s ease-out;
}

.project-grid-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0);
  transition: border-color .4s ease-out;
  pointer-events: none;
}

.project-grid-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 26px 50px rgba(5,20,45,.22);
}

.project-grid-card:hover::before {
  border-color: rgba(255,255,255,.35);
}

.project-grid-card-view {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 2;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.4);
  backdrop-filter: blur(4px);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  opacity: 0;
  transform: translateY(-8px) scale(.85);
  transition: opacity .35s ease-out, transform .35s cubic-bezier(.34,1.56,.64,1);
}

.project-grid-card:hover .project-grid-card-view {
  opacity: 1;
  transform: translateY(0) scale(1) rotate(-45deg);
}

.project-grid-card-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform .6s ease-out;
}

.project-grid-card:hover .project-grid-card-bg {
  transform: scale(1.06);
}

.project-grid-card-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(3,15,30,.85) 0%, rgba(3,15,30,.15) 55%, transparent 100%);
}

.project-grid-card-body {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 24px;
}

.project-grid-card-body h3 {
  font-family: var(--md-font-display);
  font-weight: 400;
  font-size: 18px;
  color: #fff;
  margin: 0 0 6px;
}

.project-grid-card-body .loc {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--md-font-body);
  font-size: 12px;
  color: rgba(255,255,255,.75);
}

.project-grid-card-body .loc i {
  color: var(--md-blue-light);
  font-size: 12px;
}

@media only screen and (max-width: 991px) {
  .projects-static-grid { grid-template-columns: repeat(2, 1fr); padding: 0 16px; }
}

@media only screen and (max-width: 600px) {
  .projects-static-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   20. HİZMETLER (listing page) — static grid of service-item-gold cards
   ========================================================================== */
.services-grid-section {
  padding: 0 0 90px;
}

.services-static-grid {
  max-width: 1170px;
  margin: 0 auto;
  padding: 0 15px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

@media only screen and (max-width: 991px) {
  .services-static-grid { grid-template-columns: repeat(2, 1fr); padding: 0 16px; }
}

@media only screen and (max-width: 600px) {
  .services-static-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   21. BLOG (listing + detail)
   ========================================================================== */
.blog-grid-section {
  padding: 0 0 90px;
}

.blog-static-grid {
  max-width: 1170px;
  margin: 0 auto;
  padding: 0 15px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}

@media only screen and (max-width: 991px) {
  .blog-static-grid { grid-template-columns: repeat(2, 1fr); padding: 0 16px; }
}

@media only screen and (max-width: 600px) {
  .blog-static-grid { grid-template-columns: 1fr; }
}

.blog-detail-section {
  padding: 70px 0 40px;
}

.blog-detail-inner {
  margin: 0 auto;
  max-width: 760px;
  padding: 0 20px;
}

.blog-detail-meta {
  margin-bottom: 18px;
}

.blog-detail-inner h1 {
  font-family: var(--md-font-display);
  font-weight: 400;
  font-size: 34px;
  line-height: 1.3;
  color: var(--md-charcoal);
  margin: 0 0 30px;
}

.blog-detail-img {
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background-size: cover;
  background-position: center;
  margin-bottom: 40px;
}

.blog-detail-body {
  font-family: var(--md-font-body);
  font-size: 15px;
  line-height: 1.9;
  color: #444;
}

.blog-detail-body h2 {
  font-family: var(--md-font-display);
  font-weight: 400;
  font-size: 22px;
  color: var(--md-charcoal);
  margin: 40px 0 16px;
}

.blog-detail-body h3 {
  font-family: var(--md-font-display);
  font-weight: 400;
  font-size: 18px;
  color: var(--md-charcoal);
  margin: 28px 0 12px;
}

.blog-detail-body p {
  margin: 0 0 18px;
}

@media only screen and (max-width: 767px) {
  .blog-detail-inner h1 { font-size: 25px; }
}

/* ==========================================================================
   22. İLETİŞİM
   ========================================================================== */
.contact-section {
  padding: 90px 0;
}

.contact-grid {
  max-width: 1170px;
  margin: 0 auto;
  padding: 0 15px;
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 50px;
}

.contact-info-card {
  background: linear-gradient(135deg, #073A73 0%, #052443 100%);
  border-radius: 28px;
  padding: 44px 38px;
}

.contact-info-card h2 {
  font-family: var(--md-font-display);
  font-weight: 400;
  font-size: 24px;
  color: #fff;
  margin: 0 0 30px;
}

.contact-info-row {
  display: flex;
  gap: 14px;
  margin-bottom: 24px;
}

.contact-info-row i {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(255,255,255,.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--md-blue-light);
  font-size: 16px;
}

.contact-info-row div span {
  display: block;
  font-family: var(--md-font-body);
  font-size: 12px;
  color: rgba(255,255,255,.5);
  margin-bottom: 4px;
}

.contact-info-row div a,
.contact-info-row div p {
  font-family: var(--md-font-body);
  font-size: 14.5px;
  color: #fff;
  text-decoration: none;
  margin: 0;
}

.contact-social {
  display: flex;
  gap: 10px;
  margin-top: 30px;
}

.contact-social a {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.25);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-decoration: none;
  font-size: 14px;
  transition: all .3s ease-out;
}

.contact-social a:hover {
  background: #fff;
  color: var(--md-blue-deep);
}

.contact-form-card {
  background: #F8F9FB;
  border-radius: 28px;
  padding: 44px 38px;
}

.contact-form-card h2 {
  font-family: var(--md-font-display);
  font-weight: 400;
  font-size: 24px;
  color: var(--md-charcoal);
  margin: 0 0 8px;
}

.contact-form-card > p {
  font-family: var(--md-font-body);
  font-size: 13.5px;
  color: #777;
  margin: 0 0 28px;
}

.contact-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}

.contact-form-card input,
.contact-form-card textarea {
  width: 100%;
  border: 1px solid #E2E4E8;
  background: #fff;
  border-radius: 12px;
  padding: 14px 16px;
  font-family: var(--md-font-body);
  font-size: 13.5px;
  font-weight: 400;
  color: var(--md-charcoal);
  transition: border-color .25s ease-out;
}

.contact-form-card input::placeholder,
.contact-form-card textarea::placeholder {
  color: #9AA6B4;
  font-weight: 400;
}

.contact-form-card input:focus,
.contact-form-card textarea:focus {
  outline: none;
  border-color: var(--md-blue);
}

.contact-form-card textarea {
  min-height: 120px;
  resize: vertical;
  margin-bottom: 20px;
}

.contact-form-submit {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--md-blue);
  color: #fff;
  border: none;
  font-family: var(--md-font-body);
  font-weight: 600;
  font-size: 14px;
  padding: 15px 30px;
  border-radius: 30px;
  cursor: pointer;
  transition: background .25s ease-out;
}

.contact-form-submit:hover {
  background: var(--md-blue-deep);
}

.contact-form-submit:disabled {
  opacity: .6;
  cursor: not-allowed;
}

.contact-form-notice {
  display: none;
  margin-top: 18px;
  padding: 14px 18px;
  border-radius: 12px;
  font-family: var(--md-font-body);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.5;
}

.contact-form-notice:not(:empty) {
  display: block;
}

.contact-form-notice.is-success {
  background: #E7F6EC;
  color: #1E7E42;
}

.contact-form-notice.is-error {
  background: #FDECEC;
  color: #B42318;
}

.alert {
  font-family: var(--md-font-body);
  font-size: 14px;
  font-weight: 600;
  padding: 16px 22px;
  border-radius: 12px;
  line-height: 1.5;
}

.alert-success {
  background: #E7F6EC;
  color: #1E7E42;
}

.alert-danger {
  background: #FDECEC;
  color: #B42318;
}

.contact-map-placeholder {
  margin: 50px 20px 0;
  border-radius: 24px;
  height: 320px;
  background: #F4F8FC;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 10px;
  color: #9AA6B4;
  font-family: var(--md-font-body);
  font-size: 13px;
}

.contact-map-placeholder i {
  font-size: 28px;
  color: var(--md-blue);
}

@media only screen and (max-width: 880px) {
  .contact-grid { grid-template-columns: 1fr; padding: 0 16px; gap: 24px; }
  .contact-form-row { grid-template-columns: 1fr; gap: 0; }
  .contact-map-placeholder { margin: 30px 16px 0; }
}

/* ==========================================================================
   23. KURUMSAL SIDEBAR — left nav across the 5 Kurumsal sub-pages
   (Hakkımızda, Misyon & Vizyon, Kalite Politikası, Neden Marin Cam,
   Referanslar), sticky, current page highlighted.
   ========================================================================== */
.kurumsal-layout {
  max-width: 1170px;
  margin: 64px auto 0;
  padding: 0 15px;
  display: grid;
  grid-template-columns: 264px 1fr;
  gap: 50px;
  align-items: start;
}

.kurumsal-sidebar {
  position: sticky;
  top: 110px;
  background: #F8F9FB;
  border-radius: 20px;
  padding: 12px;
}

.kurumsal-sidebar-label {
  display: block;
  font-family: var(--md-font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #9AA6B4;
  padding: 12px 16px 8px;
}

.kurumsal-sidebar a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  border-radius: 12px;
  font-family: var(--md-font-body);
  font-size: 13.5px;
  font-weight: 500;
  color: #555;
  text-decoration: none;
  transition: background .25s ease-out, color .25s ease-out;
}

.kurumsal-sidebar a + a {
  margin-top: 2px;
}

.kurumsal-sidebar a i {
  font-size: 15px;
  width: 18px;
  text-align: center;
  flex-shrink: 0;
  color: var(--md-blue);
  transition: color .25s ease-out;
}

.sidebar-dot {
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--md-blue);
  opacity: .45;
  transition: all .25s ease-out;
}

.kurumsal-sidebar a:hover {
  background: #EEF4FB;
  color: var(--md-blue);
}

.kurumsal-sidebar a:hover .sidebar-dot {
  opacity: .8;
}

.kurumsal-sidebar a.active {
  background: var(--md-blue);
  color: #fff;
}

.kurumsal-sidebar a.active .sidebar-dot {
  background: #fff;
  opacity: 1;
  width: 9px;
  height: 9px;
  border-radius: 3px;
}

.kurumsal-main > section:first-child {
  padding-top: 0;
}

.kurumsal-main .page-story-inner,
.kurumsal-main .values-grid,
.kurumsal-main .quality-list,
.kurumsal-main .advantages-grid,
.kurumsal-main .refs-grid,
.kurumsal-main .mv-grid {
  max-width: none;
  margin: 0;
  padding: 0;
}

@media only screen and (max-width: 991px) {
  .kurumsal-layout {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .kurumsal-sidebar {
    position: static;
    display: flex;
    overflow-x: auto;
    gap: 4px;
  }
  .kurumsal-sidebar-label { display: none; }
  .kurumsal-sidebar a { white-space: nowrap; }
}

/* ==========================================================================
   24. ALTERNATIF BANNER TASARIMI (demo only) — compact solid header +
   separate light breadcrumb bar below, title left / shortcuts right.
   Not used on the live site yet — comparison demo per request.
   ========================================================================== */
.page-banner-alt {
  margin: 20px 20px 0;
  padding: 26px 40px;
  background: #F8F9FB;
  border: 1px solid #ECEBE7;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.page-banner-alt h1 {
  font-family: var(--md-font-display);
  font-weight: 400;
  font-size: 24px;
  color: var(--md-charcoal);
  margin: 0;
}

.page-banner-alt .page-banner-crumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--md-font-body);
  font-size: 13px;
  color: #8A9099;
}

.page-banner-alt .page-banner-crumb a {
  color: #8A9099;
  text-decoration: none;
  transition: color .25s ease-out;
}

.page-banner-alt .page-banner-crumb a:hover {
  color: var(--md-blue);
}

.page-banner-alt .page-banner-crumb i {
  font-size: 10px;
  opacity: .6;
}

.page-banner-alt .page-banner-crumb span {
  color: var(--md-blue);
  font-weight: 600;
}

@media only screen and (max-width: 767px) {
  .page-banner-alt {
    margin: 16px 16px 0;
    padding: 20px 22px;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    border-radius: 16px;
  }
}

/* ==========================================================================
   25. ÜRETİM — 4-photo lightbox gallery (Magnific Popup, already bundled
   in plugins.js), animated hover reveal.
   ========================================================================== */
.production-gallery-section {
  padding: 0 0 90px;
}

.production-gallery-grid {
  max-width: 1170px;
  margin: 0 auto;
  padding: 0 15px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.gallery-item {
  position: relative;
  display: block;
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s cubic-bezier(.25,.8,.25,1);
}

.gallery-item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(3,15,30,.45);
  opacity: 0;
  transition: opacity .4s ease-out;
}

.gallery-zoom {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(.6);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(255,255,255,.95);
  color: var(--md-blue-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  opacity: 0;
  z-index: 1;
  transition: opacity .35s ease-out, transform .35s cubic-bezier(.34,1.56,.64,1);
}

.gallery-item:hover img {
  transform: scale(1.1);
}

.gallery-item:hover::after,
.gallery-item:hover .gallery-zoom {
  opacity: 1;
}

.gallery-item:hover .gallery-zoom {
  transform: translate(-50%, -50%) scale(1);
}

@media only screen and (max-width: 767px) {
  .production-gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}

/* ==========================================================================
   26. BLOG DETAY — two-column layout with a "diğer yazılar" sidebar (10
   posts + "Tüm Yazıları Gör"), nicer meta row, share buttons, thin
   borders separating content blocks.
   ========================================================================== */
.blog-detail-layout {
  max-width: 1170px;
  margin: 0 auto;
  padding: 0 15px;
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 60px;
  align-items: start;
}

.blog-detail-main {
  border-top: 1px solid #ECEBE7;
  padding-top: 34px;
}

.blog-detail-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 26px;
}

.blog-detail-meta-row .blog-meta {
  display: flex;
  align-items: center;
  gap: 8px;
}

.blog-detail-meta-row .blog-date {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.blog-detail-meta-row .blog-date i {
  color: var(--md-blue);
  font-size: 13px;
}

.blog-read-time {
  font-family: var(--md-font-body);
  font-size: 12.5px;
  color: #9AA6B4;
}

.blog-share-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 44px;
  padding-top: 24px;
  border-top: 1px solid #ECEBE7;
}

.blog-share-label {
  font-family: var(--md-font-body);
  font-size: 12.5px;
  font-weight: 600;
  color: #777;
  margin-right: 4px;
}

.blog-share-row a {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid #E2E4E8;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #666;
  font-size: 14px;
  text-decoration: none;
  transition: all .25s ease-out;
}

.blog-share-row a:hover {
  background: var(--md-blue);
  border-color: var(--md-blue);
  color: #fff;
}

/* sidebar */
.blog-sidebar {
  position: sticky;
  top: 110px;
  border: 1px solid #ECEBE7;
  border-radius: 20px;
  padding: 22px;
}

.blog-sidebar-label {
  display: block;
  font-family: var(--md-font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #9AA6B4;
  margin-bottom: 16px;
}

.blog-sidebar-item {
  display: flex;
  gap: 12px;
  text-decoration: none;
  padding: 10px 0;
  border-top: 1px solid #F1F1EF;
}

.blog-sidebar-item:first-of-type {
  border-top: none;
  padding-top: 0;
}

.blog-sidebar-thumb {
  flex-shrink: 0;
  width: 62px;
  height: 62px;
  border-radius: 10px;
  background-size: cover;
  background-position: center;
}

.blog-sidebar-item span {
  display: block;
  font-family: var(--md-font-body);
  font-size: 11px;
  color: #9AA6B4;
  margin-bottom: 4px;
}

.blog-sidebar-item h4 {
  font-family: var(--md-font-body);
  font-weight: 600;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--md-charcoal);
  margin: 0;
  transition: color .2s ease-out;
}

.blog-sidebar-item:hover h4 {
  color: var(--md-blue);
}

.blog-sidebar-all-btn {
  display: block;
  text-align: center;
  margin-top: 18px;
  padding: 13px;
  border-radius: 30px;
  background: #F4F8FC;
  color: var(--md-blue);
  font-family: var(--md-font-body);
  font-weight: 600;
  font-size: 13px;
  text-decoration: none;
  transition: background .25s ease-out;
}

.blog-sidebar-all-btn:hover {
  background: var(--md-blue);
  color: #fff;
}

@media only screen and (max-width: 991px) {
  .blog-detail-layout { grid-template-columns: 1fr; gap: 30px; }
  .blog-sidebar { position: static; }
}

/* ==========================================================================
   27. HİZMETLER (listing page) — alternating zig-zag rows: photo + content,
   direction flips each row. Full descriptions (from the client's brief).
   ========================================================================== */
.services-alt-section {
  /* NOT: banner ile bu bölüm arasındaki boş ".page-story-section" kaldırıldı
     (bkz. projects-grid-section'daki not) — kurumsal sayfalarla aynı üst
     boşluk (90px) burada veriliyor. */
  padding: 90px 0 40px;
}

@media only screen and (max-width: 767px) {
  .services-alt-section { padding-top: 56px; }
}

.service-row {
  max-width: 1170px;
  margin: 0 auto;
  padding: 0 15px;
  display: flex;
  align-items: center;
  gap: 64px;
}

.service-row + .service-row {
  margin-top: 80px;
}

.service-row.reverse {
  flex-direction: row-reverse;
}

.service-row-img {
  flex: 0 0 46%;
  aspect-ratio: 4 / 3.2;
  border-radius: 22px;
  background-size: cover;
  background-position: center;
}

.service-row-content {
  flex: 1;
}

.service-row-content .icon-box {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: rgba(11,90,174,.1);
  color: var(--md-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  margin-bottom: 20px;
}

.service-row-no {
  display: block;
  font-family: var(--md-font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--md-blue);
  margin-bottom: 10px;
}

.service-row-content h2 {
  font-family: var(--md-font-display);
  font-weight: 400;
  font-size: 26px;
  color: var(--md-charcoal);
  margin: 0 0 12px;
}

.service-row-tagline {
  font-family: var(--md-font-body);
  font-weight: 600;
  font-size: 14px;
  color: var(--md-blue);
  margin: 0 0 16px;
}

.service-row-content p:not(.service-row-tagline) {
  font-family: var(--md-font-body);
  font-size: 14px;
  line-height: 1.85;
  color: #666;
  margin: 0;
}

@media only screen and (max-width: 880px) {
  .service-row,
  .service-row.reverse {
    flex-direction: column;
    gap: 26px;
  }
  .service-row-img { flex: 0 0 auto; width: 100%; }
  .service-row + .service-row { margin-top: 48px; }
  .service-row-content h2 { font-size: 21px; }
}

/* ==========================================================================
   28. ÜRÜNLER — category overview page (urunler.html): big tiles with a
   short description under each, reusing the homepage product-card visual
   language but taller, with room for copy.
   ========================================================================== */
.category-tiles-section {
  padding: 90px 0 90px;
}
@media only screen and (max-width: 767px) {
  .category-tiles-section {
    padding-top: 56px;
  }
}

.category-tiles-grid {
  max-width: 1170px;
  margin: 0 auto;
  padding: 0 15px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px;
}

.category-tile {
  position: relative;
  display: block;
  text-decoration: none;
  border-radius: 24px;
  overflow: hidden;
  min-height: 420px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.category-tile-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform .7s cubic-bezier(.25,.8,.25,1);
}

.category-tile:hover .category-tile-bg {
  transform: scale(1.08);
}

.category-tile-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(3,15,30,.92) 0%, rgba(3,15,30,.35) 60%, rgba(3,15,30,.1) 100%);
}

.category-tile-body {
  position: relative;
  z-index: 1;
  padding: 32px;
}

.category-tile-label {
  display: inline-block;
  font-family: var(--md-font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--md-blue-light);
  margin-bottom: 10px;
}

.category-tile h2 {
  font-family: var(--md-font-display);
  font-weight: 400;
  font-size: 26px;
  color: #fff;
  margin: 0 0 12px;
}

.category-tile p {
  font-family: var(--md-font-body);
  font-size: 13.5px;
  line-height: 1.75;
  color: rgba(255,255,255,.78);
  max-width: 420px;
  margin: 0 0 16px;
}

.category-tile-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  font-family: var(--md-font-body);
  font-weight: 600;
  font-size: 13px;
}

@media only screen and (max-width: 767px) {
  .category-tiles-grid { grid-template-columns: 1fr; }
  .category-tile { min-height: 340px; }
}

/* ==========================================================================
   29. ÜRÜN KATEGORİ DETAY — top tab switcher between main categories, a
   grid-density toggle (2/3/4 cols) with a faint product count, and a
   bordered product grid with hover zoom.
   ========================================================================== */
.category-switch-section {
  /* NOT: banner ile bu bölüm arasındaki boş ".page-story-section" kaldırıldı
     (bkz. projects-grid-section'daki not) — kurumsal sayfalarla aynı üst
     boşluk (90px) burada veriliyor. */
  padding: 90px 0 30px;
}

@media only screen and (max-width: 767px) {
  .category-switch-section { padding-top: 56px; }
}

.category-switch-bar {
  max-width: 1170px;
  margin: 0 auto;
  padding: 0 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}

.category-tabs {
  display: flex;
  gap: 6px;
  background: #F4F8FC;
  border-radius: 40px;
  padding: 5px;
}

.category-tabs a {
  display: inline-flex;
  align-items: center;
  padding: 10px 22px;
  border-radius: 30px;
  font-family: var(--md-font-body);
  font-weight: 600;
  font-size: 13.5px;
  color: #6B7280;
  text-decoration: none;
  transition: all .25s ease-out;
}

.category-tabs a.active {
  background: var(--md-blue);
  color: #fff;
}

.category-tabs a:not(.active):hover {
  color: var(--md-blue);
}

.category-view-controls {
  display: flex;
  align-items: center;
  gap: 14px;
}

.category-count {
  font-family: var(--md-font-body);
  font-size: 12.5px;
  color: #B7BEC7;
}

.view-toggle {
  display: flex;
  gap: 4px;
  background: #F4F8FC;
  border-radius: 10px;
  padding: 4px;
}

.view-toggle button {
  width: 32px;
  height: 32px;
  border-radius: 7px;
  border: none;
  background: transparent;
  color: #9AA6B4;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all .2s ease-out;
}

.view-toggle button.active {
  background: #fff;
  color: var(--md-blue);
  box-shadow: 0 2px 6px rgba(5,20,45,.08);
}

.view-toggle button svg {
  width: 15px;
  height: 15px;
}

/* product grid, density set via a data-cols attribute the toggle JS writes */
.product-grid-section {
  padding: 0 0 90px;
}

.product-grid {
  max-width: 1170px;
  margin: 0 auto;
  padding: 0 15px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  transition: none;
}

.product-grid[data-cols="2"] { grid-template-columns: repeat(2, 1fr); }
.product-grid[data-cols="3"] { grid-template-columns: repeat(3, 1fr); }
.product-grid[data-cols="4"] { grid-template-columns: repeat(4, 1fr); }

.product-tile {
  display: block;
  text-decoration: none;
  border: 1px solid #ECEBE7;
  border-radius: 16px;
  overflow: hidden;
  transition: border-color .3s ease-out, box-shadow .3s ease-out, transform .3s ease-out;
}

.product-tile:hover {
  border-color: #DCE3EC;
  box-shadow: 0 18px 34px rgba(5,20,45,.1);
  transform: translateY(-3px);
}

.product-tile-img {
  aspect-ratio: 4 / 3.4;
  overflow: hidden;
}

.product-tile-img > div {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  transition: transform .5s ease-out;
}

.product-tile:hover .product-tile-img > div {
  transform: scale(1.07);
}

.product-tile-body {
  padding: 16px 18px 20px;
}

.product-tile-body h3 {
  font-family: var(--md-font-display);
  font-weight: 400;
  font-size: 15.5px;
  color: var(--md-charcoal);
  margin: 0;
}

@media only screen and (max-width: 991px) {
  .product-grid[data-cols="3"],
  .product-grid[data-cols="4"] { grid-template-columns: repeat(2, 1fr); }
}

@media only screen and (max-width: 600px) {
  .product-grid[data-cols="2"],
  .product-grid[data-cols="3"],
  .product-grid[data-cols="4"] { grid-template-columns: 1fr; }
  .category-switch-bar { flex-direction: column; align-items: flex-start; }
}

/* ==========================================================================
   30. ÜRÜN DETAY — left vertical-thumbnail gallery + right info, tabbed
   content below (Özellikler / Dosyalar / Ürün Videosu). The Dosyalar and
   Video tabs are written to only render when the panel actually has
   files/a video set — see the HTML comments in each page for the
   conditional marker.
   ========================================================================== */
.product-detail-section {
  padding: 40px 0 0;
}

.product-detail-grid {
  max-width: 1170px;
  margin: 0 auto;
  padding: 0 15px;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 60px;
  align-items: start;
}

.product-gallery {
  display: flex;
  gap: 14px;
  height: 460px;
}

.product-gallery-thumbs {
  flex: 0 0 84px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.gallery-nav-btn {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid #E2E4E8;
  background: #fff;
  color: #6B7280;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all .2s ease-out;
}

.gallery-nav-btn:hover {
  background: var(--md-blue);
  border-color: var(--md-blue);
  color: #fff;
}

.product-gallery-thumb-list {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
  scrollbar-width: none;
  padding: 2px;
}

.product-gallery-thumb-list::-webkit-scrollbar {
  display: none;
}

.gallery-thumb {
  flex-shrink: 0;
  width: 84px;
  height: 72px;
  border-radius: 10px;
  overflow: hidden;
  border: 2px solid transparent;
  padding: 0;
  cursor: pointer;
  background: none;
  transition: border-color .2s ease-out, opacity .2s ease-out;
  opacity: .6;
}

.gallery-thumb img,
.gallery-thumb > div {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-size: cover;
  background-position: center;
}

.gallery-thumb:hover {
  opacity: .9;
}

.gallery-thumb.active {
  border-color: var(--md-blue);
  opacity: 1;
}

.product-gallery-main {
  flex: 1;
  border-radius: 20px;
  overflow: hidden;
  position: relative;
  background: #F4F8FC;
}

.product-gallery-main img,
.product-gallery-main > div {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-size: cover;
  background-position: center;
  transition: opacity .3s ease-out;
}

.product-detail-cat {
  display: block;
  font-family: var(--md-font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--md-blue);
  margin-bottom: 12px;
}

.product-detail-info h1 {
  font-family: var(--md-font-display);
  font-weight: 400;
  font-size: 28px;
  color: var(--md-charcoal);
  margin: 0 0 18px;
}

.product-detail-desc {
  font-family: var(--md-font-body);
  font-size: 14.5px;
  line-height: 1.85;
  color: #666;
  margin: 0 0 28px;
}

.product-detail-info .page-cta-btn {
  display: inline-flex;
}

@media only screen and (max-width: 880px) {
  .product-detail-grid { grid-template-columns: 1fr; gap: 30px; }
  .product-gallery { height: 380px; }
}

/* tabs */
.product-tabs-section {
  max-width: 1170px;
  margin: 10px auto 90px;
  padding: 0 15px;
}

.product-tabs-nav {
  display: flex;
  justify-content: center;
  gap: 8px;
  border-bottom: 1px solid #ECEBE7;
  margin-bottom: 34px;
}

.product-tab-btn {
  padding: 14px 6px;
    /* margin-right: 26px; */
    border: none;
  background: none;
  font-family: var(--md-font-body);
  font-weight: 600;
  font-size: 14px;
  color: #9AA6B4;
  cursor: pointer;
  position: relative;
  transition: color .25s ease-out;
}

.product-tab-btn::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--md-blue);
  transform: scaleX(0);
  transition: transform .25s ease-out;
}

.product-tab-btn.active {
  color: var(--md-charcoal);
}

.product-tab-btn.active::after {
  transform: scaleX(1);
}

.product-tab-panel {
  display: none;
}

.product-tab-panel.active {
  display: block;
}

.product-features-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 40px;
  max-width: 100%;
  width: 100%;
}

.product-features-list li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 0;
  border-bottom: 1px solid #F1F1EF;
  font-family: var(--md-font-body);
  font-size: 13.5px;
}

.product-features-list li span:first-child {
  color: #9AA6B4;
}

.product-features-list li span:last-child {
  color: var(--md-charcoal);
  font-weight: 600;
  text-align: right;
}

.product-files-list {
  max-width: 520px;
}

.product-file-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border: 1px solid #ECEBE7;
  border-radius: 14px;
}

.product-file-row + .product-file-row {
  margin-top: 12px;
}

.product-file-row .file-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(11,90,174,.08);
  color: var(--md-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
}

.product-file-row .file-info {
  flex: 1;
}

.product-file-row .file-info strong {
  display: block;
  font-family: var(--md-font-body);
  font-size: 13.5px;
  color: var(--md-charcoal);
}

.product-file-row .file-info span {
  font-family: var(--md-font-body);
  font-size: 11.5px;
  color: #9AA6B4;
}

.product-file-row .file-download {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid #E2E4E8;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6B7280;
  text-decoration: none;
  transition: all .2s ease-out;
}

.product-file-row .file-download:hover {
  background: var(--md-blue);
  border-color: var(--md-blue);
  color: #fff;
}

.product-video-wrap {
  max-width: 800px;
  border-radius: 18px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
}

.product-video-wrap iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.product-video-placeholder {
  max-width: 800px;
  aspect-ratio: 16 / 9;
  border-radius: 18px;
  background: #F4F8FC;
  border: 1px dashed #DCE3EC;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  text-align: center;
  padding: 30px;
}

.product-video-placeholder .play-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #fff;
  color: var(--md-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  box-shadow: 0 10px 24px rgba(5,20,45,.08);
}

.product-video-placeholder p {
  font-family: var(--md-font-body);
  font-size: 13.5px;
  line-height: 1.7;
  color: #9AA6B4;
  margin: 0;
  max-width: 340px;
}

/* ==========================================================================
   31. PROJE DETAY — centered letter-shuffle title reveal (ported from
   montoya.zip's hero: #hero-caption.height-title, real GSAP values —
   scaleY .3->1, opacity 0->1, shuffled letter order, stagger .05,
   duration .7, power3.out), centered short description, then an
   "Overlapping Gallery" (sticky-stacking full-height images, no caption
   text on the photos per the brief, lightbox-enabled on click).
   ========================================================================== */
.project-hero-section {
  padding: 160px 0 70px;
  text-align: center;
}

.project-hero-title {
  font-family: var(--md-font-display);
  font-weight: 400;
  font-size: clamp(42px, 8vw, 110px);
  line-height: 1.05;
  color: var(--md-charcoal);
  margin: 0 0 26px;
}

.project-hero-title .char {
  display: inline-block;
  transform-origin: 50% 100%;
}

.project-hero-desc {
  max-width: 620px;
  margin: 0 auto;
  font-family: var(--md-font-body);
  font-size: 15px;
  line-height: 1.85;
  color: #666;
}

.project-hero-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 22px;
}

.project-hero-meta span {
  font-family: var(--md-font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--md-blue);
}

.project-hero-meta i {
  font-size: 6px;
  color: #DCE3EC;
}

/* Overlapping Gallery — sticky stacking, pure-CSS (position:sticky +
   increasing z-index per item recreates the reference's scroll-pin
   overlap illusion reliably, without depending on their bundled
   ScrollTrigger pin setup) */
.overlap-gallery-section {
  background: #0c0c0c;
}

.overlap-gallery-item {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px;
  box-sizing: border-box;
}

.overlap-gallery-item:nth-child(1) { z-index: 1; }
.overlap-gallery-item:nth-child(2) { z-index: 2; }
.overlap-gallery-item:nth-child(3) { z-index: 3; }
.overlap-gallery-item:nth-child(4) { z-index: 4; }
.overlap-gallery-item:nth-child(5) { z-index: 5; }

.overlap-gallery-frame {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  transform: scale(.94);
  opacity: .7;
  transition: transform .5s ease-out, opacity .5s ease-out;
}

.overlap-gallery-item.in-view .overlap-gallery-frame {
  transform: scale(1);
  opacity: 1;
}

.overlap-gallery-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media only screen and (max-width: 767px) {
  .project-hero-section { padding: 130px 0 50px; }
  .overlap-gallery-item { padding: 14px; }
}

/* ==========================================================================
   32. LIGHTBOX (Magnific Popup) — brand styling for the Overlapping
   Gallery lightbox
   ========================================================================== */
.mfp-bg {
  background: #030f1e;
  opacity: .94;
}

.mfp-figure figure {
  border-radius: 14px;
  overflow: hidden;
}

.mfp-image-holder .mfp-close,
.mfp-iframe-holder .mfp-close {
  width: 42px;
  height: 42px;
  line-height: 42px;
  right: 16px;
  top: 16px;
  left: auto;
  padding: 0;
  margin: 0;
  text-align: center;
  border-radius: 50%;
  background: rgba(255,255,255,.12);
  color: #fff;
  opacity: 1;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 24px;
  z-index: 10;
  transition: background .25s ease-out;
}

.mfp-image-holder .mfp-close:hover,
.mfp-iframe-holder .mfp-close:hover {
  background: var(--md-blue);
}

.mfp-arrow {
  opacity: .75;
  transition: opacity .2s ease-out;
}

.mfp-arrow:hover {
  opacity: 1;
}

.mfp-counter {
  color: rgba(255,255,255,.6);
  font-family: var(--md-font-body);
  font-size: 12px;
}

/* ==========================================================================
   33. PROJE DETAY v2 — meta icon row (Konum/Tarih/Uygulama/Video) + border,
   kısa açıklama + border, redox.zip'in works-wrapper-8 2 sütunlu galerisi
   (aynı scale-reveal + hover rozeti efektiyle, lightbox'a bağlı), sonra
   Önceki/Sonraki Proje navigasyonu.
   ========================================================================== */

/* meta icon row */
.project-meta-section {
  padding: 30px 0 0;
}

.project-meta-row {
  max-width: 1170px;
  margin: 0 auto;
  padding: 0 15px 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  border-bottom: 1px solid #ECEBE7;
}

.project-meta-block {
  display: flex;
  align-items: center;
  gap: 14px;
}

.project-meta-block .icon-box {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(11,90,174,.08);
  color: var(--md-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
}

.project-meta-block .meta-text span {
  display: block;
  font-family: var(--md-font-body);
  font-size: 11px;
  color: #9AA6B4;
  margin-bottom: 3px;
}

.project-meta-block .meta-text strong {
  font-family: var(--md-font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--md-charcoal);
}

.project-meta-block.is-video {
  cursor: pointer;
}

.project-meta-block.is-video .icon-box {
  background: var(--md-blue);
  color: #fff;
  transition: background .25s ease-out;
}

.project-meta-block.is-video:hover .icon-box {
  background: var(--md-blue-deep);
}

.project-desc-section {
  padding: 34px 0 0;
}

.project-desc-inner {
  max-width: 1170px;
  margin: 0 auto;
  padding: 0 15px 40px;
  border-bottom: 1px solid #ECEBE7;
}

.project-desc-inner p,
.project-desc-inner .project-desc-text {
  max-width: 760px;
  font-family: var(--md-font-body);
  font-size: 15px;
  line-height: 1.9;
  color: #555;
  margin: 0;
}

/* redox-style 2-column gallery */
.project-gallery2-section {
  padding: 70px 0 90px;
}

.project-gallery2-grid {
  max-width: 1170px;
  margin: 0 auto;
  padding: 0 15px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 26px 24px;
}

.gallery2-item {
  display: block;
}

.gallery2-thumb {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  aspect-ratio: 4 / 3.3;
  cursor: pointer;
}

.gallery2-thumb .image-inner {
  position: absolute;
  inset: 0;
  transform: scale(.9);
  opacity: 0;
  transition: transform .8s cubic-bezier(.16,1,.3,1), opacity .8s ease-out;
  transform-origin: bottom right;
}

.gallery2-item:nth-child(2n) .gallery2-thumb .image-inner {
  transform-origin: bottom left;
}

.gallery2-thumb.in-view .image-inner {
  transform: scale(1);
  opacity: 1;
}

.gallery2-thumb .image-inner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s ease-out;
}

.gallery2-thumb:hover .image-inner img {
  transform: scale(1.06);
}

.gallery2-view-badge {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(.7);
  width: 52px;
  height: 52px;
  background: #fff;
  color: var(--md-blue-deep);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  opacity: 0;
  z-index: 2;
  pointer-events: none;
  transition: opacity .3s ease-out, transform .3s cubic-bezier(.34,1.56,.64,1);
}

.gallery2-thumb:hover .gallery2-view-badge {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

@media only screen and (max-width: 767px) {
  .project-gallery2-grid { grid-template-columns: 1fr; gap: 34px; }
  .project-meta-row { gap: 22px 30px; }
}

/* Önceki / Sonraki Proje */
.project-nav-section {
  border-top: 1px solid #ECEBE7;
}

.project-nav-row {
  max-width: 1170px;
  margin: 0 auto;
  padding: 0 15px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}

.project-nav-link {
  position: relative;
  display: block;
  overflow: hidden;
  padding: 70px 0;
  text-decoration: none;
}

.project-nav-link.next {
  text-align: right;
}

.project-nav-bg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, 60%);
  width: 220px;
  height: 150px;
  border-radius: 16px;
  background-size: cover;
  background-position: center;
  opacity: 0;
  z-index: 0;
  pointer-events: none;
  transition: transform .5s cubic-bezier(.16,1,.3,1), opacity .5s ease-out;
}

.project-nav-link:hover .project-nav-bg {
  transform: translate(-50%, -50%);
  opacity: 1;
}

.project-nav-eyebrow {
  position: relative;
  z-index: 1;
  display: block;
  font-family: var(--md-font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #9AA6B4;
  margin-bottom: 10px;
  transition: color .3s ease-out, opacity .3s ease-out;
}

.project-nav-link:hover .project-nav-eyebrow {
  opacity: .35;
}

.project-nav-title {
  position: relative;
  z-index: 1;
  font-family: var(--md-font-display);
  font-weight: 400;
  font-size: clamp(24px, 3.4vw, 38px);
  line-height: 1.2;
  color: transparent;
  -webkit-text-stroke: 1px var(--md-charcoal);
  transition: color .35s ease-out, -webkit-text-stroke-color .35s ease-out;
}

.project-nav-link:hover .project-nav-title {
  color: var(--md-charcoal);
}

.project-nav-all {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  padding: 0 50px;
}

.project-nav-all .icon-box {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 1px solid #E2E4E8;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--md-charcoal);
  font-size: 19px;
  transition: all .3s ease-out;
}

.project-nav-all:hover .icon-box {
  background: var(--md-blue);
  border-color: var(--md-blue);
  color: #fff;
  transform: rotate(90deg);
}

.project-nav-all span {
  font-family: var(--md-font-body);
  font-weight: 600;
  font-size: 12.5px;
  color: var(--md-charcoal);
}

@media only screen and (max-width: 880px) {
  .project-nav-row { grid-template-columns: 1fr; text-align: center; gap: 10px; }
  .project-nav-link.next { text-align: center; }
  .project-nav-all { padding: 20px 0; order: -1; }
  .project-nav-bg { display: none; }
}

/* ==========================================================================
   34. PARALLAX VİDEO BÖLÜMÜ — Hakkımızda sayfasında "hakkında" yazısının
   altında, YouTube linki tanımlandığında otomatik olarak o videonun
   thumbnail'ini arka plan yapan (background-attachment:fixed parallax),
   ortada oynat butonlu bölüm.
   ========================================================================== */
.parallax-video-section {
  position: relative;
  margin: 10px 20px 0;
  border-radius: 32px;
  overflow: hidden;
  height: 460px;
  background-color: #052443;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
}

.parallax-video-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(3,15,30,.55) 0%, rgba(3,15,30,.35) 50%, rgba(3,15,30,.65) 100%);
}

.parallax-video-btn {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  background: none;
  border: none;
  cursor: pointer;
  color: #fff;
}

.parallax-video-btn .play-icon {
  width: 82px;
  height: 82px;
  border-radius: 50%;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.5);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  transition: all .35s cubic-bezier(.34,1.56,.64,1);
}

.parallax-video-btn:hover .play-icon {
  background: var(--md-blue);
  border-color: var(--md-blue);
  transform: scale(1.1);
}

.parallax-video-btn .video-trigger-label {
  font-family: var(--md-font-body);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: .02em;
}

@media only screen and (max-width: 767px) {
  .parallax-video-section {
    margin: 50px 16px 0;
    border-radius: 24px;
    height: 320px;
    background-attachment: scroll;
  }
  .parallax-video-btn .play-icon {
    width: 64px;
    height: 64px;
    font-size: 20px;
  }
}

/* ==========================================================================
   35. ÜRÜN DETAY v2 — e-ticaret hissinden uzaklaşıp editoryal bir sunuma
   geçiyoruz: ortalı başlık/açıklama bloğu + full-width 3'lü swiper
   carousel galeri (lightbox aktif, prev/next pill butonlar). "Teklif
   Alın" kaldırıldı; Özellikler/Dosyalar/Video sekmeleri aynen kalıyor.
   ========================================================================== */
.product-hero-text-section {
  /* Yatay boşluk yok denecek kadar azdı (0), bu yüzden mobilde metin
     ekranın tam kenarına yapışıyordu — header'ın kullandığı standart
     15px'lik kapsayıcı (.container) boşluğuyla aynı hizaya getiriyoruz. */
  padding: 60px 15px 50px;
  text-align: center;
}

.product-hero-text-section .product-detail-cat {
  display: block;
  font-family: var(--md-font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--md-blue);
  margin-bottom: 14px;
}

.product-hero-text-section h1 {
  font-family: var(--md-font-display);
  font-weight: 400;
  font-size: clamp(28px, 4vw, 42px);
  color: var(--md-charcoal);
  margin: 0 0 20px;
}

.product-hero-text-section .product-detail-desc {
  max-width: 1100px;
  margin: 0 auto;
  font-family: var(--md-font-body);
  font-size: 15px;
  line-height: 1.85;
  color: #666;
}

/* NOT (1. paragraf ince, 2. paragraf kalın/sola yaslı görünüyordu):
   richText() panelden gelen içerikteki sadece İLK <p>...</p> sarmalını
   soyup düz metin bırakıyor (bu yüzden 1. paragraf doğrudan yukarıdaki
   kutunun kendi stilini alıyor) — 2. ve sonraki paragraflar ise <p> etiketi
   olarak kalıyor ve şablonun genel "p { font-weight:600; text-align:left; }"
   kuralını (style.css) miras alıp kalın ve sola yaslı görünüyordu. Burada
   tüm <p>'leri üstteki kutunun kendi stiline eşitleyip merkezliyoruz. */
.product-hero-text-section .product-detail-desc p {
  margin: 0 0 14px;
  font-family: inherit;
  font-size: inherit;
  font-weight: 400;
  line-height: inherit;
  letter-spacing: normal;
  color: inherit;
  text-align: center;
}

.product-hero-text-section .product-detail-desc p:last-child {
  margin-bottom: 0;
}

/* full-width carousel galeri */
.product-gallery-carousel-section {
  padding: 0 0 50px;
}

.product-gallery-carousel-wrap {
  position: relative;
}

.product-gallery-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,.92);
  color: var(--md-charcoal);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(5,20,45,.18);
  transition: all .25s ease-out;
}

.product-gallery-nav-btn:hover {
  background: var(--md-blue);
  color: #fff;
}

.product-gallery-prev {
  left: 34px;
}

.product-gallery-next {
  right: 34px;
}

@media only screen and (max-width: 767px) {
  .product-gallery-nav-btn {
    width: 40px;
    height: 40px;
    font-size: 14px;
  }
  .product-gallery-prev { left: 10px; }
  .product-gallery-next { right: 10px; }
}

.product-gallery-carousel {
  width: 100%;
  overflow: hidden;
  padding: 0 20px;
}

.product-gallery-slide {
  border-radius: 20px;
  overflow: hidden;
  position: relative;
  aspect-ratio: 4 / 3.3;
  cursor: pointer;
  display: block;
}

.product-gallery-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s ease-out;
}

.product-gallery-slide:hover img {
  transform: scale(1.06);
}

.product-gallery-zoom {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(.7);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #fff;
  color: var(--md-blue-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  opacity: 0;
  transition: opacity .3s ease-out, transform .3s cubic-bezier(.34,1.56,.64,1);
}

.product-gallery-slide:hover .product-gallery-zoom {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

@media only screen and (max-width: 767px) {
  .product-gallery-carousel { padding: 0 16px; }
}

/* ==========================================================================
   20. ARAMA SONUÇLARI (arama.php) — search-overlay formu buraya düşer.
   Ürün / Proje / Blog / Hizmet sonuçları tek bir grid içinde, tip rozetiyle
   ayırt edilerek listelenir (blog/projeler listing kartlarıyla aynı dil).
   ========================================================================== */
.search-results-section {
  padding: 90px 0 90px;
}

.search-results-inner {
  max-width: 1170px;
  margin: 0 auto;
  padding: 0 15px;
}

.search-status-text {
  font-family: var(--md-font-body);
  font-size: 16px;
  line-height: 1.7;
  color: var(--md-charcoal);
  margin: 0 0 34px;
}

.search-status-text a {
  color: var(--md-blue);
  text-decoration: underline;
}

.search-results-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}

.search-result-card {
  display: block;
  text-decoration: none;
  border-radius: 18px;
  overflow: hidden;
  background: #F8F9FB;
  transition: transform .3s ease-out, box-shadow .3s ease-out;
}

.search-result-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(5,20,45,.1);
}

.search-result-img {
  height: 170px;
  background-size: cover;
  background-position: center;
}

.search-result-body {
  padding: 20px 22px 24px;
}

.search-result-tag {
  display: inline-block;
  font-family: var(--md-font-body);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #fff;
  background: var(--md-blue);
  border-radius: 20px;
  padding: 4px 12px;
  margin-bottom: 12px;
}

.search-result-tag-proje { background: var(--md-blue-deep); }
.search-result-tag-blog { background: var(--md-blue-light); }
.search-result-tag-hizmet { background: var(--md-charcoal); }

.search-result-body h3 {
  font-family: var(--md-font-display);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.4;
  color: var(--md-charcoal);
  margin: 0 0 8px;
}

.search-result-body p {
  font-family: var(--md-font-body);
  font-size: 13px;
  line-height: 1.6;
  color: #6B6F76;
  margin: 0;
}

@media only screen and (max-width: 991px) {
  .search-results-grid { grid-template-columns: repeat(2, 1fr); }
}

@media only screen and (max-width: 767px) {
  .search-results-section { padding-top: 56px; }
}

@media only screen and (max-width: 600px) {
  .search-results-grid { grid-template-columns: 1fr; }
}