/* ============ 3M GRAFİK — v5 NOVAIRE ESİNLİ (monokrom) ============ */
:root{
  --zemin:#eceded;
  --yuzey:#f7f7f6;
  --murekkep:#111210;
  --gri:#82837f;
  --cizgi:rgba(17,18,16,.1);
  --vurgu:#111210;
  --sans:'Hanken Grotesk',Helvetica,Arial,sans-serif;
  --serif:'Instrument Serif',Georgia,serif;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--zemin);
  color:var(--murekkep);
  font-family:var(--sans);
  font-weight:400;
  line-height:1.6;
}
::selection{background:var(--murekkep);color:var(--zemin)}
a{color:inherit;text-decoration:none}
button{font-family:inherit;background:none;border:0;cursor:pointer;color:inherit}
em{font-family:var(--serif);font-style:italic;font-weight:400}
h2{font-weight:600;letter-spacing:-.02em}

/* ---- haplar ---- */
.hap{
  display:inline-block;border-radius:999px;
  padding:.55rem 1.3rem;font-size:.85rem;font-weight:500;
  transition:transform .2s,box-shadow .2s,background .2s,color .2s;
}
.hap-siyah{background:var(--murekkep);color:#fff}
.hap-siyah:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(17,18,16,.25)}
.hap-gri{background:#e2e2df;color:var(--gri);font-size:.78rem;padding:.35rem 1rem}
.hap.buyuk{padding:1rem 2.2rem;font-size:1.05rem}

/* ---- nav ---- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:1.1rem clamp(1.2rem,4vw,3.2rem);
  background:linear-gradient(rgba(236,237,237,.92),rgba(236,237,237,.75) 70%,transparent);
  backdrop-filter:blur(8px);
}
.nav-marka{font-weight:700;font-size:1.05rem;letter-spacing:-.01em}
.nav-orta{display:flex;gap:2rem}
.nav-orta a{font-size:.92rem;color:var(--gri);transition:color .2s}
.nav-orta a:hover{color:var(--murekkep)}

/* ---- hero ---- */
.hero{
  position:relative;
  min-height:100svh;
  overflow:hidden;
  display:flex;align-items:flex-end;justify-content:center;
}
.dev-yazi{
  position:absolute;left:50%;top:38%;
  transform:translate(-50%,-50%);
  font-weight:700;letter-spacing:.02em;
  font-size:clamp(2.8rem,12vw,10.5rem);
  color:#dcdddb;
  white-space:nowrap;user-select:none;
}
#foto-fx{
  position:absolute;z-index:1;
  left:50%;bottom:0;transform:translateX(-50%);
  width:min(98vw,840px);height:92svh;
  pointer-events:none;
}
.hero-foto{
  position:relative;z-index:2;
  height:min(86svh,900px);width:auto;
  filter:grayscale(1) contrast(1.06);
}
.hero-ad{
  position:absolute;z-index:3;
  bottom:6svh;left:50%;transform:translateX(-50%);
  width:100%;text-align:center;
  font-weight:300;letter-spacing:-.02em;line-height:.95;
  font-size:clamp(.9rem,1.9vw,1.75rem);
  white-space:nowrap;
  background:linear-gradient(180deg,#0091c0 45%,rgba(0,145,192,.3));
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
  pointer-events:none;
}
.mobil-kir{display:none}

/* yüzen etiketler */
.etiket{
  position:absolute;z-index:4;
  background:#e2e2df;color:#5c5d59;
  border-radius:999px;padding:.5rem 1.1rem;
  font-size:.85rem;font-weight:500;
  animation:sal 6s ease-in-out infinite;
  cursor:grab;user-select:none;touch-action:none;
}
.etiket.tasiniyor{
  cursor:grabbing;animation:none;z-index:6;
  box-shadow:0 12px 28px rgba(17,18,16,.22);
}
.e1{left:12%;top:24%}
.e2{left:7%;top:37%;animation-delay:-1.2s}
.e3{left:13%;top:50%;animation-delay:-2.6s}
.e4{right:12%;top:24%;animation-delay:-.7s}
.e5{right:7%;top:37%;animation-delay:-1.9s}
.e6{right:13%;top:50%;animation-delay:-3.2s}
@keyframes sal{50%{transform:translateY(-9px)}}

.balon{
  position:absolute;z-index:4;
  background:#fff;border-radius:999px;
  padding:.55rem 1.15rem;font-size:.85rem;font-weight:500;
  box-shadow:0 8px 22px rgba(17,18,16,.12);
  animation:sal 5s ease-in-out infinite;
}
.b1{left:17%;bottom:26svh;transform:rotate(-6deg)}
.b2{right:15%;bottom:23svh;transform:rotate(4deg);animation-delay:-2s}

/* ---- bölümler ---- */
.bolum{max-width:1080px;margin:0 auto;padding:7rem clamp(1.2rem,4vw,3rem) 2rem}
.bolum-bas{margin-bottom:2.6rem}
.bolum-bas .hap{margin-bottom:1.2rem}
.bolum-bas h2,.model-cumle{font-size:clamp(2rem,4.6vw,3.2rem);line-height:1.1}

/* ---- hakkımda ---- */
.hakkimda{
  display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:3.5rem;align-items:center;padding-top:8rem;
}
.hk-foto{margin:0;background:var(--yuzey);border-radius:24px;overflow:hidden}
.hk-foto img{
  display:block;width:100%;height:auto;
  filter:grayscale(1) contrast(1.05);
}
.hk-metin h2{font-size:clamp(2rem,4.4vw,3rem);margin:1.1rem 0 .4rem}
.hk-rol{font-size:1.08rem;font-weight:600;color:#3c3d3a;margin-bottom:1rem}
.hk-p{color:var(--gri);max-width:52ch;margin-bottom:1.8rem}
.hk-alt{display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap}
.durum{display:inline-flex;align-items:center;gap:.5rem;font-size:.88rem;color:var(--gri)}
.durum i{width:9px;height:9px;border-radius:50%;background:#3fae5a;box-shadow:0 0 0 4px rgba(63,174,90,.18)}
.durum.ortala{justify-content:center}

/* ---- işler (akordeon) ---- */
.dizin{
  list-style:none;background:var(--yuzey);
  border-radius:24px;padding:.6rem 1.8rem;
}
.satir{border-bottom:1px solid var(--cizgi)}
.satir:last-child{border-bottom:0}
.satir-bas{
  width:100%;display:grid;
  grid-template-columns:3.2rem 1fr 2rem;
  align-items:center;gap:1rem;
  padding:1.35rem .2rem;text-align:left;
}
.no{font-size:.82rem;color:var(--gri);font-weight:500}
.ad{
  font-size:clamp(1.2rem,2.6vw,1.7rem);font-weight:600;letter-spacing:-.015em;
  transition:transform .25s;
}
.satir-bas:hover .ad{transform:translateX(8px)}
.arti{
  font-size:1.5rem;font-weight:300;color:var(--gri);text-align:center;
  transition:transform .3s,color .3s;
}
.satir[data-acik="true"] .arti{transform:rotate(45deg);color:var(--murekkep)}
.satir-icerik{overflow:hidden;max-height:0;transition:max-height .45s ease}
.satir-icerik p{max-width:62ch;color:var(--gri);padding:0 .2rem 1.5rem 4.2rem;font-size:.95rem}

/* ---- model ---- */
.model-aciklama{color:var(--gri);max-width:62ch;margin:-1rem 0 2.8rem}
.avantajlar{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}
.madde{
  background:var(--yuzey);border-radius:20px;padding:1.6rem 1.7rem;
  transition:transform .25s,box-shadow .25s;
}
.madde:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(17,18,16,.08)}
.madde-no{
  font-family:var(--serif);font-style:italic;font-size:1.3rem;
  color:var(--vurgu);display:block;margin-bottom:.4rem;
  transition:color .35s;
}
.madde p{font-size:.93rem;color:var(--gri)}
.madde strong{color:var(--murekkep);font-weight:600}

/* ---- teneffüs ---- */
.oyunlar{display:flex;gap:.8rem;flex-wrap:wrap}
.oyun-btn{
  background:var(--yuzey);border:1px solid var(--cizgi);
  border-radius:999px;padding:.8rem 1.5rem;
  font-size:.9rem;font-weight:500;
  transition:transform .2s,box-shadow .2s,background .2s,color .2s;
}
.oyun-btn:hover{
  background:var(--murekkep);color:#fff;
  transform:translateY(-3px);box-shadow:0 10px 24px rgba(17,18,16,.2);
}
.teneffus-not{
  margin-top:1.4rem;color:var(--gri);
  font-family:var(--serif);font-style:italic;font-size:1.05rem;
}

/* ---- iletişim ---- */
.iletisim{text-align:center;padding-bottom:6rem}
.son-cumle{font-size:clamp(2.4rem,6vw,4.4rem);margin:1.2rem 0 .6rem}
.son-cumle em{color:var(--vurgu);transition:color .35s}
.son-alt{color:var(--gri);margin-bottom:2.2rem}

/* ---- footer ---- */
.alt{
  max-width:1080px;margin:0 auto;
  padding:2rem clamp(1.2rem,4vw,3rem) 2.6rem;
  border-top:1px solid var(--cizgi);
}
.alt-kolonlar{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:2rem;margin-bottom:2.6rem;
}
.alt-k{display:flex;flex-direction:column;gap:.55rem;font-size:.88rem;color:var(--gri)}
.alt-k b{color:var(--murekkep);font-weight:600;margin-bottom:.3rem}
.alt-k a:hover{color:var(--murekkep)}
.alt-cizgi{
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  font-size:.8rem;color:var(--gri);
  border-top:1px solid var(--cizgi);padding-top:1.4rem;
}

/* ---- kaçan buton oyunu ---- */
#yakalaBtn.kacak{
  position:fixed;z-index:60;
  transition:left .16s ease,top .16s ease,transform .16s ease;
}
#yakalaBtn.yoruldu{
  background:var(--murekkep);color:#fff;
  animation:titre .25s ease infinite;
}
@keyframes titre{25%{transform:translate(-1px,1px)}75%{transform:translate(1px,-1px)}}
.yakala-skor{
  margin-top:1rem;min-height:1.5em;
  font-family:var(--serif);font-style:italic;
  font-size:1.05rem;color:var(--gri);
}

