/* ============================================================
   assets/css/page.css — İÇERİK SAYFALARI
   Hizmetler, Hakkımızda, Ekibimiz.
   ============================================================ */

/* ── Hizmet kartları (liste sayfası) ── */
.svc-grid-all { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1000px) { .svc-grid-all { grid-template-columns: 1fr 1fr; } }
/* Hizmetler sayfasındaki tam liste de dar ekranda ikili kalıyor;
   ölçüler main.css'teki .svc-card kurallarından geliyor. */
@media (max-width: 560px)  { .svc-grid-all { grid-template-columns: 1fr 1fr; } }

.svc-go {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 14px;
  font-size: 12.5px; font-weight: 700; letter-spacing: .6px;
  text-transform: uppercase; color: var(--accent);
}
@media (max-width: 560px) {
  .svc-go { font-size: 10.5px; letter-spacing: .3px; gap: 6px; margin-top: 10px; }
}

.svc-hero {
  width: 100%; aspect-ratio: 16/7; object-fit: cover;
  border-radius: var(--radius); margin-bottom: 26px;
}

/* ── HİZMET SEKMELERİ ──
   Projeler sayfasındaki kategori sekmeleriyle aynı: yatay şerit,
   taşarsa kaydırılıyor. Hem masaüstünde hem mobilde üstte.
   Kutu görünümü .pj-tab sınıfından geliyor (main.css). */
.svc-tabs {
  display: flex; gap: 8px;
  padding: 22px 0 4px;
  overflow-x: auto;
  /* Kap genişliğini aşmasın, aşan kısım kaydırılabilir olsun */
  width: 100%; min-width: 0; max-width: 100%;
  scroll-snap-type: x proximity;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; -ms-overflow-style: none;
}
.svc-tabs::-webkit-scrollbar { display: none; }
.svc-tabs > a { scroll-snap-align: start; }

/* Yan sütun kaldırıldı: içerik tam genişlikte, okunur satır
   uzunluğunu korumak için üst sınır var. */
.svc-body { padding-top: 26px; padding-bottom: 26px; }

/* Metne ayrı bir genişlik sınırı YOK.

   Okunabilir satır uzunluğu için 78 karakterle sınırlanmıştı; ama
   yan sütun eklendikten sonra ana sütun zaten daralmıştı ve bu sınır
   metni görselden birkaç piksel içeride bitiriyordu. Görsel bir
   kenara, yazı başka bir kenara hizalanınca düzen dağınık duruyor.

   Sütunun kendi genişliği (yan sütun düşüldükten sonra ~990 piksel)
   okunabilirlik için zaten makul; ayrıca hizmet açıklamaları kısa
   metinler. Hizalama, birkaç karakterlik ideal satır uzunluğundan
   daha çok göze çarpıyor. */
.svc-body .pd-body,
.svc-body .pd-sec { max-width: none; }

/* Yan sütundaki hizmet listesi */
.svc-side-list { display: flex; flex-direction: column; gap: 2px; }
.svc-side-list a {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 11px; border-radius: var(--radius-sm);
  font-size: 13.5px; font-weight: 600; color: var(--text-soft);
  transition: background .14s, color .14s;
}
.svc-side-list a:hover { background: var(--surface-2); color: var(--accent); }
.svc-side-list a > i:first-child { width: 18px; color: var(--accent); font-size: 13px; }
.svc-side-go { margin-left: auto; font-size: 11px; opacity: .5; }

/* İçerik AJAX ile değişirken soluyor: bir şey olduğu görülsün */
#svcMain.is-loading { opacity: .45; pointer-events: none; transition: opacity .15s; }

/* ── HAKKIMIZDA ──
   Giriş metni ve firma hikayesi YAN YANA iki sütun; aralarında
   dikey ayırıcı çizgi. Aradaki görsel kaldırıldı — iki metni
   birbirinden koparıp sayfayı uzatıyordu. */

.ab-split {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 0 44px;
  position: relative;
}

/* Ayırıcı çizgi: ortada, iki uçta soluyor. Düz bir kenarlık
   sert duruyordu. */
.ab-split::before {
  content: ''; position: absolute;
  left: 50%; top: 6px; bottom: 6px; width: 1px;
  background: linear-gradient(180deg,
              transparent, var(--border) 12%, var(--border) 88%, transparent);
}

.ab-col { min-width: 0; }

.ab-col-label {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 1.6px;
  text-transform: uppercase; color: var(--accent);
  margin-bottom: 10px;
}
.ab-col-label i { font-size: 11px; }

.ab-col-title {
  font-size: 20px; margin-bottom: 14px;
  padding-bottom: 12px; position: relative;
  border-bottom: 1px solid var(--border);
}
.ab-col-title::after {
  content: ''; position: absolute; left: 0; bottom: -1px;
  width: 44px; height: 2px; background: var(--accent);
}

.ab-col-body {
  color: var(--text-soft); line-height: 1.85; font-size: 13.5px;
}

@media (max-width: 900px) {
  .ab-split { grid-template-columns: 1fr; gap: 0; }

  /* Konumlanmış çizgi kapatılıyor: sütunlar alt alta inince
     yükseklikleri eşit olmadığı için ortaya denk gelmiyordu.
     Yerine ilk bloğun ALTINA çizgi konuyor — nereden ayrıldıkları
     her durumda doğru görünüyor. */
  .ab-split::before { display: none; }

  .ab-col + .ab-col {
    margin-top: 28px; padding-top: 28px;
    border-top: 1px solid var(--border);
  }
  .ab-col-title { font-size: 18px; }
}

