/* Kalyon Hotel — kaydirmayla surulen tek film.
   Film on planda; uzerinde yaziden baska hicbir sey yok.

   Renkler filmin kendisinden olculdu (14 kare, ortalama + parlak %15):
   genel ton sicak pirinc #604c3d, isiklar #c8a45c, deniz manzarasinda
   183 dereceye kayan tek bir serinlik #5fa3ac. Site butun bu araligi
   kullaniyor; --vurgu ve --duman'i motor filmin o anki rengine gore
   her karede yeniden yaziyor. */

:root {
  --siyah: #080604;              /* sicak siyah — mavi degil */
  --duman: #120c07;
  --vurgu: #c8a45c;              /* filmden olculen pirinc */
  --kagit: #f6f1e6;
  --sis: rgba(246, 241, 230, .5);
  --hayal: rgba(246, 241, 230, .2);
  --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans: 'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --kenar: clamp(20px, 4.4vw, 62px);
  --egri: cubic-bezier(.22, 1, .36, 1);

  /* kaydirma motoru bunlari her karede yaziyor */
  --durak: 0;      /* 0 akis · 1 soz uzerinde durulmus */
  --yakin: 1;      /* film olcegi */
  --bulanik: 0px;  /* film bulanikligi */
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; background: var(--siyah); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--siyah);
  color: var(--kagit);
  font-family: var(--sans);
  font-weight: 300;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures contextual;
  font-variant-numeric: oldstyle-nums;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }

