/* ==========================================================================
   TICISOFT — ANASAYFA VE HİZMET SAYFASI İLLÜSTRASYONLARI (anasayfa.css)
   Genel anasayfa (/) ve Web Sitesi Kurulumu (/web-sitesi-kurulumu) yükler,
   tasarim.css'ten SONRA. E-Ticaret sayfasının çizimleri eticaret.css'tedir;
   iki dosya hiçbir sayfada birlikte yüklenmez (SPEC §0).

   Bütün çizimler TEMSİLÎDİR (kurgusal "Örnek Mimarlık", "Örnek Mağaza"),
   aria-hidden'dır ve altyazıda öyle yazar. Renk: yalnız mürekkep, kağıt ve
   gri tonları; hologram yalnız kahraman folyosunda (tasarim.css §13).
   Folyonun içindeki çizimler em ile kurulur (≥640 px: 62em × 58em).

    A. Anasayfa kahramanı: katmanlı üç hizmet (site · mağaza · kasa)
    B. Örnek Mimarlık sitesi (.ks-*): kahramanda ve Web Sitesi sayfasında ortak
    C. Web sitesi banner'ı: site planı (gerçek görünümlü sayfa kesitleri)
    D. E-Ticaret banner'ı (siyah kart): panel akışı + telefon
    E. Web Sitesi sayfası kahramanı: tarayıcı + telefon + form bildirimi
    F. Web Sitesi sayfası "Neler dahil" çizimleri
   ========================================================================== */


/* ---------- A. Anasayfa kahramanı: katmanlı üç hizmet --------------------
   Üç katman üç hizmettir: arkada firma sitesi, sağda mağaza telefonu, önde
   kasa programı. Her katmanın ikonlu etiketi hangi hizmet olduğunu söyler.
   Mobil (~34,5em × 37,3em) ve ≥640 px (62em × 58em) iki ayrı yerleşimdir.  */
