/* ============================================================
   NOIR D'ARDA — stil.css
   Renk düzeni tek yerden: aşağıdaki değişkenler.
   Kural: hiçbir içerik CSS ile gizlenmez; gizleme sadece
   "body.js" varken olur. JS çalışmazsa site düz ama TAM görünür.
   ============================================================ */

/* ---------- 1) RENKLER VE DEĞİŞKENLER ----------
   İki palet var: AYDINLIK (beyaz zemin / bordo yazı — varsayılan)
   ve KOYU (bordo zemin / krem yazı). Alttaki düğmeler paleti seçer,
   "ters" sınıfı ise seçili paleti bölüm bazında çevirir. */
:root{
  --beyaz:#FFFFFF;
  --bordo:#5B0E1F;
  --bordo-koyu:#3A0813;
  --bordo-acik:#8E1B32;
  --krem:#F7F2EE;
  --gul:#E8D3CE;

  /* aydınlık palet — saf beyaz göz kamaştırıp yazıyı soluk bırakıyordu:
     zemin sıcak kreme alındı (#FFF -> #FAF7F4 -> #F2EBE4), mürekkep
     koyulaştırıldı, soluk ton güçlendirildi */
  --a-zemin:#F2EBE4;
  --a-murekkep:#42090F;
  --a-sonuk:rgba(66,9,15,.75);
  --a-cizgi:rgba(66,9,15,.24);
  --a-vurgu:#8E1B32;

  /* koyu palet */
  --k-zemin:#5B0E1F;
  --k-murekkep:#F7F2EE;
  --k-sonuk:rgba(247,242,238,.75);
  --k-cizgi:rgba(247,242,238,.26);
  --k-vurgu:#E8D3CE;

  /* etkin palet (varsayılan: aydınlık) */
  --zemin:var(--a-zemin);
  --murekkep:var(--a-murekkep);
  --sonuk:var(--a-sonuk);
  --cizgi:var(--a-cizgi);
  --vurgu:var(--a-vurgu);
  --perde:var(--a-zemin);

  --serif:"Playfair Display", "Bodoni Moda", "Times New Roman", serif;
  --sans:"Outfit", "DM Sans", "Segoe UI", system-ui, sans-serif;

  --kenar:clamp(20px, 4.2vw, 68px);
  --yavas:cubic-bezier(.25,.46,.45,.94);   /* orijinalin ana eğrisi */
  --kolay:cubic-bezier(.215,.61,.355,1);
  --ortala:cubic-bezier(.455,.03,.515,.955);
}

/* düğmeyle seçilen koyu palet */
html[data-tema="bordo"]{
  --zemin:var(--k-zemin);
  --murekkep:var(--k-murekkep);
  --sonuk:var(--k-sonuk);
  --cizgi:var(--k-cizgi);
  --vurgu:var(--k-vurgu);
  --perde:var(--k-zemin);
}

/* KAYDIRIRKEN ÇEVİRME — iletişim bölümüne girince zemin/yazı yer değiştirir.
   2026-09-30: palet body'de DEGIL, yalniz .renk-gecis tasiyan ogelerde
   (kod.js: ekrandaki bolumler + sabit ust cubuk/imlec/ilerleme). body'deki
   degisken degisimi mirasla sayfadaki HER ogeyi (yuzlerce harf span'i)
   yeniden stil hesabina sokuyordu: 4x kisik islemcide gecis karesi
   100-156 ms. Ekran disindaki bolumler gorunmuyor; ekrana girerlerse
   kod.js onlara da sinifi verir. */
html:not([data-tema="bordo"]) body.ters .renk-gecis{
  --zemin:var(--k-zemin);
  --murekkep:var(--k-murekkep);
  --sonuk:var(--k-sonuk);
  --cizgi:var(--k-cizgi);
  --vurgu:var(--k-vurgu);
  color:var(--murekkep);
}
html[data-tema="bordo"] body.ters .renk-gecis{
  --zemin:var(--a-zemin);
  --murekkep:var(--a-murekkep);
  --sonuk:var(--a-sonuk);
  --cizgi:var(--a-cizgi);
  --vurgu:var(--a-vurgu);
  color:var(--murekkep);
}
html:not([data-tema="bordo"]) body.ters{background:var(--k-zemin)}
html[data-tema="bordo"] body.ters{background:var(--a-zemin)}

/* ---------- 2) TEMEL ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--zemin);
  color:var(--murekkep);
  font-family:var(--sans);
  font-weight:400;
  font-size:16px;
  line-height:1.55;
  overflow-x:hidden;
  transition:background .7s ease;   /* color gecisi yalniz .renk-gecis (ekrandaki bolumler) */
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
h1,h2,p,ul,figure{margin:0}
ul{list-style:none;padding:0}
::selection{background:var(--vurgu);color:var(--zemin)}

.etiket{
  display:inline-block;
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--sonuk);
  font-weight:400;
}

/* ---------- 3) AÇILIŞ PERDESİ ----------
   Orijinalin Loader'ı ölçü ölçü alındı:
     0 ms      perde kapalı, daireler ve yazı ekranın 1.2 katı aşağıda
     1000 ms   ikisi de yukarı fırlar (500 ms) — daireler farklı eğride
     1800 ms   yazı solar (400 ms), daireler yukarı savrulur (500 ms),
               zemin 200 ms gecikmeyle solar (500 ms)
     2500 ms   perde kalkar, sitenin kendi animasyonları başlar
   Eğriler: easeOutCubic / easeOutQuad / easeInCubic / easeInQuad  */
.perde{
  position:fixed; inset:0; z-index:999;
  overflow:hidden;
  pointer-events:none;
}
.perde.gitti{display:none}
.perde-zemin{
  position:absolute; inset:0;
  background:#000;              /* orijinaldeki gibi siyah */
  transition:opacity .5s var(--yavas) .2s;
}
.perde.cikis .perde-zemin{opacity:0}

.perde-daire{
  position:absolute; top:0; left:0;
  width:13vw; height:13vw;
  will-change:transform;
}
.perde-daire svg{
  display:block; width:100%; height:100%;
  transform:translate(-50%,-50%);
}
.perde-daire.koyu svg{fill:var(--bordo-acik)}
.perde-daire.acik svg{fill:var(--gul)}

