/* Schenti — bileşenler ve bölümler.
   Fikir: koyu, sakin bir yüzey; üzerinde logodaki sedef ve altın ışığı. Lüks, süsle
   değil boşluk, ince çizgi ve iyi tipografiyle kurulur. Hareket ya bir kez olur
   (açılış, bölümlerin belirişi) ya da ziyaretçinin kendi hareketine bağlıdır
   (kaydırma, imleç). Kendi kendine dönen tek şey telefon önizlemesidir ve durdurulabilir. */

/* ---------- Ortak ---------- */

.kap {
  inline-size: 100%;
  max-inline-size: var(--kolon);
  margin-inline: auto;
  padding-inline: var(--kenar);
}

.kicker {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--altin);
  font: 500 14px/1.3 var(--sans);
  letter-spacing: 0.02em;
}

.kicker::before {
  content: "";
  flex: none;
  inline-size: 34px;
  block-size: 1px;
  background: currentColor;
}

.giris {
  max-inline-size: 58ch;
  margin-block-start: 26px;
  color: var(--kum);
  font-size: clamp(16px, 1.25vw, 19px);
  line-height: 1.7;
}

/* Sedef vurgusu: logodaki atın ışığı. Sayfada yalnız iki yerde kullanılır. */
h1 em,
h2 em {
  padding-inline-end: 0.05em;
  background: var(--sedef);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-style: italic;
}

/* ---------- Düğmeler ---------- */

.dugme {
  position: relative; /* içindeki gizli erişilebilirlik metni düğmeye bağlı kalsın */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 30px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--sedef);
  background-size: 230% 100%;
  background-position: 0% 0;
  box-shadow: 0 12px 32px -14px rgba(201, 176, 122, 0.6);
  color: #15100B;
  font: 500 15px/1 var(--sans);
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-position 700ms var(--yumusak), transform 300ms var(--yumusak),
    box-shadow 300ms ease, border-color 300ms ease, color 300ms ease;
}

.dugme:hover,
.dugme:focus-visible {
  background-position: 100% 0;
  box-shadow: 0 18px 42px -16px rgba(201, 176, 122, 0.75);
  transform: translateY(-2px);
}

.dugme--cizgi {
  border-color: rgba(244, 238, 227, 0.3);
  background: none;
  box-shadow: none;
  color: var(--fildisi);
}

.dugme--cizgi:hover,
.dugme--cizgi:focus-visible {
  border-color: var(--altin);
  box-shadow: none;
  color: var(--altin);
}

.dugme--kucuk {
  padding: 12px 22px;
  font-size: 14px;
}

.dugme--buyuk {
  padding: 20px 38px;
  font-size: 16px;
}

/* ---------- Sabit başlık ---------- */

.ust {
  position: fixed;
  z-index: 40;
  inset-block-start: 0;
  inset-inline: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 18px var(--kenar);
  border-block-end: 1px solid transparent;
  transition: background-color 350ms ease, padding 350ms var(--yumusak), border-color 350ms ease;
}

.ust[data-kaydi="evet"],
.ust[data-menu-acik="evet"] {
  padding-block: 12px;
  border-block-end-color: var(--cizgi);
  background: rgba(13, 9, 6, 0.88);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
}

.ust-logo {
  flex: none;
  line-height: 0;
}

.ust-logo img {
  inline-size: clamp(138px, 12vw, 180px);
}

.ust-menu ul {
  display: flex;
  gap: clamp(18px, 2.4vw, 40px);
}

.ust-menu a {
  position: relative;
  display: block;
  padding-block: 8px;
  color: var(--kum);
  font-size: 14.5px;
  text-decoration: none;
  transition: color 250ms ease;
}

.ust-menu a::after {
  content: "";
  position: absolute;
  inset-block-end: 2px;
  inset-inline: 0;
  block-size: 1px;
  background: var(--altin);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 450ms var(--yumusak);
}

.ust-menu a:hover,
.ust-menu a:focus-visible {
  color: var(--fildisi);
}

.ust-menu a:hover::after,
.ust-menu a:focus-visible::after {
  transform: scaleX(1);
}

