:root{
  --bg:#04090f;
  --bg2:#07131e;
  --panel:#081725;

  --gold:#d4b06a;
  --gold2:#f4d496;
  --gold3:#966c3e;

  --cyan:#58d7ff;
  --text:#f1eee8;
  --muted:#a0adb8;

  --max:1180px;
}

*{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  margin:0;
  color:var(--text);
  background:var(--bg);

  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    "Segoe UI",
    sans-serif;
}

a{
  color:inherit;
  text-decoration:none;
}

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

.container{
  width:min(calc(100% - 36px),var(--max));
  margin-inline:auto;
}


/* HEADER */

.topbar{
  height:72px;
  position:sticky;
  top:0;
  z-index:100;

  background:
    rgba(3,8,13,.92);

  backdrop-filter:blur(20px);

  border-bottom:
    1px solid rgba(212,176,106,.14);
}

.topbar-inner{
  width:min(calc(100% - 36px),var(--max));
  height:72px;
  margin:auto;

  display:grid;
  grid-template-columns:
    220px 1fr 132px;

  align-items:center;
  gap:25px;
}

.corporate-brand img{
  width:190px;
  max-height:54px;
  object-fit:contain;
  object-position:left center;
}

.main-nav{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:27px;

  font-size:12px;
  color:#b7c1c9;
}

.main-nav a{
  position:relative;
  padding:28px 0 25px;
}

.main-nav a:hover,
.main-nav a.active{
  color:var(--gold2);
}

.main-nav a.active::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:18px;

  height:1px;

  background:var(--gold);
}

.top-cta{
  justify-self:end;

  padding:10px 17px;

  border:
    1px solid rgba(212,176,106,.55);

  border-radius:999px;

  font-size:12px;
}

.top-cta span{
  margin-left:13px;
  color:var(--gold);
}

.nav-toggle{
  display:none;
}


/* HOME HERO */

.home-hero{
  height:455px;
  position:relative;
  overflow:hidden;

  background:
    radial-gradient(
      circle at 79% 44%,
      rgba(20,91,130,.22),
      transparent 28rem
    ),
    linear-gradient(
      110deg,
      #04090f,
      #07131e 58%,
      #02070b
    );

  border-bottom:
    1px solid rgba(212,176,106,.17);
}

.hero-shade{
  position:absolute;
  inset:0;

  background:
    linear-gradient(
      120deg,
      transparent 0 34%,
      rgba(255,255,255,.012) 34% 35%,
      transparent 35% 100%
    );
}

.hero-blue-glow{
  position:absolute;

  width:380px;
  height:380px;

  right:10%;
  top:30px;

  border-radius:50%;

  background:
    rgba(88,215,255,.08);

  filter:blur(80px);
}

.hero-layout{
  height:455px;

  position:relative;
  z-index:2;

  display:grid;
  grid-template-columns:
    .9fr 1.1fr;

  align-items:center;
}

.hero-copy{
  padding-left:8px;
}

.eyebrow{
  display:flex;
  align-items:center;
  gap:12px;

  color:#aebac4;

  font-size:9px;
  letter-spacing:.22em;
}

.eyebrow i{
  display:block;
  width:38px;
  height:1px;

  background:
    linear-gradient(
      90deg,
      var(--gold),
      transparent
    );
}

.hero-copy h1{
  margin:22px 0 14px;

  max-width:510px;

  font-size:
    clamp(42px,4.4vw,67px);

  line-height:.98;

  letter-spacing:-.045em;

  font-weight:300;

  text-transform:uppercase;
}

.hero-copy h1 strong{
  display:block;

  font-weight:300;

  background:
    linear-gradient(
      135deg,
      #f8e2ae,
      #d4b06a 55%,
      #9b713d
    );

  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.hero-copy>p{
  max-width:430px;

  margin:0;

  color:#b4c0ca;

  font-size:15px;
  line-height:1.6;
}

.hero-actions{
  display:flex;
  gap:12px;

  margin-top:25px;
}

.button{
  min-height:44px;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  gap:19px;

  padding:0 21px;

  border-radius:8px;

  font-size:11px;
  font-weight:600;

  transition:
    transform .2s ease,
    background .2s ease;
}

.button:hover{
  transform:translateY(-2px);
}

.button-gold{
  color:#080b0f;

  background:
    linear-gradient(
      135deg,
      #f4d496,
      #d4b06a 55%,
      #b78b54
    );

  box-shadow:
    0 14px 30px rgba(212,176,106,.14);
}

.button-line{
  border:
    1px solid rgba(212,176,106,.55);

  color:#dce3e8;

  background:rgba(0,0,0,.18);
}


/* WORLD */

.hero-world{
  height:100%;
  position:relative;
}

.earth-light{
  position:absolute;

  width:78px;
  height:78px;

  left:20%;
  top:67px;

  border-radius:50%;

  background:#f6d493;

  filter:blur(25px);

  opacity:.28;
}

.earth{
  width:465px;
  height:465px;

  position:absolute;

  right:-15px;
  top:20px;

  border-radius:50%;

  overflow:hidden;

  background:
    radial-gradient(
      circle at 28% 31%,
      #173a51,
      #081621 38%,
      #020609 70%
    );

  border-left:
    1px solid rgba(88,215,255,.5);

  box-shadow:
    -13px 0 37px rgba(88,215,255,.18),
    inset 35px 0 55px rgba(88,215,255,.08),
    inset -70px -30px 80px #000;
}

.earth::before{
  content:"";

  position:absolute;
  inset:0;

  background-image:
    radial-gradient(
      circle,
      rgba(220,175,87,.72) 0 1px,
      transparent 1.5px
    );

  background-size:18px 18px;

  opacity:.45;

  mask-image:
    radial-gradient(
      circle,
      black 0 66%,
      transparent 84%
    );
}

.earth-grid{
  position:absolute;
  inset:17%;

  border:
    1px solid rgba(212,176,106,.19);

  border-radius:50%;

  box-shadow:
    0 0 0 55px rgba(212,176,106,.025),
    0 0 0 110px rgba(212,176,106,.02);
}

.route{
  position:absolute;

  left:10%;
  top:45%;

  width:80%;
  height:22%;

  border:
    1px solid rgba(212,176,106,.26);

  border-radius:50%;
}

.route-a{
  transform:rotate(18deg);
}

.route-b{
  transform:rotate(-28deg);
}

.route-c{
  width:42%;
  height:85%;

  left:28%;
  top:8%;

  transform:rotate(33deg);
}

.earth-brand{
  width:92px;

  position:absolute;

  right:181px;
  top:198px;

  z-index:4;

  filter:
    drop-shadow(
      0 12px 20px rgba(0,0,0,.8)
    );
}

.global-copy{
  position:absolute;

  right:0;
  top:142px;

  z-index:5;

  color:#c2cbd2;

  font-size:9px;
  line-height:1.6;
  letter-spacing:.2em;
}

.global-copy span{
  display:block;
}


/* ECOSYSTEM */

.ecosystem{
  padding:42px 0 45px;

  background:
    radial-gradient(
      circle at 50% 0,
      rgba(26,77,105,.15),
      transparent 30rem
    ),
    #06101a;
}

.ecosystem-heading{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;

  gap:20px;

  margin-bottom:26px;
}

.section-label{
  color:var(--gold);

  font-size:10px;
  letter-spacing:.27em;
}

.ecosystem-heading h2{
  margin:8px 0 0;

  font-size:27px;
  font-weight:300;
}

.ecosystem-note{
  color:#72818d;

  font-size:8px;
  letter-spacing:.25em;
}

.product-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);

  gap:17px;
}

.product-card{
  min-height:265px;

  display:grid;
  grid-template-columns:42% 58%;

  align-items:center;

  position:relative;
  overflow:hidden;

  padding:22px;

  border:
    1px solid rgba(88,215,255,.22);

  border-radius:18px;

  background:
    linear-gradient(
      145deg,
      rgba(14,39,59,.96),
      rgba(5,15,24,.99)
    );

  box-shadow:
    0 22px 45px rgba(0,0,0,.22);

  transition:
    transform .25s ease,
    border-color .25s ease;
}

.product-card::before{
  content:"";

  width:170px;
  height:370px;

  position:absolute;
  right:-125px;
  top:-55px;

  transform:rotate(30deg);

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.045),
      transparent
    );
}

.product-card:hover{
  transform:translateY(-6px);

  border-color:
    rgba(212,176,106,.48);
}

.product-logo{
  min-width:0;

  position:relative;
  z-index:2;
}

.product-logo img{
  width:128px;
  height:128px;

  margin:auto;

  object-fit:contain;

  filter:
    drop-shadow(
      0 15px 20px rgba(0,0,0,.45)
    );
}

.product-content{
  position:relative;
  z-index:2;

  padding-left:8px;
}

.product-content h3{
  margin:0;

  font-size:27px;

  letter-spacing:-.035em;
}

.skor h3 span{
  color:#e8b64c;
}

.defter h3 span{
  color:#3c80ff;
}

.connect h3 span{
  color:#1edbe6;
}

.product-content p{
  min-height:68px;

  margin:10px 0 14px;

  color:#aebac4;

  font-size:12px;
  line-height:1.55;
}

.product-content b{
  display:inline-flex;
  align-items:center;

  gap:12px;

  color:#e6ebef;

  font-size:11px;
  font-weight:500;
}

.product-content b span{
  color:var(--gold);
}


/* FOOTER */

.compact-footer{
  border-top:
    1px solid rgba(212,176,106,.15);

  background:#03080d;
}

.compact-footer .container{
  min-height:62px;

  display:flex;
  align-items:center;
  justify-content:space-between;

  color:#65737f;

  font-size:9px;
  letter-spacing:.15em;
}


/* INNER PAGES */

.inner-main{
  min-height:
    calc(100vh - 134px);
}

.inner-hero{
  position:relative;
  overflow:hidden;

  padding:85px 0 75px;

  background:
    radial-gradient(
      circle at 78% 45%,
      rgba(32,114,154,.14),
      transparent 25rem
    ),
    linear-gradient(
      120deg,
      #050a10,
      #07131e
    );

  border-bottom:
    1px solid rgba(212,176,106,.16);
}

.inner-glow{
  position:absolute;

  width:480px;
  height:480px;

  right:-100px;
  top:-200px;

  border-radius:50%;

  background:
    rgba(212,176,106,.07);

  filter:blur(80px);
}

.inner-hero-grid{
  position:relative;
  z-index:2;

  display:grid;
  grid-template-columns:1fr 260px;

  align-items:center;
  gap:80px;
}

.inner-hero h1{
  max-width:800px;

  margin:20px 0;

  font-size:
    clamp(38px,5vw,67px);

  line-height:1.02;

  font-weight:300;

  letter-spacing:-.035em;
}

.inner-hero p{
  max-width:700px;

  color:#aeb9c3;

  font-size:17px;
  line-height:1.7;
}

.inner-hero img{
  width:230px;

  filter:
    drop-shadow(
      0 25px 35px rgba(0,0,0,.6)
    );
}

.inner-content{
  padding:65px 0 90px;

  background:#06101a;
}

.inner-card-grid{
  display:grid;
  grid-template-columns:
    repeat(3,1fr);

  gap:20px;
}

.inner-card{
  min-height:235px;

  padding:30px;

  position:relative;

  border:
    1px solid rgba(212,176,106,.18);

  border-radius:16px;

  background:
    linear-gradient(
      145deg,
      rgba(12,31,47,.9),
      rgba(5,14,22,.98)
    );
}

.inner-card>span{
  display:block;

  width:42px;
  height:2px;

  margin-bottom:29px;

  background:
    linear-gradient(
      90deg,
      var(--gold2),
      var(--gold3)
    );
}

.inner-card h2{
  margin:0 0 15px;

  font-size:21px;
  font-weight:400;
}

.inner-card p{
  margin:0;

  color:#9daab5;

  font-size:14px;
  line-height:1.7;
}

.inner-cta{
  width:min(calc(100% - 36px),var(--max));

  margin:
    40px auto 0;

  text-align:center;
}


/* RESPONSIVE */

@media(max-width:900px){

  .topbar-inner{
    grid-template-columns:1fr auto;
  }

  .top-cta{
    display:none;
  }

  .nav-toggle{
    display:flex;

    width:40px;
    height:40px;

    padding:10px;

    flex-direction:column;
    justify-content:center;
    gap:5px;

    background:transparent;

    border:
      1px solid rgba(212,176,106,.3);

    border-radius:9px;
  }

  .nav-toggle span{
    height:1px;
    background:#d8dfe5;
  }

  .main-nav{
    display:none;

    position:absolute;
    top:72px;
    left:0;
    right:0;

    padding:15px 22px 23px;

    flex-direction:column;
    align-items:flex-start;

    background:
      rgba(3,8,13,.98);

    border-bottom:
      1px solid rgba(212,176,106,.15);
  }

  body.nav-open .main-nav{
    display:flex;
  }

  .main-nav a{
    padding:8px 0;
  }

  .main-nav a.active::after{
    display:none;
  }

  .home-hero{
    height:auto;
  }

  .hero-layout{
    height:auto;

    grid-template-columns:1fr;

    padding:48px 0 0;
  }

  .hero-copy{
    padding-bottom:20px;
  }

  .hero-world{
    height:360px;
  }

  .earth{
    width:390px;
    height:390px;

    right:-100px;
  }

  .earth-brand{
    right:80px;
    top:170px;
  }

  .global-copy{
    display:none;
  }

  .product-grid{
    grid-template-columns:1fr;
  }

  .product-card{
    min-height:235px;
  }

  .inner-hero-grid{
    grid-template-columns:1fr 170px;
    gap:30px;
  }

  .inner-card-grid{
    grid-template-columns:1fr;
  }

}


@media(max-width:560px){

  .corporate-brand img{
    width:165px;
  }

  .hero-copy h1{
    font-size:43px;
  }

  .hero-actions{
    flex-direction:column;
  }

  .button{
    width:100%;
  }

  .hero-world{
    height:310px;
  }

  .earth{
    width:330px;
    height:330px;

    right:-115px;
  }

  .earth-brand{
    width:75px;

    right:55px;
    top:142px;
  }

  .ecosystem{
    padding-top:34px;
  }

  .ecosystem-heading{
    align-items:flex-start;
    flex-direction:column;
  }

  .ecosystem-note{
    display:none;
  }

  .product-card{
    grid-template-columns:125px 1fr;

    padding:16px;
  }

  .product-logo img{
    width:105px;
    height:105px;
  }

  .product-content h3{
    font-size:23px;
  }

  .product-content p{
    min-height:auto;

    font-size:11px;
  }

  .footer-message{
    display:none;
  }

  .inner-hero{
    padding:60px 0;
  }

  .inner-hero-grid{
    grid-template-columns:1fr;
  }

  .inner-hero img{
    width:150px;
  }

  .inner-content{
    padding:45px 0 60px;
  }

}


/* ==========================================================
   S_TEKNOLOJI_HOME_V3_PRO_POLISH
   ========================================================== */

:root{
  --max:1360px;
}


/* PAGE PRESENCE */