/* başlangıç: ekranın altında */
.perde-daire.koyu{transform:translate(calc(50vw - 100px), 120vh)}
.perde-daire.acik{transform:translate(calc(50vw + 300px), 120vh)}

/* 1) yukarı fırlama */
.perde.girdi .perde-daire.koyu{
  transform:translate(calc(50vw + 4.17vw), calc(50vh + 1.04vw));
  transition:transform .5s cubic-bezier(.215,.61,.355,1);        /* easeOutCubic */
}
.perde.girdi .perde-daire.acik{
  transform:translate(calc(50vw - 2.6vw), calc(50vh - 5.2vw));
  transition:transform .5s cubic-bezier(.25,.46,.45,.94);        /* easeOutQuad */
}

/* 2) yukarı savrulma */
.perde.cikis .perde-daire.koyu{
  transform:translate(calc(50vw + 180px), -20vh);
  transition:transform .5s cubic-bezier(.55,.055,.675,.19);      /* easeInCubic */
}
.perde.cikis .perde-daire.acik{
  transform:translate(calc(50vw - 350px), -20vh);
  transition:transform .5s cubic-bezier(.55,.085,.68,.53);       /* easeInQuad */
}

body.tekrar-ziyaret .perde-yazi{display:none}
.perde-yazi{
  position:absolute; top:0; left:50%;
  font-family:var(--serif);
  font-size:clamp(52px,9vw,100px);
  font-weight:500;
  color:#FFFFFF;
  white-space:nowrap;
  transform:translate(-270px,120vh);
  will-change:transform;
}
.perde.girdi .perde-yazi{
  transform:translate(-270px, calc(50vh - 100px));
  transition:transform .5s cubic-bezier(.215,.61,.355,1);
}
.perde.cikis .perde-yazi{
  opacity:0;
  transition:transform .5s cubic-bezier(.215,.61,.355,1),
             opacity .4s cubic-bezier(.55,.055,.675,.19);
}

/* merkezden dışa yayılan taneler (orijinalin canvas parçacıkları) */
.perde-tanecikler{
  position:absolute; inset:0; overflow:hidden;
  transition:opacity .5s var(--yavas) .2s;
}
.perde.cikis .perde-tanecikler{opacity:0}
.perde-tanecikler i{
  position:absolute;
  width:28vmax; height:28vmax;
  margin:-14vmax 0 0 -14vmax;
  border-radius:50%;
  background:#170307;           /* siyah üstünde çok hafif bordo doku */
  transform:scale(0);
  opacity:.9;
}
.perde.girdi .perde-tanecikler i{
  transform:scale(1);
  transition:transform 1.6s cubic-bezier(.25,.46,.45,.94) var(--gec,0s);
}

@media (max-width:1023px){
  .perde-daire{width:26vw; height:26vw}
  .perde-yazi{transform:translate(-100px,120vh)}
  .perde.girdi .perde-yazi{transform:translate(-100px, calc(50vh - 20px))}
}

/* ---------- 4) ÖZEL İMLEÇ ---------- */
.imlec{position:fixed; inset:0; z-index:800; pointer-events:none; display:none}
body.imlec-var .imlec{display:block}
.imlec-nokta,.imlec-halka{
  position:absolute; top:0; left:0;
  border-radius:50%;
  transform:translate3d(-50%,-50%,0);
  will-change:transform;
}
.imlec-nokta{width:6px; height:6px; background:var(--murekkep)}
.imlec-halka{
  width:42px; height:42px;
  border:1px solid var(--cizgi);
  transition:width .35s var(--yavas), height .35s var(--yavas), border-color .35s;
}
body.imlec-buyuk .imlec-halka{width:76px; height:76px; border-color:var(--vurgu)}

/* ---------- 5) ÜST ÇUBUK + İLERLEME ---------- */
.ust{
  position:fixed; top:0; left:0; right:0; z-index:600;
  display:flex; align-items:center; justify-content:space-between;
  padding:clamp(16px,2.4vw,28px) var(--kenar);
  mix-blend-mode:normal;
}
.logo{
  font-family:var(--serif);
  font-size:15px; letter-spacing:.18em; text-transform:uppercase;
}
.menu{display:flex; gap:clamp(14px,2vw,32px)}
.menu a{
  font-size:12.5px; font-weight:400; letter-spacing:.09em; text-transform:uppercase;
  color:var(--sonuk); position:relative; padding-bottom:3px;
  transition:color .35s;
}
.menu a::after{
  content:""; position:absolute; left:0; bottom:0;
  width:100%; height:1px; background:currentColor;
  transform:scaleX(0); transform-origin:right;
  transition:transform .5s var(--yavas);
}
.menu a:hover,.menu a.etkin{color:var(--murekkep)}
.menu a:hover::after,.menu a.etkin::after{transform:scaleX(1); transform-origin:left}

.ilerleme{
  position:fixed; right:calc(var(--kenar) / 2); top:50%; z-index:600;
  transform:translateY(-50%);
  width:1px; height:min(220px,26vh);
  background:var(--cizgi);
}
.ilerleme span{
  display:block; width:100%; height:0%;
  background:var(--murekkep);
}

/* ---------- 6) KAYDIRMA GÖVDESİ ---------- */
.kaydir{width:100%}
body.yumusak .kaydir{
  position:fixed; top:0; left:0;
  width:100%;
  will-change:transform;
}

/* ---------- 7) GİRİŞ (HERO) ---------- */
.giris{
  position:relative;
  min-height:100vh;
  min-height:100svh;
  padding:clamp(96px,14vh,150px) var(--kenar) 92px;
  overflow:hidden;
  display:flex; flex-direction:column; justify-content:center;
}

