:root {
  --c-gary-bg: var(--c-gray);
  --c-navy-bg: var(--c-navy);
  --c-gary-tx: var(--c-gray);
  --c-navy-tx: var(--c-navy);
  --c-navy-ln: var(--c-navy);
  --c-gray-ln: var(--c-gray);
  --c-orange-ln: var(--c-orange);

  --c-section-bg: rgba(227, 224, 224, 1);
  --c-section-br: var(--c-navy);

  --c-prd-br: var(--c-card-bg);

  --c-header-br1: rgba(7,15,36,0.8);
  --c-header-br2: rgba(7,15,36,0.7);

  --acc-dot-size: 18px;
  --acc-rail-w: 2px;
}

/* =========================
   Dark mode
   ========================= */
body.dark {
  --c-gary-bg: var(--c-navy);
  --c-navy-bg: var(--c-gray);
  --c-gary-tx: var(--c-navy);
  --c-navy-tx: var(--c-gray);
  --c-navy-ln: var(--c-gray);
  --c-gray-ln: var(--c-navy);
  --c-orange-ln: var(--c-orange);

  --c-section-bg: rgba(7,15,36,1);
  --c-section-br: rgba(255,255,255,0.2);

  --c-prd-bg: #cbc4c414;

  --c-header-br1: rgba(7,15,36,0.8);
  --c-header-br2: rgba(7,15,36,0.7);

  --acc-dot-size: 18px;
  --acc-rail-w: 2px;
}

/* =========================
   Base / Scroll serbest
   ========================= */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: auto; overflow: auto; }

body{
  font-family: Arial, Helvetica, sans-serif;
  background: var(--c-gary-bg-bg);
  color: var(--c-gary-bg);
  margin: 0;
  overflow: auto;
  scroll-behavior: smooth;
}

body.dark .section-4{
  position: relative;
}

/* ÜST ÇİZGİ */
body.dark .section-4::before{
  content:"";
  position:absolute;
  top:00;
  left:50%;
  transform:translateX(-50%);
  width:80%;
  height:2px;
  background:#9aa0a6; /* modern gri */
  opacity:.6;
  z-index:5;
}

/* ALT ÇİZGİ */
body.dark .section-4::after{
  content:"";
  position:absolute;
  bottom:0;
  left:50%;
  transform:translateX(-50%);
  width:80%;
  height:2px;
  background:#9aa0a6;
  opacity:.6;
}

/* Sayfa ana akış */
.page{
  width: 100%;
}

.site-header.top-header{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background: transparent !important;
  box-shadow: none !important;
  z-index: 9999;
}

/* Header üstündeki yazılar görünür olsun (hero üstünde) */
.site-header.top-header .nav a{
  color: var(--c-gray);
}

/* İkon/hover arka planı çok koyu olmasın */
.site-header.top-header .header-actions button:hover{
  background: rgba(255,255,255,0.10);
}

.site-header.top-header .theme-icon{
  color: var(--c-gray);
}

.hamburger span{
  background: var(--c-gray);
}

.site-header.top-header .nav a:hover{
  color: var(--c-orange) !important;
}

/* Bölümler alt alta */
.section-1,
.section-3,
.section-4{
  width: 100%;
  min-height: 100vh;     /* istersen kaldırabilirsin */
  overflow: visible;
  position: relative;
}

/* =========================
   Section 1 (Hero)
   ========================= */