.ust-menudugme {
  display: none;
  align-items: center;
  gap: 12px;
  padding: 10px 4px 10px 12px;
  border: 0;
  background: none;
  color: var(--fildisi);
  font-size: 15px;
  cursor: pointer;
}

.ust-menudugme__cizgi {
  position: relative;
  inline-size: 26px;
  block-size: 12px;
}

.ust-menudugme__cizgi::before,
.ust-menudugme__cizgi::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  block-size: 1.5px;
  background: var(--altin);
  transition: transform 400ms var(--yumusak), inset-block-start 400ms var(--yumusak);
}

.ust-menudugme__cizgi::before { inset-block-start: 0; }
.ust-menudugme__cizgi::after { inset-block-start: 10px; }

.ust-menudugme[aria-expanded="true"] .ust-menudugme__cizgi::before {
  inset-block-start: 5px;
  transform: rotate(45deg);
}

.ust-menudugme[aria-expanded="true"] .ust-menudugme__cizgi::after {
  inset-block-start: 5px;
  transform: rotate(-45deg);
}

@media (max-width: 1019px) {
  .ust-menu {
    display: none;
  }

  .ust-menudugme:not([hidden]) {
    display: inline-flex;
  }

  .ust-cagri {
    margin-inline-start: auto;
  }
}

@media (max-width: 559px) {
  .ust-cagri {
    display: none;
  }
}

/* ---------- Mobil menü ---------- */

.menu {
  position: fixed;
  z-index: 35;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
  padding: 104px var(--kenar) 36px;
  overflow-y: auto;
  background:
    radial-gradient(80% 50% at 100% 0%, rgba(201, 176, 122, 0.16), transparent 70%),
    var(--gece);
}

.menu[hidden] {
  display: none;
}

.menu li {
  border-block-end: 1px solid var(--cizgi);
}

.menu nav a {
  display: block;
  padding-block: 16px;
  color: var(--fildisi);
  font: 400 clamp(32px, 9vw, 52px)/1.1 var(--serif);
  text-decoration: none;
}

.menu nav a:hover,
.menu nav a:focus-visible {
  color: var(--altin);
}

.menu-alt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 28px;
}

.menu-tel {
  color: var(--kum);
  font-size: 17px;
  text-decoration: none;
}

.menu li,
.menu-alt {
  transition: opacity 600ms var(--yumusak), transform 700ms var(--yumusak);
  transition-delay: calc(var(--s, 0) * 60ms + 80ms);
}

.menu:not(.menu--acik) li,
.menu:not(.menu--acik) .menu-alt {
  opacity: 0;
  transform: translateY(18px);
}

/* ---------- Açılış ---------- */

.kahraman {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: center;
  min-block-size: 100svh;
  padding-block: 136px 80px;
  overflow: clip;
}

.kahraman-isik {
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    radial-gradient(46% 52% at 78% 48%, rgba(201, 176, 122, 0.24), transparent 70%),
    radial-gradient(40% 44% at 8% 96%, rgba(201, 176, 122, 0.1), transparent 70%),
    repeating-linear-gradient(to bottom, rgba(244, 238, 227, 0.016) 0 1px, transparent 1px 3px);
}

.kahraman-ic {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: clamp(56px, 7vw, 96px);
}

@media (min-width: 980px) {
  .kahraman-ic {
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  }
}

.kahraman-baslik {
  margin-block-start: 26px;
}

/* Satırlar maskenin içinden yükselir; üst ve alt pay, harf uzantıları kesilmesin diye. */
.satir {
  display: block;
  margin-block: -0.08em -0.12em;
  padding-block: 0.08em 0.12em;
  overflow: hidden;
}

.satir > span {
  display: block;
}

.kahraman-giris {
  max-inline-size: 47ch;
  margin-block-start: clamp(24px, 2.6vw, 36px);
  color: var(--kum);
  font-size: clamp(16px, 1.3vw, 19.5px);
  line-height: 1.7;
}

.kahraman-cagri {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-block-start: clamp(30px, 3vw, 42px);
}

.kahraman-gorsel {
  position: relative;
  justify-self: center;
}