.folyo .kt-site { position: absolute; left: 1.5em; top: 3.3em; width: 31.5em; }
.kt-telefon {
  position: absolute; z-index: 2; right: 1.5em; top: 10.6em; width: 11em; aspect-ratio: 9 / 18.6;
  padding: .45em; border-radius: 2em; background: #0a0a0c; box-shadow: var(--golge-cihaz);
  font-family: var(--yazi-govde); color: #0a0a0c; line-height: 1.3;
}
.kt-ekran { height: 100%; overflow: hidden; border-radius: 1.6em; background: #fff; }
.kt-ekran-ust { display: flex; align-items: center; justify-content: space-between; padding: .95em 1em .4em; }
.kt-ekran-ust b { font-family: var(--yazi-baslik); font-size: .85em; letter-spacing: -.03em; word-spacing: .1em; }
.kt-ekran-ust svg { width: 1.1em; height: 1.1em; stroke: #0a0a0c; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.kt-foto { display: grid; place-items: end center; height: 8.6em; margin: 0 .6em; padding-bottom: 1.1em; border-radius: 1em; background: #f3f1ec; }
.kt-vazo, .ea-kupa, .ks-vazo {
  position: relative; display: block; background: radial-gradient(ellipse at 34% 28%, #fff 0%, #dcd9d2 42%, #9a968d 100%);
}
.kt-vazo { width: 3.8em; height: 7em; border-radius: 48% 48% 42% 42% / 36% 36% 64% 64%; }
.kt-vazo::before { content: ''; position: absolute; left: 50%; top: -1.1em; width: 1.5em; height: 1.5em; transform: translateX(-50%); border-radius: .3em .3em .1em .1em; background: inherit; }
.kt-govde { padding: .8em 1em; }
.kt-govde p { font-size: .75em; color: #5d5d64; }
.kt-govde strong { display: block; font-family: var(--yazi-baslik); font-size: 1em; font-weight: 650; letter-spacing: -.03em; word-spacing: .1em; }
.kt-fiyat { margin-top: .2em; font-size: 1.05em; font-weight: 700; font-variant-numeric: tabular-nums; }
.kt-renkler { display: flex; gap: .45em; margin-top: .6em; }
.kt-renkler i { width: 1.25em; height: 1.25em; border-radius: 50%; border: 1px solid #d8d6d0; }
.kt-renkler i:nth-child(1) { background: #e9e4d8; box-shadow: 0 0 0 .16em #fff, 0 0 0 .26em #0a0a0c; }
.kt-renkler i:nth-child(2) { background: #9c988f; }
.kt-renkler i:nth-child(3) { background: #232326; }
.kt-teslim { display: none; align-items: center; gap: .4em; margin-top: .7em; font-size: .72em; color: #45454d; }
.kt-teslim svg { width: 1.3em; height: 1.3em; stroke: currentColor; fill: none; stroke-width: 1.8; }
.kt-ekle { display: block; margin-top: .75em; padding: .7em 0; border-radius: 99em; background: #0a0a0c; color: #fff; text-align: center; font-weight: 600; font-size: .8em; }

/* Kasa programı penceresi: koyu; sol sütun barkod + sepet + hızlı ürünler, sağda toplam */
.kt-kasa {
  position: absolute; z-index: 3; left: 1.5em; bottom: .6em; width: 19.2em;
  border-radius: .9em; overflow: hidden; background: #141417; color: #f5f5f2; box-shadow: var(--golge-cihaz);
  font-family: var(--yazi-govde); line-height: 1.3;
}
.kk-cubuk { display: flex; align-items: center; gap: .45em; height: 2.2em; padding: 0 .9em; background: #1b1b20; border-bottom: 1px solid rgba(255,255,255,.08); }
.kk-cubuk i { width: .6em; height: .6em; border-radius: 50%; background: rgba(255,255,255,.22); }
.kk-cubuk span { margin-left: .5em; font-size: .78em; color: #9a9aa2; }
.kk-govde { display: grid; grid-template-columns: minmax(0, 1fr); gap: .7em; padding: .8em; }
.kk-barkod { display: flex; align-items: center; gap: .45em; height: 2.1em; padding: 0 .7em; border-radius: .55em; background: #1f1f24; border: 1px solid rgba(255,255,255,.1); font-size: .78em; color: #bcbcc2; font-variant-numeric: tabular-nums; }
.kk-barkod svg { width: 1.3em; height: 1.3em; stroke: #fff; fill: none; stroke-width: 1.8; stroke-linecap: round; }
.kk-satir { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: .8em; padding: .5em .15em; border-bottom: 1px solid rgba(255,255,255,.08); font-size: .78em; }
.kk-satir span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kk-satir em { font-style: normal; color: #92929a; font-variant-numeric: tabular-nums; }
.kk-satir b { font-weight: 600; font-variant-numeric: tabular-nums; }
.kk-liste > .kk-satir:nth-child(n+4) { display: none; }       /* mobil: iki satır; toplam da o iki kalemin toplamı */
.kk-toplam .kk-tam { display: none; }
.kk-hizli { display: none; }
.kk-hizli i { display: grid; place-items: center; min-height: 2.6em; border-radius: .5em; background: #1f1f24; border: 1px solid rgba(255,255,255,.1); font-style: normal; font-size: .76em; font-weight: 600; color: #d8d8dc; }
.kk-toplam { display: flex; align-items: center; justify-content: space-between; gap: .6em; padding: .7em .8em; border-radius: .7em; background: #fff; color: #0a0a0c; }
.kk-toplam small { font-size: .72em; color: #66666e; }
.kk-toplam strong { font-family: var(--yazi-baslik); font-weight: 600; font-size: 1.45em; line-height: 1; letter-spacing: -.05em; word-spacing: .1em; font-variant-numeric: tabular-nums; }
.kk-ozet { display: none; }
.kk-ozet i { font-style: normal; color: #66666e; }
.kk-ozet b { font-weight: 600; font-variant-numeric: tabular-nums; }
.kk-odeme { display: none; }
.kk-odeme i { font-style: normal; text-align: center; padding: .7em 0; border-radius: .55em; border: 1px solid #d3d1cb; font-size: .82em; font-weight: 600; }
.kk-odeme i.secili { background: #0a0a0c; color: #fff; border-color: #0a0a0c; }

/* Katman etiketleri: ikon + hizmet adı (numara yok: sayfanın tek numara sistemi bölüm şeridi) */
.kt-etiket {
  position: absolute; z-index: 4; display: inline-flex; align-items: center; gap: .5em;
  padding: .4em .85em .4em .4em; border-radius: 99em; background: #fff;
  box-shadow: var(--golge-levha), 0 0 0 1px rgba(10,10,12,.06);
  font: 600 .9em/1.2 var(--yazi-govde); color: #0a0a0c; white-space: nowrap;
}
.kt-etiket b { display: grid; place-items: center; width: 1.9em; height: 1.9em; border-radius: 50%; background: #0a0a0c; color: #fff; font-size: .78em; }
.kt-etiket b svg { width: 1.1em; height: 1.1em; stroke: #fff; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.kt-e1 { left: 2.4em; top: 1.2em; }
.kt-e2 { right: 8.6em; top: 9.3em; }
.kt-e3 { left: 13.4em; bottom: 12.4em; }     /* kasanın sağ üst köşesinde, başlık şeridinin boş sağ ucu (masaüstüyle aynı yer) */

@media (min-width: 640px) {
  .folyo .kt-site { left: 3em; top: 3.8em; width: 45.5em; }
  .folyo .kt-site .ks-gorsel { min-height: 19em; }
  .kt-telefon { right: 2.4em; top: 12.4em; width: 16.4em; padding: .5em; border-radius: 2.5em; }
  .kt-ekran { border-radius: 2em; }
  .kt-ekran-ust { padding: 1.1em 1.2em .5em; }
  .kt-foto { height: 13em; margin: 0 .8em; }
  .kt-vazo { width: 5em; height: 9.2em; }
  .kt-govde { padding: 1em 1.2em; }
  .kt-govde strong { font-size: 1.15em; }
  .kt-fiyat { font-size: 1.2em; }
  .kt-ekle { font-size: .88em; margin-top: 1em; padding: .8em 0; }
  .kt-teslim { display: flex; }
  .kt-kasa { left: 6em; bottom: 3em; width: 36.5em; border-radius: 1em; }
  .kk-cubuk { height: 2.5em; }
  .kk-govde { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 1em; padding: 1em; }
  .kk-liste > .kk-satir:nth-child(n+4) { display: grid; }
  .kk-toplam .kk-tam { display: inline; }
  .kk-toplam .kk-kisa { display: none; }
  .kk-satir { font-size: .85em; padding: .62em .2em; }
  .kk-barkod { font-size: .85em; height: 2.4em; margin-bottom: .3em; }
  .kk-hizli { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .4em; margin-top: .8em; }
  .kk-toplam { flex-direction: column; align-items: stretch; justify-content: flex-start; gap: .25em; padding: 1.1em 1em 1em; }
  .kk-toplam strong { font-size: 2.35em; }
  .kk-ozet { display: flex; justify-content: space-between; padding-top: .55em; margin-top: .45em; border-top: 1px solid #ecebe6; font-size: .78em; }
  .kk-toplam strong + .kk-ozet { margin-top: .9em; }
  .kk-odeme { display: grid; grid-template-columns: 1fr 1fr; gap: .45em; margin-top: auto; padding-top: 1em; }
  .kt-etiket { font-size: 1em; }
  .kt-e1 { left: 4.4em; top: 1.3em; }
  .kt-e2 { right: 3.4em; top: 10.1em; }
  .kt-e3 { left: 32.4em; bottom: 23em; }         /* kasaya bağlı (folyo uzasa da kasanın üst kenarında); başlık şeridinin boş sağ ucunda */
}


/* ---------- B. Örnek Mimarlık sitesi (.ks-*) ------------------------------
   Kurgusal kurumsal site. Kahramanda (.kt-site) ve Web Sitesi sayfasında
   (.ws-tarayici) aynı işaretleme, farklı ölçek.                            */
.ks-site {
  background: #fff; border-radius: 1em; overflow: hidden; box-shadow: var(--golge-cihaz);
  font-family: var(--yazi-govde); color: #0a0a0c; line-height: 1.3;
}
.ks-cubuk { display: flex; align-items: center; gap: .5em; height: 2.5em; padding: 0 1em; border-bottom: 1px solid #ecebe6; background: #fbfbf9; }
.ks-cubuk i { width: .65em; height: .65em; border-radius: 50%; background: #dddbd5; }
.ks-adres { display: flex; align-items: center; gap: .45em; margin-inline: auto; height: 1.65em; padding: 0 1em; border-radius: 99em; background: #f1f0ec; font-size: .85em; color: #5d5d64; }
.ks-adres svg { width: 1em; height: 1em; stroke: currentColor; fill: none; stroke-width: 2; }
.ks-ust { display: flex; align-items: center; gap: 1.4em; padding: 1em 1.5em .8em; }
.ks-marka { display: inline-flex; align-items: center; gap: .5em; font-family: var(--yazi-baslik); font-weight: 700; font-size: 1.05em; letter-spacing: -.035em; word-spacing: .1em; white-space: nowrap; }
.ks-marka i { display: grid; place-items: center; width: 1.55em; height: 1.55em; border-radius: .4em; background: #0a0a0c; color: #fff; font-style: normal; font-size: .85em; letter-spacing: 0; }
.ks-nav { display: none; gap: 1.2em; font-size: .82em; color: #55555c; white-space: nowrap; }
.ks-dugme { margin-left: auto; padding: .45em .95em; border-radius: 99em; border: 1px solid #d3d1cb; font-size: .78em; font-weight: 600; white-space: nowrap; }
.ks-dugme.koyu { display: inline-block; margin: 1em 0 0; background: #0a0a0c; color: #fff; border-color: #0a0a0c; }
.ks-kahraman { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: 1.2em; padding: .5em 1.5em 1.5em; }
.ks-metin { display: flex; flex-direction: column; align-items: flex-start; }
.ks-etiketler { display: none; gap: .4em; margin-top: auto; padding-top: 1.2em; }
.ks-etiketler i { padding: .35em .8em; border-radius: 99em; border: 1px solid #e7e5e0; font-style: normal; font-size: .72em; color: #45454d; }
.ks-metin small { display: block; font-size: .75em; color: #66666e; }
.ks-metin strong { display: block; margin-top: .35em; font-family: var(--yazi-baslik); font-weight: 600; font-size: 1.6em; line-height: 1.02; letter-spacing: -.045em; word-spacing: .1em; }
.ks-satir { display: block; flex: none; height: .5em; width: 92%; margin-top: .85em; border-radius: 99em; background: #ecebe6; }
.ks-satir.kisa { width: 62%; margin-top: .45em; }
/* Mimari görsel: gri duvar, açık kemer, içte gölgeli kemer, zemin gölgesi (tek renk) */
.ks-gorsel { position: relative; overflow: hidden; min-height: 9em; border-radius: .8em; background: linear-gradient(160deg, #e4e1da 0%, #cbc7be 100%); }
.ks-bina {
  position: absolute; left: 50%; bottom: 0; width: 46%; height: 78%; transform: translateX(-50%);
  border-radius: 99em 99em 0 0; background: linear-gradient(90deg, #f6f4ef 0%, #e3e0d9 100%);
  box-shadow: 1.2em 0 2.4em -1em rgba(10,10,12,.25);
}
.ks-bina i:nth-child(1) { position: absolute; inset: 24% 20% 0; border-radius: 99em 99em 0 0; background: linear-gradient(180deg, #8f8b83 0%, #57544e 100%); }
.ks-bina i:nth-child(2) { position: absolute; left: -70%; right: -70%; bottom: 0; height: 9%; background: rgba(10,10,12,.1); }

.ks-projeler { display: none; }
@media (min-width: 640px) {
  .ks-nav { display: flex; }
  .ks-etiketler { display: flex; }
  .ks-gorsel { min-height: 13em; }
  .ks-metin strong { font-size: 2.05em; }
  .ks-kahraman { gap: 1.6em; padding: .6em 1.8em 1.8em; }
  .ks-ust { gap: 1.6em; padding: 1.1em 1.8em .9em; }
}


/* ---------- C. Web sitesi banner'ı: site planı -----------------------------
   Kök sayfa (kurgusal Örnek Mimarlık ana sayfası; kahramandaki .ks-site ile AYNI
   işaretleme) + dört alt sayfanın gerçek görünümlü kesiti: Hakkımızda (ekip
   fotoğrafı), Hizmetler (liste), Projeler (galeri), İletişim (form + harita) +
   teknik çipler. Çizim em ile kurulur; ölçek görsel sütunun genişliğinden gelir
   (cqi; kapsayıcı .hizmet-banner-gorsel, tasarim.css §18b): çizim gömme alanı
   eniyle doldurur, yüksekliği içeriğine sarılır (banner iki sütunu dikeyde
   ortalar; gömme alanda ölü boşluk kalmaz). Dar kapsayıcıda (<520 px, telefon)
   alt sayfalar 2 × 2 dizilir; bağlantı çizgileri yalnız ilk sıraya iner.    */
.site-plan { display: flex; flex-direction: column; align-items: center; padding: 1.8em 1.4em 1.6em; font-size: 2.7cqi; }   /* ~37em genişlik */
.sp-kok { display: flex; flex-direction: column; align-items: center; width: 100%; }
.sp-site { width: 100%; font-size: .74em; box-shadow: var(--golge-levha), 0 0 0 1px rgba(10,10,12,.05); }
.sp-ad {
  margin-top: .75em; padding: .3em .9em; border-radius: 99em; background: #0a0a0c; color: #fff;
  font-size: max(1.05em, 11px); font-weight: 600; line-height: 1.3;
}
/* Dallar: kökten inen çizgi + yatay ray + her sayfaya inen kısa çizgi */
.sp-dallar { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1em; width: 100%; margin-top: 2.6em; }
.sp-dallar::before { content: ''; position: absolute; left: 50%; top: -2.6em; height: 1.3em; width: 1px; background: var(--metin-3); }
.sp-dallar::after { content: ''; position: absolute; left: 25%; right: 25%; top: -1.3em; height: 1px; background: var(--metin-3); }
.sp-sayfa { position: relative; display: flex; flex-direction: column; min-width: 0; background: #fff; border: 1px solid var(--cizgi); border-radius: .9em; box-shadow: var(--golge-levha); }
.sp-sayfa:nth-child(-n+2)::before { content: ''; position: absolute; left: 50%; top: calc(-1.3em - 1px); height: 1.3em; width: 1px; background: var(--metin-3); }
.sp-sayfa > p { padding: .55em .6em .65em; border-top: 1px solid var(--cizgi); font-size: max(1.05em, 11px); font-weight: 600; text-align: center; }
.sp-mini {
  display: flex; flex-direction: column; gap: .5em; height: 12.5em; padding: .95em .9em; overflow: hidden;
  border-radius: .9em .9em 0 0; font-family: var(--yazi-govde); color: #0a0a0c; line-height: 1.25;
}
.sp-mini > b { font-family: var(--yazi-baslik); font-size: 1.15em; font-weight: 650; letter-spacing: -.03em; word-spacing: .08em; white-space: nowrap; }
.sp-mini > i { display: block; flex: none; height: .45em; border-radius: 9em; background: #e7e5e0; }
.sp-mini > i.kisa { width: 62%; }
/* Hakkımızda: ekip fotoğrafı (üç siluet, tek renk) + metin satırları */
.sp-ekip {
  display: flex; align-items: flex-end; justify-content: center; gap: .35em; flex: 1; min-height: 0; margin-bottom: .15em;
  border-radius: .6em; overflow: hidden; background: linear-gradient(160deg, #e4e1da, #cbc7be);
}
.sp-ekip i { position: relative; width: 2.3em; height: 58%; border-radius: 1.15em 1.15em 0 0; background: linear-gradient(180deg, #8f8b83, #5d5a54); }
.sp-ekip i:nth-child(2) { height: 68%; background: linear-gradient(180deg, #57544e, #2f2d2a); }
.sp-ekip i::before { content: ''; position: absolute; left: 50%; top: -1.55em; width: 1.4em; height: 1.4em; margin-left: -.7em; border-radius: 50%; background: inherit; }
/* Hizmetler: ikonlu liste */
.sp-hizmetler > span { display: flex; align-items: center; gap: .55em; padding-top: .5em; border-top: 1px solid #ecebe6; font-size: .92em; font-weight: 600; white-space: nowrap; }
.sp-hizmetler em { display: grid; place-items: center; flex: none; width: 1.95em; height: 1.95em; border-radius: .5em; background: #0a0a0c; }
.sp-hizmetler svg { width: 1.1em; height: 1.1em; stroke: #fff; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* Projeler: galeri (büyük koyu kare + iki açık) */
.sp-galeri { display: grid; grid-template-columns: 1.3fr 1fr; grid-template-rows: 1fr 1fr; gap: .35em; flex: 1; min-height: 0; }
.sp-galeri i { border-radius: .45em; background: linear-gradient(160deg, #dedbd4, #c4c0b7); }
.sp-galeri i:first-child { grid-row: span 2; background: linear-gradient(160deg, #6d6b66, #2b2a28); }
.sp-galeri i:last-child { background: linear-gradient(160deg, #eceae4, #d3cfc6); }
.sp-projeler small { font-size: .78em; color: #66666e; white-space: nowrap; }
/* İletişim: form + harita */
.sp-alan { display: flex; align-items: center; flex: none; height: 2em; padding: 0 .6em; border-radius: .4em; border: 1px solid #d3d1cb; font-size: .78em; color: #66666e; white-space: nowrap; }
.sp-alt { display: flex; align-items: stretch; gap: .45em; flex: 1; min-height: 0; }
.sp-gonder { align-self: flex-start; padding: .5em .9em; border-radius: 9em; background: #0a0a0c; color: #fff; font-size: .78em; font-weight: 600; }
.sp-harita {
  position: relative; flex: 1; border-radius: .45em;
  background:
    linear-gradient(90deg, transparent 38%, #fff 38% 46%, transparent 46%),
    linear-gradient(transparent 58%, #fff 58% 66%, transparent 66%),
    linear-gradient(160deg, #eceae4, #dcd9d1);
}
.sp-harita svg { position: absolute; left: 44%; top: 40%; width: 1.6em; height: 1.6em; transform: translate(-50%, -60%); stroke: #0a0a0c; fill: #fff; stroke-width: 2; }
.sp-cipler { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 1.6em; }
.sp-cipler li { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 10px; border-radius: 99px; background: #fff; border: 1px solid var(--cizgi); font-size: 12.5px; font-weight: 500; color: var(--metin-2); }
.sp-cipler svg { width: 14px; height: 14px; stroke: #0a0a0c; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@container (min-width: 520px) {
  .site-plan { padding: 2.3em 2.2em 2em; font-size: 1.65cqi; }   /* ~60,6em genişlik */
  .sp-kok { width: 72%; }
  .sp-site { font-size: .8em; }
  .sp-dallar { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.2em; margin-top: 2.8em; }
  .sp-dallar::before { top: -2.8em; height: 1.4em; }
  .sp-dallar::after { left: 12.5%; right: 12.5%; top: -1.4em; }
  .sp-dallar .sp-sayfa::before { content: ''; position: absolute; left: 50%; top: calc(-1.4em - 1px); height: 1.4em; width: 1px; background: var(--metin-3); }
  .sp-mini { height: 14.5em; padding: 1em .95em; gap: .55em; }
  .sp-cipler { margin-top: 1.8em; }
}


/* ---------- D. E-Ticaret banner'ı: panel akışı + telefon (siyah kartta) ----
   Siyah kartta beyaz bildirim satırları; holo YOK (kartın holo nesnesi yok,
   yalnız .kart-isik kenar ışığı var). Kurulum kartı "otomatik kurulum"u,
   bildirimler "tek panel"i söyler; telefon mağazanın müşteri tarafıdır.
   Bildirim kartları tek sol çizgide (kademe yok). Gömme alan içeriğine sarılır;
   telefon panel yüksekliğine uzar (alt kenara yaslı).                      */
.et-akis { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 18px; overflow: hidden; }
/* Telefon yalnız görsel sütun ≥600 px iken (1000–1199 px'te sütun dar: panel kartları tek satırda kalsın diye telefon gizli) */
.ea-panel { position: relative; z-index: 1; display: flex; flex-direction: column; }
.ea-kurulum { padding: 14px 16px 16px; border-radius: 14px; background: #1f1f24; border: 1px solid rgba(255,255,255,.1); }
.ea-kurulum p { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--metin-2); }
.ea-kurulum p b { font-family: var(--yazi-baslik); font-size: 15px; font-weight: 650; color: var(--metin); letter-spacing: var(--hs-4); word-spacing: var(--ws-4); }
.ea-kurulum p span { color: var(--basari); font-weight: 600; }
.ea-kurulum ul { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; font-size: 13px; color: var(--metin-2); }
.ea-kurulum li { display: inline-flex; align-items: center; gap: 6px; }
.ea-kurulum li::before {        /* beyaz disk + mürekkep tik (çizgi ikonla aynı yol) */
  content: ''; width: 15px; height: 15px; border-radius: 50%;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a0a0c' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 10px no-repeat;
}
.ea-kurulum > i { display: block; height: 4px; margin-top: 12px; border-radius: 9px; background: #fff; }
.ea-bas { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 18px 0 10px; font-size: 13.5px; color: var(--metin-2); }
.ea-bas b { font-family: var(--yazi-baslik); font-size: 15px; font-weight: 650; color: var(--metin); letter-spacing: var(--hs-4); word-spacing: var(--ws-4); }
.ea-bas .rozet { min-height: 26px; font-size: 12px; }
.ea-liste { display: grid; gap: 8px; }
.ea-liste li {
  display: flex; align-items: center; gap: 12px; padding: 11px 14px 11px 11px; border-radius: 14px;
  background: #fff; color: #0a0a0c; box-shadow: 0 18px 40px -22px rgba(0,0,0,.6);
}
.ea-liste i { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 10px; background: #0a0a0c; }
.ea-liste svg { width: 17px; height: 17px; stroke: #fff; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ea-liste span { min-width: 0; line-height: 1.3; }
.ea-liste b { display: block; font-size: 14px; font-weight: 600; }
.ea-liste small { display: block; font-size: 12.5px; color: #5d5d64; }
.ea-telefon { display: none; }
@media (max-width: 559px) { .ea-liste li.ea-ek { display: none; } }
@container (min-width: 480px) { .et-akis { padding: 24px; } }
@container (min-width: 600px) {
  .et-akis { grid-template-columns: minmax(0, 1fr) 200px; gap: 24px; padding: 26px 26px 0; }
  .ea-panel { justify-content: center; padding-bottom: 26px; }
  .ea-telefon {
    display: block; align-self: stretch; width: 200px; min-height: 380px; padding: 7px 7px 0; margin-bottom: -1px;
    border-radius: 34px 34px 0 0; background: #2a2a30; box-shadow: 0 0 0 1px rgba(255,255,255,.08);
    font-family: var(--yazi-govde); color: #0a0a0c; line-height: 1.3;
  }
}
.ea-ekran { height: 100%; border-radius: 28px 28px 0 0; background: #fff; overflow: hidden; padding: 14px 13px 0; }
.ea-ekran-ust { display: flex; align-items: center; justify-content: space-between; }
.ea-ekran-ust b { font-family: var(--yazi-baslik); font-size: 12.5px; letter-spacing: -.03em; word-spacing: .08em; }
.ea-ekran-ust svg { width: 15px; height: 15px; stroke: #0a0a0c; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ea-foto { display: grid; place-items: end center; height: 160px; margin-top: 10px; padding-bottom: 24px; border-radius: 14px; background: #f3f1ec; }
.ea-kupa { width: 54px; height: 60px; border-radius: 6px 6px 16px 16px; }
.ea-kupa::after { content: ''; position: absolute; right: -15px; top: 12px; width: 20px; height: 26px; border: 5px solid #bdb9b1; border-left: 0; border-radius: 0 16px 16px 0; }
.ea-ekran p { margin-top: 12px; font-size: 11px; color: #5d5d64; }
.ea-ekran strong { display: block; font-family: var(--yazi-baslik); font-size: 16px; font-weight: 650; letter-spacing: -.03em; word-spacing: .08em; }
.ea-fiyat { margin-top: 2px; font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ea-renkler { display: flex; gap: 6px; margin-top: 10px; }
.ea-renkler i { width: 16px; height: 16px; border-radius: 50%; border: 1px solid #d8d6d0; }
.ea-renkler i:nth-child(1) { background: #e9e4d8; box-shadow: 0 0 0 2px #fff, 0 0 0 3px #0a0a0c; }
.ea-renkler i:nth-child(2) { background: #9c988f; }
.ea-renkler i:nth-child(3) { background: #232326; }
.ea-teslim { display: flex; align-items: center; gap: 5px; margin-top: 10px; font-size: 10.5px; color: #45454d; }
.ea-teslim svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.ea-benzer { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 16px; }
.ea-benzer i { display: block; height: 70px; border-radius: 10px; background: #f3f1ec; }
.ea-ekle { display: block; margin-top: 12px; padding: 10px 0; border-radius: 99px; background: #0a0a0c; color: #fff; text-align: center; font-size: 12px; font-weight: 600; }


/* ---------- E. Web Sitesi sayfası kahramanı ------------------------------
   Masaüstü: tarayıcıda Örnek Mimarlık sitesi (.ks-*; en altta iletişim şeridi:
   form + harita) + sağ altta aynı sitenin telefon görünümü + iki bildirim:
   "Yeni form mesajı" tarayıcının alt kenarına asılı, "SSL etkin" telefonun sol
   kenarına yaslı (cihaza bağlı; havada yüzmez). Mobil: yalnız telefon ve
   bildirimler (tarayıcı gizli), Örnek Mağaza kahramanıyla aynı kalıp.      */
.ws-tarayici { display: none; }
.ks-kartlar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1em; padding: 0 1.8em 1.8em; }
.ks-kartlar div { min-width: 0; }
.ks-kartlar b { display: block; margin-top: .6em; font-size: .85em; font-weight: 600; }
.ks-kartlar i { display: block; height: .45em; width: 80%; margin-top: .45em; border-radius: 99em; background: #ecebe6; }
.ks-foto { display: block; height: 6.5em; border-radius: .7em; background: linear-gradient(160deg, #dedbd4, #c4c0b7); }
.ks-foto.f1 { background: linear-gradient(160deg, #6d6b66, #2b2a28); }
.ks-foto.f3 { background: linear-gradient(160deg, #eceae4, #d3cfc6); }
/* Tarayıcının alt şeridi: iletişim bölümü (başlık + form + harita); bildirimler buna bağlanır */
.ks-iletisim {
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.15fr) minmax(0, .95fr); gap: 1.1em; align-items: stretch;
  margin: 0 1.8em 1.8em; padding: 1.2em; border-radius: .8em; background: #f5f4f0;
}
.ks-iletisim-metin small { display: block; font-size: .72em; color: #66666e; }
.ks-iletisim-metin strong { display: block; margin-top: .3em; font-family: var(--yazi-baslik); font-weight: 600; font-size: 1.25em; line-height: 1.08; letter-spacing: -.04em; word-spacing: .1em; }
.ks-iletisim-metin .ks-satir { width: 80%; }
.ks-form { display: grid; gap: .45em; align-content: start; }
.ks-form span { display: flex; align-items: center; height: 1.9em; padding: 0 .7em; border-radius: .45em; background: #fff; border: 1px solid #d3d1cb; font-size: .72em; color: #66666e; }
.ks-form em { justify-self: start; padding: .45em 1em; border-radius: 99em; background: #0a0a0c; color: #fff; font-style: normal; font-size: .72em; font-weight: 600; }
.ks-harita {
  position: relative; min-height: 6em; border-radius: .6em;
  background:
    linear-gradient(90deg, transparent 40%, #fff 40% 45%, transparent 45%),
    linear-gradient(transparent 55%, #fff 55% 61%, transparent 61%),
    linear-gradient(160deg, #eceae4, #dcd9d1);
}
.ks-harita svg { position: absolute; left: 42%; top: 45%; width: 1.7em; height: 1.7em; transform: translate(-50%, -60%); stroke: #0a0a0c; fill: #fff; stroke-width: 2; }

.ws-telefon {
  position: absolute; z-index: 2; left: 50%; top: 2.6em; width: 15.6em; aspect-ratio: 9 / 18.6; transform: translateX(-50%);
  padding: .5em; border-radius: 2.5em; background: #0a0a0c; box-shadow: var(--golge-cihaz);
  font-family: var(--yazi-govde); color: #0a0a0c; line-height: 1.3;
}
.ws-ekran { display: flex; flex-direction: column; align-items: flex-start; height: 100%; overflow: hidden; padding: 1em 1em 0; border-radius: 2em; background: #fff; }
.ws-ekran-ust { display: flex; align-items: center; justify-content: space-between; width: 100%; font-size: .9em; }
.ws-menu { display: grid; gap: .22em; }
.ws-menu i { display: block; width: 1.2em; height: .14em; border-radius: 9em; background: #0a0a0c; }
.ws-gorsel { width: 100%; min-height: 0; height: 11.5em; margin-top: .9em; }
.ws-ekran small { margin-top: 1em; font-size: .72em; color: #66666e; }
.ws-ekran strong { margin-top: .3em; font-family: var(--yazi-baslik); font-weight: 600; font-size: 1.35em; line-height: 1.04; letter-spacing: -.045em; word-spacing: .1em; }
.ws-ekran .ks-satir { width: 90%; }
.ws-ara { display: block; width: 100%; margin-top: 1em; padding: .75em 0; border-radius: 99em; background: #0a0a0c; color: #fff; text-align: center; font-size: .82em; font-weight: 600; }
.ws-sohbet {
  position: absolute; right: -.6em; bottom: 3.2em; display: grid; place-items: center; width: 3.2em; height: 3.2em;
  border-radius: 50%; background: #fff; box-shadow: var(--golge-levha), 0 0 0 1px rgba(10,10,12,.08);
}
.ws-sohbet svg { width: 1.5em; height: 1.5em; stroke: #0a0a0c; fill: none; stroke-width: 1.8; stroke-linejoin: round; }
.ws-bildirim {
  position: absolute; z-index: 3; display: flex; align-items: center; gap: .8em; padding: .8em 1.2em .8em .8em;
  border-radius: 1.1em; background: #fff; box-shadow: var(--golge-levha), 0 0 0 1px rgba(10,10,12,.05);
  font-family: var(--yazi-govde); color: #0a0a0c; line-height: 1.25; white-space: nowrap;
}
.ws-bildirim i { display: grid; place-items: center; flex: none; width: 2.5em; height: 2.5em; border-radius: .8em; background: #0a0a0c; }
.ws-bildirim svg { width: 1.25em; height: 1.25em; stroke: #fff; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ws-bildirim b { display: block; font-size: .95em; font-weight: 600; }
.ws-bildirim small { display: block; font-size: .8em; color: #5d5d64; }
/* Mobil: form bildirimi sol üstte (fotoğrafın üstünde), SSL bildirimi sağ altta telefonun "Bizi arayın"
   düğmesinin altındaki boş ekranda; sohbet balonu mobilde gizli (bildirim onun yerini alır). Metin örtülmez. */
.ws-b1 { left: 1.2em; top: 9.5em; }
.ws-b2 { right: 1.2em; bottom: 3.4em; }
.ws-sohbet { display: none; }
@media (min-width: 640px) {
  .ws-tarayici { display: block; position: absolute; left: 3em; top: 3.4em; width: 47em; }
  .ws-tarayici .ks-gorsel { min-height: 13.5em; }
  .ws-telefon { left: auto; right: 3em; top: auto; bottom: 3em; transform: none; width: 16em; }
  .ws-sohbet { display: grid; }
  /* Cihaza bağlı bildirimler: form bildirimi tarayıcının alt kenarına (iletişim şeridinin altına) asılı,
     SSL bildirimi telefonun sol kenarına yaslı */
  .ws-b1 { left: 14.5em; top: auto; bottom: 7.9em; }
  .ws-b2 { left: auto; right: 18.2em; bottom: 3.2em; }
}


/* ---------- F. Web Sitesi sayfası "Neler dahil" çizimleri (px tabanlı) ---- */
/* Marka panosu: logo, renkler (son kutu boş: "Marka renginiz"), yazı ve düğme dili */
.marka-pano { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 16px; }
.mp-logo, .mp-renkler, .mp-yazi { padding: 16px; border-radius: 12px; background: #fff; border: 1px solid var(--cizgi); }
.mp-logo { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 8px; }
.mp-logo i { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; background: #0a0a0c; color: #fff; font-style: normal; font-family: var(--yazi-baslik); font-weight: 700; font-size: 22px; }
.mp-logo b { font-family: var(--yazi-baslik); font-size: 17px; font-weight: 700; letter-spacing: -.035em; word-spacing: .1em; }
.mp-logo small { font-size: 12.5px; color: var(--metin-3); }
.mp-renkler { display: grid; gap: 8px; align-content: center; }
.mp-renkler li { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--metin-2); }
.mp-renkler i { width: 26px; height: 26px; border-radius: 8px; background: var(--r); box-shadow: inset 0 0 0 1px rgba(10,10,12,.1); }
.mp-renkler li.bos i { background: none; box-shadow: none; border: 1.5px dashed var(--cizgi-form); }
.mp-renkler li.bos { color: var(--metin); font-weight: 600; }
.mp-yazi { display: flex; flex-direction: column; justify-content: center; gap: 8px; }
.mp-yazi > b { font-family: var(--yazi-baslik); font-size: 44px; font-weight: 600; line-height: 1; letter-spacing: -.05em; word-spacing: .1em; }
.mp-yazi span { font-size: 13px; color: var(--metin-2); line-height: 1.4; }
.mp-yazi strong { display: block; font-family: var(--yazi-baslik); font-size: 15px; font-weight: 650; color: var(--metin); letter-spacing: -.02em; word-spacing: .05em; }
.mp-dugmeler { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.mp-dugmeler em { padding: 5px 11px; border-radius: 99px; border: 1px solid var(--cizgi-2); font-style: normal; font-size: 12px; font-weight: 600; }
.mp-dugmeler em.koyu { background: #0a0a0c; color: #fff; border-color: #0a0a0c; }
@media (min-width: 560px) { .marka-pano { grid-template-columns: 1fr 1fr 1.1fr; padding: 20px; align-items: stretch; } }

/* Üç cihaz: aynı sayfa masaüstü, tablet, telefon genişliğinde */
.cihazlar { display: flex; flex-wrap: wrap; align-items: flex-end; align-content: center; justify-content: center; gap: 10px; padding: 22px 14px 20px; }
@media (min-width: 480px) { .cihazlar { gap: 14px; padding: 22px 18px 20px; } }
.cz-ekran { display: grid; gap: 5px; align-content: start; height: 100%; padding: 8px; border-radius: 6px; background: #fff; overflow: hidden; }
.cz-ekran i { display: block; height: 7px; border-radius: 4px; background: #e7e5e0; }
.cz-ekran i.u { height: 6px; width: 40%; background: #0a0a0c; }
.cz-ekran i.g { height: 34px; background: linear-gradient(160deg, #dedbd4, #c4c0b7); }
.cz-ekran span { display: grid; grid-template-columns: repeat(2, 1fr); gap: 5px; }
.cz-ekran span.s3 { grid-template-columns: repeat(3, 1fr); }
.cz-ekran span i { height: 22px; }
.cz-masa { display: flex; flex-direction: column; align-items: center; width: 50%; }
.cz-masa .cz-ekran { width: 100%; height: 118px; border: 5px solid #0a0a0c; border-radius: 10px; }
.cz-masa .cz-ekran > span:first-of-type { grid-template-columns: 1.4fr 1fr 1fr; }
.cz-masa .cz-ekran > span:first-of-type i.g { height: 30px; grid-row: auto; }
.cz-masa b { display: block; width: 26%; height: 16px; background: #0a0a0c; clip-path: polygon(30% 0, 70% 0, 100% 100%, 0 100%); }
.cz-tablet { width: 22%; }
.cz-tablet .cz-ekran { height: 116px; border: 5px solid #0a0a0c; border-radius: 12px; }
.cz-telefon { width: 14%; min-width: 42px; }
.cz-telefon .cz-ekran { height: 96px; border: 4px solid #0a0a0c; border-radius: 12px; padding: 6px; }
.cz-telefon .cz-ekran i.g { height: 26px; }

/* Arama sonucu (renk yok: başlık mürekkep) + teknik liste */
.arama-alan { display: flex; flex-direction: column; justify-content: center; gap: 12px; padding: 16px; }
.arama-sonuc { padding: 14px 16px; border-radius: 12px; background: #fff; border: 1px solid var(--cizgi); box-shadow: var(--golge-levha); }
.arama-sonuc small { display: block; font-size: 12px; color: var(--metin-3); }
.arama-sonuc b { display: block; margin-top: 3px; font-size: 15px; font-weight: 600; text-decoration: underline; text-decoration-color: var(--cizgi-2); text-underline-offset: .2em; }
.arama-sonuc i { display: block; height: 6px; margin-top: 8px; border-radius: 9px; background: #e7e5e0; }
.arama-sonuc i.kisa { width: 64%; margin-top: 5px; }
.arama-liste { display: flex; flex-wrap: wrap; gap: 6px; }
.arama-liste li {
  display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 10px 0 7px; border-radius: 99px;
  background: #fff; border: 1px solid var(--cizgi); font-size: 12.5px; font-weight: 500; color: var(--metin-2);
}
.arama-liste li::before {
  content: ''; width: 14px; height: 14px; border-radius: 50%;
  background: #0a0a0c url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 9px no-repeat;
}

/* İletişim formu + WhatsApp ve yol tarifi düğmeleri */
.form-cizim { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 16px; }
.fc-form { display: grid; gap: 7px; padding: 14px; border-radius: 12px; background: #fff; border: 1px solid var(--cizgi); }
.fc-alan { display: flex; align-items: center; height: 30px; padding: 0 10px; border-radius: 7px; border: 1px solid var(--cizgi-2); }
.fc-alan.uzun { align-items: flex-start; height: 46px; padding-top: 6px; }
.fc-alan small { font-size: 11.5px; color: var(--metin-3); }
.fc-gonder { justify-self: start; padding: 6px 14px; border-radius: 99px; background: #0a0a0c; color: #fff; font-size: 12px; font-weight: 600; }
.fc-yan { display: flex; flex-wrap: wrap; gap: 6px; }
.fc-yan span { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 12px 0 9px; border-radius: 99px; background: #fff; border: 1px solid var(--cizgi); font-size: 12.5px; font-weight: 600; }
.fc-yan svg { width: 15px; height: 15px; stroke: #0a0a0c; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

/* Alan adı ve SSL: adres çubuğu + DNS kayıtları */
.alan-cizim { display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: 16px; }
.ac-adres { display: flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 6px 0 12px; border-radius: 99px; background: #fff; border: 1px solid var(--cizgi-2); font-size: 13px; color: var(--metin); white-space: nowrap; overflow: hidden; }
.ac-adres svg { flex: none; width: 15px; height: 15px; stroke: #0a0a0c; fill: none; stroke-width: 2; }
.ac-adres .rozet { margin-left: auto; min-height: 26px; font-size: 11.5px; padding: 0 9px; }
.ac-kayit { border-radius: 12px; background: #fff; border: 1px solid var(--cizgi); }
.ac-kayit li { display: grid; grid-template-columns: 54px 44px minmax(0, 1fr); gap: 8px; align-items: center; padding: 10px 12px; font-size: 12.5px; }
.ac-kayit li.ac-bas { padding-block: 7px; font-size: 11px; color: var(--metin-3); }
.ac-kayit li.ac-bas b { font-weight: 500; letter-spacing: 0; }
.ac-kayit li.ac-bas em { color: var(--metin-3); font-variant-numeric: normal; }
.ac-kayit li + li { border-top: 1px solid var(--cizgi); }
.ac-kayit b { font-size: 11.5px; font-weight: 700; letter-spacing: .02em; }
.ac-kayit span { color: var(--metin-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-kayit em { font-style: normal; color: var(--metin); text-align: right; font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.alan-cizim .arama-liste { justify-content: flex-start; }