/* ana-sayfa.css — Kimyahane Coffeehouse özel ana sayfası, taslak C.
   B'nin koyu görünümü (kömür zemin, metalik çelik grisi vurgu, Big Shoulders + Archivo) ile
   A'nın deneyi: kafein molekülü, cam huni, erlenmayer; çizgiler cam renginde.
   Renkler bu sayfaya özeldir; tema hangisi olursa olsun aynı kalır.
   /hakkinda sayfası da bu dosyayı kullanır (değişkenler, yazı tipleri, düğmeler).
   Sözleşme: TEMA.md → "Müşteriye özel ana sayfa". */

@font-face {
  font-family: "Big Shoulders Display";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("fonts/big-shoulders-display-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, 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;
}

@font-face {
  font-family: "Big Shoulders Display";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("fonts/big-shoulders-display-latin-wght-normal.woff2") format("woff2");
  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: "Archivo";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  src: url("fonts/archivo-latin-ext-standard-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, 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;
}

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  src: url("fonts/archivo-latin-standard-normal.woff2") format("woff2");
  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;
}

.ana-c {
  --zemin: #0f100f;
  --yuzey: #191b19;
  --metin: #ede8de;
  --soluk: #a59f93;
  --celik: #b6bbc0;
  --celik-koyu: #121416;
  /* Fırçalanmış çelik: üstte açık, ortada asıl renk, altta koyu */
  --celik-doku: linear-gradient(180deg, #dfe2e5 0%, #b9bec3 46%, #9a9fa4 54%, #b3b8bd 100%);
  --cizgi: #2c2f2c;
  --cam: #cdd6d2;
  --metal: #8a857b;
  --baslik: "Big Shoulders Display", "Archivo", system-ui, sans-serif;
  --govde: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --kenar: 1.5rem;

  min-height: 100vh;
  background: var(--zemin) url("ana/doku.png");
  color: var(--metin);
  color-scheme: dark;
  font-family: var(--govde);
  font-size: 16px;
  line-height: 1.5;
}

.ana-c a {
  color: inherit;
}

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

.ana-c .ana-dugme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 1rem;
  border: 1px solid var(--cizgi);
  border-radius: 3px;
  background: var(--yuzey);
  color: var(--metin);
  font-size: 0.8rem;
  font-stretch: 85%;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-decoration: none;
  text-transform: uppercase;
}

.ana-c .ana-dugme--menu,
.ana-c .ana-dugme--hakkinda {
  justify-content: space-between;
  gap: 0.5rem;
  min-height: 3.5rem;
  padding: 0 1rem;
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.11em;
}

/* Çok dar ekranlarda iki düğmenin yazısı tek satırda kalsın */
@media (max-width: 22.5rem) {
  .ana-c .ana-dugme--menu,
  .ana-c .ana-dugme--hakkinda {
    padding: 0 0.6rem;
    font-size: 0.74rem;
    letter-spacing: 0.06em;
  }
}

/* Asıl düğme: metal levha, ince parlak üst kenar */
.ana-c .ana-dugme--menu {
  border-color: #8d9297;
  background: var(--celik-doku);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.55), 0 1px 0 rgb(0 0 0 / 0.6);
  color: var(--celik-koyu);
}

/* İkincil düğme: çelik çerçeve, koyu zemin */
.ana-c .ana-dugme--hakkinda {
  justify-content: center;
  border-color: var(--celik);
  background: rgb(15 16 15 / 0.7);
  color: var(--celik);
}

.ana-c .dugme-ok {
  font-size: 1.35rem;
  letter-spacing: 0;
  transition: transform 0.2s ease;
}

.ana-c .ana-dugme--menu:hover .dugme-ok,
.ana-c .ana-dugme--menu:focus-visible .dugme-ok {
  transform: translateX(4px);
}

.ana-c .ana-dugme:focus-visible {
  outline: 2px solid var(--celik);
  outline-offset: 3px;
}


/* ---------------------------------------------------------------- Sahne */

.ana-c .deney {
  position: relative;
  height: 420vh;
  height: 420svh;
}

/* lvh: sahne, tarayıcı çubuğu gizliyken oluşan uzun ekran boyunda sabittir. Kaydırırken çubuk
   gizlenip açıldıkça çizim büyüyüp küçülmez (dvh ile değişiyordu), sonda düğmelerin altında boşluk
   kalmaz (svh ile kalıyordu). Çubuk açıkken sahnenin altı çubuğun arkasında kalır; sayfanın sonunda
   sahne yukarı itilir, düğmeler yine görünür. */
.ana-c .deney-sahne {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100lvh;
  overflow: hidden;
}