/* ince ızgara çizgileri */
.izgara span{position:absolute; background:var(--cizgi)}
.izgara .dikey{top:0; bottom:0; width:1px; transform-origin:top}
.izgara .d1{left:22%}
.izgara .d2{right:26%}
.izgara .yatay{left:0; right:0; height:1px; top:78%; transform-origin:left}
body.js .izgara span{transform:scale(0)}
body.js .izgara .dikey{transform:scaleY(0)}
body.js .izgara .yatay{transform:scaleX(0)}
body.js .giris.gorunur .izgara .dikey{transform:scaleY(1); transition:transform 1.4s var(--yavas) .3s}
body.js .giris.gorunur .izgara .yatay{transform:scaleX(1); transition:transform 1.6s var(--yavas) .5s}

/* daireler */
.daireler{position:absolute; inset:0; pointer-events:none}
.daire{position:absolute; width:77px; height:77px; overflow:visible}
.daire circle{fill:none; stroke:var(--cizgi); stroke-width:1; vector-effect:non-scaling-stroke}
.dr1{top:16%; left:12%}
.dr2{top:70%; left:30%; width:120px; height:120px}
.dr3{top:26%; right:16%; width:58px; height:58px}
.dolu-daire{
  position:absolute; top:50%; left:50%;
  width:min(560px,64vw); aspect-ratio:1;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:var(--vurgu);
  opacity:.10;
}

/* dev başlık */
.dev-baslik{
  position:relative; z-index:5;
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(46px,8.2vw,132px);   /* orijinal: 7vw */
  line-height:1.22;                    /* orijinal: 112/89.6 = 1.25 */
  letter-spacing:normal;               /* orijinal: normal */
  width:min(62vw, 880px);   /* kutusu şişe fotoğrafına girmesin */
}
.dev-baslik .satir{display:block; overflow:hidden; padding-bottom:.06em}
.dev-baslik .egik{padding-left:.22em; font-style:italic; color:var(--vurgu)}

.alt-etiket{
  position:relative; z-index:5;
  margin-top:clamp(20px,3vh,34px);
  display:flex; gap:22px; flex-wrap:wrap;
  width:fit-content;          /* kutusu satır boyunca uzayıp rozete değmesin */
  font-size:12px; font-weight:400; letter-spacing:.11em; text-transform:uppercase;
  color:var(--sonuk);
}

/* şişe fotoğrafı */
.foto-kutu{
  position:absolute; z-index:4;
  right:var(--kenar); top:50%;
  transform:translateY(-50%);
  width:min(30vw,360px);
  aspect-ratio:384/425;
  overflow:hidden;
}
.foto-kutu img{width:100%; height:100%; object-fit:cover}
.foto-perde{
  position:absolute; inset:0;
  background:var(--zemin);
  transform-origin:bottom;
}
body.js .foto-perde{transform:scaleY(1)}
body.js .gorunur .foto-perde{
  transform:scaleY(0);
  transition:transform 1.2s var(--yavas) .25s;
}

/* film düğmesi */
.film-ac{
  position:absolute; z-index:6;
  left:var(--kenar); bottom:clamp(110px,18vh,170px);
  display:flex; align-items:center; gap:14px;
  font-size:11.5px; font-weight:400; letter-spacing:.11em; text-transform:uppercase;
  line-height:1.3; color:var(--sonuk);
  transition:color .35s;
}
.film-ac:hover{color:var(--murekkep)}
.film-halka{
  width:44px; height:44px; border-radius:50%;
  border:1px solid var(--cizgi);
  position:relative; flex:none;
  transition:border-color .35s, transform .5s var(--yavas);
}
.film-halka::after{
  content:""; position:absolute; top:50%; left:54%;
  transform:translate(-50%,-50%);
  border-left:7px solid var(--murekkep);
  border-top:5px solid transparent;
  border-bottom:5px solid transparent;
}
.film-ac:hover .film-halka{border-color:var(--vurgu); transform:scale(1.12)}
.film-ac.basildi .film-halka{animation:pat .1s cubic-bezier(.645,.045,.355,1)}
@keyframes pat{0%{transform:scale(1)}50%{transform:scale(1.1)}100%{transform:scale(1)}}

.sayilar{
  position:absolute; z-index:5;
  right:var(--kenar); bottom:clamp(110px,18vh,170px);
  text-align:right;
  font-size:11.5px; font-weight:400; letter-spacing:.1em; text-transform:uppercase;
  color:var(--sonuk);
  display:grid; gap:8px;
}

.giris-alt{
  position:absolute; left:0; right:0; bottom:0;
  padding:20px var(--kenar);
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  border-top:1px solid var(--cizgi);
}
.tema-dugme{
  font-size:11.5px; font-weight:400; letter-spacing:.11em; text-transform:uppercase;
  color:var(--sonuk);
  padding:9px 18px;
  border:1px solid var(--cizgi);
  border-radius:999px;
  transition:color .35s, border-color .35s, background .35s;
}
.tema-dugme:hover{color:var(--murekkep); border-color:var(--murekkep)}
.tema-dugme.etkin{color:var(--zemin); background:var(--murekkep); border-color:var(--murekkep)}
.sosyal{display:flex; gap:clamp(12px,2vw,26px)}
.sosyal a{
  font-family:var(--serif);
  font-size:15px; letter-spacing:.04em;
  color:var(--sonuk); transition:color .35s;
}
.sosyal a:hover{color:var(--vurgu)}

/* ---------- 8) NOTALAR ---------- */
.notalar{
  position:relative;
  min-height:100vh; min-height:100svh;
  padding:clamp(80px,12vh,140px) 0;
  display:flex; flex-direction:column; justify-content:center; gap:clamp(34px,6vh,70px);
  overflow:hidden;
  border-top:1px solid var(--cizgi);
}
.notalar .etiket{padding:0 var(--kenar)}
.serit-kutu{display:grid; gap:clamp(4px,1.2vh,14px)}
.serit{
  display:flex; align-items:center; gap:.4em;
  white-space:nowrap;
  font-family:var(--serif);
  font-size:clamp(38px,7.4vw,108px);
  line-height:1.2;
  letter-spacing:normal;
  will-change:transform;
}
.serit i{font-style:italic; color:var(--vurgu); opacity:.7}
.serit.ters{justify-content:flex-end}
.notalar-not{
  padding:0 var(--kenar);
  max-width:34ch;
  font-size:clamp(14px,1.5vw,17px);
  color:var(--sonuk);
}