.ab-mv { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 34px; }
.ab-mv-card {
  background: var(--surface); border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius); padding: 26px;
}
.ab-mv-ic {
  width: 40px; height: 40px; border-radius: 12px; margin-bottom: 14px;
  background: var(--accent-soft); color: var(--accent);
  display: grid; place-items: center; font-size: 18px;
}
.ab-mv-card h2 { font-size: 16px; margin-bottom: 10px; }
.ab-mv-card p { color: var(--text-muted); line-height: 1.75; font-size: 13.5px; }

@media (max-width: 820px) { .ab-mv { grid-template-columns: 1fr; } }

/* ── Ekip kartı ── */
.team-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px;
}
@media (max-width: 1000px) { .team-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px)  { .team-grid { grid-template-columns: 1fr; } }

.tm-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 26px 20px; text-align: center;
  transition: border-color .16s, transform .16s;
}
.tm-card:hover { border-color: var(--accent); transform: translateY(-3px); }

.tm-photo {
  width: 82px; height: 82px; border-radius: 50%; margin: 0 auto 16px;
  overflow: hidden; background: var(--accent-soft);
  display: grid; place-items: center;
  font-size: 27px; font-weight: 800; color: var(--accent);
  border: 2px solid var(--border);
}
.tm-photo img { width: 100%; height: 100%; object-fit: cover; }

.tm-card h3 { font-size: 14px; margin-bottom: 4px; }
.tm-title {
  font-size: 11.5px; font-weight: 700; letter-spacing: 1px;
  text-transform: uppercase; color: var(--accent); margin-bottom: 10px;
}
.tm-bio { font-size: 12.5px; color: var(--text-muted); line-height: 1.65; }

.tm-links { display: flex; justify-content: center; gap: 9px; margin-top: 16px; }
.tm-links a {
  width: 36px; height: 36px; border-radius: 10px;
  background: var(--surface-2); border: 1px solid var(--border);
  display: grid; place-items: center; font-size: 13px; color: var(--text-muted);
  transition: color .15s, border-color .15s;
}
.tm-links a:hover { color: var(--accent); border-color: var(--accent); }

/* Üç ikon kaldı; kart dengeli dursun diye biraz büyütüldü */
.tm-links a { width: 34px; height: 34px; font-size: 13px; }

@media (max-width: 520px) {
  .tm-links { gap: 7px; margin-top: 12px; }
  .tm-links a { width: 31px; height: 31px; font-size: 12px; }
}

/* ═══════════════════════════════════════════════════════════
   REFERANSLAR
   ═══════════════════════════════════════════════════════════ */

/* Açık sütun sayısı: auto-fill kap genişliğine bağlı kalıyor ve
   kimi düzende tek sütuna düşüyordu. */
.quote-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px;
}
@media (max-width: 1000px) { .quote-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .quote-grid { grid-template-columns: 1fr; } }
.quote-card {
  position: relative; padding: 26px 24px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius);
}
.quote-card > i {
  font-size: 19px; color: var(--accent); opacity: .35; margin-bottom: 12px; display: block;
}
.quote-card p { color: var(--text-soft); line-height: 1.8; font-size: 13.5px; }

.quote-card footer {
  display: flex; align-items: center; gap: 12px;
  margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border);
}
.quote-card footer img {
  width: 44px; height: 44px; object-fit: contain; border-radius: 8px;
  background: var(--surface-2); padding: 5px;
}
.quote-mark {
  width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
  background: var(--accent-soft); color: var(--accent);
  display: grid; place-items: center; font-size: 17px; font-weight: 800;
}
.quote-card footer strong { display: block; font-size: 14px; }
.quote-card footer small { font-size: 12px; color: var(--text-muted); }

.quote-proj {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 14px;
  font-size: 12.5px; font-weight: 600; color: var(--accent);
}
.quote-proj:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ═══════════════════════════════════════════════════════════
   BELGELER
   ═══════════════════════════════════════════════════════════ */

.doc-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px;
}
@media (max-width: 1100px) { .doc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 800px)  { .doc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px)  { .doc-grid { grid-template-columns: 1fr; } }
.doc-card {
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden;
  transition: border-color .16s, transform .16s;
}
.doc-card:hover { border-color: var(--accent); transform: translateY(-3px); }

.doc-visual {
  aspect-ratio: 4/3; background: var(--surface-2);
  display: grid; place-items: center; overflow: hidden;
}
.doc-visual img { width: 100%; height: 100%; object-fit: cover; }
.doc-visual > i { font-size: 34px; color: var(--accent); opacity: .8; }

.doc-body { padding: 18px 20px 20px; }
.doc-body h2 { font-size: 14.5px; margin-bottom: 6px; line-height: 1.4; }
.doc-issuer { font-size: 13px; color: var(--text-muted); margin-bottom: 12px; }

.doc-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.doc-meta span { font-size: 12px; color: var(--text-muted); display: inline-flex; align-items: center; gap: 6px; }
.doc-meta i { color: var(--accent); font-size: 11px; }

.doc-go {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 14px;
  font-size: 12.5px; font-weight: 700; color: var(--accent);
}