/* © 2026 OradaOl — Erdi Souksu. Tüm hakları saklıdır. / All rights reserved.
   "Fotoğrafı yırt" kumaş gösterisi — ana sayfa ve dil sayfalarının ortak stili.
   Kendi renklerini taşır; butonlar her sayfanın kendi sınıflarıyla gelir.
   /assets/** bir yıl "immutable" önbellekleniyor: bu klasördeki dosyalar
   değişirse klasör sürümünü artır, eski adı yeniden kullanma. */
@font-face{font-family:"Gloock";src:url("/assets/fonts/Gloock-Regular.woff2") format("woff2");font-weight:400;font-display:swap}

.kumas{--k-paper:#f4f1ec;--k-muted:#8c8a92;--k-ember:#d9743b;--k-gut:clamp(20px,5vw,80px);
  position:relative;height:100vh;height:100svh;min-height:600px;overflow:hidden;background:#050506;
  isolation:isolate;color:var(--k-paper)}
.kumas canvas{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity .9s;
  cursor:grab;touch-action:pan-y}
.kumas.hazir canvas{opacity:1}
.kumas.tutuluyor canvas{cursor:grabbing}

/* Açılıştan sonra parlak panoramanın üstünde metin okunur kalsın. */
.kumas::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;transition:opacity 1.6s .6s;
  background:linear-gradient(90deg,rgba(8,8,10,.78) 0%,rgba(8,8,10,.5) 30%,rgba(8,8,10,0) 58%),
             linear-gradient(180deg,rgba(8,8,10,.55) 0%,rgba(8,8,10,0) 16%,rgba(8,8,10,0) 80%,rgba(8,8,10,.6) 100%)}
[dir="rtl"] .kumas::after{
  background:linear-gradient(270deg,rgba(8,8,10,.78) 0%,rgba(8,8,10,.5) 30%,rgba(8,8,10,0) 58%),
             linear-gradient(180deg,rgba(8,8,10,.55) 0%,rgba(8,8,10,0) 16%,rgba(8,8,10,0) 80%,rgba(8,8,10,.6) 100%)}
.kumas.acildi::after{opacity:1}

.kumas-metin{position:absolute;z-index:2;inset-inline-start:var(--k-gut);top:50%;transform:translateY(-50%);
  width:min(620px,44vw);pointer-events:none}
.kumas-metin a,.kumas-metin button{pointer-events:auto}
.kumas.acildi .kumas-metin{text-shadow:0 1px 18px rgba(0,0,0,.35)}
/* Ana başlık sütuna iki satırda sığsın; açılış sonrası başlık ondan büyük olmasın. */
.kumas h1,.kumas-sonra h2{font-size:clamp(42px,5vw,84px);line-height:.98;letter-spacing:-.04em;font-weight:600;
  margin:0;text-wrap:balance}
[dir="rtl"] .kumas h1,[dir="rtl"] .kumas-sonra h2,
.kumas:lang(zh) h1,.kumas:lang(ja) h1,.kumas:lang(ko) h1,.kumas:lang(hi) h1{letter-spacing:0;line-height:1.18}
.kumas .eyebrow{font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--k-muted);margin:0 0 22px}
.kumas .lede{margin:22px 0 0;max-width:40ch;font-size:clamp(16px,1.6vw,19px);line-height:1.6;color:rgba(244,241,236,.68)}
.kumas-eylem{display:flex;flex-wrap:wrap;align-items:center}
.kumas-yonerge{margin:26px 0 0;font-size:13.5px;color:rgba(244,241,236,.5)}
.kumas-yirt{background:none;border:0;padding:4px 0;color:rgba(244,241,236,.74);font:inherit;cursor:pointer;
  text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(244,241,236,.3)}
.kumas-yirt:hover{color:var(--k-paper)}
.kumas-yirt:focus-visible{outline:2px solid var(--k-paper);outline-offset:3px}

.kumas-once,.kumas-sonra{transition:opacity .6s,transform .8s cubic-bezier(.2,.8,.2,1),visibility 0s}
.kumas-sonra{position:absolute;left:0;right:0;top:50%;transform:translateY(calc(-50% + 18px));opacity:0;visibility:hidden}
.kumas.acildi .kumas-once{opacity:0;transform:translateY(-14px);visibility:hidden;transition-delay:0s,0s,.6s}
.kumas.acildi .kumas-sonra{opacity:1;visibility:visible;transform:translateY(-50%);transition-delay:1.1s}

/* Köşe ipucu: kumaşın köşesini izler (konum JS'ten). */
.kumas-ipucu{position:absolute;z-index:3;left:0;top:0;pointer-events:none;opacity:0;transition:opacity .5s}
.kumas.hazir .kumas-ipucu{opacity:1;transition-delay:1.4s}
.kumas .kumas-ipucu.gizli,.kumas.acildi .kumas-ipucu{opacity:0;transition-delay:0s}
.kumas-ipucu i{position:absolute;left:-7px;top:-7px;width:14px;height:14px;border-radius:50%;background:var(--k-ember);
  animation:kumasNabiz 1.8s infinite}