.home-page{
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

.home-page main{
  flex:1 0 auto;
}


/* HEADER — stronger corporate presence */

.topbar{
  height:82px;
}

.topbar-inner{
  height:82px;

  grid-template-columns:
    270px
    1fr
    150px;

  gap:34px;
}

.corporate-brand{
  display:flex;
  align-items:center;
}

.corporate-brand img{
  width:245px;
  max-height:66px;
}

.main-nav{
  gap:34px;

  font-size:13px;
  letter-spacing:.01em;
}

.main-nav a{
  padding:
    32px
    0
    29px;
}

.main-nav a.active::after{
  bottom:22px;
}

.top-cta{
  padding:
    11px
    20px;

  font-size:12px;
}


/* HERO — balanced, premium, not oversized */

.home-hero{
  height:500px;
}

.hero-layout{
  height:500px;

  grid-template-columns:
    .92fr
    1.08fr;
}

.hero-copy{
  padding-left:12px;
}

.eyebrow{
  font-size:10px;
  letter-spacing:.235em;
}

.hero-copy h1{
  max-width:560px;

  margin:
    25px
    0
    16px;

  font-size:
    clamp(
      46px,
      4.3vw,
      72px
    );

  line-height:.985;
}

.hero-copy>p{
  max-width:470px;

  font-size:16px;
}

.hero-actions{
  margin-top:28px;
}

.button{
  min-height:46px;

  padding:
    0
    23px;

  font-size:12px;
}


/* HERO WORLD */

.hero-world{
  height:500px;
}

.earth{
  width:510px;
  height:510px;

  right:-8px;
  top:-3px;

  box-shadow:
    -18px 0 45px rgba(88,215,255,.22),
    inset 38px 0 70px rgba(88,215,255,.09),
    inset -85px -40px 100px #000,
    0 30px 90px rgba(0,0,0,.45);
}

.earth::before{
  background-size:
    19px
    19px;

  opacity:.49;
}

.earth-grid{
  inset:15%;
}

.earth-brand{
  width:116px;

  right:196px;
  top:205px;
}

.earth-light{
  width:105px;
  height:105px;

  left:21%;
  top:62px;

  opacity:.34;
}

.global-copy{
  right:8px;
  top:151px;

  font-size:9px;
}


/* ECOSYSTEM — more visual weight, still compact */

.ecosystem{
  padding:
    48px
    0
    52px;
}

.ecosystem-heading{
  margin-bottom:30px;
}

.section-label{
  font-size:11px;
}

.ecosystem-heading h2{
  margin-top:10px;

  font-size:31px;
}

.product-grid{
  gap:22px;
}

.product-card{
  min-height:310px;

  grid-template-columns:
    43%
    57%;

  padding:
    26px
    25px;

  border-radius:20px;

  border-color:
    rgba(88,215,255,.28);

  box-shadow:
    0 26px 60px rgba(0,0,0,.29);
}

.product-card:hover{
  transform:
    translateY(-7px)
    scale(1.008);

  box-shadow:
    0 34px 75px rgba(0,0,0,.4);
}

.product-logo{
  display:grid;
  place-items:center;

  min-height:185px;
}

.product-logo img{
  width:158px;
  height:158px;

  filter:
    drop-shadow(
      0 19px 28px rgba(0,0,0,.55)
    );
}

.product-content{
  padding-left:12px;
}

.product-content h3{
  font-size:31px;
}

.product-content p{
  min-height:74px;

  margin:
    12px
    0
    18px;

  font-size:13px;

  line-height:1.6;
}

.product-content b{
  gap:14px;

  font-size:12px;
}


/* individual brand character */

.skor{
  box-shadow:
    inset 0 0 55px rgba(212,176,106,.025),
    0 26px 60px rgba(0,0,0,.29);
}

.defter{
  box-shadow:
    inset 0 0 55px rgba(44,112,255,.035),
    0 26px 60px rgba(0,0,0,.29);
}

.connect{
  box-shadow:
    inset 0 0 55px rgba(0,215,231,.035),
    0 26px 60px rgba(0,0,0,.29);
}


/* FOOTER */

.compact-footer{
  flex-shrink:0;

  border-top:
    1px solid rgba(212,176,106,.22);

  background:
    linear-gradient(
      180deg,
      #03080d,
      #020509
    );
}

.compact-footer .container{
  min-height:82px;

  position:relative;

  display:grid;

  grid-template-columns:
    1fr
    auto
    1fr;

  align-items:center;
}

.compact-footer .copyright{
  grid-column:2;

  color:#8e9aa4;

  font-size:10px;
  letter-spacing:.12em;

  white-space:nowrap;
}

.compact-footer .footer-message{
  grid-column:3;

  justify-self:end;

  color:#725f43;

  font-size:9px;
  letter-spacing:.18em;
}


/* LARGE DESKTOP */

@media(min-width:1600px){

  :root{
    --max:1420px;
  }

  .corporate-brand img{
    width:255px;
  }

  .hero-copy h1{
    font-size:74px;
  }

  .earth{
    width:525px;
    height:525px;
  }

  .product-card{
    min-height:320px;
  }

}


/* TABLET */

@media(max-width:900px){

  .topbar,
  .topbar-inner{
    height:74px;
  }

  .topbar-inner{
    grid-template-columns:
      1fr
      auto;
  }

  .corporate-brand img{
    width:205px;
  }

  .main-nav{
    top:74px;
  }

  .home-hero{
    height:auto;
  }

  .hero-layout{
    height:auto;
  }

  .hero-world{
    height:380px;
  }

  .earth{
    width:405px;
    height:405px;

    top:0;
    right:-80px;
  }

  .earth-brand{
    width:90px;

    right:87px;
    top:165px;
  }

  .product-card{
    min-height:250px;

    grid-template-columns:
      155px
      1fr;
  }

  .product-logo{
    min-height:150px;
  }

  .product-logo img{
    width:132px;
    height:132px;
  }

}


/* MOBILE */

@media(max-width:560px){

  .corporate-brand img{
    width:180px;
  }

  .hero-copy h1{
    font-size:42px;
  }

  .hero-world{
    height:300px;
  }

  .earth{
    width:320px;
    height:320px;

    right:-110px;
  }

  .earth-brand{
    width:72px;

    right:50px;
    top:132px;
  }

  .product-card{
    min-height:205px;

    grid-template-columns:
      116px
      1fr;

    padding:15px;
  }

  .product-logo{
    min-height:115px;
  }

  .product-logo img{
    width:102px;
    height:102px;
  }

  .product-content h3{
    font-size:23px;
  }

  .compact-footer .container{
    min-height:90px;

    display:flex;
    flex-direction:column;
    justify-content:center;

    gap:8px;

    text-align:center;
  }

  .compact-footer .copyright{
    white-space:normal;
  }

  .compact-footer .footer-message{
    display:block;
  }

}


/* ==========================================================
   S_TEKNOLOJI_HOME_V4_CINEMATIC_HERO
   Approved cinematic Earth artwork integration
   ========================================================== */

.home-hero{
  position:relative;

  background:
    linear-gradient(
      90deg,
      rgba(4,9,15,.98) 0%,
      rgba(4,9,15,.95) 28%,
      rgba(4,9,15,.62) 47%,
      rgba(4,9,15,.15) 68%,
      rgba(4,9,15,.04) 100%
    ),
    url("/brand/s-teknoloji/hero/s-teknoloji-cinematic-hero-wide.webp")
      center center /
      cover
      no-repeat;

  isolation:isolate;
}


/* controlled cinematic depth */

.home-hero::before{
  content:"";

  position:absolute;
  inset:0;

  z-index:0;

  pointer-events:none;

  background:
    radial-gradient(
      circle at 58% 25%,
      rgba(244,212,150,.10),
      transparent 14rem
    ),
    radial-gradient(
      circle at 72% 52%,
      rgba(88,215,255,.08),
      transparent 28rem
    );
}


/* fine dark edge for readability */

.home-hero::after{
  content:"";

  position:absolute;
  inset:0;

  z-index:0;

  pointer-events:none;

  background:
    linear-gradient(
      180deg,
      rgba(0,0,0,.06),
      transparent 32%,
      transparent 72%,
      rgba(0,0,0,.20)
    );
}


/* real artwork replaces synthetic CSS globe */

.hero-blue-glow,
.earth-light,
.earth,
.earth-brand{
  display:none !important;
}


/* keep content above cinematic artwork */

.hero-layout{
  position:relative;
  z-index:2;
}


/* hero-right remains available for the editorial label */

.hero-world{
  position:relative;

  height:500px;

  pointer-events:none;
}


/* reference-style right label */

.global-copy{
  display:block;

  position:absolute;

  right:12px;
  top:145px;

  color:#ccd4da;

  font-size:9px;

  line-height:1.75;

  letter-spacing:.24em;

  text-shadow:
    0 2px 12px rgba(0,0,0,.8);
}


/* subtle gold separator under label */

.global-copy::after{
  content:"";

  display:block;

  width:42px;
  height:1px;

  margin-top:14px;

  background:
    linear-gradient(
      90deg,
      #d4b06a,
      transparent
    );
}


/* desktop composition */

@media(min-width:1200px){

  .home-hero{
    background-position:
      center center;
  }

  .hero-copy{
    position:relative;
    z-index:4;
  }

}


/* ultra-wide displays: prevent Earth drifting too far away */

@media(min-width:1700px){

  .home-hero{
    background-size:
      auto 100%;

    background-position:
      center right;
  }

}


/* tablet */

@media(max-width:900px){

  .home-hero{
    background:
      linear-gradient(
        180deg,
        rgba(4,9,15,.97) 0%,
        rgba(4,9,15,.89) 45%,
        rgba(4,9,15,.30) 67%,
        rgba(4,9,15,.08) 100%
      ),
      url("/brand/s-teknoloji/hero/s-teknoloji-cinematic-hero-wide.webp")
        68% center /
        auto 100%
        no-repeat;

    min-height:700px;
  }

  .hero-world{
    height:330px;
  }

  .global-copy{
    right:8px;
    top:95px;
  }

}


/* mobile: artwork stays cinematic but copy wins */

@media(max-width:560px){

  .home-hero{
    min-height:650px;

    background:
      linear-gradient(
        180deg,
        rgba(4,9,15,.98) 0%,
        rgba(4,9,15,.94) 43%,
        rgba(4,9,15,.52) 63%,
        rgba(4,9,15,.12) 100%
      ),
      url("/brand/s-teknoloji/hero/s-teknoloji-cinematic-hero-wide.webp")
        72% bottom /
        auto 72%
        no-repeat;
  }

  .hero-world{
    height:260px;
  }

  .global-copy{
    display:none;
  }

}


/* ==========================================================
   S_TEKNOLOJI_HOME_V5_VIEWPORT_BALANCE
   Desktop first-screen composition refinement
   ========================================================== */

@media (min-width: 901px){

  :root{
    --max:1280px;
  }


  /* HEADER */

  .topbar,
  .topbar-inner{
    height:72px;
  }

  .topbar-inner{
    grid-template-columns:
      235px
      1fr
      140px;

    gap:28px;
  }

  .corporate-brand img{
    width:215px;
    max-height:58px;
  }

  .main-nav{
    gap:29px;
    font-size:12px;
  }

  .main-nav a{
    padding:
      27px
      0
      24px;
  }

  .main-nav a.active::after{
    bottom:17px;
  }


  /* HERO
     Keep cinematic Earth, reduce only vertical dominance */

  .home-hero{
    height:405px;

    background-position:
      center center;
  }

  .hero-layout{
    height:405px;

    grid-template-columns:
      .88fr
      1.12fr;
  }

  .hero-copy{
    padding-left:6px;
  }

  .eyebrow{
    font-size:9px;
  }

  .hero-copy h1{
    max-width:470px;

    margin:
      19px
      0
      13px;

    font-size:
      clamp(
        39px,
        3.45vw,
        56px
      );

    line-height:.99;
  }

  .hero-copy>p{
    max-width:430px;

    font-size:14px;
    line-height:1.55;
  }

  .hero-actions{
    margin-top:22px;
  }

  .button{
    min-height:42px;

    padding:
      0
      20px;

    font-size:11px;
  }


  /* Cinematic artwork stays dominant,
     but is framed rather than oversized */

  .hero-world{
    height:405px;
  }

  .home-hero{
    background-size:
      auto 112%;

    background-position:
      68% center;
  }

  .global-copy{
    right:18px;
    top:122px;

    font-size:8px;
  }


  /* ECOSYSTEM:
     pull it closer to first viewport */

  .ecosystem{
    padding:
      31px
      0
      38px;
  }

  .ecosystem-heading{
    margin-bottom:22px;
  }

  .section-label{
    font-size:9px;
  }

  .ecosystem-heading h2{
    margin-top:7px;

    font-size:26px;
  }

  .ecosystem-note{
    font-size:7px;
  }


  /* PRODUCT CARDS:
     still premium, no longer visually oversized */

  .product-grid{
    gap:18px;
  }

  .product-card{
    min-height:270px;

    grid-template-columns:
      41%
      59%;

    padding:
      20px
      21px;

    border-radius:18px;
  }

  .product-logo{
    min-height:150px;
  }

  .product-logo img{
    width:132px;
    height:132px;
  }

  .product-content{
    padding-left:8px;
  }

  .product-content h3{
    font-size:27px;
  }

  .product-content p{
    min-height:61px;

    margin:
      9px
      0
      13px;

    font-size:12px;
  }

  .product-content b{
    font-size:11px;
  }

}


/* 1440p / wide desktop:
   avoid scaling everything up merely because space exists */

@media (min-width: 1500px){

  :root{
    --max:1320px;
  }

  .hero-copy h1{
    font-size:58px;
  }

  .home-hero,
  .hero-layout,
  .hero-world{
    height:420px;
  }

  .home-hero{
    background-size:
      auto 114%;
  }

}


/* Short laptop viewport:
   ecosystem should begin appearing without scrolling */

@media (min-width:901px) and (max-height:820px){

  .topbar,
  .topbar-inner{
    height:68px;
  }

  .home-hero,
  .hero-layout,
  .hero-world{
    height:365px;
  }

  .hero-copy h1{
    font-size:
      clamp(
        38px,
        3.2vw,
        52px
      );
  }

  .home-hero{
    background-size:
      auto 116%;
  }

  .ecosystem{
    padding-top:26px;
  }

}


/* ==========================================================
   S_TEKNOLOJI_HOME_V6_CINEMATIC_COHESION
   Approved concept art-direction alignment
   ========================================================== */


/* GLOBAL COLOR CONTINUITY */

.home-page{
  background:
    linear-gradient(
      180deg,
      #03080d 0%,
      #06101a 42%,
      #03080d 100%
    );
}


/* HERO -> ECOSYSTEM TRANSITION */

.home-hero{
  border-bottom:none;
}

.home-hero::after{
  content:"";

  position:absolute;
  inset:0;

  pointer-events:none;

  background:
    linear-gradient(
      180deg,
      rgba(0,0,0,.05) 0%,
      transparent 52%,
      rgba(4,12,19,.20) 78%,
      rgba(5,15,23,.88) 100%
    );

  box-shadow:
    inset 0 -1px 0 rgba(212,176,106,.19);

  z-index:1;
}


/* ECOSYSTEM ATMOSPHERE */

.ecosystem{
  position:relative;
  isolation:isolate;
  overflow:hidden;

  padding:
    32px
    0
    34px;

  background:
    radial-gradient(
      ellipse at 50% -5%,
      rgba(37,105,139,.25),
      transparent 47%
    ),
    radial-gradient(
      ellipse at 18% 102%,
      rgba(212,176,106,.12),
      transparent 24%
    ),
    radial-gradient(
      ellipse at 78% 105%,
      rgba(212,176,106,.11),
      transparent 26%
    ),
    linear-gradient(
      180deg,
      #071521 0%,
      #06111b 54%,
      #030a10 100%
    );
}


/* CITY-LIGHT ATMOSPHERE */

.ecosystem::before{
  content:"";

  position:absolute;

  left:-5%;
  right:-5%;
  bottom:-40px;

  height:245px;

  z-index:-1;

  opacity:.72;

  background:
    radial-gradient(
      circle at 7% 70%,
      rgba(244,212,150,.72) 0 1px,
      transparent 3px
    ),
    radial-gradient(
      circle at 14% 79%,
      rgba(212,176,106,.60) 0 1px,
      transparent 3px
    ),
    radial-gradient(
      circle at 21% 63%,
      rgba(244,212,150,.55) 0 1px,
      transparent 3px
    ),
    radial-gradient(
      circle at 31% 83%,
      rgba(212,176,106,.65) 0 1px,
      transparent 3px
    ),
    radial-gradient(
      circle at 43% 69%,
      rgba(244,212,150,.50) 0 1px,
      transparent 3px
    ),
    radial-gradient(
      circle at 56% 78%,
      rgba(212,176,106,.55) 0 1px,
      transparent 3px
    ),
    radial-gradient(
      circle at 67% 65%,
      rgba(244,212,150,.60) 0 1px,
      transparent 3px
    ),
    radial-gradient(
      circle at 77% 82%,
      rgba(212,176,106,.68) 0 1px,
      transparent 3px
    ),
    radial-gradient(
      circle at 89% 69%,
      rgba(244,212,150,.60) 0 1px,
      transparent 3px
    ),
    radial-gradient(
      ellipse at 20% 92%,
      rgba(212,176,106,.20),
      transparent 18%
    ),
    radial-gradient(
      ellipse at 50% 100%,
      rgba(88,215,255,.09),
      transparent 38%
    ),
    radial-gradient(
      ellipse at 83% 94%,
      rgba(212,176,106,.18),
      transparent 22%
    );
}


/* ABSTRACT NIGHT CITY SILHOUETTE */

.ecosystem::after{
  content:"";

  position:absolute;

  left:0;
  right:0;
  bottom:0;

  height:128px;

  z-index:-1;

  opacity:.78;

  background:
    linear-gradient(
      90deg,
      #030910 0 5%,
      transparent 5% 7%,
      #04101a 7% 12%,
      transparent 12% 14%,
      #030b12 14% 18%,
      transparent 18% 20%,
      #06131e 20% 27%,
      transparent 27% 30%,
      #030a11 30% 36%,
      transparent 36% 39%,
      #071522 39% 46%,
      transparent 46% 49%,
      #030a11 49% 55%,
      transparent 55% 58%,
      #06131e 58% 64%,
      transparent 64% 68%,
      #030b12 68% 74%,
      transparent 74% 77%,
      #06131e 77% 84%,
      transparent 84% 88%,
      #030910 88% 100%
    );

  clip-path:polygon(
    0 100%,
    0 76%,
    5% 76%,
    5% 52%,
    9% 52%,
    9% 70%,
    14% 70%,
    14% 39%,
    18% 39%,
    18% 68%,
    22% 68%,
    22% 48%,
    27% 48%,
    27% 73%,
    31% 73%,
    31% 34%,
    36% 34%,
    36% 66%,
    40% 66%,
    40% 43%,
    45% 43%,
    45% 71%,
    50% 71%,
    50% 30%,
    55% 30%,
    55% 67%,
    60% 67%,
    60% 46%,
    65% 46%,
    65% 73%,
    70% 73%,
    70% 37%,
    75% 37%,
    75% 68%,
    80% 68%,
    80% 49%,
    85% 49%,
    85% 73%,
    90% 73%,
    90% 43%,
    95% 43%,
    95% 71%,
    100% 71%,
    100% 100%
  );
}


/* SECTION HEADING */

.ecosystem-heading{
  position:relative;
  z-index:3;

  margin-bottom:24px;
}

.section-label{
  color:#d7ad62;
  letter-spacing:.30em;
}

.ecosystem-heading h2{
  color:#e8edf0;

  font-weight:300;

  letter-spacing:-.025em;
}


/* PRODUCT GRID */

@media(min-width:901px){

  .product-grid{
    position:relative;
    z-index:3;

    grid-template-columns:
      repeat(3,1fr);

    gap:20px;
  }

  .product-card{
    min-height:338px;

    display:flex;
    flex-direction:column;
    align-items:center;

    padding:
      24px
      25px
      21px;

    text-align:center;

    border:
      1px solid rgba(72,159,199,.34);

    border-radius:20px;

    background:
      linear-gradient(
        150deg,
        rgba(12,38,58,.96),
        rgba(4,14,23,.985)
      );

    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.025),
      0 25px 65px rgba(0,0,0,.32);

    backdrop-filter:blur(8px);
  }

  .product-card::before{
    width:190px;
    height:440px;

    right:-115px;
    top:-90px;

    background:
      linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.052),
        transparent
      );
  }

  .product-logo{
    width:145px;
    height:145px;
    min-height:145px;

    margin:
      0
      auto
      10px;

    display:grid;
    place-items:center;
  }

  .product-logo img{
    width:138px;
    height:138px;

    object-fit:contain;
  }

  .product-content{
    width:100%;
    padding:0;

    display:flex;
    flex:1;
    flex-direction:column;
    align-items:center;
  }

  .product-content h3{
    margin:0;

    font-size:29px;

    font-weight:700;

    line-height:1.05;

    color:#f0f1ef;

    text-shadow:
      0 3px 14px rgba(0,0,0,.45);
  }

  .product-content p{
    max-width:255px;
    min-height:44px;

    margin:
      12px
      auto
      15px;

    color:#aebbc5;

    font-size:12px;
    line-height:1.5;
  }

  .product-content b{
    width:78%;
    min-height:39px;

    margin-top:auto;

    display:flex;
    align-items:center;
    justify-content:center;

    gap:24px;

    border:
      1px solid rgba(212,176,106,.82);

    border-radius:999px;

    color:#edf1f3;

    font-size:11px;
    font-weight:500;

    background:
      rgba(2,8,13,.32);
  }

  .defter .product-content b{
    border-color:
      rgba(56,126,255,.85);
  }

  .connect .product-content b{
    border-color:
      rgba(24,216,230,.85);
  }

  .product-content::after{
    margin-top:16px;

    color:#687985;

    font-size:8px;

    letter-spacing:.24em;
  }

  .skor .product-content::after{
    content:"PERFORMANS • ANALİZ • BÜYÜME";
  }

  .defter .product-content::after{
    content:"KAYIT • TAKİP • YÖNETİM";
  }

  .connect .product-content::after{
    content:"DESTEK • ERİŞİM • GÜVENLİK";
  }

}


