/* ==========================================================================
   AirSEOtools VİTRİN — ANA SİTE KİTİ üstüne vitrine özgü küçük düzen
   --------------------------------------------------------------------------
   Claude · 30.09.2026. Eren: «daha önce belirlediğimiz tasarım kiti
   airtools.com.tr ile uymamış. Tasarım olarak uyarlayalım.»
   17.09.2026 sürümü vitrini uygulamanın Sakin Kâğıt kitine (serif başlık,
   kâğıt tonlu bant) giydiriyordu; ziyaretçi AirTools sitesinin ortasında başka bir
   markaya düşüyordu. Artık sayfa diğer araç tanıtımlarıyla (lib/gate.php)
   AYNI iskelet ve dilde: style.css .gate · .benefit · .steps · .faq · .btn.
   Sakin Kâğıt yalnız giriş arkasındaki uygulamada (airseo.css) kalır.

   KURALLAR
   - Yazı tipi tanımı YOK: Poppins style.css'ten gelir.
   - Renk/yarıçap yalnız style.css :root jetonlarından (var(--…)); yeni hex yok.
   - Mobil sıralama style.css'in A-04 kuralına bırakılır: .gate-side için
     `order` YAZILMAZ — H1 ve tanıtım giriş kutusundan önce gelir.
   ========================================================================== */

/* --- düzen ---
   04.10.2026 (I-160 P1): yan sütunda giriş kutusu yok, yalnız diğer araçlar
   kalır. Yapışkan 1fr sütun ana sütunu ~645px'e daraltıyordu; vitrin tek
   sütun, diğer araçlar sayfanın sonuna akar. Yalnız bu sayfa: lib/gate.php
   kullanan araç tanıtımları iki sütunlu kalır. `order` yine YAZILMAZ (A-04). */
.as-vitrin.gate{grid-template-columns:minmax(0,1fr)}
.as-vitrin.gate{display:block;max-width:none;padding:0}
.as-vitrin .gate-side{position:static}
.as-vitrin .gate-tools{grid-template-columns:repeat(auto-fit,minmax(12rem,1fr))}
/* Tek sütunda bekleme kartı 1100px'e yayılıyor, e-posta kutusu satır boyu
   uzuyordu; form okunur genişlikte kalır. */
.as-vitrin .as-kars-sag{max-width:40rem}

/* --- kahraman --- */
/* Kelime markası: Air lacivert + SEOtools mavi kilidi (airseotools-logo.svg). */
.as-vitrin .as-vitrin-logo{display:block;width:230px;max-width:70%;height:auto;margin:0 0 1.25rem}
/* 04.10.2026 (tasarım düzeltmesi): ana sitenin ölçeği. Kahraman ana sayfadaki
   .hero > .hero-in ile aynı iskelet; h1 --fs-h1-vitrin (bare h1), h2 --fs-h2-vitrin;
   her bölüm .band (--sec-y); kartlar .std ile aynı (padding a-4, --r, çizgi, gölgesiz). */
.as-vitrin .as-hero h1{max-width:20ch;margin-bottom:var(--a-3h)}
.as-vitrin .as-hero .lead{font-size:var(--fs-lead);line-height:1.6;color:var(--ink2);max-width:56ch}
.as-vitrin .as-hero .as-vitrin-eylem{margin-top:var(--a-3h)}
.as-vitrin.gate .sec h2{max-width:44rem;margin-bottom:var(--sec-y-s);font-size:var(--fs-h2-vitrin)}
.as-vitrin .benefit{padding:var(--a-4);background:var(--paper);border-radius:var(--r)}
.as-vitrin .benefit h3{font-size:var(--fs-kart);margin-bottom:var(--a-1)}
.as-vitrin .benefit p{line-height:1.58}
.as-vitrin .gate-box{box-shadow:none}
.as-vitrin .as-kars-tablo{border-radius:var(--r)}

/* --- Ne sağlar? ---
   Dört fayda 2×2: ana kitin auto-fit(11rem) ızgarası bu sütunda 3+1 yetim
   satır bırakıyordu. Telefonda tek sütun. */
.as-vitrin .as-vitrin-fayda{grid-template-columns:repeat(2,minmax(0,1fr))}

