/* latin-ext */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/plus-jakarta-sans-400-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/plus-jakarta-sans-400-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/plus-jakarta-sans-500-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/plus-jakarta-sans-500-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/plus-jakarta-sans-600-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/plus-jakarta-sans-600-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/plus-jakarta-sans-700-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/plus-jakarta-sans-700-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/plus-jakarta-sans-800-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/plus-jakarta-sans-800-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==================================================================
   style.css — global shell
   ------------------------------------------------------------------
   Everything that is NOT specific to one page: the type/colour base,
   the shared layout + component primitives, and the two chrome
   elements that appear on every page — header/nav and footer.
   Page-specific rules live in their own file (anasayfa.css, …) so a
   new page only pays for what it actually uses.

   Load order:  colors.css → style.css → <page>.css
   ================================================================== */


/* ==================================================================
   1. BASE
   ================================================================== */

*{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  margin:0;
  overflow-x:hidden;
  font-family:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;
  color:var(--c-ink);
  background:var(--c-surface);
  -webkit-font-smoothing:antialiased;
  -webkit-text-size-adjust:100%;
}

/* set while the mobile nav panel is open */
body.is-locked{overflow:hidden}

a{color:var(--c-blue-600);text-decoration:none;transition:color .2s}
a:hover{color:var(--c-blue-500)}

img{max-width:100%}
h1,h2,h3{overflow-wrap:break-word}
input,textarea,button,select{font-family:inherit}

/* scripts toggle [hidden] to swap panels — make sure no rule outranks it */
[hidden]{display:none!important}

/* anchor targets have to clear the sticky header */
[id]{scroll-margin-top:128px}

/* Page wrapper intentionally carries NO overflow-x — giving a sticky
   header's own ancestor a non-visible overflow breaks position:sticky
   in Safari (desktop and iOS both), so the horizontal-scroll guard for
   decorative offset elements lives on <body> instead, where it doesn't
   sit between the header and the viewport. */

/* Keyboard users land on ~15 header links before the h1; this lets them
   jump straight to the content. Off-screen until focused. */
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:400;
  padding:12px 20px;border-radius:0 0 12px 0;
  background:var(--c-blue-600);color:var(--c-on-dark);
  font-size:15px;font-weight:700;
}
.skip-link:focus{left:0;color:var(--c-on-dark)}


/* ==================================================================
   2. LAYOUT PRIMITIVES
   Written with padding-inline / padding-block so that an element
   carrying both .section and .container cannot have one shorthand
   wipe out the other.
   ================================================================== */

.container{
  max-width:var(--layout-max);
  margin-inline:auto;
  padding-inline:var(--layout-pad);
}

.section{padding-block:96px}
.section--tinted{background:var(--c-surface-tint);position:relative;overflow:hidden}

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


/* ==================================================================
   3. SECTION HEADINGS
   ================================================================== */

.section-head{position:relative;margin-bottom:52px}
.section-head--center{text-align:center;max-width:680px;margin-inline:auto}
.section-head--narrow{max-width:620px}
.section-head--sub{max-width:620px;margin:72px 0 32px}
.section-head--flush{margin-bottom:44px}

.section-head-row{
  display:flex;justify-content:space-between;align-items:flex-end;
  flex-wrap:wrap;gap:20px;margin-bottom:52px;
}
.section-head-row__text{max-width:620px}

/* Used on both <div> and <h2>. margin:0 is load-bearing: where it labels a
   section it has to be a real heading, and an <h2> would otherwise bring the
   browser's default 0.83em margin and shift the layout. */
.eyebrow{
  margin:0;
  font-size:13px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--c-blue-400);
}
.eyebrow--on-dark{color:var(--c-blue-300)}
.eyebrow--spaced{margin-bottom:20px}

.section-title{
  margin:14px 0 0;
  font-size:42px;font-weight:800;letter-spacing:-.02em;
  color:var(--c-ink);
}
.section-title--40{font-size:40px}
.section-title--md{font-size:38px}
.section-title--sm{font-size:34px}
.section-title--tight{line-height:1.1}

.section-lead{margin:14px 0 0;font-size:16.5px;line-height:1.6;color:var(--c-text-muted)}
.section-lead--md{margin-top:16px;font-size:17px}
.section-lead--lg{margin-top:16px;font-size:17.5px}

/* generic body copy */
.prose{margin:20px 0 0;font-size:17px;line-height:1.7;color:var(--c-ink-500)}