/* ---- sayfayı salla ---- */
@keyframes salla{
  10%{transform:translate(-7px,2px) rotate(-.4deg)}
  30%{transform:translate(6px,-3px) rotate(.4deg)}
  50%{transform:translate(-5px,3px) rotate(-.3deg)}
  70%{transform:translate(4px,-2px) rotate(.25deg)}
  90%{transform:translate(-2px,1px)}
}
body.sallaniyor{animation:salla .65s ease}

/* ---- baskı hatası ---- */
body.baski-hatasi :is(h1,h2,h3,p,a,button,span,b,i,em,strong){
  text-shadow:2.5px 0 rgba(213,0,104,.5),-2.5px 0 rgba(0,174,239,.5);
}
body.baski-hatasi main{transform:rotate(.35deg)}

/* ---- uzaydan istanbul'a ---- */
.uzay{
  position:fixed;inset:0;z-index:320;background:#000;
  opacity:0;pointer-events:none;transition:opacity .45s ease;
}
.uzay.acik{opacity:1;pointer-events:auto;cursor:pointer}
.uzay canvas{display:block;width:100%;height:100%}

/* ---- reveal ---- */
.g{opacity:0;transform:translateY(16px);transition:opacity .7s ease,transform .7s ease}
.g.gel{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  .g{opacity:1;transform:none}
}

/* ---- responsive ---- */
@media (max-width:900px){
  .nav-orta{display:none}
  .hakkimda{grid-template-columns:1fr;gap:2rem;padding-top:7rem}
  .hk-foto{max-width:340px}
  .avantajlar{grid-template-columns:1fr}
  .alt-kolonlar{grid-template-columns:1fr 1fr}
  .etiket{font-size:.72rem;padding:.4rem .8rem}
  .e2,.e5{display:none}
  .b1{left:6%}
  .b2{right:5%}
  /* isim fotoğrafın altına iner (koyu takım üstünde okunmuyor) */
  .hero{flex-direction:column;align-items:center;justify-content:flex-end;padding-bottom:2rem}
  .hero-foto{height:min(66svh,640px)}
  .hero-ad{
    position:static;transform:none;
    white-space:normal;line-height:1;
    background:none;color:var(--murekkep);
    margin-top:.6rem;
  }
  .mobil-kir{display:inline}
  .b1{bottom:38svh}
  .b2{bottom:34svh}
  .satir-icerik p{padding-left:.2rem}
  .satir-bas{grid-template-columns:2.4rem 1fr 1.6rem}
}