/* Telefon: içinde gerçek sitenin kendisi akar. */
.telefon {
  position: relative;
  inline-size: clamp(232px, 22.5vw, 316px);
  aspect-ratio: 9 / 18.6;
  padding: 9px;
  border-radius: 46px;
  background: linear-gradient(155deg, #4B3C2C 0%, #1A130D 32%, #0E0A07 60%, #3A2E21 100%);
  box-shadow:
    0 0 0 1px rgba(201, 176, 122, 0.4),
    0 60px 100px -34px rgba(0, 0, 0, 0.9),
    0 0 150px -24px rgba(201, 176, 122, 0.36);
  will-change: transform;
}

.telefon::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset-block-start: 19px;
  inset-inline-start: 50%;
  inline-size: 27%;
  block-size: 19px;
  border-radius: 999px;
  background: #0A0705;
  transform: translateX(-50%);
}

.telefon-ekran {
  position: relative;
  block-size: 100%;
  overflow: hidden;
  border-radius: 37px;
  background: #0A0705;
}

.telefon-ekran img {
  inline-size: 100%;
  block-size: auto;
  will-change: transform;
}

.akis-dugme {
  position: absolute;
  z-index: 3;
  inset-block-end: 30px;
  inset-inline-end: -18px;
  display: grid;
  place-items: center;
  inline-size: 46px;
  block-size: 46px;
  border: 1px solid rgba(201, 176, 122, 0.55);
  border-radius: 50%;
  background: var(--kahve);
  cursor: pointer;
  transition: background-color 250ms ease, border-color 250ms ease;
}

.akis-dugme[hidden] {
  display: none;
}

.akis-dugme:hover,
.akis-dugme:focus-visible {
  border-color: var(--altin);
  background: var(--kahve-acik);
}

/* İki çubuk: duraklat. Basılıyken üçgen: oynat. */
.akis-dugme__ikon {
  inline-size: 12px;
  block-size: 14px;
  border-inline: 3.5px solid var(--altin);
}

.akis-dugme[aria-pressed="true"] .akis-dugme__ikon {
  inline-size: 0;
  block-size: 0;
  margin-inline-start: 3px;
  border-block: 8px solid transparent;
  border-inline: 13px solid var(--altin);
  border-inline-end-width: 0;
}

.rozet {
  position: absolute;
  z-index: 3;
  inset-block-end: 17%;
  inset-inline-start: -78px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px 12px 15px;
  border: 1px solid var(--cizgi);
  border-radius: 16px;
  background: rgba(21, 16, 11, 0.94);
  box-shadow: 0 26px 50px -22px rgba(0, 0, 0, 0.85);
  color: var(--kum);
  font-size: 12.5px;
  line-height: 1.45;
  text-decoration: none;
  will-change: transform;
  transition: border-color 250ms ease;
}

.rozet:hover,
.rozet:focus-visible {
  border-color: rgba(201, 176, 122, 0.6);
}

.rozet b {
  color: var(--fildisi);
  font-size: 13.5px;
  font-weight: 500;
}

.rozet-nokta {
  flex: none;
  inline-size: 9px;
  block-size: 9px;
  border-radius: 50%;
  background: var(--altin);
  box-shadow: 0 0 0 5px rgba(201, 176, 122, 0.18);
}

@media (max-width: 979px) {
  .kahraman {
    padding-block: 118px 64px;
  }

  .kahraman-gorsel {
    display: grid;
    justify-items: center;
    gap: 22px;
  }

  .telefon {
    inline-size: clamp(220px, 60vw, 290px);
  }

  .rozet {
    position: static;
  }
}

/* ---------- Kayan bant: kaydırmayla birlikte akar ---------- */

.kayan {
  padding-block: clamp(20px, 2.4vw, 36px);
  overflow: hidden;
  border-block: 1px solid var(--cizgi);
  background: var(--kahve);
}

.kayan-ic {
  display: flex;
  align-items: center;
  gap: clamp(22px, 3vw, 52px);
  inline-size: max-content;
  color: var(--fildisi);
  font: 400 clamp(34px, 5.6vw, 88px)/1.05 var(--serif);
  white-space: nowrap;
  will-change: transform;
}

.kayan-ince {
  color: var(--altin);
  font-style: italic;
}

