/* hakkimizda.css — SON HAL */

/* Sayfa yerleşimi */
.about{
  height: calc(100vh - var(--header-h) - var(--footer-h));
  padding: 18px 22px;
  display: grid;
  place-items: center;
}

/* Ana kart */
.about-card{
  width: min(1200px, 96%);
  height: min(680px, calc(100vh - var(--header-h) - var(--footer-h) - 36px));
  border-radius: 22px;
  padding: 22px;
  overflow: auto;

  /* border + shadow (premium) */
  border: 1px solid rgba(0,0,0,.08);
  box-shadow:
    0 30px 90px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.6);

  /* yeni: arka efektler için */
  position: relative;
  overflow: hidden;
}

/* premium gradient arka katman */
.about-card::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(1200px 420px at 20% 15%, rgba(77,171,247,.14), transparent 60%),
    radial-gradient(1000px 420px at 85% 25%, rgba(32,201,151,.14), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(235,238,242,.94));
  z-index:0;
}

/* hafif grain/noise efekti */
.about-card::after{
  content:"";
  position:absolute;
  inset:0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.12'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
  opacity:.18;
  z-index:0;
  pointer-events:none;
}

/* kart içeriği üstte kalsın */
.about-card > *{
  position: relative;
  z-index: 1;
}

/* Scroll */
.about-card::-webkit-scrollbar{ width: 10px; }
.about-card::-webkit-scrollbar-thumb{
  background: rgba(0,0,0,.18);
  border-radius: 999px;
}
.about-card::-webkit-scrollbar-track{
  background: rgba(0,0,0,.06);
  border-radius: 999px;
}

/* Grid */
.about-grid{
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 22px;
  align-items: start;
  position: relative;
}

/* Masaüstü: sütun ayırıcı + sol şerit */
@media (min-width: 981px){
  .about-grid::before{
    content:"";
    position:absolute;
    top: 6px;
    bottom: 6px;
    left: 48%;
    width: 1px;
    background: linear-gradient(180deg, transparent, rgba(0,0,0,.10), transparent);
    border-radius: 999px;
  }

 

/* Sol sütun */
.col-left{
  display: grid;
  gap: 14px;
}

/* Vizyon / Misyon blokları */
.block{
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 20px;
  padding: 18px 18px 16px;
  box-shadow:
    0 22px 60px rgba(0,0,0,.12),
    inset 0 1px 0 rgba(255,255,255,.8);
  transform: translateZ(0);
}

.block-title{
  color: #0b1b33;
  font-weight: 950;
  font-size: 18px;
  letter-spacing: -.2px;

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

/* başlığa küçük renkli nokta */
.block-title::before{
  content:"";
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--c1), var(--c2), var(--c3));
  box-shadow: 0 10px 20px rgba(0,0,0,.10);
}

/* mini çizgi */
.accent-line-mini{
  height: 4px;
  width: 120px;
  border-radius: 999px;
  margin: 10px 0 10px;
  background: linear-gradient(90deg, var(--c1), var(--c2), var(--c3));
}

.block-text{
  color: rgba(11,27,51,.92);
  font-size: 14.8px;
  line-height: 1.65;
  font-weight: 650;
}

/* Sağ sütun */
.col-right{
  padding: 4px 2px;
}

.about-title{
  color: #0b1b33;
  font-size: clamp(28px, 2.4vw, 38px);
  font-weight: 950;
  letter-spacing: -0.8px;
  margin: 0;
}

.accent-line{
  height: 5px;
  width: 210px;
  border-radius: 999px;
  margin: 10px 0 14px;
  background: linear-gradient(90deg, var(--c1), var(--c2), var(--c3));
}

.about-text p{
  color: rgba(11,27,51,.92);
  font-size: 15px;
  line-height: 1.8;
  font-weight: 650;
  margin-bottom: 12px;
}

/* Patent satırı */
.patent-row{
  margin-top: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;

  background: linear-gradient(90deg, rgba(32,201,151,.12), rgba(77,171,247,.10));
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 16px 40px rgba(0,0,0,.10);
}

.patent-ico{
  height: 34px;
  width: auto;
  display: block;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.15));
}

.patent-text{
  color: rgba(11,27,51,.92);
  font-weight: 900;
  font-size: 14.5px;
  letter-spacing: .2px;
}

/* Mobile */
@media (max-width: 980px){
  .about{ padding: 14px 16px; }
  .about-grid{ grid-template-columns: 1fr; }
  .about-card{ padding: 18px; }
}