.kumas-ipucu span{position:absolute;left:16px;top:12px;white-space:nowrap;font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--k-paper);background:rgba(8,8,10,.72);padding:6px 10px;border-radius:2px;
  backdrop-filter:blur(6px)}
[dir="rtl"] .kumas-ipucu span{left:auto;right:16px;letter-spacing:0}
@keyframes kumasNabiz{0%{box-shadow:0 0 0 0 rgba(217,116,59,.55)}70%{box-shadow:0 0 0 18px rgba(217,116,59,0)}100%{box-shadow:0 0 0 0 rgba(217,116,59,0)}}

/* Kimse dokunmazsa köşeyi kendisi çeken hayalet el. */
.kumas-hayalet{position:absolute;z-index:3;left:0;top:0;pointer-events:none;opacity:0;transition:opacity .3s}
.kumas-hayalet.gorunur{opacity:1}
.kumas-hayalet::before{content:"";position:absolute;left:-17px;top:-17px;width:34px;height:34px;border-radius:50%;
  border:1.5px solid rgba(244,241,236,.9);background:rgba(244,241,236,.08);transition:transform .2s}
.kumas-hayalet.basili::before{transform:scale(.72);background:rgba(244,241,236,.22)}

.kumas-not{position:absolute;z-index:2;left:50%;bottom:26px;transform:translateX(-50%);margin:0;font-size:12px;
  letter-spacing:.16em;text-transform:uppercase;color:rgba(244,241,236,.55);opacity:0;transition:opacity .6s;
  pointer-events:none;white-space:nowrap}
.kumas.acildi .kumas-not{opacity:1;transition-delay:2.2s}

/* Yüklenirken (ve WebGL yoksa) aynı yerde duran sabit baskı. */
.kumas-yedek{position:absolute;z-index:0;left:calc(50% + min(18vw,300px));top:50%;width:min(30vw,440px,51svh);
  aspect-ratio:4/5;transform:translate(-50%,calc(-50% - 18px));background:var(--k-paper);container-type:inline-size;
  pointer-events:none;box-shadow:8px 16px 40px rgba(0,0,0,.45);transition:opacity .9s}
[dir="rtl"] .kumas-yedek{left:calc(50% - min(18vw,300px))}
.kumas-yedek i{position:absolute;inset:5.7cqw 5.7cqw 24.4cqw;
  background:#222 url("/assets/hero/istanbul_galata_gunbatimi_2048.jpg") 61.6% 44%/560% auto no-repeat;
  background-image:image-set(url("/assets/hero/istanbul_galata_gunbatimi_2048.webp") type("image/webp"),url("/assets/hero/istanbul_galata_gunbatimi_2048.jpg") type("image/jpeg"))}
.kumas.hazir .kumas-yedek{opacity:0}
.kumas.webgl-yok .kumas-yedek{opacity:1}
.kumas.webgl-yok canvas,.kumas.webgl-yok .kumas-ipucu,.kumas.webgl-yok .kumas-yonerge{display:none}

/* Telefon ve dikey tablet: başlık üstte, kumaş altta (JS'teki yerleşimle aynı koşul). */
@media(max-width:819px),(max-width:1099px) and (orientation:portrait){
  .kumas-metin{inset-inline:20px;top:calc(env(safe-area-inset-top) + 84px);transform:none;width:auto;text-align:center}
  .kumas h1{font-size:clamp(42px,7vw,64px)}
  .kumas .lede{margin-left:auto;margin-right:auto}
  .kumas-eylem{justify-content:center}
  .kumas-yonerge{margin-top:14px}
  .kumas-sonra{top:0;transform:translateY(18px)}
  .kumas.acildi .kumas-sonra{transform:none}
  .kumas-sonra .lede{margin-top:14px;font-size:15px}
  .kumas-sonra h2{font-size:clamp(38px,7vw,56px)}
  .kumas-ipucu span{left:auto;right:16px;top:-44px}
  /* Sağdan solda köşe noktası ekranın solunda: etiket noktanın sağına. */
  [dir="rtl"] .kumas-ipucu span{left:16px;right:auto;top:-44px}
  .kumas::after,[dir="rtl"] .kumas::after{
    background:linear-gradient(180deg,rgba(8,8,10,.8) 0%,rgba(8,8,10,.55) 34%,rgba(8,8,10,0) 58%,rgba(8,8,10,0) 84%,rgba(8,8,10,.6) 100%)}
  .kumas-yedek,[dir="rtl"] .kumas-yedek{left:50%;top:auto;bottom:7svh;width:min(70vw,440px);transform:translateX(-50%)}
}
@media(max-width:599px){.kumas-once .lede{display:none}}
@media(prefers-reduced-motion:reduce){
  .kumas-ipucu i{animation:none}
  .kumas-once,.kumas-sonra{transition:opacity .2s,visibility 0s}
}