.kayan-ic i {
  flex: none;
  inline-size: 0.13em;
  block-size: 0.13em;
  background: var(--altin);
  transform: rotate(45deg);
}

/* ---------- Bölüm kabuğu ---------- */

.bolum {
  position: relative;
  padding-block: clamp(92px, 11vw, 184px);
}

.bolum--acik {
  background: var(--kemik);
  color: var(--kemik-metin);
}

.bolum--acik .kicker {
  color: var(--altin-koyu);
}

.bolum--acik .giris {
  color: var(--kemik-ikincil);
}

.bolum--acik :focus-visible {
  outline-color: var(--altin-koyu);
}

.bolum--kahve {
  background: var(--kahve);
}

.bolum-ust {
  max-inline-size: 900px;
  margin-block-end: clamp(48px, 6vw, 92px);
}

.bolum-ust h2 {
  margin-block-start: 22px;
}

/* ---------- Neden ---------- */

.sutunlar {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  border-block-start: 1px solid var(--kemik-cizgi);
}

.sutun {
  padding-block: 34px;
  border-block-end: 1px solid var(--kemik-cizgi);
}

.sutun h3 {
  font-size: clamp(27px, 2.7vw, 40px);
}

.sutun p {
  max-inline-size: 38ch;
  margin-block-start: 14px;
  color: var(--kemik-ikincil);
}

@media (min-width: 860px) {
  .sutunlar {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .sutun {
    padding: 46px clamp(24px, 3vw, 48px) 6px 0;
    border-block-end: 0;
  }

  .sutun + .sutun {
    padding-inline-start: clamp(24px, 3vw, 48px);
    border-inline-start: 1px solid var(--kemik-cizgi);
  }
}

/* ---------- İşler: vaka ---------- */

.vaka {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: clamp(44px, 5.5vw, 88px);
}

@media (min-width: 1000px) {
  .vaka {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  }
}

.vaka-metin h2 {
  margin-block-start: 22px;
}

.kunye {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 46px;
  margin-block-start: 36px;
  padding-block-start: 26px;
  border-block-start: 1px solid var(--cizgi);
}

.kunye dt {
  color: var(--soluk);
  font-size: 13px;
}

.kunye dd {
  margin-block-start: 4px;
  font-size: 17px;
}

.baglanti {
  display: inline-block;
  margin-block-start: 36px;
  padding-block-end: 7px;
  background: linear-gradient(var(--altin), var(--altin)) left bottom / 100% 1px no-repeat;
  color: var(--altin);
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  transition: background-size 500ms var(--yumusak), color 250ms ease;
}

.baglanti:hover,
.baglanti:focus-visible {
  background-size: 34% 1px;
  color: var(--fildisi);
}

/* Tarayıcı çerçevesi */
.tarayici {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--cizgi);
  border-radius: clamp(14px, 1.5vw, 20px);
  background: var(--kahve-acik);
  box-shadow: 0 70px 110px -50px rgba(0, 0, 0, 0.9), 0 0 120px -40px rgba(201, 176, 122, 0.22);
}

.tarayici-ust {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 13px 16px;
  border-block-end: 1px solid var(--cizgi);
}

.tarayici-ust span {
  inline-size: 10px;
  block-size: 10px;
  border-radius: 50%;
  background: rgba(244, 238, 227, 0.18);
}

.tarayici-ust p {
  flex: 1;
  padding-inline-end: 44px;
  color: var(--soluk);
  font-size: 12.5px;
  text-align: center;
}

.tarayici img {
  inline-size: 100%;
}

/* İmleci izleyen sedef ışıltı: Ahal-Teke'nin postundaki parıltı. */
[data-isilti] {
  position: relative;
  --ix: 50%;
  --iy: 50%;
}

[data-isilti]::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(440px circle at var(--ix) var(--iy), rgba(255, 250, 238, 0.15), transparent 62%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 450ms ease;
}

@media (hover: hover) {
  [data-isilti]:hover::after {
    opacity: 1;
  }
}

/* ---------- İşler: telefon ekranları şeridi ---------- */

.serit-ust {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-block: clamp(72px, 9vw, 132px) 30px;
}

.serit-oklar {
  display: flex;
  gap: 10px;
}

