@charset "utf-8";
/* ==========================================================================
   BestLinkPOS - sayfa bileşenleri v3.1 (2026-09-30, Toast referansı)
   v3.1: altı özellik sayfası (/ozellikler/<konu>/) için üst sayfaya dönüş
   bağlantısı, tıklanır fayda listesi, detay paneli, "Diğer özellikler" kartları;
   alt sayfada menüdeki üst bölüm bağlantısı işaretli (aria-current="true").
   Ana sayfa ve iç sayfalar: /ozellikler/, /nasil-calisir/, /kimler-icin/,
   /neden-bestlinkpos/, /demo/. Yasal sayfalar bu dosyayı yüklemez.
   Jetonlar, düğmeler, menü ve alt bar site-20260930b.css'te.

   ÖNBELLEK KURALI: yayına çıkan içerik değişmez; değişiklik yeni adla yazılır.

   Referanstan alınan dil: iri ve ince başlık, büyük yuvarlatılmış paneller,
   renkli zemin üstünde ürün kartı, iş tipi çipleri, onay işaretli marka bandı,
   sayfa sonunda alt barla birleşen çağrı bandı. Renk referansın turuncusu
   değil, logonun mavisi. Fotoğraf yok: görseller logo çalışması ve ondan
   kesilen parçalar (marka/v2/).

   Bölümler:
     - Ortak: ok bağlantısı, bölüm başı hizası
     - Ana sayfa hero
     - İç sayfa hero + kolaj
     - Güven şeridi
     - Ürün kartları
     - Adımlar
     - Çipler
     - Marka bandı + onaylı liste
     - Büyük liste (özellikler)
     - Fayda listesi
     - Donanım rafı
     - İş tipi ızgarası
     - Fark ve altyapı ızgaraları
     - Deneme bloğu
     - SSS
     - Kapanış sözü
     - Son çağrı bandı
     - Demo kanalları
     - Koyu tema ve kullanıcı tercihleri
   ========================================================================== */


/* --------------------------------------------------------------------------
   ORTAK
   -------------------------------------------------------------------------- */

/* Oklu metin bağlantısı: bölümden ilgili sayfaya geçiş */
.ok-baglanti {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  color: var(--renk-ana-metin);
  font-weight: 600;
  text-decoration: none;
}
.ok-baglanti::after {
  content: "→";
  transition: transform var(--sure-kisa) var(--egri-cikis);
}
.ok-baglanti:hover { text-decoration: underline; text-decoration-color: currentColor; }
.ok-baglanti:hover::after { transform: translateX(4px); }

.bolum-bas--orta { margin-inline: auto; text-align: center; }
.bolum-bas--orta > .giris { margin-inline: auto; }


/* --------------------------------------------------------------------------
   ANA SAYFA HERO
   Lacivert panel (.yuzey-marka--gece), solda başlık + alt metin + iki eylem,
   sağda logo çalışması. Panel ilk ekrana sığar; hero'da .belir yok (LCP).
   -------------------------------------------------------------------------- */
.hero-ana { padding-block: var(--bosluk-4) 0; }

.hero-ana__panel {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  align-items: center;
  gap: var(--bosluk-6);
  padding: clamp(2.25rem, 1rem + 4.5vw, 4.5rem) clamp(1.5rem, 0.25rem + 5vw, 5rem);
  overflow: hidden;
}

/* Yedi sözcüklük başlık masaüstünde üç satır: boyut sütunla birlikte planlandı */
.hero-ana__baslik {
  max-width: 24ch;
  margin-bottom: var(--bosluk-5);
  font-size: clamp(2.25rem, 1.45rem + 2.9vw, 3.375rem);
}
.hero-ana__alt { max-width: 44ch; margin-bottom: var(--bosluk-6); }

.hero-ana__gorsel {
  display: grid;
  place-items: center;
}
.hero-ana__gorsel img {
  width: auto;
  max-height: min(34rem, 66svh);
  margin-inline: auto;
  filter: drop-shadow(0 32px 40px rgb(2 6 23 / .5));
}

@media (max-width: 56rem) {
  .hero-ana__panel {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    text-align: center;
  }
  .hero-ana__baslik,
  .hero-ana__alt { margin-inline: auto; }
  .hero-ana .dugme-grubu { justify-content: center; }
  .hero-ana__gorsel img { max-height: 21rem; }
}


/* --------------------------------------------------------------------------
   İÇ SAYFA HERO
   Referanstaki iç sayfa: beyaz zemin, solda hap etiket (h1), iri söz, giriş,
   iki eylem; sağda renkli panelde görsel. Görselsiz sürüm tek sütun.
   -------------------------------------------------------------------------- */
.sayfa-hero { padding-block: clamp(2.5rem, 1.5rem + 3.5vw, 4.5rem) var(--bolum-dikey-sik); }

.sayfa-hero__ic {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: center;
  gap: clamp(2rem, 1rem + 4vw, 5rem);
}
.sayfa-hero--metin .sayfa-hero__ic { grid-template-columns: minmax(0, 1fr); }

/* Hap etiket: sayfanın h1'i (kısa anahtar sözcük), iri söz hemen altında */
.sayfa-hero__etiket {
  display: inline-block;
  margin: 0 0 var(--bosluk-5);
  padding: 0.45rem 0.9rem;
  border-radius: var(--r-hap);
  background: var(--renk-ana-yumusak);
  color: var(--renk-ana-metin);
  font-family: var(--yazi-metin);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.sayfa-hero__soz {
  max-width: 17ch;
  margin: 0 0 var(--bosluk-5);
  font-family: var(--yazi-baslik);
  font-size: clamp(2.25rem, 1.45rem + 3.3vw, 3.75rem);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -0.04em;
  color: var(--metin);
  text-wrap: balance;
}
.sayfa-hero--metin .sayfa-hero__soz { max-width: 22ch; }
.sayfa-hero .giris { margin-bottom: var(--bosluk-6); }

.sayfa-hero__gorsel {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 5 / 4;
  padding: var(--bosluk-6);
  overflow: hidden;
}
/* picture kutusu yok sayılır: img ızgara öğesi olur, yüzde yükseklik panele göre çözülür */
.sayfa-hero__gorsel > picture { display: contents; }
.sayfa-hero__gorsel > picture img,
.sayfa-hero__gorsel > img {
  width: auto;
  max-height: 88%;
  filter: drop-shadow(0 28px 36px rgb(2 6 23 / .45));
}

/* Kolaj: logo parçaları renkli panelde. Parça kaynakları küçük (en çok 320px),
   netlik için ekranda 200px'i geçmez. */
.kolaj__oge {
  position: absolute;
  width: min(var(--en, 30%), var(--tavan, 200px));
  filter: drop-shadow(0 22px 26px rgb(2 6 23 / .45));
}
.kolaj__oge img { width: 100%; height: auto; }
.kolaj__oge--1 { --en: 40%; left: 10%; top: 14%; }
.kolaj__oge--2 { --en: 28%; --tavan: 170px; right: 11%; bottom: 12%; }
.kolaj__oge--3 { --en: 22%; --tavan: 140px; right: 17%; top: 9%; }
.kolaj__oge--4 { --en: 19%; --tavan: 120px; left: 18%; bottom: 9%; }

@media (max-width: 56rem) {
  .sayfa-hero__ic { grid-template-columns: minmax(0, 1fr); }
  .sayfa-hero__gorsel { aspect-ratio: 4 / 3; }
}


/* --------------------------------------------------------------------------
   GÜVEN ŞERİDİ
   Referansta hero altındaki logo duvarının yeri. Müşteri logosu yok; iki
   cümlelik güven satırı tek şerit.
   -------------------------------------------------------------------------- */
.guven { padding-block: var(--bosluk-6) 0; }
.guven__satir {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  gap: var(--bosluk-2) var(--bosluk-7);
  margin: 0;
  padding-block: var(--bosluk-5);
  border-block: 1px solid var(--cizgi);
  font-size: var(--yazi-2);
  line-height: 1.45;
  color: var(--metin-ikincil);
}
.guven__satir strong {
  font-family: var(--yazi-baslik);
  font-size: var(--yazi-3);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--metin);
}
@media (max-width: 48rem) {
  .guven__satir { grid-template-columns: minmax(0, 1fr); }
}