/* ---------- 9) KOLEKSİYON ---------- */
.isler{
  position:relative;
  padding:clamp(70px,10vh,120px) var(--kenar) 0;
  border-top:1px solid var(--cizgi);
}
.is{
  position:relative;
  min-height:100vh; min-height:100svh;
  display:flex; align-items:center;
  padding:clamp(50px,8vh,90px) 0;
}
.harf{
  position:absolute; z-index:0;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  font-family:var(--serif);
  font-size:clamp(280px,42vw,620px);
  line-height:.8;
  color:var(--vurgu);
  opacity:.08;
  pointer-events:none;
  user-select:none;
  will-change:transform;
}
.is-ic{
  position:relative; z-index:2;
  width:100%;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:center;
  gap:clamp(30px,6vw,90px);
}
.is.ters .is-ic{direction:rtl}
.is.ters .is-ic > *{direction:ltr}
.is-foto{
  position:relative;
  aspect-ratio:4/5;
  overflow:hidden;
  max-height:74vh;
}
.is-foto img{width:100%; height:100%; object-fit:cover; will-change:transform}
[data-buyume]{will-change:transform}

.is-yazi h2{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(34px,4.6vw,72px);
  line-height:1.18;
  letter-spacing:normal;
  overflow:hidden;
  padding-bottom:.08em;
}
.is-yazi .tur{
  margin-top:16px;
  font-size:12px; font-weight:400; letter-spacing:.1em; text-transform:uppercase;
  color:var(--sonuk);
}
.is-yazi .kategori{
  margin-top:10px;
  font-size:11.5px; font-weight:400; letter-spacing:.12em;
  color:var(--vurgu);
}
.is-yazi .aciklama{
  margin-top:22px;
  max-width:40ch;
  font-size:clamp(15px,1.45vw,17.5px);
  line-height:1.62;
  color:var(--sonuk);
}
.incele{
  display:inline-flex; align-items:center; gap:10px;
  margin-top:30px;
  font-size:12px; font-weight:400; letter-spacing:.11em; text-transform:uppercase;
  padding-bottom:8px;
  position:relative;
  transition:gap .4s var(--yavas);
}
.incele span{color:var(--vurgu); font-size:16px; line-height:1}
.incele:hover{gap:18px}

/* ---------- 10) TÜM KOKULAR ---------- */
.tum-kutu{
  padding:clamp(70px,14vh,170px) var(--kenar);
  display:block;              /* flex olursa harfler alt alta düşüyor */
  text-align:center;
  border-top:1px solid var(--cizgi);
  /* YATAY KIRPMA (2026-09-28): data-buyut yaziyi kaydirdikca buyutuyor;
     telefonda kutudan tasip sayfayi 375 -> 439 px genisletiyordu (tarayici
     gorunumu uzaklastirip yana kaydirilabilir yapiyor). clip kaydirma kabi
     kurmaz, dikey tasmaya dokunmaz. */
  overflow-x:clip;
}
.tum{
  display:block; text-align:center; white-space:nowrap;
  font-family:var(--serif);
  font-size:clamp(42px,8.6vw,132px);
  line-height:1.18;
  letter-spacing:normal;
}
/* DİKKAT: ">" şart. ".tum span" yazılırsa harf kutuları da blok olur
   ve her harf alt alta düşer. */
.tum > span{display:block; overflow:hidden; padding-bottom:.05em}
.tum .tum-vurgu{font-style:italic; color:var(--vurgu)}

/* ---------- 11) KÜÇÜK NOT ---------- */
.tesekkur{
  padding:0 var(--kenar) clamp(70px,12vh,140px);
  display:flex; justify-content:center;
  text-align:center;
}
.tesekkur p{
  font-family:var(--serif);
  font-size:clamp(16px,2vw,25px);
  color:var(--sonuk);
  line-height:1.5;
}
.tesekkur a{color:var(--murekkep); border-bottom:1px solid var(--cizgi); padding-bottom:2px}
.tesekkur a:hover{color:var(--vurgu); border-color:var(--vurgu)}

/* ---------- 12) İLETİŞİM ---------- */
.iletisim{
  position:relative;
  min-height:100vh; min-height:100svh;
  padding:clamp(80px,12vh,140px) var(--kenar) clamp(50px,8vh,90px);
  display:flex; flex-direction:column; justify-content:center; gap:clamp(28px,5vh,56px);
  border-top:1px solid var(--cizgi);
}
.iletisim-baslik{
  font-family:var(--serif);
  font-size:clamp(40px,7.6vw,116px);
  line-height:1.2;
  letter-spacing:normal;
}
.iletisim-baslik .satir{display:block; overflow:hidden; padding-bottom:.06em}
.iletisim-baslik .egik{font-style:italic; color:var(--vurgu); padding-left:.18em}
.iletisim-alt{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:14px;
  font-size:clamp(15px,1.7vw,20px);
}
.iletisim-alt a{
  color:var(--vurgu);
  border-bottom:1px solid transparent;
  transition:border-color .4s;
}
.iletisim-alt a:hover{border-color:var(--vurgu)}
.iletisim-alt span{color:var(--sonuk); font-size:13px; letter-spacing:.14em; text-transform:uppercase}
.alt-sosyal{margin-top:auto; padding-top:24px; border-top:1px solid var(--cizgi); overflow:hidden}
.alt-sosyal a{display:inline-block}
body.js .alt-sosyal a{transform:translateY(100%); opacity:0}
body.js .iletisim.gorunur .alt-sosyal a{
  transform:translateY(0); opacity:1;
  transition:transform .5s var(--yavas), opacity .5s var(--yavas);
}
body.js .iletisim.gorunur .alt-sosyal a:nth-child(2){transition-delay:.2s}
body.js .iletisim.gorunur .alt-sosyal a:nth-child(3){transition-delay:.4s}

