/* PratikVision masaüstü sayfaları: ana sayfa ve giriş sayfasının düzeni.
   /ortak/css/ortak-2.css ve /ortak/css/masaustu-2.css'ten sonra yüklenir.
   Görünümden bağımsız yolda durur: telefon tarayıcısından gelen istek de aynı dosyayı alır,
   önbellekte 404 saklanmaz. Renk, yazı ve boşluk yalnız ortak değişkenlerle; satır içi stil yok. */

/* Fotoğraf kutuyu doldursun: resim, yüksekliği verilmiş kutunun tamamını kaplar */
.takvim__foto picture,
.zincir__foto picture,
.sss__foto picture,
.iletisim__foto picture,
.giris__foto picture {
  height: 100%;
}

/* ---------- İlk ekran ---------- */

.kahraman {
  padding-block: var(--b-7);
}

/* Slogan tam genişlikte tek satır; altında solda tanım, fayda cümlesi ve eylemler tek blok,
   sağda program. İki sütun da sloganın hemen altından başlar. */
.kahraman__alt {
  margin-top: var(--b-6);
  align-items: start;
}

.kahraman__metin {
  grid-column: 1 / span 4;
}

/* Fayda cümlesi ikinci planda kalmasın: ana metin renginde, ara boyda */
.kahraman__metin .tanim {
  margin-top: 0;
}

.kahraman__metin .giris-metni {
  margin-top: var(--b-5);
  color: var(--metin);
  font-size: var(--boy-ara);
  line-height: var(--satir-ara);
}

.kahraman__metin .eylemler {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--b-3);
  margin-top: var(--b-6);
}

.kahraman__urun {
  grid-column: 5 / span 8;
}

/* Telefon, panonun sağ kenarında kırpımla kesilen kartın üstüne biner */
.kahraman__urun .cihazlar__telefon {
  right: 5%;
}

/* ---------- Bir siparişin haftası (takvim) ---------- */

.takvim {
  padding-bottom: var(--bolum-dolgu);
}

/* Kenardan kenara mağaza fotoğrafı: yüz ve uzanan el kadrajda kalır. Odak yukarıda tutulur ki
   ilk ekranın altında görünen ince kesitte baş değil çerçeve duvarı olsun. */
.takvim__foto {
  --foto-odak: 50% 12%;
  height: clamp(300px, 22vw, 420px);
}

.takvim__bas {
  margin-top: var(--b-8);
}

.takvim__gunler {
  row-gap: var(--b-6);
  margin-top: var(--b-7);
}

.takvim__sali {
  grid-column: 1 / span 6;
}

.takvim__sag {
  display: grid;
  grid-column: 7 / span 6;
  align-content: start;
  gap: var(--b-5);
}

.takvim .adim {
  padding-block: var(--b-4) var(--b-5);
}

/* ---------- Atölye, siparişler ve özellikler ---------- */

.ozellik {
  align-items: start;
  margin-top: var(--b-7);
}

.ozellik__ekranlar {
  display: grid;
  grid-column: 1 / span 7;
  gap: var(--b-6);
}

.ozellik__maddeler {
  grid-column: 8 / span 5;
  padding-left: var(--b-6);
}

.ozellik__maddeler .madde {
  padding-block: var(--b-4) var(--b-5);
}

/* Sağ sütunun kendi ara başlığı: müşteri tezgâhtayken yapılan işler */
.ozellik__maddeler .ara-baslik {
  margin-bottom: var(--b-4);
  font-size: var(--boy-ara);
  font-weight: 600;
  line-height: var(--satir-ara);
}

.ozellik__maddeler .ara-baslik + .madde {
  padding-top: 0;
  border-top: 0;
}

/* Siparişler listesinin altında hazır mesajı ve lens bildirimi */
.ozellik__not {
  padding-top: var(--b-4);
  border-top: 1px solid var(--cizgi);
}

/* ---------- Birden çok mağaza ---------- */

/* Şube ve dönem seçimi: ön metnin hemen altında, metin genişliğinde */
.zincir__kanit {
  grid-column: 7 / span 6;
  align-self: start;
  margin-top: var(--b-5);
}

.zincir__alt {
  align-items: start;
  margin-top: var(--b-7);
}