/* BRAND-SPECIFIC CARD HALOS */

.skor{
  background:
    radial-gradient(
      circle at 50% 23%,
      rgba(212,176,106,.075),
      transparent 33%
    ),
    linear-gradient(
      150deg,
      rgba(12,38,58,.96),
      rgba(4,14,23,.985)
    );
}

.defter{
  background:
    radial-gradient(
      circle at 50% 23%,
      rgba(47,113,255,.085),
      transparent 33%
    ),
    linear-gradient(
      150deg,
      rgba(12,38,58,.96),
      rgba(4,14,23,.985)
    );
}

.connect{
  background:
    radial-gradient(
      circle at 50% 23%,
      rgba(25,217,231,.075),
      transparent 33%
    ),
    linear-gradient(
      150deg,
      rgba(12,38,58,.96),
      rgba(4,14,23,.985)
    );
}


/* S TEKNOLOJI CAPABILITY RAIL */

.ecosystem-capabilities{
  position:relative;
  z-index:4;

  min-height:92px;

  margin-top:23px;

  display:grid;
  grid-template-columns:
    repeat(5,1fr);

  border:
    1px solid rgba(212,176,106,.24);

  border-radius:15px;

  overflow:hidden;

  background:
    linear-gradient(
      180deg,
      rgba(4,12,19,.95),
      rgba(2,8,13,.97)
    );

  box-shadow:
    0 20px 55px rgba(0,0,0,.32);
}

.capability-item{
  min-height:92px;

  position:relative;

  display:flex;
  align-items:center;
  justify-content:center;

  gap:14px;

  color:#ced6dc;
}

.capability-item:not(:last-child)::after{
  content:"";

  width:1px;
  height:44px;

  position:absolute;
  right:0;

  background:
    linear-gradient(
      transparent,
      rgba(212,176,106,.34),
      transparent
    );
}

.capability-item img{
  width:29px;
  height:29px;
}

.capability-item span{
  font-size:10px;

  line-height:1.45;

  letter-spacing:.06em;
}


/* FOOTER TRANSITION */

.compact-footer{
  position:relative;

  background:
    linear-gradient(
      180deg,
      #02070c,
      #010407
    );
}

.compact-footer::before{
  content:"";

  position:absolute;

  left:12%;
  right:12%;
  top:0;

  height:1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(212,176,106,.35),
      transparent
    );
}


/* TABLET */

@media(max-width:900px){

  .ecosystem-capabilities{
    grid-template-columns:
      repeat(5,minmax(120px,1fr));

    overflow-x:auto;
  }

  .capability-item{
    min-width:120px;
  }

}


/* MOBILE */

@media(max-width:560px){

  .ecosystem::after{
    opacity:.44;
  }

  .ecosystem-capabilities{
    margin-top:17px;

    grid-template-columns:
      repeat(5,110px);

    border-radius:13px;
  }

  .capability-item{
    min-width:110px;

    flex-direction:column;

    gap:7px;

    text-align:center;
  }

  .capability-item img{
    width:25px;
    height:25px;
  }

}


/* ==========================================================
   S_TEKNOLOJI_HOME_V8_EXACT_BRAND_MASTHEAD
   Exact approved artwork. No crop. No reinterpretation.
   ========================================================== */


/* ----------------------------------------------------------
   HEADER
   ---------------------------------------------------------- */

.topbar{
  height:90px;

  background:
    linear-gradient(
      180deg,
      #071018,
      #03090e
    );

  border-bottom:
    1px solid rgba(212,176,106,.23);

  box-shadow:
    0 12px 34px rgba(0,0,0,.18);
}

.topbar-inner{
  height:90px;

  grid-template-columns:
    275px
    1fr
    145px;

  gap:32px;
}

.corporate-brand{
  width:255px;
  height:88px;

  display:flex;
  align-items:center;

  overflow:hidden;

  position:relative;
}

.corporate-brand img{
  width:255px;
  height:auto;

  max-height:88px;

  object-fit:contain;
  object-position:left center;

  filter:
    drop-shadow(
      0 5px 14px rgba(0,0,0,.30)
    );
}


/* Do not recolor/reconstruct the approved mark */

.corporate-brand::before,
.corporate-brand::after{
  display:none !important;
}


.main-nav{
  gap:31px;

  font-size:12px;

  color:#adb7bf;
}

.main-nav a{
  padding:
    34px
    0
    31px;
}

.main-nav a.active,
.main-nav a:hover{
  color:#efd196;
}

.main-nav a.active::after{
  bottom:23px;

  background:
    linear-gradient(
      90deg,
      #a87b3f,
      #f0d193
    );
}


/* ----------------------------------------------------------
   FULL CINEMATIC BRAND MASTHEAD
   ---------------------------------------------------------- */

.brand-masthead{
  position:relative;

  overflow:hidden;

  background:
    radial-gradient(
      ellipse at 78% 18%,
      rgba(212,176,106,.045),
      transparent 26rem
    ),
    linear-gradient(
      180deg,
      #071018,
      #02070b
    );

  border-bottom:
    1px solid rgba(212,176,106,.18);
}


/* subtle continuation into site background */

.brand-masthead::before{
  content:"";

  position:absolute;
  inset:0;

  pointer-events:none;

  background:
    linear-gradient(
      90deg,
      rgba(1,5,8,.22),
      transparent 12%,
      transparent 88%,
      rgba(1,5,8,.18)
    );

  z-index:2;
}


.brand-masthead-inner{
  width:min(
    calc(100% - 24px),
    1600px
  );

  height:clamp(
    330px,
    29vw,
    430px
  );

  margin-inline:auto;

  display:flex;
  align-items:center;
  justify-content:center;
}


.brand-masthead img{
  width:100%;
  height:100%;

  display:block;

  object-fit:contain;
  object-position:center;

  position:relative;
  z-index:1;

  /* exact artwork:
     no brightness / saturation / contrast manipulation */
  filter:none;
}


/* ----------------------------------------------------------
   COMPACT INTRO
   ---------------------------------------------------------- */

.brand-intro{
  position:relative;

  padding:
    21px
    0
    23px;

  background:
    radial-gradient(
      ellipse at 50% 0,
      rgba(43,119,157,.08),
      transparent 50%
    ),
    linear-gradient(
      180deg,
      #06131e,
      #06111b
    );

  border-bottom:
    1px solid rgba(212,176,106,.14);
}


.brand-intro-inner{
  min-height:88px;

  display:flex;

  align-items:center;
  justify-content:space-between;

  gap:42px;
}


.brand-intro-copy{
  min-width:0;
}


.brand-intro-copy h1{
  margin:
    4px
    0
    5px;

  color:#f0eee9;

  font-size:
    clamp(
      25px,
      2.2vw,
      34px
    );

  line-height:1.05;

  font-weight:300;

  letter-spacing:-.025em;
}


.brand-intro-copy p{
  margin:0;

  color:#9fadb7;

  font-size:13px;
}


.brand-intro-actions{
  flex-shrink:0;

  display:flex;

  gap:11px;
}


.brand-intro .button{
  min-height:41px;

  font-size:11px;

  padding:
    0
    19px;
}


/* ----------------------------------------------------------
   ECOSYSTEM
   ---------------------------------------------------------- */

/*
   V6 ecosystem art direction stays intact.
   Pull it closer to the masthead for one visual system.
*/

.ecosystem{
  padding-top:29px;
}


/* ----------------------------------------------------------
   DESKTOP
   ---------------------------------------------------------- */

@media(min-width:1500px){

  .brand-masthead-inner{
    height:440px;
  }

  .topbar-inner{
    grid-template-columns:
      290px
      1fr
      150px;
  }

  .corporate-brand,
  .corporate-brand img{
    width:270px;
  }

}


/* ----------------------------------------------------------
   TABLET
   ---------------------------------------------------------- */

@media(max-width:900px){

  .topbar,
  .topbar-inner{
    height:76px;
  }

  .topbar-inner{
    grid-template-columns:
      1fr
      auto;
  }

  .corporate-brand{
    width:215px;
    height:74px;
  }

  .corporate-brand img{
    width:215px;
    max-height:74px;
  }

  .main-nav{
    top:76px;
  }

  .brand-masthead-inner{
    width:100%;

    height:auto;

    padding:
      8px
      0;
  }

  .brand-masthead img{
    width:100%;
    height:auto;

    object-fit:contain;
  }

  .brand-intro-inner{
    align-items:flex-start;
    flex-direction:column;

    gap:16px;
  }

}


/* ----------------------------------------------------------
   MOBILE
   Full artwork remains uncropped.
   Readability is supplied by the intro underneath.
   ---------------------------------------------------------- */

@media(max-width:560px){

  .corporate-brand{
    width:188px;
    height:68px;
  }

  .corporate-brand img{
    width:188px;
    max-height:68px;
  }

  .brand-masthead{
    padding:
      7px
      0;
  }

  .brand-masthead-inner{
    width:100%;
  }

  .brand-masthead img{
    width:100%;
    height:auto;
  }

  .brand-intro{
    padding:
      18px
      0
      21px;
  }

  .brand-intro-copy h1{
    font-size:27px;
  }

  .brand-intro-actions{
    width:100%;

    flex-direction:column;
  }

  .brand-intro .button{
    width:100%;
  }

}


/* ==========================================================
   S_TEKNOLOJI_HOME_V9_SYMBOL_HEADER
   Navigation = symbol.
   Masthead = full brand expression.
   ========================================================== */

.topbar{
  height:76px;
}

.topbar-inner{
  height:76px;

  grid-template-columns:
    92px
    1fr
    145px;

  gap:28px;
}


/* Navigation signature */

.corporate-brand{
  width:76px;
  height:74px;

  display:flex;
  align-items:center;
  justify-content:center;

  position:relative;

  overflow:visible;
}


/* very restrained golden atmosphere */

.corporate-brand::before{
  content:"";

  display:block !important;

  position:absolute;

  width:62px;
  height:51px;

  left:7px;
  top:11px;

  border-radius:50%;

  background:
    rgba(212,176,106,.10);

  filter:blur(18px);

  pointer-events:none;
}

.corporate-brand::after{
  display:none !important;
}


.corporate-brand img{
  width:70px;
  height:70px;

  max-height:none;

  position:relative;
  z-index:2;

  object-fit:contain;
  object-position:center;

  filter:
    drop-shadow(
      0 6px 14px rgba(0,0,0,.42)
    );
}


.main-nav{
  gap:34px;
}

.main-nav a{
  padding:
    28px
    0
    25px;
}

.main-nav a.active::after{
  bottom:18px;
}


/* Wide desktop */

@media(min-width:1500px){

  .topbar-inner{
    grid-template-columns:
      100px
      1fr
      150px;
  }

  .corporate-brand{
    width:84px;
  }

  .corporate-brand img{
    width:74px;
    height:74px;
  }

}


/* Tablet */

@media(max-width:900px){

  .topbar,
  .topbar-inner{
    height:72px;
  }

  .topbar-inner{
    grid-template-columns:
      1fr
      auto;
  }

  .corporate-brand{
    width:66px;
    height:70px;
  }

  .corporate-brand img{
    width:60px;
    height:60px;
  }

  .main-nav{
    top:72px;
  }

}


/* Mobile */

@media(max-width:560px){

  .corporate-brand{
    width:58px;
    height:66px;
  }

  .corporate-brand img{
    width:54px;
    height:54px;
  }

}


/* ==========================================================
   S_TEKNOLOJI_HOME_V10_FINAL_RHYTHM
   Final landing-page hierarchy
   ========================================================== */


/* ----------------------------------------------------------
   HEADER SYMBOL
   ---------------------------------------------------------- */

.corporate-brand img{
  width:64px;
  height:64px;

  object-fit:contain;

  filter:
    drop-shadow(
      0 5px 12px rgba(0,0,0,.42)
    );
}


/* S should feel like a signature, not another hero */

.corporate-brand::before{
  width:54px;
  height:44px;

  left:11px;
  top:15px;

  opacity:.72;
}


/* ----------------------------------------------------------
   MASTHEAD
   Keep approved artwork untouched.
   ---------------------------------------------------------- */

.brand-masthead-inner{
  width:min(
    calc(100% - 28px),
    1540px
  );
}


/* ----------------------------------------------------------
   COMPACT VALUE / CTA STRIP
   Removes repeated brand messaging.
   ---------------------------------------------------------- */

.brand-intro{
  padding:
    11px
    0;

  background:
    radial-gradient(
      ellipse at 50% 0,
      rgba(44,122,162,.075),
      transparent 52%
    ),
    linear-gradient(
      180deg,
      #07141f,
      #05101a
    );

  border-bottom:
    1px solid rgba(212,176,106,.16);
}


.brand-intro-inner{
  min-height:62px;

  display:flex;

  align-items:center;
  justify-content:space-between;

  gap:28px;
}


.brand-intro-value{
  margin:0;

  color:#9eacb7;

  font-size:13px;

  letter-spacing:.015em;
}


.brand-intro-value strong{
  color:#d7dde1;

  font-weight:500;

  margin-right:5px;
}


.brand-intro-actions{
  display:flex;

  gap:10px;

  flex-shrink:0;
}


.brand-intro .button{
  min-height:38px;

  padding:
    0
    17px;

  font-size:10px;

  border-radius:8px;
}


/* ----------------------------------------------------------
   ECOSYSTEM
   Pull products closer to the brand experience.
   ---------------------------------------------------------- */

.ecosystem{
  padding-top:25px;
}


/* Heading should support products, not compete with masthead */

.ecosystem-heading h2{
  font-size:25px;

  line-height:1.18;
}


/* ----------------------------------------------------------
   PRODUCT CARDS
   Lock current proportions. Only subtle material refinement.
   ---------------------------------------------------------- */