/* ---------- 13) FİLM KATMANI ---------- */
.film{
  position:fixed; inset:0; z-index:700;
  background:rgba(58,8,19,.94);
  display:flex; align-items:center; justify-content:center;
  padding:var(--kenar);
  opacity:0;
  transition:opacity .7s cubic-bezier(.55,.085,.68,.53);   /* kapanış: easeInQuad 700ms */
}
.film.acik{
  opacity:1;
  transition:opacity 1s var(--yavas);                      /* açılış: easeOutQuad 1000ms */
}
.film[hidden]{display:none}
.film-cerceve{width:min(1100px,100%); position:relative}
.film-cerceve img{width:100%; height:auto}
.film-not{
  margin-top:14px; text-align:center;
  font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--krem); opacity:.65;
}
.film-not code{font-family:ui-monospace,monospace; letter-spacing:0}
.film-kapat{
  position:absolute; top:var(--kenar); right:var(--kenar);
  font-size:12px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--krem);
}

/* ---------- 14) HARF, KELİME VE AÇILMA ANİMASYONLARI ---------- */

/* --- harf harf yükselme --- */
/* will-change YOK (2026-09-30, olculdu): ~270 harf/kelime span'i kalici
   birer katmandi; kaydirmada 4x kisik islemcide >33 ms kare 63-65 -> 37-44.
   Gecis sirasinda Chrome transform animasyonunu kendisi katmana aliyor. */
.harf-ic{display:inline-block}
body.js .harf-ic{
  transform:translateY(105%);
  opacity:0;
}
body.js .gorunur .harf-ic{
  transform:translateY(0);
  opacity:1;
  transition:transform .95s var(--yavas), opacity .7s ease;
  transition-delay:calc(var(--g,0) * 35ms + var(--gec,0s));
}

/* --- kelime kelime yükselme (paragraflar) --- */
.kelime-ic{display:inline-block}
body.js .kelime-ic{transform:translateY(22px); opacity:0}
body.js .gorunur .kelime-ic{
  transform:translateY(0);
  opacity:1;
  transition:transform .85s var(--yavas), opacity .6s ease;
  transition-delay:calc(var(--g,0) * 42ms + var(--gec,0s));
}

/* --- blok açılma (küçük etiketler, düğmeler) --- */
body.js .acilir{opacity:0; transform:translateY(26px)}
body.js .acilir.gorunur{
  opacity:1; transform:none;
  transition:opacity .9s ease var(--gec,0s), transform 1s var(--yavas) var(--gec,0s);
}

/* --- AÇILIŞ SIRASI: perde kalkınca ekran parça parça kurulur ---
   logo/menü .25s → başlık harfleri .15s'den itibaren → fotoğraf perdesi .5s
   → alt etiket .55s → film düğmesi .75s → sayılar .8s → alt çubuk .95s */
body.js .logo{--gec:.25s}
body.js .menu a{--gec:.35s}
body.js .giris.gorunur .dev-baslik .harf-ic{transition-delay:calc(var(--g,0) * 42ms + .15s)}
body.js .giris.gorunur .foto-perde{transition-delay:.5s}
body.js .giris .alt-etiket{--gec:.55s}
body.js .giris .film-ac{--gec:.75s}
body.js .giris .sayilar li{--gec:.8s}
body.js .giris .giris-alt{--gec:.95s}

/* renk geçişleri açılma kuralının altında ezilmesin */
body.js .logo.acilir.gorunur,
body.js .menu a.acilir.gorunur,
body.js .film-ac.acilir.gorunur{
  transition:opacity .9s ease var(--gec,0s),
             transform 1s var(--yavas) var(--gec,0s),
             color .35s ease;
}

/* daireler çizilerek gelir (JS dönüşümü ezmesin diye sadece çizgi + saydamlık) */
body.js .daire circle{stroke-dasharray:308; stroke-dashoffset:308}
body.js .gorunur .daire circle{
  stroke-dashoffset:0;
  transition:stroke-dashoffset 1.8s var(--yavas) .45s;
}
body.js .dolu-daire{transform:translate(-50%,-50%) scale(.35); opacity:0}
body.js .gorunur .dolu-daire{
  transform:translate(-50%,-50%) scale(1);
  opacity:.09;
  transition:transform 2s var(--yavas) .15s, opacity 1.4s ease .15s;
}

/* --- KOLEKSİYON kartlarında yazı sırası --- */
body.js .is .tur{--gec:.12s}
body.js .is .kategori{--gec:.22s}
body.js .is .incele{--gec:.55s}
body.js .is .aciklama{--gec:.3s}

/* --- ÜSTÜNE GELİNCE harfler zıplar --- */
body.js .gorunur .tum:hover .harf-ic,
body.js .gorunur .sosyal a:hover .harf-ic,
body.js .gorunur .iletisim-alt a:hover .harf-ic{
  transform:translateY(-10px);
  transition:transform .5s var(--yavas);
  transition-delay:calc(var(--g,0) * 22ms);
}

/* --- kaydırma hızına göre hafif eğilme (JS satır içi yazar) --- */
.sayfa{will-change:transform}

/* ---------- 15) MOBİL VE ERİŞİLEBİLİRLİK ---------- */
@media (max-width:980px){
  .giris{
    justify-content:flex-start;
    padding-top:clamp(110px,16vh,160px);
    padding-bottom:120px;
    gap:26px;
  }
  .dev-baslik{font-size:clamp(52px,15vw,96px); width:auto}
  .foto-kutu{
    position:relative; right:auto; top:auto;
    transform:none;
    width:min(72vw,300px);
    margin-top:6px;
  }
  .film-ac{position:relative; left:auto; bottom:auto; margin-top:26px}
  .sayilar{position:relative; right:auto; bottom:auto; text-align:left; margin-top:26px}
  .izgara .d2{right:12%}
  .dr2{left:auto; right:8%; top:60%}
  .giris-alt{flex-wrap:wrap; justify-content:center; gap:12px; padding:16px var(--kenar)}
  .is-ic{grid-template-columns:1fr; gap:26px}
  .is.ters .is-ic{direction:ltr}
  .is-foto{max-height:58vh}
  .is{min-height:auto; padding:clamp(40px,7vh,70px) 0}
  .isler{padding-bottom:20px}
  .harf{font-size:52vw}
  .ilerleme{display:none}

  .menu{gap:12px}
  .menu a{font-size:10px; letter-spacing:.1em}
  .logo{font-size:12px}
}