/* --son-alan: sahnenin altında düğmeler için ayrılan yer (takip satırı varsa daha çok). */
.ana-c {
  --son-alan: 4.5rem;
}

/* Yalnızca sahne kurulduysa: kurulmadıysa (hareket azaltılmış) sondaki takip satırı gösterilmez. */
.ana-c.sahne-hazir.takip-var {
  --son-alan: 8rem;
}

.ana-c .sahne {
  position: absolute;
  inset: 0 0 calc(max(1.25rem, 3vh) + var(--son-alan));
  inset: 0 0 calc(max(1.25rem, 3svh) + var(--son-alan));
  width: 100%;
  height: calc(100% - max(1.25rem, 3vh) - var(--son-alan));
  height: calc(100% - max(1.25rem, 3svh) - var(--son-alan));
  /* Kahvenin arkasındaki ışıltı tezgâh çizgisinde kesilmesin, düğmelerin arkasına yayılsın */
  overflow: visible;
}

/* Sahnenin altı (tezgâh) düğmelerin üstünde biter; düğmelerle iç içe girmez.
   viewBox'ın alt kenarı tezgâhın hemen altıdır, hizalama alttadır (xMidYMax). */

.ana-c .ana-kapak {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 5;
  height: 100vh;
  height: 100svh;
  max-width: 30rem;
  margin: 0 auto;
  padding: max(2.75rem, 5vh) var(--kenar) 0;
  padding: max(2.75rem, 5svh) var(--kenar) 0;
  text-align: center;
}

.ana-c .dil-secimi {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
}

.ana-c .ana-logo {
  display: block;
  width: auto;
  max-width: 60%;
  height: 3.5rem;
  margin: 0 auto 1rem;
  object-fit: contain;
}

.ana-c .ana-isletme-adi {
  margin: 0;
  font-family: var(--baslik);
  font-weight: 800;
  line-height: 0.82;
  text-transform: uppercase;
}

.ana-c .ad-ilk {
  display: block;
  font-size: clamp(4rem, 22.5vw, 8.5rem);
  letter-spacing: 0.005em;
}

.ana-c .ad-kalan {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  margin-top: 0.9rem;
  color: var(--celik);
  background: var(--celik-doku);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-family: var(--govde);
  font-size: 0.8rem;
  font-stretch: 85%;
  font-weight: 600;
  letter-spacing: 0.42em;
  line-height: 1.3;
}

/* Adın iki yanında kısa çizgi: cihaz plakası gibi */
.ana-c .ad-kalan::before,
.ana-c .ad-kalan::after {
  content: "";
  width: 1.75rem;
  height: 1px;
  background: var(--celik);
  opacity: 0.6;
}

.ana-c .ana-slogan {
  margin: 1rem auto 0;
  max-width: 22rem;
  color: var(--soluk);
  font-size: 1.05rem;
  quotes: "\201C" "\201D";
}

/* Slogan tırnak içinde gösterilir (panelde tırnaksız yazılır) */
.ana-c .ana-slogan::before {
  content: open-quote;
}

.ana-c .ana-slogan::after {
  content: close-quote;
}


/* "Bizi takip et": ilk ekranın altında, iki düğme yan yana (simge + ad). Kapakla birlikte solar. */
.ana-c .ana-takip {
  position: absolute;
  right: var(--kenar);
  bottom: 5.5rem;
  left: var(--kenar);
  display: grid;
  gap: 0.75rem;
  max-width: 26rem;
  margin: 0 auto;
}