/* --- SSS ---
   style.css'in `float:right` «+» işareti telefonda uzun sorunun altına
   düşüyordu («Google hesabıma erişiyor musunuz?» — 390px, 30.09.2026).
   Esnek satırda işaret sağda sabit kalır, soru kendi sütununda sarar. */
.as-vitrin .faq summary{display:flex;align-items:center;gap:1rem}
.as-vitrin .faq summary::after{float:none;margin-left:auto;flex:none}

/* --- Ücretsiz ve ücretli ---
   Geniş ekranda 3 sütunlu tablo, ana kitin kart diliyle (çizgi + r-sm köşe).
   760px altında her satır yığın kart olur, hücredeki «Ücretsiz:» /
   «Ücretli:» etiketi görünür. Yatay kaydırma yok. */
.as-vitrin .as-kars-tablo{
  width:100%;table-layout:fixed;border-collapse:separate;border-spacing:0;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;
}
.as-vitrin .as-kars-tablo thead th:first-child{width:26%}
.as-vitrin .as-kars-tablo thead th:nth-child(2){width:34%}
.as-vitrin .as-kars-tablo th,
.as-vitrin .as-kars-tablo td{
  text-align:left;vertical-align:top;padding:.8rem 1rem;border-bottom:1px solid var(--line);
  font-size:.9125rem;line-height:1.55;overflow-wrap:anywhere;
}
.as-vitrin .as-kars-tablo tbody tr:last-child > *{border-bottom:0}
/* Sütun başlığı ana kitin tablo başlığıdır (style.css th: .75rem büyük harf). */
.as-vitrin .as-kars-tablo thead th{background:var(--paper2);font-size:.75rem;color:var(--ink2)}
/* Satır adı bir ÖZELLİK adıdır, sütun başlığı değil: style.css'in `th`
   büyük harf + harf aralığı kuralı «GOOGLE SEARCH CONSOLE»u üç satıra
   bölüyordu (ölçüldü 30.09.2026). */
.as-vitrin .as-kars-tablo tbody th{font-weight:600;color:var(--navy);text-transform:none;letter-spacing:-.011em}
.as-vitrin .as-kars-tablo td{color:var(--ink2)}
.as-vitrin .as-kars-etiket{display:none}

/* Tablonun altı: birincil düğme «Ücretsiz» sütununun hizasında, bekleme
   kartı onun altında iki sütun genişliğinde (tek sütunda kart 260px'e
   sıkışıp başlığı üç satıra bölüyordu — ölçüldü 30.09.2026). */
.as-vitrin .as-kars-alt{display:block;margin-top:1.25rem}
.as-vitrin .as-kars-sol,
.as-vitrin .as-kars-sag{padding-left:0;margin-left:0}
.as-vitrin .as-kars-sol{margin-bottom:1.25rem}

/* Bekleme kartı (app/_bekleme_kart.php) — ana kitin .gate-box.soft dili.
   Kartın uygulamadaki görünümü airseo.css'te; burası yalnız vitrin. */