.zincir__metin {
  grid-column: 1 / span 5;
}

.zincir__metin p {
  padding-block: var(--b-4) var(--b-5);
  border-top: 1px solid var(--cizgi);
}

.zincir__metin p:first-child {
  padding-top: 0;
  border-top: 0;
}

/* Fotoğraf, metin sütunu kadar uzar */
.zincir__foto {
  --foto-odak: 26% 50%;
  grid-column: 7 / span 6;
  align-self: stretch;
  min-height: 360px;
}

/* ---------- Reçete sağlık verisidir ---------- */

.guvenlik__metin {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--b-7);
  margin-top: var(--b-7);
}

.guvenlik__metin p {
  padding-top: var(--b-4);
  border-top: 1px solid var(--cizgi);
  color: var(--metin-2);
}

/* ---------- Sık sorulanlar ---------- */

.sss {
  align-items: start;
}

.sss__bas {
  grid-column: 1 / span 4;
}

.sss__not {
  margin-top: var(--b-4);
  color: var(--metin-2);
}

.sss__not a {
  color: var(--metin);
  font-weight: 600;
}

/* Marka sarısının fotoğraftaki karşılığı: sarı çerçeve */
.sss__foto {
  --foto-odak: 50% 50%;
  height: 300px;
  margin-top: var(--b-7);
}

.sss .sorular {
  grid-column: 6 / span 7;
}

/* ---------- Tanıtım randevusu ve iletişim ---------- */

.iletisim__izgara {
  align-items: center;
}

.iletisim__foto {
  --foto-odak: 50% 60%;
  grid-column: 1 / span 6;
  height: 480px;
}

.iletisim__metin {
  grid-column: 8 / span 5;
}

.iletisim__metin .eylemler {
  margin-top: var(--b-5);
}

.iletisim__degerler {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: var(--b-6);
  padding-top: var(--b-4);
  border-top: 1px solid var(--cizgi);
}

.iletisim__tam {
  grid-column: 1 / -1;
}

/* ---------- Giriş sayfası ---------- */

.giris__foto {
  --foto-odak: 30% 50%;
  height: 560px;
}

/* ---------- Dar pencere ve %200 yakınlaştırma: her şey tek sütuna ---------- */

@media (max-width: 1100px) {
  .kahraman__metin,
  .kahraman__urun,
  .takvim__sali,
  .takvim__sag,
  .ozellik__ekranlar,
  .ozellik__maddeler,
  .zincir__metin,
  .zincir__foto,
  .sss__bas,
  .sss .sorular,
  .iletisim__foto,
  .iletisim__metin {
    grid-column: 1 / -1;
  }

  .kahraman__metin .eylemler {
    flex-direction: row;
    align-items: center;
    gap: var(--b-4) var(--b-6);
  }

  .kahraman__urun,
  .ozellik__maddeler,
  .sss .sorular,
  .iletisim__metin {
    margin-top: var(--b-7);
  }

  .ozellik__maddeler {
    padding-left: 0;
  }

  .zincir__kanit {
    grid-column: 1 / -1;
    max-width: 760px;
  }

  .zincir__foto {
    align-self: auto;
    height: clamp(240px, 40vw, 420px);
    min-height: 0;
    margin-top: var(--b-6);
  }

  .guvenlik__metin {
    grid-template-columns: minmax(0, 1fr);
  }

  .guvenlik__metin p + p {
    margin-top: var(--b-4);
  }

  .sss__foto {
    display: none;
  }

  .iletisim__foto,
  .giris__foto {
    height: clamp(240px, 40vw, 420px);
  }
}