.serit-oklar[hidden] {
  display: none;
}

.ok {
  display: grid;
  place-items: center;
  inline-size: 50px;
  block-size: 50px;
  border: 1px solid rgba(244, 238, 227, 0.26);
  border-radius: 50%;
  background: none;
  color: var(--fildisi);
  font-size: 18px;
  cursor: pointer;
  transition: border-color 250ms ease, color 250ms ease, opacity 250ms ease;
}

.ok:hover:not(:disabled),
.ok:focus-visible {
  border-color: var(--altin);
  color: var(--altin);
}

.ok:disabled {
  opacity: 0.32;
  cursor: default;
}

.serit {
  position: relative; /* mutlak konumlu çocuklar şeridin dışına taşıp sayfayı genişletmesin */
  --yan: max(var(--kenar), calc((100% - var(--kolon)) / 2 + var(--kenar)));
  display: flex;
  gap: clamp(14px, 1.6vw, 24px);
  padding: 6px var(--yan) 30px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-padding-inline: var(--yan);
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.serit::-webkit-scrollbar {
  display: none;
}

.kart {
  flex: none;
  inline-size: clamp(214px, 22.4vw, 300px);
  scroll-snap-align: start;
}

.kart-ekran {
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border: 1px solid var(--cizgi);
  border-radius: clamp(20px, 2vw, 28px);
  background: var(--kahve);
}

.kart[data-isilti]::after {
  inset-block-end: auto;
  aspect-ratio: 9 / 16;
  border-radius: clamp(20px, 2vw, 28px);
}

.kart-ekran img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: top;
  transition: transform 1200ms var(--yumusak);
}

@media (hover: hover) {
  .kart:hover .kart-ekran img {
    transform: scale(1.045);
  }
}

.kart figcaption {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-block-start: 16px;
  color: var(--kum);
  font-size: 15px;
}

.kart figcaption span {
  color: var(--altin);
  font: 400 18px/1 var(--serif);
}

.kart-davet {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 16px;
  aspect-ratio: 9 / 16;
  padding: clamp(20px, 2vw, 30px);
  border: 1px solid rgba(201, 176, 122, 0.45);
  border-radius: clamp(20px, 2vw, 28px);
  background:
    radial-gradient(120% 70% at 85% 0%, rgba(201, 176, 122, 0.3), transparent 62%),
    var(--kahve-acik);
}

.kart-davet h3 {
  font-size: clamp(26px, 2.5vw, 34px);
}

.kart-davet p {
  color: var(--kum);
  font-size: 15px;
  line-height: 1.6;
}

.kart-davet .dugme {
  margin-block-start: 6px;
  padding: 14px 22px;
  font-size: 14px;
}

/* ---------- Hizmetler ---------- */

.hizmet-liste {
  border-block-start: 1px solid var(--cizgi);
}

.hizmet {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px 56px;
  padding-block: clamp(28px, 3.6vw, 52px);
  border-block-end: 1px solid var(--cizgi);
}

@media (min-width: 860px) {
  .hizmet {
    grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
    align-items: center;
  }
}

.hizmet::before {
  content: "";
  position: absolute;
  inset-block-end: -1px;
  inset-inline-start: 0;
  inline-size: 100%;
  block-size: 1px;
  background: var(--altin);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 800ms var(--yumusak);
}

.hizmet h3 {
  font-size: clamp(30px, 4vw, 60px);
  line-height: 1.04;
  transition: color 350ms ease, transform 600ms var(--yumusak);
}

.hizmet p {
  max-inline-size: 52ch;
  color: var(--kum);
}

@media (hover: hover) {
  .hizmet:hover::before {
    transform: scaleX(1);
  }

  .hizmet:hover h3 {
    color: var(--altin);
    transform: translateX(16px);
  }
}

/* ---------- Süreç ---------- */

.adimlar {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  --ilerleme: 0;
}

/* Ray ve üzerinde kaydırmayla dolan altın çizgi. */
.adimlar::before,
.adimlar::after {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  inline-size: 1px;
  background: var(--kemik-cizgi);
}

.adimlar::after {
  background: var(--altin-koyu);
  transform: scaleY(var(--ilerleme));
  transform-origin: top;
}