@media (max-width:520px){
  .sosyal a{font-size:13px}
  .alt-etiket{gap:12px; font-size:10px}
  .serit{font-size:clamp(34px,12vw,60px)}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important; transition-duration:.01ms !important}
  body.js .harf-ic,body.js .acilir{opacity:1; transform:none}
  body.js .foto-perde{transform:scaleY(0)}
}

/* ============================================================
   16) ORİJİNALDEN ÇIKARILAN ANİMASYON REÇETESİ
   zhenyary.com'un kendi CSS'i okunarak birebir alınan davranışlar.
   Eğri: cubic-bezier(.25,.46,.45,.94) — sitenin ana eğrisi.
   ============================================================ */

/* --- A) DEV BAŞLIK: iki yarım, zıt yönlerden 2 sn'de kayar --- */
.dev-baslik .yarim{
  display:block;
  overflow:hidden;
  padding-bottom:.06em;
}
.dev-baslik .yarim > span{display:block}
body.js .dev-baslik .sag > span{transform:translateX(100%)}
body.js .dev-baslik .sol > span{transform:translateX(-100%)}
body.js .giris.gorunur .dev-baslik .yarim > span{
  transform:translateX(0);
  transition:transform 2s var(--yavas) .15s;
}

/* --- B) İMZA: KOKU BULUTU ---
   Markanın imzası. Üç katman:
     gövde    — nefes alan, biçim değiştiren (morph) bulanık kütle
     halkalar — zıt yönlerde çok yavaş dönen ince eliptik konturlar
     çekirdek — ortada küçük, daha koyu, yavaşça atan nokta
   Hepsi CSS; görsel yok, dosya yok. */
.leke{
  position:absolute; z-index:0;
  top:50%; left:50%;
  width:min(46vw,540px); aspect-ratio:1;
  transform:translate(-50%,-50%);
  pointer-events:none;
  opacity:0;
}
body.js .giris.gorunur .leke{opacity:1; transition:opacity 2s var(--yavas) .3s}

.leke span{position:absolute; inset:0; display:block}

.leke-govde{
  background:
    radial-gradient(closest-side at 42% 38%, var(--vurgu) 0%, transparent 72%),
    radial-gradient(closest-side at 62% 64%, var(--gul) 0%, transparent 70%);
  opacity:.30;
  filter:blur(34px);
  border-radius:58% 42% 51% 49% / 46% 54% 46% 54%;
  animation:bulut 22s ease-in-out infinite, salin 40s linear infinite;
}
.leke-halka{
  border:1px solid var(--vurgu);
  opacity:.22;
  border-radius:50%;
}
.leke-halka.h1{
  inset:9%;
  border-radius:54% 46% 49% 51% / 48% 52% 48% 52%;
  animation:salin 34s linear infinite, nefes 13s ease-in-out infinite;
}
.leke-halka.h2{
  inset:20%;
  opacity:.14;
  border-radius:47% 53% 55% 45% / 52% 47% 53% 48%;
  animation:salin-ters 46s linear infinite, nefes 17s ease-in-out infinite reverse;
}
.leke-cekirdek{
  inset:41%;
  border-radius:50%;
  background:var(--vurgu);
  opacity:.16;
  filter:blur(14px);
  animation:nefes 9s ease-in-out infinite;
}

@keyframes bulut{
  0%   {border-radius:58% 42% 51% 49% / 46% 54% 46% 54%; transform:translate(-2%,1%) scale(1)}
  33%  {border-radius:45% 55% 43% 57% / 57% 44% 56% 43%; transform:translate(3%,-2%) scale(1.05)}
  66%  {border-radius:52% 48% 59% 41% / 41% 59% 41% 59%; transform:translate(-1%,3%) scale(.97)}
  100% {border-radius:58% 42% 51% 49% / 46% 54% 46% 54%; transform:translate(-2%,1%) scale(1)}
}
@keyframes salin{to{rotate:360deg}}
@keyframes salin-ters{to{rotate:-360deg}}
@keyframes nefes{
  0%,100%{scale:1}
  50%    {scale:1.06}
}

/* --- C) DÖNEN DAİRESEL YAZI ROZETİ (turn keyframes) --- */
/* rozet, şişe fotoğrafının sol alt köşesine biner
   (foto: sağda, genişlik min(30vw,360px), oran 768/850 → yükseklik = 1.107×genişlik) */
.rozet{
  position:absolute; z-index:6;
  right:calc(var(--kenar) + min(30vw,360px) - 66px);
  top:calc(50% + min(30vw,360px) * 0.5535 - 66px);
  width:132px; height:132px;
  pointer-events:none;
}
/* Donme <svg>'de degil kapsayicida: Chrome <svg> ogesinin transform
   animasyonunu her karede YENIDEN YERLESTIRIYORDU (telefon kipi, bosta:
   yerlesim 179/sn -> 2/sn). Ortadaki nokta kendi merkezinde doner, gorunmez. */
.rozet{animation:don 24s linear infinite}
.rozet svg{width:100%; height:100%}
.rozet text{
  font-family:var(--sans);
  font-size:17px; letter-spacing:.13em;   /* 200'lük viewBox'ta; ekranda ~11px */
  fill:var(--sonuk);
}
.rozet-ic{
  position:absolute; top:50%; left:50%;
  width:7px; height:7px; margin:-3.5px 0 0 -3.5px;
  border-radius:50%;
  background:var(--vurgu);
}
@keyframes don{to{transform:rotate(1turn)}}
body.js .rozet{opacity:0}
body.js .giris.gorunur .rozet{opacity:1; transition:opacity 1s var(--yavas) 1.1s}

/* --- D) "&" İKİ PARÇA BİRBİRİNE KAPANIR (.and reçetesi) --- */
.serit .ve{
  display:inline-block; position:relative;
  width:1.15em; height:1em;
  font-style:italic; color:var(--vurgu);
  vertical-align:baseline;
}
.serit .ve span{
  position:absolute; left:0; top:0;
  width:100%; text-align:center;
  opacity:.75;
}
body.js .ve span{opacity:0}
body.js .ve span:first-child{transform:translateX(60%)}
body.js .ve span:last-child{transform:translateX(-60%)}
body.js .gorunur .ve span{
  opacity:.7; transform:translateX(0);
  transition:transform .5s var(--yavas) .5s, opacity .7s var(--yavas) .5s;
}