@media (max-width: 600px) {
  .iletisim__degerler {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ==========================================================================
   Ana sayfa, zengin içerik: ilk ekran, tanıdık dertler, bir günün sahneleri,
   roller, zincirler, karşılaştırma, tek program, güven, geçiş, sıradaki işler,
   sık sorulanlar ve kapanış. Yukarıdaki kurallar giriş ve öteki sayfalar için
   yerinde durur; bu bölüm yalnız yeni sınıflar tanımlar.
   ========================================================================== */

/* ---------- İlk ekran ---------- */

/* Sloganın üstünde programın kime göre olduğunu söyleyen kısa satır */
.kahraman__ust {
  margin-bottom: var(--b-3);
  color: var(--eylem);
  font-size: var(--boy-govde);
  font-weight: 600;
  line-height: 1.4;
}

.acilis {
  align-items: start;
  margin-top: var(--b-6);
}

.acilis__metin {
  grid-column: 1 / span 5;
}

.acilis__urun {
  grid-column: 6 / span 7;
}

.acilis__urun .cihazlar__telefon {
  right: 5%;
}

.acilis__alt {
  color: var(--metin);
  font-size: var(--boy-ara);
  line-height: var(--satir-ara);
}

.acilis__buyume {
  margin-top: var(--b-4);
  color: var(--metin-2);
}

.acilis__eylemler {
  gap: var(--b-3) var(--b-6);
  margin-top: var(--b-6);
}

.acilis__ara {
  margin-top: var(--b-2);
  color: var(--metin-2);
}

.acilis__ara a {
  color: var(--metin);
  font-weight: 600;
}

/* Üç kısa satır, önünde ince onay işareti */
.acilis__kisa {
  display: grid;
  gap: var(--b-2);
  margin: var(--b-6) 0 0;
  padding: var(--b-4) 0 0;
  border-top: 1px solid var(--cizgi);
  list-style: none;
}

.acilis__kisa li {
  position: relative;
  padding-left: 28px;
}

.acilis__kisa li::before {
  content: "";
  position: absolute;
  top: 0.48em;
  left: 2px;
  width: 13px;
  height: 7px;
  border-bottom: 2px solid var(--eylem);
  border-left: 2px solid var(--eylem);
  transform: rotate(-45deg);
}

/* ---------- Tanıdık geliyor mu ---------- */

/* Zeminde vitrin fotoğrafı, soluk: başlık bölgesinde görünmez, kartların arkasında belirir */
.tanidik {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.tanidik__zemin {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.22;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, transparent 36%, #000 78%);
  mask-image: linear-gradient(to bottom, transparent 0, transparent 36%, #000 78%);
}

.tanidik__zemin picture,
.tanidik__zemin img {
  width: 100%;
  height: 100%;
}

.tanidik__zemin img {
  object-fit: cover;
  object-position: 50% 60%;
}

.dertler {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--b-5);
  margin: var(--b-7) 0 0;
  padding: 0;
  list-style: none;
}

.dert {
  display: flex;
  flex-direction: column;
  padding: var(--b-5) var(--b-5) var(--b-3);
  border-radius: var(--kose);
  background: var(--zemin);
  box-shadow: var(--golge);
}

.dert__soz {
  font-size: var(--boy-govde);
  font-weight: 600;
  line-height: 1.4;
  text-wrap: pretty;
}

.dert__cozum {
  margin-top: var(--b-3);
  color: var(--metin-2);
}

/* Köşedeki saat kartı günün ilgili sahnesine bağlar */
.dert__saat {
  display: inline-flex;
  align-self: flex-end;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  margin-top: auto;
  padding-top: var(--b-3);
  font-family: var(--yazi-esit);
  font-size: var(--boy-kucuk);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

/* ---------- Bir optik mağazasında bir gün ---------- */

.sahneler {
  margin-top: var(--b-7);
}

/* Sahne ve aradaki çağrı şeridi aynı 12 sütunda: solda saat ekseni, sağda sahne */
.sahne,
.sahne-ara {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 24px;
}

/* Saat ekseni: sahneler boyunca kesintisiz ince çizgi; saat ve rozet sahne bitene kadar ekranda kalır */
.sahne__eksen {
  grid-column: 1 / span 2;
  padding: var(--b-7) var(--b-5) var(--b-7) 0;
  border-right: 1px solid var(--cizgi);
}

.sahne-ara .sahne__eksen {
  padding-block: 0;
}

.sahne__yapiskan {
  position: sticky;
  top: calc(var(--ust-yukseklik) + var(--b-5));
  text-align: right;
}

.sahne__saat {
  display: block;
  color: var(--eylem);
  font-family: var(--yazi-esit);
  font-size: var(--boy-baslik);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
}

/* Marka sarısı: saatin üstünde takvim yaprağındaki gibi kısa çizgi */
.sahne__saat::before {
  content: "";
  display: block;
  width: 32px;
  height: 4px;
  margin: 0 0 var(--b-3) auto;
  border-radius: 2px;
  background: var(--sari);
}

.sahne__saat--soz {
  font-size: var(--boy-ara);
  line-height: 1.25;
}

.sahne__rozet {
  display: inline-block;
  margin-top: var(--b-3);
  padding: 2px 10px;
  border: 1px solid var(--cizgi);
  border-radius: var(--kose);
  background: var(--zemin);
  color: var(--metin);
  font-size: var(--boy-kucuk);
  font-weight: 600;
  line-height: 1.6;
}

.sahne__govde {
  display: grid;
  grid-column: 3 / span 10;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  column-gap: 24px;
  align-items: start;
  padding: var(--b-7) 0 var(--b-7) var(--b-5);
  border-top: 1px solid var(--cizgi);
}

.sahne:first-child .sahne__govde,
.sahne-ara + .sahne .sahne__govde {
  border-top: 0;
}

.sahne__metin {
  grid-row: 1;
  grid-column: 1 / span 5;
}

.sahne__gorsel {
  grid-row: 1;
  grid-column: 6 / span 5;
}

/* Ekran bir sahnede sağda, ötekinde solda */
.sahne--ters .sahne__metin {
  grid-column: 6 / span 5;
}

.sahne--ters .sahne__gorsel {
  grid-column: 1 / span 5;
}

/* Görselsiz sahnede ayrıntılar sağ sütunda */
.sahne__yan {
  grid-row: 1;
  grid-column: 7 / span 4;
}

.sahne--kisa .sahne__metin {
  grid-column: 1 / span 6;
}

/* Sahnenin başında optikçinin kendi cümlesi */
.sahne__dert {
  padding-left: var(--b-3);
  border-left: 2px solid var(--cizgi);
  color: var(--metin-2);
  font-size: var(--boy-kucuk);
  font-weight: 500;
  line-height: 1.45;
}

.sahne__baslik {
  margin-top: var(--b-3);
  font-size: var(--boy-ara);
  font-weight: 600;
  line-height: 1.3;
}

.sahne__aciklama {
  margin-top: var(--b-3);
}

.sahne__ayrinti {
  margin: var(--b-5) 0 0;
  padding: 0;
  border-top: 1px solid var(--cizgi);
  list-style: none;
}

.sahne__yan .sahne__ayrinti {
  margin-top: 0;
}

.sahne__ayrinti li {
  position: relative;
  padding: 10px 0 10px 20px;
  border-bottom: 1px solid var(--cizgi);
  color: var(--metin-2);
  font-size: var(--boy-kucuk);
  line-height: 1.5;
}

.sahne__ayrinti li::before {
  content: "";
  position: absolute;
  top: calc(10px + 0.7em);
  left: 2px;
  width: 8px;
  height: 2px;
  background: var(--eylem);
}

.sahne__not {
  margin-top: var(--b-4);
  color: var(--metin-2);
  font-size: var(--boy-kucuk);
}

/* Telefon kasası görsel sütununda ortalanır */
.sahne__gorsel--telefon {
  justify-self: center;
  width: min(100%, 260px);
}

/* Telefon ekranının üst kırpımı */
.sahne__gorsel--kirpim {
  justify-self: center;
  width: min(100%, 440px);
}

/* Örnek kutusu: yanlış yazılan değer */
.ornek {
  padding: var(--b-5) var(--b-5) var(--b-5) var(--b-6);
  border: 1px solid var(--cizgi);
  border-left: 4px solid var(--eylem);
  border-radius: var(--kose);
  background: var(--zemin);
  box-shadow: var(--golge);
}

.ornek__etiket {
  color: var(--eylem);
  font-family: var(--yazi-esit);
  font-size: var(--boy-kucuk);
  font-weight: 500;
  letter-spacing: 0.04em;
}

.ornek__metin {
  margin-top: var(--b-2);
  font-size: var(--boy-ara);
  line-height: var(--satir-ara);
}

.ornek__metin + p {
  margin-top: var(--b-3);
  color: var(--metin-2);
}

/* Mesaj balonu: programın gönderdiği metin düz yazı olarak; mesajlaşma uygulaması taklit edilmez */
.balon-sahne {
  padding: var(--b-6);
  border-radius: var(--kose-buyuk);
  background: var(--zemin-2);
}

.balon {
  max-width: 440px;
  padding: var(--b-4) var(--b-5);
  border: 1px solid var(--cizgi);
  border-radius: var(--kose-buyuk) var(--kose-buyuk) var(--kose-buyuk) 4px;
  background: var(--zemin);
  box-shadow: var(--golge);
  line-height: 1.55;
}

.balon__yer {
  color: var(--metin-2);
}

.balon-sahne figcaption {
  margin-top: var(--b-3);
  color: var(--metin-2);
  font-size: var(--boy-kucuk);
  line-height: 1.45;
}

/* Sahneler arasındaki ince çağrı şeridi */
.serit-cagri {
  display: flex;
  grid-column: 3 / span 10;
  align-items: center;
  justify-content: space-between;
  gap: var(--b-4) var(--b-6);
  margin-left: var(--b-5);
  padding: var(--b-5) var(--b-6);
  border-radius: var(--kose-buyuk);
  background: var(--zemin-2);
}

.serit-cagri p {
  font-size: var(--boy-ara);
  font-weight: 500;
  line-height: var(--satir-ara);
}

.serit-cagri .dugme {
  flex: none;
}

/* Klavye kısayolu */
.gun-akisi kbd,
.gecis-bolum kbd,
.sss-iki kbd {
  display: inline-block;
  min-width: 1.9em;
  padding: 0 0.35em;
  border: 1px solid var(--cizgi);
  border-bottom-width: 2px;
  border-radius: 4px;
  background: var(--zemin);
  color: var(--metin);
  font-family: var(--yazi-esit);
  font-size: 0.86em;
  font-weight: 500;
  line-height: 1.5;
  text-align: center;
}

/* ---------- Kim neyi yapar ---------- */

.rol-kartlar {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--b-5);
  margin: var(--b-7) 0 0;
  padding: 0;
  list-style: none;
}

.rol {
  padding: var(--b-5);
  border-radius: var(--kose);
  background: var(--zemin);
  box-shadow: var(--golge);
}

/* Rol adı, sahnelerdeki rozetle aynı biçimde */
.rol__ad {
  display: inline-block;
  padding: 2px 12px;
  border: 1px solid var(--cizgi);
  border-radius: var(--kose);
  font-size: var(--boy-govde);
  font-weight: 600;
  line-height: 1.6;
}

.rol__not {
  margin-top: var(--b-4);
  color: var(--metin-2);
}

.roller__not {
  max-width: 62ch;
  margin-top: var(--b-6);
  color: var(--metin-2);
}

/* ---------- Birden çok mağaza ---------- */

/* Bölüm başlığının üstünde zincir sahibinin cümlesi */
.bolum-dert {
  margin-bottom: var(--b-4);
  color: var(--metin-2);
  font-size: var(--boy-ara);
  line-height: var(--satir-ara);
}

.zincir-baslik {
  font-size: var(--boy-ara);
  font-weight: 600;
  line-height: var(--satir-ara);
}

.zincir-metin {
  margin-top: var(--b-3);
  color: var(--metin-2);
}

.pazartesi {
  margin-top: var(--b-8);
}

.pazartesi__ust {
  align-items: center;
}

.pazartesi__bas {
  grid-column: 1 / span 5;
}

.pazartesi__kanit {
  grid-column: 7 / span 6;
}

/* Dört adım yan yana; numara CSS sayacından gelir */
.pazartesi__adimlar {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--b-5);
  margin: var(--b-7) 0 0;
  padding: 0;
  list-style: none;
  counter-reset: pazartesi;
}

.pazartesi__adimlar > li {
  padding-top: var(--b-4);
  border-top: 2px solid var(--metin);
  counter-increment: pazartesi;
}

.pazartesi__adimlar > li::before {
  content: counter(pazartesi);
  display: block;
  margin-bottom: var(--b-3);
  color: var(--eylem);
  font-family: var(--yazi-esit);
  font-size: var(--boy-ara);
  font-weight: 500;
  line-height: 1;
}

.pazartesi__is {
  font-weight: 600;
}

.pazartesi__adimlar p + p {
  margin-top: var(--b-2);
  color: var(--metin-2);
}

.magaza-duzen {
  align-items: start;
  margin-top: var(--b-8);
}

.magaza-duzen__sol {
  grid-column: 1 / span 5;
}

.magaza-duzen__sag {
  grid-column: 7 / span 6;
}

.rapor-listesi {
  margin: var(--b-4) 0 0;
  padding: 0;
  columns: 2;
  column-gap: var(--b-5);
  list-style: none;
}

.rapor-listesi li {
  padding: 9px 0;
  border-top: 1px solid var(--cizgi);
  break-inside: avoid;
}

.rapor-listesi__not {
  margin-top: var(--b-4);
  padding-top: var(--b-4);
  border-top: 1px solid var(--cizgi);
  color: var(--metin-2);
}

.ikinci-magaza {
  align-items: center;
  margin-top: var(--b-8);
}

.ikinci-magaza__foto {
  --foto-odak: 26% 50%;
  grid-column: 1 / span 6;
  height: 540px;
}

.ikinci-magaza__foto picture {
  height: 100%;
}

.ikinci-magaza__metin {
  grid-column: 8 / span 5;
}

.ikinci-magaza__metin .sirali {
  margin-top: var(--b-5);
}

.ikinci-magaza__not {
  margin-top: var(--b-4);
  color: var(--metin-2);
}

.ikinci-magaza__bag {
  margin-top: var(--b-3);
}

/* Numaralı, çizgili adım listesi: ikinci mağaza, geçiş, kapanış */
.sirali {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: sira;
}

.sirali > li {
  position: relative;
  padding: 14px 0 14px 44px;
  border-top: 1px solid var(--cizgi);
  counter-increment: sira;
}

.sirali > li::before {
  content: counter(sira);
  position: absolute;
  top: 14px;
  left: 0;
  color: var(--eylem);
  font-family: var(--yazi-esit);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.sirali--son-cizgi {
  border-bottom: 1px solid var(--cizgi);
}

/* ---------- Aynı iş, iki yol ---------- */

.karsilastirma-kap {
  margin-top: var(--b-7);
  overflow: hidden;
  border-radius: var(--kose-buyuk);
  background: var(--zemin);
  box-shadow: var(--golge);
}

.karsilastirma {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  overflow-wrap: break-word;
}

.karsilastirma th,
.karsilastirma td {
  padding: 15px var(--b-5);
  border-top: 1px solid var(--cizgi);
  text-align: left;
  vertical-align: top;
}

.karsilastirma thead th {
  border-top: 0;
  color: var(--metin-2);
  font-size: var(--boy-kucuk);
  font-weight: 600;
  line-height: 1.4;
}

.karsilastirma thead th:first-child {
  width: 19%;
}

.karsilastirma thead th:nth-child(2) {
  width: 37%;
}

.karsilastirma tbody th {
  font-weight: 600;
}

.karsilastirma td {
  color: var(--metin-2);
}

/* PratikVision sütunu: ince marka mavisi çizgi, ana metin renginde */
.karsilastirma .karsilastirma__yeni {
  border-left: 3px solid var(--mavi);
  color: var(--metin);
}

.karsilastirma thead .karsilastirma__yeni {
  color: var(--eylem);
}

.karsilastirma-alt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--b-5) var(--b-7);
  margin-top: var(--b-6);
}

.karsilastirma-alt__metin {
  max-width: 46ch;
  font-size: var(--boy-ara);
  line-height: var(--satir-ara);
}

.karsilastirma-alt__eylem {
  display: flex;
  align-items: center;
  gap: var(--b-4);
}

.karsilastirma-alt__not {
  max-width: 24ch;
  color: var(--metin-2);
  font-size: var(--boy-kucuk);
  line-height: 1.45;
}

/* ---------- Tek program ---------- */

.tek-program {
  align-items: start;
}

.tek-program__baslik {
  grid-column: 1 / span 5;
}

.tek-program__metin {
  grid-column: 7 / span 6;
}

.tek-program__metin p + p {
  margin-top: var(--b-4);
  padding-top: var(--b-4);
  border-top: 1px solid var(--cizgi);
}

.simge-serit {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--b-5);
  margin: var(--b-7) 0 0;
  padding: var(--b-5) 0 0;
  border-top: 1px solid var(--cizgi);
  list-style: none;
}

