@charset "UTF-8";

/* =========================================================================
   Ana sayfa bantları — her bandın KENDİ düzen karakteri var.
   Kabul ölçütü: _arastirma/06_sunai_tasarim.md §8.5 (kompozisyon denetimi).
   Kural: eşit sütun yok · ortalanmış tek bölüm (.kanit) · dikey boşluk sabit
   değil · en az iki yerde ızgara kırılır · aynı kart tarifi 3'ten çok yok.
   ========================================================================= */

/* =========================================================================
   0. BANT RİTMİ — bu SAYFANIN kompozisyon kararları (F5, 05.08.2026)
   =========================================================================
   ⚠️ NEDEN BURADA, `sistem-v3.css`'te DEĞİL:
   Yükleme sırası `sistem.css → sistem-v3.css → anasayfa.css`. `.blm` taban
   dolgusu v3'te yaşıyor çünkü her sayfaya ait; aşağıdaki üç değiştirici ise
   yalnız ana sayfanın ritmini kuruyor ve tabanı BİLEREK eziyor. Bu dosyanın
   v3'ten sonra yüklenmesi burada bir tuzak değil, kullanılan bir özellik.

   ⚠️ SÜS DEĞİL, KURAL: bu dosyanın en üstündeki kabul ölçütü "dikey boşluk
   sabit değil" diyor. Yedi bandın hepsine aynı dolguyu vermek o ölçütü
   düşürürdü — sayfa şablon gibi okunur. Üç değiştiricinin her biri bir
   şeyi anlatıyor:

     .hizmetler-bant  şerit kendi 1px çizgisiyle biter; altına taban dolgusu
                      kadar boşluk koymak çizgiyi öksüz bırakıyor → alt daralır
     .isler-bant      kart ızgarası görsel olarak en yoğun bant; nefes artar
     .sektorler-bant  AYNI ızgara tarifinin ikinci kullanımı. Üst dolgusunun
                      dar olması, onun bağımsız bir bant değil hizmet
                      şeridinin akrabası olduğunu söyler (yapı bilgidir).
   Ölçüm: olcum/bant_olcu.js → kanit/bant_olcu.txt */

.hizmetler-bant { padding-block-end: clamp(2.5rem, 5vw, 4rem); }
.isler-bant { padding-block: clamp(4.5rem, 10vw, 8rem); }
.sektorler-bant { padding-block-start: clamp(2.5rem, 5vw, 4rem); }

/* ---------- 1. Hero — sola dayalı editöryel, 7/5 ------------------------ */

