/*
 * Tekstok tanıtım sitesi — stil.
 *
 * ── Ana kararlar (tasarım brief'i, 10.09.2026) ──
 *
 * 1. HERO KOYU, GERİSİ AÇIK. Baştan sona koyu sayfa esnaf gözünde
 *    "yazılımcı sitesi" hissi veriyordu; açık bölümler ekran görüntülerini de
 *    daha iyi gösteriyor. Bu yüzden sayfa TEK TEMALI: `prefers-color-scheme`
 *    ile tema değiştirmiyor, tasarım kendi kontrastını taşıyor.
 * 2. TEK VURGU RENGİ: logodaki mavi. Kanal marka renkleri yalnız logolarda.
 * 3. Düğme yarıçapı 10px — tam yuvarlak (pill) düğmeler şablon hissinin ana
 *    kaynağıydı.
 * 4. Bölüm zemini TAM GENİŞLİK, içerik 1200px'de ortalanır. Eskiden ölçü
 *    bölümün kendisindeydi ve geniş ekranda sağda farklı tonda şerit
 *    kalıyordu.
 */

:root {
  /*
   * Vurgu — logodaki mavinin ERİŞİLEBİLİR tonu.
   *
   * Logonun kendi mavisi (#6B8CFF) beyaz üstünde 2,6:1 veriyor; metin ve
   * düğme için WCAG AA'nın istediği 4,5:1'in çok altında. Ölçüldü
   * (10.09.2026): #3b6bff bile 4,44:1 ile sınırın altında kalıyordu.
   * #3665f5 beyazda 4,84:1, açık gri yüzeyde 4,55:1 veriyor ve gözle
   * logodan ayırt edilmiyor. Logo kendi tonunu koruyor.
   */
  --marka: #3665f5;
  --marka-koyu: #2a52d6;
  --marka-acik: #eef2ff;

  /* Açık bölümler */
  --zemin: #ffffff;
  --yuzey: #f6f8fb;
  --metin: #0f1720;
  --soluk: #5a6675;
  --cizgi: #e3e8ef;

  /* Koyu bölümler (hero) */
  --koyu-zemin: #0d141c;
  --koyu-metin: #f4f7fa;
  --koyu-soluk: #9aa7b6;
  --koyu-cizgi: #22303f;

  --radius: 10px;
  --radius-buyuk: 14px;
  --olcu: 1200px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
/* Yapışkan başlık çapaya inen bölümün üstünü kesmesin */
:target { scroll-margin-top: 5.5rem; }

body {
  margin: 0;
  background: var(--zemin);
  color: var(--metin);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 {
  font-family: Manrope, Inter, -apple-system, BlinkMacSystemFont, sans-serif;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0;
}

a { color: inherit; }

/* Zemin tam genişlik, İÇERİK ortalı — brief madde 2 */
.kusak {
  width: 100%;
  max-width: var(--olcu);
  margin: 0 auto;
  padding-left: clamp(1.25rem, 4vw, 2.5rem);
  padding-right: clamp(1.25rem, 4vw, 2.5rem);
}

.bolum { padding: clamp(3rem, 6vw, 4.5rem) 0; }
.bolum-yuzey { background: var(--yuzey); }

.etiket {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--marka);
  margin: 0 0 0.7rem;
}
.bolum-baslik { font-size: clamp(1.7rem, 3.2vw, 2.35rem); margin: 0 0 0.85rem; }
.bolum-alt { color: var(--soluk); max-width: 46rem; margin: 0 0 2.25rem; }

/* ── Düğmeler ── */
.dugme, .dugme-ikincil, .dugme-koyu {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.72rem 1.3rem;
  border-radius: var(--radius);
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid transparent;
  transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.dugme { background: var(--marka); color: #fff; }
.dugme:hover { background: var(--marka-koyu); }
.dugme-ikincil { border-color: var(--cizgi); color: var(--metin); background: var(--zemin); }
.dugme-ikincil:hover { background: var(--yuzey); }
/* Koyu zemindeki ikincil düğme */
.dugme-koyu { border-color: var(--koyu-cizgi); color: var(--koyu-metin); }
.dugme-koyu:hover { background: rgba(255, 255, 255, 0.06); }
:is(.dugme, .dugme-ikincil, .dugme-koyu):focus-visible {
  outline: 3px solid var(--marka);
  outline-offset: 2px;
}

/* ── Üst çubuk ── */
/*
 * Yapışkan ve saydam: sayfa kaydıkça arkası bulanıklaşıyor. `backdrop-filter`
 * desteklenmeyen tarayıcıda düz zemine düşüyor, okunurluk bozulmuyor.
 */
.ust {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(13, 20, 28, 0.82);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--koyu-cizgi);
  color: var(--koyu-metin);
}
.ust-ic {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding-top: 0.85rem;
  padding-bottom: 0.85rem;
}
.marka-blok { display: flex; flex-direction: column; gap: 0.1rem; text-decoration: none; }
.logo { width: clamp(7.5rem, 11vw, 9rem); height: auto; color: #fff; display: block; }
.marka-slogan { font-size: 0.7rem; color: var(--koyu-soluk); letter-spacing: 0.01em; }

.ust-menu { display: none; gap: 1.6rem; margin-left: auto; font-size: 0.92rem; }
.ust-menu a { color: var(--koyu-soluk); text-decoration: none; }
.ust-menu a:hover { color: var(--koyu-metin); }
.ust-eylem { display: none; gap: 0.6rem; }
@media (min-width: 62rem) {
  .ust-menu, .ust-eylem { display: flex; }
  .ust-eylem { margin-left: 0.5rem; }
}
.ust .dugme-ikincil { background: transparent; border-color: var(--koyu-cizgi); color: var(--koyu-metin); }
.ust .dugme-ikincil:hover { background: rgba(255, 255, 255, 0.06); }

/*
 * MOBİL MENÜ JAVASCRIPT'SİZ.
 *
 * Gizli bir onay kutusu açık/kapalı durumu tutuyor; etiket düğme gibi
 * davranıyor. Sayfada hiç betik yok, CSP (`script-src 'none'`) olduğu gibi
 * kalıyor. Onay kutusu ekran okuyucudan gizlenmiyor — `aria-label` taşıyor ve
 * klavyeyle boşlukla açılıyor.
 */
.menu-kutu { position: absolute; opacity: 0; pointer-events: none; }
.menu-dugme {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--koyu-cizgi);
  border-radius: var(--radius);
  cursor: pointer;
  color: var(--koyu-metin);
}
.menu-kutu:focus-visible ~ .ust-ic .menu-dugme { outline: 3px solid var(--marka); outline-offset: 2px; }
.menu-dugme svg { width: 1.15rem; height: 1.15rem; }
.mobil-menu { display: none; padding-bottom: 1rem; }
.menu-kutu:checked ~ .mobil-menu { display: block; }
.mobil-menu a {
  display: block;
  padding: 0.6rem 0;
  color: var(--koyu-soluk);
  text-decoration: none;
  border-top: 1px solid var(--koyu-cizgi);
}
.mobil-menu .dugme { margin-top: 0.75rem; width: 100%; border-top: 0; color: #fff; }
@media (min-width: 62rem) { .menu-dugme, .mobil-menu { display: none; } }

/* ── Hero ── */
.giris {
  background: var(--koyu-zemin);
  color: var(--koyu-metin);
  padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(2.5rem, 5vw, 3.5rem);
}
.giris-ic { display: grid; gap: clamp(2rem, 5vw, 3.5rem); align-items: center; }
@media (min-width: 64rem) { .giris-ic { grid-template-columns: 1.05fr 1fr; } }
/*
 * EKRAN GÖRÜNTÜSÜ GELENE KADAR TEK SÜTUN.
 *
 * İki sütunlu düzende sağ yarı görselin yeri; görsel yokken orası bomboş
 * kalıyor ve başlık dar sütunda ikinci satıra kırılıyor. Görsel eklenince
 * `giris-tek` sınıfı kaldırılır, kural kendiliğinden iki sütuna döner.
 */
@media (min-width: 64rem) {
  .giris-tek { grid-template-columns: 1fr; }
  .giris-tek > div { max-width: 54rem; }
}

.giris-etiket {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.85rem;
  margin: 0 0 1.1rem;
  font-size: 0.78rem;
  color: var(--koyu-soluk);
}
.giris-etiket span { display: inline-flex; align-items: center; gap: 0.85rem; }
/* Ayraç yalnız tek satıra sığdığında; dar ekranda satır başına düşen "·" öksüz duruyordu */
@media (min-width: 48rem) {
  .giris-etiket span + span::before { content: "·"; color: var(--koyu-cizgi); }
}
.giris h1 { font-size: clamp(2.5rem, 5.2vw, 4rem); font-weight: 800; margin: 0 0 1.1rem; }
.giris h1 em { font-style: normal; color: #8fa9ff; }
.giris-metin { color: var(--koyu-soluk); font-size: clamp(1rem, 1.3vw, 1.1rem); margin: 0 0 1.75rem; }
.giris-eylem { display: flex; flex-wrap: wrap; gap: 0.7rem; }
.giris-not { font-size: 0.85rem; color: var(--koyu-soluk); margin: 1rem 0 0; }

/* ── Ekran görüntüsü çerçevesi ── */
/* Tarayıcı süsü CSS ile; görselin kendisi ham ekran görüntüsü olarak duruyor */
.ekran {
  border: 1px solid var(--koyu-cizgi);
  border-radius: var(--radius-buyuk);
  overflow: hidden;
  background: #131c26;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}
.ekran-cubuk {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.6rem 0.8rem;
  border-bottom: 1px solid var(--koyu-cizgi);
}
.ekran-cubuk i { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--koyu-cizgi); }
.ekran-adres {
  margin-left: 0.6rem;
  flex: 1;
  height: 1.35rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  display: flex;
  align-items: center;
  padding: 0 0.7rem;
  font-size: 0.68rem;
  color: var(--koyu-soluk);
}
.ekran img { display: block; width: 100%; height: auto; }
/* Açık bölümlerdeki küçük çerçeveler */
.ekran-acik { border-color: var(--cizgi); background: var(--yuzey); box-shadow: 0 10px 30px rgba(15, 23, 32, 0.07); }
.ekran-acik .ekran-cubuk { border-color: var(--cizgi); }
.ekran-acik .ekran-cubuk i { background: var(--cizgi); }
.ekran-acik .ekran-adres { background: rgba(15, 23, 32, 0.05); color: var(--soluk); }

/* ── Entegrasyon şeridi ── */
/*
 * ŞERİT BEYAZ ZEMİNDE.
 *
 * Kanal logolarının üçü (Trendyol, Hepsiburada, Ticimax) beyaz zeminli
 * geliyor ve koyu şeritte beyaz kutu gibi duruyorlardı. Hepsiburada'nın
 * halkasının İÇİ de beyaz — saydamlaştırmak logoyu deler. Şeridi beyaza
 * almak beşini birden doğru gösteriyor.
 */
.kanallar { background: var(--zemin); border-bottom: 1px solid var(--cizgi); }
.kanallar .kusak { padding-top: 1.6rem; padding-bottom: 1.6rem; }
.kume-liste { display: grid; gap: 1.5rem; }
@media (min-width: 48rem) { .kume-liste { grid-template-columns: 2fr 1fr 1fr; } }
.kanal-baslik {
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--soluk);
  margin: 0 0 0.7rem;
}
.kanal-liste { display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem 1.75rem; }
.kanal-ad { display: inline-flex; align-items: center; font-size: 1.02rem; font-weight: 700; color: var(--soluk); }
/*
 * Tek renk (gri), üzerine gelince ÖZGÜN renk — brief madde 5. Dosyaların
 * yükseklikleri eşit DEĞİL, optik olarak dengeli: kare logo aynı yükseklikte
 * küçük görünüyor, geniş ve kalın olan baskın çıkıyor.
 */
.kanal-ad img {
  display: block;
  max-width: 100%;
  height: auto;
  filter: grayscale(1) opacity(0.68);
  transition: filter 0.18s ease;
}
.kanal-ad:hover img { filter: none; }

/* ── Kart ızgaraları ── */
.izgara { display: grid; gap: 1.25rem; }
.izgara-2 { grid-template-columns: 1fr; }
.izgara-3 { grid-template-columns: 1fr; }
@media (min-width: 48rem) { .izgara-2, .izgara-3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .izgara-3 { grid-template-columns: repeat(3, 1fr); } }

.kart {
  background: var(--zemin);
  border: 1px solid var(--cizgi);
  border-radius: var(--radius-buyuk);
  padding: 1.6rem;
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.kart:hover { box-shadow: 0 12px 30px rgba(15, 23, 32, 0.07); border-color: #d3dae5; }
.kart h3 { font-size: 1.1rem; margin: 0 0 0.55rem; }
.kart p { color: var(--soluk); margin: 0; font-size: 0.95rem; }
.kart .ekran { margin-top: 1.25rem; }

.kart-ikon {
  width: 2.4rem;
  height: 2.4rem;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--marka-acik);
  color: var(--marka-koyu);
  margin-bottom: 1rem;
}
.kart-ikon svg { width: 1.2rem; height: 1.2rem; }

/* ── Özellik listesi: onay ikonlu ── */
.onay-liste { list-style: none; margin: 0; padding: 0; color: var(--soluk); font-size: 0.92rem; }
.onay-liste li { padding: 0.3rem 0 0.3rem 1.55rem; position: relative; }
.onay-liste li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 0.85rem;
  height: 0.85rem;
  background: var(--marka);
  /* Onay işareti maske olarak: ikon dosyası yüklemeden, tek renkle */
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ── Fiyatlandırma ── */
.fiyat-kart {
  background: var(--zemin);
  border: 1px solid var(--cizgi);
  border-radius: var(--radius-buyuk);
  padding: clamp(1.6rem, 3vw, 2.5rem);
  display: grid;
  gap: 2rem;
  box-shadow: 0 16px 40px rgba(15, 23, 32, 0.06);
}
@media (min-width: 60rem) { .fiyat-kart { grid-template-columns: 1.3fr 1fr; } }
.fiyat-kart .bolum-alt { margin-bottom: 1.1rem; }
.fiyat-dahil { background: var(--yuzey); border-radius: var(--radius); padding: 1.4rem; }
.fiyat-dahil h3 { font-size: 0.95rem; margin: 0 0 0.85rem; }

/* ── Sık sorulanlar ── */
.sss { max-width: 52rem; }
.sss details { border-bottom: 1px solid var(--cizgi); }
.sss summary {
  cursor: pointer;
  padding: 1.05rem 2.5rem 1.05rem 0;
  font-family: Manrope, Inter, sans-serif;
  font-weight: 600;
  list-style: none;
  position: relative;
}
.sss summary::-webkit-details-marker { display: none; }
.sss summary:focus-visible { outline: 3px solid var(--marka); outline-offset: 2px; }
/* Artı işareti; açıkken 45° dönüp çarpıya benziyor */
.sss summary::after {
  content: "";
  position: absolute;
  right: 0.35rem;
  top: 1.35rem;
  width: 0.9rem;
  height: 0.9rem;
  background: var(--soluk);
  transition: transform 0.18s ease;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / contain no-repeat;
}
.sss details[open] summary::after { transform: rotate(45deg); }
.sss p { color: var(--soluk); margin: 0 0 1.1rem; max-width: 46rem; }

/* ── Kapanış ── */
.kapanis { background: linear-gradient(180deg, var(--marka-acik), #ffffff); text-align: center; }
.kapanis h2 { font-size: clamp(1.7rem, 3.2vw, 2.35rem); margin: 0 0 0.8rem; }
.kapanis p { color: var(--soluk); margin: 0 auto 1.75rem; max-width: 38rem; }
.kapanis-yan { font-size: 0.88rem; color: var(--soluk); margin: 1.1rem auto 0; }

/* ── Alt bilgi ── */
.alt { background: var(--koyu-zemin); color: var(--koyu-soluk); }
.alt .kusak { padding-top: 2.75rem; padding-bottom: 2.25rem; }
.alt-izgara { display: grid; gap: 2rem; }
@media (min-width: 48rem) { .alt-izgara { grid-template-columns: 1.7fr 1fr 1fr; } }
.alt .logo { margin-bottom: 0.5rem; }
/* Alt bilgi sütun başlıkları h3: h2'den h4'e atlamak başlık sırasını bozuyordu */
.alt h3 { font-size: 0.85rem; color: var(--koyu-metin); margin: 0 0 0.75rem; }
.alt ul { list-style: none; margin: 0; padding: 0; font-size: 0.88rem; }
.alt li { padding: 0.22rem 0; }
.alt a { color: var(--koyu-soluk); text-decoration: none; }
.alt a:hover { color: var(--koyu-metin); text-decoration: underline; }
.alt p { font-size: 0.88rem; margin: 0 0 0.5rem; }
.alt-slogan { color: var(--koyu-metin); font-weight: 600; }
.alt-telif {
  border-top: 1px solid var(--koyu-cizgi);
  margin-top: 2rem;
  padding-top: 1.15rem;
  font-size: 0.82rem;
}

/* ── Metin sayfası (gizlilik) ── */
.metin-sayfa { max-width: 46rem; }
.metin-sayfa h1 { font-size: clamp(1.8rem, 3.6vw, 2.4rem); margin: 0 0 0.4rem; }
.metin-sayfa h2 { font-size: 1.1rem; margin: 2.15rem 0 0.5rem; }
.metin-sayfa p, .metin-sayfa li { color: var(--soluk); }
.metin-sayfa ul { padding-left: 1.1rem; }
.metin-sayfa a { color: var(--marka-koyu); }