.product-card{
  transition:
    transform .22s ease,
    border-color .22s ease,
    box-shadow .22s ease;
}


.product-card:hover{
  transform:translateY(-4px);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    0 28px 66px rgba(0,0,0,.38);
}


/* ----------------------------------------------------------
   RESPONSIVE
   ---------------------------------------------------------- */

@media(max-width:900px){

  .brand-intro-inner{
    min-height:auto;

    align-items:flex-start;

    flex-direction:column;

    gap:10px;
  }

}


@media(max-width:560px){

  .corporate-brand img{
    width:51px;
    height:51px;
  }

  .brand-intro{
    padding:
      14px
      0;
  }

  .brand-intro-actions{
    width:100%;

    flex-direction:column;
  }

  .brand-intro .button{
    width:100%;
  }

}


/* ==========================================================
   S_TEKNOLOJI_V11_EXACT_S_CROP
   Approved masthead crop.
   No artificial halo / transparency reconstruction.
   ========================================================== */

.corporate-brand{
  width:72px;
  height:72px;

  display:flex;
  align-items:center;
  justify-content:center;

  overflow:hidden;
}


/* Artwork already contains its own real light + reflection */

.corporate-brand::before,
.corporate-brand::after{
  display:none !important;
}


.corporate-brand img{
  width:auto;
  height:68px;

  max-width:none;
  max-height:68px;

  object-fit:contain;

  filter:none;

  display:block;
}


/* Desktop */

@media(min-width:1500px){

  .corporate-brand{
    width:76px;
    height:74px;
  }

  .corporate-brand img{
    height:70px;
    max-height:70px;
  }

}


/* Tablet */

@media(max-width:900px){

  .corporate-brand{
    width:64px;
    height:68px;
  }

  .corporate-brand img{
    height:60px;
    max-height:60px;
  }

}


/* Mobile */

@media(max-width:560px){

  .corporate-brand{
    width:56px;
    height:64px;
  }

  .corporate-brand img{
    height:53px;
    max-height:53px;
  }

}


/* ==========================================================
   S_TEKNOLOJI_HOME_V12_PRODUCT_INTEGRATION
   Compact ecosystem cards + visually embedded product marks
   ========================================================== */

@media (min-width:901px){

  /* slightly tighter ecosystem rhythm */

  .ecosystem{
    padding-bottom:29px;
  }

  .product-grid{
    gap:18px;
  }


  /* cards no longer dominate the page */

  .product-card{
    min-height:292px;

    padding:
      18px
      22px
      17px;

    border-radius:17px;

    isolation:isolate;

    background:
      linear-gradient(
        150deg,
        rgba(12,37,56,.94),
        rgba(4,14,22,.985)
      );

    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.025),
      0 20px 50px rgba(0,0,0,.28);
  }


  /* remove the feeling of a separate logo tile */

  .product-logo{
    width:126px;
    height:126px;
    min-height:126px;

    margin:
      0
      auto
      7px;

    position:relative;

    display:grid;
    place-items:center;

    background:none !important;

    border:none !important;

    box-shadow:none !important;

    overflow:visible;
  }


  /* light comes from the card, not from a box around the logo */

  .product-logo::before{
    width:120px;
    height:86px;

    left:50%;
    top:50%;

    transform:
      translate(-50%,-50%);

    opacity:.17;

    filter:blur(29px);
  }


  .product-logo::after{
    content:"";

    position:absolute;

    width:112px;
    height:48px;

    left:50%;
    bottom:4px;

    transform:
      translateX(-50%);

    border-radius:50%;

    pointer-events:none;

    opacity:.16;

    filter:blur(20px);
  }


  .skor .product-logo::after{
    background:#d3a650;
  }

  .defter .product-logo::after{
    background:#426fff;
  }

  .connect .product-logo::after{
    background:#16d7e5;
  }


  /*
     The supplied product masters contain very dark square
     backgrounds. LIGHTEN visually merges those dark pixels
     into the card while preserving the actual bright mark.
  */

  .product-logo img{
    width:118px;
    height:118px;

    max-width:none;

    object-fit:contain;

    position:relative;
    z-index:2;

    mix-blend-mode:lighten;

    filter:
      saturate(1.03)
      contrast(1.025)
      drop-shadow(
        0 12px 19px rgba(0,0,0,.40)
      );
  }


  /* tighter typography */

  .product-content h3{
    font-size:27px;
  }

  .product-content p{
    max-width:290px;

    min-height:38px;

    margin:
      9px
      auto
      12px;

    font-size:11px;

    line-height:1.5;
  }


  /* lighter, smaller interaction surface */

  .product-content b{
    width:72%;

    min-height:36px;

    gap:20px;

    font-size:10px;
  }


  .product-content::after{
    margin-top:13px;

    font-size:7px;

    letter-spacing:.23em;
  }


  /* final restrained hover */

  .product-card:hover{
    transform:translateY(-3px);

    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.035),
      0 25px 58px rgba(0,0,0,.35);
  }

}


/* medium desktop */

@media (min-width:901px) and (max-width:1200px){

  .product-card{
    padding:
      17px
      17px
      16px;
  }

  .product-logo{
    width:116px;
    height:116px;
    min-height:116px;
  }

  .product-logo img{
    width:108px;
    height:108px;
  }

  .product-content h3{
    font-size:24px;
  }

}


/* mobile/tablet:
   retain card readability but remove label-like logo plates */

@media (max-width:900px){

  .product-logo{
    background:none !important;
    border:none !important;
    box-shadow:none !important;
  }

  .product-logo img{
    mix-blend-mode:lighten;

    filter:
      saturate(1.03)
      drop-shadow(
        0 10px 16px rgba(0,0,0,.40)
      );
  }

}


/* ==========================================================
   S_TEKNOLOJI_CONTACT_V1
   Corporate contact center
   ========================================================== */

.contact-main{
  min-height:
    calc(100vh - 138px);

  background:
    #040a10;
}


/* HERO */

.contact-hero{
  position:relative;

  overflow:hidden;

  padding:
    58px
    0
    54px;

  background:
    radial-gradient(
      ellipse at 76% 42%,
      rgba(41,121,158,.15),
      transparent 27rem
    ),
    radial-gradient(
      ellipse at 20% 110%,
      rgba(212,176,106,.06),
      transparent 24rem
    ),
    linear-gradient(
      115deg,
      #03090f,
      #07141f 61%,
      #04101a
    );

  border-bottom:
    1px solid rgba(212,176,106,.16);
}


.contact-hero-glow{
  position:absolute;

  width:400px;
  height:400px;

  right:12%;
  top:-150px;

  border-radius:50%;

  background:
    rgba(88,215,255,.05);

  filter:blur(75px);

  pointer-events:none;
}


.contact-hero-grid{
  position:relative;
  z-index:2;

  display:grid;

  grid-template-columns:
    minmax(0,1.15fr)
    minmax(360px,.85fr);

  align-items:center;

  gap:80px;
}


.contact-hero-copy h1{
  max-width:730px;

  margin:
    18px
    0
    19px;

  font-size:
    clamp(
      43px,
      4.3vw,
      66px
    );

  line-height:1.02;

  font-weight:300;

  letter-spacing:-.04em;
}


.contact-hero-copy h1 strong{
  display:block;

  font-weight:300;

  background:
    linear-gradient(
      120deg,
      #f3d89d,
      #d4a65d 55%,
      #976d38
    );

  -webkit-background-clip:text;
  background-clip:text;

  color:transparent;
}


.contact-hero-copy>p{
  max-width:650px;

  margin:0;

  color:#a9b6c0;

  font-size:16px;
  line-height:1.7;
}


.contact-status{
  margin-top:26px;

  display:flex;
  align-items:center;

  gap:10px;

  color:#778792;

  font-size:11px;

  letter-spacing:.04em;
}


.contact-status-dot{
  width:7px;
  height:7px;

  border-radius:50%;

  background:#d4b06a;

  box-shadow:
    0 0 14px
    rgba(212,176,106,.5);
}


/* PRIMARY PANEL */

.contact-primary-panel{
  padding:24px;

  border:
    1px solid rgba(212,176,106,.21);

  border-radius:19px;

  background:
    linear-gradient(
      145deg,
      rgba(10,30,45,.90),
      rgba(3,11,18,.97)
    );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.025),
    0 28px 65px rgba(0,0,0,.28);
}


.contact-panel-label{
  display:block;

  margin:
    0
    0
    14px;

  color:#b28b4c;

  font-size:9px;

  letter-spacing:.27em;
}


.contact-primary-link{
  min-height:82px;

  display:grid;

  grid-template-columns:
    48px
    1fr
    auto;

  align-items:center;

  gap:15px;

  padding:
    13px
    15px;

  border:
    1px solid rgba(255,255,255,.08);

  border-radius:13px;

  background:
    rgba(2,9,14,.50);

  transition:
    transform .2s ease,
    border-color .2s ease,
    background .2s ease;
}


.contact-primary-link+
.contact-primary-link{
  margin-top:10px;
}


.contact-primary-link:hover{
  transform:translateY(-2px);

  border-color:
    rgba(212,176,106,.38);

  background:
    rgba(8,23,34,.72);
}


.contact-icon{
  width:44px;
  height:44px;

  display:grid;
  place-items:center;

  border-radius:12px;

  color:#e3c78c;

  background:
    rgba(212,176,106,.06);

  border:
    1px solid rgba(212,176,106,.16);
}


.contact-primary-link.whatsapp
.contact-icon{
  color:#55ded0;
}


.contact-icon svg{
  width:24px;
  height:24px;

  fill:currentColor;

  stroke:currentColor;
}


.contact-primary-copy{
  min-width:0;

  display:flex;
  flex-direction:column;

  gap:2px;
}


.contact-primary-copy small{
  color:#748490;

  font-size:8px;

  letter-spacing:.22em;
}


.contact-primary-copy strong{
  overflow:hidden;

  color:#e8ecee;

  font-size:15px;

  font-weight:550;

  text-overflow:ellipsis;

  white-space:nowrap;
}


.contact-primary-copy em{
  color:#697985;

  font-size:10px;

  font-style:normal;
}


.contact-primary-link>b{
  color:#d4b06a;

  font-size:16px;

  font-weight:400;
}


.contact-demo-link{
  min-height:42px;

  margin-top:14px;

  display:flex;
  align-items:center;
  justify-content:center;

  gap:22px;

  border:
    1px solid rgba(212,176,106,.48);

  border-radius:10px;

  color:#ddd7cb;

  font-size:11px;

  transition:
    background .2s ease;
}


.contact-demo-link:hover{
  background:
    rgba(212,176,106,.055);
}


.contact-demo-link span{
  color:#d4b06a;
}



/* SOCIAL SECTION */

.contact-social-section{
  padding:
    46px
    0
    58px;

  background:
    radial-gradient(
      ellipse at 50% 0,
      rgba(24,74,101,.13),
      transparent 33rem
    ),
    #050d15;
}


.contact-section-heading{
  display:flex;

  align-items:flex-end;
  justify-content:space-between;

  gap:30px;

  margin-bottom:24px;
}


.contact-section-heading h2{
  margin:
    8px
    0
    0;

  font-size:
    clamp(
      26px,
      2.6vw,
      37px
    );

  font-weight:300;

  letter-spacing:-.025em;
}


.contact-section-heading>p{
  max-width:300px;

  margin:0;

  color:#758590;

  font-size:11px;
  line-height:1.6;

  text-align:right;
}


.social-grid{
  display:grid;

  grid-template-columns:
    repeat(5,1fr);

  gap:12px;
}


.social-card{
  min-height:86px;

  display:grid;

  grid-template-columns:
    43px
    1fr
    auto;

  align-items:center;

  gap:12px;

  padding:
    15px;

  position:relative;

  overflow:hidden;

  border:
    1px solid rgba(75,143,177,.22);

  border-radius:14px;

  background:
    linear-gradient(
      145deg,
      rgba(9,29,44,.92),
      rgba(4,13,20,.98)
    );

  transition:
    transform .2s ease,
    border-color .2s ease,
    box-shadow .2s ease;
}


.social-card:hover{
  transform:translateY(-3px);

  border-color:
    rgba(212,176,106,.38);

  box-shadow:
    0 18px 35px rgba(0,0,0,.23);
}


.social-card::after{
  content:"";

  width:75px;
  height:150px;

  position:absolute;

  right:-55px;
  top:-35px;

  transform:rotate(25deg);

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.035),
      transparent
    );
}


.social-icon{
  width:40px;
  height:40px;

  position:relative;
  z-index:2;

  display:grid;
  place-items:center;

  border:
    1px solid rgba(212,176,106,.20);

  border-radius:11px;

  color:#d7b572;

  background:
    rgba(3,10,16,.55);
}


.social-icon svg{
  width:21px;
  height:21px;

  fill:none;

  stroke:currentColor;

  stroke-width:1.8;
}


.facebook .social-icon svg,
.linkedin .social-icon svg,
.x-social .social-icon svg{
  fill:currentColor;
  stroke:none;
}


.sahici-mark{
  font-family:
    Georgia,
    serif;

  font-size:24px;

  font-style:italic;

  color:#e2bd78;
}


.social-card>span:nth-child(2){
  min-width:0;

  position:relative;
  z-index:2;

  display:flex;
  flex-direction:column;

  gap:3px;
}


.social-card strong{
  color:#dce2e6;

  font-size:12px;

  font-weight:550;
}


.social-card small{
  overflow:hidden;

  color:#74848f;

  font-size:9px;

  text-overflow:ellipsis;

  white-space:nowrap;
}


.social-card>b{
  position:relative;
  z-index:2;

  color:#9a7742;

  font-size:12px;

  font-weight:400;
}


/* platform accents */

.instagram:hover{
  border-color:
    rgba(221,119,170,.45);
}

.facebook:hover{
  border-color:
    rgba(77,129,218,.45);
}

.linkedin:hover{
  border-color:
    rgba(78,153,207,.45);
}

.x-social:hover{
  border-color:
    rgba(205,213,219,.35);
}

.sahici:hover{
  border-color:
    rgba(212,176,106,.48);
}



/* TABLET */

@media(max-width:1000px){

  .contact-hero-grid{
    grid-template-columns:
      1fr
      360px;

    gap:40px;
  }

  .social-grid{
    grid-template-columns:
      repeat(3,1fr);
  }

}


/* MOBILE */

@media(max-width:760px){

  .contact-hero{
    padding:
      42px
      0
      36px;
  }

  .contact-hero-grid{
    grid-template-columns:1fr;

    gap:30px;
  }

  .contact-hero-copy h1{
    font-size:
      clamp(
        38px,
        11vw,
        54px
      );
  }

  .contact-primary-panel{
    padding:17px;
  }

  .contact-section-heading{
    align-items:flex-start;

    flex-direction:column;

    gap:8px;
  }

  .contact-section-heading>p{
    text-align:left;
  }

  .social-grid{
    grid-template-columns:
      repeat(2,1fr);
  }

}


@media(max-width:480px){

  .social-grid{
    grid-template-columns:1fr;
  }

  .contact-primary-link{
    grid-template-columns:
      43px
      1fr
      auto;
  }

}


/* ==========================================================
   S_TEKNOLOJI_CONTACT_V2_COMPACT_MOBILE_SUBEDEFTER
   Commercial focus: SubeDefter
   ========================================================== */


/* ----------------------------------------------------------
   DESKTOP — reduce unnecessary vertical space
   ---------------------------------------------------------- */

.contact-main{
  min-height:auto;
}

.contact-hero{
  padding:
    38px
    0
    36px;
}

.contact-hero-grid{
  gap:62px;
}

.contact-hero-copy h1{
  max-width:700px;

  margin:
    13px
    0
    14px;

  font-size:
    clamp(
      40px,
      3.8vw,
      59px
    );
}

.contact-hero-copy>p{
  max-width:610px;

  font-size:14px;

  line-height:1.62;
}

.contact-status{
  margin-top:18px;
}

.contact-primary-panel{
  padding:19px;
}

.contact-panel-label{
  margin-bottom:10px;
}

.contact-primary-link{
  min-height:70px;

  grid-template-columns:
    43px
    1fr
    auto;

  gap:13px;

  padding:
    10px
    13px;
}

.contact-icon{
  width:40px;
  height:40px;

  border-radius:10px;
}

.contact-icon svg{
  width:22px;
  height:22px;
}

.contact-primary-copy strong{
  font-size:14px;
}


/* Entire WhatsApp row is a clear touch/click target */

.contact-primary-link.whatsapp{
  cursor:pointer;

  border-color:
    rgba(62,190,177,.15);
}

.contact-primary-link.whatsapp:hover{
  border-color:
    rgba(76,225,209,.42);

  box-shadow:
    inset 0 0 28px rgba(45,202,187,.025);
}


/* ----------------------------------------------------------
   SUBEDEFTER COMMERCIAL CTA
   ---------------------------------------------------------- */