/* --- E) ETİKET ALTINDA SOLDAN SÜZÜLEN ÇİZGİ (.underline reçetesi) --- */
.cizgili{position:relative; padding-bottom:9px; overflow:hidden}
.cizgili::before{
  content:""; position:absolute; left:0; bottom:0;
  width:100%; height:2px;
  background:var(--vurgu);
}
body.js .cizgili::before{transform:translateX(-150%)}
body.js .gorunur .cizgili::before,
body.js .cizgili.gorunur::before{   /* etiketin kendisi de açılabilir olabilir */
  transform:translateX(0);
  transition:transform .5s var(--yavas) .5s;
}

/* --- F) DEV BAĞLANTI ALT ÇİZGİSİ + ÜSTÜNE GELİNCE GERİ ÇEKİLİP
         SOLDAN YENİDEN ÇİZİLME (link keyframes) --- */
.tum{position:relative}
.tum::after,
.incele::after{
  content:""; position:absolute; left:0; bottom:0;
  width:100%; height:3px;
  background:var(--murekkep);
  transform:scaleX(1); transform-origin:0 0;   /* JS yoksa çizgi hazır durur */
}
.incele::after{height:1px; background:var(--cizgi)}
body.js .tum::after,
body.js .incele::after{transform:scaleX(0)}    /* JS varsa gizle, açılışta çizilsin */
body.js .gorunur .tum::after,
body.js .gorunur .incele::after{
  transform:scaleX(1);
  transition:transform .7s var(--yavas) .35s;
}
@media (hover:hover){
  .tum:hover::after{animation:cizgi 1s var(--yavas)}
  .incele:hover::after{animation:cizgi 1s var(--yavas); background:var(--murekkep)}
}
@keyframes cizgi{
  0%,0.1% {transform:scaleX(1); transform-origin:100% 0}
  50%     {transform:scaleX(0); transform-origin:100% 0}
  50.1%   {transform:scaleX(0); transform-origin:0 0}
  100%    {transform:scaleX(1); transform-origin:0 0}
}

/* --- G) İLETİŞİMDE SIRAYLA GİREN ÜÇ OK (.arrow reçetesi) --- */
.oklar{display:flex; align-items:center; gap:clamp(10px,1.6vw,24px)}
.ok{
  width:clamp(44px,5.4vw,78px); height:auto;
  color:var(--vurgu);
}
body.js .ok{opacity:0; transform:translateX(-3vw)}
body.js .iletisim.gorunur .ok{
  opacity:1; transform:translateX(0);
  transition:transform .5s var(--yavas), opacity .5s var(--yavas);
}
body.js .iletisim.gorunur .ok:nth-child(2){transition-delay:.2s}
body.js .iletisim.gorunur .ok:nth-child(3){transition-delay:.3s}

/* --- H) ÜST ÇUBUK KAYDIRINCA TOPARLANIR (nav.sml reçetesi) --- */
.ust{transition:padding .4s var(--yavas)}
.ust > *{position:relative; z-index:1}
.ust::before{
  content:""; position:absolute; inset:0;
  background:var(--zemin);
  opacity:0;
  transition:opacity .4s var(--yavas);
}
body.kucuk-ust .ust{padding-top:12px; padding-bottom:12px}
body.kucuk-ust .ust::before{opacity:.94}
.logo{transition:transform .4s var(--yavas), font-size .4s var(--yavas)}
body.kucuk-ust .logo{font-size:13px}

/* --- I) ŞİŞE FOTOĞRAFI: ÜSTÜNE GELİNCE İKİNCİ KATMAN AÇILIR
         (.img-front + .hover reçetesi) --- */
.foto-on{
  position:absolute; inset:0; overflow:hidden;
  clip-path:inset(100% 0 0 0);
  transition:clip-path 1s var(--yavas);
}
.foto-on img{width:100%; height:100%; object-fit:cover}
.foto-on::after{
  content:""; position:absolute; inset:0;
  background:var(--vurgu);
  mix-blend-mode:multiply;
  opacity:.22;
}
@media (hover:hover){
  .foto-kutu:hover .foto-on{clip-path:inset(0 0 0 0)}
}

/* --- J) İMLEÇ: BASINCA KÜÇÜLÜR (cursor-enter reçetesi) --- */
body.imlec-kucuk .imlec-halka{width:26px; height:26px; border-color:var(--vurgu)}

/* --- mobil düzeltmeler --- */
@media (max-width:980px){
  .rozet{
    position:relative; left:auto; right:auto; top:auto; bottom:auto;
    margin-top:26px; width:96px; height:96px;
  }
  .leke::after{width:74vw; filter:blur(38px)}
  .oklar{gap:10px}
  .ok{width:clamp(38px,11vw,60px)}
}

/* --- SERİF BAŞLIKLARIN GÖVDESİ ---
   Bodoni Moda değişken bir font: 130 px'te en ince "display" kesimini
   seçip soluk görünüyordu. Optik boyutu 32'ye sabitleyip ağırlığı 500
   yapınca gövde dolgunlaşıyor, zarafeti bozulmuyor. */
.dev-baslik,
.serit,
.is-yazi h2,
.tum,
.iletisim-baslik,
.perde-yazi,
.tesekkur p,
.sosyal a,
.logo,
.harf{
  font-weight:600;
}

/* ============================================================
   17) İLETİŞİM HARİTASI
   Konum henüz girilmedi — çizim yer tutucu.
   Gerçek adres gelince index.html'deki <figure class="harita">
   içeriği Google Maps iframe'i ile değişecek; kutu ve animasyon aynı kalır.
   ============================================================ */
.iletisim-ic{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  align-items:center;
  gap:clamp(28px,5vw,72px);
  width:100%;
}
.iletisim-yazi{display:flex; flex-direction:column; gap:clamp(24px,4vh,44px)}

