/* ==========================================================================
   TempoCandy — hero slider
   Kaynak: tempo-slider-claude/app/globals.css (Next.js paketi)

   Uyarlama notları — tasarım birebir korundu, yalnızca izolasyon yapıldı:
   · Tüm sınıflar `ts-` ön ekiyle yeniden adlandırıldı; sitenin mevcut
     .hero / .eyebrow / .brand / .slide sınıflarıyla çakışmıyor.
   · Paketteki global sıfırlamalar (body, *, a, button) alınmadı; sitenin
     kendi temeli bozulmasın diye.
   · Değişkenler :root yerine .ts-hero altına alındı.
   · @keyframes adları da ön ekli.
   · Tailwind import'u düşürüldü (sitede Tailwind yok, stil de kullanmıyor).
   · min-height, sitenin yapışkan başlığı kadar kısaltıldı (--ts-hdr).
   ========================================================================== */

@font-face{
  font-family:"Cormorant Tempo";
  src:url("fonts/cormorant-medium.woff2") format("woff2");
  font-weight:500;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Cormorant Tempo";
  src:url("fonts/cormorant-semibold.woff2") format("woff2");
  font-weight:600;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Cormorant Tempo";
  src:url("fonts/cormorant-italic.woff2") format("woff2");
  font-weight:500;font-style:italic;font-display:swap;
}
@font-face{
  font-family:"Manrope Tempo";
  src:url("fonts/manrope-regular.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Manrope Tempo";
  src:url("fonts/manrope-medium.woff2") format("woff2");
  font-weight:500;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Manrope Tempo";
  src:url("fonts/manrope-semibold.woff2") format("woff2");
  font-weight:600;font-style:normal;font-display:swap;
}

/* ── kök ──────────────────────────────────────────────────────────────── */
.ts-hero{
  --ts-red:#ed5720;
  --ts-logo-red:#ec1c24;
  --ts-ink:#20391d;
  --ts-gold:#778663;
  --ts-accent:#9c744e;
  --ts-pad:clamp(28px,5vw,96px);
  --ts-hdr:116px;              /* sitenin yapışkan başlık yüksekliği */

  position:relative;
  min-height:calc(100svh - var(--ts-hdr));
  overflow:hidden;
  isolation:isolate;
  padding:26px var(--ts-pad) 92px;
  color:var(--ts-ink);
  font-family:"Manrope Tempo",Arial,sans-serif;
  background:
    radial-gradient(circle at 79% 41%, color-mix(in srgb, var(--ts-accent) 19%, transparent) 0, transparent 34%),
    radial-gradient(circle at 64% 94%, rgb(237 87 32 / .075), transparent 34%),
    linear-gradient(112deg,#faf7f1 0%,#f4f0ea 47%,#f7f0e4 100%);
  transition:background 900ms ease;
}
/* Pakette bunlar element seçicisiydi (özgüllük 0). :where() ile aynı seviyede
   tutuluyor; yoksa .ts-cta gibi sınıf kurallarını ezerdi. */
:where(.ts-hero) *{box-sizing:border-box}
:where(.ts-hero) :where(a){color:inherit;text-decoration:none}
:where(.ts-hero) :where(button){font:inherit;color:inherit}

.ts-hero::before{
  position:absolute;inset:0;z-index:-4;content:"";
  background:
    linear-gradient(90deg, rgb(32 57 29 / .032) 1px, transparent 1px),
    linear-gradient(rgb(32 57 29 / .026) 1px, transparent 1px);
  background-size:72px 72px;
  -webkit-mask-image:linear-gradient(to right,#000,transparent 74%);
          mask-image:linear-gradient(to right,#000,transparent 74%);
}

.ts-noise{
  position:absolute;inset:0;z-index:8;pointer-events:none;
  opacity:.055;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");
}

.ts-glow{
  position:absolute;width:44vw;height:44vw;right:-15vw;top:-22vw;z-index:-3;
  border-radius:999px;background:rgb(237 87 32 / .09);filter:blur(70px);
}

.ts-year{
  position:absolute;z-index:-2;right:-.02em;top:4vh;
  color:transparent;
  font:600 clamp(170px,27vw,500px)/.78 "Cormorant Tempo",serif;
  letter-spacing:-.08em;
  -webkit-text-stroke:1px rgb(32 57 29 / .075);
  user-select:none;
}

/* ── ızgara ───────────────────────────────────────────────────────────── */
.ts-grid{
  position:relative;z-index:4;
  display:grid;grid-template-columns:minmax(470px,.86fr) minmax(590px,1.14fr);
  gap:clamp(30px,4vw,78px);align-items:center;
  max-width:1800px;min-height:calc(100svh - var(--ts-hdr) - 122px);margin:0 auto;
}

/* metin bloğu pakette dikeyde ortalıydı; istek üzerine yukarı alındı */
.ts-copy{position:relative;z-index:5;padding:clamp(16px,3vh,38px) 0 34px}

.ts-eyebrow{
  display:flex;align-items:center;gap:14px;margin:0 0 23px;
  color:var(--ts-gold);font-size:10px;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;
}
.ts-eyebrow span{width:34px;height:1px;background:var(--ts-red);box-shadow:0 0 14px rgb(237 87 32 / .28)}

.ts-copy h1{
  max-width:760px;margin:0;color:var(--ts-ink);
  font:500 clamp(58px,5.15vw,98px)/.91 "Cormorant Tempo",Georgia,serif;
  letter-spacing:-.042em;
}
.ts-copy h1 em{color:var(--ts-accent);font-weight:500;transition:color 700ms ease}
.ts-copy h1 i{position:relative;display:inline-block;color:var(--ts-logo-red);font-weight:500;font-style:normal}
.ts-final{white-space:nowrap}
.ts-copy h1 i::after{
  position:absolute;right:-.02em;bottom:-.05em;left:.02em;height:.06em;content:"";
  transform:scaleX(0);transform-origin:left;border-radius:100%;
  background:linear-gradient(90deg,var(--ts-logo-red),transparent);
  animation:tsLineReveal 1.2s .8s cubic-bezier(.2,.8,.2,1) forwards;
}

.ts-intro{
  max-width:625px;margin:29px 0 0;
  color:rgb(32 57 29 / .72);font-size:clamp(13px,1vw,16px);line-height:1.82;
}

/* Düğmeler sitenin standart .btn kalıbını kullanıyor (styles.css).
   Burada yalnızca yazı tipi geri alınıyor: .ts-hero içinde Manrope miras
   kalıyordu, sitenin düğmeleri DM Sans olmalı. */
.ts-actions{display:flex;align-items:center;flex-wrap:wrap;gap:14px;margin-top:31px}
.ts-actions .btn{font-family:var(--sans)}

/* ── ürün sahnesi ─────────────────────────────────────────────────────── */
.ts-visual{position:relative;min-width:0;height:clamp(535px,64vh,720px)}

.ts-stage{
  position:absolute;top:42%;left:51%;width:min(35vw,540px);aspect-ratio:1;
  transform:translate(-50%,-50%);overflow:hidden;
  border:1px solid rgb(119 134 99 / .48);border-radius:50%;
  box-shadow:0 34px 80px rgb(80 61 40 / .18), inset 0 0 70px rgb(32 57 29 / .2);
}
.ts-stage::before{
  position:absolute;inset:18px;z-index:3;content:"";
  border:1px solid rgb(250 247 241 / .45);border-radius:inherit;
}
.ts-disc{
  position:absolute;inset:-5%;opacity:0;transform:scale(1.13) rotate(-2deg);
  background-position:center;background-size:cover;
  filter:saturate(.88) contrast(1.07);
  transition:opacity 800ms ease,transform 4.8s ease;
}
.ts-disc.is-visible{opacity:.94;transform:scale(1.25) rotate(3deg)}
.ts-shade{
  position:absolute;inset:0;z-index:2;border-radius:inherit;
  background:
    radial-gradient(circle at 52% 38%, transparent 8%, rgb(32 57 29 / .04) 46%, rgb(32 57 29 / .6) 92%),
    linear-gradient(135deg, rgb(250 247 241 / .06), rgb(32 57 29 / .18));
}
.ts-disclabel{
  position:absolute;z-index:4;top:62px;left:44px;
  color:rgb(255 250 242 / .86);text-shadow:0 2px 14px rgb(32 57 29 / .32);
  font:italic 500 17px/1 "Cormorant Tempo",serif;letter-spacing:.08em;
  transform:rotate(-18deg);
}

.ts-orbit{
  position:absolute;z-index:-1;top:42%;left:51%;
  border:1px solid rgb(32 57 29 / .18);border-radius:50%;transform:translate(-50%,-50%);
}
.ts-orbit::before{
  position:absolute;width:7px;height:7px;content:"";border-radius:50%;
  background:var(--ts-red);box-shadow:0 0 16px rgb(237 87 32 / .42);
}
.ts-orbit--1{width:min(42vw,640px);aspect-ratio:1;animation:tsOrbitSpin 24s linear infinite}
.ts-orbit--1::before{top:19%;right:8%}
.ts-orbit--2{width:min(28vw,430px);aspect-ratio:1;border-style:dashed;animation:tsOrbitSpinReverse 28s linear infinite}
.ts-orbit--2::before{bottom:3%;left:35%}

.ts-stack{position:absolute;z-index:5;top:51%;left:50%;width:100%;height:360px;transform:translate(-50%,-50%)}
.ts-pack{
  position:absolute;top:50%;left:50%;width:min(44vw,680px);margin:0;transform-origin:center;
  transition:transform 950ms cubic-bezier(.2,.78,.18,1),opacity 650ms ease,filter 650ms ease;
}
.ts-pack img{display:block;width:100%;height:auto;filter:drop-shadow(0 28px 22px rgb(68 47 27 / .2))}
.ts-pack.is-active  {z-index:5;opacity:1;transform:translate(-49%,-49%) rotate(-1.8deg) scale(1);filter:saturate(1.02)}
.ts-pack.is-next    {z-index:2;opacity:.18;transform:translate(-27%,-85%) rotate(10deg) scale(.61);filter:saturate(.7) blur(.6px)}
.ts-pack.is-previous{z-index:1;opacity:.12;transform:translate(-80%,-7%) rotate(-9deg) scale(.56);filter:saturate(.7) blur(.7px)}

/* Kart krem zeminin üstünde durduğu için saydamlığı düşük tutuluyor; üst
   çizgi marka kırmızısı, kartı zeminden ayıran tek güçlü sinyal.
   Ürün adı 600'de kalır: Cormorant'ın yüklü en kalın kesimi o, 700 istemek
   tarayıcıya sahte bold ürettirir. */
.ts-caption{
  position:absolute;z-index:7;right:clamp(5px,2vw,40px);bottom:56px;
  display:grid;width:272px;gap:6px;padding:19px 20px 17px;
  border-top:3px solid var(--ts-red);
  background:rgb(250 247 241 / .97);backdrop-filter:blur(14px);
  box-shadow:0 20px 44px rgb(79 61 41 / .22);
}
.ts-caption p,.ts-caption strong,.ts-caption small{margin:0}
.ts-caption p{color:var(--ts-red);font-size:8px;font-weight:700;letter-spacing:.18em;text-transform:uppercase}
.ts-caption strong{font:600 21px/1.08 "Cormorant Tempo",serif}
.ts-caption small{color:rgb(32 57 29 / .72);font-size:9px;font-weight:600;letter-spacing:.06em}

.ts-counter{position:absolute;z-index:7;top:28px;right:3px;display:flex;align-items:baseline;gap:10px}
.ts-counter strong{font:500 33px/1 "Cormorant Tempo",serif}
.ts-counter span{width:23px;height:1px;background:rgb(32 57 29 / .24)}
.ts-counter small{color:rgb(32 57 29 / .48);font-size:9px}

.ts-controls{position:absolute;z-index:7;bottom:57px;left:4px;display:flex;gap:8px}
.ts-controls button{
  display:grid;width:42px;height:42px;cursor:pointer;place-items:center;
  border:1px solid rgb(32 57 29 / .22);border-radius:50%;
  background:rgb(250 247 241 / .74);font-size:16px;
  transition:border-color 220ms ease,background 220ms ease,transform 220ms ease;
}
.ts-controls button:hover{transform:translateY(-2px);border-color:var(--ts-red);background:rgb(237 87 32 / .09)}

/* ── alt şerit ────────────────────────────────────────────────────────── */
.ts-footer{
  position:absolute;z-index:9;right:var(--ts-pad);bottom:48px;left:var(--ts-pad);
  display:flex;align-items:center;justify-content:space-between;
  max-width:1800px;margin:auto;
}
.ts-tabs{display:flex;width:min(66vw,820px);gap:clamp(18px,3vw,56px)}
.ts-tabs button{
  position:relative;display:grid;width:100%;min-width:0;
  grid-template-columns:auto 1fr;gap:8px;padding:0 0 13px;cursor:pointer;
  border:0;border-bottom:1px solid rgb(32 57 29 / .16);background:transparent;text-align:left;
}
.ts-tabno{color:rgb(32 57 29 / .38);font-size:8px;transition:color 220ms ease}
.ts-tabtxt{
  overflow:hidden;color:rgb(32 57 29 / .5);font-size:9px;font-weight:500;
  letter-spacing:.09em;text-overflow:ellipsis;text-transform:uppercase;white-space:nowrap;
  transition:color 220ms ease;
}
.ts-tabs button:hover .ts-tabtxt,
.ts-tabs button.is-current .ts-tabtxt,
.ts-tabs button.is-current .ts-tabno{color:var(--ts-ink)}
.ts-tabbar{position:absolute;right:0;bottom:-1px;left:0;height:1px}
.ts-tabbar i{
  display:block;width:0;height:100%;background:var(--ts-red);
  box-shadow:0 0 10px rgb(237 87 32 / .35);
  animation:tsTabProgress 5.2s linear forwards;
}

.ts-toggle{
  display:inline-flex;align-items:center;gap:9px;cursor:pointer;border:0;background:transparent;
  color:rgb(32 57 29 / .56);font-size:8px;letter-spacing:.14em;text-transform:uppercase;
}
.ts-toggle span{
  display:grid;width:29px;height:29px;place-items:center;
  border:1px solid rgb(32 57 29 / .2);border-radius:50%;color:var(--ts-ink);font-size:8px;
}

/* yeşil şerit: paketteki 7px okunmuyordu, tipografi büyütüldü */
.ts-marquee{
  position:absolute;z-index:10;right:0;bottom:0;left:0;height:38px;overflow:hidden;
  border-top:1px solid rgb(119 134 99 / .3);background:#20391d;
  color:rgb(250 247 241 / .82);font-size:11px;font-weight:500;
  letter-spacing:.18em;line-height:38px;text-transform:uppercase;
}
.ts-marquee div{display:flex;width:max-content;gap:34px;white-space:nowrap;animation:tsMarquee 28s linear infinite}
.ts-marquee i{color:#ed5720;font-size:8px;font-style:normal}

.ts-particles{position:absolute;z-index:2;inset:0;overflow:hidden;pointer-events:none}
.ts-particles span{
  position:absolute;top:var(--y);left:var(--x);width:var(--size);height:var(--size);
  opacity:var(--alpha);border-radius:50%;background:var(--ts-gold);
  box-shadow:0 0 8px rgb(119 134 99 / .38);
  animation:tsParticleFloat var(--duration) ease-in-out infinite;
  animation-delay:var(--delay);
}

@keyframes tsLineReveal{to{transform:scaleX(1)}}
@keyframes tsTabProgress{to{width:100%}}
@keyframes tsOrbitSpin{to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes tsOrbitSpinReverse{to{transform:translate(-50%,-50%) rotate(-360deg)}}
@keyframes tsParticleFloat{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(16px,-28px,0)}}
@keyframes tsMarquee{to{transform:translateX(-50%)}}

/* ── duyarlı ──────────────────────────────────────────────────────────── */
@media (max-width:1180px){
  .ts-hero{padding-top:22px}
  .ts-grid{grid-template-columns:minmax(420px,.88fr) minmax(480px,1.12fr);gap:16px}
  .ts-copy h1{font-size:clamp(56px,6.6vw,80px)}
  .ts-pack{width:min(47vw,620px)}
  .ts-caption{right:0}
}

/* Pakette .final-line yalnızca ≤640'ta sarılıyor. 961–1180 arasında metin
   sütunu 420px'e sabitlendiğinden "ona Tempo katıyoruz." satırı ürün
   görselinin altına taşıyordu; bu aralıkta sarmaya izin veriliyor. */
@media (min-width:961px) and (max-width:1180px){
  .ts-final{white-space:normal}
}

@media (max-width:960px){
  .ts-hero{min-height:auto;padding-bottom:128px}
  .ts-grid{grid-template-columns:1fr;min-height:auto;margin-top:0}
  .ts-copy{padding:30px 0 4px}
  .ts-copy h1{max-width:780px;font-size:clamp(58px,9vw,84px)}
  .ts-intro{max-width:700px}
  .ts-visual{width:min(100%,760px);height:560px;justify-self:center}
  .ts-stage{width:min(58vw,450px)}
  .ts-orbit--1{width:min(69vw,560px)}
  .ts-orbit--2{width:min(47vw,380px)}
  .ts-pack{width:min(76vw,610px)}
  .ts-footer{bottom:49px}
  .ts-tabs{width:calc(100% - 110px)}
}

@media (max-width:640px){
  .ts-hero{--ts-pad:20px;--ts-hdr:88px;padding-top:16px;padding-bottom:118px}
  .ts-copy{padding-top:24px}
  .ts-eyebrow{margin-bottom:18px;font-size:8px}
  .ts-copy h1{font-size:clamp(46px,14.2vw,66px);line-height:.94}
  .ts-final{white-space:normal}
  .ts-intro{margin-top:23px;font-size:12px;line-height:1.72}
  .ts-actions{gap:10px;margin-top:25px}
  .ts-actions .btn{flex:1 1 150px;justify-content:center;padding:14px 16px;font-size:13px;gap:9px}
  .ts-visual{height:410px;margin-top:12px}
  .ts-stage{top:43%;width:min(86vw,360px)}
  .ts-orbit{top:43%}
  .ts-orbit--1{width:min(104vw,430px)}
  .ts-orbit--2{width:min(70vw,290px)}
  .ts-stack{top:53%;height:270px}
  .ts-pack{width:min(102vw,460px)}
  .ts-pack.is-active  {transform:translate(-50%,-48%) rotate(-1.5deg) scale(1)}
  .ts-pack.is-next    {transform:translate(-22%,-87%) rotate(10deg) scale(.53)}
  .ts-pack.is-previous{transform:translate(-81%,-6%) rotate(-9deg) scale(.49)}
  .ts-caption{right:0;bottom:8px;width:226px;padding:14px 15px 13px}
  .ts-controls{bottom:10px}
  .ts-controls button{width:36px;height:36px}
  .ts-counter{top:3px}
  .ts-footer{right:var(--ts-pad);bottom:43px;left:var(--ts-pad)}
  .ts-tabs{width:calc(100% - 45px);gap:10px}
  .ts-tabtxt{display:none}
  .ts-tabs button{grid-template-columns:1fr}
  .ts-toggle{width:31px;overflow:hidden;gap:0;white-space:nowrap}
  .ts-toggle span{flex:0 0 29px}
  .ts-year{top:90px}
}

/* pakette global olan kural, sliderla sınırlandırıldı */
@media (prefers-reduced-motion:reduce){
  .ts-hero,.ts-hero *,.ts-hero *::before,.ts-hero *::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
}