/* --------------------------------------------------------------------------
   ÜRÜN KARTLARI
   Referanstaki "renkli zeminde ürün" kartları; mavi tonlarında, parça üstte,
   başlık altta. Kartın tamamı bağlantı. Ritim: 4 sütunda geniş-dar-dar /
   dar-dar-geniş; iki kart görselsiz (biri açık, biri lacivert).
   -------------------------------------------------------------------------- */
.kart-izgara {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--bosluk-5);
  margin: 0;
  padding: 0;
  list-style: none;
}
.kart-izgara__oge { display: flex; min-width: 0; }
.kart-izgara__oge--genis { grid-column: span 2; }

.urun-kart {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 100%;
  min-height: 22rem;
  padding: var(--bosluk-6);
  overflow: hidden;
  border-radius: var(--r-yuzey);
  color: #ffffff;
  text-decoration: none;
  transition: transform var(--sure-orta) var(--egri-cikis), box-shadow var(--sure-orta) var(--egri-cikis);
}
.urun-kart--a { background: linear-gradient(160deg, #3f8cff 0%, var(--renk-ana) 48%, var(--renk-ana-koyu) 100%); }
.urun-kart--b { background: linear-gradient(160deg, var(--renk-ana) 0%, var(--renk-ana-koyu) 52%, var(--renk-ana-derin) 100%); }
.urun-kart--c { background: linear-gradient(160deg, var(--renk-ana-koyu) 0%, var(--renk-ana-derin) 58%, var(--murekkep) 100%); }
.urun-kart--acik { background: var(--renk-ana-yumusak); color: var(--metin); }

/* Kartın üst kısmında parlama: parça zemine oturur */
.urun-kart::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -10% -10% 30%;
  background: radial-gradient(closest-side, rgb(var(--renk-parlama-rgb) / .28), transparent 75%);
  pointer-events: none;
}
.urun-kart--acik::before { background: radial-gradient(closest-side, rgb(var(--renk-ana-rgb) / .12), transparent 75%); }

.urun-kart__resim {
  flex: 1 1 auto;
  display: grid;
  place-items: center;
  min-height: 0;
  margin-bottom: var(--bosluk-4);
}
.urun-kart__resim picture { display: contents; }
.urun-kart__resim img {
  width: auto;
  max-width: min(62%, 190px);
  max-height: 10.5rem;
  filter: drop-shadow(0 18px 22px rgb(2 6 23 / .42));
  transition: transform var(--sure-uzun) var(--egri-cikis-uzun);
}

.urun-kart__baslik {
  max-width: 17ch;
  margin: 0;
  font-size: var(--yazi-3);
  font-weight: 500;
  line-height: 1.18;
  letter-spacing: -0.025em;
  color: inherit;
}
/* Görselsiz kart: başlık iri, kartın ortasında değil altta kalır */
.urun-kart--metin .urun-kart__baslik { max-width: 14ch; margin-top: auto; font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem); }
.kart-izgara__oge--genis .urun-kart--metin .urun-kart__baslik { font-size: var(--yazi-4); }

.urun-kart__ok {
  display: inline-flex;
  margin-top: var(--bosluk-3);
  font-size: 1.25rem;
  line-height: 1;
  opacity: .8;
  transition: transform var(--sure-kisa) var(--egri-cikis), opacity var(--sure-kisa) var(--egri-cikis);
}

@media (hover: hover) and (pointer: fine) {
  .urun-kart:hover { transform: translateY(-3px); box-shadow: 0 22px 40px -22px rgb(var(--renk-ana-rgb) / .8); }
  .urun-kart:hover .urun-kart__resim img { transform: translateY(-6px) scale(1.04); }
  .urun-kart:hover .urun-kart__ok { transform: translateX(4px); opacity: 1; }
}
.urun-kart:active { transform: scale(0.99); }
.urun-kart:focus-visible { outline-offset: 4px; }

@media (max-width: 64rem) {
  .kart-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 40rem) {
  .kart-izgara { gap: var(--bosluk-3); }
  .urun-kart { min-height: 14.5rem; padding: var(--bosluk-4); }
  .urun-kart__resim { margin-bottom: var(--bosluk-3); }
  .urun-kart__resim img { max-width: min(70%, 120px); max-height: 6.5rem; }
  .urun-kart__baslik { font-size: 1.0625rem; line-height: 1.25; letter-spacing: -0.015em; }
  .urun-kart--metin .urun-kart__baslik { font-size: 1.375rem; }
  .urun-kart__ok { margin-top: var(--bosluk-2); font-size: 1rem; }
}


/* --------------------------------------------------------------------------
   ADIMLAR
   Referanstaki numaralı adımlar: halka içinde rakam, fiil başlığın kendisi.
   Solda başlık (geniş ekranda yapışkan), sağda dikey liste.
   -------------------------------------------------------------------------- */
.adimlar {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: var(--bosluk-7) clamp(2rem, 1rem + 5vw, 6rem);
  align-items: start;
}
.adimlar__bas > h2 { margin-bottom: var(--bosluk-5); }
@media (min-width: 56rem) {
  .adimlar__bas { position: sticky; top: calc(var(--menu-y) + 2rem); }
}

.adim-listesi {
  display: grid;
  gap: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
.adim {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--bosluk-5);
  align-items: start;
}
.adim__no {
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  border: 1.5px solid var(--renk-ana-metin);
  border-radius: 50%;
  color: var(--renk-ana-metin);
  font-family: var(--yazi-baslik);
  font-size: 1.125rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.adim h3 {
  margin: 0.35rem 0 0.4rem;
  font-size: clamp(1.625rem, 1.3rem + 1.3vw, 2.375rem);
  font-weight: 500;
  letter-spacing: -0.03em;
}
.adim p { max-width: 46ch; margin: 0; color: var(--metin-ikincil); font-size: var(--yazi-2); line-height: 1.5; }
.adim__ek { margin-top: var(--bosluk-3); }

/* Büyük sürüm (/nasil-calisir/): adımlar arasında ince çizgi */
.adim-listesi--buyuk { gap: 0; }
.adim-listesi--buyuk .adim { padding-block: clamp(1.75rem, 1.2rem + 2vw, 3rem); border-top: 1px solid var(--cizgi); }
.adim-listesi--buyuk .adim:last-child { border-bottom: 1px solid var(--cizgi); }
.adim-listesi--buyuk .adim__no { width: 4rem; height: 4rem; font-size: 1.375rem; }
.adim-listesi--buyuk .adim h3 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3.25rem); }

