/* ============================================================
   TOWARDS ETERNITY JOBS — Stylesheet
   Renkleri buradan değiştirebilirsiniz:
   ============================================================ */
:root{
  --bg:           #0A0A0F;   /* sayfa zemini (koyu siyah)            */
  --bg-card:      #14141C;   /* kart zeminleri                        */
  --bg-card-2:    #1C1C26;   /* iç kutu zeminleri                     */
  --orange:       #E8761F;   /* ana vurgu — logodaki turuncu          */
  --orange-hover: #C95F10;   /* buton hover                           */
  --gold:         #F4A93C;   /* ikincil vurgu — rakamlar / linkler    */
  --white:        #FFFFFF;
  --text:         #E9E7E2;   /* gövde metni                           */
  --text-dim:     #9A97A0;   /* soluk metin                           */
  --radius:       18px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--text);
  font-family:'Nunito',sans-serif;
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%}
a{color:var(--gold);text-decoration:none}
a:hover{text-decoration:underline}

h1,h2,h3,.display{font-family:'Baloo 2',cursive;font-weight:700;color:var(--white)}

.container{max-width:1180px;margin:0 auto;padding:0 24px}

/* ---------- Header ---------- */
.site-header{
  position:absolute;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;gap:12px;
  padding:22px 32px;
}
.site-header img{width:44px;height:44px}
.site-header .brand{font-family:'Baloo 2',cursive;font-weight:800;font-size:1.25rem;color:var(--white);line-height:1.1}
.site-header .brand span{color:var(--orange)}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:100vh;display:flex;align-items:center;justify-content:center;overflow:hidden}
.hero-grid{
  position:absolute;inset:-60px;
  display:flex;flex-direction:column;justify-content:center;gap:14px;
  z-index:1;
}
/* her satır sağdan sola kayar */
.row{display:flex;width:max-content;will-change:transform;
     animation:scrollLeft 45s linear infinite}
.row-b{animation-duration:58s;animation-delay:-12s}  /* satırlar farklı hızda -> hizalanmaz */
.row-c{animation-duration:50s;animation-delay:-26s}
.row:hover{animation-play-state:paused}              /* fareyle gelince o satır durur */
@keyframes scrollLeft{from{transform:translateX(0)} to{transform:translateX(-50%)}}

.tile{
  border-radius:14px;flex:0 0 32vw;aspect-ratio:16/9;overflow:hidden;position:relative;
  margin-right:14px;                           /* döngünün kesintisiz olması için gap yerine margin */
  background:linear-gradient(135deg,#1d1722,#241a14);
}
.tile img{
  width:100%;height:100%;object-fit:cover;position:relative;z-index:1;
}
/* görsel eklenmemiş kutular için hafif desen (görsel gelince üstü kapanır) */
.tile::after{
  content:"";position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(circle at 30% 30%, rgba(232,118,31,.16), transparent 55%),
    radial-gradient(circle at 75% 70%, rgba(244,169,60,.10), transparent 50%);
}
/* daha açık karartma: ortada yazı için koyu, kenarlara doğru açılır */
.hero-overlay{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(ellipse 80% 70% at 50% 48%, rgba(8,8,12,.8), rgba(8,8,12,.38));
}
/* içerik üstte; sadece buton tıklanabilir kalsın, kalan alan hover'ı kutulara geçirsin */
.hero-content{position:relative;z-index:3;text-align:center;padding:120px 24px;max-width:900px;pointer-events:none}
.hero-content .btn{pointer-events:auto}
.hero-logo{width:96px;height:96px;margin:0 auto 8px}
.hero-brand{font-family:'Baloo 2',cursive;font-weight:800;font-size:1.5rem;color:var(--white);margin-bottom:34px}
.hero-brand span{color:var(--orange)}
.hero h1{font-size:clamp(2.6rem,7vw,5rem);line-height:1.05;letter-spacing:-.5px}
.hero h1 .accent{color:var(--orange)}
.hero .script{
  font-family:'Caveat',cursive;font-size:clamp(1.6rem,3.5vw,2.4rem);
  color:var(--gold);margin-top:14px;
}
.btn{
  display:inline-block;font-family:'Baloo 2',cursive;font-weight:700;
  background:var(--orange);color:var(--white);
  padding:16px 44px;border-radius:999px;font-size:1.15rem;
  box-shadow:0 10px 35px rgba(232,118,31,.35);
  transition:background .2s, transform .15s;
}
.btn:hover{background:var(--orange-hover);text-decoration:none;transform:translateY(-2px)}
.hero .btn{margin-top:42px}

/* ---------- Section headings ---------- */
section{padding:90px 0}
.sec-head{text-align:center;margin-bottom:54px}
.sec-head h2{font-size:clamp(2rem,4.5vw,2.8rem)}
.squiggle{width:160px;height:14px;margin:6px auto 0;display:block}

/* ---------- About grid ---------- */
.about-grid{display:grid;grid-template-columns:1.35fr 1fr;gap:24px}
.card{
  background:var(--bg-card);border-radius:var(--radius);padding:30px;
  border:1px solid rgba(255,255,255,.04);
}
.card .label{
  font-family:'Baloo 2',cursive;font-weight:700;font-size:.8rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--orange);margin-bottom:18px;
}
.inner-box{background:var(--bg-card-2);border-radius:12px;padding:22px;font-size:.95rem}
.inner-box p+p{margin-top:12px}
.card .btn{display:block;text-align:center;margin-top:22px;padding:14px;box-shadow:none}