.adim {
  padding: 4px 0 40px 30px;
}

.adim:last-child {
  padding-block-end: 4px;
}

.adim-no {
  display: block;
  color: var(--altin-koyu);
  font: 400 clamp(44px, 5.2vw, 76px)/1 var(--serif);
}

.adim h3 {
  margin-block-start: 16px;
}

.adim p {
  max-inline-size: 34ch;
  margin-block-start: 10px;
  color: var(--kemik-ikincil);
}

@media (min-width: 900px) {
  .adimlar {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .adimlar::before,
  .adimlar::after {
    inset-block: 0 auto;
    inset-inline: 0;
    inline-size: auto;
    block-size: 1px;
  }

  .adimlar::after {
    transform: scaleX(var(--ilerleme));
    transform-origin: left;
  }

  .adim {
    padding: 40px clamp(20px, 2.4vw, 40px) 0 0;
  }
}

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

.sss-izgara {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
}

@media (min-width: 1000px) {
  .sss-izgara {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(48px, 6vw, 96px);
  }

  .sss .bolum-ust {
    margin-block-end: 0;
  }
}

.soru {
  border-block-end: 1px solid var(--cizgi);
}

.soru:first-child {
  border-block-start: 1px solid var(--cizgi);
}

.soru summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-block: 26px;
  font: 400 clamp(20px, 1.95vw, 27px)/1.25 var(--serif);
  list-style: none;
  cursor: pointer;
  transition: color 250ms ease;
}

.soru summary::-webkit-details-marker {
  display: none;
}

/* Artı işareti; açılınca çarpıya döner. */
.soru summary::after {
  content: "";
  flex: none;
  inline-size: 15px;
  block-size: 15px;
  background:
    linear-gradient(var(--altin), var(--altin)) center / 100% 1.5px no-repeat,
    linear-gradient(var(--altin), var(--altin)) center / 1.5px 100% no-repeat;
  transition: transform 450ms var(--yumusak);
}

.soru[open] summary::after {
  transform: rotate(45deg);
}

.soru summary:hover,
.soru[open] summary {
  color: var(--altin);
}

.soru p {
  max-inline-size: 60ch;
  padding-block-end: 28px;
  color: var(--kum);
}

/* ---------- Film ---------- */

.film {
  padding-block-end: clamp(92px, 11vw, 184px);
}

.film-cerceve {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: end;
  min-block-size: clamp(380px, 44vw, 640px);
  overflow: hidden;
  border: 1px solid var(--cizgi);
  border-radius: clamp(18px, 2.4vw, 34px);
  background: #140E0A url("../varlik/video/kurulum-sahnesi-poster.jpg") center / cover no-repeat;
}

.film-video {
  position: absolute;
  z-index: -2;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.film-cerceve::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(to top, rgba(13, 9, 6, 0.95), rgba(13, 9, 6, 0.62) 40%, rgba(13, 9, 6, 0.1) 78%, rgba(13, 9, 6, 0));
  pointer-events: none;
}

.film-ic {
  padding: clamp(24px, 4vw, 60px);
}

.film blockquote p {
  max-inline-size: 19ch;
  font: 400 clamp(27px, 3.8vw, 58px)/1.08 var(--serif);
  letter-spacing: -0.012em;
}

.film-dugme {
  margin-block-start: 26px;
  padding: 11px 20px;
  border: 1px solid rgba(244, 238, 227, 0.28);
  border-radius: 999px;
  background: rgba(13, 9, 6, 0.6);
  color: var(--kum);
  font-size: 14px;
  cursor: pointer;
  transition: border-color 250ms ease, color 250ms ease;
}

.film-dugme[hidden] {
  display: none;
}

.film-dugme:hover:not(:disabled),
.film-dugme:focus-visible {
  border-color: var(--altin);
  color: var(--altin);
}

.film-dugme:disabled {
  opacity: 0.6;
  cursor: default;
}

/* ---------- İletişim ---------- */

.iletisim {
  isolation: isolate;
  padding-block-end: clamp(72px, 8vw, 128px);
  overflow: clip;
  border-block-start: 1px solid var(--cizgi);
}

