/* Lorenza Garden, "Sitemiz yapım aşamasındadır" sayfası. Görüntü sayfanın tamamıdır; yazı görüntüdeki tabelada durur.
   HTML yalnız iki şey taşır: ekran okuyucu metni ve altta tıklanır iletişim levhası. */

@font-face{font-family:"Jost";src:url(/fonts/jost-latin-wght-normal.woff2) format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Jost";src:url(/fonts/jost-latin-ext-wght-normal.woff2) format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --duvar:#e8e2d7;          /* görüntü gelmeden önceki zemin: duvarın rengi */
  /* Levhanın renkleri görüntüdeki tabeladan ölçüldü: mat siyah çelik, açık boya */
  --celik-ust:#2b2923;
  --celik-alt:#22211c;
  --boya:#e3ded5;
  --yesil-acik:#a9c3a6;
  --yazi:"Jost","Helvetica Neue",Arial,sans-serif;
  /* Kadrajın sabit noktası: tabela her ekran oranında kadrajda kalsın */
  --yatay-odak:40% 30%;
  --kare-odak:28% 30%;
  --dikey-odak:50% 50%;        /* telefon çekiminde kapı ve tabela karenin tam ortasında */
  /* Toz boya dokusu: çok hafif açık benek */
  --doku:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 .10 0 0 0 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}
*{box-sizing:border-box;margin:0}
html,body{height:100%}
html{background:var(--duvar);-webkit-text-size-adjust:100%}
body{font:500 15px/1.4 var(--yazi);color:var(--boya);-webkit-font-smoothing:antialiased;overflow:hidden}

.sahne{position:relative;height:100vh;height:100dvh;overflow:hidden;isolation:isolate;background:var(--duvar)}
.poster,.poster img,.film{position:absolute;inset:0;width:100%;height:100%}
.poster img,.film{object-fit:cover;object-position:var(--yatay-odak)}
.film{opacity:0;transition:opacity 600ms ease}
.film.oynuyor{opacity:1}
/* Kareye yakın pencerede yatay kare soldan daha az kesilir, tabelanın sol kenarı kadrajda kalır */
@media (max-aspect-ratio:11/10){.poster img,.film{object-position:var(--kare-odak)}}
@media (max-aspect-ratio:4/5){.poster img,.film{object-position:var(--dikey-odak)}}
@media (prefers-reduced-motion:reduce){.film{display:none}}


.gizli{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* İletişim levhası: tabeladaki satırların tıklanır karşılığı. Tabelayla aynı malzeme: mat siyah çelik, açık boya yazı,
   iki uçta cıvata. Cam, bulanıklık, yuvarlak köşe yok. Gölge sahnedeki güneşe göre sola ve aşağı düşer. */
.levha{
  background:var(--doku),linear-gradient(180deg,var(--celik-ust),var(--celik-alt));
  border-radius:1px;
  box-shadow:
    inset 0 1px 0 rgba(255,250,240,.11),      /* üst kenarda sacın kalınlığı */
    inset -1px 0 0 rgba(255,250,240,.06),
    -2px 3px 3px rgba(38,24,14,.34),
    -8px 11px 16px rgba(38,24,14,.30);
}
.iletisim{
  position:absolute;left:16px;right:16px;margin-inline:auto;width:fit-content;
  bottom:max(28px,env(safe-area-inset-bottom,0px) + 18px);
  display:flex;padding:0 22px;
}
.iletisim::before,.iletisim::after{
  content:"";position:absolute;top:50%;width:8px;height:8px;margin-top:-4px;border-radius:50%;
  background:radial-gradient(circle at 64% 30%,#6a665c 0,#34322c 42%,#12110e 100%);
  box-shadow:-1px 1.5px 2px rgba(0,0,0,.6);
}
.iletisim::before{left:11px}
.iletisim::after{right:11px}
.iletisim a{
  position:relative;display:block;padding:13px 22px;color:var(--boya);white-space:nowrap;letter-spacing:.03em;
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;text-decoration-color:transparent;
  transition:text-decoration-color 260ms ease;
}
/* Ayırıcı: sacdaki ince kesik */
.iletisim a + a::before{content:"";position:absolute;left:0;top:32%;bottom:32%;width:1px;background:rgba(227,222,213,.30)}
.iletisim a:hover{text-decoration-color:rgba(227,222,213,.75)}
.iletisim a:focus-visible{outline:2px solid var(--yesil-acik);outline-offset:-3px}
.kisa{display:none}

/* Telefon: numara ve adres tabelada okunur, levha tek satır ve kısa kalır */
@media (max-width:560px){
  body{font-size:14.5px}
  .iletisim{padding:0 20px}
  .iletisim a{padding:14px 16px}
  .uzun{display:none}
  .kisa{display:inline}
}
@media (prefers-reduced-motion:reduce){.iletisim a{transition:none}}
/* Dik ekranda iletişim levhası yok: numara, e-posta ve adres sahnedeki tabelada okunur */
@media (max-aspect-ratio:4/5){.iletisim{display:none}}

/* 404: aynı sahne, levhanın üstünde kısa bir not */
.not{
  position:absolute;left:16px;right:16px;margin-inline:auto;width:fit-content;bottom:max(96px,env(safe-area-inset-bottom,0px) + 86px);
  padding:11px 20px;text-align:center;letter-spacing:.02em;
}
.not a{color:var(--boya);text-underline-offset:4px;text-decoration-thickness:1px;white-space:nowrap}
.not a:focus-visible{outline:2px solid var(--yesil-acik);outline-offset:2px}
@media (max-aspect-ratio:4/5){.not{bottom:max(28px,env(safe-area-inset-bottom,0px) + 18px)}}