.section-1 {
  padding-top: var(--header-height);
  overflow: hidden;

  background-image:
    linear-gradient(var(--c-header-br1), var(--c-header-br2)),
    url("../../../assets/img/imgs/hero.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* sağ alttaki kalın çember */
.section-1::after{
  content:"";
  position:absolute;
  right: -20vh;
  bottom: -20vh;
  width: 50vh;
  height: 50vh;
  border-radius: 50%;
  border: 10px solid var(--c-orange);
  pointer-events: none;
  opacity: 0.95;
}

.hero-shell {
  min-height: calc(100vh - var(--header-height));
  display: flex;
  align-items: flex-start;
}

.hero-copy-block {
  width: 100%;
  padding-top: 10vh;
  padding-left: 28px;
  padding-right: 28px;
}

.hero-copy {
  max-width: 90%;
}

.hero-copy h1 {
  margin: 50px 0 28px 0;
  color: var(--c-gray);
  font-size: clamp(34px, 5vw, 78px);
  line-height: 0.96;
  font-weight: 800;
  letter-spacing: -0.5px;
  text-transform: none;
}

.hero-copy p {
  margin: 0 0 18px 0;
  max-width: 640px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--c-gray);
}

/* =========================
   Section 2
   ========================= */
.section-2.section-2b{
  background: var(--c-gary-bg);
  padding: clamp(56px, 20vh, 300px) 50px clamp(56px, 10vh, 120px) 50px;
  overflow: hidden;
}

/* Genel genişlik */
.s2b-wrap{
  width: min(1320px, calc(100% - 56px));
  margin: 0 auto;
}

/* Üst başlık alanı: solda büyük başlık, sağda açıklama */
.s2b-head{
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  align-items: start;
  row-gap: 18px;
  margin-bottom: 15vh;
  align-items: stretch; 
}

/* Başlık */
.s2b-title{
  position: relative;
  display: inline-block;
  margin: 0;
}

/* Turuncu blok (soldaki kare) */
.s2b-title-mark{
  position: absolute;
  left: -20px;   /* sola taşır */
  top: -12px;    /* yukarı taşır */
  width: 110px;
  height: 110px;
  background: var(--c-orange);
  z-index: 0;
}

/* İki satır başlık */
.s2b-title-lines{
  display: grid;
  gap: 6px;
  padding-top: 6px;
  position: relative;
  z-index: 2;
}

.s2b-title-row{
  display: block;
  color: var(--c-navy-tx);
  font-weight: 900;
  letter-spacing: -0.8px;
  line-height: 0.98;
  text-transform: uppercase;
  font-size: clamp(34px, 3vw, 72px);
}

/* Sağdaki açıklama */
.s2b-desc{
  margin: 10px 0 0 0;
  max-width: 56ch;
  color: var(--c-navy-tx);
  font-size: clamp(14px, 1.25vw, 18px);
  line-height: 1.55;
  align-self: end;
}

/* Kartlar */
.s2b-cards{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(14px, 2.2vw, 22px);
  align-items: stretch;
}

.s2b-card{
  background: transparent;
  border: 1.8px solid var(--c-navy-ln);
  border-radius: 22px;
  padding: clamp(18px, 2.2vw, 26px);
  min-height: 160px;

  display: grid;
  align-content: start;
}

.s2b-card-title{
  margin: 0;
  color: var(--c-navy-tx);
  font-weight: 800;
  letter-spacing: -0.2px;
  line-height: 1.18;
  font-size: clamp(18px, 1.55vw, 24px);
}

/* Hover (çok hafif) */
.s2b-card:hover{
  border: 1.8px solid var(--c-navy-ln);
  transform: translateY(-2px);
  transition: transform .18s ease;
}

/* =========================
   Section 3 (Accordion + image)
   ========================= */
.section-3{
  background: var(--c-gary-bg);
  overflow: hidden;
  padding-top: 60px; /* header fixed olduğu için boşluk */
}

.s3-shell2{
  min-height: 100vh;
  display: grid;
  grid-template-columns: 55% 40px 1fr;
  grid-template-areas: "acc div media";
  align-items: center;
  gap: 0;
  padding: 0 56px;
}

.s3-accordion { grid-area: acc; }
.s3-divider   { grid-area: div; }
.s3-media2    { grid-area: media; }

.s3-media2{
  display:flex;
  align-items:center;
  justify-content:flex-start;
}

.s3-media-img{
  width: min(560px, 44vw);
  height: min(560px, 62vh);
  object-fit: cover;
  object-position: center;
  display: block;
  border-radius: 2px;

  opacity: 1;
  transform: scale(1);
  transition: opacity .35s ease, transform .35s ease;
}

.s3-media-img.is-changing{
  opacity: 0;
  transform: scale(.96);
}

.s3-divider{
  justify-self: center;
  width: 3px;
  height: min(600px, 63vh);
  background: var(--c-orange-ln);
  border-radius: 999px;
}

.s3-accordion{
  display: grid;
  max-height: min(600px, 63vh);
}

/* accordion item */
.acc-item{
  position: relative;
  padding-left: 35px;
  padding-bottom: 10px;
  padding-top: 0px;
}

/* Container sol rail */
.acc-item::before{
  content:"";
  position:absolute;
  left: 10px;
  top: -10px;
  height: 100%;
  width: 2px;
  background: var(--c-navy-ln);
  opacity: 0.7;
}

/* Head row */
.acc-head{
  width: 100%;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;

  display: flex;
  align-items: center;
  gap: 14px;
}

/* Title */
.acc-title{
  color: var(--c-navy-tx);
  font-size: clamp(22px, 2.8vw, 50px);
  font-weight: 500;
  line-height: 1.1;
  transition: color .18s ease, font-size .18s ease, font-weight .18s ease;
  text-align: left;
  opacity: 0.7;
}

/* + / - icon (sağda) */
.acc-icon{
  margin-left: auto;
  font-size: 26px;
  font-weight: 600;
  color: var(--c-navy-tx);
  opacity: 0.7;
  transition: color .2s ease, transform .2s ease;
}
.acc-item:not(.is-open) .acc-icon::before{ content:"+"; }
.acc-item.is-open .acc-icon{ color: var(--c-orange); }
.acc-item.is-open .acc-icon::before{ content:"−"; }

/* Body */

.acc-body{
  margin-top: 14px;
  max-width: 520px;
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  visibility: hidden;
  transition:
    grid-template-rows .42s ease,
    opacity .28s ease,
    visibility 0s linear .42s,
    margin-top .42s ease;
}

.acc-body > *{
  overflow: hidden;
}

.acc-body p{
  margin: 0;
  color: var(--c-navy-tx);
  font-weight: 650;
  line-height: 1.55;
  font-size: clamp(10px, 1.2vw, 50px);
  transform: translateY(-8px);
  transition: transform .42s ease;
}

.acc-item.is-open .acc-body{
  grid-template-rows: 1fr;
  opacity: 1;
  visibility: visible;
  margin-top: 14px;
  transition:
    grid-template-rows .42s ease,
    opacity .3s ease,
    visibility 0s linear 0s,
    margin-top .42s ease;
}

.acc-item.is-open .acc-body p{
  transform: translateY(0);
}

.acc-item:not(.is-open) .acc-body{
  margin-top: 0;
}

/* Floor line */
.acc-floor{
  display: block;
  height: 2px;
  width: 80px;
  background: var(--c-navy-ln);
  opacity: 0.7;
  margin-top: 10px;
  margin-left: -25px;
}

/* Open state coloring */
.acc-item.is-open::before{ background: var(--c-orange); }
.acc-item.is-open .acc-floor{ background: var(--c-orange); }
.acc-item.is-open .acc-title{
  color: var(--c-orange);
  font-size: clamp(22px, 3vw, 50px);
  font-weight: 600;
  opacity: 1;
}

/* =========================
   Section 4 (Products + Footer)
   ========================= */
.section-4{
  display: flex;
  flex-direction: column;
  background: var(--c-navy);
  min-height: 100vh;
  overflow: visible;
}

.products{
  background: var(--c-navy);
  padding: 64px 0 90px;
  position: relative;
}

.prod-container{
  width: min(1280px, calc(100% - 48px));
  margin: 0 auto;
  padding: 0 24px;
}

.prod-title{
  font-size: clamp(34px, 4vw, 56px);
  font-weight: 800;
  color: var(--c-gray);
  margin: 0;
  text-align: left;
}

.prod-divider{
  width: 60%;
  height: 2px;
  margin: 5px 2px 10vh;
  background: var(--c-orange);
  border-radius: 2px;
  opacity: 0.9;
}

.prod-carousel{ position: relative; margin-top: 26px; }

.prod-viewport{
  overflow: hidden;
  width: 100%;
  padding: 18px 22px 34px;
}

.prod-track{
  display: flex;
  gap: 42px;
  transition: transform .35s ease;
  will-change: transform;
}

.prod-card{
  flex: 0 0 max(250px, calc((100% - 84px) / 3));
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;

  background: var(--c-prd-bg);
  border: 2px solid #cbc4c414;
  border-radius: 26px;
  padding: 22px 22px 18px;

  transform: translateY(0);
  transition: transform .18s ease, box-shadow .18s ease;
}

.prod-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 15px 15px rgba(7,1,34,0.26);
}