.contact-demo-link.contact-subedefter-link{
  min-height:50px;

  margin-top:11px;

  padding:
    7px
    14px;

  justify-content:space-between;

  text-align:left;

  border-color:
    rgba(65,113,255,.48);

  background:
    linear-gradient(
      100deg,
      rgba(49,93,211,.055),
      rgba(212,176,106,.025)
    );
}

.contact-demo-link.contact-subedefter-link:hover{
  border-color:
    rgba(75,127,255,.78);

  background:
    linear-gradient(
      100deg,
      rgba(49,93,211,.10),
      rgba(212,176,106,.04)
    );
}

.contact-subedefter-copy{
  display:flex;

  flex-direction:column;

  gap:2px;
}

.contact-subedefter-copy small{
  color:#647fae;

  font-size:7px;

  letter-spacing:.22em;
}

.contact-subedefter-copy strong{
  color:#e4e8ee;

  font-size:11px;

  font-weight:550;
}


/* ----------------------------------------------------------
   SOCIAL AREA — compact but still premium
   ---------------------------------------------------------- */

.contact-social-section{
  padding:
    30px
    0
    38px;
}

.contact-section-heading{
  margin-bottom:18px;
}

.contact-section-heading h2{
  font-size:
    clamp(
      24px,
      2.2vw,
      33px
    );
}

.social-card{
  min-height:76px;

  padding:12px;
}


/* ----------------------------------------------------------
   MOBILE / PWA / IN-APP BROWSER
   ---------------------------------------------------------- */

@media(max-width:760px){

  .contact-hero{
    padding:
      28px
      0
      25px;
  }

  .contact-hero-grid{
    gap:22px;
  }

  .contact-hero-copy h1{
    margin:
      12px
      0
      12px;

    font-size:
      clamp(
        34px,
        9.5vw,
        47px
      );

    line-height:1.03;
  }

  .contact-hero-copy>p{
    font-size:14px;
  }

  .contact-status{
    margin-top:15px;

    align-items:flex-start;

    font-size:10px;

    line-height:1.45;
  }

  .contact-primary-panel{
    padding:14px;

    border-radius:16px;
  }

  .contact-primary-link{
    min-height:64px;

    grid-template-columns:
      41px
      minmax(0,1fr)
      20px;

    padding:
      9px
      10px;
  }

  .contact-primary-copy strong{
    font-size:13px;
  }

  .contact-primary-copy em{
    font-size:9px;
  }

  .contact-demo-link.contact-subedefter-link{
    min-height:48px;
  }

  .contact-social-section{
    padding:
      27px
      0
      34px;
  }

  .social-grid{
    gap:9px;
  }

  .social-card{
    min-height:70px;
  }

}


/* Phone portrait */

@media(max-width:480px){

  .contact-hero-copy h1 strong{
    margin-top:3px;
  }

  .contact-primary-link{
    /* Apple/Android comfortable touch target */
    min-height:64px;
  }

  .contact-primary-copy strong{
    max-width:210px;

    overflow:hidden;

    text-overflow:ellipsis;

    white-space:nowrap;
  }

  .contact-demo-link.contact-subedefter-link{
    min-height:50px;
  }

  .social-grid{
    grid-template-columns:1fr;
  }

  .social-card{
    min-height:62px;
  }

}


/* Touch devices:
   avoid hover-only feedback */

@media(hover:none){

  .contact-primary-link:active,
  .contact-demo-link:active,
  .social-card:active{
    transform:scale(.985);
  }

}


/* Reduced motion */

@media(prefers-reduced-motion:reduce){

  .contact-primary-link,
  .contact-demo-link,
  .social-card{
    transition:none !important;
  }

}


/* ==========================================================
   S_TEKNOLOJI_CONTACT_V3_SAHICI_ICON
   Real Sahici brand asset
   ========================================================== */

.sahici .sahici-mark{
  padding:0;

  overflow:visible;

  border:none;

  background:transparent;

  font-family:inherit;
  font-size:inherit;
  font-style:normal;
}


.sahici .sahici-mark img{
  width:40px;
  height:40px;

  display:block;

  object-fit:contain;

  border-radius:10px;

  filter:
    drop-shadow(
      0 5px 10px rgba(0,0,0,.34)
    );
}


.sahici:hover .sahici-mark img{
  filter:
    drop-shadow(
      0 6px 13px rgba(212,176,106,.20)
    );
}


@media(max-width:480px){

  .sahici .sahici-mark img{
    width:38px;
    height:38px;
  }

}


/* ==========================================================
   S_TEKNOLOJI_CORPORATE_V2
   Compact corporate manifesto
   ========================================================== */


.corporate-main{
  background:#040a10;
}


/* ----------------------------------------------------------
   HERO
   ---------------------------------------------------------- */

.corporate-hero{
  position:relative;

  overflow:hidden;

  padding:
    48px
    0
    44px;

  background:
    radial-gradient(
      ellipse at 78% 43%,
      rgba(40,121,160,.14),
      transparent 30rem
    ),
    radial-gradient(
      ellipse at 12% 100%,
      rgba(212,176,106,.065),
      transparent 25rem
    ),
    linear-gradient(
      115deg,
      #03090f,
      #07141f 62%,
      #04101a
    );

  border-bottom:
    1px solid rgba(212,176,106,.16);
}


.corporate-ambient{
  position:absolute;

  width:420px;
  height:420px;

  right:8%;
  top:-170px;

  border-radius:50%;

  background:
    rgba(88,215,255,.05);

  filter:blur(78px);

  pointer-events:none;
}


.corporate-hero-grid{
  position:relative;
  z-index:2;

  display:grid;

  grid-template-columns:
    minmax(0,1.15fr)
    minmax(350px,.85fr);

  align-items:center;

  gap:72px;
}


/* COPY */

.corporate-copy h1{
  max-width:760px;

  margin:
    17px
    0
    16px;

  font-size:
    clamp(
      42px,
      4vw,
      62px
    );

  line-height:1.01;

  font-weight:300;

  letter-spacing:-.045em;
}


.corporate-copy h1 strong{
  display:block;

  font-weight:300;

  background:
    linear-gradient(
      115deg,
      #f3d99f,
      #d3a75f 57%,
      #946936
    );

  -webkit-background-clip:text;
  background-clip:text;

  color:transparent;
}


.corporate-copy>p{
  max-width:650px;

  margin:0;

  color:#a7b5bf;

  font-size:15px;
  line-height:1.7;
}


.corporate-actions{
  margin-top:24px;

  display:flex;

  gap:11px;
}


/* ----------------------------------------------------------
   MANIFESTO
   ---------------------------------------------------------- */

.corporate-manifesto{
  min-height:285px;

  padding:
    24px
    25px;

  position:relative;

  overflow:hidden;

  border:
    1px solid rgba(212,176,106,.22);

  border-radius:19px;

  background:
    radial-gradient(
      circle at 85% 15%,
      rgba(212,176,106,.08),
      transparent 12rem
    ),
    linear-gradient(
      145deg,
      rgba(10,31,46,.92),
      rgba(3,11,18,.985)
    );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.025),
    0 25px 60px rgba(0,0,0,.26);
}


.corporate-manifesto::after{
  content:"";

  position:absolute;

  width:190px;
  height:420px;

  right:-125px;
  top:-100px;

  transform:rotate(26deg);

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.035),
      transparent
    );

  pointer-events:none;
}


.manifesto-top{
  height:62px;

  display:flex;

  align-items:flex-start;
  justify-content:space-between;
}


.manifesto-label{
  color:#a98247;

  font-size:9px;

  letter-spacing:.25em;
}


.manifesto-top img{
  width:49px;
  height:57px;

  object-fit:cover;

  mix-blend-mode:screen;

  opacity:.78;
}


.manifesto-statement{
  margin:
    17px
    0
    22px;

  color:#dadfe2;

  font-size:
    clamp(
      25px,
      2.2vw,
      32px
    );

  line-height:1.1;

  font-weight:300;
}


.manifesto-statement strong{
  display:block;

  margin-top:3px;

  color:#ddb76d;

  font-weight:300;
}


.manifesto-points{
  display:flex;

  flex-direction:column;

  border-top:
    1px solid rgba(212,176,106,.13);
}


.manifesto-points span{
  min-height:36px;

  display:flex;
  align-items:center;

  gap:12px;

  color:#8d9aa4;

  font-size:10px;

  border-bottom:
    1px solid rgba(255,255,255,.045);
}


.manifesto-points i{
  width:21px;

  color:#705b3b;

  font-size:8px;

  font-style:normal;

  letter-spacing:.08em;
}



/* ----------------------------------------------------------
   PRINCIPLES
   ---------------------------------------------------------- */

.corporate-principles{
  padding:
    36px
    0
    44px;

  background:
    radial-gradient(
      ellipse at 50% 0,
      rgba(31,91,121,.12),
      transparent 31rem
    ),
    #050d15;
}


.corporate-section-heading{
  display:flex;

  align-items:flex-end;
  justify-content:space-between;

  gap:40px;

  margin-bottom:23px;
}


.corporate-section-heading h2{
  max-width:700px;

  margin:
    8px
    0
    0;

  color:#e9edef;

  font-size:
    clamp(
      25px,
      2.5vw,
      36px
    );

  line-height:1.12;

  font-weight:300;

  letter-spacing:-.025em;
}


.corporate-section-heading>p{
  max-width:330px;

  margin:0;

  color:#72828d;

  font-size:11px;

  line-height:1.65;

  text-align:right;
}


.corporate-card-grid{
  display:grid;

  grid-template-columns:
    repeat(3,1fr);

  gap:18px;
}


.corporate-card{
  min-height:218px;

  padding:
    23px
    24px
    20px;

  position:relative;

  overflow:hidden;

  display:flex;
  flex-direction:column;

  border:
    1px solid rgba(212,176,106,.18);

  border-radius:17px;

  background:
    linear-gradient(
      150deg,
      rgba(10,31,46,.88),
      rgba(4,13,21,.98)
    );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.02),
    0 18px 42px rgba(0,0,0,.19);
}


.corporate-card::after{
  content:"";

  width:120px;
  height:280px;

  position:absolute;

  right:-85px;
  top:-50px;

  transform:rotate(27deg);

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.025),
      transparent
    );
}


.corporate-number{
  position:absolute;

  right:20px;
  top:16px;

  color:#263947;

  font-size:27px;

  font-weight:300;

  letter-spacing:-.05em;
}


.corporate-card-line{
  width:39px;
  height:2px;

  margin-bottom:25px;

  background:
    linear-gradient(
      90deg,
      #e2b969,
      #876331
    );
}


.corporate-card h3{
  margin:
    0
    0
    12px;

  color:#e4e9ec;

  font-size:20px;

  font-weight:400;
}


.corporate-card p{
  max-width:360px;

  margin:0;

  color:#8fa0ac;

  font-size:12px;

  line-height:1.65;
}


.corporate-card small{
  margin-top:auto;

  padding-top:21px;

  color:#526571;

  font-size:7px;

  letter-spacing:.22em;
}



/* ----------------------------------------------------------
   TABLET
   ---------------------------------------------------------- */

@media(max-width:950px){

  .corporate-hero-grid{
    grid-template-columns:
      1fr
      330px;

    gap:40px;
  }

  .corporate-card-grid{
    gap:13px;
  }

}


/* ----------------------------------------------------------
   MOBILE / PWA
   ---------------------------------------------------------- */

@media(max-width:760px){

  .corporate-hero{
    padding:
      30px
      0
      27px;
  }

  .corporate-hero-grid{
    grid-template-columns:1fr;

    gap:22px;
  }

  .corporate-copy h1{
    margin:
      12px
      0
      13px;

    font-size:
      clamp(
        35px,
        10vw,
        48px
      );
  }

  .corporate-copy>p{
    font-size:14px;
  }

  .corporate-actions{
    margin-top:19px;
  }

  .corporate-manifesto{
    min-height:auto;

    padding:
      19px;

    border-radius:16px;
  }

  .manifesto-top{
    height:48px;
  }

  .manifesto-top img{
    width:42px;
    height:48px;
  }

  .manifesto-statement{
    margin:
      13px
      0
      17px;
  }

  .corporate-principles{
    padding:
      29px
      0
      35px;
  }

  .corporate-section-heading{
    align-items:flex-start;

    flex-direction:column;

    gap:9px;

    margin-bottom:17px;
  }

  .corporate-section-heading>p{
    text-align:left;
  }

  .corporate-card-grid{
    grid-template-columns:1fr;

    gap:11px;
  }

  .corporate-card{
    min-height:180px;
  }

}


@media(max-width:480px){

  .corporate-actions{
    flex-direction:column;
  }

  .corporate-actions .button{
    width:100%;
  }

}


/* Touch feedback */

@media(hover:none){

  .corporate-actions .button:active{
    transform:scale(.985);
  }

}


/* ==========================================================
   S_TEKNOLOJI_CORPORATE_V3_EDITORIAL
   Art-directed corporate composition
   ========================================================== */


.corporate-v3{
  overflow:hidden;

  background:#03090f;
}


/* ==========================================================
   HERO
   ========================================================== */

.cv3-hero{
  position:relative;

  overflow:hidden;

  padding:
    36px
    0
    0;

  background:
    radial-gradient(
      ellipse at 73% 38%,
      rgba(43,135,177,.15),
      transparent 30rem
    ),
    radial-gradient(
      ellipse at 17% 90%,
      rgba(212,176,106,.075),
      transparent 25rem
    ),
    linear-gradient(
      112deg,
      #02080d 0%,
      #07131d 58%,
      #04111a 100%
    );
}


.cv3-hero::after{
  content:"";

  position:absolute;

  left:0;
  right:0;
  bottom:0;

  height:1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(212,176,106,.26),
      transparent
    );
}


.cv3-hero-gridfx{
  position:absolute;

  width:520px;
  height:520px;

  right:-120px;
  top:-150px;

  opacity:.23;

  transform:rotate(-10deg);

  background:
    linear-gradient(
      rgba(88,215,255,.10) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(88,215,255,.10) 1px,
      transparent 1px
    );

  background-size:
    34px
    34px;

  mask-image:
    radial-gradient(
      circle,
      black,
      transparent 69%
    );

  pointer-events:none;
}


.cv3-hero-layout{
  min-height:420px;

  display:grid;

  grid-template-columns:
    92px
    minmax(0,1fr)
    405px;

  align-items:center;

  gap:38px;

  position:relative;
  z-index:2;
}


/* left editorial rail */

.cv3-sidecode{
  height:290px;

  position:relative;

  display:flex;

  flex-direction:column;

  justify-content:flex-start;

  gap:8px;

  padding-top:12px;

  color:#7f8d97;
}


.cv3-sidecode span{
  font-size:8px;

  letter-spacing:.28em;
}


.cv3-sidecode i{
  width:34px;
  height:1px;

  margin:
    10px
    0
    9px;

  background:
    linear-gradient(
      90deg,
      #d4b06a,
      transparent
    );
}


.cv3-sidecode small{
  color:#5e6e79;

  font-size:7px;

  line-height:1.8;

  letter-spacing:.22em;
}


/* hero copy */

.cv3-copy{
  max-width:720px;
}


.cv3-copy h1{
  margin:
    15px
    0
    15px;

  color:#efeeeb;

  font-size:
    clamp(
      42px,
      4vw,
      61px
    );

  line-height:.99;

  font-weight:300;

  letter-spacing:-.045em;
}


.cv3-copy h1 em{
  color:#e0b86c;

  font-style:normal;
  font-weight:300;
}


.cv3-copy h1 strong{
  display:block;

  color:#f0f2f3;

  font-weight:300;
}


.cv3-copy>p{
  max-width:600px;

  margin:0;

  color:#9fadb7;

  font-size:14px;

  line-height:1.7;
}


.cv3-actions{
  margin-top:22px;

  display:flex;

  gap:10px;
}


/* ==========================================================
   BRAND SCULPTURE
   ========================================================== */

.cv3-sculpture{
  min-height:340px;

  margin:0;

  position:relative;

  display:flex;

  flex-direction:column;

  align-items:center;
  justify-content:center;

  isolation:isolate;
}


.cv3-sculpture::before{
  content:"";

  width:310px;
  height:310px;

  position:absolute;

  border:
    1px solid rgba(212,176,106,.15);

  border-radius:50%;

  box-shadow:
    inset 0 0 80px rgba(88,215,255,.035);

  z-index:-1;
}


.cv3-sculpture-light{
  width:230px;
  height:230px;

  position:absolute;

  border-radius:50%;

  background:
    radial-gradient(
      circle,
      rgba(212,176,106,.12),
      transparent 68%
    );

  filter:blur(32px);

  z-index:-1;
}


.cv3-sculpture img{
  width:232px;
  height:232px;

  object-fit:contain;

  filter:
    drop-shadow(
      0 24px 36px rgba(0,0,0,.45)
    )
    drop-shadow(
      0 0 19px rgba(212,176,106,.10)
    );
}


.cv3-orbit{
  position:absolute;

  border:
    1px solid rgba(212,176,106,.19);

  border-radius:50%;

  pointer-events:none;
}