.ana-c .ana-takip-baslik {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  margin: 0;
  color: var(--soluk);
  font-size: 0.72rem;
  font-stretch: 85%;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

.ana-c .ana-takip-baslik::before,
.ana-c .ana-takip-baslik::after {
  content: "";
  width: 1.5rem;
  height: 1px;
  background: var(--cizgi);
}

.ana-c .ana-takip-liste {
  display: flex;
  gap: 0.5rem;
}

.ana-c .ana-takip-dugme {
  display: inline-flex;
  flex: 1 1 0;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 3rem;
  padding: 0 0.75rem;
  border: 1px solid var(--cizgi);
  border-radius: 3px;
  background: rgb(15 16 15 / 0.7);
  color: var(--metin);
  font-size: 0.8rem;
  font-stretch: 85%;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-decoration: none;
  text-transform: uppercase;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.ana-c .ana-takip-dugme:hover,
.ana-c .ana-takip-dugme:focus-visible {
  border-color: var(--celik);
  color: #ffffff;
}

.ana-c .ana-takip-dugme:focus-visible {
  outline: 2px solid var(--celik);
  outline-offset: 3px;
}

.ana-c .takip-simge {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  color: var(--celik);
}

/* Adın altında: "Menüyü görmek için kaydır" + küçük ok */
.ana-c .ana-kaydir-yazi {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  margin: 1.1rem 0 0;
  color: var(--soluk);
  font-size: 0.72rem;
  font-stretch: 85%;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.ana-c .kaydir-ok {
  color: var(--celik);
  font-size: 0.95rem;
  letter-spacing: 0;
}

/* Aşağı kaydır işareti: ince çizgi üstünde kayan nokta */
.ana-c .kaydir-isaret {
  position: absolute;
  bottom: 1.75rem;
  left: 50%;
  display: none;
  width: 1px;
  height: 2.25rem;
  background: rgb(237 232 222 / 0.25);
}

/* Sahnenin çizgileri: cam rengi */
.ana-c .sahne .cizim,
.ana-c .sahne .bag,
.ana-c .sahne .buhar path,
.ana-c .sahne .olcek path {
  fill: none;
  stroke: var(--cam);
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ana-c .sahne .cizim {
  stroke-width: 1.4;
  opacity: 0.85;
}

.ana-c .sahne .ayak .cizim {
  stroke: var(--metal);
}

.ana-c .sahne .cam-ic {
  stroke-width: 0.8;
  opacity: 0.3;
}

.ana-c .sahne .parlama {
  stroke: #ffffff;
  stroke-width: 2;
  opacity: 0.22;
}

.ana-c .sahne .filtre {
  stroke: var(--soluk);
  stroke-width: 0.9;
  opacity: 0.8;
}

.ana-c .sahne .tarama {
  fill: none;
  stroke: var(--metal);
  stroke-width: 0.8;
  opacity: 0.45;
}

.ana-c .sahne .tezgah .cizim {
  stroke: var(--metal);
}

.ana-c .sahne .olcek path {
  stroke: var(--soluk);
  stroke-width: 1;
}

.ana-c .sahne .olcek text {
  fill: var(--soluk);
  font-family: var(--govde);
  font-size: 9px;
  font-stretch: 85%;
  font-weight: 500;
  text-anchor: end;
  dominant-baseline: central;
  transform: translateX(-3px);
}

.ana-c .sahne .olcek--acik path {
  stroke: rgb(226 229 232 / 0.8);
}

.ana-c .sahne .olcek--acik text {
  fill: rgb(226 229 232 / 0.92);
}

.ana-c .sahne .sivi-govde {
  fill: url(#kahve-isik);
}

.ana-c .sahne .sivi-cizgi {
  stroke: rgb(255 255 255 / 0.05);
  stroke-width: 1;
}

.ana-c .sahne .sivi-yuzey {
  fill: rgb(190 160 132 / 0.75);
}

.ana-c .sahne .telve {
  fill: #2b170a;
  stroke: rgb(190 160 132 / 0.3);
  stroke-width: 0.8;
  transform-box: view-box;
  transform-origin: 195px 412px;
}

.ana-c .sahne .damla {
  fill: #8a5a36;
  opacity: 0;
}

.ana-c .sahne .buhar path {
  stroke: var(--metin);
  stroke-width: 1.4;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  opacity: 0.45;
}

.ana-c .sahne .isilti {
  opacity: 0;
}

.ana-c .sahne .bag {
  stroke: var(--metin);
  stroke-width: 2.3;
}

.ana-c .sahne .bag--cift {
  stroke-width: 1.8;
}

.ana-c .sahne .atom {
  fill: var(--celik);
  font-family: var(--govde);
  font-size: 21px;
  font-stretch: 90%;
  font-weight: 600;
  text-anchor: middle;
  dominant-baseline: central;
}

.ana-c .sahne .atom-nokta {
  fill: var(--metin);
  opacity: 0;
}

.ana-c .sahne .atom-nokta[r="4.5"] {
  fill: var(--celik);
}

/* Kapanış molekülü: JS çizer; JS yoksa görünmez */
.ana-c .molekul--son {
  opacity: 0;
}

.ana-c .molekul--son .bag {
  stroke: var(--celik);
}

/* Deneyin sonunda beliren iki düğme, yan yana: Hakkımızda | Menüyü gör; altında Instagram | TikTok */
.ana-c .sahne-son {
  position: absolute;
  bottom: max(1.25rem, 3vh);
  bottom: max(1.25rem, 3svh);
  left: 50%;
  z-index: 6;
  display: grid;
  gap: 0.5rem;
  width: min(100% - 2 * var(--kenar), 26rem);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 12px);
}

.ana-c .sahne-son-dugmeler {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}

/* Sondaki takip satırı: ilk ekrandaki düğmelerin aynısı, başlıksız (tema.css .takip) */
.ana-c .sahne-son .takip {
  max-width: none;
  margin: 0;
}

.ana-c .sahne-son .takip-baslik,
.ana-c:not(.sahne-hazir) .sahne-son .takip {
  display: none;
}

.ana-c .sahne-son.gorunur {
  visibility: visible;
}

/* Sahne kurulmadıysa (JS yok ya da hareket azaltılmış) düğmeler ilk ekranın altında durur. */
.ana-c:not(.sahne-hazir) .sahne-son {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%);
}

/* JS çalışmıyorsa veya hareket azaltılmışsa sahne kurulmaz: yalnızca ilk ekran
   (ad, düğme, molekül) sabit durur; düzenek gizlenir. */
.ana-c:not(.sahne-hazir) :is(.isilti, .tezgah, .aparat, .huni-grup, .sivi, .buhar, .damlalar, .atomlar) {
  visibility: hidden;
}

.ana-c:not(.sahne-hazir) .deney,
.ana-c.hareketsiz .deney {
  height: auto;
}

.ana-c:not(.sahne-hazir) .deney-sahne,
.ana-c.hareketsiz .deney-sahne {
  position: relative;
  height: 100vh;
  height: 100svh;
}

@media (prefers-reduced-motion: no-preference) {
  .ana-c .ana-isletme-adi,
  .ana-c .ana-slogan {
    animation: yuksel 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }

  .ana-c .ana-slogan {
    animation-delay: 0.08s;
  }

  .ana-c .kaydir-isaret {
    display: block;
  }

  .ana-c .ana-kaydir-yazi {
    animation: yuksel 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) 0.24s both;
  }

  .ana-c .kaydir-ok {
    animation: ok-sal 1.8s ease-in-out infinite;
  }

  .ana-c .kaydir-isaret::after {
    content: "";
    position: absolute;
    top: 0;
    left: -2.5px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--celik);
    animation: kaydir 1.8s ease-in-out infinite;
  }

  .ana-c .molekul--kapak > .bag {
    stroke-dasharray: 1;
    animation: ciz 0.42s cubic-bezier(0.3, 0, 0.2, 1) both;
    animation-delay: calc(0.45s + var(--i) * 0.075s);
  }

  .ana-c .molekul--kapak > .atom {
    animation: belir 0.5s ease both;
    animation-delay: calc(0.45s + var(--i) * 0.075s);
  }
}

@keyframes yuksel {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
}

@keyframes ok-sal {
  0%,
  100% {
    transform: translateY(-2px);
  }
  50% {
    transform: translateY(3px);
  }
}

@keyframes belir {
  from {
    opacity: 0;
  }
}

/* Yuvarlak uçlu çizgi boyunun sıfır olduğu anda nokta bırakmasın diye başta görünmez. */
@keyframes ciz {
  0% {
    stroke-dashoffset: 1;
    opacity: 0;
  }
  1% {
    opacity: 1;
  }
  100% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
}

@keyframes kaydir {
  0% {
    transform: translateY(0);
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  100% {
    transform: translateY(2.1rem);
    opacity: 0;
  }
}


/* Molekülde çizim sırası (bağlar, sonra atom harfleri) */
.ana-c .molekul > :nth-child(1) { --i: 0; }
.ana-c .molekul > :nth-child(2) { --i: 1; }
.ana-c .molekul > :nth-child(3) { --i: 2; }
.ana-c .molekul > :nth-child(4) { --i: 3; }
.ana-c .molekul > :nth-child(5) { --i: 4; }
.ana-c .molekul > :nth-child(6) { --i: 5; }
.ana-c .molekul > :nth-child(7) { --i: 6; }
.ana-c .molekul > :nth-child(8) { --i: 7; }
.ana-c .molekul > :nth-child(9) { --i: 8; }
.ana-c .molekul > :nth-child(10) { --i: 9; }
.ana-c .molekul > :nth-child(11) { --i: 10; }
.ana-c .molekul > :nth-child(12) { --i: 11; }
.ana-c .molekul > :nth-child(13) { --i: 12; }
.ana-c .molekul > :nth-child(14) { --i: 13; }
.ana-c .molekul > :nth-child(15) { --i: 14; }
.ana-c .molekul > :nth-child(16) { --i: 15; }
.ana-c .molekul > :nth-child(17) { --i: 16; }
.ana-c .molekul > :nth-child(18) { --i: 17; }
.ana-c .molekul > :nth-child(19) { --i: 18; }
.ana-c .molekul > :nth-child(20) { --i: 1; }
.ana-c .molekul > :nth-child(21) { --i: 3; }
.ana-c .molekul > :nth-child(22) { --i: 7; }
.ana-c .molekul > :nth-child(23) { --i: 9; }
.ana-c .molekul > :nth-child(24) { --i: 11; }
.ana-c .molekul > :nth-child(25) { --i: 12; }