/* ==================================================================
   4. BUTTONS & LINKS
   ================================================================== */

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 22px;border:1px solid transparent;border-radius:12px;
  font-size:14.5px;font-weight:700;white-space:nowrap;cursor:pointer;
  transition:transform .2s,box-shadow .2s,background .2s,color .2s;
}
.btn--lg{gap:10px;padding:16px 30px;border-radius:14px;font-size:16px}
.btn--block{width:100%;margin-top:4px;padding:16px;border-radius:13px;font-size:16px}

.btn--primary{background:var(--c-blue-600);color:var(--c-on-dark);box-shadow:var(--sh-cta)}
.btn--primary:hover{color:var(--c-on-dark);transform:translateY(-2px);box-shadow:var(--sh-cta-hover)}
.btn--primary.btn--block{box-shadow:var(--sh-submit)}
.btn--primary.btn--block:hover{box-shadow:var(--sh-submit-hover)}

.btn--light{background:var(--c-surface);color:var(--c-navy-900);box-shadow:var(--sh-btn-light)}
.btn--light:hover{color:var(--c-blue-600);transform:translateY(-3px)}

.btn--ghost{background:var(--c-white-08);border-color:var(--c-white-28);color:var(--c-on-dark)}
.btn--ghost:hover{background:var(--c-white-18);color:var(--c-on-dark)}


/* text link with a trailing arrow that slides on hover */
.link-arrow{
  display:inline-flex;align-items:center;gap:9px;
  color:var(--c-blue-600);font-size:15.5px;font-weight:700;
  transition:gap .2s,color .2s;
}
.link-arrow:hover{gap:14px;color:var(--c-blue-500)}
.link-arrow--sm{gap:8px;font-size:15px}
.link-arrow--sm:hover{gap:12px}


/* ==================================================================
   5. DECORATIVE WATERMARK
   The brand mark, punched out of a solid colour with a CSS mask so a
   single SVG can be tinted per placement. Bled off the corner and
   clipped by the section's overflow:hidden, so it reads as a subtle
   background texture bleeding off the edge rather than a sticker
   sitting inside the corner.

   Size/offset intentionally do NOT shrink at narrower breakpoints.
   icon-mark.svg is a sparse mosaic (one empty quadrant, two small
   corner squares) — clip it down to a small sliver (as a naive mobile
   override once did, ~90px) and the visible remainder can land
   entirely in a gap, rendering nothing at some viewport widths and
   something at others just a few px apart. Keeping the same ~175px
   visible area at every width keeps it reliably non-empty.
   ================================================================== */

.watermark{
  position:absolute;width:230px;height:230px;pointer-events:none;
  -webkit-mask:url(../images/icon-mark.svg) center/contain no-repeat;
  mask:url(../images/icon-mark.svg) center/contain no-repeat;
  background:var(--c-blue-600);opacity:.05;
}
.watermark--top-right{top:-55px;right:-55px}
.watermark--bottom-left{left:-55px;bottom:-55px;width:250px;height:250px;opacity:.06}
.watermark--footer{top:-55px;right:-55px;width:240px;height:240px;background:var(--c-on-dark);opacity:.06}


/* ==================================================================
   6. SCROLL-IN REVEAL
   Elements start hidden; the runtime adds .is-revealed as they enter
   the viewport (with a safety timeout so content can never stay
   invisible if the observer misfires).
   ================================================================== */

[data-reveal]{
  opacity:0;transform:translateY(30px);
  transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1);
}
[data-reveal].is-revealed{opacity:1;transform:none}


/* ==================================================================
   7. HEADER / NAVIGATION
   ================================================================== */

.site-header{
  position:sticky;top:0;z-index:200;
  background:var(--c-header-bg);
  backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--c-border);
  transition:box-shadow .3s,border-color .3s;
}
.site-header.is-scrolled{box-shadow:var(--sh-header);border-bottom-color:transparent}

.site-header__inner{
  max-width:var(--layout-max);margin-inline:auto;
  padding-inline:var(--layout-pad);
  height:var(--header-h);
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}

.site-logo{display:flex;align-items:center}
.site-logo img{height:68px;display:block}

/* ---- hamburger (mobile only; shown by the 900px block below) ---- */
.nav-toggle{
  display:none;flex:none;flex-direction:column;justify-content:center;gap:5px;
  width:44px;height:44px;padding:0;margin:0;border:none;background:none;
  cursor:pointer;-webkit-tap-highlight-color:transparent;
}
.nav-toggle span{
  display:block;width:22px;height:2px;margin-inline:auto;
  background:var(--c-ink);border-radius:2px;
  transition:transform .25s ease,opacity .2s ease;
}
.site-header.is-menu-open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.site-header.is-menu-open .nav-toggle span:nth-child(2){opacity:0}
.site-header.is-menu-open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.site-nav{display:flex;align-items:center;gap:4px}

