/* ===== Gotham Font Setup ===== */
@font-face {
  font-family: 'Gotham';
  src: url('../fonts/Gotham-Light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: 'Gotham';
  src: url('../fonts/Gotham-Book.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Gotham';
  src: url('../fonts/Gotham-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'Gotham';
  src: url('../fonts/Gotham-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
}

body, html {
  font-family: 'Gotham', sans-serif !important;
  font-weight: 400;
}



/* ========== Interra Dark Theme (iXM) ========== */
:root{
  --antrasit:#4a494a;
  --mavi:#00a3b7;
  --beyaz:#ffffff;
  --bg:#121212;         /* genel arka plan */
  --bg-2:#1a1a1a;       /* kart/box arka planı */
  --txt:#e9e9e9;
  --muted:#cfd3d4;
}

/* Genel */
html,body{ background:var(--bg); color:var(--txt); }
a{ color:var(--mavi); }
a:hover{ filter:brightness(1.1); }

/* Navbar (sadece logo var) */
.navbar.navbar-default{
  background:rgba(18,18,18,.85);
  border:none;
  box-shadow:0 2px 12px rgba(0,0,0,.24);
}
.navbar .navbar-brand img{ height:28px; }

/* HERO / Top Banner – arka plan */
.top-banner {
  /* background:url("../images/banner-bg.jpg") center center/cover no-repeat; */ /* kapattık */
  background: #0d0d0d; /* düz arka plan rengi (istersen değiştir) */
  
  min-height: 100vh;
  display: flex;
  align-items: center;
  text-align: center;
  position: relative;
  color: #ffffff;
}

.top-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  /* Eğer arka plan karartmasını da istemiyorsan bunu da kaldırabilirsin: */
  /* background: linear-gradient(to bottom, rgba(0,0,0,.35), rgba(0,0,0,.55)); */
}

.top-banner .container {
  position: relative;
  z-index: 1;
}
.top-banner h2 { color: #fff; }
.top-banner p { color: #e3e7e9; }


/* Butonlar */
.btn{ border:none; border-radius:999px; }
.btn-primary{ background:var(--mavi); color:#fff; }
.btn-primary:hover{ filter:brightness(1.1); }
.btn-warning{ background:var(--antrasit); color:#fff; }
.btn-warning:hover{ filter:brightness(1.1); }

/* Bölüm başlıkları ve metin */
.section-header h2{ color:#fff; text-transform:uppercase; }
.section-header p{ color:var(--muted); }

/* Bölümler arka plan (default koyu) */
.the-product, .how-it-works, .the-benefits, .left-right-contents,
.our-collection, .the-watch, .split-columns, .reviews, .featured-on,
.faqs, .tech-specs, .team, .timeline, .mobile-app, .newsletter, footer{
  background:var(--bg);
  color:var(--txt);
}
hr, .divider{ border-color:#2a2a2a; }

/* Kart/kutu tarzı elemanlar */
.benefit .media, .tech-spec, .faq, .review{
  background:var(--bg-2);
  border:1px solid #2a2a2a;
  border-radius:16px;
  padding:18px;
}
.benefit h4, .tech-spec h4, .faq h4{ color:#fff; }

/* Sol/sağ görsel bölümleri */
.split-columns .texts{ background:var(--bg-2); color:var(--txt); }
.split-columns .texts p{ color:var(--muted); }

/* Form alanları */
.form-control, .bootstrap-select .btn{
  background:#1a1a1a; border:1px solid #2a2a2a; color:#fff;
}
.input-group-addon{ background:var(--mavi); border:none; }
.newsletter .input-group .form-control::placeholder{ color:#a9b0b2; }

/* Footer */
footer{ background:#0b0b0b; color:#a9b0b2; }
footer a{ color:#cfd3d4; }
footer a:hover{ color:var(--mavi); }

/* Demo style switcher’ı gizle (sol renk barları) */
.style-switcher, .color-switcher, #style-selector{ display:none !important; }

/* WOW animasyonları biraz kıs */
.wow{ visibility:visible !important; animation-duration:.7s; }

/* ===== iXM Hotspots — isolate & reset ===== */
.ixm-hotspots{ position:relative; }
.ixm-hotspots .product-img{
  width:100%; height:auto; display:block; object-fit:contain;
}

/* Hotspot düğmesi (sabit kutu, kaymaz) */
.ixm-hotspots .hotspot{
  position:absolute;
  transform:translate(-50%, -50%);
  width:32px; height:32px;
  cursor:pointer; z-index:5;
}

/* Kapsayıcıyı tam doldur */
.ixm-hotspots .hotspot .indicator{ position:absolute; inset:0; }

/* + ikonunun tam merkezde sabitlenmesi */
.ixm-hotspots .hotspot .plus-icon{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
  background:#00a3b7; color:#fff;
  box-shadow:0 4px 12px rgba(0,0,0,.45);
  transition:transform .2s, box-shadow .2s;
  transform-origin:center center;
}
.ixm-hotspots .hotspot:hover .plus-icon{
  transform:scale(1.06); box-shadow:0 6px 16px rgba(0,0,0,.55);
}

/* Balon – varsayılan: üstte açılır */
.ixm-hotspots .hotspot .feature-name{
  position:absolute; left:50%; top:-12px;
  transform:translate(calc(-50% + var(--shift, 0px)), calc(-100% - 10px));
  background:#1a1a1a; color:#e9e9e9; border:1px solid #2a2a2a;
  padding:10px 12px; border-radius:10px; min-width:220px; max-width:280px;
  font-size:13px; line-height:1.35; text-align:center;
  box-shadow:0 10px 24px rgba(0,0,0,.35);
  opacity:0; pointer-events:none; transition:opacity .2s, transform .2s;
  z-index:6;
}
.ixm-hotspots .hotspot.open .feature-name{ opacity:1; pointer-events:auto; }

/* Aşağıda açılacaksa */
.ixm-hotspots .hotspot.pop-below .feature-name{
  top:12px; transform:translate(calc(-50% + var(--shift, 0px)), 0);
}

/* Alttaki gibi özel durumda mutlaka ÜSTTE aç */
.ixm-hotspots .hotspot.force-top.pop-below .feature-name{
  top:-12px !important;
  transform:translate(calc(-50% + var(--shift, 0px)), calc(-100% - 10px)) !important;
}

/* Ürün görselini saran kutu (boyut) */
.apple-watch-note-feature{
  position:relative;
  max-width:480px; margin:0 auto; padding:20px 0;
}

@media (max-width:768px){
  .apple-watch-note-feature{ max-width:380px; }
}

/* === Intro (alpha video) === */
.intro-full{
  position:relative;
  height:100vh;
  width:100%;
  background:#121212; /* alpha'nın altında görünen düz zemin */
  overflow:hidden;
}
.intro-full video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:contain;      /* videonun kadrajını bozma */
  background:transparent;  /* alpha için */
}

/* Skip butonu */
.skip-intro{
  position:absolute; top:88px; right:16px; z-index:5;
  padding:8px 14px; border-radius:999px; border:1px solid #2a2a2a;
  background:#1a1a1a; color:#e9e9e9; cursor:pointer;
}
.skip-intro:hover{ filter:brightness(1.1); }

/* “Scroll” ipucu */
.scroll-hint{
  position:absolute; left:50%; bottom:24px; transform:translateX(-50%);
  font-size:13px; color:#cfd3d4; opacity:.8;
}

/* Intro kapatıldığında gizle */
.intro-hidden{ display:none; }


/* ===== iXM: HERO banner responsive fixes (added) ===== */
.top-banner{
  min-height: calc(100vh - 64px);
  padding-top: clamp(48px, 6vh, 96px);
  padding-bottom: clamp(32px, 6vh, 80px);
}
.top-banner h2{
  font-size: clamp(36px, 6vw, 84px);
  line-height: 1.05;
  margin-bottom: 8px;
}
.top-banner p{
  font-size: clamp(16px, 2.2vw, 26px);
  margin-bottom: 18px;
}
header .watch_img{
  width: clamp(340px, 36vw, 640px);
  height: auto;
}
@media (max-width: 991px){
  .navbar.navbar-default{ background:rgba(18,18,18,.92); }
}


/* ===== iXM HERO v2 (overlay, sizing, contrast) ===== */
.top-banner{
  position: relative;
  min-height: 88vh;              /* daha kısa: ilk ekrana sığsın */
  padding-top: clamp(56px, 8vh, 96px);
  padding-bottom: clamp(24px, 6vh, 72px);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
}

.top-banner::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.35) 40%, rgba(0,0,0,.55) 100%);
  z-index:0;
}

.top-banner .container, .top-banner .row, .top-banner .col-md-12{
  position: relative; z-index: 1;
}

.top-banner h2{
  font-size: clamp(40px, 6vw, 78px);
  line-height:1.06;
  letter-spacing: 0.5px;
  color: #fff;
  text-shadow: 0 2px 10px rgba(0,0,0,.35);
  margin: 0 0 10px 0;
}

.top-banner p{
  font-size: clamp(16px, 2vw, 24px);
  color: rgba(255,255,255,.92);
  text-shadow: 0 2px 8px rgba(0,0,0,.35);
  margin: 6px auto 16px;
  max-width: 980px;
}

header .watch_img{
  width: clamp(240px, 26vw, 520px);  /* küçültüldü */
  height: auto;
  margin-top: clamp(8px, 1.5vh, 16px);
  filter: drop-shadow(0 8px 24px rgba(0,0,0,.35));
}

.btn.btn-primary{
  margin-top: 8px;
}

@media (max-width: 1199px){
  .top-banner{ min-height: 82vh; }
  header .watch_img{ width: clamp(220px, 34vw, 420px); }
}

@media (max-width: 767px){
  .top-banner{ min-height: 76vh; padding-top: 72px; padding-bottom: 36px;}
  header .watch_img{ width: clamp(200px, 58vw, 360px); }
}


/* ===== iXM HERO v3 (fit product fully on 100vh) ===== */
:root{ --navH: 72px; }

.top-banner{
  min-height: 100vh;
  padding-top: clamp(24px, 6vh, 72px);
  padding-bottom: clamp(16px, 4vh, 48px);
  gap: clamp(8px, 2vh, 18px);
}

.top-banner h2{ margin-top: 0; }

/* Product image scales to ALWAYS fit in first fold */
header .watch_img{
  display:block;
  height: auto;
  max-height: calc(100vh - var(--navH) - clamp(240px, 28vh, 360px)); /* title+desc+buttons alanı için pay */
  width: auto;
  max-width: min(72vw, 860px);
  margin: 0 auto;
}

/* Fine tune for big/medium screens */
@media (min-width: 1400px){
  header .watch_img{
    max-height: calc(100vh - var(--navH) - 300px);
    max-width: min(52vw, 900px);
  }
}

@media (max-width: 1199px){
  :root{ --navH: 64px; }
  header .watch_img{
    max-height: calc(100vh - var(--navH) - 320px);
    max-width: min(68vw, 700px);
  }
}

@media (max-width: 767px){
  :root{ --navH: 56px; }
  .top-banner{ min-height: 100svh; }
  header .watch_img{
    max-height: calc(100svh - var(--navH) - 320px);
    max-width: min(92vw, 520px);
  }
}


/* ===== iXM HERO v3.1 (tighter gap between CTA and product) ===== */
.top-banner .btn,
.top-banner .btn.btn-primary{ 
  margin-bottom: clamp(6px, 1vh, 10px); /* CTA alt boşluk azaldı */
}

header .watch_img{
  margin-top: clamp(6px, 1.2vh, 14px);  /* CTA'dan sonra yakınlaşsın */
  max-height: calc(100vh - var(--navH) - clamp(200px, 24vh, 320px)); /* metin alanı payı azaltıldı */
}


/* ===== iXM HERO v4.1 (slimmer CTA buttons) ===== */
.top-banner .btn,
.top-banner .btn.btn-primary,
.top-banner a.btn {
  font-size: clamp(13px, 1.3vw, 16px);
  padding: clamp(8px, 0.9vw, 12px) clamp(18px, 1.8vw, 28px);
  border-radius: 32px;
  line-height: 1.2;
}

.top-banner .btn i,
.top-banner .btn span.icon,
.top-banner .btn svg {
  transform: scale(.9);
}
/* ===== iXM HERO v5 (final balanced compact layout) ===== */
header .navbar,
.navbar.navbar-default {
  padding: 8px 0;
  min-height: 60px;
}

.top-banner {
  min-height: 100vh;
  padding-top: 60px;
}

.top-banner h2 {
  font-size: clamp(30px, 4vw, 56px);
  line-height: 1.05;
  margin-bottom: 6px;
}

.top-banner p {
  font-size: clamp(13px, 1.5vw, 18px);
  margin-bottom: 10px;
  opacity: 0.9;
}

.top-banner .btn,
.top-banner .btn.btn-primary {
  font-size: clamp(12px, 1.3vw, 15px);
  padding: 8px 22px;
  border-radius: 28px;
  margin-top: 6px;
  margin-bottom: 4px;
}

header .watch_img {
  margin-top: 12px;
  max-height: calc(100vh - 320px);
  max-width: min(60vw, 640px);
}
/* ===== iXM HERO v5.1 (shift content slightly lower) ===== */
.top-banner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding-top: 8vh; /* biraz aşağı kaydırma */
}

.top-banner h2 {
  margin-top: clamp(20px, 4vh, 40px);
}

header .watch_img {
  margin-top: clamp(10px, 3vh, 28px);
}
/* ===== iX-M About (dark cards) ===== */
.ixm-about{background:#0f0f0f;color:#eaeaea;padding:72px 0}
.ixm-row{display:flex;flex-wrap:wrap;gap:24px;align-items:stretch}
.ixm-row-gap{margin-top:28px}
.ixm-col{min-width:320px;flex:1 1 460px}
.ixm-card{
  background:#141414;border:1px solid #242424;border-radius:16px;
  padding:24px;height:100%;box-shadow:0 12px 32px rgba(0,0,0,.35)
}
.ixm-media{display:flex;align-items:center;justify-content:center;padding:16px}
.ixm-media img{max-width:100%;height:auto;object-fit:contain;filter:drop-shadow(0 10px 24px rgba(0,0,0,.35))}
.ixm-list{margin:10px 0 0 0;padding-left:18px;line-height:1.8}
.ixm-specs{display:grid;grid-template-columns:1fr 1fr;gap:10px 18px;font-size:15px}
.ixm-specs div:nth-child(odd){color:#9aa3a7}

/* responsive tweaks */
@media (max-width: 991px){
  .ixm-about{padding:56px 0}
}
@media (max-width: 767px){
  .ixm-specs{grid-template-columns:1fr}
}
.center-media{
  width: min(560px, 40vw);
  margin: 0 auto;
  position: relative;
}
.ixm-center-video{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 20px;
  box-shadow: 0 20px 50px rgba(0,0,0,.35);
  object-fit: cover;
}

/* Opsiyonel: manuel play tuşu görünümü
.center-play{
  position:absolute; inset:0; margin:auto; width:68px; height:68px;
  border-radius:50%; border:none; background:rgba(0,0,0,.45);
  backdrop-filter: blur(2px); cursor:pointer;
  mask: url('icons/play.svg') center / 48% no-repeat;
}
*/
.center-media{
  width: min(560px, 40vw);
  margin: 0 auto;
  position: relative;
}
.ixm-center-video{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 20px;
  box-shadow: 0 20px 50px rgba(0,0,0,.35);
  object-fit: cover;
}
/* === THE BENEFITS — 3×2 sabit grid, eşit hizalı kartlar === */
.benefits-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:24px;
  align-items:stretch;
}
.benefit-card{
  background:#171717;
  border:1px solid #252525;
  border-radius:16px;
  padding:22px 24px;
  display:flex;
  flex-direction:column;
  height:100%;
  transition:transform .2s ease, .2s ease;
}
.benefit-card:hover{ background:#1f1f1f; transform:translateY(-3px); }

@media (max-width: 991px){
  .benefits-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width: 600px){
  .benefits-grid{ grid-template-columns:1fr; }
}

/* Hero/Top Banner: arka plan görselini kesin kapat */
#header .top-banner{
  background:#0d0d0d !important;
  background-image:none !important;
}

/* Overlay/karartma katmanları da kapalı kalsın */
#header .top-banner::before,
#header .top-banner::after{
  content:none !important;
}

/* ===== iX-M Color Stories ===== */
.ixm-color-stories{
  background:#0f0f0f;
  color:#e9e9e9;
  padding:72px 0;
}

/* ===== iX-M Color Stories – responsive sabit kolonlar ===== */
.ixm-color-grid{
  display:grid;
  grid-template-columns: 1fr;      /* mobil default: 1 kolon */
  gap:24px;
}

/* küçük tablet */
@media (min-width: 576px){
  .ixm-color-grid{
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
}

/* büyük tablet / küçük laptop */
@media (min-width: 992px){
  .ixm-color-grid{
    grid-template-columns: repeat(3, minmax(0,1fr));
  }
}

/* geniş ekran – 5 POSTER TEK SIRA */
@media (min-width: 1200px){
  .ixm-color-grid{
    grid-template-columns: repeat(5, minmax(0,1fr));
  }
}


/* kart artık grid child, flex gerek yok */
.ixm-color-card{
  background:#141414;
  border-radius:20px;
  border:1px solid #262626;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  box-shadow:0 16px 40px rgba(0,0,0,.45);
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  max-width:none;      /* önemli: tek satıra sığması için */
}

.ixm-color-card:hover{
  transform:translateY(-6px);
  box-shadow:0 22px 60px rgba(0,0,0,.6);
}

/* Poster görseli */
.ixm-color-media{
  position:relative;
  overflow:hidden;
}
.ixm-color-media img{
  display:block;
  width:100%;
  height:auto;
}

/* Alt metin alanı */
.ixm-color-body{
  padding:14px 18px 18px;
}
.ixm-color-body h3{
  font-size:16px;
  margin:0 0 6px;
}
.ixm-color-body p{
  font-size:13px;
  line-height:1.5;
  color:#cfd3d4;
  margin:0;
}

/* Renge göre vurgu çizgisi */
.ixm-color-card::before{
  content:"";
  display:block;
  height:3px;
  width:100%;
  background:linear-gradient(90deg,#00a3b7,#00a3b7);
}

/* İstersen her renge ayrı highlight */
.ixm-white::before{
  background:linear-gradient(90deg,#f5f7fb,#ffffff);
}
.ixm-anthracite::before{
  background:linear-gradient(90deg,#444349,#75757d);
}
.ixm-beige::before{
  background:linear-gradient(90deg,#d8c3a4,#f0d7ad);
}
.ixm-mocha::before{
  background:linear-gradient(90deg,#a2603d,#d88a5b);
}
.ixm-black::before{
  background:linear-gradient(90deg,#050509,#3a3a44);
}

@media (max-width: 767px){
  .ixm-color-stories{ padding:56px 0; }
}

/* ===== iXM Benefits – Modern Centered Cards ===== */
.benefits-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:32px;
  align-items:stretch;
}

.benefit-card{
  background:#141414;
  border:1px solid #242424;
  border-radius:20px;
  padding:32px 28px;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap:18px;
  box-shadow:0 12px 36px rgba(0,0,0,.35);
  transition:transform .25s ease, background .25s ease;
}

.benefit-card:hover{
  transform:translateY(-6px);
  background:#1d1d1d;
}

.benefit-card i{
  font-size:40px;
  color:#00a3b7;
  margin-bottom:4px;
}

.benefit-card h4{
  color:#fff;
  font-size:18px;
  margin:0;
}

.benefit-card p{
  color:#cfd3d4;
  font-size:14px;
  line-height:1.6;
  margin:0;
  max-width:260px;
}

@media(max-width:991px){
  .benefits-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}

@media(max-width:600px){
  .benefits-grid{ grid-template-columns:1fr; }
}

.timeline .bar-content .inner{
  background:#00a3b7;
  color:#ffffff;
  border-radius:999px;
  padding:6px 18px;
  font-weight:600;
  letter-spacing:1px;
}

.timeline .timeline-post.has-content .title{
  color:#ffffff;
}

.timeline .timeline-post.has-content p{
  color:#cfd3d4;
}

/* === Tüm başlıkların büyük harf zorunluluğunu tamamen kaldır === */
h1, h2, h3, h4, h5, h6,
.section-header h2,
.section-header h3,
.section-header h4 {
    text-transform: none !important;
}
.ixm-color-link{
    display:block;
    text-decoration:none;
    color:inherit;
}

.ixm-color-link:hover .ixm-color-card{
    transform: translateY(-4px);
    box-shadow:0 20px 50px rgba(0,0,0,0.45);
}
.ixm-color-link {
  display:block;
  text-decoration:none;
  color:inherit;
}

.ixm-color-link:hover .ixm-color-card {
  transform: translateY(-4px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
}