.simge-serit li {
  display: flex;
  align-items: center;
  gap: var(--b-3);
  font-weight: 600;
  line-height: 1.35;
}

.simge-serit svg {
  flex: none;
  box-sizing: content-box;
  width: 24px;
  height: 24px;
  padding: 10px;
  border-radius: var(--kose);
  background: var(--zemin-2);
  color: var(--eylem);
}

/* ---------- Güven ---------- */

.guven-izgara {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--b-6) var(--b-7);
  margin-top: var(--b-7);
}

.guven-blok {
  padding-top: var(--b-4);
  border-top: 2px solid var(--metin);
}

.guven-blok h3 {
  font-size: var(--boy-ara);
  font-weight: 600;
  line-height: var(--satir-ara);
}

.guven-blok p {
  max-width: 60ch;
  margin-top: var(--b-3);
  color: var(--metin-2);
}

.guven-alt {
  margin-top: var(--b-7);
  padding: var(--b-5) var(--b-6);
  border-radius: var(--kose);
  background: var(--zemin);
}

/* ---------- Eski programınızdan geçiş ---------- */

.gecis-bolum {
  padding-top: 0;
  padding-bottom: var(--b-8);
}

/* Bölümler arasında kenardan kenara mağaza fotoğrafı; yüz ve uzanan el kadrajda kalır */
.gecis__foto {
  --foto-odak: 50% 12%;
  height: clamp(300px, 22vw, 420px);
}