@media (max-width: 56rem) {
  .adimlar { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 30rem) {
  .adim { gap: var(--bosluk-4); }
  .adim__no { width: 2.75rem; height: 2.75rem; font-size: 1rem; }
  .adim-listesi--buyuk .adim__no { width: 3rem; height: 3rem; font-size: 1.125rem; }
}


/* --------------------------------------------------------------------------
   ÇİPLER
   Referanstaki iş tipi hapları: iri metin, yumuşak zemin, sayfadaki tek
   ortalı bölüm. Her çip ilgili iş tipi bölümüne bağlanır.
   -------------------------------------------------------------------------- */
.cipler {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--bosluk-3);
  max-width: 64rem;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}
.cip {
  display: inline-flex;
  align-items: center;
  min-height: 3.5rem;
  padding: 0.35rem clamp(1.1rem, 0.8rem + 1vw, 1.75rem);
  border-radius: var(--r-hap);
  background: var(--zemin-2);
  color: var(--metin);
  font-family: var(--yazi-baslik);
  font-size: clamp(1.25rem, 0.9rem + 1.4vw, 2.25rem);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.025em;
  text-decoration: none;
  transition: background-color var(--sure-kisa) var(--egri-cikis), color var(--sure-kisa) var(--egri-cikis), transform var(--sure-kisa) var(--egri-cikis);
}
.cip:hover { background: var(--renk-ana-yumusak); color: var(--renk-ana-metin); }
.cip:active { transform: scale(0.98); }


/* --------------------------------------------------------------------------
   MARKA BANDI + ONAYLI LİSTE
   Referanstaki turuncu "You've got options" bandının mavi karşılığı.
   Onay işareti saf CSS (halka + döndürülmüş köşe), SVG çizilmedi.
   -------------------------------------------------------------------------- */
.bant {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: var(--bosluk-7) clamp(2rem, 1rem + 5vw, 6rem);
  padding: clamp(2.25rem, 1.2rem + 4.2vw, 5rem);
}
.bant__baslik { margin: 0 0 var(--bosluk-6); font-size: var(--yazi-5); }

.tik-liste {
  display: grid;
  gap: var(--bosluk-5);
  margin: 0;
  padding: 0;
  list-style: none;
}
.tik-liste > li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--bosluk-4);
  align-items: start;
}
.tik {
  position: relative;
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  margin-top: 0.1rem;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  color: var(--renk-ana-metin);
}
.tik::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 46%;
  width: 0.42rem;
  height: 0.8rem;
  border: solid currentColor;
  border-width: 0 2px 2px 0;
  transform: translate(-50%, -50%) rotate(45deg);
}
.tik-liste h3 {
  margin: 0 0 0.2rem;
  font-size: var(--yazi-2);
  font-weight: 600;
  letter-spacing: -0.015em;
}
.tik-liste p { margin: 0; color: var(--metin-ikincil); }
.yuzey-marka .tik { color: #ffffff; }

@media (max-width: 56rem) {
  .bant { grid-template-columns: minmax(0, 1fr); }
  .bant__baslik { margin-bottom: var(--bosluk-5); }
}


/* --------------------------------------------------------------------------
   BÜYÜK LİSTE (/ozellikler/)
   Referanstaki "mid-shift" listesi: iri özellik adları, kaydırdıkça ekranın
   ortasındaki öğe koyulaşır. Soluk hal yalnız JS listeye --canli ekleyince
   gelir (JS yoksa ya da hareket azaltılmışsa hepsi tam renk). Soluk renk
   iri metinde 3:1'in üstünde kalır (WCAG 1.4.3, büyük metin).
   -------------------------------------------------------------------------- */
.buyuk-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  overflow: hidden;
  border-radius: var(--r-buyuk);
  background: var(--zemin-2);
}
.buyuk-liste {
  margin: 0;
  padding: clamp(2rem, 1rem + 4vw, 4.5rem) clamp(1.5rem, 0.75rem + 3.5vw, 4.5rem);
  list-style: none;
}
.buyuk-liste > li {
  padding-block: 0.3rem;
  font-family: var(--yazi-baslik);
  font-size: clamp(1.625rem, 1.05rem + 2.3vw, 3.125rem);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.035em;
  color: var(--metin);
  transition: color var(--sure-orta) var(--egri-cikis);
}
.buyuk-liste--canli > li { color: color-mix(in srgb, var(--metin) 52%, var(--zemin-2)); }
.buyuk-liste--canli > li.aktif { color: var(--metin); }

.buyuk-panel__gorsel {
  position: relative;
  display: grid;
  place-items: center;
  padding: var(--bosluk-7);
  border-radius: var(--r-buyuk);
}
.buyuk-panel__gorsel img {
  width: auto;
  max-height: 30rem;
  filter: drop-shadow(0 28px 36px rgb(2 6 23 / .45));
}
@media (min-width: 56rem) {
  .buyuk-panel__gorsel picture { position: sticky; top: calc(var(--menu-y) + 3rem); }
}
@media (max-width: 56rem) {
  .buyuk-panel { grid-template-columns: minmax(0, 1fr); }
  .buyuk-panel__gorsel { order: -1; min-height: 18rem; border-radius: var(--r-buyuk) var(--r-buyuk) 0 0; }
  .buyuk-panel__gorsel img { max-height: 15rem; }
}


/* --------------------------------------------------------------------------
   FAYDA LİSTESİ (/ozellikler/)
   Altı fayda, iki sütun, onay işaretiyle; kart değil.
   -------------------------------------------------------------------------- */
.fayda-liste {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--bosluk-5) var(--bosluk-7);
  margin: 0;
  padding: 0;
  list-style: none;
}
.fayda-liste > li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--bosluk-4);
  align-items: center;
  padding-block: var(--bosluk-4);
  border-top: 1px solid var(--cizgi);
  font-size: var(--yazi-2);
  font-weight: 500;
  color: var(--metin);
}
@media (max-width: 40rem) {
  .fayda-liste { grid-template-columns: minmax(0, 1fr); gap: 0; }
}


/* --------------------------------------------------------------------------
   DONANIM RAFI (/ozellikler/)
   v2 ana sayfasından taşındı. Dört parça ortak zemin çizgisine oturur.
   -------------------------------------------------------------------------- */