::selection { background: var(--vurgu); color: #120c07; }

/* ---------------------------------------------------------------- acilis */
.acilis {
  position: fixed;
  inset: 0;
  z-index: 200;
  background:
    radial-gradient(120% 90% at 50% 45%, #140d07 0%, var(--siyah) 70%);
  display: grid;
  place-items: center;
  transition: opacity 1.2s var(--egri), visibility 1.2s;
}
.acilis.bitti { opacity: 0; visibility: hidden; }
.acilis-ic { text-align: center; animation: yukselisYumusak 1.4s var(--egri) both; }
.acilis-ic p {
  margin: 22px 0 0;
  font-size: 10.5px;
  font-weight: 200;
  letter-spacing: .54em;
  text-indent: .54em;
  text-transform: uppercase;
  color: var(--sis);
}
.cubuk {
  width: 122px;
  height: 1px;
  margin: 32px auto 0;
  background: rgba(246, 241, 230, .1);
  overflow: hidden;
}
.cubuk i {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, transparent, var(--vurgu) 40%, #fff4dd);
  transition: width .3s linear;
}
@keyframes yukselisYumusak {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------- monogram */
.mono {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  font-family: var(--serif);
  font-size: 21px;
  font-weight: 300;
  line-height: 1;
  color: var(--kagit);
}
/* ince cerceve + kose vurgulari: kirtasiye hissi */
.mono::before {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid rgba(246, 241, 230, .22);
  transition: border-color .7s var(--egri);
}
.mono::after {
  content: '';
  position: absolute;
  inset: 4px;
  border: 1px solid transparent;
  border-image: linear-gradient(135deg, var(--vurgu), transparent 45%, transparent 55%, var(--vurgu)) 1;
  opacity: .5;
  transition: opacity .7s var(--egri);
}
.marka:hover .mono::before { border-color: rgba(246, 241, 230, .5); }
.marka:hover .mono::after { opacity: 1; }
.mono.buyuk { width: 76px; height: 76px; font-size: 38px; }

/* ---------------------------------------------------------------- ust bar */
.ust {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: clamp(16px, 2.6vw, 30px) var(--kenar);
  pointer-events: none;
  opacity: 1;
  transform: none;
  transition: opacity .9s var(--egri), transform .9s var(--egri);
}
.ust > * { pointer-events: auto; }
/* film oynarken arayuz cekilir — ekranda yalnizca film ve yazi kalir */
.ust.cekildi { opacity: 0; transform: translateY(-16px); pointer-events: none; }
.ust.cekildi > * { pointer-events: none; }

.marka { display: flex; align-items: center; gap: 16px; }
.marka .ad {
  display: flex;
  flex-direction: column;
  font-size: 11px;
  font-weight: 300;
  letter-spacing: .3em;
  text-indent: .3em;
  text-transform: uppercase;
  text-shadow: 0 1px 20px rgba(0, 0, 0, .85);
}
.marka .ad em {
  font-style: normal;
  font-size: 8.5px;
  font-weight: 200;
  letter-spacing: .4em;
  text-indent: .4em;
  color: var(--sis);
  margin-top: 5px;
}
.gezinti { display: flex; gap: clamp(18px, 2.4vw, 38px); }
.gezinti a {
  position: relative;
  font-size: 10px;
  font-weight: 300;
  letter-spacing: .26em;
  text-indent: .26em;
  text-transform: uppercase;
  color: var(--sis);
  padding-bottom: 6px;
  text-shadow: 0 1px 20px rgba(0, 0, 0, .85);
  transition: color .45s var(--egri);
}
.gezinti a::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: linear-gradient(90deg, var(--vurgu), rgba(246, 241, 230, .8));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .6s var(--egri);
}
.gezinti a:hover { color: var(--kagit); }
.gezinti a:hover::after { transform: scaleX(1); }

/* ---------------------------------------------------------------- sahne */
.yolculuk { position: relative; }
.sahne {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: #000;
}

.cerceve {
  position: absolute;
  inset: 0;
  transform: scale(var(--yakin));
  will-change: transform;
}
.film {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* durakta film geri cekilir, yazi one cikar — tek filtre gecisi */
  filter:
    blur(var(--bulanik))
    saturate(calc(1 - var(--durak) * .22))
    brightness(calc(1 - var(--durak) * .16))
    contrast(calc(1 + var(--durak) * .06));
}

.tonlama, .vinyet, .karartma, .dokuma {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
/* filmin o anki rengiyle yikama — site rengi ile goruntu ayni tondan */
.tonlama {
  z-index: 5;
  background: var(--vurgu);
  mix-blend-mode: soft-light;
  opacity: calc(.1 + var(--durak) * .2);
}
.vinyet {
  z-index: 6;
  background:
    linear-gradient(180deg, rgba(6, 4, 2, .58) 0%, rgba(6, 4, 2, 0) 20%,
                            rgba(6, 4, 2, 0) 60%, rgba(6, 4, 2, .68) 100%),
    radial-gradient(140% 100% at 50% 50%, rgba(6, 4, 2, 0) 38%, rgba(6, 4, 2, .62) 100%);
}
.karartma {
  z-index: 8;
  background: radial-gradient(115% 88% at 50% 50%,
              rgba(8, 5, 3, .84) 0%, rgba(8, 5, 3, .52) 62%, rgba(8, 5, 3, .28) 100%);
  opacity: calc(var(--durak) * .64);
}
.dokuma {
  z-index: 10;
  opacity: .036;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'>\
<filter id='t'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter>\
<rect width='180' height='180' filter='url(%23t)'/></svg>");
  animation: titre 1s steps(3) infinite;
}
@keyframes titre {
  0%   { transform: translate(0, 0); }
  33%  { transform: translate(-2.5%, 2%); }
  66%  { transform: translate(2%, -2.5%); }
  100% { transform: translate(0, 0); }
}
@media (prefers-reduced-motion: reduce) { .dokuma { animation: none; } }

/* ---------------------------------------------------------------- sozler */
.sozler {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  padding: 0 clamp(24px, 8vw, 140px);
  pointer-events: none;
}
.sozler p {
  grid-area: 1 / 1;
  margin: 0;
  opacity: 0;
  text-align: center;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(31px, 5vw, 66px);
  line-height: 1.16;
  letter-spacing: .012em;
  color: #fdfbf6;
  text-shadow: 0 2px 70px rgba(0, 0, 0, .72), 0 1px 3px rgba(0, 0, 0, .38);
  will-change: opacity, transform;
}

/* kelime maskesi: her kelime kendi satirinin arkasindan yukselir */
.sozler .k {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding: 0 .01em .12em;
  margin: 0 -.01em -.12em;
}
.sozler .k > i {
  display: inline-block;
  font-style: inherit;
  will-change: transform;
}

/* kahraman satirlar */
.sozler p.dev {
  display: grid;
  gap: clamp(15px, 2.1vw, 28px);
  justify-items: center;
}
.sozler .ust-satir {
  display: block;
  font-family: var(--sans);
  font-size: clamp(9px, 1vw, 11.5px);
  font-weight: 200;
  /* acilim: yazi genis baslar, yerine oturur */
  letter-spacing: calc(.58em + var(--acilim, 0) * .22em);
  text-indent: calc(.58em + var(--acilim, 0) * .22em);
  text-transform: uppercase;
  color: rgba(246, 241, 230, .66);
}
.sozler b {
  display: block;
  font-weight: 300;
  font-size: clamp(40px, 8vw, 108px);
  letter-spacing: calc(.055em + var(--acilim, 0) * .13em);
  text-indent: calc(.055em + var(--acilim, 0) * .13em);
  text-transform: uppercase;
  line-height: 1;
}
/* kahramanin altindaki kil payi cizgi — ortadan disa dogru cizilir */
.sozler p.dev::after {
  content: '';
  width: min(210px, 28vw);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--vurgu) 35%,
                              rgba(255, 250, 238, .9) 50%, var(--vurgu) 65%, transparent);
  transform: scaleX(var(--cizgi, 0));
  transform-origin: center;
  opacity: .85;
}

/* ---------------------------------------------------------------- ipucu */
.ipucu {
  position: absolute;
  left: 50%;
  bottom: clamp(26px, 5vh, 52px);
  z-index: 30;
  transform: translateX(-50%);
  transition: opacity 1s var(--egri);
}
.ipucu i {
  display: block;
  width: 1px;
  height: 54px;
  background: linear-gradient(180deg, rgba(246, 241, 230, .75), transparent);
  animation: dus 2.6s cubic-bezier(.5, 0, .5, 1) infinite;
}
@keyframes dus {
  0%   { transform: scaleY(0); transform-origin: top; opacity: 0; }
  20%  { opacity: 1; }
  45%  { transform: scaleY(1); transform-origin: top; }
  55%  { transform: scaleY(1); transform-origin: bottom; opacity: 1; }
  100% { transform: scaleY(0); transform-origin: bottom; opacity: 0; }
}
.ipucu.gizli { opacity: 0; }

/* -------------------------------------------------- goze girme (bolumler) */
.js .gir { opacity: 0; transform: translateY(26px); }
.gorun .gir {
  opacity: 1;
  transform: none;
  transition: opacity 1.1s var(--egri), transform 1.1s var(--egri);
}
.gorun .gir:nth-child(2) { transition-delay: .09s; }
.gorun .gir:nth-child(3) { transition-delay: .18s; }
.gorun .gir:nth-child(4) { transition-delay: .27s; }
.gorun .gir:nth-child(5) { transition-delay: .36s; }
.gorun .gir:nth-child(6) { transition-delay: .45s; }
@media (prefers-reduced-motion: reduce) {
  .gir { opacity: 1; transform: none; }
}

/* ------------------------------------------------------- bolum ortak dili */
.bolum {
  position: relative;
  z-index: 40;
  padding: clamp(96px, 16vh, 190px) var(--kenar);
  background: radial-gradient(130% 100% at 50% 0%, var(--duman) 0%, var(--siyah) 66%);
}
/* filmden gelen renkte ince bir esik cizgisi */
.bolum::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--vurgu), transparent);
  opacity: .3;
}
.ic { max-width: 1180px; margin: 0 auto; }
.ic.dar { max-width: 880px; }