.nav-link{
  display:flex;align-items:center;gap:6px;
  padding:10px 15px;border-radius:10px;
  font-size:15px;font-weight:600;color:var(--c-ink-700);
  transition:background .2s,color .2s;
}
.nav-link:hover{background:var(--c-surface-soft);color:var(--c-blue-600)}

/* Dropdown parents are not pages of their own — they are buttons so they
   stay keyboard-reachable (which is what opens the panel via :focus-within)
   without pretending to be links. */
.nav-link--parent{
  background:none;border:none;cursor:pointer;
  font-family:inherit;font-size:15px;font-weight:600;
}
.nav-chevron{transition:transform .25s ease}

/* current page — set by site.js from the URL */
.nav-link.is-active{color:var(--c-blue-600);background:var(--c-surface-soft)}
.nav-drop__link.is-active{color:var(--c-blue-600);font-weight:700}

.nav-item{position:relative}

.nav-drop{
  position:absolute;top:calc(100% + 10px);left:0;min-width:236px;padding:8px;
  background:var(--c-surface);
  border:1px solid var(--c-border);border-radius:16px;
  box-shadow:var(--sh-drop);
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .22s,transform .22s,visibility .22s;
}
/* pure CSS — no JS hover handlers needed */
.nav-item:hover .nav-drop,
.nav-item:focus-within .nav-drop{opacity:1;visibility:visible;transform:translateY(0)}

/* a long menu near the right edge would otherwise run off-screen */
.nav-drop--right{left:auto;right:0}
.nav-drop--wide{min-width:300px}

.nav-drop__link{
  display:block;padding:11px 14px;border-radius:10px;
  font-size:14.5px;font-weight:500;color:var(--c-ink-600);
  transition:background .2s,color .2s;
}
.nav-drop__link:hover{background:var(--c-surface-soft);color:var(--c-blue-600)}

.header-actions{display:flex;align-items:center;gap:18px}

.header-phone{
  display:flex;align-items:center;gap:8px;
  font-size:15px;font-weight:700;color:var(--c-blue-600);white-space:nowrap;
}


/* ==================================================================
   8. FOOTER
   ================================================================== */

.site-footer{
  position:relative;overflow:hidden;
  background:var(--c-navy-900);color:var(--c-on-dark-strong);
  padding-block:72px 0;
}
.site-footer .container{position:relative}

.footer__grid{
  display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px;
  padding-bottom:52px;border-bottom:1px solid var(--c-white-12);
}

.footer__logo{height:32px;display:block}
.footer__tagline{
  margin:22px 0 0;max-width:300px;
  font-size:15px;line-height:1.7;color:var(--c-on-dark-muted);
}
.footer__social{margin-top:24px;display:flex;gap:12px}
.footer__social-link{
  width:40px;height:40px;border-radius:11px;
  display:flex;align-items:center;justify-content:center;
  background:var(--c-white-08);color:var(--c-on-dark-strong);
  transition:background .2s,color .2s;
}
.footer__social-link:hover{background:var(--c-blue-600);color:var(--c-on-dark)}

.footer__col-title{
  margin-bottom:18px;
  font-size:14px;font-weight:700;letter-spacing:.04em;color:var(--c-on-dark);
}
.footer__links{display:grid;gap:12px;font-size:14.5px}
.footer__links a{color:var(--c-on-dark-muted)}
.footer__links a:hover{color:var(--c-on-dark)}

.footer__bottom{
  display:flex;justify-content:space-between;align-items:center;
  flex-wrap:wrap;gap:20px;padding-block:26px 40px;
}
.footer__legal{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.footer__copy{font-size:13.5px;color:var(--c-on-dark-dim)}
.footer__legal-link{
  font-size:13.5px;color:var(--c-on-dark-dim);
  text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--c-white-28);
  transition:color .15s ease;
}
.footer__legal-link:hover{color:var(--c-on-dark-strong)}
.footer__badges{display:flex;gap:10px;flex-wrap:wrap}
.footer__badge{
  padding:7px 14px;border:1px solid var(--c-white-18);border-radius:8px;
  font-size:12px;font-weight:600;color:var(--c-on-dark-muted);
}