.donanim__raf {
  display: grid;
  gap: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);
  padding: clamp(1.5rem, 1rem + 2vw, 2.75rem);
  border: 1px solid var(--cizgi);
  border-radius: var(--r-buyuk);
  background: linear-gradient(180deg, var(--yuzey) 0%, var(--zemin-2) 100%);
}
.donanim__baslik { max-width: 18ch; margin: 0; }
.donanim__liste {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem clamp(1rem, 0.5rem + 2vw, 2rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
.donanim__resim {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  height: 6.5rem;
  margin-bottom: 1rem;
}
.donanim__resim picture { height: 100%; }
.donanim__resim img { width: auto; height: 100%; }
.donanim__resim::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0.25rem;
  bottom: -0.35rem;
  width: 6.25rem;
  height: 0.8rem;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(var(--golge-rgb) / .22), transparent);
}
.donanim__ad { margin: 0 0 0.3rem; font-size: 1.125rem; font-weight: 600; line-height: 1.3; }
.donanim__not { max-width: 26ch; margin: 0; font-size: 0.9375rem; line-height: 1.5; color: var(--metin-ikincil); }
@media (min-width: 48rem) {
  .donanim__liste { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}


/* --------------------------------------------------------------------------
   İŞ TİPİ IZGARASI (/kimler-icin/)
   Altı iş tipi, altı hücre; 3 sütunda geniş-dar / dar-geniş / geniş-dar.
   Hücre, ana sayfadaki çipin çapası (#restoranlar ...).
   -------------------------------------------------------------------------- */
.segment-izgara {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--bosluk-5);
  margin: 0;
  padding: 0;
  list-style: none;
}
.segment {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: var(--bosluk-5);
  min-height: 19rem;
  padding: clamp(1.5rem, 1rem + 1.8vw, 2.5rem);
  overflow: hidden;
  border-radius: var(--r-yuzey);
  background: var(--zemin-2);
  scroll-margin-top: calc(var(--menu-y) + 1.5rem);
}
.segment--genis { grid-column: span 2; }
.segment--marka {
  --metin: var(--renk-ana-uzeri);
  --metin-ikincil: var(--renk-ana-uzeri-ikincil);
  background: linear-gradient(160deg, var(--renk-ana) 0%, var(--renk-ana-koyu) 55%, var(--renk-ana-derin) 100%);
  color: var(--metin);
}
.segment--gece {
  --metin: var(--renk-ana-uzeri);
  --metin-ikincil: var(--renk-ana-uzeri-ikincil);
  background: linear-gradient(160deg, var(--renk-ana-derin) 0%, var(--murekkep) 100%);
  color: var(--metin);
}
.segment h2 {
  max-width: 14ch;
  margin: 0;
  font-size: clamp(1.75rem, 1.3rem + 1.7vw, 2.75rem);
  color: var(--metin);
}
.segment__ozellikler {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bosluk-2);
  max-width: 34rem;
  margin: auto 0 0;
  padding: 0;
  list-style: none;
}
.segment__ozellikler > li {
  padding: 0.35rem 0.85rem;
  border-radius: var(--r-hap);
  background: var(--yuzey);
  color: var(--metin);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.35;
}
.segment--marka .segment__ozellikler > li,
.segment--gece .segment__ozellikler > li { background: rgb(255 255 255 / .14); color: #ffffff; }

.segment__resim {
  position: absolute;
  z-index: -1;
  top: clamp(1rem, 0.5rem + 1.5vw, 2rem);
  right: clamp(1rem, 0.5rem + 1.5vw, 2rem);
  width: clamp(96px, 5rem + 5vw, 176px);
  filter: drop-shadow(0 16px 20px rgb(2 6 23 / .35));
}
.segment__resim img { width: 100%; height: auto; }
/* Geniş görselli hücrede başlık görselin yanında durur, altına taşmaz */
.segment--genis.segment--resimli h2 { max-width: calc(100% - clamp(96px, 5rem + 5vw, 176px) - 1rem); }
/* Dar görselli hücrede görsel akışta sağ üstte, başlık altında tam genişlik
   (uzun iş tipi adı sözcük ortasından kırılmasın) */
.segment--resimli:not(.segment--genis) .segment__resim {
  position: static;
  z-index: auto;
  align-self: flex-end;
  width: clamp(88px, 4rem + 3.5vw, 124px);
  margin-bottom: calc(-1 * var(--bosluk-3));
}

@media (max-width: 64rem) {
  .segment-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .segment--genis { grid-column: span 2; }
}
@media (max-width: 40rem) {
  .segment-izgara { grid-template-columns: minmax(0, 1fr); gap: var(--bosluk-3); }
  .segment--genis { grid-column: auto; }
  .segment { min-height: 0; }
  /* Telefonda her görselli hücre dar hücre gibi: görsel akışta, başlık altında */
  .segment--resimli .segment__resim {
    position: static;
    z-index: auto;
    align-self: flex-end;
    width: 96px;
    margin-bottom: calc(-1 * var(--bosluk-3));
  }
  .segment--genis.segment--resimli h2 { max-width: none; }
  .segment__ozellikler { margin-top: var(--bosluk-2); }
}


/* --------------------------------------------------------------------------
   FARK VE ALTYAPI IZGARALARI (/neden-bestlinkpos/)
   -------------------------------------------------------------------------- */
.fark-izgara {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(2rem, 1rem + 4vw, 5rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
.fark-izgara > li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--bosluk-5);
  padding-block: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
  border-top: 1px solid var(--cizgi);
}
.fark-izgara h3 { margin: 0.1rem 0 0.4rem; font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem); font-weight: 500; letter-spacing: -0.03em; }
.fark-izgara p { margin: 0; max-width: 40ch; color: var(--metin-ikincil); font-size: var(--yazi-2); line-height: 1.5; }

.altyapi {
  padding: clamp(2rem, 1rem + 4vw, 4.5rem);
  border-radius: var(--r-buyuk);
  background: var(--zemin-2);
}
.altyapi__izgara {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--bosluk-7) clamp(2rem, 1rem + 4vw, 5rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
.altyapi__izgara h3 { margin: 0 0 0.5rem; font-size: var(--yazi-3); }
.altyapi__izgara p { margin: 0; max-width: 46ch; color: var(--metin-ikincil); }

@media (max-width: 48rem) {
  .fark-izgara,
  .altyapi__izgara { grid-template-columns: minmax(0, 1fr); }
  .altyapi__izgara { gap: var(--bosluk-6); }
}


/* --------------------------------------------------------------------------
   DENEME BLOĞU (ana sayfa)
   -------------------------------------------------------------------------- */
.deneme {
  padding: clamp(2.5rem, 1.5rem + 4vw, 5rem) clamp(1.25rem, 0.5rem + 3vw, 4rem);
  border-radius: var(--r-buyuk);
  background: var(--zemin-2);
  text-align: center;
}
.deneme .rozet { margin-bottom: var(--bosluk-5); }
.deneme h2 { max-width: 20ch; margin-inline: auto; }
.deneme p { max-width: 58ch; margin-inline: auto; color: var(--metin-ikincil); font-size: var(--yazi-2); line-height: 1.55; }
.deneme .dugme-grubu { justify-content: center; margin-top: var(--bosluk-6); }


/* --------------------------------------------------------------------------
   SSS
   details/summary; JS gerekmez. Artı işareti açılınca 45 derece döner.
   -------------------------------------------------------------------------- */
.sss { border-top: 1px solid var(--cizgi); }
.sss__oge { border-bottom: 1px solid var(--cizgi); }
.sss__oge > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  min-height: 4.25rem;
  padding-block: 1.125rem;
  cursor: pointer;
  list-style: none;
  font-family: var(--yazi-baslik);
  font-size: clamp(1.125rem, 1.05rem + 0.3vw, 1.3125rem);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.015em;
  color: var(--metin);
  border-radius: var(--r-kucuk);
  -webkit-tap-highlight-color: transparent;
}
.sss__oge > summary::-webkit-details-marker { display: none; }
.sss__oge > summary::marker { content: ""; }
.sss__arti {
  position: relative;
  flex: 0 0 auto;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--cizgi-guclu);
  border-radius: var(--r-hap);
  color: var(--metin);
  transition:
    transform var(--sure-orta) var(--egri-cikis),
    background-color var(--sure-kisa) var(--egri-cikis),
    border-color var(--sure-kisa) var(--egri-cikis),
    color var(--sure-kisa) var(--egri-cikis);
}
.sss__arti::before,
.sss__arti::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 2px;
  margin: -1px 0 0 -6px;
  border-radius: 2px;
  background: currentColor;
}
.sss__arti::after { transform: rotate(90deg); }
.sss__oge[open] .sss__arti {
  transform: rotate(45deg);
  border-color: var(--renk-ana);
  background-color: var(--renk-ana);
  color: var(--renk-ana-uzeri);
}
@media (hover: hover) and (pointer: fine) {
  .sss__oge > summary:hover .sss__arti { border-color: var(--renk-ana-metin); }
  .sss__oge[open] > summary:hover .sss__arti { border-color: var(--renk-ana); }
}
.sss__cevap { padding: 0 3.5rem 1.5rem 0; color: var(--metin-ikincil); }
.sss__cevap p { max-width: 62ch; }
@media (max-width: 30rem) {
  .sss__cevap { padding-right: 0; }
}