/* ══════════════════════════════════════════════════════════════════════════
   İMZA: YÜKSELEN RENK ALANI

   Sayfanın hatırlanacağı TEK öge. Hero'nun alt bölümünü kenardan kenara bir
   renk alanı doldurur ve sayfa açılırken bir kez aşağıdan yukarı yükselir.

   Tezi şu: alan rengi dekorasyon değil, İÇİNDEKİ EKRAN GÖRÜNTÜSÜNÜN KENDİ
   RENGİ. Hero'da besi.tr'nin telefon ekranı duruyor; alan da besi.tr'den
   örneklenmiş çayır tonu (--alan-cayir, ölçüm kanit/is-renkleri.json).
   Ekran görüntüsü değişirse alan rengi de değişir — yani renk, sayfanın o
   anda neyi gösterdiği hakkında doğru bir şey söylüyor.

   ── Neden BU imza, neden yalnız bu ──────────────────────────────────────
   İkinci bir imza adayı (sayfanın sol kenarında dört renkli sabit şerit)
   BİLEREK YAPILMADI. Üç sebep:
     1. On altı sayfanın on üçünde iş bandı yok; orada şerit hiçbir şey
        bildirmez, yalnız süsler. "Yapı bilgidir" kuralının tersi.
     2. Şerit, işlerin renklerini KROMA taşırdı — Recai'nin kapısının
        (vurgu ≤ 4) tam olarak kapattığı şey.
     3. İki imza birbirini zayıflatır. Bir aksesuar çıkarıldı.

   ── Ölçü: TEK YÜZDE YETMEDİ, ÖLÇÜLDÜ ─────────────────────────────────
   Kenarın nerede duracağı iki katı kısıta tabi:
     K1  Başlığın ALTINDA kalmalı. h1'deki dönen sektör kelimesinin altında
         marka mavisi ince bir çizgi var; renkli alanın üstünde o çizgi
         1,70:1'e düşerdi. Başlık kâğıtta kalır.
     K2  İlk ekranda GÖRÜNMELİ. Görünmüyorsa "sayfanın hatırlanacağı tek öge"
         olamaz. En kritik ölçü telefon (375): ziyaretçimiz KOBİ sahibi ve
         siteye telefondan bakıyor.
   Üçüncü kısıt ölçerken çıktı:
     K3  Kenar bir METİN BLOĞUNU ORTADAN KESMEMELİ. İlk denemede (%46, tek
         değer) kenar 1440'ta "Yazın ya da arayın…" notunun son satırının
         tam ortasından geçiyordu (satır 711–727, kenar 722) — imza olacak
         öge dikkatsiz görünüyordu. Aynı %46, telefonda kenarı 841 px'e
         atıyordu; görünüm 812 px, yani alan telefonda HİÇ görünmüyordu.

   Tek bir yüzde üç kısıtı birden tutturamıyor, çünkü hero telefonda dikey
   yığılıp 1429 px'e uzuyor, masaüstünde 1209 px'e iniyor. Bu yüzden değer
   kırılma noktasına göre ayrı: telefon/tablet %56, iki sütuna geçtikten
   sonra %40. Dördü de ölçüldü — olcum/alan_kenari.js her ölçüde kenarın
   hangi satırları kestiğini sayar ve kasıtlı bozuk bir kenarla kendini
   sınar.

   Masaüstü değeri "kesişmeyen en büyük yüzde" diye AYARLANMADI; bir KURALA
   bağlandı: iki sütunlu düzende METİN SÜTUNUNUN TAMAMI kâğıtta kalır, alan
   yalnız telefonu taşır. %42 ile %40 arasındaki fark budur — %42, 1024'te
   notun son satırını kesiyordu (satır 657–673, kenar 664) ve kesmeyen bir
   değer aramak 1 px'lik paylarla oynamak demekti; metin yeniden sarınca
   yine kesecekti. Kural hâline gelince kenarın nereye düşeceği artık
   ayarlanacak bir sayı değil, düzenin sonucu: alanın içinde hiç metin yok,
   dolayısıyla kesilecek satır da yok.

   `.hero-ic`'e z-index veriliyor ki içerik alanın üstünde kalsın; negatif
   z-index kullanılmadı (yığın bağlamına bağımlı, kırılgan). */