/* ==================================================================
   10. RESPONSIVE — shell only
   Page-specific breakpoints live in the page's own stylesheet.
   1180 · 1100 · 1060 · 1000 · 900 · 600 · 380
   ================================================================== */

@media (max-width:1180px){
  /* the phone number is the first thing to go when the bar gets tight */
  .header-phone{display:none}
}

@media (max-width:1100px){
  .container{padding-inline:24px}
  .site-header__inner{padding-inline:24px}
  .grid--4{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:1060px){
  .nav-link{padding-inline:11px}
}

@media (max-width:1000px){
  .footer__grid{grid-template-columns:1fr 1fr;gap:36px}
  .grid--2{gap:22px}
}

@media (max-width:900px){

  /* ---- header collapses to a hamburger-driven panel ---- */
  .site-header__inner{
    height:var(--header-h-mobile);
    padding-inline:18px;gap:12px;
    /* DOM order is logo → toggle → nav → actions; with space-between the
       toggle would land mid-bar, so re-order to  logo … actions toggle */
    justify-content:flex-start;
  }
  .site-logo{margin-right:auto}
  .site-logo img{height:42px}
  .header-actions{order:2;gap:10px}
  .nav-toggle{display:flex;order:3}

  .header-actions .btn{padding:11px 17px;font-size:13.5px;box-shadow:none}

  .site-nav{
    display:none;
    position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    padding:8px 18px 22px;
    background:var(--c-surface);
    border-bottom:1px solid var(--c-border);
    box-shadow:var(--sh-nav-panel);
    max-height:calc(100vh - var(--header-h-mobile));
    overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  }
  .site-header.is-menu-open .site-nav{display:flex}
  .site-nav > .nav-item,.site-nav > .nav-link{width:100%}
  .nav-link{padding:14px 8px;font-size:15.5px;border-radius:10px}
  .nav-item > .nav-link{border-bottom:1px solid var(--c-border-faint)}
  .nav-chevron{margin-left:auto}

  /* Touch has no hover, so each submenu becomes a tap-to-expand accordion.
     max-height (rather than height:auto) is what makes it animatable; the
     cap only has to clear the tallest submenu — 7 items ≈ 310px. */
  .nav-drop{
    position:static;opacity:1;visibility:visible;transform:none;
    min-width:0;margin:0;padding:0 0 0 14px;
    background:transparent;border:none;border-radius:0;box-shadow:none;
    max-height:0;overflow:hidden;
    transition:max-height .3s ease;
  }
  .nav-item.is-open > .nav-drop{max-height:480px;padding-bottom:8px}
  .nav-drop__link{padding:11px 8px;font-size:14.5px;color:var(--c-text-muted)}

  .nav-item.is-open > .nav-link--parent{color:var(--c-blue-600)}
  .nav-item.is-open > .nav-link--parent .nav-chevron{transform:rotate(180deg)}

  /* ---- shared layout ---- */
  .container{padding-inline:20px}
  .section{padding-block:56px}
  .grid--2,.grid--3,.grid--4{grid-template-columns:1fr}
  .grid--3,.grid--4{gap:18px}
  .grid--2{gap:20px}

  .section-head{margin-bottom:36px}
  .section-head--sub{margin:44px 0 26px}
  .section-head-row{margin-bottom:28px}
  .section-title{font-size:28px;line-height:1.18}
  .section-title--40,.section-title--md,.section-title--sm{font-size:28px}
  .section-lead,.section-lead--md,.section-lead--lg{font-size:15.5px}


  /* ---- footer ---- */
  .footer__grid{grid-template-columns:1fr;gap:30px}
  .footer__bottom{
    flex-direction:column;align-items:flex-start;gap:14px;
    padding-block:22px 34px;
  }

  [id]{scroll-margin-top:88px}
}

@media (max-width:600px){
  .container{padding-inline:16px}
  .site-header__inner{padding-inline:14px}
  .site-logo img{height:38px}
  .site-nav{padding:8px 14px 20px}
  .header-actions .btn{padding:10px 14px;font-size:12.5px}
  .section{padding-block:44px}
  .section-title,
  .section-title--40,.section-title--md,.section-title--sm{font-size:24px}
}

@media (max-width:380px){
  .site-logo img{height:34px}
  .header-actions .btn{padding:9px 12px;font-size:12px}
  .section-title,
  .section-title--40,.section-title--md,.section-title--sm{font-size:22px}
}

/* honour the OS "reduce motion" preference */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important;
  }
}