/* iki sütuna bölününce başlık biraz küçülür */
.iletisim .iletisim-baslik{font-size:clamp(34px,5.6vw,88px)}

.harita{margin:0}

/* etiket haritanın DIŞINDA, üstünde — Google'ın kendi bağlantılarını örtmesin */
.harita-etiket{
  display:inline-block;
  margin:0 0 10px;
  padding:7px 13px;
  border:1px solid var(--cizgi);
  border-radius:999px;
  font-size:10.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--sonuk);
}

.harita-kutu{
  position:relative;
  aspect-ratio:4/3;
  overflow:hidden;
  border:1px solid var(--cizgi);
  background:var(--zemin);
}
.harita-kutu iframe{
  display:block;
  width:100%; height:100%;
  border:0;
  /* Google'ın canlı renkleri sayfanın krem-bordo paletiyle çarpışmasın diye
     çok hafif bir yumuşatma; haritanın kendisi tam çalışır durumda. */
  filter:grayscale(.22) sepia(.10) saturate(.92) contrast(1.02);
}

/* Kalkan: sayfa kaydırılırken imleç haritaya girince kaydırma kesilmesin.
   Haritaya bir kez tıklayınca kalkan kalkar, harita normal çalışır. */
.harita-kalkan{position:absolute; inset:0; z-index:2; cursor:pointer}
.harita-kutu.etkin .harita-kalkan{display:none}

/* haritanın açılışı: perde yukarı çekilir */
.harita-kutu::after{
  content:"";
  position:absolute; inset:0; z-index:4;
  background:var(--zemin);
  transform-origin:top;
  pointer-events:none;
}
body.js .iletisim.gorunur .harita-kutu::after{
  transform:scaleY(0);
  transition:transform 1s var(--yavas) .3s;
}


@media (max-width:980px){
  .iletisim-ic{grid-template-columns:1fr; gap:34px}
  .harita{aspect-ratio:16/11}
  .iletisim .iletisim-baslik{font-size:clamp(34px,11vw,72px)}
}

/* Ölçüm anahtarı: ?deney=sade — dekoratif lekeyi tamamen kaldırır.
   Neyin ne kadar yediğini ayırmak için; normal ziyarette etkisi yok. */
body.deney-sade .leke{display:none !important}
body.deney-durgun *{animation:none !important; transition:none !important}


/* ============================================================
   TELEFONDA DEKORATİF LEKE (2026-09-11, ölçüldü)

   .leke, girişin arkasında duran süs: dört katman, ikisi blur'lu,
   hepsi sonsuz animasyonlu. Telefonda kaydırma boyunca bu büyük
   bulanık yüzey sürekli yeniden boyanıyor.

   Ölçüm (375x812, işlemci 6 kat kısık, kaydırırken):
     leke açık    58.8 fps · uzun görev 10
     leke kapalı  69.7 fps · uzun görev  6

   ÖNEMLİ: bu blok dosyanın SONUNDA. İlk denemede kuralları
   yukarıdaki @media (max-width:980px) bloğuna koymuştum; o blok
   .leke-govde'nin taban kuralından ÖNCE geliyor, aynı özgüllükte
   sonraki kazandığı için hiç uygulanmadı ve ölçüm değişmedi.

   Süs tamamen kapatılmıyor: şekil sabit, bulanıklık yok, yalnız
   derlenebilir dönme/ölçek sürüyor. Masaüstü etkilenmiyor.
   ============================================================ */
@media (max-width:980px){
  .leke-govde{ animation:none; filter:none; opacity:.22 }
  .leke-cekirdek{ animation:none; filter:none }
  .leke-halka.h1,.leke-halka.h2{ animation:none }
}

/* ============================================================
   17) TELEFONDA OKUNABİLİRLİK VE DOKUNMA (2026-09-12)

   Arda: "mobilden bakanlar için de güzel bir şekilde boyutlarını
   ayarla, mobil içinde güzelleştir."

   ÖLÇÜLDÜ (arac/mobil-olcu.cjs, 375x812):
     menü yazıları  10px      dokunma hedefi 55x19
     tema düğmeleri 11.5px    38px yüksek
     harita etiketi 10.5px
   Yukarıdaki 980px bloğu menüyü 12.5px'ten 10px'e DÜŞÜRÜYORDU;
   masaüstünde okunan yazı telefonda okunmaz hale geliyordu.

   PC'YE DOKUNULMUYOR: hepsi 980px altında. Masaüstü ölçüleri
   (12.5px menü, 15px logo) olduğu gibi.

   Harf aralığı kısılıyor (.1em -> .04em) çünkü 375px'te dört menü
   maddesi + logo tek satıra ancak sığıyor; ölçüldü, taşma yok.
   ============================================================ */
@media (max-width:980px){
  .menu{gap:11px}
  .menu a{
    font-size:12px; letter-spacing:.04em;
    /* Dikey dolgu: 19px'lik şerit yerine parmakla basılır hedef. */
    padding:13px 0 13px;
  }
  .logo{font-size:12.5px; letter-spacing:.12em; padding:11px 0}
  .ust{padding-top:6px; padding-bottom:6px}

  .tema-dugme{
    font-size:12.5px;
    padding:12px 18px;      /* 38px -> 44px */
  }
  .harita-etiket{font-size:12px}
  /* Alt bilgi ve sosyal bağlantılar da parmak ölçüsüne çıkıyor. */
  .sosyal a{padding:10px 2px}
  .alt-etiket{font-size:12px}
  /* Alt bilgideki imza bagi 105x24'tu; dolguyla parmak olcusune cikiyor. */
  .tesekkur a{display:inline-block; padding:11px 0}
}

/* TERS RENGE GECIS yalniz ekrandaki bolumlerde (kod.js "renk-gecis",
   2026-09-30). body'deki "color .7s" butun sayfayi her karede yeniden
   stil hesabina sokuyordu. .ust'un kendi padding gecisi korunuyor. */
.renk-gecis{transition:color .7s ease}
.ust.renk-gecis{transition:padding .4s var(--yavas), color .7s ease}