.gecis__foto picture {
  height: 100%;
}

.gecis__bas {
  margin-top: var(--b-8);
}

.gecis__ic {
  align-items: start;
  margin-top: var(--b-7);
}

.gecis__adimlar {
  grid-column: 1 / span 7;
}

.ilk-hafta {
  grid-column: 9 / span 4;
  padding: var(--b-5) var(--b-5) var(--b-6);
  border-radius: var(--kose-buyuk);
  background: var(--zemin-2);
}

.ilk-hafta h3 {
  font-size: var(--boy-ara);
  font-weight: 600;
  line-height: var(--satir-ara);
}

.ilk-hafta p {
  margin-top: var(--b-3);
}

/* ---------- Üzerinde çalıştıklarımız ---------- */

.yakinda-bolum {
  padding-top: 0;
}

.yakinda-kutu {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 24px;
  align-items: start;
  padding: var(--b-6);
  border: 1px solid var(--cizgi);
  border-radius: var(--kose-buyuk);
  background: var(--zemin-2);
}

.yakinda-kutu__bas {
  grid-column: 1 / span 5;
}

/* Gri rozet: tarih verilmeyen, sıradaki iş */
.yakinda-rozet {
  display: inline-block;
  padding: 2px 10px;
  border: 1px solid var(--cizgi);
  border-radius: var(--kose);
  background: var(--pasif-zemin);
  color: var(--pasif-metin);
  font-size: var(--boy-kucuk);
  font-weight: 600;
  line-height: 1.6;
}