/* --------------------------------------------------------------------------
   KAPANIŞ SÖZÜ
   Tek cümle, iri, sola hizalı (referanstaki "On it." bölümü gibi).
   -------------------------------------------------------------------------- */
.kapanis-soz {
  max-width: 30ch;
  margin: 0;
  font-family: var(--yazi-baslik);
  font-size: clamp(1.75rem, 1.1rem + 2.7vw, 3.375rem);
  font-weight: 500;
  line-height: 1.14;
  letter-spacing: -0.035em;
  color: var(--metin);
  text-wrap: balance;
}
.kapanis-soz strong { font-weight: 500; color: var(--renk-ana-metin); }


/* --------------------------------------------------------------------------
   SON ÇAĞRI BANDI
   Tam genişlik marka bandı; rengi alt bara kesintisiz akar (alt barın
   üst rengi = bandın alt rengi), alt bar kartı bandın üstünde yüzer.
   -------------------------------------------------------------------------- */
.son-cagri.yuzey-marka {
  border-radius: 0;
  background-color: var(--renk-ana-koyu);
  background-image:
    radial-gradient(45% 70% at 82% 40%, rgb(var(--renk-parlama-rgb) / .2), transparent 70%),
    linear-gradient(180deg, var(--renk-ana-koyu) 0%, var(--renk-ana-derin) 100%);
}
.son-cagri { padding-block: clamp(3.5rem, 2rem + 6vw, 7rem) clamp(1rem, 0.5rem + 2vw, 2rem); }
.son-cagri__ic {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  align-items: center;
  gap: var(--bosluk-7);
}
.son-cagri h2 { max-width: 18ch; margin-bottom: var(--bosluk-4); font-size: var(--yazi-5); }
.son-cagri .giris { margin-bottom: var(--bosluk-6); }
.son-cagri__gorsel { display: grid; place-items: center; }
.son-cagri__gorsel img {
  width: auto;
  max-height: 22rem;
  filter: drop-shadow(0 28px 36px rgb(2 6 23 / .45));
}
/* Bant varken alt barın üst boşluğu kısalır: iki mavi alan tek yüzey olur */
main:has(> .son-cagri:last-child) + .alt-bar { padding-top: 0; }
@media (max-width: 56rem) {
  .son-cagri__ic { grid-template-columns: minmax(0, 1fr); }
  .son-cagri__gorsel { order: -1; }
  .son-cagri__gorsel img { max-height: 13rem; }
}


/* --------------------------------------------------------------------------
   DEMO KANALLARI (/demo/)
   -------------------------------------------------------------------------- */
.kanallar {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  gap: var(--bosluk-5);
}
.kanal {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--bosluk-4);
  min-height: 22rem;
  padding: clamp(1.75rem, 1rem + 3vw, 3.5rem);
  overflow: hidden;
  border-radius: var(--r-buyuk);
}
.kanal:not(.yuzey-marka) { background: var(--zemin-2); }
.kanal h2 { margin: 0; font-size: var(--yazi-4); }
.kanal p { max-width: 44ch; margin: 0; color: var(--metin-ikincil); font-size: var(--yazi-2); line-height: 1.5; }
.kanal .dugme { margin-top: auto; }
.kanal__resim {
  position: absolute;
  z-index: -1;
  right: clamp(1rem, 0.5rem + 2vw, 2.5rem);
  top: clamp(1rem, 0.5rem + 2vw, 2.5rem);
  width: clamp(88px, 4rem + 5vw, 150px);
  filter: drop-shadow(0 16px 22px rgb(2 6 23 / .4));
}
.kanal__resim img { width: 100%; height: auto; }
.kanal__deger {
  margin-top: auto;
  font-family: var(--yazi-baslik);
  font-size: clamp(1.25rem, 1rem + 1vw, 1.875rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
}
.kanal__deger a { color: var(--renk-ana-metin); }
.kendin-dene {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--bosluk-4);
  margin-top: var(--bosluk-5);
  padding: var(--bosluk-5) clamp(1.25rem, 0.5rem + 2.5vw, 2.5rem);
  border: 1px solid var(--cizgi);
  border-radius: var(--r-yuzey);
}
.kendin-dene p { margin: 0; max-width: 60ch; color: var(--metin-ikincil); }
.kendin-dene strong { color: var(--metin); }
@media (max-width: 56rem) {
  .kanallar { grid-template-columns: minmax(0, 1fr); }
  .kanal { min-height: 0; }
  .kanal h2 { max-width: calc(100% - clamp(88px, 4rem + 5vw, 150px)); }
}


/* --------------------------------------------------------------------------
   KOYU TEMA VE KULLANICI TERCİHLERİ
   -------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  /* Siyah donanım koyu zemine karışmasın: arkasında yumuşak parlama */
  .donanim__resim picture { position: relative; }
  .donanim__resim picture::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -16% -24% -6%;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgb(var(--renk-parlama-rgb) / .16), rgb(var(--renk-ana-rgb) / .10) 60%, transparent);
    pointer-events: none;
  }
  .donanim__resim::after { background: radial-gradient(closest-side, rgb(var(--renk-parlama-rgb) / .22), transparent); }
  .urun-kart--acik { background: var(--renk-ana-yumusak-2); }
}

@media (prefers-reduced-motion: reduce) {
  .urun-kart:hover,
  .urun-kart:active,
  .cip:active { transform: none; }
  .urun-kart:hover .urun-kart__resim img { transform: none; }
}

@media (forced-colors: active) {
  .cip,
  .urun-kart,
  .segment,
  .kanal,
  .deneme,
  .altyapi,
  .buyuk-panel { border: 1px solid CanvasText; }
  .tik { border-color: CanvasText; }
}