.hero {
  position: relative;
  padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(3rem, 7vw, 5.5rem);
}
.hero::before {
  content: '';
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  block-size: 56%;                 /* telefon/tablet — bkz. K2 */
  background: var(--alan-cayir);
  transform-origin: bottom;
  animation: alan-yuksel 620ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
@media (min-width: 900px) {
  .hero::before { block-size: 40%; }   /* metin sutunu tamamen kagitta kalir */
}
@keyframes alan-yuksel { from { transform: scaleY(0); } to { transform: scaleY(1); } }

.hero-ic { position: relative; z-index: 1; row-gap: clamp(2.5rem, 5vw, 3rem); align-items: start; }
.hero-metin { grid-column: 1 / -1; }
.hero-medya { grid-column: 1 / -1; }

@media (min-width: 900px) {
  .hero-metin { grid-column: 1 / span 7; }
  .hero-medya { grid-column: 8 / span 5; padding-top: 2.25rem; } /* kasıtlı kaydırma */
}

/* ⚠️ `font-weight: 600` KALDIRILDI (04.08.2026). Fraunces zamanında başlıkların
   tamamı 600'dü ve buradaki satır yalnız onu tekrar ediyordu. Yeni ölçekte
   display kesimi 700; satır kalsaydı sayfanın EN BÜYÜK başlığı, altındaki
   her h2/h3'ten daha İNCE çizilecekti — kademe sırasının tersi. */
.hero h1 {
  font-size: var(--olcek-h1);
  max-width: 15ch;
  margin-block: 0.9rem 0;
}

/* Değişen sektör kelimesi: sabit genişlikli kutu → CLS 0.
   Gradyan YOK; renk mürekkep kalır, altında ince marka çizgisi belirir. */
.sektor-kutu {
  display: inline-block;
  position: relative;
  min-width: 8.5ch;
  vertical-align: baseline;
}
.sektor-kelime {
  display: inline-block;
  background-image: linear-gradient(var(--marka), var(--marka));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 0.1em;
  padding-bottom: 0.04em;
  transition: opacity 260ms cubic-bezier(0.2, 0.8, 0.2, 1), transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.sektor-kelime.degisiyor { opacity: 0; transform: translate3d(0, -4px, 0); }

.hero-lede { margin-top: 1.4rem; max-width: 38ch; }
.hero-eylemler { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1.9rem; }
.hero-not { margin-top: 1.4rem; font-size: var(--olcek-kucuk); color: var(--metin-3); max-width: 40ch; }

/* Cihaz çerçevesi: saf CSS. Apple ürün render maketi KULLANILMAZ. */
.cihaz {
  position: relative;
  width: min(100%, 20rem);
  margin-inline: auto;
  padding: 0.55rem;
  background: #23282f;
  border-radius: 1.75rem;
  box-shadow: var(--golge-3);
}
.cihaz::after {
  content: '';
  position: absolute;
  inset-inline: 38%;
  top: 0.95rem;
  height: 3px;
  border-radius: 999px;
  background: #454c55;
}
.cihaz img {
  width: 100%;
  border-radius: 1.25rem;
  background: var(--yuzey);
  aspect-ratio: 390 / 844;
  object-fit: cover;
  object-position: top center;
}
@media (min-width: 900px) {
  /* Izgara kırma #1: görsel bandın sağ kenarından taşar */
  .hero-medya .cihaz { margin-inline: 0 calc(var(--kenar) * -0.35); width: 100%; }
}
/* ⚠️ `.medya-altyazi` tanımı 04.08.2026'da sistem.css'e taşındı (F5): iç sayfalar
   da aynı altyazıyı basıyor. Görünüm değişmedi, tanım tek yerde. */

/* ---------- 2. Ne yapıyoruz — dar etiket / geniş liste, kart YOK -------- */

.yaptiklarimiz {
  padding-block: clamp(2.25rem, 4.5vw, 3.75rem);
  border-top: 1px solid var(--cizgi);
}
.yaptiklarimiz-ic { row-gap: 2rem; align-items: start; }
.yaptiklarimiz-basi { grid-column: 1 / -1; }
.yaptiklarimiz-liste { grid-column: 1 / -1; }

@media (min-width: 900px) {
  .yaptiklarimiz-basi { grid-column: 1 / span 3; position: sticky; top: 6rem; }
  .yaptiklarimiz-liste { grid-column: 5 / span 8; }
}
.yaptiklarimiz h2 { font-size: var(--olcek-h2); max-width: 12ch; margin-top: 0.7rem; }

.hizmet-satir {
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  column-gap: 1rem;
  padding-block: 1.35rem;
  border-bottom: 1px solid var(--cizgi);
}
.hizmet-satir:first-child { border-top: 1px solid var(--cizgi); }
.hizmet-no {
  font-family: 'Archivo', sans-serif;
  font-size: var(--olcek-mikro);
  font-variant-numeric: tabular-nums;
  color: var(--metin-3);
  padding-top: 0.45em;
  letter-spacing: 0.06em;
}
.hizmet-satir h3 { font-size: var(--olcek-h3); font-weight: 600; }
.hizmet-satir h3 a { color: inherit; text-decoration: none; }
.hizmet-satir h3 a:hover { color: var(--baglanti); }
.hizmet-satir p { margin-top: 0.4rem; color: var(--metin-2); font-size: var(--olcek-kucuk); max-width: 52ch; }

/* ---------- 3-4. Seçili iş bantları — tam genişlik, koyu --------------- */

.is-bant { padding-block: clamp(3.5rem, 7vw, 6rem); }
.is-ic { row-gap: 2.25rem; align-items: start; }

.is-medya { grid-column: 1 / -1; }
.is-metin { grid-column: 1 / -1; }

@media (min-width: 900px) {
  /* 7/4 — eşit sütun DEĞİL */
  .is-bant-a .is-medya { grid-column: 1 / span 7; }
  .is-bant-a .is-metin { grid-column: 9 / span 4; }
  /* Ayna simetrisi + farklı oran (4/7, boşluk da farklı yerde).
     ⚠️ `grid-row: 1` ŞART: medya DOM'da önce geliyor ve 6. sütuna konuyor;
     seyrek yerleştirme (sparse) kuralı gereği daha SOLDAKİ metin bir alt
     satıra düşüyordu — görselin yanında değil altında çıkıyordu. */
  .is-bant-b .is-metin { grid-column: 1 / span 4; grid-row: 1; }
  .is-bant-b .is-medya { grid-column: 6 / span 7; grid-row: 1; }
  .is-bant-a .is-medya, .is-bant-a .is-metin { grid-row: 1; }

  .is-bant-a .is-ana .is-cerceve img { aspect-ratio: 1440 / 1000; }
  .is-bant-b .is-ana .is-cerceve img { aspect-ratio: 1440 / 780; }

  /* Metin sütunu görselin ÜST hizasından başlar. `position: sticky` denendi
     ve geri alındı: uzun medya sütununda metni bandın altına itiyordu ve
     tam sayfa görüntüsünde yanlış okunuyordu. Boşluk burada nefes payıdır. */
  .is-metin { padding-top: 0.5rem; }
}

.is-medya-yigin { display: grid; gap: clamp(0.75rem, 1.6vw, 1.15rem); }

/* ⚠️ `.is-cerceve` tanımı 04.08.2026'da sistem.css'e TAŞINDI (F5): aynı çerçeveyi
   vaka sayfaları da kullanıyor ve kural iki dosyada yaşayamaz. Seçici orada eski
   adı da içeriyor, bu yüzden buradaki markup ve çıktı değişmedi. Aşağıdaki
   aspect-ratio kuralları BURADA kalır — onlar bu bandın kendi kararı. */

/* Mobil-önce: yatay ekran görüntüsü DİKEY kırpılır — telefonda küçük bir
   şeride sıkışmasın, üst kısmı (logo + başlık + eylem) okunur kalsın. */
.is-bant-a .is-ana .is-cerceve img { aspect-ratio: 5 / 6; }
.is-bant-b .is-ana .is-cerceve img { aspect-ratio: 5 / 6; }
.is-ikincil .is-cerceve img { aspect-ratio: 16 / 10; }
.is-bant-b .is-ikincil .is-cerceve img { aspect-ratio: 390 / 844; }
.is-ikincil { width: 72%; }
.is-bant-a .is-ikincil { justify-self: end; }
.is-bant-b .is-ikincil { justify-self: start; width: 44%; }
.is-medya-altyazi { margin-top: 0.55rem; font-size: var(--olcek-mikro); color: var(--metin-2); }

.is-metin .ust-etiket { margin-top: 0.35rem; }
.kunye-deger-hafif { font-weight: 400; }
.is-metin h2 { font-size: var(--olcek-h2-kucuk); margin-block: 0.6rem 0; } /* ikinci h2 boyu */
.is-metin .lede { margin-top: 1rem; }
.is-yapilanlar { margin-top: 1.5rem; display: flex; flex-wrap: wrap; gap: 0.45rem 1.4rem; }
.is-yapilanlar li {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--olcek-kucuk);
  color: var(--metin-2);
}
/* ⚠️ İkon rengi ham `--marka` idi. Bantlar koyuyken doğruydu (#00bffe koyuda
   8,90:1); bant işin rengine dönünce aynı ton çayırda 1,70:1'e düşüyor ve onay
   işareti kayboluyordu. Bağlam jetonuna çevrildi: kâğıtta/renkli alanda koyu
   mavi (5,96 / 4,98), koyu bantta parlak mavi (8,90). Jeton değişmeden üç
   zeminde de doğru — F4'teki `.lede` kazasının aynısını burada önlüyor. */
.is-yapilanlar svg { width: 0.85em; height: 0.85em; color: var(--baglanti); flex: none; }
.is-eylem { margin-top: 1.75rem; display: flex; flex-wrap: wrap; gap: 0.7rem; }

/* ---------- 5. Sektörler — ölçüsüz ızgara, bir hücre bilinçli boş ------- */

.sektorler { padding-block: clamp(2.75rem, 5.5vw, 4.25rem); }
.sektorler-basi { max-width: 46ch; margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.sektorler-basi h2 { margin-top: 0.7rem; font-size: var(--olcek-h2-kucuk); }

.sektor-izgara { row-gap: 0; }
.sektor-hucre {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.35rem;
  padding-block: 1.2rem;
  border-top: 1px solid var(--cizgi-guclu);
  text-decoration: none;
  color: var(--metin);
  min-height: 44px;
}
/* Üzerine gelme vurgusu YALNIZ gerçekten bağlantı olan hücrede. Ayrıntı
   sayfaları hazır olmadığında hücre <div> basılıyor (F4'e kadar); tıklanabilir
   izlenimi vermemeli. Kapanış hücresi (sektor-hucre-4) de zaten <div>. */
a.sektor-hucre:hover .sektor-ad { background-size: 100% 0.12em; }
.sektor-ad {
  font-size: var(--olcek-h3);
  font-weight: 700;
  letter-spacing: -0.012em;
  background-image: linear-gradient(var(--marka), var(--marka));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 0.12em;
  transition: background-size var(--gecis);
  align-self: flex-start;
}
.sektor-not { font-size: var(--olcek-kucuk); color: var(--metin-2); }

/* Görselli hücre — ızgaranın ritmini kıran tek öge */
.sektor-gorsel { grid-column: 1 / -1; padding-block: 1.5rem; }
.sektor-gorsel img {
  width: 100%;
  border-radius: var(--yaricap-kart);
  border: 1px solid var(--cizgi);
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center;
}
@media (min-width: 760px) { .sektor-gorsel img { aspect-ratio: 960 / 600; } }
.sektor-gorsel figcaption { margin-top: 0.7rem; font-size: var(--olcek-mikro); color: var(--metin-3); }

@media (min-width: 760px) {
  /* Sütun genişlikleri KASITLI olarak farklı: 5 / 3 / 4 ve 4 / 8 */
  .sektor-hucre-1 { grid-column: 1 / span 5; }
  .sektor-hucre-2 { grid-column: 6 / span 3; }
  .sektor-hucre-3 { grid-column: 9 / span 4; }
  .sektor-gorsel { grid-column: 1 / span 7; }
  .sektor-hucre-4 { grid-column: 9 / span 4; align-self: end; margin-bottom: 3.5rem; }
  /* 8 / 12 sütunluk boşluk bilinçlidir — doldurulmayacak */
}

/* ---------- 6. Nasıl çalışıyoruz — yapışkan başlık + akan adımlar ------ */

.surec {
  padding-block: clamp(3rem, 6vw, 5rem);
  border-top: 1px solid var(--cizgi);
}
.surec-ic { row-gap: 2rem; align-items: start; }
.surec-basi { grid-column: 1 / -1; }
.surec-adimlar { grid-column: 1 / -1; }
@media (min-width: 900px) {
  .surec-basi { grid-column: 1 / span 4; position: sticky; top: 6rem; }
  .surec-adimlar { grid-column: 6 / span 7; }
}
.surec h2 { font-size: var(--olcek-h2); margin-top: 0.7rem; max-width: 10ch; }
.surec-basi p { margin-top: 1rem; color: var(--metin-2); font-size: var(--olcek-kucuk); max-width: 34ch; }

.adim { position: relative; padding-block: 1.6rem; border-top: 1px solid var(--cizgi); }
.adim:last-child { border-bottom: 1px solid var(--cizgi); }
.adim h3 { font-size: var(--olcek-h3); }
.adim p { margin-top: 0.45rem; color: var(--metin-2); font-size: var(--olcek-kucuk); max-width: 54ch; }
.adim .kenar-notu { display: block; margin-bottom: 0.35rem; }
@media (min-width: 1180px) {
  /* Izgara kırma #2: adım numarası ızgaranın DIŞINA, kenar boşluğuna taşar */
  .adim .kenar-notu { position: absolute; inset-inline-start: -4.25rem; top: 1.9rem; margin: 0; }
}

/* ---------- 7. Tek cümlelik kanıt — SAYFADAKİ TEK ORTALANMIŞ BÖLÜM ----- */

.kanit {
  padding-block: clamp(3.25rem, 6.5vw, 5.5rem);
  background: var(--zemin);
  border-top: 1px solid var(--cizgi);
}
.kanit-ic { max-width: 30rem; margin-inline: auto; text-align: center; }
.kanit p {
  font-size: var(--olcek-dev);
  line-height: 1.12;
  font-weight: 700;
  letter-spacing: -0.026em;
  text-wrap: balance;
}
.kanit .kaynak { margin-top: 1.25rem; font-size: var(--olcek-kucuk); color: var(--metin-3); font-weight: 400; }

/* ---------- 8. İletişim — koyu, asimetrik ------------------------------ */

.iletisim { padding-block: clamp(3.5rem, 7vw, 6rem); }
.iletisim-ic { row-gap: 2.5rem; align-items: start; }
.iletisim-sol { grid-column: 1 / -1; }
.iletisim-sag { grid-column: 1 / -1; }
@media (min-width: 900px) {
  .iletisim-sol { grid-column: 1 / span 7; }
  .iletisim-sag { grid-column: 9 / span 4; padding-top: 0.6rem; }
}
.iletisim h2 { font-size: var(--olcek-h2); max-width: 16ch; margin-top: 0.7rem; }
.iletisim .lede { margin-top: 1.1rem; max-width: 44ch; }
.iletisim-eylemler { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1.9rem; }

.iletisim-kunye { display: grid; gap: 1.1rem; }
.kunye-satir { display: grid; gap: 0.15rem; }
.kunye-etiket {
  font-size: var(--olcek-mikro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--metin-2);
}
.kunye-deger { color: var(--metin); font-weight: 600; font-variant-numeric: tabular-nums; }
.kunye-deger a { color: var(--metin); text-decoration: none; }
/* ⚠️ HAM JETON, RENKLİ ZEMİNE DÜŞTÜ — F4'teki `.lede` kazasının tıpatıp aynısı.
   Bu satır `color: var(--marka)` yazıyordu ve iletişim bandı v2'de sayfanın
   kendi zeminindeyken doğruydu. Bant 05.08'de dolu gradyan adaya (`.blok`)
   döndü; ada `--baglanti`yı beyaza çeviriyor ama `--marka` HAM olduğu için
   gradyanın kendi rengi olarak kalıyor. Ölçüldü:
       --marka #3c43dd / gradyan başı #3c43dd   1,00:1   → tamamen görünmez
       --marka #3c43dd / gradyan sonu #601799   1,46:1
       --baglanti-uzeri (ada içinde #ffffff)    6,91:1 / 10,10:1
   Yani künye bağlantısının üzerine gelen kullanıcı yazıyı KAYBEDİYORDU —
   üzerine gelme, bir vurgu değil bir silme jesti olmuştu. Bağlam jetonuna
   çevrildi; jeton değişmeden hem sayfa zemininde hem adada doğru. */
.kunye-deger a:hover { color: var(--baglanti-uzeri); }

/* NOT: `content-visibility: auto` denendi ve KALDIRILDI.
   Ekran görüntüsünde ve tam sayfa yazdırmada görünmeyen bölümler HİÇ
   çizilmiyor; sayfa yüksekliği de kararsız hale geliyordu. Bu sayfada
   uzun liste yok, kazanç yok — risk var. Uzun arşiv sayfalarında (F5)
   ölçülerek yeniden değerlendirilecek. */