.yakinda-kutu__baslik {
  margin-top: var(--b-3);
  font-size: var(--boy-ara);
  font-weight: 600;
  line-height: var(--satir-ara);
}

.yakinda-kutu__metin {
  margin-top: var(--b-2);
  color: var(--metin-2);
}

.yakinda-kutu__liste {
  grid-column: 7 / span 6;
  margin: 0;
  padding: 0;
  list-style: none;
}

.yakinda-kutu__liste li {
  padding: var(--b-4) 0;
  border-top: 1px solid var(--cizgi);
}

.yakinda-kutu__liste li:first-child {
  padding-top: 0;
  border-top: 0;
}

/* ---------- Sık sorulanlar ---------- */

.sss-iki {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 0 var(--b-7);
  margin-top: var(--b-7);
}

.sss-grup {
  margin-bottom: var(--b-3);
  font-size: var(--boy-ara);
  font-weight: 600;
  line-height: var(--satir-ara);
}

.sorular + .sss-grup {
  margin-top: var(--b-7);
}

.sss-iki .soru__cevap a {
  font-weight: 600;
}

/* ---------- Kapanış ---------- */

.kapanis {
  align-items: start;
}

.kapanis__metin {
  grid-column: 1 / span 7;
}

.kapanis__adimlar {
  max-width: 560px;
  margin-top: var(--b-5);
}