@media print {
  .hero-ana__gorsel,
  .sayfa-hero__gorsel,
  .son-cagri__gorsel,
  .urun-kart__resim,
  .segment__resim,
  .kanal__resim { display: none !important; }
  .urun-kart,
  .segment,
  .son-cagri,
  .yuzey-marka { background: none !important; color: #000000 !important; }
}

/* Görselsiz sayfa hero'sunun hemen altındaki bölüm: üst boşluk hero'dan gelir */
.bolum--bitisik { padding-top: 0; }

/* Kart ızgarası altındaki sayfa bağlantısı */
.kart-izgara__alt { margin: var(--bosluk-5) 0 0; }


/* --------------------------------------------------------------------------
   v3.1: ÖZELLİK SAYFALARI
   -------------------------------------------------------------------------- */

/* Alt sayfadayken menüde üst bölüm (Özellikler) işaretli görünür */
.ust-menu__baglantilar a[aria-current="true"] { color: var(--renk-ana-metin); background: var(--renk-ana-yumusak); }
.ust-menu__panel-ic a[aria-current="true"] { color: var(--renk-ana-metin); }

/* Üst sayfaya dönüş: hap etiketin üstünde küçük bağlantı */
.kirinti { margin: 0 0 var(--bosluk-4); font-size: 0.9375rem; }
.kirinti a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 44px;
  color: var(--metin-ikincil);
  font-weight: 500;
  text-decoration: none;
}
.kirinti a::before {
  content: "←";
  transition: transform var(--sure-kisa) var(--egri-cikis);
}
.kirinti a:hover { color: var(--renk-ana-metin); }
.kirinti a:hover::before { transform: translateX(-3px); }

/* Fayda listesi (/ozellikler/): her madde kendi sayfasına gider */
.fayda-liste > li:has(> .fayda-liste__baglanti) { display: block; padding-block: 0; }
.fayda-liste__baglanti {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--bosluk-4);
  align-items: center;
  min-height: 44px;
  padding-block: var(--bosluk-4);
  color: var(--metin);
  text-decoration: none;
  transition: color var(--sure-kisa) var(--egri-cikis);
}
.fayda-liste__ok {
  color: var(--renk-ana-metin);
  transition: transform var(--sure-kisa) var(--egri-cikis);
}
.fayda-liste__baglanti:hover { color: var(--renk-ana-metin); }
.fayda-liste__baglanti:hover .fayda-liste__ok { transform: translateX(4px); }

/* Detay paneli: tek konu, başlık + açıklama + isteğe bağlı çipler (dikey yığın) */
.detay {
  padding: clamp(2rem, 1rem + 4vw, 4.5rem);
  border-radius: var(--r-buyuk);
  background: var(--zemin-2);
}
.detay h2 { max-width: 22ch; margin-bottom: var(--bosluk-4); }
.detay p { max-width: 60ch; margin: 0; color: var(--metin-ikincil); font-size: var(--yazi-2); line-height: 1.55; }
.detay__cipler {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bosluk-2);
  margin: var(--bosluk-6) 0 0;
  padding: 0;
  list-style: none;
}
.detay__cipler > li {
  padding: 0.5rem 1.1rem;
  border: 1px solid var(--cizgi);
  border-radius: var(--r-hap);
  background: var(--yuzey);
  color: var(--metin);
  font-weight: 500;
  line-height: 1.35;
}

/* Diğer özellikler: ana sayfa kartlarının küçük sürümü, beş hücre */
.ilgili-izgara {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--bosluk-4);
  margin: 0;
  padding: 0;
  list-style: none;
}
.ilgili-izgara__oge { display: flex; min-width: 0; }
.urun-kart--kucuk { min-height: 15rem; padding: var(--bosluk-5); }
.urun-kart--kucuk .urun-kart__resim { margin-bottom: var(--bosluk-3); }
.urun-kart--kucuk .urun-kart__resim img { max-width: min(62%, 96px); max-height: 6rem; }
.urun-kart--kucuk .urun-kart__baslik,
.urun-kart--kucuk.urun-kart--metin .urun-kart__baslik { font-size: 1.125rem; line-height: 1.25; letter-spacing: -0.015em; }
.urun-kart--kucuk .urun-kart__ok { margin-top: var(--bosluk-2); font-size: 1rem; }
@media (max-width: 64rem) {
  .ilgili-izgara { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 40rem) {
  .ilgili-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--bosluk-3); }
  .ilgili-izgara > .ilgili-izgara__oge:last-child:nth-child(odd) { grid-column: span 2; }
  .urun-kart--kucuk { min-height: 12.5rem; padding: var(--bosluk-4); }
}


/* ==========================================================================
   v4 (2026-10-01): GERÇEK EKRANLAR VE VİDEO
   Kullanıcı: "daha profesyonel yap, video, resim, sistemden ss koy".
   Logo çizimleri ve cihaz parçaları yerine sistemin kendi ekranları. Ekranlar
   194 test işletmesinden 2x çekildi (tablet 1280x800, telefon 390x844);
   işletme adı çekimde "BestlinkCafe" (kullanıcı kararı), ürün fotoğrafları
   Unsplash (ücretsiz lisans). Pazaryeri ekranı ve siparişi görüntüye girmez.
   ========================================================================== */