.prod-media{
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 18px;
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  margin-bottom: 18px;
}

.prod-media::before{
  content:"";
  position:absolute;
  inset: 16px 34px 10px 34px;
  background: var(--c-orange);
  transform: skewX(-14deg);
  border-radius: 10px;
  z-index: 0;
  opacity: .95;
}

.prod-img{
  position: relative;
  z-index: 1;
  width: 88%;
  height: 88%;
  object-fit: contain;
  filter: drop-shadow(0 10px 10px rgba(0, 0, 0, 0.35));
}

.prod-card-title{
  font-size: 34px;
  line-height: 1.06;
  font-weight: 900;
  color: var(--c-gray);
  margin: 0 0 10px;
}

.prod-card-desc{
  color: var(--c-gray);
  font-size: 16px;
  line-height: 1.55;
  margin: 0 0 18px;
  max-width: 34ch;
}

.prod-link{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--c-orange);
  font-weight: 800;
  letter-spacing: 0.02em;
  margin-top: auto;
}

.prod-link-arrow{ font-size: 20px; transform: translateY(1px); }

.prod-nav{
  position: absolute;
  top: 48%;
  transform: translateY(-50%);
  z-index: 10;

  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid #cbc4c414;
  background: #cbc4c414;
  color: var(--c-gray);

  display: grid;
  place-items: center;
  font-size: 26px;
  cursor: pointer;
}