/* bolum etiketi — numaralanmis kirtasiye hissi */
.etiket {
  display: block;
  margin-bottom: clamp(20px, 3vh, 32px);
  padding-left: 26px;
  position: relative;
  font-size: 9px;
  font-weight: 200;
  letter-spacing: .46em;
  text-transform: uppercase;
  color: var(--vurgu);
}
.etiket::before {
  content: '';
  position: absolute;
  left: 0; top: .52em;
  width: 16px; height: 1px;
  background: var(--vurgu);
  opacity: .8;
}

.bolum h2 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(34px, 5.2vw, 68px);
  letter-spacing: .035em;
  text-transform: uppercase;
  line-height: 1.06;
}
.bolum .giris {
  margin: clamp(24px, 3.4vh, 38px) 0 0;
  max-width: 62ch;
  font-size: clamp(14px, 1.2vw, 16px);
  font-weight: 300;
  line-height: 2;
  color: rgba(246, 241, 230, .62);
}
.bolum .alt {
  margin: 18px 0 clamp(46px, 7vh, 76px);
  font-size: 11px;
  font-weight: 200;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--sis);
}
.bolum .dipnot {
  margin: clamp(28px, 4vh, 44px) 0 0;
  font-size: 11.5px;
  font-weight: 200;
  line-height: 1.95;
  letter-spacing: .06em;
  color: rgba(246, 241, 230, .34);
}

/* ------------------------------------------------------------ sayi seridi */
.sayilar {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  margin: clamp(46px, 7vh, 78px) 0 0;
  padding: 0;
  background: rgba(246, 241, 230, .08);
  border: 1px solid rgba(246, 241, 230, .08);
}
.sayilar li {
  display: grid;
  gap: 12px;
  justify-items: center;
  padding: clamp(26px, 3.2vw, 40px) 14px;
  background: var(--siyah);
  text-align: center;
}
.sayilar b {
  font-family: var(--serif);
  font-size: clamp(38px, 4.6vw, 60px);
  font-weight: 300;
  line-height: 1;
  color: var(--vurgu);
}
.sayilar span {
  font-size: 8.5px;
  font-weight: 200;
  letter-spacing: .34em;
  text-indent: .34em;
  text-transform: uppercase;
  color: rgba(246, 241, 230, .38);
}