.kapanis__eylemler {
  margin-top: var(--b-6);
}

.kapanis__bilgi {
  grid-column: 9 / span 4;
  padding: var(--b-5) var(--b-6) var(--b-6);
  border-radius: var(--kose-buyuk);
  background: var(--zemin-2);
}

.kapanis__degerler {
  grid-template-columns: minmax(0, 1fr);
  gap: var(--b-4);
}

/* ---------- Zengin içerik: dar pencere ve %200 yakınlaştırma ---------- */

@media (max-width: 1100px) {
  .acilis__metin,
  .acilis__urun,
  .sahne__metin,
  .sahne__gorsel,
  .sahne__yan,
  .sahne--ters .sahne__metin,
  .sahne--ters .sahne__gorsel,
  .sahne--kisa .sahne__metin,
  .pazartesi__bas,
  .pazartesi__kanit,
  .magaza-duzen__sol,
  .magaza-duzen__sag,
  .ikinci-magaza__foto,
  .ikinci-magaza__metin,
  .tek-program__baslik,
  .tek-program__metin,
  .gecis__adimlar,
  .ilk-hafta,
  .yakinda-kutu__bas,
  .yakinda-kutu__liste,
  .kapanis__metin,
  .kapanis__bilgi {
    grid-column: 1 / -1;
  }

  .sahne__metin,
  .sahne__gorsel,
  .sahne__yan {
    grid-row: auto;
  }

  .acilis__metin {
    max-width: 640px;
  }

  .acilis__urun,
  .pazartesi__kanit,
  .magaza-duzen__sag,
  .ikinci-magaza__metin,
  .tek-program__metin,
  .ilk-hafta,
  .yakinda-kutu__liste,
  .kapanis__bilgi {
    margin-top: var(--b-6);
  }

  .dertler,
  .rol-kartlar,
  .pazartesi__adimlar,
  .simge-serit {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pazartesi__adimlar {
    row-gap: var(--b-6);
  }

  /* Saat ekseni daralır, sahne tek sütuna iner */
  .sahne__eksen {
    padding-right: var(--b-4);
  }

  .sahne__saat {
    font-size: var(--boy-ara);
  }

  .sahne__govde {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--b-6);
    padding-left: var(--b-4);
  }

  .sahne__metin {
    max-width: 640px;
  }

  .sahne__gorsel {
    max-width: 560px;
  }

  .sahne__gorsel--telefon {
    justify-self: start;
    width: min(100%, 240px);
  }

  .sahne__gorsel--kirpim {
    justify-self: start;
  }

  .serit-cagri {
    flex-direction: column;
    align-items: flex-start;
    margin-left: var(--b-4);
  }

  .ikinci-magaza__foto {
    height: clamp(240px, 40vw, 420px);
  }
}

