/* ==========================================================
   HAKKIMIZDA — SAYFA STİLLERİ
   ========================================================== */
html { scroll-behavior: auto !important; }
/* Sayfa genişliği + üst boşluk (servis/projeler ile aynı hizada) */
.about-page .page-content{
  max-width:1100px;            /* 380 + 420 + 300 */
  margin:0 auto;
  padding:150px 0 0px;         /* üst boşluk */
}

/* ==================== ÜST BÖLÜM — 3 SABİT SÜTUN ==================== */
.about-cols{ display:flex; gap:0; align-items:stretch; }
.about-cols .col{ display:flex; flex-direction:column; height:900px; }  /* toplam yükseklik */
.about-cols .c1{ width:380px; }
.about-cols .c2{ width:420px; }
.about-cols .c3{ width:300px; }

/* Kutular: bitişik, radius yok */
.about-cols .box{
  height:var(--h);
  margin:0;
  border:1px solid rgba(255,255,255,.10);
  border-radius:0;
}
/* alt alta gelen kutularda çift çizgi olmasın */
.about-cols .col .box + .box{ border-top-width:0; }

/* Metin kutuları */
.about-cols .text{
  background:transparent;
  display:grid; align-content:center; gap:8px; padding:14px;
}
.about-cols .text h1{ margin:0 0 6px; font-size: clamp(22px, 2.4vw, 28px); }
.about-cols .text h2{ margin:0 0 6px; font-size: clamp(18px, 2.0vw, 22px); }
.about-cols .text p { margin:0; color:#cfd1d6; line-height:1.6; }

/* Görsel kutuları: TAM OTURT + TAŞANI KIRP (boşlukları yok et) */
.about-cols .img{
  background:#15161a;
  position: relative;  /* içteki img için konum referansı */
  padding: 0;          /* iç boşluk olmasın */
  overflow: hidden;    /* taşan görsel kırpılsın */
}
.about-cols .img > img{
  position: absolute;  /* kutunun içine sabitle */
  inset: 0;            /* tüm kenarlara yapıştır */
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;   /* oranı koruyarak doldur; fazlasını kırp */
  object-position: 50% 50%; /* odak noktası */
  border: 0;
  border-radius: 0;
  margin: 0;
}

/* ==================== (YENİ) GÖRSEL ALANI — Değerler yerine tek PNG ==================== */
.about-banner{
  margin: 36px 0 24px;         /* üst-alt nefes */
}
.about-banner img{
  display:block;
  width:100%;
  height:auto;                 /* orantılı küçül/büyü */
  border:0;
  border-radius:0;             /* köşeler düz */
}
/* model-viewer yükleme çubuğunu ilk kareden itibaren tamamen kapat */
model-viewer,
.ml-obj model-viewer{
  --progress-bar-color: transparent !important;
  --progress-bar-height: 0px !important;
}

/* Shadow DOM içindeki varsayılan progress bar’ı gizle */
model-viewer::part(progress-bar),
model-viewer::part(default-progress-bar){
  display: none !important;
  opacity: 0 !important;
  height: 0 !important;
}


/* ==================== SAYAÇLAR — İSTENEN DÜZEN ==================== */
/* Ana sayaç kutusu: 150px yüksek, 30px daha geniş (sol/sağ -15px margin), sağa yapışık filigran */
.about-stats{
  position:relative;
  margin:12px -15px 28px;                   /* ▼ genişliği +30px */
  height:150px;                              /* ▼ istenen yükseklik */
  padding:0 24px;                            /* üst-alt 0; sağ/sol biraz nefes */
  display:flex; align-items:center;          /* içeriği dikey ortala */
  border:1px solid rgba(255,255,255,.10);
  border-radius:0;
  background:#14161a;
}
/* Filigran — CSS dosyası /css klasöründe olduğundan yol yukarıdan verildi */
.about-stats::before{
  content:"";
  position:absolute; inset:0;
  background: url("../medias/cizim.png") right center / 430px auto no-repeat; /* büyüklüğü burada ayarlarsın */
  opacity:.80;
  pointer-events:none;
  z-index:0;
}

/* Sayaçların bulunduğu satır: eşit aralık (kenarlara ve aralarında) */
.stats-grid{
  position:relative;
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:space-evenly;              /* kenarlara ve aralarda eşit mesafe */
  gap:0;                                     /* spacing’i space-evenly yapıyor */
  z-index:1;                                 /* filigranın üstünde kalsın */
}

/* Her sayaç kutusu: %25 genişlikten 50px düş, eşit hizalanır */
.stat{
  flex: 0 1 calc(25% - 130px);               /* mevcut düzenini koruyorum (sen bu değeri kullanıyordun) */
  height:120px;                              /* kart yüksekliği */
  display:grid; place-content:center; gap:6px;
  background:rgba(15,16,18,.88);
  border:1px solid rgba(255,255,255,.10);
  border-radius:0;                           /* köşeler düz */
  text-align:center;
}

.stat-name{ font-size:13px; color:#cfd1d6; }
.stat-num { font-size:clamp(22px,3.4vw,34px); font-weight:800; margin-top:6px; }


/* ==================== 3 SÜTUNU ORTALA (PATCH) ==================== */

/* Satır bloğunu sabit toplam genişliğe getir ve yatayda ortala */
.about-cols{
  width: 1100px;              /* 380 + 420 + 300 = 1100px */
  max-width: 100%;            /* küçük ekranlarda taşmasın */
  margin-left: auto;          /* yatay ortalama */
  margin-right: auto;         /* yatay ortalama */
  justify-content: center;    /* çocuk kolonları ortaya hizala (ek güvence) */
}

/* Bazı tarayıcıların figure default margin’i sola/sağa boşluk bırakabilir; sıfırla */
.about-cols figure{ 
  margin: 0;                  /* kenar boşluğunu kaldır */
}


/* ============ Logonun Anlamı — 3D Sahne ============ */
.ml{
  max-width:1100px;
  margin:10% auto 5%;
  position:relative;

  /* ▼ Tek değerle yüzde ölçek: 100 = %100, 150 = %150 */
  --ml-scale: 100;
}
.ml-wrap{
  position:relative;
  height:clamp(360px, 48vw, 520px); /* sahne yüksekliği */
  background:transparent;
  overflow:visible;
}

/* Parça: merkezden px cinsinden öteleme (JS → --x/--y) */
.ml-piece{
  position:absolute;
  left:50%; top:50%;
  transform:translate(calc(-50% + var(--x,0px)), calc(-50% + var(--y,0px)));
  transition:transform .12s linear;
  text-align:center;
}

/* Model kutusu: tek yüzdelik ölçek buradan uygulanır */
.ml-obj{
  width:clamp(140px, 18vw, 220px);
  height:clamp(140px, 18vw, 220px);
  transform-origin:50% 50%;
  transform: 
    scale(calc(var(--ml-scale, 100) / 100))   /* ← yüzde ölçek (parça bazında override edilecek) */
    rotate(var(--ml-rot, 0deg));              /* ← JS buraya sadece ters dönüş açısını yazar */
  transition: transform .12s linear;
  
}

/* Etiket (opsiyonel) */
.ml-label{
  margin-top:8px; font-weight:400;
  opacity:0; transform:translateY(6px);
  transition:opacity .25s ease, transform .25s ease;
  pointer-events:none;
  font-size: clamp(12px,2.5vw,22px);
  letter-spacing: 0.12em;
}
.ml-piece.show-label .ml-label{ opacity:1; transform:translateY(0); }

/* Slider */
.ml-slider{
  position:relative; margin:12px auto 0;
  width:clamp(220px,33%,520px); height:18px; display:grid; place-items:center;
}
.ml-rail{ position:absolute; inset:0; height:6px; border-radius:999px; background:rgba(255,255,255,.06); pointer-events:none; }
#mlRange{ -webkit-appearance:none; appearance:none; width:100%; background:transparent; height:18px; outline:none; }
#mlRange::-webkit-slider-runnable-track, #mlRange::-moz-range-track{
  height:6px; border-radius:999px; background:linear-gradient(90deg, rgba(255,255,255,.22), rgba(255,255,255,.32));
}
#mlRange::-webkit-slider-thumb, #mlRange::-moz-range-thumb{
  width:14px; height:14px; border-radius:50%; background:#fff; box-shadow:0 0 0 3px rgba(255,255,255,.12) inset; margin-top:-4px;
}


/* POV açısı için kontrol değişkenleri */
.ml{
  --ml-tilt: 0deg;     /* bakış açısı */
  --ml-persp: 1200px;   /* perspektif derinliği (isteğe göre 800–1600px) */
}

/* 3D sahne: perspektif ve 3D alt katmanlar açık */
.ml-wrap{
  perspective: var(--ml-persp);
  transform-style: preserve-3d;
  position: relative; /* zaten vardı */
}

/* Tüm parçaları taşıyan stage katmanı: sadece bunu döndürüyoruz */
.ml-stage{
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  transform-origin: 50% 50%;
  transform: rotateX(var(--ml-tilt));  /* ✳️ POV: 45° */
  transition: transform .3s ease;      /* istersen animasyonlu değiştirirsin */
}