.numbers .num{margin-bottom:26px}
.numbers .num:last-child{margin-bottom:0}
.numbers .big{
  font-family:'Baloo 2',cursive;font-weight:800;font-size:2.3rem;line-height:1.1;color:var(--white);
}
.numbers .big span{color:var(--gold)}
.numbers .cap{color:var(--text-dim);font-size:.9rem}

.about-grid-2{display:grid;grid-template-columns:1fr 1.6fr;gap:24px;margin-top:24px}
.community h3{font-size:1.15rem;margin-bottom:14px}
.community .pin{margin-right:6px}
.community .note{
  background:var(--bg-card-2);border-radius:10px;padding:12px 16px;
  font-size:.85rem;color:var(--text-dim);margin-bottom:18px;
}
.community iframe{width:100%;height:230px;border:0;border-radius:12px;filter:saturate(.85)}

.perks h3{font-size:1.3rem;margin-bottom:22px}
.perk-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.perk{
  background:var(--bg-card-2);border-radius:12px;padding:22px 12px;text-align:center;
  font-size:.83rem;line-height:1.35;color:var(--text);
  border:1px solid rgba(255,255,255,.03);
  transition:transform .15s,border-color .15s;
}
.perk:hover{transform:translateY(-3px);border-color:rgba(232,118,31,.4)}
.perk .icon{font-size:1.6rem;display:block;margin-bottom:10px;color:var(--orange)}

/* ---------- Open roles ---------- */
.roles{max-width:760px;margin:0 auto}
.role{
  display:block;background:var(--bg-card);border-radius:14px;
  padding:22px 28px;margin-bottom:16px;
  border:1px solid rgba(255,255,255,.04);
  transition:transform .15s,border-color .15s;
}
.role:hover{transform:translateY(-2px);border-color:rgba(232,118,31,.5);text-decoration:none}
.role .title{font-family:'Baloo 2',cursive;font-weight:700;font-size:1.1rem;color:var(--white)}
.role .meta{color:var(--text-dim);font-size:.85rem;margin-top:4px}

/* ---------- Footer ---------- */
footer{padding:50px 0;text-align:center;color:var(--text-dim);font-size:.85rem;border-top:1px solid rgba(255,255,255,.05)}
footer img{width:34px;margin:0 auto 12px;opacity:.9}

/* ---------- Job detail page ---------- */
.job-hero{
  position:relative;padding:120px 24px 70px;text-align:center;overflow:hidden;
  background:
    linear-gradient(rgba(6,6,10,.55),rgba(10,10,15,.96)),
    linear-gradient(120deg,#3a2010,#1a0f1e 55%,#0d1a14);
}
.job-hero h1{font-size:clamp(1.8rem,4.5vw,3rem)}
.job-wrap{max-width:860px;margin:0 auto;padding:50px 24px 90px}
.job-top{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:40px}
.job-top img{width:54px}
.back{display:inline-block;font-size:.9rem;margin:14px 0 18px}
.job-title{font-size:2.2rem;color:var(--gold)}
.job-loc{color:var(--text-dim);font-size:.95rem;margin-top:4px}
.job-wrap h2{font-size:1.45rem;margin:42px 0 16px}
.job-wrap h3{font-size:1.1rem;margin:28px 0 12px}
.job-wrap p{margin-bottom:16px}
.job-wrap ul{margin:0 0 16px 22px}
.job-wrap li{margin-bottom:9px}
.alert-box{
  border:1px solid rgba(255,255,255,.12);border-radius:12px;
  padding:20px 24px;margin-top:40px;display:flex;gap:14px;align-items:flex-start;
}
.alert-box .bell{color:var(--gold);font-size:1.2rem}
.alert-box b{color:var(--white)}

/* ---------- Responsive ---------- */
@media(max-width:900px){
  .about-grid,.about-grid-2{grid-template-columns:1fr}
  .perk-grid{grid-template-columns:repeat(2,1fr)}
  .tile{flex-basis:60vw;margin-right:12px}      /* mobilde ekrana ~1.5 kare sığsın */
}
/* hareketi azaltmayı tercih eden kullanıcılar için animasyonu durdur */
@media(prefers-reduced-motion:reduce){
  .row{animation:none}
}