.orbit-a{
  width:350px;
  height:130px;

  transform:rotate(-17deg);
}


.orbit-b{
  width:315px;
  height:105px;

  transform:rotate(37deg);

  border-color:
    rgba(88,215,255,.10);
}


.cv3-sculpture figcaption{
  margin-top:9px;

  display:flex;

  align-items:center;

  gap:10px;

  color:#687984;

  font-size:7px;

  letter-spacing:.20em;
}


.cv3-sculpture figcaption i{
  width:20px;
  height:1px;

  background:#a07d46;
}


/* ==========================================================
   MANIFESTO RAIL
   ========================================================== */

.cv3-manifesto-rail{
  min-height:66px;

  display:flex;

  align-items:center;
  justify-content:center;

  gap:27px;

  border-top:
    1px solid rgba(255,255,255,.035);

  color:#71808a;
}


.cv3-manifesto-rail span{
  font-size:8px;

  letter-spacing:.23em;
}


.cv3-manifesto-rail b{
  width:4px;
  height:4px;

  border-radius:50%;

  background:#b88e4d;

  box-shadow:
    0 0 12px rgba(212,176,106,.20);
}


/* ==========================================================
   STORY SECTION
   ========================================================== */

.cv3-story{
  padding:
    35px
    0
    42px;

  background:
    radial-gradient(
      ellipse at 50% 0,
      rgba(35,104,139,.12),
      transparent 33rem
    ),
    #050d15;
}


.cv3-story-heading{
  display:flex;

  align-items:flex-end;
  justify-content:space-between;

  gap:50px;

  margin-bottom:23px;
}


.cv3-story-heading h2{
  max-width:700px;

  margin:
    8px
    0
    0;

  color:#e7ecef;

  font-size:
    clamp(
      27px,
      2.7vw,
      38px
    );

  line-height:1.08;

  font-weight:300;

  letter-spacing:-.03em;
}


.cv3-story-heading h2 strong{
  color:#dcb56b;

  font-weight:300;
}


.cv3-story-heading>p{
  max-width:300px;

  margin:0;

  color:#6f808b;

  font-size:10px;

  line-height:1.65;

  text-align:right;
}


/* asymmetrical composition */

.cv3-story-grid{
  display:grid;

  grid-template-columns:
    minmax(0,1.3fr)
    minmax(300px,.7fr);

  grid-template-rows:
    1fr
    1fr;

  gap:15px;
}


.cv3-story-card{
  position:relative;

  overflow:hidden;

  border:
    1px solid rgba(212,176,106,.18);

  border-radius:18px;

  background:
    linear-gradient(
      145deg,
      rgba(9,29,44,.92),
      rgba(3,11,18,.99)
    );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.02),
    0 19px 42px rgba(0,0,0,.20);
}


.cv3-story-card::before{
  content:"";

  width:160px;
  height:360px;

  position:absolute;

  right:-110px;
  top:-80px;

  transform:rotate(27deg);

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.035),
      transparent
    );
}


.cv3-story-main{
  grid-row:
    1 / 3;

  min-height:420px;

  padding:
    31px
    32px;

  display:flex;

  flex-direction:column;

  justify-content:flex-end;

  background:
    radial-gradient(
      circle at 72% 20%,
      rgba(212,176,106,.075),
      transparent 16rem
    ),
    linear-gradient(
      145deg,
      rgba(11,35,52,.96),
      rgba(3,11,18,.995)
    );
}


.cv3-security,
.cv3-ecosystem-card{
  min-height:202px;

  padding:
    25px
    25px;
}


.cv3-index{
  position:absolute;

  right:23px;
  top:17px;

  color:#263b49;

  font-size:38px;

  font-weight:300;

  letter-spacing:-.06em;
}


.cv3-card-kicker{
  margin-bottom:13px;

  color:#b28b4d;

  font-size:8px;

  letter-spacing:.25em;
}


.cv3-story-card h3{
  max-width:600px;

  margin:
    0
    0
    14px;

  color:#e3e8eb;

  font-size:
    clamp(
      22px,
      2vw,
      30px
    );

  line-height:1.13;

  font-weight:300;

  letter-spacing:-.025em;
}


.cv3-story-card p{
  max-width:590px;

  margin:0;

  color:#899aa5;

  font-size:11px;

  line-height:1.68;
}


/* process line */

.cv3-process{
  margin-top:32px;

  display:flex;

  align-items:center;

  gap:13px;
}


.cv3-process span{
  display:flex;

  align-items:center;

  gap:7px;

  color:#a5b1b8;

  font-size:9px;
}


.cv3-process span i{
  color:#795d36;

  font-size:7px;

  font-style:normal;
}


.cv3-process>b{
  flex:1;

  height:1px;

  background:
    linear-gradient(
      90deg,
      rgba(212,176,106,.08),
      rgba(212,176,106,.32),
      rgba(212,176,106,.08)
    );
}


/* security signal */

.cv3-signal{
  height:34px;

  margin-top:21px;

  display:flex;

  align-items:flex-end;

  gap:6px;
}


.cv3-signal span{
  width:4px;

  border-radius:999px;

  background:
    linear-gradient(
      180deg,
      #d7b36d,
      #6d5634
    );
}


.cv3-signal span:nth-child(1){
  height:10px;
}

.cv3-signal span:nth-child(2){
  height:18px;
}

.cv3-signal span:nth-child(3){
  height:28px;
}

.cv3-signal span:nth-child(4){
  height:21px;
}

.cv3-signal span:nth-child(5){
  height:33px;
}


/* ecosystem node diagram */

.cv3-nodes{
  margin-top:22px;

  display:flex;

  align-items:center;

  gap:8px;
}


.cv3-nodes .node{
  display:flex;

  align-items:center;

  gap:6px;

  color:#9dabb4;

  font-size:9px;

  white-space:nowrap;
}


.cv3-nodes .node i{
  width:7px;
  height:7px;

  border-radius:50%;
}


.skor-node i{
  background:#d4a64f;

  box-shadow:
    0 0 10px rgba(212,166,79,.35);
}


.defter-node i{
  background:#4c73ff;

  box-shadow:
    0 0 10px rgba(76,115,255,.35);
}


.connect-node i{
  background:#16d3df;

  box-shadow:
    0 0 10px rgba(22,211,223,.35);
}


.cv3-nodes>b{
  min-width:20px;
  flex:1;

  height:1px;

  background:
    linear-gradient(
      90deg,
      rgba(212,176,106,.10),
      rgba(88,215,255,.24),
      rgba(212,176,106,.10)
    );
}


/* ==========================================================
   SIGNATURE STRIP
   ========================================================== */

.cv3-signature{
  border-top:
    1px solid rgba(212,176,106,.15);

  background:
    linear-gradient(
      180deg,
      #03090f,
      #020609
    );
}


.cv3-signature-inner{
  min-height:66px;

  display:flex;

  align-items:center;
  justify-content:center;

  gap:20px;
}


.cv3-signature span{
  color:#566873;

  font-size:7px;

  letter-spacing:.25em;
}


.cv3-signature strong{
  color:#cfa75e;

  font-size:9px;

  font-weight:500;

  letter-spacing:.25em;
}


.cv3-signature i{
  width:22px;
  height:1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(212,176,106,.32),
      transparent
    );
}


/* ==========================================================
   TABLET
   ========================================================== */

@media(max-width:1000px){

  .cv3-hero-layout{
    grid-template-columns:
      60px
      1fr
      330px;

    gap:22px;
  }

  .cv3-sculpture img{
    width:200px;
    height:200px;
  }

  .cv3-sculpture::before{
    width:265px;
    height:265px;
  }

  .orbit-a{
    width:295px;
  }

  .orbit-b{
    width:270px;
  }

}


/* ==========================================================
   MOBILE / PWA
   ========================================================== */

@media(max-width:760px){

  .cv3-hero{
    padding-top:25px;
  }

  .cv3-hero-layout{
    min-height:auto;

    grid-template-columns:1fr;

    gap:22px;
  }

  .cv3-sidecode{
    display:none;
  }

  .cv3-copy h1{
    margin:
      12px
      0
      13px;

    font-size:
      clamp(
        35px,
        10vw,
        47px
      );
  }

  .cv3-copy>p{
    font-size:13px;
  }

  .cv3-actions{
    margin-top:18px;
  }

  .cv3-sculpture{
    min-height:280px;
  }

  .cv3-sculpture img{
    width:185px;
    height:185px;
  }

  .cv3-sculpture::before{
    width:235px;
    height:235px;
  }

  .orbit-a{
    width:260px;
    height:95px;
  }

  .orbit-b{
    width:235px;
    height:80px;
  }

  .cv3-manifesto-rail{
    min-height:58px;

    justify-content:flex-start;

    overflow-x:auto;

    gap:16px;

    scrollbar-width:none;
  }

  .cv3-manifesto-rail::-webkit-scrollbar{
    display:none;
  }

  .cv3-manifesto-rail span{
    white-space:nowrap;
  }

  .cv3-story{
    padding:
      27px
      0
      32px;
  }

  .cv3-story-heading{
    align-items:flex-start;

    flex-direction:column;

    gap:8px;

    margin-bottom:16px;
  }

  .cv3-story-heading>p{
    text-align:left;
  }

  .cv3-story-grid{
    grid-template-columns:1fr;

    grid-template-rows:auto;

    gap:10px;
  }

  .cv3-story-main{
    grid-row:auto;

    min-height:330px;

    padding:
      24px
      22px;
  }

  .cv3-security,
  .cv3-ecosystem-card{
    min-height:190px;

    padding:
      22px;
  }

  .cv3-process{
    align-items:flex-start;

    flex-direction:column;

    gap:8px;
  }

  .cv3-process>b{
    width:1px;
    height:15px;

    margin-left:9px;

    flex:none;
  }

  .cv3-signature-inner{
    min-height:58px;

    gap:11px;

    overflow:hidden;
  }

  .cv3-signature span:nth-of-type(1),
  .cv3-signature span:nth-of-type(4){
    display:none;
  }

}


/* PHONE */

@media(max-width:480px){

  .cv3-actions{
    flex-direction:column;
  }

  .cv3-actions .button{
    width:100%;
  }

  .cv3-nodes{
    align-items:flex-start;

    flex-direction:column;

    gap:7px;
  }

  .cv3-nodes>b{
    width:1px;
    min-width:0;
    height:12px;

    margin-left:3px;

    flex:none;
  }

}


/* TOUCH */

@media(hover:none){

  .cv3-actions .button:active{
    transform:scale(.985);
  }

}


/* REDUCED MOTION */

@media(prefers-reduced-motion:reduce){

  .cv3-actions .button{
    transition:none !important;
  }

}


/* ==========================================================
   S_TEKNOLOJI_SOLUTIONS_V2_EDITORIAL
   System-map hero + asymmetric product architecture
   ========================================================== */

.solutions-v2{
  overflow:hidden;

  background:#03090f;
}


/* ==========================================================
   HERO
   ========================================================== */

.sv2-hero{
  position:relative;

  overflow:hidden;

  padding:
    37px
    0
    0;

  background:
    radial-gradient(
      ellipse at 77% 43%,
      rgba(42,132,174,.16),
      transparent 30rem
    ),
    radial-gradient(
      ellipse at 16% 100%,
      rgba(212,176,106,.07),
      transparent 25rem
    ),
    linear-gradient(
      112deg,
      #02080d,
      #07141f 59%,
      #04111a
    );

  border-bottom:
    1px solid rgba(212,176,106,.16);
}


.sv2-atmosphere{
  position:absolute;

  width:520px;
  height:400px;

  right:4%;
  top:-160px;

  border-radius:50%;

  background:
    rgba(88,215,255,.055);

  filter:blur(90px);

  pointer-events:none;
}


.sv2-hero-grid{
  min-height:390px;

  display:grid;

  grid-template-columns:
    minmax(0,1.08fr)
    480px;

  align-items:center;

  gap:65px;

  position:relative;
  z-index:2;
}


/* HERO COPY */

.sv2-copy h1{
  max-width:710px;

  margin:
    14px
    0
    15px;

  color:#efefec;

  font-size:
    clamp(
      41px,
      3.9vw,
      59px
    );

  line-height:1;

  font-weight:300;

  letter-spacing:-.045em;
}


.sv2-copy h1 strong{
  display:block;

  color:#dfb86d;

  font-weight:300;
}


.sv2-copy>p{
  max-width:610px;

  margin:0;

  color:#9dabb5;

  font-size:14px;

  line-height:1.68;
}


.sv2-copy-actions{
  margin-top:22px;

  display:flex;

  gap:10px;
}


/* ==========================================================
   SYSTEM MAP
   ========================================================== */

.sv2-map{
  width:430px;
  height:330px;

  margin-inline:auto;

  position:relative;

  display:grid;
  place-items:center;

  isolation:isolate;
}


.sv2-map-grid{
  position:absolute;
  inset:0;

  opacity:.22;

  background:
    linear-gradient(
      rgba(88,215,255,.09) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(88,215,255,.09) 1px,
      transparent 1px
    );

  background-size:
    25px
    25px;

  mask-image:
    radial-gradient(
      circle,
      black,
      transparent 70%
    );

  z-index:-3;
}


.sv2-ring{
  position:absolute;

  border:
    1px solid rgba(212,176,106,.19);

  border-radius:50%;

  pointer-events:none;
}


.sv2-ring-a{
  width:350px;
  height:180px;

  transform:rotate(-14deg);
}


.sv2-ring-b{
  width:315px;
  height:145px;

  transform:rotate(39deg);

  border-color:
    rgba(88,215,255,.14);
}


.sv2-core{
  width:130px;
  height:130px;

  display:flex;

  flex-direction:column;

  align-items:center;
  justify-content:center;

  position:relative;

  border:
    1px solid rgba(212,176,106,.35);

  border-radius:50%;

  background:
    radial-gradient(
      circle,
      rgba(212,176,106,.09),
      rgba(5,16,24,.96) 65%
    );

  box-shadow:
    0 0 45px rgba(88,215,255,.05),
    inset 0 0 35px rgba(212,176,106,.035);
}


.sv2-core::after{
  content:"";

  position:absolute;

  width:6px;
  height:6px;

  top:-4px;

  border-radius:50%;

  background:#dfba70;

  box-shadow:
    0 0 14px rgba(223,186,112,.65);
}


.sv2-core small{
  color:#79613e;

  font-size:6px;

  letter-spacing:.20em;
}


.sv2-core strong{
  margin:
    4px
    0;

  color:#dbdfe2;

  font-size:17px;

  font-weight:400;

  letter-spacing:.12em;
}


.sv2-core span{
  color:#61727e;

  font-size:6px;

  letter-spacing:.19em;
}


/* map nodes */

.sv2-node{
  position:absolute;

  display:flex;

  align-items:center;

  gap:7px;

  color:#82919a;

  font-size:7px;

  letter-spacing:.18em;
}


.sv2-node i{
  width:6px;
  height:6px;

  border-radius:50%;

  background:#c69b53;

  box-shadow:
    0 0 11px rgba(212,176,106,.40);
}


.node-field{
  left:15px;
  top:83px;
}

.node-data{
  right:25px;
  top:52px;
}

.node-record{
  left:23px;
  bottom:64px;
}

.node-support{
  right:11px;
  bottom:82px;
}

.node-management{
  right:165px;
  bottom:6px;
}


/* ==========================================================
   RAIL
   ========================================================== */

.sv2-rail{
  min-height:62px;

  display:flex;

  align-items:center;
  justify-content:center;

  gap:20px;

  border-top:
    1px solid rgba(255,255,255,.035);
}


.sv2-rail span{
  color:#667782;

  font-size:7px;

  letter-spacing:.24em;
}


.sv2-rail i{
  width:24px;
  height:1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(212,176,106,.36),
      transparent
    );
}


/* ==========================================================
   SOLUTIONS
   ========================================================== */

.sv2-solutions{
  padding:
    32px
    0
    40px;

  background:
    radial-gradient(
      ellipse at 50% 0,
      rgba(31,95,126,.13),
      transparent 34rem
    ),
    #050d15;
}


.sv2-heading{
  display:flex;

  align-items:flex-end;
  justify-content:space-between;

  gap:48px;

  margin-bottom:22px;
}


.sv2-heading h2{
  max-width:720px;

  margin:
    7px
    0
    0;

  color:#e8ecee;

  font-size:
    clamp(
      27px,
      2.6vw,
      37px
    );

  line-height:1.1;

  font-weight:300;

  letter-spacing:-.03em;
}


.sv2-heading h2 strong{
  color:#ddb66b;

  font-weight:300;
}


.sv2-heading>p{
  max-width:310px;

  margin:0;

  color:#70818c;

  font-size:10px;

  line-height:1.65;

  text-align:right;
}


/* ==========================================================
   MOSAIC
   ========================================================== */

.sv2-mosaic{
  display:grid;

  grid-template-columns:
    minmax(0,1.18fr)
    minmax(300px,.82fr);

  grid-template-rows:
    1fr
    1fr
    auto;

  gap:14px;
}


