/* WebCyNet — static site stylesheet
   Colors and type match the previous Joomla/Helix Ultimate design:
   Navy: #10316B | Accent text: rgba(255,255,255,.6) | Headings: Abhaya Libre | Body: Work Sans

   IMPORTANT: the real site's page canvas (body) is navy blue EVERYWHERE, not
   white — confirmed via computed styles on every page (home/about/services/
   references/contact all report body background rgb(16,49,107)). Individual
   sections only ever set an explicit background for a photo, a slightly
   darker/brighter navy band, or the footer; a plain <section> with no class
   is meant to show the navy body straight through, with white text. So the
   whole base theme here is dark-first: headings, links and body text default
   to white, and only specific light components (buttons) opt back into a
   light surface explicitly.
*/

:root{
  --navy: #10316B;
  --navy-dark: #0b2450;
  --navy-darker: #071a3a;
  --navy-darkest: #001335;
  --blue-accent: #2C5BBC;
  --white: #ffffff;
  --muted: rgba(255,255,255,.65);
  --muted-dark: rgba(0,0,0,.6);
  --footer-bg: rgba(0,0,0,.85);
  --radius: 2px;
  --maxw: 1200px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:"Work Sans", Arial, sans-serif;
  font-size:16px;
  line-height:1.7;
  color:rgba(255,255,255,.9);
  background:var(--navy);
}
h1,h2,h3,h4{
  font-family:"Abhaya Libre", Georgia, serif;
  font-weight:600;
  line-height:1.2;
  margin:0 0 .5em;
  color:#fff;
}
a{color:#fff; text-decoration:none;}
a:hover{text-decoration:underline;}
img{max-width:100%; display:block;}
.container{max-width:var(--maxw); margin:0 auto; padding:0 24px;}
.eyebrow{
  text-transform:none;
  letter-spacing:.02em;
  font-size:15px;
  opacity:.65;
  margin-bottom:10px;
  display:block;
}
.btn{
  display:inline-block;
  background:var(--white);
  color:var(--navy);
  border:1px solid var(--white);
  padding:12px 28px;
  border-radius:var(--radius);
  font-weight:600;
  font-size:15px;
  cursor:pointer;
  transition:.2s;
}
.btn:hover{background:transparent; color:var(--white); text-decoration:none;}
.btn-navy{background:var(--navy); color:#fff; border-color:var(--navy);}
.btn-navy:hover{background:transparent; color:var(--navy);}
.text-link{color:#fff; text-decoration:underline; font-weight:500;}

/* Header — full-width (edge-to-edge) 3-column layout matching the real site's
   Bootstrap header row: ~25% logo+phone / ~50% nav / ~25% language switch.
   Unlike the rest of the page, the header is NOT wrapped in the centered
   .container/max-width column — it spans the full viewport width. */
.site-header{
  background:var(--navy);
  color:#fff;
  position:sticky;
  top:0;
  z-index:100;
}
.site-header .inner{
  width:100%;
  margin:0;
  display:flex;
  align-items:stretch;
  height:100px;
  padding:0 15px;
}
.header-left{
  flex:0 0 25%;
  max-width:25%;
  display:flex;
  align-items:center;
}
.logo-box{
  background:rgb(0,19,53);
  height:100%;
  display:flex;
  align-items:center;
  padding:10px 40px;
  flex:0 0 auto;
}
.brand{
  font-family:"Work Sans", sans-serif;
  font-size:24px;
  font-weight:300;
  color:#fff;
  white-space:nowrap;
}
.phone-link{
  display:flex;
  align-items:center;
  gap:8px;
  color:#fff;
  opacity:.85;
  font-size:14.4px;
  font-family:"Work Sans", sans-serif;
  white-space:nowrap;
  margin-left:26px;
}
.phone-link svg{width:15px; height:15px; fill:#fff; flex:0 0 auto;}
.header-nav{
  flex:0 0 50%;
  max-width:50%;
  display:flex;
  align-items:center;
  justify-content:center;
}
.main-nav{display:flex; gap:60px; list-style:none; margin:0; padding:0;}
.main-nav a{color:#fff; opacity:.7; font-size:15px; font-weight:300; font-family:"Work Sans", sans-serif;}
.main-nav a:hover, .main-nav a.active{opacity:1; text-decoration:none;}

/* "Yazılımlarımız" / "Our Software" dropdown nav item */
.main-nav li.has-dropdown{position:relative;}
.main-nav .dropdown-toggle{display:flex; align-items:center; gap:6px; cursor:pointer;}
.main-nav .dropdown-toggle::after{
  content:""; width:0; height:0;
  border-left:4px solid transparent; border-right:4px solid transparent;
  border-top:5px solid currentColor; opacity:.6; margin-top:3px;
}
/* Invisible hover "bridge" spanning the gap between the toggle and the
   dropdown panel below it — without this, moving the mouse straight down
   from the toggle into the menu crosses dead space that isn't part of the
   <li>'s hoverable box, the :hover state is lost mid-transit, and the menu
   closes before the pointer ever reaches it. This pseudo-element is
   absolutely positioned (so it doesn't affect flex layout/height of the
   nav row) but is still a descendant of li.has-dropdown, so hovering over
   it keeps li:hover — and therefore the menu — active. */
.main-nav li.has-dropdown::after{
  content:"";
  position:absolute; top:100%; left:50%; transform:translateX(-50%);
  width:340px; height:18px;
}
.main-nav .dropdown-menu{
  list-style:none; margin:0; padding:8px 0;
  position:absolute; top:calc(100% + 18px); left:50%; transform:translateX(-50%);
  background:var(--navy-dark); min-width:280px;
  box-shadow:0 16px 34px rgba(0,0,0,.4);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .15s ease, visibility .15s ease;
  z-index:30;
}
.main-nav li.has-dropdown:hover .dropdown-menu,
.main-nav li.has-dropdown.open .dropdown-menu{
  opacity:1; visibility:visible; pointer-events:auto;
}
.main-nav .dropdown-menu a{display:block; padding:12px 24px; white-space:nowrap; opacity:.8; font-size:14px;}
.main-nav .dropdown-menu a:hover, .main-nav .dropdown-menu a.active{opacity:1; background:rgba(255,255,255,.06); text-decoration:none;}
.header-lang{
  flex:0 0 25%;
  max-width:25%;
  display:flex;
  align-items:center;
  justify-content:flex-end;
}
.lang-select-wrap{position:relative; display:inline-block;}
.lang-select-wrap::after{
  content:"";
  position:absolute; right:0; top:50%; transform:translateY(-45%);
  width:0; height:0;
  border-left:4px solid transparent;
  border-right:4px solid transparent;
  border-top:5px solid #fff;
  opacity:.7;
  pointer-events:none;
}
.lang-select{
  background:transparent;
  border:none;
  color:#fff;
  opacity:.9;
  font-family:"Work Sans", sans-serif;
  font-size:15px;
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  padding:4px 18px 4px 0;
  cursor:pointer;
}
.lang-select option{color:#333;}
.nav-toggle{display:none; background:none; border:0; color:#fff; font-size:26px; cursor:pointer;}
/* Hidden by default (desktop); the media query below re-shows it in the
   mobile slide-out menu. Declared here, BEFORE the media query, so that
   within the media query the display:block override wins on source order
   (both rules share the same 0,1,0 specificity, so whichever is later in
   the stylesheet wins — this one must come first). */
.mobile-lang-select{display:none;}

@media (max-width: 900px){
  /* Horizontal padding only — no vertical padding here. Vertical padding on
     .inner would sit OUTSIDE the flex row that .logo-box stretches to fill,
     leaving a strip of the lighter header navy visible above/below the dark
     logo box no matter how tall .logo-box itself is. Breathing room around
     the logo text is added inside .logo-box's own (border-box) padding
     instead, so the dark background can reach the full top/bottom edge of
     the header bar with zero gap. */
  .site-header .inner{flex-wrap:wrap; height:auto; min-height:64px; padding:0 15px;}
  .header-left{flex:1 1 auto; max-width:none;}
  /* height:100% (not auto) so the dark logo block fills the FULL header bar
     top-to-bottom, edge-to-edge — matching the desktop look. box-sizing:
     border-box keeps the vertical padding INSIDE that 100% height instead of
     adding on top of it, so the box can't overflow past the stretched row. */
  .logo-box{height:100%; padding:8px 20px 8px 0; background:rgb(0,19,53); box-sizing:border-box;}
  .header-nav{
    order:3; flex:0 0 100%; max-width:100%; justify-content:flex-start;
    position:fixed; top:64px; left:0; right:0; bottom:0;
    background:var(--navy-dark);
    display:none;
    overflow-y:auto;
  }
  .header-nav.open{display:flex; flex-direction:column;}
  .main-nav{flex-direction:column; padding:24px; gap:0; width:100%;}
  .main-nav a{padding:14px 0; border-bottom:1px solid rgba(255,255,255,.08); display:block;}
  .phone-link{display:none;}
  /* display:flex + centering so the ☰ glyph stays vertically centered now
     that this button stretches to the full (padding-free) header row height,
     instead of sitting top-aligned inside a taller box. */
  .nav-toggle{display:flex; align-items:center; justify-content:center; flex:0 0 auto; padding:0 4px;}
  .header-lang{display:none;}

  /* The desktop hover-bridge (see above) is irrelevant on touch/mobile —
     disable it so it can't create an unexpected dead zone in the stacked
     mobile menu layout. */
  .main-nav li.has-dropdown::after{content:none;}

  .main-nav li.has-dropdown{border-bottom:1px solid rgba(255,255,255,.08);}
  .main-nav li.has-dropdown .dropdown-toggle{padding:14px 0; border-bottom:0; justify-content:space-between;}
  .main-nav .dropdown-menu{
    position:static; transform:none; opacity:1; visibility:visible; pointer-events:auto;
    display:none; box-shadow:none; background:transparent; min-width:0; padding:0 0 8px 16px;
  }
  .main-nav li.has-dropdown.open .dropdown-menu{display:block;}
  .main-nav .dropdown-menu a{padding:12px 0; border-bottom:1px solid rgba(255,255,255,.06);}

  /* Language switcher — hidden from the desktop header row on mobile (no
     room for it there), so it's re-shown here instead, directly under the
     last nav item (İletişim/Contact). It's a sibling of .main-nav inside
     the same scrolling panel (#headerNav), not pinned to the screen
     bottom, so it sits right after the menu with no dead space. See
     header.php for the duplicate <select> markup this targets. */
  .mobile-lang-select{
    display:block; flex:0 0 auto; padding:20px 24px 28px;
    border-top:1px solid rgba(255,255,255,.12);
  }
  .mobile-lang-select .lang-select-wrap{display:block; width:100%;}
  .mobile-lang-select .lang-select{
    display:block; width:100%; box-sizing:border-box;
    background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.3);
    border-radius:2px; padding:12px 16px; opacity:1;
  }
}

/* Hero (inner pages: Hakkımızda / Servisler / Referanslar / İletişim)
   Measured directly from the real site's SP Page Builder markup: the row
   itself carries fixed vertical padding (158px top, 164px bottom — 120px
   bottom on the contact page, which has extra content stacked inside the
   same hero) and a flat 50%-opacity navy overlay across the whole photo —
   there is no left-to-right gradient on inner pages, only on the homepage
   slider's darkened text panel. */
.hero{
  position:relative;
  padding:158px 0 164px;
  background-size:cover;
  background-position:center;
  background-color:var(--navy-dark);
  color:#fff;
  overflow:hidden;
}
.hero::before{
  content:"";
  position:absolute; inset:0;
  background:rgba(0,19,53,.5);
  z-index:1;
}
.hero video.hero-video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; z-index:0;
}
.hero .container{position:relative; z-index:2; width:100%; max-width:1140px;}
/* The real headline column is only ~52% of the row width (it wraps onto
   several lines at the site's 60px heading size) — not a full-width block. */
.hero-content{max-width:52%;}
.hero .eyebrow{
  font-size:27px; line-height:35px; opacity:1; color:#fff;
  font-family:"Work Sans",sans-serif; font-weight:400; letter-spacing:normal;
  margin-bottom:20px;
}
.hero h1{color:#fff; font-size:60px; line-height:70px; font-weight:600; margin-bottom:30px;}
.hero p.lead{font-size:18px; color:rgba(255,255,255,.85); margin-bottom:26px; font-family:"Work Sans",sans-serif;}
.hero .btn-link{color:#fff; font-weight:600; border-bottom:1px solid rgba(255,255,255,.6); padding-bottom:2px;}
.hero .btn-link:hover{border-color:#fff; text-decoration:none;}
/* Referanslar's headline column is set wider (61%) on the real site. */
.hero-wide .hero-content{max-width:61%;}
/* Contact page: shorter bottom padding — the quick-contact grid sits inside
   the same hero row right below the heading, taking up the extra space. */
.hero-contact{padding-bottom:120px;}

/* Homepage hero slider: boxed left panel over an unfiltered, full-bleed
   photo/video. Real measured structure: the row is 735px tall total
   (100px padding top+bottom around a 535px slide stage) and the panel is a
   fixed 740px-wide box, inset 10% from the left of the FULL viewport width
   (not the standard 1140/1200 content container) and top-anchored — not
   vertically centered — at that same 100px offset. */
.hero-boxed{
  padding:100px 0;
  min-height:735px;
  display:flex;
  align-items:flex-start;
}
.hero-boxed::before{content:none;}
.hero-boxed .container{max-width:none; padding:0;}
.hero-boxed .hero-content{
  background:rgba(0,19,53,.6);
  width:740px;
  max-width:calc(100% - 40px);
  margin-left:10%;
  padding:110px 130px 130px;
  box-sizing:border-box;
}
.hero-boxed .eyebrow{margin-bottom:0;}
.hero-boxed h1{font-weight:500; margin-bottom:40px;}
@media (max-width:900px){
  .hero{padding:90px 0;}
  .hero-content{max-width:100%;}
  .hero-boxed{min-height:0; padding:60px 0;}
  /* Keep the panel inset from the edges instead of stretching it edge-to-edge
     — the old site's mobile hero keeps the same "floating boxed card over the
     full-bleed photo/video" look as desktop, just narrower, leaving visible
     margin (and the photo/video showing through) on every side rather than
     filling the screen. 20px side margins + the matching max-width keep that
     look at any mobile width. */
  .hero-boxed .hero-content{width:auto; max-width:calc(100% - 40px); margin-left:20px; margin-right:20px; padding:40px 26px;}
}

/* Quick quote bar (appears directly under the homepage hero) */
.quick-quote{background:var(--navy); padding:34px 0;}
.quick-quote .inner{display:flex; align-items:center; gap:26px; flex-wrap:wrap; justify-content:space-between;}
.quick-quote h4{color:#fff; font-size:18px; margin:0; flex:1 1 280px; font-weight:600;}
.quick-quote form{display:flex; gap:14px; flex-wrap:wrap; flex:2 1 440px;}
.quick-quote select, .quick-quote input[type=tel]{
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.3); color:#fff;
  padding:12px 16px; border-radius:2px; font-family:"Work Sans",sans-serif; font-size:14px; flex:1 1 180px;
}
.quick-quote select option{color:#333;}
.quick-quote input[type=tel]::placeholder{color:rgba(255,255,255,.6);}
.quick-quote .btn{flex:0 0 auto;}

/* Hero slides (rotating taglines over the video) */
.hero-slides{position:relative;}
.hero-slide{display:none;}
.hero-slide.active{display:block; animation:heroFade .6s ease;}
@keyframes heroFade{from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:translateY(0);}}
.hero-dots{display:flex; gap:10px; margin-top:36px;}
.hero-dots button{width:10px; height:10px; border-radius:50%; border:1px solid rgba(255,255,255,.6); background:transparent; padding:0; cursor:pointer;}
.hero-dots button.active{background:#fff;}

/* Service bullet list (6-item overview grid) */
/* Two columns, filled top-to-bottom then across (grid-auto-flow:column) —
   matches the original site: col 1 = items 1-3, col 2 = items 4-6, in
   source order, not a left-to-right 3-up grid. */
.service-bullets{display:grid; grid-template-columns:1fr 1fr; grid-template-rows:repeat(3,auto); grid-auto-flow:column; gap:34px 40px;}
@media (max-width:560px){ .service-bullets{grid-template-columns:1fr; grid-template-rows:none; grid-auto-flow:row;} }
.service-bullets h4{font-size:17px; margin-bottom:8px; color:#fff;}
.service-bullets h4::before{content:"• "; color:#fff; opacity:.5;}
.service-bullets p{font-size:15px; opacity:.75; margin:0; font-weight:300;}

/* Accordion (Çalışma Şeklimiz / Our Method) */
.accordion-item{border-bottom:1px solid rgba(255,255,255,.18);}
.accordion-item summary{
  list-style:none; cursor:pointer; padding:20px 4px; font-family:"Abhaya Libre",serif;
  font-size:19px; font-weight:600; color:#fff; display:flex; justify-content:space-between; align-items:center;
}
.accordion-item summary::-webkit-details-marker{display:none;}
.accordion-item summary::after{content:"+"; font-size:22px; font-weight:400; opacity:.7;}
.accordion-item[open] summary::after{content:"–";}
.accordion-item p{color:rgba(255,255,255,.75); padding:0 4px 20px; margin:0; font-size:15px; line-height:1.7;}

/* Client logos band */
.client-logos{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:28px; opacity:.7;}
.client-logos img{max-height:38px; width:auto; filter:grayscale(1) brightness(0) invert(1); opacity:.75;}

/* Big faded "watermark" heading used as a closing flourish (real site: e.g.
   "Yakalayın!" / "Reach Out" under the homepage testimonials, in normal
   document flow — not an absolutely-positioned overlay). */
.giant-text{
  font-family:"Abhaya Libre",serif; font-weight:600; line-height:1;
  font-size:clamp(60px,14vw,215px);
  color:rgba(255,255,255,.1); text-align:center; margin:20px 0 0;
  overflow:hidden;
}

.text-center{text-align:center;}

/* Short decorative rule above a heading (e.g. the About page founder block) */
.divider-line{width:60px; height:1px; background:rgba(255,255,255,.3); border:0; margin:0 0 22px;}

/* Sections */
section{padding:70px 0;}
.section-navy{background:var(--navy); color:#fff;}
.section-navy h2, .section-navy h3{color:#fff;}
.section-alt{background:transparent;}
.small-title{font-size:14px; text-transform:uppercase; letter-spacing:.08em; color:#fff; opacity:.6; margin-bottom:10px; display:block;}
.lead-text{font-size:19px; line-height:1.6;}

.grid{display:grid; gap:32px;}
.grid-2{grid-template-columns:repeat(2,1fr);}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);}
@media (max-width:860px){ .grid-2,.grid-3,.grid-4{grid-template-columns:1fr 1fr;} }
@media (max-width:560px){ .grid-2,.grid-3,.grid-4{grid-template-columns:1fr;} }

.stat{text-align:left;}
.stat .num{font-family:"Abhaya Libre",serif; font-size:60px; font-weight:600; color:#fff;}
.stat .label{font-size:15px; letter-spacing:.08em; text-transform:uppercase; opacity:.6;}

/* Narrow intro column: homepage service-intro heading (~350px of a 1140px
   row) and the About page "From The WebCy" / paragraph pair (~330px each,
   50px gap) — measured directly from the real site, which does NOT stretch
   these blocks to fill the row; there is deliberate empty space to the
   right. */
.intro-block{max-width:350px;}
.method-grid{display:flex; gap:50px; flex-wrap:wrap;}
.method-col{flex:1 1 260px; max-width:330px;}
.method-col h2{font-size:44px; margin-bottom:0;}
.method-col .bio-photo{margin-top:30px;}

.card{background:#fff; padding:28px; border-radius:4px; box-shadow:0 6px 24px rgba(16,49,107,.08); color:#333;}
.card h1,.card h2,.card h3,.card h4{color:var(--navy);}

/* Testimonials: the real site shows these directly on the navy body with no
   card box — a thin divider line separates the quote from the name/role. */
.testimonial{padding-bottom:22px; border-bottom:1px solid rgba(255,255,255,.15); position:relative;}
.testimonial p{font-weight:300; margin-bottom:20px;}
.testimonial .who{font-weight:500; margin-top:14px; color:#fff;}
.testimonial .role{font-size:13px; font-weight:300; color:#fff;}
/* Vertical divider lines between testimonial columns (real site has these
   in addition to each item's own bottom rule) — placed in the middle of
   the grid's 32px gap. */
.grid-3 > .testimonial:not(:last-child)::after{
  content:"";
  position:absolute;
  top:0; bottom:22px;
  right:-16px;
  width:1px;
  background:rgba(255,255,255,.15);
}
@media (max-width:860px){ .grid-3 > .testimonial::after{content:none;} }

.ref-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:22px;}
@media (max-width:900px){ .ref-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:520px){ .ref-grid{grid-template-columns:1fr;} }
.ref-item{background:#0d2a5c; border-radius:4px; overflow:hidden; text-align:center;}
.ref-item img{width:100%; height:130px; object-fit:cover;}
.ref-item .name{padding:12px 8px; font-size:14px; font-weight:600; color:#fff;}
.ref-item a{color:#fff;}

.process-steps{display:grid; grid-template-columns:repeat(4,1fr); gap:24px; text-align:center;}
@media (max-width:760px){ .process-steps{grid-template-columns:1fr 1fr;} }
.process-steps .step-num{font-family:"Abhaya Libre",serif; font-size:34px; color:var(--navy); opacity:.35;}

.contact-block{display:flex; gap:60px; flex-wrap:wrap;}
.contact-block .item h4{color:#fff; margin-bottom:6px; font-size:16px;}
.contact-block .item a{color:rgba(255,255,255,.8);}

.map-embed{border:0; width:100%; height:360px; border-radius:4px;}

/* Method section (dark, textured background) */
.section-method{
  position:relative; background:var(--navy-darker) center/cover no-repeat; color:#fff; overflow:hidden;
}
.section-method::before{content:""; position:absolute; inset:0; background:rgba(0,19,53,.5);}
.section-method .container{position:relative; z-index:1;}
.section-method h2, .section-method .small-title{color:#fff;}
.section-method .small-title{opacity:.55;}
.section-method p{color:rgba(255,255,255,.75);}

/* CTA band */
.cta-band{background:var(--blue-accent); color:#fff; text-align:center; padding:90px 0; overflow:hidden;}
.cta-band h2{color:#fff; font-size:38px;}
.cta-band .cta-links{display:flex; gap:40px; justify-content:center; flex-wrap:wrap; margin-top:10px;}
.cta-band .cta-links .lbl{display:block; font-size:13px; text-transform:uppercase; letter-spacing:.06em; opacity:.55; margin-bottom:4px;}
.cta-band .cta-links a{color:#fff; font-size:19px; font-weight:600;}

/* Homepage-only variant: the closing CTA band carries a portrait photo/statue
   that overlaps upward into the giant watermark text of the section above it
   (matches the original site's layered look) — needs its own left-aligned,
   two-column layout and overflow:visible so the portrait can poke out the top. */
.cta-band.has-portrait{text-align:left; overflow:visible; padding-top:0;}
.cta-band-grid{display:grid; grid-template-columns:1fr 1fr; align-items:end; gap:40px;}
.cta-band-portrait{margin-top:-170px; align-self:end;}
.cta-band-portrait img{display:block; width:100%; max-width:480px; height:auto;}
.cta-band-text{padding-bottom:24px;}
.cta-band.has-portrait h2{text-align:left;}
.cta-band.has-portrait .divider-line{margin:0 0 22px;}
.cta-band.has-portrait .cta-links{justify-content:flex-start;}
@media (max-width:860px){
  .cta-band-grid{grid-template-columns:1fr;}
  .cta-band-portrait{margin-top:0; order:2; max-width:320px;}
  .cta-band-text{order:1; padding-top:60px;}
}

/* Pre-footer CTA band (appears on every page, above the footer) */
.pre-footer-cta{background:var(--navy-darker); padding:70px 0;}
.pre-footer-cta .q{color:#fff; font-size:19px; margin-bottom:16px; max-width:320px;}
.pre-footer-cta .btn-outline{display:inline-block; border:1px solid rgba(255,255,255,.5); color:#fff; padding:12px 26px; border-radius:2px; font-weight:600; font-size:14px;}
.pre-footer-cta .btn-outline:hover{background:#fff; color:var(--navy-darker); text-decoration:none;}
.pre-footer-cta .link-arrow{color:#fff; font-weight:600; border-bottom:1px solid rgba(255,255,255,.5); padding-bottom:2px;}
.pre-footer-cta .link-arrow:hover{border-color:#fff; text-decoration:none;}

/* Numbered "Step" process (About page) */
.step-list{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; position:relative;}
@media (max-width:760px){ .step-list{grid-template-columns:1fr 1fr;} }
.step-list .step{position:relative; padding-top:6px;}
.step-list .step::after{content:""; position:absolute; top:26px; left:60px; right:-20px; border-top:1px dashed rgba(255,255,255,.25);}
.step-list .step:last-child::after{display:none;}
.step-list .step .lbl{font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.5);}
.step-list .step .num{font-family:"Abhaya Libre",serif; font-size:32px; color:rgba(255,255,255,.85); display:inline-block; margin-left:6px;}
.step-list .step .title{color:#fff; font-size:17px; margin-top:8px; font-weight:600;}

/* Pull-quote used in navy sections */
.pull-quote{border-left:3px solid rgba(255,255,255,.5); padding-left:18px; margin:22px 0; font-size:19px; font-weight:600; color:#fff;}

/* Stats band with a photographic background (sec-bg11.jpg on the real site) */
.stats-band{position:relative; background:var(--navy-darkest) center/cover no-repeat; padding:0;}
.stats-band .stats-card{background:rgba(0,19,53,.6); padding:56px 100px 46px; display:flex; flex-wrap:wrap; justify-content:center; gap:40px 60px;}
.stats-band .stat .label{color:rgba(255,255,255,.55);}
.stats-band .stat .num{color:#fff;}

/* Icon/photo + 2-col item list (Services page: Stratejimiz / Servislerimiz) */
.feature-grid{display:grid; grid-template-columns:300px 1fr; gap:50px; align-items:start; margin-top:40px;}
.feature-grid.reverse{grid-template-columns:1fr 1fr; align-items:center;}
@media (max-width:860px){ .feature-grid, .feature-grid.reverse{grid-template-columns:1fr;} .feature-grid.reverse img{order:-1;} }
.feature-grid img{border-radius:2px; width:100%;}
/* grid-template-columns is intentionally omitted: with grid-auto-flow:column
   and 2 explicit rows, the browser creates as many (implicit) columns as the
   item count needs (4 columns for 8 items, 3 for 6, etc). grid-auto-columns:1fr
   makes every one of those columns equal width — without it, only column 1
   would get a defined width and the rest would size to content, producing
   lopsided narrow/wide columns. */
.feature-items{display:grid; grid-auto-columns:1fr; grid-template-rows:repeat(2,auto); grid-auto-flow:column; gap:30px 44px;}
@media (max-width:560px){ .feature-items{grid-template-columns:1fr; grid-auto-flow:row;} }
.feature-items h4{font-size:16px; color:#fff; margin-bottom:8px;}
.feature-items h4::before{content:"• "; opacity:.6;}
.feature-items p{margin:0; font-size:14px; color:rgba(255,255,255,.72); line-height:1.6;}

/* Bio photo with caption chip (About page founder block) */
.bio-photo{position:relative; display:inline-block;}
.bio-photo img{border-radius:2px;}
.bio-photo .chip{position:absolute; left:0; bottom:0; background:var(--navy); padding:14px 22px; min-width:60%;}
.bio-photo .chip .name{color:#fff; font-weight:700; font-size:17px;}
.bio-photo .chip .role{color:rgba(255,255,255,.6); font-size:13px;}

/* Footer */
footer.site-footer{background:var(--footer-bg); color:rgba(255,255,255,.65); padding:50px 0 22px;}
footer.site-footer .foot-top{display:flex; justify-content:space-between; flex-wrap:wrap; gap:30px; padding-bottom:30px; border-bottom:1px solid rgba(255,255,255,.12);}
footer.site-footer h4{color:#fff; font-size:15px;}
footer.site-footer .socials{display:flex; gap:14px; margin-top:10px;}
footer.site-footer .socials a{color:rgba(255,255,255,.65); font-size:18px;}
footer.site-footer .bottom{display:flex; justify-content:space-between; padding-top:18px; font-size:13px; flex-wrap:wrap; gap:10px;}
footer.site-footer .bottom a{color:rgba(255,255,255,.65); margin-left:16px;}

.skip-link{position:absolute; left:-999px; top:0; background:#fff; color:#10316B; padding:10px 16px; z-index:1000;}
.skip-link:focus{left:10px; top:10px;}

/* Contact page: quick-contact grid embedded under the hero (New Client /
   Career / General / Connect columns), matching the real site's layout */
.quick-contact-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:30px;
  margin-top:56px; padding-top:40px; border-top:1px solid rgba(255,255,255,.2);
  position:relative; z-index:2;
}
@media (max-width:760px){ .quick-contact-grid{grid-template-columns:1fr 1fr;} }
.quick-contact-grid h4{color:#fff; font-size:16px; margin-bottom:10px;}
.quick-contact-grid a{color:rgba(255,255,255,.75); font-size:14px;}
.quick-contact-grid .social-row{display:flex; gap:14px;}
.quick-contact-grid .social-row a{font-size:14px;}