.as-vitrin .as-bekleme{
  padding:1.35rem 1.3rem;background:var(--paper2);
  border:1px solid var(--line);border-radius:var(--r);
}
.as-vitrin .as-bekleme .as-kart-govde{margin:0;padding:0}
.as-vitrin .as-bekleme .as-rozet{
  display:inline-flex;align-items:center;min-height:26px;padding:0 .65rem;
  font-size:.75rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  border-radius:999px;background:var(--tint2);border:1px solid var(--line);color:var(--navy);
}
.as-vitrin .as-bekleme h2{font-size:1.15rem;line-height:1.25;color:var(--navy)}
.as-vitrin .as-bekleme .as-metin-soluk{margin:0 0 1rem;font-size:.9125rem;line-height:1.6;color:var(--ink2)}
.as-vitrin .as-bekleme .as-etiket{display:block;margin:0 0 .45rem;font-size:.8375rem;font-weight:600;color:var(--ink)}
.as-vitrin .as-bekleme .as-girdi{
  display:block;width:100%;min-height:48px;padding:.75rem .9rem;margin:0 0 .9rem;
  font-family:inherit;font-size:1rem;color:var(--ink);
  /* 04.10.2026 (I-160 P1): --line paper üstünde 1.24:1 — WCAG 1.4.11 (3:1) altı.
     Sitenin form alanlarıyla (style.css .field input) aynı --ink3: 5.35:1. */
  background:var(--paper);border:1.5px solid var(--ink3);border-radius:var(--r-xs);
}
.as-vitrin .as-bekleme .as-girdi:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 4px var(--tint2)}
/* Rıza kutusu: 13px tarayıcı varsayılanı WCAG 2.5.8'in 24px alt sınırının altındaydı. */
.as-vitrin .as-bekleme input[type="checkbox"]{width:1.5rem;height:1.5rem;margin:0;accent-color:var(--blue)}
.as-vitrin .as-bekleme label[for="as-bekleme-riza"]{margin:0 0 1rem;font-size:.875rem;line-height:1.5;color:var(--ink2)}
.as-vitrin .as-bekleme .as-btn{
  display:flex;width:100%;align-items:center;justify-content:center;
  min-height:48px;padding:.8rem 1.6rem;
  font-family:inherit;font-size:1rem;font-weight:600;letter-spacing:-.012em;
  color:var(--paper);background:var(--blue);border:2px solid transparent;border-radius:999px;cursor:pointer;
  transition:background .2s var(--ease);
}
.as-vitrin .as-bekleme .as-btn:hover{background:var(--navy)}
.as-vitrin .as-bekleme .as-mesaj{margin:0 0 1rem;padding:.75rem 1rem;background:var(--paper);border-left:3px solid var(--line);border-radius:var(--r-xs);font-size:.9125rem;color:var(--ink)}
.as-vitrin .as-bekleme .as-mesaj-iyi{border-left-color:var(--ok)}
.as-vitrin .as-bekleme .as-mesaj-kotu{border-left-color:var(--bad)}

/* --- Paketler (Faz 4, 02.10.2026) ---
   Yalnız satış açıkken çizilir (lib/airseo-satis.php). İki paket yan yana;
   Ofis (3 site) ayrı kart değil, paketin altında tek satır: aynı işin
   üç sitelik hâli, dört kart karar yükünü artırıyordu. «Önerilen» rozeti
   YOK — satış başlamadan «en çok tercih edilen» demek uydurma kanıt olur.
   Yükseklik eşitlenir, düğme kartın dibine oturur. */