.sv2-solution{
  position:relative;

  overflow:hidden;

  padding:
    25px
    26px;

  border:
    1px solid rgba(67,147,185,.25);

  border-radius:18px;

  background:
    linear-gradient(
      145deg,
      rgba(10,32,48,.94),
      rgba(3,11,18,.995)
    );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.025),
    0 18px 42px rgba(0,0,0,.21);

  transition:
    transform .2s ease,
    border-color .2s ease,
    box-shadow .2s ease;
}


.sv2-solution:hover{
  transform:translateY(-3px);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    0 24px 52px rgba(0,0,0,.29);
}


.sv2-solution::after{
  content:"";

  width:175px;
  height:390px;

  position:absolute;

  right:-125px;
  top:-90px;

  transform:rotate(26deg);

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.036),
      transparent
    );
}


.sv2-defter{
  grid-row:
    1 / 3;

  min-height:410px;

  display:flex;

  flex-direction:column;

  justify-content:flex-end;

  border-color:
    rgba(75,110,255,.33);

  background:
    radial-gradient(
      circle at 70% 18%,
      rgba(57,95,255,.095),
      transparent 17rem
    ),
    linear-gradient(
      145deg,
      rgba(10,32,52,.97),
      rgba(3,11,18,.998)
    );
}


.sv2-skor,
.sv2-connect{
  min-height:198px;
}


.sv2-skor{
  border-color:
    rgba(212,176,106,.24);
}


.sv2-connect{
  border-color:
    rgba(28,207,221,.27);
}


.sv2-no{
  position:absolute;

  right:22px;
  top:14px;

  color:#253946;

  font-size:36px;

  font-weight:300;

  letter-spacing:-.06em;
}


.sv2-kicker{
  display:block;

  margin-bottom:10px;

  color:#a98449;

  font-size:7px;

  letter-spacing:.25em;
}


.sv2-solution h3{
  margin:
    0
    0
    11px;

  color:#edf0f1;

  font-size:
    clamp(
      26px,
      2.5vw,
      36px
    );

  line-height:1;

  font-weight:650;
}


.sv2-defter h3 span{
  color:#5277ff;
}


.sv2-skor h3 span{
  color:#d5a653;
}


.sv2-connect h3 span{
  color:#1bd0dc;
}


.sv2-solution p{
  max-width:470px;

  margin:0;

  color:#8c9ca7;

  font-size:11px;

  line-height:1.65;
}


.sv2-defter .sv2-lead{
  max-width:510px;

  font-size:13px;
}


/* Defter system flow */

.sv2-defter-flow{
  max-width:520px;

  margin-top:31px;

  display:flex;

  align-items:center;

  gap:10px;
}


.sv2-defter-flow div{
  display:flex;

  align-items:center;

  gap:6px;

  color:#8e9ca6;

  font-size:9px;
}


.sv2-defter-flow div i{
  width:7px;
  height:7px;

  border-radius:50%;

  background:#5577ff;

  box-shadow:
    0 0 11px rgba(85,119,255,.45);
}


.sv2-defter-flow>b{
  flex:1;

  height:1px;

  background:
    linear-gradient(
      90deg,
      rgba(85,119,255,.10),
      rgba(85,119,255,.40),
      rgba(85,119,255,.10)
    );
}


.sv2-link{
  margin-top:24px;

  display:flex;

  align-items:center;

  gap:19px;

  color:#d6dde1;

  font-size:10px;

  font-weight:500;
}


.sv2-link span{
  color:#c49951;
}


/* SubeSkor graphic */

.sv2-bars{
  height:38px;

  margin-top:17px;

  display:flex;

  align-items:flex-end;

  gap:6px;
}


.sv2-bars i{
  width:5px;

  border-radius:999px;

  background:
    linear-gradient(
      180deg,
      #e2b35f,
      #74562f
    );
}


.sv2-bars i:nth-child(1){
  height:11px;
}

.sv2-bars i:nth-child(2){
  height:22px;
}

.sv2-bars i:nth-child(3){
  height:17px;
}

.sv2-bars i:nth-child(4){
  height:30px;
}

.sv2-bars i:nth-child(5){
  height:37px;
}


/* Connect pulse */

.sv2-pulse{
  width:60px;
  height:38px;

  margin-top:16px;

  position:relative;
}


.sv2-pulse i{
  position:absolute;

  left:0;
  top:50%;

  border:
    1px solid rgba(27,208,220,.6);

  border-left:none;

  border-radius:
    0
    999px
    999px
    0;

  transform:
    translateY(-50%);
}


.sv2-pulse i:nth-child(1){
  width:20px;
  height:16px;
}

.sv2-pulse i:nth-child(2){
  width:38px;
  height:28px;
}

.sv2-pulse i:nth-child(3){
  width:56px;
  height:38px;

  opacity:.55;
}


/* ==========================================================
   CUSTOM SOLUTIONS STRIP
   ========================================================== */

.sv2-custom{
  grid-column:
    1 / 3;

  min-height:98px;

  display:grid;

  grid-template-columns:
    1.2fr
    .8fr
    auto;

  align-items:center;

  gap:35px;

  padding:
    20px
    26px;

  position:relative;

  overflow:hidden;

  border:
    1px solid rgba(212,176,106,.20);

  border-radius:17px;

  background:
    radial-gradient(
      ellipse at 75% 50%,
      rgba(212,176,106,.055),
      transparent 18rem
    ),
    linear-gradient(
      100deg,
      rgba(8,27,40,.96),
      rgba(3,11,18,.99)
    );
}


.sv2-custom h3{
  max-width:620px;

  margin:0;

  color:#e3e8eb;

  font-size:
    clamp(
      19px,
      1.7vw,
      25px
    );

  line-height:1.18;

  font-weight:300;
}


.sv2-custom p{
  margin:0;

  color:#7e8e98;

  font-size:10px;

  line-height:1.6;
}


.sv2-custom-arrow{
  width:42px;
  height:42px;

  display:grid;
  place-items:center;

  border:
    1px solid rgba(212,176,106,.38);

  border-radius:50%;

  color:#d3a75f;
}


/* ==========================================================
   TABLET
   ========================================================== */

@media(max-width:980px){

  .sv2-hero-grid{
    grid-template-columns:
      1fr
      370px;

    gap:35px;
  }

  .sv2-map{
    width:360px;
  }

}


/* ==========================================================
   MOBILE / PWA
   ========================================================== */

@media(max-width:760px){

  .sv2-hero{
    padding-top:27px;
  }

  .sv2-hero-grid{
    min-height:auto;

    grid-template-columns:1fr;

    gap:22px;
  }

  .sv2-copy h1{
    margin:
      12px
      0
      13px;

    font-size:
      clamp(
        35px,
        10vw,
        47px
      );
  }

  .sv2-copy>p{
    font-size:13px;
  }

  .sv2-copy-actions{
    margin-top:18px;
  }

  .sv2-map{
    width:min(100%,360px);
    height:285px;
  }

  .sv2-ring-a{
    width:290px;
    height:145px;
  }

  .sv2-ring-b{
    width:260px;
    height:120px;
  }

  .sv2-core{
    width:112px;
    height:112px;
  }

  .sv2-rail{
    justify-content:flex-start;

    overflow-x:auto;

    gap:13px;

    scrollbar-width:none;
  }

  .sv2-rail::-webkit-scrollbar{
    display:none;
  }

  .sv2-rail span{
    white-space:nowrap;
  }


  .sv2-solutions{
    padding:
      27px
      0
      33px;
  }

  .sv2-heading{
    align-items:flex-start;

    flex-direction:column;

    gap:8px;

    margin-bottom:16px;
  }

  .sv2-heading>p{
    text-align:left;
  }

  .sv2-mosaic{
    grid-template-columns:1fr;

    grid-template-rows:auto;

    gap:10px;
  }

  .sv2-defter{
    grid-row:auto;

    min-height:335px;
  }

  .sv2-skor,
  .sv2-connect{
    min-height:190px;
  }

  .sv2-custom{
    grid-column:auto;

    grid-template-columns:1fr auto;

    gap:15px;
  }

  .sv2-custom p{
    grid-column:
      1 / 2;
  }

  .sv2-custom-arrow{
    grid-column:2;

    grid-row:
      1 / 3;
  }

}


/* PHONE */

@media(max-width:480px){

  .sv2-copy-actions{
    flex-direction:column;
  }

  .sv2-copy-actions .button{
    width:100%;
  }

  .sv2-defter-flow{
    align-items:flex-start;

    flex-direction:column;

    gap:7px;
  }

  .sv2-defter-flow>b{
    width:1px;
    height:12px;

    margin-left:3px;

    flex:none;
  }

  .sv2-custom{
    padding:
      18px;
  }

}


/* TOUCH */

@media(hover:none){

  .sv2-solution:active,
  .sv2-custom:active,
  .sv2-copy-actions .button:active{
    transform:scale(.985);
  }

}


/* REDUCED MOTION */

@media(prefers-reduced-motion:reduce){

  .sv2-solution,
  .sv2-custom,
  .sv2-copy-actions .button{
    transition:none !important;
  }

}


/* ==========================================================
   S_TEKNOLOJI_SOLUTIONS_V21_POLISH
   No extra logos. Visual system language only.
   ========================================================== */


/* Main product should feel intentional, not empty */

.sv2-defter{
  min-height:370px;

  justify-content:flex-start;

  padding:
    36px
    34px
    29px;

  position:relative;

  isolation:isolate;
}


/*
   Abstract digital-ledger field.
   No icon, no logo, no decorative illustration asset.
*/

.sv2-defter::before{
  content:"";

  position:absolute;

  width:42%;
  height:58%;

  right:6%;
  top:12%;

  z-index:-1;

  opacity:.43;

  background:
    radial-gradient(
      circle at 8px 8px,
      rgba(91,121,255,.58) 0 2px,
      transparent 2.5px
    ),
    repeating-linear-gradient(
      180deg,
      transparent 0 27px,
      rgba(86,116,220,.13) 27px 28px
    );

  background-size:
    38px 38px,
    100% 28px;

  mask-image:
    linear-gradient(
      90deg,
      transparent,
      black 23%,
      black 80%,
      transparent
    );

  -webkit-mask-image:
    linear-gradient(
      90deg,
      transparent,
      black 23%,
      black 80%,
      transparent
    );
}


/* thin data spine */

.sv2-defter .sv2-kicker{
  margin-top:14px;
}


.sv2-defter h3{
  margin-top:2px;
}


.sv2-defter .sv2-lead{
  max-width:440px;
}


.sv2-defter-flow{
  max-width:470px;

  margin-top:25px;
}


.sv2-defter .sv2-link{
  margin-top:auto;

  padding-top:26px;
}


/* Number belongs to composition rather than floating */

.sv2-defter .sv2-no{
  right:29px;
  top:23px;

  font-size:31px;

  opacity:.72;
}


/* Right cards slightly tighter to match main card rhythm */

.sv2-skor,
.sv2-connect{
  min-height:177px;

  padding:
    22px
    25px;
}


.sv2-skor .sv2-link,
.sv2-connect .sv2-link{
  margin-top:17px;
}


/* More restrained graphics */

.sv2-bars{
  height:31px;

  margin-top:13px;
}


.sv2-pulse{
  margin-top:12px;

  transform:scale(.88);

  transform-origin:left center;
}


/* Overall mosaic becomes a little less tall */

.sv2-mosaic{
  gap:12px;
}


/* MOBILE */

@media(max-width:760px){

  .sv2-defter{
    min-height:315px;

    padding:
      25px
      22px;
  }

  .sv2-defter::before{
    width:55%;
    height:43%;

    right:-4%;
    top:9%;

    opacity:.28;
  }

  .sv2-defter .sv2-link{
    padding-top:20px;
  }

  .sv2-skor,
  .sv2-connect{
    min-height:170px;

    padding:
      20px
      21px;
  }

}


/* PHONE */

@media(max-width:480px){

  .sv2-defter::before{
    width:70%;
    right:-18%;
  }

}


/* ==========================================================
   S_TEKNOLOJI_HOME_V13_ECOSYSTEM_AMBIENT_POLISH

   Visual rule:
   - no skyline silhouettes
   - no extra logo decoration
   - deep navy architectural field
   - restrained gold/cyan atmosphere
   ========================================================== */


/* ----------------------------------------------------------
   TRANSITION INTO ECOSYSTEM
   ---------------------------------------------------------- */

.brand-intro{
  position:relative;

  background:
    radial-gradient(
      ellipse at 78% 0%,
      rgba(49,126,160,.055),
      transparent 34%
    ),
    linear-gradient(
      180deg,
      #050d14 0%,
      #06131d 100%
    ) !important;

  border-bottom:
    1px solid rgba(212,176,106,.12);
}


/* ----------------------------------------------------------
   ECOSYSTEM MASTER BACKGROUND

   This override deliberately replaces old decorative
   skyline/background artwork.
   ---------------------------------------------------------- */

#ekosistem,
.ecosystem{
  position:relative;

  isolation:isolate;

  overflow:hidden;

  background:
    radial-gradient(
      ellipse at 50% -5%,
      rgba(54,139,179,.105) 0%,
      rgba(25,77,105,.045) 31%,
      transparent 58%
    ),
    radial-gradient(
      ellipse at 14% 68%,
      rgba(212,176,106,.040) 0%,
      transparent 31%
    ),
    radial-gradient(
      ellipse at 88% 56%,
      rgba(37,185,207,.028) 0%,
      transparent 28%
    ),
    linear-gradient(
      180deg,
      #071722 0%,
      #06131d 46%,
      #040d14 76%,
      #03090e 100%
    ) !important;
}


/* Technical texture — deliberately almost invisible */

#ekosistem::before,
.ecosystem::before{
  content:"" !important;

  display:block !important;

  position:absolute;

  inset:0;

  z-index:0;

  pointer-events:none;

  opacity:.30;

  background:
    linear-gradient(
      rgba(116,169,194,.030) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(116,169,194,.026) 1px,
      transparent 1px
    );

  background-size:
    72px 72px;

  -webkit-mask-image:
    radial-gradient(
      ellipse at 50% 42%,
      black 0%,
      rgba(0,0,0,.80) 35%,
      transparent 78%
    );

  mask-image:
    radial-gradient(
      ellipse at 50% 42%,
      black 0%,
      rgba(0,0,0,.80) 35%,
      transparent 78%
    );
}


/*
   Replaces the former city/block silhouette.
   This becomes only a restrained horizon glow.
*/

#ekosistem::after,
.ecosystem::after{
  content:"" !important;

  display:block !important;

  position:absolute;

  left:4%;
  right:4%;
  bottom:-100px;

  height:230px;

  z-index:0;

  pointer-events:none;

  opacity:1;

  transform:none !important;

  border:none !important;

  background:
    radial-gradient(
      ellipse at 50% 100%,
      rgba(212,176,106,.075) 0%,
      rgba(212,176,106,.028) 31%,
      transparent 67%
    ) !important;

  filter:blur(1px);
}


/* Everything real stays above atmosphere */

#ekosistem > *,
.ecosystem > *{
  position:relative;
  z-index:1;
}


/* ----------------------------------------------------------
   SECTION TITLE — give it air without adding decoration
   ---------------------------------------------------------- */

.ecosystem-heading{
  position:relative;
  z-index:2;
}


.ecosystem-heading::after{
  content:"";

  display:block;

  width:72px;
  height:1px;

  margin-top:14px;

  background:
    linear-gradient(
      90deg,
      rgba(212,176,106,.55),
      rgba(212,176,106,0)
    );
}


/* ----------------------------------------------------------
   PRODUCT CARDS

   Do not redesign them.
   Only integrate them into the new environmental light.
   ---------------------------------------------------------- */

.product-card{
  background:
    radial-gradient(
      ellipse at 50% -12%,
      rgba(67,136,169,.055),
      transparent 48%
    ),
    linear-gradient(
      150deg,
      rgba(8,30,45,.96),
      rgba(3,13,21,.985)
    ) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.028),
    0 22px 52px rgba(0,0,0,.25);
}


/* Product-specific light stays restrained */

.product-card.skor,
.skor.product-card{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.028),
    0 22px 52px rgba(0,0,0,.25),
    0 0 55px rgba(212,176,106,.018);
}

.product-card.defter,
.defter.product-card{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.028),
    0 22px 52px rgba(0,0,0,.25),
    0 0 55px rgba(70,105,255,.018);
}

.product-card.connect,
.connect.product-card{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.028),
    0 22px 52px rgba(0,0,0,.25),
    0 0 55px rgba(19,208,219,.018);
}


/* ----------------------------------------------------------
   CAPABILITY RAIL

   Let it float in the same atmosphere instead of sitting
   on top of a decorative city backdrop.
   ---------------------------------------------------------- */

#ekosistem [class*="capability"],
.ecosystem [class*="capability"]{
  position:relative;

  backdrop-filter:
    blur(10px);

  -webkit-backdrop-filter:
    blur(10px);
}


/* ----------------------------------------------------------
   FOOTER TRANSITION
   ---------------------------------------------------------- */