@media (max-width: 600px) {
  .dertler,
  .rol-kartlar,
  .pazartesi__adimlar,
  .simge-serit,
  .guven-izgara,
  .sss-iki {
    grid-template-columns: minmax(0, 1fr);
  }

  .sahne,
  .sahne-ara {
    display: block;
  }

  .sahne {
    border-top: 1px solid var(--cizgi);
  }

  .sahne:first-child,
  .sahne-ara + .sahne {
    border-top: 0;
  }

  .sahne__eksen {
    padding: var(--b-6) 0 0;
    border-right: 0;
  }

  .sahne-ara .sahne__eksen {
    display: none;
  }

  .sahne__yapiskan {
    position: static;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--b-3);
    text-align: left;
  }

  .sahne__saat::before {
    display: none;
  }

  .sahne__rozet {
    margin-top: 0;
  }

  .sahne__govde {
    padding: var(--b-4) 0 var(--b-6);
    border-top: 0;
  }

  .serit-cagri {
    margin: 0 0 var(--b-5);
    padding: var(--b-5);
  }

  .rapor-listesi {
    columns: 1;
  }

  .karsilastirma th,
  .karsilastirma td {
    padding: 10px 12px;
  }

  .karsilastirma-alt__eylem {
    flex-direction: column;
    align-items: flex-start;
  }

  .balon-sahne {
    padding: var(--b-5);
  }

  .yakinda-kutu {
    display: block;
    padding: var(--b-5);
  }
}