/* ==========================================================================
   Hidrolik Enjeksiyon — tema stilleri (tasarım index.html <style> blokları)
   ========================================================================== */

html { scroll-behavior: smooth; }
body { background-color:#0A0C11; color:#F2F5F9; -webkit-font-smoothing:antialiased; }

.eyebrow { font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; font-weight:600; }
.h-tight { letter-spacing:-0.02em; line-height:1.02; }

/* Soft ambient glows instead of hard grid */
.glow-azure { background: radial-gradient(50% 60% at 75% 12%, rgba(62,154,214,0.16), transparent 62%); }
.glow-soft  { background: radial-gradient(55% 55% at 20% 90%, rgba(62,154,214,0.08), transparent 60%); }
.hairline-grid {
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.02) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.02) 1px, transparent 1px);
  background-size: 72px 72px;
}

/* Product lightbox stage — knocks out white photo backgrounds via multiply */
.stage {
  position: relative; isolation: isolate; overflow: hidden;
  background:
    radial-gradient(70% 90% at 50% 20%, #FFFFFF, transparent 70%),
    linear-gradient(180deg, #F4F6F9 0%, #E2E7ED 100%);
}
.stage::after { /* subtle floor shadow */
  content:""; position:absolute; left:8%; right:8%; bottom:9%; height:14px; z-index:0;
  background: radial-gradient(50% 100% at 50% 0%, rgba(20,25,35,0.20), transparent 70%);
  filter: blur(3px);
}
.stage img { mix-blend-mode: multiply; position:relative; z-index:1; }

.card { transition: transform .4s cubic-bezier(.2,.6,.2,1), box-shadow .4s ease, border-color .4s ease; }
.card:hover { transform: translateY(-6px); border-color: rgba(62,154,214,.5); box-shadow: 0 24px 60px -28px rgba(0,0,0,.9); }
.card:hover .card-img { transform: scale(1.045); }
.card-img { transition: transform .6s cubic-bezier(.2,.6,.2,1); }
.card:hover .card-cta { color:#8FC4E8; }
.card-cta { transition: color .3s ease; }

/* Ürün kartı badge — görselin sol altı (seri / ek bilgi) */
.mak-badge { position:absolute; left:.7rem; bottom:.7rem; z-index:3;
  display:inline-flex; align-items:center; gap:.42rem; max-width:calc(100% - 1.4rem);
  padding:.3rem .62rem; border-radius:8px;
  background:rgba(10,12,17,.85); color:#EAF2FA;
  font-family:'Sora','IBM Plex Sans',sans-serif; font-size:.7rem; font-weight:600; letter-spacing:.02em; line-height:1;
  border:1px solid rgba(62,154,214,.45); box-shadow:0 6px 18px -8px rgba(0,0,0,.6);
  -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px);
  transition:border-color .3s ease, background .3s ease; }
.card:hover .mak-badge { border-color:rgba(62,154,214,.8); }
.mak-badge::before { content:""; width:6px; height:6px; border-radius:50%; flex:0 0 auto;
  background:#3E9AD6; box-shadow:0 0 0 3px rgba(62,154,214,.2); }
.mak-badge span { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.link-underline { background-image: linear-gradient(#3E9AD6,#3E9AD6); background-size:0% 1px; background-repeat:no-repeat; background-position:0 100%; transition: background-size .35s ease; }
.link-underline:hover { background-size:100% 1px; }

/* Top utility bar collapses on scroll */
#topbar { max-height: 52px; opacity:1; overflow:hidden; transition: max-height .4s cubic-bezier(.2,.6,.2,1), opacity .3s ease; }
.scrolled #topbar { max-height:0; opacity:0; }

/* Offset anchor targets so the fixed header never covers them */
section[id], article[id] { scroll-margin-top: 92px; }

/* Hero slider */
.slider-track { transition: transform .7s cubic-bezier(.4,0,.2,1); }
@media (prefers-reduced-motion: reduce) { .slider-track { transition: none; } }

/* Hero image decorative layers (corporate depth) */
.hero-deco-glow  { position:absolute; inset:-20px; z-index:0; border-radius:2rem; pointer-events:none;
  background: radial-gradient(58% 58% at 50% 45%, rgba(62,154,214,0.20), transparent 72%); filter: blur(10px); }
.hero-deco-frame { position:absolute; inset:0; z-index:0; pointer-events:none;
  transform: translate(18px,18px); border:1px solid rgba(62,154,214,0.30); border-radius:1.5rem; }
.hero-deco-dots  { position:absolute; top:-16px; right:-16px; width:88px; height:88px; z-index:0; pointer-events:none;
  opacity:.5; background-image: radial-gradient(rgba(62,154,214,0.55) 1.4px, transparent 1.5px); background-size:13px 13px; }

/* Hero fixed background — heavy-industry foundry photo (stays put while slides change) */
.hero-photo { position:absolute; inset:0; z-index:0; pointer-events:none;
  background-repeat:no-repeat; background-size:150% auto; background-position:14% center; opacity:.6; }
@media (max-width:767px){ .hero-photo { background-size:cover; background-position:22% center; } }
/* Gradient tint: site blue-black on the flanks, photo peeking through the left + centre, ink at the base */
.hero-photo-tint { position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(10,12,17,.62) 0%, rgba(10,12,17,.44) 28%, rgba(10,12,17,.34) 52%, rgba(10,12,17,.66) 100%),
    linear-gradient(0deg,  #0A0C11 3%, rgba(10,12,17,.10) 48%, rgba(10,12,17,.52) 100%); }
/* Left-side depth — site blue-black glow instead of flat black, keeps the photo readable */
.hero-leftshadow { position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(64% 90% at 2% 52%, rgba(18,42,68,.55), transparent 60%),
    linear-gradient(90deg, rgba(10,20,32,.42) 0%, transparent 24%); }

/* Left-side ambient glow + technical signature (fixed, balances the rings on the right) */
.hero-leftglow { position:absolute; z-index:0; pointer-events:none; left:-10%; top:50%; width:60%; height:96%;
  transform:translateY(-50%);
  background:radial-gradient(46% 50% at 38% 52%, rgba(62,154,214,0.32), transparent 68%); }
/* Dot matrix to the left of the product visual */
.hero-dots-left { position:absolute; z-index:0; pointer-events:none; left:14px; top:150px; height:min(460px,54vh); width:48px;
  background-image:radial-gradient(rgba(62,154,214,0.9) 1.8px, transparent 2.2px);
  background-size:15px 15px;
  -webkit-mask-image:linear-gradient(180deg, #000 0%, #000 58%, transparent 100%);
          mask-image:linear-gradient(180deg, #000 0%, #000 58%, transparent 100%);
  opacity:.55; }
.hero-arc { position:absolute; z-index:0; pointer-events:none; left:-60px; bottom:-60px; width:600px; height:600px; opacity:1; }
@media (max-width:1023px){ .hero-dots-left { display:none; } }
@media (max-width:767px){ .hero-arc { opacity:.55; left:-210px; } }

/* Ambient depth — soft colour blobs seated behind the composition */
.hero-blob-a { position:absolute; z-index:0; pointer-events:none; width:560px; height:560px;
  left:-180px; bottom:-200px; border-radius:9999px; filter:blur(34px);
  background:radial-gradient(closest-side, rgba(38,104,143,.30), transparent 72%); }
.hero-blob-b { position:absolute; z-index:0; pointer-events:none; width:360px; height:360px;
  left:38%; top:-140px; border-radius:9999px; filter:blur(30px);
  background:radial-gradient(closest-side, rgba(62,154,214,.16), transparent 72%); }

/* Blueprint concentric rings behind the product stage */
.hero-rings { position:absolute; z-index:0; pointer-events:none; right:-150px; top:50%;
  width:660px; height:660px; transform:translateY(-50%); opacity:.4; }
@media (max-width:1024px){ .hero-rings{ opacity:.3; right:-260px; } }

/* Hero line ambience — waves ripple outward, dots twinkle, hub pulses. Positions stay fixed. */
@media (prefers-reduced-motion: no-preference){
  @keyframes heroRing { 0%,100%{ opacity:var(--b); } 48%{ opacity:calc(var(--b) + .34); } }
  .hero-rings g[stroke] circle,
  .hero-arc   g[stroke] circle { animation:heroRing 6s ease-in-out infinite; will-change:opacity; }
  .hero-rings g[stroke] circle:nth-child(1){ --b:.55; animation-delay:0s; }
  .hero-rings g[stroke] circle:nth-child(2){ --b:.38; animation-delay:.55s; }
  .hero-rings g[stroke] circle:nth-child(3){ --b:.24; animation-delay:1.1s; }
  .hero-rings g[stroke] circle:nth-child(4){ --b:.14; animation-delay:1.65s; }
  .hero-arc  g[stroke] circle:nth-child(1){ --b:.85; animation-delay:.2s; }
  .hero-arc  g[stroke] circle:nth-child(2){ --b:.60; animation-delay:.75s; }
  .hero-arc  g[stroke] circle:nth-child(3){ --b:.40; animation-delay:1.3s; }
  .hero-arc  g[stroke] circle:nth-child(4){ --b:.24; animation-delay:1.85s; }

  @keyframes heroBreathe { 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.018); } }
  .hero-rings g[stroke]{ animation:heroBreathe 8s ease-in-out infinite; transform-origin:330px 330px; }
  .hero-arc   g[stroke]{ animation:heroBreathe 9s ease-in-out infinite; transform-origin:60px 380px; }

  @keyframes heroTwinkle { 0%,100%{ opacity:.3; } 50%{ opacity:1; } }
  .hero-arc g[fill] circle{ animation:heroTwinkle 3.2s ease-in-out infinite; }
  .hero-arc g[fill] circle:nth-child(1){ animation-delay:0s; }
  .hero-arc g[fill] circle:nth-child(2){ animation-delay:.9s; }
  .hero-arc g[fill] circle:nth-child(3){ animation-delay:1.7s; }

  @keyframes heroHub { 0%,100%{ opacity:.5; } 50%{ opacity:1; } }
  .hero-rings > circle[fill]{ animation:heroHub 2.8s ease-in-out infinite; }
}

/* Vignette to seat the whole hero */
.hero-vignette { position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(125% 92% at 50% -6%, transparent 56%, rgba(0,0,0,.38) 100%); }

/* Neden — borderless cards that melt into the page bg */
.neden-ambient { position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(46% 42% at 50% 4%, rgba(62,154,214,0.08), transparent 60%); }
.ncard { position:relative; border-radius:1.25rem; padding:3.75rem 1.75rem 2.25rem;
  background: linear-gradient(158deg, rgba(33,78,116,0.92) 0%, rgba(18,38,57,0.55) 42%, rgba(10,12,17,0) 84%);
  transition: transform .5s cubic-bezier(.2,.6,.2,1); }
.ncard::before { content:""; position:absolute; inset:0; border-radius:inherit; opacity:0; pointer-events:none;
  transition:opacity .5s ease;
  background: radial-gradient(120% 85% at 26% -8%, rgba(62,154,214,0.42), transparent 58%); }
.ncard:hover::before { opacity:1; }
.ncard:hover { transform: translateY(-8px); }
.ncard-ico { position:absolute; top:0; left:1.75rem; transform:translateY(-50%);
  display:flex; align-items:center; justify-content:center; height:3.5rem; width:3.5rem; border-radius:1rem;
  color:#CBE6F8; background: linear-gradient(160deg, #21507A 0%, #12293C 100%);
  box-shadow: inset 0 0 0 1px rgba(62,154,214,0.42), 0 14px 30px -12px rgba(0,0,0,.85);
  transition: background .45s ease, color .45s ease, transform .45s ease, box-shadow .45s ease; }
.ncard:hover .ncard-ico { color:#08131C; background: linear-gradient(160deg, #57ABE2 0%, #2E7DB0 100%);
  transform: translateY(calc(-50% - 4px)) scale(1.06); box-shadow: 0 18px 34px -10px rgba(62,154,214,.75); }
.ncard-line { display:block; height:2px; width:2.25rem; margin-top:1.5rem; border-radius:999px; background:#3E9AD6;
  transition: width .5s cubic-bezier(.2,.6,.2,1); }
.ncard:hover .ncard-line { width:3.5rem; }

/* Products dropdown */
.dropdown-panel { opacity:0; visibility:hidden; transform: translateY(8px); transition: opacity .28s ease, transform .28s ease, visibility .28s; }
.has-dropdown:hover .dropdown-panel,
.has-dropdown:focus-within .dropdown-panel { opacity:1; visibility:visible; transform: translateY(0); }
.has-dropdown:hover .chev, .has-dropdown:focus-within .chev { transform: rotate(180deg); }
.chev { transition: transform .3s ease; }

/* Scroll reveal — AOS-style directional entrances */
.reveal { opacity:1; }
.js .reveal { opacity:0; transform: translateY(30px); will-change:opacity, transform;
  transition: opacity .8s cubic-bezier(.2,.6,.2,1), transform .8s cubic-bezier(.2,.6,.2,1); }
.js .reveal-u { transform: translateY(30px); }
.js .reveal-d { transform: translateY(-30px); }
.js .reveal-l { transform: translateX(-48px); }
.js .reveal-r { transform: translateX(48px); }
.js .reveal-z { transform: scale(.94); }
.js .reveal.in { opacity:1; transform:none; }
@media (max-width:767px){
  .js .reveal-l, .js .reveal-r { transform: translateY(28px); }
}

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline:2px solid #3E9AD6; outline-offset:3px; border-radius:6px;
}
@media (prefers-reduced-motion: reduce) {
  html{scroll-behavior:auto;}
  .reveal,.card,.card-img{transition:none!important;}
  .js .reveal,.js .reveal-u,.js .reveal-d,.js .reveal-l,.js .reveal-r,.js .reveal-z{opacity:1;transform:none;}
}

/* ===== Mobil menü ===== */
.mob-menu{ position:fixed; inset:0; z-index:60; visibility:hidden; }
.mob-menu::before{ content:""; position:absolute; inset:0; background:rgba(6,8,12,.62);
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); opacity:0; transition:opacity .35s ease; }
.mob-menu.open{ visibility:visible; }
.mob-menu.open::before{ opacity:1; }
.mob-panel{ position:absolute; top:0; right:0; height:100%; width:min(89%,384px);
  background:#0A0C11; border-left:1px solid rgba(255,255,255,.08);
  box-shadow:-24px 0 60px rgba(0,0,0,.5); display:flex; flex-direction:column; overflow-y:auto;
  transform:translateX(100%); transition:transform .4s cubic-bezier(.2,.7,.2,1); }
.mob-menu.open .mob-panel{ transform:translateX(0); }
.mob-link{ display:flex; align-items:center; gap:.8rem; padding:.95rem .15rem; font-size:1.06rem;
  color:#E9EEF5; border-bottom:1px solid rgba(255,255,255,.06); transition:color .25s ease, padding-left .25s ease; }
.mob-link svg{ color:#3E9AD6; flex:0 0 auto; }
.mob-link:hover,.mob-link:focus-visible{ color:#3E9AD6; padding-left:.5rem; }
.mob-contact{ display:flex; align-items:flex-start; gap:.75rem; padding:.6rem 0; color:#9fb0c0;
  font-size:.94rem; transition:color .25s ease; }
.mob-contact svg{ color:#3E9AD6; flex:0 0 auto; margin-top:.15rem; }
.mob-contact:hover{ color:#E9EEF5; }

/* Mobil menü — açılır alt menü (submenu) */
.mob-sub-toggle{ display:flex; align-items:center; justify-content:space-between; width:100%;
  gap:.8rem; padding:.95rem .15rem; font-size:1.06rem; color:#E9EEF5;
  border-bottom:1px solid rgba(255,255,255,.06); background:transparent; text-align:left;
  transition:color .25s ease; cursor:pointer; }
.mob-sub-toggle:hover{ color:#3E9AD6; }
.mob-sub-toggle .mob-sub-ico{ color:#3E9AD6; transition:transform .3s ease; }
.mob-sub-toggle[aria-expanded="true"] .mob-sub-ico{ transform:rotate(180deg); }
.mob-sub{ overflow:hidden; max-height:0; transition:max-height .35s ease; }
.mob-sub-inner{ padding:.25rem 0 .5rem .9rem; }
.mob-sub-inner a{ display:block; padding:.7rem .15rem; font-size:.98rem; color:#9fb0c0;
  border-bottom:1px solid rgba(255,255,255,.05); transition:color .25s ease, padding-left .25s ease; }
.mob-sub-inner a:hover{ color:#3E9AD6; padding-left:.4rem; }

/* ===== Galeri + Lightbox ===== */
.gal-strip{ display:grid; grid-template-columns:repeat(2,1fr); gap:0; }
@media(min-width:640px){ .gal-strip{ grid-template-columns:repeat(3,1fr); } }
@media(min-width:1024px){ .gal-strip{ grid-template-columns:repeat(6,1fr); } }
.gal-item{ position:relative; display:block; overflow:hidden; aspect-ratio:3/4; cursor:pointer; }
@media(min-width:1024px){ .gal-item{ aspect-ratio:auto; height:360px; } }
.gal-item img{ width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .85s cubic-bezier(.2,.6,.2,1); }
.gal-item:hover img,.gal-item:focus-visible img{ transform:scale(1.07); }
.gal-veil{ position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to top, rgba(10,12,17,.55), rgba(10,12,17,0) 46%);
  opacity:.75; transition:opacity .4s ease, background .4s ease; }
.gal-item:hover .gal-veil{ opacity:1;
  background:linear-gradient(to top, rgba(10,12,17,.5) 0%, rgba(62,154,214,.14) 100%); }
.gal-plus{ position:absolute; inset:0; display:grid; place-items:center; pointer-events:none;
  color:#fff; opacity:0; transform:scale(.82); transition:opacity .4s ease, transform .4s ease; }
.gal-item:hover .gal-plus,.gal-item:focus-visible .gal-plus{ opacity:1; transform:scale(1); }
.gal-plus span{ display:grid; place-items:center; width:52px; height:52px; border-radius:9999px;
  background:rgba(62,154,214,.9); box-shadow:0 8px 30px rgba(0,0,0,.4); }
.gal-plus svg{ width:22px; height:22px; }

.lb{ position:fixed; inset:0; z-index:120; display:flex; align-items:center; justify-content:center; padding:24px;
  background:rgba(6,8,12,.88); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  opacity:0; visibility:hidden; transition:opacity .35s ease, visibility .35s ease; }
.lb.open{ opacity:1; visibility:visible; }
.lb-img{ max-width:min(1120px,92vw); max-height:84vh; width:auto; height:auto; border-radius:14px;
  box-shadow:0 30px 90px rgba(0,0,0,.65); opacity:0; transform:scale(.94);
  transition:opacity .4s ease, transform .45s cubic-bezier(.2,.7,.2,1); }
.lb-cap{ position:absolute; left:0; right:0; bottom:26px; text-align:center;
  color:#E9EEF5; font-size:14px; letter-spacing:.02em; text-shadow:0 2px 12px rgba(0,0,0,.6); }
.lb-btn{ position:absolute; display:grid; place-items:center; width:48px; height:48px; border-radius:9999px;
  color:#fff; background:rgba(20,24,33,.7); border:1px solid rgba(255,255,255,.12);
  cursor:pointer; transition:background .25s ease, transform .25s ease; }
.lb-btn:hover{ background:#3E9AD6; transform:scale(1.06); }
.lb-close{ top:20px; right:22px; }
.lb-prev{ left:22px; top:50%; margin-top:-24px; }
.lb-next{ right:22px; top:50%; margin-top:-24px; }
@media(max-width:640px){ .lb-prev{ left:12px; } .lb-next{ right:12px; } .lb-btn{ width:42px; height:42px; } }

/* ===== Alt sayfa hero (header'a bitişik, anasayfa hero gibi) ===== */
.page-hero { border-bottom:1px solid rgba(39,45,58,.6); }
.page-hero-bg { position:absolute; inset:0; z-index:0; pointer-events:none;
  background-size:cover; background-position:center; opacity:.28; }
.page-hero-tint { position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(10,12,17,.72) 0%, rgba(10,12,17,.42) 45%, rgba(10,12,17,.62) 100%),
    linear-gradient(0deg,  #0A0C11 4%, rgba(10,12,17,.20) 55%, rgba(10,12,17,.55) 100%); }
/* Sol efekt alt sayfada daha az belirgin */
.page-hero .hero-arc { opacity:.4; }
.page-hero .hero-leftglow { opacity:.45; }
.page-hero .hero-blob-a { opacity:.5; }
.page-hero .hero-leftshadow { opacity:.6; }

/* ===== Alt sayfa içerik (prose) — koyu tema ===== */
.hdrlk-prose { color:#C2CAD6; font-size:1.02rem; line-height:1.8; }
.hdrlk-prose > * + * { margin-top:1.15rem; }
.hdrlk-prose h1,.hdrlk-prose h2,.hdrlk-prose h3,.hdrlk-prose h4 { color:#F2F5F9; font-family:'Sora',sans-serif; font-weight:700; line-height:1.2; margin-top:2rem; }
.hdrlk-prose h2 { font-size:1.7rem; }
.hdrlk-prose h3 { font-size:1.35rem; }
.hdrlk-prose h4 { font-size:1.12rem; }
.hdrlk-prose a { color:#3E9AD6; text-decoration:underline; text-underline-offset:3px; }
.hdrlk-prose a:hover { color:#8FC4E8; }
.hdrlk-prose strong { color:#F2F5F9; }
.hdrlk-prose ul,.hdrlk-prose ol { padding-left:1.4rem; }
.hdrlk-prose ul { list-style:disc; }
.hdrlk-prose ol { list-style:decimal; }
.hdrlk-prose li { margin-top:.4rem; }
.hdrlk-prose blockquote { border-left:3px solid #3E9AD6; padding:.4rem 0 .4rem 1.2rem; color:#8E9AAC; font-style:italic; }
.hdrlk-prose img { border-radius:12px; height:auto; max-width:100%; }
.hdrlk-prose code { background:#191D26; border:1px solid #272D3A; border-radius:6px; padding:.1rem .4rem; font-size:.9em; color:#C2CAD6; }
.hdrlk-prose pre { background:#13161D; border:1px solid #272D3A; border-radius:10px; padding:1rem; overflow-x:auto; }
.hdrlk-prose table { width:100%; border-collapse:collapse; }
.hdrlk-prose th,.hdrlk-prose td { border:1px solid #272D3A; padding:.6rem .8rem; text-align:left; }
.hdrlk-prose th { background:#13161D; color:#F2F5F9; }

/* Sayfalama */
.hdrlk-pagination .page-numbers { display:inline-flex; align-items:center; justify-content:center; min-width:42px; height:42px; padding:0 12px; margin:0 3px; border:1px solid #272D3A; border-radius:10px; color:#C2CAD6; transition:.2s; }
.hdrlk-pagination .page-numbers:hover { border-color:#3E9AD6; color:#3E9AD6; }
.hdrlk-pagination .page-numbers.current { background:#3E9AD6; color:#0A0C11; border-color:#3E9AD6; font-weight:600; }

/* WordPress yönetim çubuğu ile sabit header çakışmasın */
.admin-bar #siteHeader{ top:32px; }
@media screen and (max-width:782px){ .admin-bar #siteHeader{ top:46px; } }