/* ---------------------------------------------------------------- odalar */
.secim .alt { margin-top: 14px; }
.kartlar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1px;
  background: rgba(246, 241, 230, .08);
  border: 1px solid rgba(246, 241, 230, .08);
}
.kart {
  position: relative;
  display: grid;
  gap: 17px;
  align-content: start;
  padding: clamp(30px, 3.6vw, 52px);
  background: var(--siyah);
  overflow: hidden;
  transition: background .7s var(--egri);
}
/* sol kenarda filmden gelen renkte bir ray */
.kart::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 1px;
  background: linear-gradient(180deg, var(--vurgu), transparent);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .8s var(--egri);
}
/* ustten asagi sizan sicak isik */
.kart::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(90% 60% at 0% 0%, var(--vurgu), transparent 70%);
  opacity: 0;
  transition: opacity .7s var(--egri);
  pointer-events: none;
}
.kart:hover { background: #100a06; }
.kart:hover::before { transform: scaleY(1); }
.kart:hover::after { opacity: .07; }
.kart .no {
  font-size: 9px;
  font-weight: 200;
  letter-spacing: .42em;
  text-indent: .42em;
  color: rgba(246, 241, 230, .3);
}
.kart .baslik {
  font-family: var(--serif);
  font-size: clamp(27px, 3vw, 42px);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: .02em;
}
.kart .metin {
  font-size: 13px;
  font-weight: 300;
  line-height: 1.85;
  color: var(--sis);
  max-width: 32ch;
}
.kartlar.uclu { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

/* ------------------------------------------------------- lezzet siralari */
.siralar {
  display: grid;
  margin-top: clamp(46px, 7vh, 78px);
  border-top: 1px solid rgba(246, 241, 230, .1);
}
.sira {
  position: relative;
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: clamp(14px, 3vw, 40px);
  align-items: start;
  padding: clamp(30px, 4vh, 48px) 0;
  border-bottom: 1px solid rgba(246, 241, 230, .1);
  transition: padding-left .8s var(--egri);
}
/* filmden gelen renkte kayan bir alt cizgi */
.sira::after {
  content: '';
  position: absolute;
  left: 0; bottom: -1px;
  width: 100%; height: 1px;
  background: linear-gradient(90deg, var(--vurgu), transparent 70%);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .9s var(--egri);
}
.sira:hover { padding-left: 14px; }
.sira:hover::after { transform: scaleX(1); }
.sira-no {
  font-size: 9px;
  font-weight: 200;
  letter-spacing: .42em;
  padding-top: .95em;
  color: rgba(246, 241, 230, .28);
}
.sira-ic h3 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(24px, 2.8vw, 38px);
  line-height: 1.15;
  letter-spacing: .02em;
}
.sira-ic p {
  margin: 14px 0 0;
  max-width: 56ch;
  font-size: 13.5px;
  font-weight: 300;
  line-height: 1.95;
  color: var(--sis);
}

/* ---------------------------------------------------------------- konum */
.iki-sutun {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(300px, 1.05fr);
  gap: clamp(48px, 7vw, 110px);
  align-items: start;
}
.konum .dugme { margin-top: clamp(34px, 5vh, 54px); display: inline-block; }

.mesafe { list-style: none; margin: 0; padding: 0; }
.mesafe li {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 17px 0;
  border-bottom: 1px solid rgba(246, 241, 230, .08);
}
.mesafe li:first-child { border-top: 1px solid rgba(246, 241, 230, .08); }
.mesafe .yer {
  font-size: 13.5px;
  font-weight: 300;
  letter-spacing: .04em;
  white-space: nowrap;
}
/* noktali dolgu — otel kirtasiyesi hissi */
.mesafe .cizik {
  flex: 1;
  height: 1px;
  min-width: 20px;
  background-image: linear-gradient(90deg, rgba(246, 241, 230, .26) 1px, transparent 1px);
  background-size: 5px 1px;
  transform: translateY(-3px);
}
.mesafe .uzak {
  font-size: 9.5px;
  font-weight: 200;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--vurgu);
  white-space: nowrap;
}