.compact-footer{
  position:relative;

  background:
    linear-gradient(
      180deg,
      #03090e 0%,
      #020609 100%
    ) !important;

  border-top:
    1px solid rgba(212,176,106,.10);
}


/* ----------------------------------------------------------
   MOBILE / PWA
   Less visual texture on small screens.
   ---------------------------------------------------------- */

@media(max-width:760px){

  #ekosistem::before,
  .ecosystem::before{
    opacity:.20;

    background-size:
      56px
      56px;
  }

  #ekosistem::after,
  .ecosystem::after{
    bottom:-75px;

    height:170px;
  }

}


/* Reduced visual load on very small phones */

@media(max-width:480px){

  #ekosistem::before,
  .ecosystem::before{
    opacity:.13;
  }

}


/* ==========================================================
   S_TEKNOLOJI_HOME_V14_FINAL_ART_DIRECTION

   Final visual lock:
   - one continuous atmosphere
   - no skyline / block residue
   - controlled cinematic depth
   - cyan technology light
   - restrained gold warmth
   - products remain the focal point
   ========================================================== */


/* ----------------------------------------------------------
   INTRO -> ECOSYSTEM TRANSITION
   ---------------------------------------------------------- */

.brand-intro{
  position:relative;

  background:
    radial-gradient(
      ellipse at 52% 120%,
      rgba(42,116,148,.055),
      transparent 50%
    ),
    linear-gradient(
      180deg,
      #040b11 0%,
      #06131c 100%
    ) !important;

  border-bottom:
    1px solid rgba(116,169,194,.055) !important;

  box-shadow:
    inset 0 -40px 80px rgba(5,18,27,.20);
}


/* ----------------------------------------------------------
   ECOSYSTEM — FINAL CINEMATIC FIELD
   ---------------------------------------------------------- */

#ekosistem,
.ecosystem{
  isolation:isolate;

  background:
    radial-gradient(
      ellipse 58% 44% at 50% 34%,
      rgba(42,125,163,.105) 0%,
      rgba(21,72,98,.050) 44%,
      transparent 73%
    ),
    radial-gradient(
      ellipse 38% 34% at 8% 70%,
      rgba(212,176,106,.035) 0%,
      transparent 72%
    ),
    radial-gradient(
      ellipse 34% 30% at 94% 61%,
      rgba(32,185,205,.025) 0%,
      transparent 72%
    ),
    linear-gradient(
      180deg,
      #071722 0%,
      #06141e 39%,
      #050f17 69%,
      #03090e 100%
    ) !important;
}


/*
   Technical texture:
   visible only subconsciously.
*/

#ekosistem::before,
.ecosystem::before{
  content:"" !important;

  position:absolute !important;

  inset:0 !important;

  display:block !important;

  z-index:0 !important;

  pointer-events:none !important;

  opacity:.19 !important;

  background:
    linear-gradient(
      rgba(117,172,198,.030) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(117,172,198,.025) 1px,
      transparent 1px
    ) !important;

  background-size:
    78px
    78px !important;

  -webkit-mask-image:
    radial-gradient(
      ellipse 72% 68% at 50% 40%,
      black 0%,
      rgba(0,0,0,.72) 47%,
      transparent 85%
    );

  mask-image:
    radial-gradient(
      ellipse 72% 68% at 50% 40%,
      black 0%,
      rgba(0,0,0,.72) 47%,
      transparent 85%
    );
}


/*
   FINAL HORIZON COVER

   This deliberately creates an opaque lower atmospheric
   layer. It covers any former skyline/block artwork while
   still allowing the capability rail/footer to sit above it.
*/

#ekosistem::after,
.ecosystem::after{
  content:"" !important;

  display:block !important;

  position:absolute !important;

  left:0 !important;
  right:0 !important;
  bottom:0 !important;

  width:auto !important;
  height:245px !important;

  z-index:0 !important;

  pointer-events:none !important;

  opacity:1 !important;

  transform:none !important;

  border:none !important;

  background:
    radial-gradient(
      ellipse 45% 55% at 50% 110%,
      rgba(212,176,106,.060) 0%,
      rgba(212,176,106,.018) 38%,
      transparent 67%
    ),
    linear-gradient(
      180deg,
      rgba(3,9,14,0) 0%,
      rgba(3,9,14,.70) 34%,
      #03090e 72%,
      #03090e 100%
    ) !important;

  filter:none !important;
}


/* Real page content always stays above atmosphere */

#ekosistem > *,
.ecosystem > *{
  position:relative;
  z-index:2;
}


/* ----------------------------------------------------------
   REMOVE ANY LEGACY CITY / SKYLINE DECORATION IF PRESENT
   ---------------------------------------------------------- */

#ekosistem [class*="skyline"],
#ekosistem [class*="cityscape"],
#ekosistem [class*="city-silhouette"],
#ekosistem [class*="cityline"],
.ecosystem [class*="skyline"],
.ecosystem [class*="cityscape"],
.ecosystem [class*="city-silhouette"],
.ecosystem [class*="cityline"]{
  display:none !important;

  background:none !important;

  box-shadow:none !important;

  opacity:0 !important;
}


/* ----------------------------------------------------------
   PRODUCT COMPOSITION — ONE SHARED LIGHT FIELD
   ---------------------------------------------------------- */

#ekosistem .product-grid,
.ecosystem .product-grid{
  position:relative;

  isolation:isolate;
}


/*
   Cool technological volume.
   It does not belong to one card:
   it belongs to the entire product family.
*/

#ekosistem .product-grid::before,
.ecosystem .product-grid::before{
  content:"";

  position:absolute;

  width:76%;
  height:78%;

  left:12%;
  top:2%;

  z-index:0;

  pointer-events:none;

  border-radius:50%;

  background:
    radial-gradient(
      ellipse,
      rgba(48,139,178,.085) 0%,
      rgba(28,94,128,.035) 46%,
      transparent 74%
    );

  filter:blur(24px);
}


/*
   Warm floor light gives the cards a common visual base.
*/

#ekosistem .product-grid::after,
.ecosystem .product-grid::after{
  content:"";

  position:absolute;

  width:72%;
  height:58px;

  left:14%;
  bottom:-19px;

  z-index:0;

  pointer-events:none;

  border-radius:50%;

  background:
    radial-gradient(
      ellipse,
      rgba(212,176,106,.065),
      transparent 69%
    );

  filter:blur(20px);
}


#ekosistem .product-grid > *,
.ecosystem .product-grid > *{
  position:relative;
  z-index:2;
}


/* ----------------------------------------------------------
   PRODUCT CARDS — FINAL MATERIAL BALANCE
   ---------------------------------------------------------- */

.product-card{
  background:
    radial-gradient(
      ellipse at 50% -5%,
      rgba(62,139,172,.050),
      transparent 48%
    ),
    linear-gradient(
      148deg,
      rgba(8,29,43,.955),
      rgba(3,13,21,.988)
    ) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.030),
    inset 0 -1px 0 rgba(0,0,0,.25),
    0 22px 52px rgba(0,0,0,.27);
}


/* Keep hover premium and restrained */

@media(hover:hover){

  .product-card:hover{
    transform:translateY(-3px);

    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.038),
      inset 0 -1px 0 rgba(0,0,0,.25),
      0 27px 60px rgba(0,0,0,.32);
  }

}


/* ----------------------------------------------------------
   ECOSYSTEM HEADING
   ---------------------------------------------------------- */

.ecosystem-heading{
  position:relative;
  z-index:3;
}


.ecosystem-heading::after{
  width:64px !important;

  opacity:.78;
}


/* ----------------------------------------------------------
   CAPABILITY RAIL — INTEGRATE INTO THE ENVIRONMENT
   ---------------------------------------------------------- */

#ekosistem .capability-rail,
#ekosistem .capabilities-rail,
.ecosystem .capability-rail,
.ecosystem .capabilities-rail{
  position:relative;

  z-index:3;

  border-color:
    rgba(212,176,106,.18) !important;

  background:
    linear-gradient(
      180deg,
      rgba(4,12,18,.88),
      rgba(2,8,12,.94)
    ) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.020),
    0 18px 44px rgba(0,0,0,.22);

  backdrop-filter:
    blur(12px);

  -webkit-backdrop-filter:
    blur(12px);
}


/*
   Kill decorative pseudo-backgrounds on the rail itself.
   Actual SVG icons remain untouched.
*/

#ekosistem .capability-rail::before,
#ekosistem .capability-rail::after,
#ekosistem .capabilities-rail::before,
#ekosistem .capabilities-rail::after,
.ecosystem .capability-rail::before,
.ecosystem .capability-rail::after,
.ecosystem .capabilities-rail::before,
.ecosystem .capabilities-rail::after{
  content:none !important;

  display:none !important;
}


/* ----------------------------------------------------------
   FOOTER — SAME VISUAL WORLD
   ---------------------------------------------------------- */

.compact-footer{
  position:relative;

  z-index:3;

  background:
    linear-gradient(
      180deg,
      #03090e 0%,
      #02070a 55%,
      #020609 100%
    ) !important;

  border-top:
    1px solid rgba(212,176,106,.095) !important;

  box-shadow:
    inset 0 14px 36px rgba(0,0,0,.12);
}


/* ----------------------------------------------------------
   MOBILE / PWA
   ---------------------------------------------------------- */

@media(max-width:760px){

  #ekosistem::before,
  .ecosystem::before{
    opacity:.13 !important;

    background-size:
      58px
      58px !important;
  }

  #ekosistem::after,
  .ecosystem::after{
    height:205px !important;
  }

  #ekosistem .product-grid::before,
  .ecosystem .product-grid::before{
    width:110%;
    height:82%;

    left:-5%;

    opacity:.70;
  }

  #ekosistem .product-grid::after,
  .ecosystem .product-grid::after{
    width:90%;
    left:5%;
  }

}


/* ----------------------------------------------------------
   SMALL PHONE
   ---------------------------------------------------------- */

@media(max-width:480px){

  #ekosistem::before,
  .ecosystem::before{
    opacity:.09 !important;
  }

  #ekosistem::after,
  .ecosystem::after{
    height:175px !important;
  }

}


/* ----------------------------------------------------------
   REDUCED MOTION
   ---------------------------------------------------------- */

@media(prefers-reduced-motion:reduce){

  .product-card{
    transition:none !important;
  }

}


/* ==========================================================
   S_TEKNOLOJI_MOBILE_NAV_POLISH_V2

   Premium mobile navigation final:
   - compact floating drawer
   - refined active state
   - CSS chevrons
   - restrained motion
   - hamburger -> close
   - desktop untouched
   ========================================================== */

@media(max-width:900px){

  body.nav-open{
    overflow:hidden;
    overscroll-behavior:none;
  }


  /* --------------------------------------------------------
     FLOATING DRAWER
     -------------------------------------------------------- */

  .main-nav{
    display:flex;

    position:fixed;

    top:78px;
    right:14px;
    left:auto;

    width:
      min(
        356px,
        calc(100vw - 28px)
      );

    max-height:
      calc(100dvh - 94px);

    margin:0;
    padding:7px;

    flex-direction:column;
    align-items:stretch;
    gap:0;

    overflow-y:auto;

    background:
      radial-gradient(
        circle at 88% 0%,
        rgba(212,176,106,.055),
        transparent 34%
      ),
      linear-gradient(
        160deg,
        rgba(8,18,27,.992),
        rgba(3,10,15,.995)
      );

    border:
      1px solid rgba(212,176,106,.18);

    border-radius:18px;

    box-shadow:
      0 28px 68px rgba(0,0,0,.52),
      0 8px 24px rgba(0,0,0,.28),
      inset 0 1px 0 rgba(255,255,255,.032);

    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);

    visibility:hidden;
    opacity:0;

    pointer-events:none;

    transform:
      translate3d(0,-8px,0)
      scale(.985);

    transform-origin:top right;

    transition:
      opacity .18s ease,
      transform .20s ease,
      visibility .20s;

    z-index:120;
  }


  /* restrained gold signature */

  .main-nav::before{
    content:"";

    position:absolute;

    top:0;
    left:20px;
    right:20px;

    height:1px;

    background:
      linear-gradient(
        90deg,
        transparent,
        rgba(212,176,106,.42),
        transparent
      );

    pointer-events:none;
  }


  body.nav-open .main-nav{
    visibility:visible;
    opacity:1;

    pointer-events:auto;

    transform:
      translate3d(0,0,0)
      scale(1);
  }


  /* --------------------------------------------------------
     MENU ROWS
     -------------------------------------------------------- */

  .main-nav a{
    width:100%;
    min-height:49px;

    padding:
      0
      14px;

    display:flex;
    align-items:center;
    justify-content:space-between;

    position:relative;

    color:
      rgba(222,229,235,.76);

    font-size:14.5px;
    font-weight:500;

    line-height:1;

    letter-spacing:.014em;

    border-radius:11px;

    opacity:0;

    transform:
      translateX(7px);

    transition:
      color .16s ease,
      background .16s ease,
      box-shadow .16s ease,
      opacity .18s ease,
      transform .18s ease;
  }


  body.nav-open .main-nav a{
    opacity:1;
    transform:translateX(0);
  }


  body.nav-open .main-nav a:nth-child(1){
    transition-delay:.025s;
  }

  body.nav-open .main-nav a:nth-child(2){
    transition-delay:.045s;
  }

  body.nav-open .main-nav a:nth-child(3){
    transition-delay:.065s;
  }

  body.nav-open .main-nav a:nth-child(4){
    transition-delay:.085s;
  }

  body.nav-open .main-nav a:nth-child(5){
    transition-delay:.105s;
  }


  .main-nav a:not(:last-child){
    border-bottom:
      1px solid rgba(255,255,255,.045);
  }


  /* CSS-drawn navigation arrow */

  .main-nav a::after,
  .main-nav a.active::after{
    content:"";

    display:block;

    position:static;

    width:7px;
    height:7px;

    margin:
      0
      3px
      0
      14px;

    background:none;

    border-top:
      1px solid rgba(212,176,106,.48);

    border-right:
      1px solid rgba(212,176,106,.48);

    transform:rotate(45deg);

    opacity:1;

    flex:0 0 auto;
  }


  /* --------------------------------------------------------
     ACTIVE ITEM
     -------------------------------------------------------- */

  .main-nav a.active{
    padding-left:30px;

    color:#e3c78c;

    font-weight:600;

    background:
      linear-gradient(
        90deg,
        rgba(212,176,106,.070),
        rgba(212,176,106,.016)
      );

    box-shadow:
      inset 0 0 0 1px
      rgba(212,176,106,.075);
  }


  .main-nav a.active::before{
    content:"";

    position:absolute;

    left:14px;
    top:50%;

    width:5px;
    height:5px;

    border-radius:999px;

    background:#d4b06a;

    box-shadow:
      0 0 0 4px rgba(212,176,106,.075),
      0 0 13px rgba(212,176,106,.25);

    transform:translateY(-50%);
  }


  .main-nav a.active::after{
    border-color:#d4b06a;
  }


  /* --------------------------------------------------------
     MENU BUTTON
     -------------------------------------------------------- */

  .nav-toggle{
    position:relative;

    z-index:130;

    width:44px;
    height:44px;

    padding:11px;

    gap:5px;

    background:
      rgba(4,11,16,.62);

    border:
      1px solid rgba(212,176,106,.32);

    border-radius:12px;

    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.025);

    transition:
      border-color .18s ease,
      background .18s ease,
      box-shadow .18s ease;
  }


  .nav-toggle span{
    display:block;

    width:100%;
    height:1px;

    margin:0;

    background:
      rgba(235,240,244,.90);

    transform-origin:center;

    transition:
      transform .20s ease,
      opacity .14s ease;
  }


  body.nav-open .nav-toggle{
    border-color:
      rgba(212,176,106,.54);

    background:
      rgba(212,176,106,.048);

    box-shadow:
      0 8px 22px rgba(0,0,0,.22),
      inset 0 0 0 1px rgba(212,176,106,.025);
  }


  body.nav-open .nav-toggle span:nth-child(1){
    transform:
      translateY(6px)
      rotate(45deg);
  }

  body.nav-open .nav-toggle span:nth-child(2){
    opacity:0;
  }

  body.nav-open .nav-toggle span:nth-child(3){
    transform:
      translateY(-6px)
      rotate(-45deg);
  }

}


/* ----------------------------------------------------------
   SMALL PHONE
   ---------------------------------------------------------- */

@media(max-width:480px){

  .main-nav{
    top:78px;
    right:12px;

    width:
      min(
        356px,
        calc(100vw - 24px)
      );

    padding:6px;

    border-radius:17px;
  }


  .main-nav a{
    min-height:48px;

    padding:
      0
      13px;

    font-size:14.5px;
  }


  .main-nav a.active{
    padding-left:29px;
  }

}


/* ----------------------------------------------------------
   REDUCED MOTION
   ---------------------------------------------------------- */

@media(max-width:900px) and (prefers-reduced-motion:reduce){

  .main-nav,
  .main-nav a,
  .nav-toggle,
  .nav-toggle span{
    transition:none !important;
  }

}