.prod-nav--left{ left: 0; }
.prod-nav--right{ right: 0; }

.prod-nav.is-disabled{ opacity: .25; pointer-events: none; }

/* Footer: en altta kalsın */
.section-4 .site-footer{
  margin-top: auto;
  width: 100%;
}

/* =========================
   Responsive
   ========================= */

@media (max-width: 1024px){
  .s2b-head{
    grid-template-columns: 1fr;
    gap: 30px;
    margin-bottom: 40px;
  }

  .s2b-desc{
    margin-top: 0;
    max-width: 70ch;
  }

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

@media (max-width: 980px){
  .prod-nav--left{ left: 6px; }
  .prod-nav--right{ right: 6px; }
  .prod-card{ flex-basis: calc((100% - 42px) / 2); }

  .s3-shell2{
    min-height: 100vh;
    place-content: center;
    padding: 0px;
    grid-template-columns: 1fr;
    grid-template-rows: auto 12px auto;
    grid-template-areas: "media" "div" "acc";
    align-items: end;
    justify-items: center;
    gap: 0;
  }

  .section-3{
    padding-top: 0px;
  }

  .s3-divider{ display: none; }

  .s3-media2{
    justify-content: center;
    height: 45vh;
  }

  .s3-media-img{
    width: 70vw;
    height: 40vh;
  }

  .s3-accordion{
    width: 85%;
    max-height: none;
  }

  .acc-body p{
    font-size: 13px;
  }

  .products{
    padding: 30px 0 10px;
  }

  .prod-divider{
    margin: 5px 2px 10px;
  }

  .prod-container{
    margin: 0 auto;
    padding: 0;
  }
}

@media (max-width: 900px) {
  .hero-copy-block { padding: 4vh 16px 8px; }

  .hero-copy h1 {
    font-size: clamp(22px, 8vw, 60px);
    font-weight: 900;
    line-height: 1;
  }

  .hero-copy p {
    font-size: clamp(2px, 2vw, 40px);
    max-width: 100%;
  }

  .s2-shell {
    grid-template-columns: 30px 18px 1fr;
  }

  .section-2.section-2b{
    padding: 50px 20px 30px 20px;
  }

  .s2b-head{
    margin-bottom: 40px;
  }

  .site-header.top-header .nav{
    color: var(--c-navy);
  }

  .site-header.top-header .nav a{
    color: var(--c-navy);
  }
}

@media (max-width: 640px){
  .hero-copy h1 {
    font-size: 30px;
  }

  .hero-copy p {
    font-size: 15px
  }

  .prod-viewport{ padding: 14px 16px 26px; }
  .prod-track{ gap: 18px; }
  .prod-card{ flex: 0 0 100%; }
}

@media (max-width: 560px){
  .s2b-title{
    gap: 14px;
  }

  .s2b-cards{
    grid-template-columns: 1fr;
  }

  .s2b-card{
    min-height: 130px;
  }
}

@media (max-height: 800px) {
  .hero-copy-block { padding-top: 5vh; }
}

@media (max-height: 700px) {
  .hero-copy-block { padding-top: 2vh; }
}