/* ------------------------------------------------------------- hizmetler */
.rozetler {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: clamp(38px, 5.5vh, 62px) 0 0;
  padding: 0;
}
.rozetler li {
  padding: 11px 20px;
  border: 1px solid rgba(246, 241, 230, .13);
  font-size: 10.5px;
  font-weight: 300;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(246, 241, 230, .58);
  transition: border-color .55s var(--egri), color .55s var(--egri);
}
.rozetler li:hover { border-color: var(--vurgu); color: var(--kagit); }

.saatler {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, auto));
  gap: clamp(28px, 5vw, 68px);
  margin-top: clamp(44px, 6.5vh, 72px);
  padding-top: clamp(34px, 5vh, 52px);
  border-top: 1px solid rgba(246, 241, 230, .1);
}
.saatler .et {
  display: block;
  margin-bottom: 11px;
  font-size: 8.5px;
  font-weight: 200;
  letter-spacing: .42em;
  text-transform: uppercase;
  color: rgba(246, 241, 230, .3);
}
.saatler b {
  font-family: var(--serif);
  font-size: clamp(26px, 2.6vw, 34px);
  font-weight: 300;
  line-height: 1;
  color: var(--vurgu);
}

/* ---------------------------------------------------------------- kapanis */
.kapanis {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: clamp(90px, 15vh, 170px) var(--kenar);
  background: radial-gradient(130% 100% at 50% 0%, var(--duman) 0%, var(--siyah) 60%);
}
.kapanis-ic { text-align: center; display: grid; justify-items: center; gap: 25px; }
.kapanis h2 {
  margin: 10px 0 0;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(40px, 7vw, 92px);
  letter-spacing: .085em;
  text-indent: .085em;
  text-transform: uppercase;
  line-height: 1;
}
.kapanis .slogan {
  margin: 0;
  font-size: 10.5px;
  font-weight: 200;
  letter-spacing: .44em;
  text-indent: .44em;
  text-transform: uppercase;
  color: var(--sis);
}
.bilgi {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, auto));
  gap: clamp(26px, 4.4vw, 72px);
  margin-top: clamp(30px, 6vh, 54px);
}
.bilgi .et {
  display: block;
  font-size: 8.5px;
  font-weight: 200;
  letter-spacing: .42em;
  text-indent: .42em;
  text-transform: uppercase;
  color: rgba(246, 241, 230, .3);
  margin-bottom: 12px;
}
.bilgi a {
  font-size: 14px;
  font-weight: 300;
  line-height: 1.75;
  letter-spacing: .05em;
  background-image: linear-gradient(var(--vurgu), var(--vurgu));
  background-size: 0 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size .55s var(--egri);
}
.bilgi a:hover { background-size: 100% 1px; }

.dugme {
  position: relative;
  margin-top: clamp(28px, 6vh, 52px);
  padding: 17px 40px;
  border: 1px solid rgba(246, 241, 230, .2);
  font-size: 10px;
  font-weight: 300;
  letter-spacing: .34em;
  text-indent: .34em;
  text-transform: uppercase;
  overflow: hidden;
  transition: border-color .6s var(--egri), color .6s var(--egri);
  z-index: 0;
}
/* dolgu asagidan yukari yurur */
.dugme::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--vurgu);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform .6s var(--egri);
}
.dugme:hover { border-color: var(--vurgu); color: #0d0803; }
.dugme:hover::before { transform: scaleY(1); }

.kapanis .kucuk {
  margin: 38px 0 0;
  font-size: 9px;
  font-weight: 200;
  letter-spacing: .26em;
  text-indent: .26em;
  text-transform: uppercase;
  color: rgba(246, 241, 230, .2);
}

@media (max-width: 1000px) {
  .iki-sutun { grid-template-columns: 1fr; }
  .gezinti a:nth-child(3) { display: none; }
}

@media (max-width: 720px) {
  .gezinti a:nth-child(1), .gezinti a:nth-child(4) { display: none; }
  .sira { grid-template-columns: 1fr; gap: 10px; }
  .sira-no { padding-top: 0; }
  .kartlar { grid-template-columns: 1fr; }
  .sayilar { grid-template-columns: repeat(2, 1fr); }
  .sozler p { font-size: clamp(27px, 7.4vw, 40px); }
  .sozler b {
    font-size: clamp(32px, 11vw, 54px);
    letter-spacing: calc(.04em + var(--acilim, 0) * .09em);
    text-indent: calc(.04em + var(--acilim, 0) * .09em);
  }
  .sozler .ust-satir {
    letter-spacing: calc(.42em + var(--acilim, 0) * .16em);
    text-indent: calc(.42em + var(--acilim, 0) * .16em);
  }
}