/* Yalnız ekran okuyucu için metin */
.gorunmez {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   CİHAZ ÇERÇEVESİ (saf CSS): tablet 16:10, telefon 390x844.
   Gövde rengi iki temada aynı; lacivert zeminde kenarı ince açık halka ayırır.
   -------------------------------------------------------------------------- */
.cihaz {
  --cihaz-govde: #0a0e19;
  position: relative;
  margin: 0;
  background: var(--cihaz-govde);
  box-shadow:
    inset 0 0 0 1px rgb(255 255 255 / .10),
    0 0 0 1px rgb(2 6 23 / .20),
    0 2px 6px rgb(2 6 23 / .18),
    0 30px 60px -20px rgb(2 6 23 / .55);
}
.cihaz > picture { display: contents; }
.cihaz img,
.cihaz video { display: block; width: 100%; height: auto; }

.cihaz--tablet {
  padding: clamp(5px, 0.15rem + 0.5vw, 11px);
  border-radius: clamp(14px, 0.5rem + 1vw, 26px);
}
.cihaz--tablet img,
.cihaz--tablet video {
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: left top;
  border-radius: clamp(9px, 0.25rem + 0.6vw, 16px);
  background: #f5f7fb;
}

.cihaz--telefon {
  padding: clamp(4px, 0.12rem + 0.35vw, 8px);
  border-radius: clamp(22px, 0.9rem + 1.5vw, 42px);
}
.cihaz--telefon img {
  aspect-ratio: 390 / 844;
  object-fit: cover;
  object-position: top;
  border-radius: clamp(18px, 0.75rem + 1.25vw, 35px);
  background: #eadbbd;
}

/* --------------------------------------------------------------------------
   TANITIM VİDEOSU: poster önce görünür; video görünür olunca yüklenip oynar,
   görünmez olunca durur (site-*.js). Hareket azaltılmışsa kendiliğinden
   oynamaz. Oynat/Durdur düğmesi her zaman var (WCAG 2.2.2).
   -------------------------------------------------------------------------- */
.tanitim-video { position: relative; }
.tanitim-video__dugme {
  position: absolute;
  right: clamp(12px, 0.4rem + 1.2vw, 26px);
  bottom: clamp(12px, 0.4rem + 1.2vw, 26px);
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 40px;
  padding: 0 1rem 0 0.875rem;
  border: 0;
  border-radius: var(--r-hap);
  background: rgb(10 14 25 / .84);
  color: #ffffff;
  font: 600 0.8125rem/1 var(--yazi-metin);
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background-color var(--sure-kisa) var(--egri-cikis), transform var(--sure-kisa) var(--egri-cikis);
}
.tanitim-video__dugme[hidden] { display: none; }
.tanitim-video__dugme:hover { background: rgb(10 14 25 / .95); }
.tanitim-video__dugme:active { transform: scale(0.97); }
.tanitim-video__dugme:focus-visible { outline: 3px solid #ffffff; outline-offset: 3px; }
/* Simge: oynarken iki çubuk, dururken üçgen; saf CSS */
.tanitim-video__simge { position: relative; flex: none; width: 10px; height: 12px; }
.tanitim-video__simge::before,
.tanitim-video__simge::after {
  content: "";
  position: absolute;
  top: 0;
  width: 3px;
  height: 12px;
  border-radius: 1px;
  background: currentColor;
}
.tanitim-video__simge::before { left: 1px; }
.tanitim-video__simge::after { right: 1px; }
.tanitim-video__dugme:not(.oynuyor) .tanitim-video__simge::before {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 6px 0 6px 10px;
  border-color: transparent transparent transparent currentColor;
  border-radius: 0;
  background: none;
}
.tanitim-video__dugme:not(.oynuyor) .tanitim-video__simge::after { display: none; }
@media (max-width: 40rem) {
  .tanitim-video__dugme { min-height: 32px; padding: 0 0.75rem 0 0.625rem; font-size: 0.75rem; gap: 0.4rem; }
}

/* --------------------------------------------------------------------------
   ANA SAYFA HERO (v4): sağda tablet (masa siparişi videosu), sol altında
   telefon (QR menü). Tablet panelin içinde kalır: videonun Oynat/Durdur
   düğmesi sağ altta hep görünür.
   -------------------------------------------------------------------------- */
.hero-ana__panel.hero-ana__panel--medya {
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(2rem, 1rem + 3vw, 4rem);
}
/* Ölçüldü (1024-1920 px): bu boyutla başlık üç satır, panel 506 px */
.hero-ana__panel--medya .hero-ana__baslik { max-width: none; font-size: clamp(2.25rem, 1.3rem + 2.2vw, 3rem); }
.hero-ana__medya {
  position: relative;
  min-width: 0;
  padding: 0 0 clamp(1.5rem, 0.75rem + 2.5vw, 3rem) clamp(1.75rem, 0.75rem + 3.5vw, 4.5rem);
}
.hero-ana__telefon {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 2;
  width: clamp(6.5rem, 3rem + 8.5vw, 11.5rem);
}
@media (max-width: 56rem) {
  .hero-ana__panel.hero-ana__panel--medya { grid-template-columns: minmax(0, 1fr); }
  .hero-ana__medya { width: 100%; margin-top: var(--bosluk-2); padding-left: 16%; }
  .hero-ana__telefon { width: 29%; }
}

/* --------------------------------------------------------------------------
   İÇ SAYFA SAHNESİ: mavi panelde tek ekran. Tablet panelin sağ ve alt
   kenarından taşar (ekranın sol üstü görünür); telefon ortada, alttan taşar.
   --------------------------------------------------------------------------- */
.sayfa-hero__gorsel.sahne { place-items: start; padding: 0; }
.sahne .cihaz--tablet {
  position: absolute;
  left: var(--sol, 9%);
  top: var(--ust, 12%);
  width: var(--en, 122%);
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.sahne .cihaz--telefon {
  position: absolute;
  left: 50%;
  top: var(--ust, 9%);
  width: var(--en, 44%);
  translate: -50% 0;
}
.sahne .cihaz--telefon + .cihaz--tablet,
.sahne .sahne__ikinci { z-index: 1; }

/* --------------------------------------------------------------------------
   EKRAN KARTLARI (ana sayfa, 6 fayda): açık zemin, başlık solda üstte,
   ekran kesiti sağ alttan taşar. Kartın tamamı bağlantı.
   -------------------------------------------------------------------------- */
.ekran-kart {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 23rem;
  overflow: hidden;
  border: 1px solid var(--cizgi);
  border-radius: var(--r-yuzey);
  background: var(--renk-ana-yumusak);
  color: var(--metin);
  text-decoration: none;
  transition: transform var(--sure-orta) var(--egri-cikis), box-shadow var(--sure-orta) var(--egri-cikis), border-color var(--sure-orta) var(--egri-cikis);
}
.ekran-kart__ust {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--bosluk-4);
  padding: var(--bosluk-6) var(--bosluk-6) var(--bosluk-5);
}
.ekran-kart__baslik {
  max-width: 17ch;
  margin: 0;
  font-size: var(--yazi-3);
  font-weight: 500;
  line-height: 1.18;
  letter-spacing: -0.025em;
  color: inherit;
  text-wrap: balance;
}
.ekran-kart__ok {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--r-hap);
  background: var(--yuzey);
  color: var(--renk-ana-metin);
  font-size: 1.125rem;
  line-height: 1;
  box-shadow: var(--golge-1);
  transition: transform var(--sure-kisa) var(--egri-cikis), background-color var(--sure-kisa) var(--egri-cikis), color var(--sure-kisa) var(--egri-cikis);
}
.ekran-kart__gorsel {
  position: relative;
  flex: 1 1 auto;
  min-height: 12rem;
  margin-left: var(--bosluk-6);
}
.ekran-kart__gorsel img {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--gorsel-en, 132%);
  max-width: none;
  height: auto;
  border: 1px solid rgb(var(--golge-rgb) / .10);
  border-right: 0;
  border-bottom: 0;
  border-top-left-radius: 14px;
  background: #ffffff;
  box-shadow: 0 1px 2px rgb(var(--golge-rgb) / .06), 0 18px 40px -16px rgb(var(--golge-rgb) / .30);
  transition: transform var(--sure-uzun) var(--egri-cikis-uzun);
}
/* Telefon ekranı: kartın ortasında dik durur, alttan taşar */
.ekran-kart__gorsel--telefon { margin-left: 0; display: flex; justify-content: center; }
.ekran-kart__gorsel--telefon .cihaz--telefon {
  position: absolute;
  top: 0;
  width: min(60%, 13.5rem);
}
.ekran-kart__gorsel--telefon .cihaz--telefon img { position: static; width: 100%; border: 0; box-shadow: none; border-radius: clamp(18px, 0.75rem + 1.25vw, 30px); }