.iletisim-isik {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: radial-gradient(60% 70% at 50% 0%, rgba(201, 176, 122, 0.2), transparent 70%);
}

.iletisim-baslik {
  margin-block-start: 22px;
  font-size: clamp(48px, 9.6vw, 156px);
  line-height: 0.96;
  letter-spacing: -0.022em;
}

.iletisim-cagri {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-block-start: clamp(34px, 3.6vw, 48px);
}

.kanallar {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 26px;
  margin-block-start: clamp(64px, 7vw, 116px);
  padding-block-start: 34px;
  border-block-start: 1px solid var(--cizgi);
}

@media (min-width: 560px) {
  .kanallar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 980px) {
  .kanallar {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.kanallar > div {
  min-inline-size: 0;
}

.kanallar dt {
  color: var(--soluk);
  font-size: 13px;
}

.kanallar dd {
  margin-block-start: 8px;
}

.kanallar a {
  display: inline-block;
  max-inline-size: 100%;
  padding-block: 4px;
  color: var(--fildisi);
  font: 400 clamp(19px, 1.65vw, 24px)/1.25 var(--serif);
  overflow-wrap: anywhere;
  text-decoration: none;
  transition: color 250ms ease;
}

.kanallar a:hover,
.kanallar a:focus-visible {
  color: var(--altin);
}

/* ---------- Alt bilgi ---------- */

.alt {
  padding-block: 34px 44px;
  border-block-start: 1px solid var(--cizgi);
  color: var(--soluk);
  font-size: 14px;
}

.alt-ic {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px 40px;
}

.alt-logo {
  line-height: 0;
}

.alt-logo img {
  inline-size: 148px;
}

.alt ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 26px;
}

.alt nav a {
  display: inline-block;
  padding-block: 6px;
  color: var(--kum);
  text-decoration: none;
  transition: color 250ms ease;
}

.alt nav a:hover,
.alt nav a:focus-visible {
  color: var(--altin);
}

/* ---------- Yüzen WhatsApp düğmesi ---------- */

.wa {
  position: fixed;
  z-index: 30;
  inset-block-end: 22px;
  inset-inline-end: max(18px, calc(var(--kenar) - 14px));
  display: grid;
  place-items: center;
  inline-size: 58px;
  block-size: 58px;
  border-radius: 50%;
  background: var(--sedef);
  box-shadow: 0 20px 44px -16px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 250, 238, 0.35) inset;
  color: #15100B;
  transition: opacity 350ms ease, transform 450ms var(--yumusak), visibility 350ms;
}

.wa svg {
  inline-size: 27px;
  block-size: 27px;
}

.wa:hover,
.wa:focus-visible {
  transform: translateY(-3px) scale(1.04);
}

/* Açılış ekrandayken gizli; kod çalışmıyorsa hep görünür. */
.js .wa:not(.wa--acik) {
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px) scale(0.92);
  pointer-events: none;
}

/* ---------- Hareket: başlangıç durumları ---------- */
/* Yalnız <html> üzerinde "hareket" sınıfı varken uygulanır. Kod yüklenmezse sınıf
   3,5 sn sonra kendiliğinden kalkar; hareketi azalt açıksa hiç uygulanmaz. */

[data-acilis] {
  transition: opacity 900ms var(--yumusak), transform 1100ms var(--yumusak);
  transition-delay: calc(var(--i, 0) * 95ms + 150ms);
}

.hareket:not(.acildi) [data-acilis] {
  opacity: 0;
  transform: translateY(28px);
}

.hareket:not(.acildi) .satir [data-acilis] {
  opacity: 1;
  transform: translateY(115%);
}

[data-belir] {
  transition: opacity 900ms var(--yumusak), transform 1000ms var(--yumusak), clip-path 1100ms var(--yumusak);
  transition-delay: calc(var(--g, 0) * 120ms);
}

[data-belir="baslik"] {
  clip-path: inset(-14% -4% -22% -4%);
}

.hareket [data-belir]:not(.gorundu) {
  opacity: 0;
  transform: translateY(30px);
}

.hareket [data-belir="baslik"]:not(.gorundu) {
  opacity: 1;
  transform: translateY(0.32em);
  clip-path: inset(0 -4% 108% -4%);
}