.as-vitrin .as-paket-giris{margin:0 0 var(--a-4);color:var(--ink2);max-width:60ch}
.as-vitrin .as-paket-izgara{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--a-4)}
.as-vitrin .as-paket{
  display:flex;flex-direction:column;gap:var(--a-2);
  padding:var(--a-4);background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
}
.as-vitrin .as-paket h3{margin:0;font-size:1.25rem;color:var(--navy)}
.as-vitrin .as-paket-kim{margin:0;color:var(--ink2);line-height:1.55}
.as-vitrin .as-paket-fiyat{margin:var(--a-1) 0 0;color:var(--ink2)}
.as-vitrin .as-paket-fiyat b{font-size:2rem;line-height:1.1;font-weight:700;color:var(--ink);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.as-vitrin .as-paket-not{margin:0;font-size:.875rem;line-height:1.55;color:var(--ink3)}
.as-vitrin .as-paket .tick{margin:var(--a-1) 0}
.as-vitrin .as-paket-ofis{
  margin:auto 0 0;padding-top:var(--a-2);border-top:1px solid var(--line);
  font-size:.875rem;line-height:1.55;color:var(--ink2);
}
.as-vitrin .as-paket-ofis b{color:var(--ink)}
.as-vitrin .as-paket .btn{margin-top:var(--a-2)}
.as-vitrin .as-paket-yakinda{margin:auto 0 0;padding-top:var(--a-2);font-size:.875rem;line-height:1.55;color:var(--ink2)}
/* Kartlar arası satır hizası (04.10.2026, Eren: «gözcü ve yazar fiyatları
   hizalı değil»). Flex sütunda her kart kendi yüksekliğini akıtıyordu:
   Gözcü'nün tanıtım cümlesi 3, Yazar'ınki 2 satır → fiyat, not, liste ve
   Ofis satırı kartlar arasında kayıyordu (1280px'te ölçüldü). Subgrid ile
   iki kart AYNI 7 satır izini paylaşır; en uzun hücre satırı belirler.
   Ofis ve son satır açık konumla yerleşir: bir kartta Ofis yoksa düğme
   yine son satıra düşer. Subgrid desteklemeyen tarayıcı flex'te kalır. */
@supports (grid-template-rows:subgrid){
  .as-vitrin .as-paket-izgara{row-gap:0}
  .as-vitrin .as-paket{
    display:grid;grid-row:span 7;grid-template-rows:subgrid;
    row-gap:var(--a-2);align-content:start;
  }
  /* .tick kendisi grid: kısa liste uzun komşunun satırına gerilince
     maddeler arası açılıyordu → içerik yüksekliğinde üstte kalır. */
  .as-vitrin .as-paket .tick{align-self:start}
  .as-vitrin .as-paket-ofis{grid-row:6;margin:0;align-self:start}
  .as-vitrin .as-paket > :last-child{grid-row:7;align-self:end}
  .as-vitrin .as-paket-yakinda,.as-vitrin .as-paket .btn{margin:0}
}
.as-vitrin .as-model dl{margin:0;max-width:70ch}
.as-vitrin .as-model dt{font-weight:700;color:var(--ink)}
.as-vitrin .as-model dd{margin:0 0 var(--a-3);color:var(--ink2);line-height:1.6}
.as-vitrin .as-paket-alt{margin:var(--a-4) 0 0;font-size:.875rem;line-height:1.6;color:var(--ink2);max-width:70ch}

@media (max-width:760px){
  /* ana sayfa mobil bölüm aralığı (#atolyeler vb. → --sec-y-l) */
  .as-vitrin .band:not(.hero){padding-block:var(--sec-y-l)}
  .as-vitrin .as-kars-tablo,.as-vitrin .as-kars-tablo tbody,.as-vitrin .as-kars-tablo tr,
  .as-vitrin .as-kars-tablo th,.as-vitrin .as-kars-tablo td{display:block;width:auto}
  .as-vitrin .as-kars-tablo thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .as-vitrin .as-kars-tablo tr{padding:.8rem 1rem;border-bottom:1px solid var(--line)}
  .as-vitrin .as-kars-tablo tbody tr:last-child{border-bottom:0}
  .as-vitrin .as-kars-tablo th,.as-vitrin .as-kars-tablo td{border:0;padding:.15rem 0}
  .as-vitrin .as-kars-tablo tbody th{margin-bottom:.2rem}
  .as-vitrin .as-kars-etiket{display:inline;font-weight:600;color:var(--ink)}
  .as-vitrin .as-kars-alt{display:block}
  .as-vitrin .as-kars-sol{padding-left:0;margin-bottom:1.25rem}
  .as-vitrin .as-paket-izgara{grid-template-columns:minmax(0,1fr);row-gap:var(--a-4)}
  /* Tek sütunda hizalanacak komşu kart yok: subgrid'i bırak, flex'e dön. */
  .as-vitrin .as-paket{display:flex;grid-row:auto}
  .as-vitrin .as-paket-ofis{margin-top:auto}
}
@media (max-width:520px){
  .as-vitrin .as-vitrin-fayda{grid-template-columns:minmax(0,1fr)}
  /* ana sayfa .std ≤520 değerleri */
  .as-vitrin .benefit{padding:var(--a-3)}
  .as-vitrin .benefit h3{font-size:var(--fs-govde)}
  .as-vitrin .benefit p{font-size:var(--fs-kucuk);line-height:1.5}
}

/* Kelime markası (at_marka) açık mavi zeminde: .marka b = --blue, --paper2
   üstünde 4.36:1 (AA 4.5 ister; OLCUM <b>'yi taramadığı için elle hesaplandı).
   Aynı mavinin metin tonu --blue-metin: 4.93:1. */
.as-vitrin .gate-box.soft .marka b{color:var(--blue-metin)}
.as-vitrin #giris > a.btn.block{margin-bottom:1rem}