/* Ekranı olmayan kart (çok şube): lacivert, iri başlık */
.ekran-kart--metin {
  justify-content: space-between;
  border-color: transparent;
  background: linear-gradient(160deg, var(--renk-ana-koyu) 0%, var(--renk-ana-derin) 58%, var(--murekkep) 100%);
  color: #ffffff;
}
.ekran-kart--metin .ekran-kart__ust { flex: 1 1 auto; flex-direction: column; justify-content: space-between; }
.ekran-kart--metin .ekran-kart__baslik { max-width: 14ch; font-size: var(--yazi-4); line-height: 1.08; letter-spacing: -0.035em; }
.ekran-kart--metin .ekran-kart__ok { background: rgb(255 255 255 / .14); color: #ffffff; box-shadow: none; }

@media (hover: hover) and (pointer: fine) {
  .ekran-kart:hover { transform: translateY(-3px); border-color: rgb(var(--renk-ana-rgb) / .35); box-shadow: 0 24px 44px -26px rgb(var(--renk-ana-rgb) / .55); }
  .ekran-kart:hover .ekran-kart__gorsel img { transform: translate(-6px, -6px); }
  .ekran-kart:hover .ekran-kart__gorsel--telefon .cihaz--telefon img { transform: none; }
  .ekran-kart:hover .ekran-kart__ok { transform: translateX(3px); background: var(--renk-ana); color: #ffffff; }
  .ekran-kart--metin:hover .ekran-kart__ok { background: #ffffff; color: var(--renk-ana-derin); }
}
.ekran-kart:active { transform: scale(0.99); }
.ekran-kart:focus-visible { outline-offset: 4px; }

@media (max-width: 40rem) {
  /* Telefonda tek sütun: dar kartta başlık sözcük sözcük kırılmasın */
  .kart-izgara { grid-template-columns: minmax(0, 1fr); }
  .kart-izgara__oge--genis { grid-column: auto; }
  .ekran-kart { min-height: 19rem; }
  .ekran-kart__ust { padding: var(--bosluk-5) var(--bosluk-5) var(--bosluk-4); }
  .ekran-kart__baslik { font-size: 1.25rem; }
  .ekran-kart__gorsel { min-height: 10.5rem; margin-left: var(--bosluk-5); }
  .ekran-kart--metin { min-height: 13rem; }
  .ekran-kart--metin .ekran-kart__baslik { font-size: 1.75rem; }
}

/* Küçük ekran kartı ("Diğer özellikler"): başlık altta, üstte kesit */
.ekran-kart--kucuk { min-height: 15.5rem; }
.ekran-kart--kucuk .ekran-kart__ust { order: 2; padding: var(--bosluk-4) var(--bosluk-5) var(--bosluk-5); }
.ekran-kart--kucuk .ekran-kart__baslik { font-size: 1.0625rem; line-height: 1.25; letter-spacing: -0.015em; }
.ekran-kart--kucuk .ekran-kart__ok { width: 2rem; height: 2rem; font-size: 0.9375rem; }
.ekran-kart--kucuk .ekran-kart__gorsel { order: 1; min-height: 8.5rem; margin: var(--bosluk-5) 0 0 var(--bosluk-5); }
.ekran-kart--kucuk.ekran-kart--metin .ekran-kart__baslik { font-size: 1.25rem; }
.ekran-kart--kucuk .ekran-kart__gorsel--telefon { margin-left: 0; }
.ekran-kart--kucuk .ekran-kart__gorsel--telefon .cihaz--telefon { width: min(46%, 7.5rem); }

/* Koyu tema: kart zemini koyu marka tonu, kesit beyaz kalır (ürün açık temada çekildi) */
@media (prefers-color-scheme: dark) {
  .ekran-kart { border-color: rgb(255 255 255 / .08); }
  .ekran-kart__gorsel img { border-color: rgb(255 255 255 / .12); box-shadow: 0 18px 40px -16px rgb(0 0 0 / .6); }
}

/* --------------------------------------------------------------------------
   EKRANLI ADIM / SEGMENT GÖRSELİ: içerik sayfalarında düz ekran kesiti
   -------------------------------------------------------------------------- */
.ekran-kesit {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--cizgi);
  border-radius: 14px;
  background: #ffffff;
  box-shadow: var(--golge-2);
}
.ekran-kesit img { display: block; width: 100%; height: auto; }

/* İç sayfa sahnesi, çeşitler */
.sahne.sahne--video { place-items: center; padding: 7% 6%; }
.sahne--video .tanitim-video {
  /* Video tableti taşmaz: Oynat/Durdur düğmesi hep görünür kalsın */
  position: relative;
  left: auto;
  top: auto;
  width: 100%;
  border-radius: clamp(14px, 0.5rem + 1vw, 26px);
}
.sahne--iki-telefon .cihaz--telefon { position: absolute; translate: none; }
.sahne--iki-telefon .sahne__arka { left: 12%; top: 16%; width: 37%; }
.sahne--iki-telefon .sahne__on { left: 47%; top: 7%; width: 40%; z-index: 1; }
.sahne--ikili .sahne__telefon { position: absolute; left: 4%; top: 36%; width: 27%; translate: none; z-index: 1; }

/* Büyük liste paneli (/ozellikler/): sağ hücrede mutfak ekranı, panelden taşar */
.buyuk-panel__gorsel.sahne { display: block; min-height: 24rem; padding: 0; overflow: hidden; }
@media (max-width: 56rem) {
  .buyuk-panel__gorsel.sahne { min-height: 0; aspect-ratio: 4 / 3; }
}

/* Son çağrı bandı: sağda tablette sipariş ekranı */
.son-cagri__gorsel--ekran { width: 100%; }
.son-cagri__gorsel--ekran .cihaz--tablet { width: 100%; max-width: 34rem; margin-inline: auto; }
@media (max-width: 56rem) {
  .son-cagri__gorsel--ekran .cihaz--tablet { max-width: 26rem; }
}

/* İş tipi hücresi (/kimler-icin/) ekranlı: geniş hücrede ekran sağ yarıda,
   dar hücrede altta; ikisinde de hücrenin sağ ve alt kenarından taşar */
.segment--ekranli { --seg-p: clamp(1.5rem, 1rem + 1.8vw, 2.5rem); }
.segment--ekranli .segment__ekran {
  order: 3;
  position: relative;
  height: 11.5rem;
  margin: var(--bosluk-2) calc(-1 * var(--seg-p)) calc(-1 * var(--seg-p)) 0;
  overflow: hidden;
  border-top-left-radius: 14px;
  box-shadow: 0 18px 40px -18px rgb(2 6 23 / .45);
}
.segment--ekranli .segment__ekran img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: left top; background: #ffffff; }
.segment--ekranli .segment__ekran--telefon {
  display: flex;
  justify-content: center;
  margin-right: 0;
  overflow: hidden;
  border-radius: 0;
  box-shadow: none;
}
.segment--ekranli .segment__ekran--telefon .cihaz--telefon { width: min(52%, 11rem); height: max-content; }
.segment--ekranli .segment__ekran--telefon img { height: auto; object-fit: initial; }
@media (min-width: 64rem) {
  .segment--genis.segment--ekranli {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    grid-template-rows: auto 1fr;
    column-gap: var(--bosluk-6);
  }
  .segment--genis.segment--ekranli > h2 { grid-column: 1; grid-row: 1; }
  .segment--genis.segment--ekranli > .segment__ozellikler { grid-column: 1; grid-row: 2; align-self: end; }
  .segment--genis.segment--ekranli > .segment__ekran { grid-column: 2; grid-row: 1 / span 2; align-self: end; height: 15rem; margin-top: 0; }
}

/* Ekranlı adımlar (/nasil-calisir/): metnin yanında ekran kesiti */
.adim-listesi--ekranli .adim { grid-template-columns: auto minmax(0, 1fr) minmax(0, 1.05fr); column-gap: clamp(1.25rem, 0.5rem + 2.5vw, 3rem); }
.adim-listesi--ekranli .adim__ekran { align-self: center; }
@media (max-width: 56rem) {
  .adim-listesi--ekranli .adim { grid-template-columns: auto minmax(0, 1fr); }
  .adim-listesi--ekranli .adim__ekran { grid-column: 1 / -1; margin-top: var(--bosluk-2); }
}